:root { color-scheme: light dark; --bg:#f5f7f2; --card:#fff; --text:#1f3a2f; --muted:#55695e; --line:#dbe3dc; --accent:#2f7d5b; --danger:#b3412f; --head:#eef3ee;
        --on-accent:#fff; --accent-text:#276a4c; --control:#7d9487; --warn:#8a5a00; --ok-bg:#e3f1e9; --bad-bg:#fbe9e5; --warn-bg:#fdf1d8; --muted-bg:#edf1ee;
        --scrim:rgba(20,32,26,.45); --s1:#2f7d5b; --s2:#3b6fb0; --s3:#b7791f; --fail:#c0392b; --side:#eaf0ea; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14201a; --card:#1c2b23; --text:#e6efe9; --muted:#9ab0a4; --line:#2c3f35; --accent:#52b788; --danger:#e08a78; --head:#23362c;
          --on-accent:#0e1a14; --accent-text:#52b788; --control:#6f8a7b; --warn:#e6b955; --ok-bg:#1f3a2c; --bad-bg:#44251f; --warn-bg:#3d3216; --muted-bg:#25362d;
          --scrim:rgba(0,0,0,.6); --s1:#52b788; --s2:#7aa9e6; --s3:#e0aa4f; --fail:#f08a7a; --side:#192820; }
}
* { box-sizing: border-box; }
[hidden] { display:none !important; }
html.locked { overflow:hidden; }
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5;
       font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; font-size:14px; }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.skip { position:absolute; left:8px; top:-60px; z-index:50; padding:10px 14px; background:var(--accent); color:var(--on-accent); border-radius:8px; }
.skip:focus { top:8px; }
h1, h2, h3, h4 { line-height:1.3; }

button { font:inherit; min-height:44px; min-width:44px; padding:0 16px; border:1px solid var(--control); border-radius:8px; background:var(--card); color:var(--text); cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--accent-text); }
button:disabled { opacity:.55; cursor:default; }
button.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
button.small { padding:0 10px; font-size:13px; }
button.link { display:inline-flex; align-items:center; min-height:44px; padding:0 2px; border:0; background:none; color:var(--accent-text); text-align:left; }
button.link:hover:not(:disabled) { text-decoration:underline; }
button.drill { min-height:44px; margin-top:6px; padding:0 4px; border:0; background:none; color:var(--accent-text); font-size:13px; text-decoration:underline; }
button.help { min-width:44px; min-height:44px; margin:-10px -8px -10px 0; border:0; background:none; color:var(--accent-text); font-weight:700; }
@media (pointer:fine) {
  button.small { min-height:32px; min-width:32px; }
  button.link { min-height:32px; }
  button.drill { min-height:32px; margin-top:4px; }
  button.help { min-width:32px; min-height:32px; margin:-6px -6px -6px 0; }
}

.gate { max-width:420px; margin:80px auto; text-align:center; padding:32px 16px; }
.btn, .gate a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:8px; background:var(--accent); color:var(--on-accent); text-decoration:none; }
.loading { padding:40px 16px; text-align:center; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0; }
.card h3 { margin:0 0 4px; font-size:16px; }
.card h4 { margin:16px 0 8px; font-size:14px; }

/* shell: fixed sidebar + content up to 1400px */
.shell { display:grid; grid-template-columns:216px minmax(0,1fr); min-height:100vh; }
.side { position:sticky; top:0; align-self:start; height:100vh; display:flex; flex-direction:column; gap:12px; padding:16px 12px; background:var(--side); border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; padding:4px 6px; }
.logo { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:18px; }
.brandname { font-weight:700; font-size:15px; }
.tabs { display:flex; flex-direction:column; gap:4px; }
button.tab { width:100%; justify-content:flex-start; text-align:left; border-color:transparent; background:none; padding:0 12px; font-size:14px; white-space:nowrap; }
button.tab:hover:not(:disabled) { background:var(--card); border-color:var(--line); }
button.tab[aria-selected="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.sidefoot { margin-top:auto; padding:6px; font-size:13px; color:var(--muted); }
.who { overflow-wrap:anywhere; margin-bottom:4px; }
.sidelink { display:inline-flex; align-items:center; min-height:44px; color:var(--accent-text); }
.content { width:100%; max-width:1400px; margin:0 auto; padding:16px 24px 48px; min-width:0; }
.pagehead h1 { margin:4px 0 12px; font-size:22px; }
.pagehead h1:focus-visible { outline-offset:4px; }

/* query bar */
.querybar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:10px 16px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.rangecontrols { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 16px; min-width:0; }
.presets { display:flex; flex-wrap:wrap; gap:6px; }
button.preset { padding:0 14px; }
button.preset[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.custom { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; }
.field { display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--muted); min-width:0; }
.field input, .field select { font:inherit; min-height:44px; padding:0 10px; border:1px solid var(--control); border-radius:8px; background:var(--card); color:var(--text); min-width:0; max-width:100%; }
.scope { margin:8px 2px 0; color:var(--muted); font-size:13px; min-height:20px; overflow-wrap:anywhere; }
.statusbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-bottom:8px; }
.notice { min-height:20px; margin:6px 0; color:var(--muted); }
.notice.error { color:var(--danger); font-weight:600; }
.notice-missing { margin:0; padding:10px 12px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); }
#view:focus-visible { outline-offset:4px; }
.stack-y { display:flex; flex-direction:column; gap:16px; }
.hint { margin:6px 0 10px; color:var(--muted); font-size:13px; }
.hint.warn { color:var(--warn); }
.empty { margin:8px 0; padding:16px 12px; border:1px dashed var(--line); border-radius:8px; color:var(--muted); text-align:center; }
.sub { display:block; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.nowrap { white-space:nowrap; }
.wrapany { overflow-wrap:anywhere; }
ul.plain { margin:8px 0 0; padding-left:20px; color:var(--muted); font-size:13px; }

/* stats */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; }
.grid.kpis { grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-width:0; }
.card .stat { background:none; }
.stat .n { font-size:28px; line-height:1.2; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.stat .l { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; font-size:14px; }
.stat .note { color:var(--muted); font-size:12px; margin-top:2px; overflow-wrap:anywhere; }
.stat.bad .n { color:var(--danger); }
.stat.warn .n { color:var(--warn); }
.helptext { margin:6px 0 0; padding:8px 10px; border-radius:8px; background:var(--muted-bg); color:var(--text); font-size:13px; }

/* health strip */
.strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:6px 14px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.strip.bad { border-color:var(--danger); }
.strip.warn { border-color:var(--warn); }
.stripText { flex:1 1 12em; min-width:0; overflow-wrap:anywhere; }
.badge { display:inline-block; padding:1px 10px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid currentColor; white-space:nowrap; }
.badge.ok { color:var(--accent-text); background:var(--ok-bg); }
.badge.bad { color:var(--danger); background:var(--bad-bg); }
.badge.warn { color:var(--warn); background:var(--warn-bg); }
.badge.muted { color:var(--muted); background:var(--muted-bg); }
.fold summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--accent-text); }
.checks { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.checks li { display:flex; align-items:center; gap:10px; }
.checktext { overflow-wrap:anywhere; }

/* charts */
.chartrow { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:16px; }
.chartwrap { min-width:0; }
.chartscroll { overflow-x:auto; padding-bottom:4px; }
svg.chart { display:block; max-width:none; }
svg.chart text.axis { font-size:12px; fill:var(--muted); }
svg.chart line.gridline { stroke:var(--line); stroke-width:1; }
svg.chart .hit { fill:transparent; }
svg.chart .bar.s1, .swatch.s1 { fill:var(--s1); background:var(--s1); }
svg.chart .bar.s2, .swatch.s2 { fill:var(--s2); background:var(--s2); }
svg.chart .bar.s3, .swatch.s3 { fill:var(--s3); background:var(--s3); }
svg.chart .failmark, .swatch.fail { fill:var(--fail); background:var(--fail); border-radius:50%; }
svg.chart g.day { cursor:pointer; outline:none; }
svg.chart g.day:hover .hit, svg.chart g.day:focus .hit { fill:var(--muted-bg); }
svg.chart g.day:focus-visible .hit { stroke:var(--accent); stroke-width:2; }
.legend { display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none; margin:8px 0 0; padding:0; font-size:13px; color:var(--muted); }
.legend li { display:flex; align-items:center; gap:6px; }
.swatch { display:inline-block; width:12px; height:12px; border-radius:3px; }
.tip { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:8px; padding:8px 10px; min-height:44px; border-radius:8px; background:var(--muted-bg); font-size:13px; }
.tiptext { overflow-wrap:anywhere; }
.tipaction button.drill { margin:0; }

/* tables */
.filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px 12px; margin:8px 0 4px; }
.filters .field input { min-width:11em; }
.tablebox { margin:8px 0; min-width:0; }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
th { background:var(--head); font-weight:600; white-space:nowrap; vertical-align:middle; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
td.nowrap, td.usercol { white-space:nowrap; }
td.contentcol { min-width:16em; max-width:34em; }
.content-cell { display:flex; flex-direction:column; min-width:0; }
button.title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; text-overflow:ellipsis; min-height:0; padding:2px; line-height:1.4; overflow-wrap:anywhere; }
@media (pointer:coarse) { button.title { min-height:44px; } }
.idcell { display:inline-flex; align-items:center; gap:6px; }
code.id { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }
code.id.full { overflow-wrap:anywhere; user-select:all; }
.usercell { display:flex; flex-direction:column; min-width:0; }
.pager { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:12px; color:var(--muted); }
@media (min-width:901px) {
  .scroll { overflow:clip; }
  .tablebox thead th { position:sticky; top:0; z-index:2; }
}

/* drawer */
.backdrop { position:fixed; inset:0; z-index:10; background:var(--scrim); }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:20; width:min(520px,100%); overflow-y:auto; overscroll-behavior:contain;
          padding:16px; background:var(--card); border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.18); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.drawer-head h2 { margin:0; font-size:17px; overflow-wrap:anywhere; }
.facts { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0 0 12px; }
.facts dt { color:var(--muted); }
.facts dd { margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; overflow-wrap:anywhere; min-width:0; }
.linkline { display:inline-flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.detail .tablebox { margin-top:12px; }
.detail .grid { margin:12px 0; }
.copy-note { position:fixed; left:50%; bottom:16px; z-index:40; transform:translateX(-50%); max-width:min(92vw,520px); padding:0; color:var(--text); }
.copy-note:not(:empty) { padding:10px 14px; background:var(--card); border:1px solid var(--accent); border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.2); }

/* tablet and phone: top bar, scrollable navigation, summary rows instead of wide tables */
@media (max-width:900px) {
  .shell { display:block; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--line); }
  .tabs { order:3; flex-direction:row; flex:1 0 100%; overflow-x:auto; gap:4px; padding-bottom:2px; }
  button.tab { width:auto; flex:0 0 auto; }
  .sidefoot { margin:0 0 0 auto; display:flex; align-items:center; gap:12px; padding:0; }
  .who { margin:0; }
  .content { padding:12px 16px 40px; }
  .chartrow { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .stack .scroll { overflow-x:visible; }
  .stack table, .stack tbody, .stack tr, .stack td { display:block; width:100%; }
  .stack thead { display:none; }
  .stack tbody tr { margin:0 0 10px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; }
  .stack td { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; min-height:32px; padding:4px 0; border-bottom:0; white-space:normal; text-align:right; }
  .stack td::before { content:attr(data-label); flex:0 0 6em; color:var(--muted); text-align:left; }
  .stack td > * { min-width:0; }
  .stack td.num, .stack td.nowrap, .stack td.usercol { text-align:right; white-space:normal; }
  .stack td.contentcol { max-width:none; min-width:0; }
  .content-cell, .usercell { align-items:flex-end; text-align:right; }
  .facts { grid-template-columns:1fr; gap:2px; }
  .facts dd { margin-bottom:8px; }
  .filters .field { flex:1 1 100%; }
  .filters .field input, .filters .field select { width:100%; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition:border-color .15s; }
  svg.chart .bar { animation:grow .25s ease-out; transform-box:fill-box; transform-origin:bottom; }
  @keyframes grow { from { transform:scaleY(.6); opacity:.4; } to { transform:none; opacity:1; } }
}
@media (min-width:641px) { details.filterfold > summary { display:none; } }
button.small, .idcell, code.id { white-space:nowrap; }
td:has(> .idcell) { white-space:nowrap; }