:root {
  color-scheme: light dark;
  --bg:#f7f7f5; --card:#fff; --ink:#1a1a18; --dim:#6b6b64; --line:#e2e2dc;
  --accent:#2f5d50; --accent-ink:#fff; --warn:#8a4b2a; --bad:#a03232; --ok:#2f6d43;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#16161a; --card:#1e1e23; --ink:#ecece8; --dim:#9a9a93; --line:#31313a;
          --accent:#7fb8a5; --accent-ink:#10231d; }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
header { background:var(--card); border-bottom:1px solid var(--line); padding:.7rem 1rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; position:sticky; top:0; z-index:10; }
header h1 { font-size:1rem; margin:0; font-weight:640; letter-spacing:-.01em; }
header .sp { flex:1 }
main { max-width:960px; margin:0 auto; padding:1.2rem 1rem 4rem; }
h2 { font-size:1.05rem; margin:1.6rem 0 .6rem; font-weight:620; }
h2:first-child { margin-top:0 }
p { margin:.5rem 0 }
.muted { color:var(--dim); font-size:.87rem }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; margin:.7rem 0; }
button { font:inherit; padding:.45rem .85rem; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; }
button:hover { border-color:var(--dim) }
button.primary { background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:560 }
button.danger { color:var(--bad); border-color:color-mix(in srgb, var(--bad) 35%, var(--line)) }
button:disabled { opacity:.45; cursor:default }
button.mini { padding:.2rem .5rem; font-size:.8rem }
input, select, textarea { font:inherit; padding:.45rem .6rem; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); color:var(--ink); width:100%; }
label { display:block; font-size:.85rem; color:var(--dim); margin:.6rem 0 .2rem }
.row { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.row > * { flex:0 0 auto }
.grow { flex:1 1 180px }
nav.tabs { display:flex; gap:.2rem; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:1rem }
nav.tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none;
  padding:.5rem .8rem; color:var(--dim); white-space:nowrap }
nav.tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--accent); font-weight:600 }
table { width:100%; border-collapse:collapse; font-size:.9rem }
th { text-align:left; font-weight:600; color:var(--dim); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.04em; padding:.4rem .5rem; border-bottom:1px solid var(--line) }
td { padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:top }
.scroll { overflow-x:auto }
.tag { display:inline-block; font-size:.74rem; padding:.1rem .45rem; border-radius:999px;
  background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent); font-weight:600 }
.tag.bad { background:color-mix(in srgb,var(--bad) 14%,transparent); color:var(--bad) }
.tag.warn { background:color-mix(in srgb,var(--warn) 16%,transparent); color:var(--warn) }
.note { border-left:3px solid var(--accent); padding:.5rem .8rem; background:var(--card);
  border-radius:0 8px 8px 0; margin:.7rem 0; font-size:.88rem }
.note.warn { border-left-color:var(--warn) }
.note.bad { border-left-color:var(--bad) }
code, .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85em; word-break:break-all }
.shift { display:flex; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--line) }
.shift .when { flex:0 0 5.2rem; font-weight:600; font-variant-numeric:tabular-nums }
.shift.mine { background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:8px;
  padding-left:.5rem; padding-right:.5rem }
dialog { border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
  color:var(--ink); max-width:520px; width:92%; padding:1.2rem }
dialog::backdrop { background:#0008 }
.toast { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); background:var(--ink);
  color:var(--bg); padding:.55rem 1rem; border-radius:999px; font-size:.87rem; z-index:99; }