:root {
  --ink: #0e0e0e;
  --paper: #ffffff;
  --soft: #f4f2ec;
  --hair: #0e0e0e;
  --red: #d93a2b;
  --blue: #0f4c97;
  --yellow: #f2b300;
  --muted: #6b665c;
  --sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.6 var(--sans);
}

.top { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; background: var(--ink); color: #fff; font-weight: 700; }
.top .ring { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; }
.top .who { margin-left: auto; font: 10px var(--mono); letter-spacing: .16em; opacity: .75; }

main { padding: 12px; }

section { border: 2px solid var(--hair); margin-bottom: 10px; }
section > h3 { margin: 0; padding: 5px 10px; background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .18em; font-weight: 600; }
.body { padding: 10px; }

input[type="text"], input[type="number"], textarea, select {
  width: 100%; border: 2px solid var(--hair); background: #fff; color: var(--ink);
  font: 13px/1.5 var(--sans); padding: 6px 8px; margin: 4px 0;
}
textarea { resize: vertical; }
input[type="color"] { width: 46px; height: 26px; border: 2px solid var(--hair); background: #fff; padding: 0; }

.line { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.line > span { flex: 0 0 64px; color: var(--muted); }

.sw { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; font-size: 13px; user-select: none; }
.sw input { appearance: none; width: 34px; height: 18px; border: 2px solid var(--ink); background: #fff; position: relative; cursor: pointer; margin: 0; flex: 0 0 auto; }
.sw input::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--ink); transition: left .12s; }
.sw input:checked { background: var(--ink); }
.sw input:checked::after { left: 17px; background: #fff; }
.sw .desc { color: var(--muted); font-size: 11px; }

.cluerow { border: 2px solid var(--hair); margin-bottom: 8px; }
.cluerow.open { border-color: var(--blue); }
.cluhead { display: flex; align-items: center; gap: 8px; padding: 7px 9px; cursor: pointer; background: var(--soft); }
.clutitle { flex: 1 1 auto; font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clutag { font: 10px var(--mono); letter-spacing: .08em; color: var(--muted); border: 1px solid var(--muted); padding: 1px 5px; }
.cluform { padding: 8px 9px; border-top: 1px solid var(--hair); }

.spotrow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); padding: 5px 8px; margin-top: 6px; font-size: 12px; }
.spotname { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
button.act { border: 2px solid var(--hair); background: #fff; color: var(--ink); font: 600 13px/1.2 var(--sans); padding: 9px 6px; cursor: pointer; }
button.act.hot { background: var(--red); color: #fff; }
button.mini { border: 2px solid var(--hair); background: #fff; font: 600 12px/1.2 var(--sans); padding: 6px 8px; cursor: pointer; }
button.act:active, button.mini:active { transform: translateY(1px); }
.minibar { display: flex; gap: 8px; margin-top: 8px; }

.note { font: 11px/1.5 var(--sans); color: var(--muted); margin: 6px 0; }
.foot { font: 10px var(--mono); color: var(--muted); letter-spacing: .06em; text-align: right; padding: 4px 2px 16px; }

/* 队员条设置 */
.list { display: flex; flex-direction: column; gap: 6px; }
.prow { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ink); padding: 6px 8px; font-size: 13px; }
.prow .nm { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }