
:root{
  --bg:#f4f6f5;--surface:#fff;--ink:#17201e;--muted:#5c6864;--line:#dbe1de;
  --accent:#0f6e64;--accent-ink:#fff;--accent-soft:#e0efec;
  --good:#1f7a3f;--good-bg:#e3f2e7;--warn:#8a5a00;--warn-bg:#fbf0d9;--bad:#b0322a;--bad-bg:#f8e3e1;--neutral-bg:#e9eeec;
  --radius:10px;--font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#111715;--surface:#19201e;--ink:#e5ebe8;--muted:#9aa6a1;--line:#2c3532;
  --accent:#4fbfae;--accent-ink:#06201c;--accent-soft:#17332f;
  --good:#6fcf8e;--good-bg:#16301f;--warn:#e7b65a;--warn-bg:#352a12;--bad:#f08a80;--bad-bg:#3a1c19;--neutral-bg:#242d2a;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--font);padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--accent)}
h1{font-size:1.6rem;margin:.2rem 0 1rem;line-height:1.2}
h2{font-size:1.15rem;margin:2rem 0 .75rem}
h3{font-size:1rem;margin:.5rem 0}
.wrap{max-width:1100px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) 48px max(16px,env(safe-area-inset-left))}
.muted{color:var(--muted)}
.sim{background:var(--warn-bg);color:var(--warn);text-align:center;font-size:.85rem;font-weight:600;padding:6px 16px;padding-top:max(6px,env(safe-area-inset-top))}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
.brand{font-weight:800;letter-spacing:.08em;text-decoration:none;color:var(--ink)}
.top nav{display:flex;gap:4px;overflow-x:auto;flex:1;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.top nav::-webkit-scrollbar{display:none}
.top nav a{white-space:nowrap;text-decoration:none;color:var(--muted);padding:8px 10px;border-radius:8px;font-size:.95rem}
.top nav a[aria-current=page]{background:var(--accent-soft);color:var(--ink);font-weight:600}
.count{display:inline-block;min-width:1.4em;padding:0 .35em;border-radius:99px;background:var(--bad);color:#fff;font-size:.75rem;text-align:center}
.logout button{background:none;border:0;color:var(--muted);font:inherit;font-size:.9rem;cursor:pointer;padding:8px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.tile .value{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.tile .sub{font-size:.85rem;color:var(--muted)}
.meter{display:block;height:6px;background:var(--neutral-bg);border-radius:99px;overflow:hidden;margin:6px 0 2px}
.meter .fill{display:block;height:100%;background:var(--accent)}
.meter .fill.hot{background:var(--bad)}
.w-0{width:0%}.w-5{width:5%}.w-10{width:10%}.w-15{width:15%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-35{width:35%}.w-40{width:40%}.w-45{width:45%}.w-50{width:50%}.w-55{width:55%}.w-60{width:60%}.w-65{width:65%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-85{width:85%}.w-90{width:90%}.w-95{width:95%}.w-100{width:100%}
.attention-bar{border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.attention-bar.has{background:var(--bad-bg);border:1px solid var(--bad)}
.attention-bar.has a{color:var(--bad);font-weight:600;text-decoration:none}
.attention-bar.none{background:var(--good-bg);color:var(--good);font-weight:600}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.8rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.8rem;font-weight:600;white-space:nowrap}
.pill-good{background:var(--good-bg);color:var(--good)}.pill-bad{background:var(--bad-bg);color:var(--bad)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}.pill-neutral{background:var(--neutral-bg);color:var(--ink)}.pill-muted{background:var(--neutral-bg);color:var(--muted)}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;min-width:0;overflow-wrap:anywhere}
.card.read{opacity:.7}
.card p{margin:.4rem 0}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:6px}
label{font-size:.85rem;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button,.button{font:inherit;font-weight:600;padding:10px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;display:inline-block;min-height:44px}
.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.danger{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.reject{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.reject button{align-self:flex-start}
.preview{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:.9rem;max-height:320px;overflow:auto}
.alert{background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:10px 12px}
.facts{margin:.5rem 0;padding-left:1.2rem;font-size:.9rem}
.filters{display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-bottom:12px}
.filters select{width:auto}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 14px 16px;display:flex;flex-direction:column}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.timeline time{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.timeline .muted{font-size:.8rem}
.plain{padding-left:1.1rem}.plain li{margin-bottom:8px}
.status-list{list-style:none;padding:0;display:grid;gap:8px}
.empty{padding:24px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius)}
.login{max-width:380px;margin:10vh auto 0}
details summary{cursor:pointer;color:var(--accent);font-size:.9rem}
@media (max-width:600px){.tiles{grid-template-columns:1fr 1fr}.top{flex-wrap:wrap;row-gap:4px}.top nav{order:3;flex-basis:100%;flex-wrap:wrap;overflow:visible}.top nav a{padding:6px 10px}.logout{margin-left:auto}h1{font-size:1.35rem}.tile .value{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
