:root {
  --bg: #f6f7f9; --panel: #ffffff; --text: #1d232b; --muted: #6b7480; --line: #dfe3e8; --accent: #1f6feb;
  --accent-soft: #e7f0ff; --ok: #1a7f37; --bad: #cf222e; --roi: #ffd400; --roi-sel: #00b4ff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171b; --panel: #1c2026; --text: #e6e9ee; --muted: #9aa3ae; --line: #2d333b; --accent: #4c8dff;
    --accent-soft: #1d2b44; --ok: #3fb950; --bad: #ff6b6b; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
button, input, select { font: inherit; color: inherit; }
kbd { font: 11px ui-monospace, Menlo, monospace; padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.muted { color: var(--muted); }
.error { color: var(--bad); min-height: 1.4em; margin: 8px 0 0; }

.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.card { width: min(360px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; display: grid; gap: 12px; }
.card h1 { margin: 0; font-size: 20px; }
.card p { margin: 0; }
.card label { display: grid; gap: 4px; color: var(--muted); }
.card input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.primary { padding: 9px; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }

.app { height: 100%; display: grid; grid-template-columns: 270px 1fr; }
.side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.side-head { padding: 12px 14px 6px; }
.brand { font-weight: 600; }
.who { color: var(--muted); font-size: 12px; }
.link { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; }
.progress { padding: 4px 14px 8px; font-size: 12px; }
.bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 4px; }
.bar span { display: block; height: 100%; width: 0; background: var(--ok); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 14px 10px; }
.filters input { grid-column: 1 / -1; }
.filters input, .filters select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); min-width: 0; }
.list { flex: 1; overflow: auto; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 14px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px; }
.row:hover { background: var(--bg); }
.row.cur { background: var(--accent-soft); }
.row .id { font-family: ui-monospace, Menlo, monospace; }
.row .n { color: var(--muted); font-size: 12px; }
.row .d { width: 14px; text-align: center; color: var(--ok); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.group { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg { border: 0; background: none; padding: 5px 10px; cursor: pointer; }
.seg[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg[aria-pressed="true"] kbd { color: #fff; border-color: rgba(255,255,255,.5); }
.tool { border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool[aria-pressed="true"] kbd { color: #fff; border-color: rgba(255,255,255,.5); }
.tool:disabled { opacity: .45; cursor: default; }
.check, .range { display: inline-flex; align-items: center; gap: 6px; }
.range input { width: 90px; }
.sep { width: 1px; height: 22px; background: var(--line); }
.grow { flex: 1; }
.save { font-size: 12px; min-width: 9em; text-align: right; }
.save.bad { color: var(--bad); }
.info { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid var(--line); }
.pair { font-family: ui-monospace, Menlo, monospace; font-weight: 600; }
.chip { display: inline-block; padding: 0 7px; border-radius: 9px; border: 1px solid var(--line); font-size: 12px; margin-right: 4px; }
.chip.warn { border-color: var(--bad); color: var(--bad); }
.viewer { position: relative; flex: 1; min-height: 0; background: #fff; }
.viewer.drawing, .viewer.drawing * { cursor: crosshair !important; }
.empty { position: absolute; inset: 0; display: grid; place-items: center; color: #888; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 6px 12px; font-size: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.legend .hint { margin-left: auto; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.sw.t { background: rgb(220, 30, 40); } .sw.n { background: rgb(60, 60, 60); } .sw.s { background: rgb(60, 170, 80); } .sw.o { background: rgb(165, 70, 225); }

.roi { position: absolute; border: 2px solid var(--roi); box-shadow: 0 0 0 1px rgba(0,0,0,.55); cursor: move; touch-action: none; }
.roi.sel { border-color: var(--roi-sel); }
.roi.pending { border-style: dashed; }
.roi .hd { position: absolute; width: 12px; height: 12px; background: var(--roi-sel); border: 1px solid #000; display: none; touch-action: none; }
.roi.sel .hd { display: block; }
.roi .nw { left: -7px; top: -7px; cursor: nwse-resize; } .roi .ne { right: -7px; top: -7px; cursor: nesw-resize; }
.roi .sw2 { left: -7px; bottom: -7px; cursor: nesw-resize; } .roi .se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.roi.other { pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.roi.other .who { position: absolute; left: -2px; top: -19px; padding: 0 5px; font-size: 11px; line-height: 17px; color: #fff; white-space: nowrap; border-radius: 3px 3px 0 0; }
.others { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 5px 12px; font-size: 12px; border-bottom: 1px solid var(--line); }
.others label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.others .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.others .mine { border: 2px solid var(--roi); width: 10px; height: 10px; display: inline-block; }
.ghost { position: absolute; border: 2px dashed var(--roi); background: rgba(255, 212, 0, .08); pointer-events: none; }

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 40vh 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .legend .hint { display: none; }
}