:root {
  --color-primary:#16A34A; --color-on-primary:#000000; --color-secondary:#22C55E; --color-accent:#DC2626; --color-on-accent:#FFFFFF;
  --color-background:#0F172A; --color-foreground:#F8FAFC; --color-card:#111827; --color-card-foreground:#F8FAFC;
  --color-muted:#1E293B; --color-muted-foreground:#CBD5E1; --color-border:#334155;
  --color-destructive:#DC2626; --color-on-destructive:#FFFFFF; --color-ring:#16A34A;
  color-scheme:dark;
  --color-warning:#F59E0B; --color-success:var(--color-primary);
  /* lighter tints for small text on dark (#DC2626 is only ~3.9:1 on the card) */
  --color-destructive-text:#FCA5A5;
  --font-sans:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 16px/1.5 var(--font-sans); color:var(--color-foreground); background:var(--color-background); overflow-wrap:anywhere; }
h1, h2 { font-weight:600; line-height:1.25; }
header { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:8px 16px; background:var(--color-card); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:20; }
header h1 { font-size:20px; font-weight:700; margin:0 auto 0 0; letter-spacing:-.01em; }
header h1 a.brand { display:inline-flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
header h1 a.brand img { width:24px; height:24px; display:block; }
nav { display:flex; gap:8px; }
nav a { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:10px; color:var(--color-muted-foreground); text-decoration:none; font-weight:500; cursor:pointer; touch-action:manipulation; transition:background-color 150ms ease, color 150ms ease, transform 120ms ease; }
nav a:hover { background:var(--color-muted); color:var(--color-foreground); }
nav a.active { background:var(--color-muted); color:var(--color-secondary); }
nav a:active, button:active { transform:scale(.98); }
main { max-width:720px; margin:0 auto; padding:16px; }
.hidden { display:none !important; }
svg { flex:none; }
a { color:var(--color-secondary); }
:focus-visible { outline:2px solid var(--color-ring); outline-offset:2px; }

.card { background:var(--color-card); color:var(--color-card-foreground); border:1px solid var(--color-border); border-radius:12px; padding:16px; margin-bottom:16px; }
.card h2 { font-size:18px; margin:0 0 8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.card p { margin:8px 0; }
.muted { color:var(--color-muted-foreground); font-size:14px; }
.mono { font-family:var(--font-mono); font-size:13px; }
.toplink { touch-action:manipulation; display:inline-flex; align-items:center; min-height:44px; margin-bottom:8px; }

.badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; line-height:1; padding:6px 10px; border-radius:999px; border:1px solid currentColor; background:rgba(255,255,255,.04); }
.badge.new { color:var(--color-destructive-text); background:rgba(220,38,38,.15); }
.badge.waiting, .badge.problem { color:var(--color-warning); background:rgba(245,158,11,.12); }
.badge.done, .badge.ok { color:var(--color-secondary); background:rgba(34,197,94,.12); }

button { font:600 16px/1.25 var(--font-sans); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; margin:8px 8px 0 0; border-radius:10px; border:1px solid var(--color-primary); background:var(--color-primary); color:var(--color-on-primary); cursor:pointer; touch-action:manipulation; box-shadow:0 0 10px rgba(22,163,74,.35); transition:background-color 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 120ms ease; }
button:hover { background:var(--color-secondary); border-color:var(--color-secondary); }
button.secondary { background:transparent; color:var(--color-secondary); border:2px solid var(--color-primary); box-shadow:none; }
button.secondary:hover { background:var(--color-muted); }
button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.icon-btn { margin:0; width:44px; padding:0; background:transparent; color:var(--color-muted-foreground); border:1px solid var(--color-border); box-shadow:none; }
.icon-btn:hover { background:var(--color-muted); color:var(--color-foreground); border-color:var(--color-border); }

input, select { font:400 16px/1.5 var(--font-sans); min-height:48px; padding:10px 14px; color:var(--color-foreground); background:var(--color-background); border:1px solid var(--color-border); border-radius:10px; width:100%; margin:4px 0 16px; transition:border-color 150ms ease, box-shadow 150ms ease; }
input::placeholder { color:#94A3B8; }
input:focus, select:focus { border-color:var(--color-ring); box-shadow:0 0 0 3px rgba(22,163,74,.25); }
input:disabled { opacity:.6; }
header select { touch-action:manipulation; width:auto; max-width:100%; margin:0; cursor:pointer; }
label { display:block; font-size:14px; font-weight:500; color:var(--color-muted-foreground); }
label.check { touch-action:manipulation; display:flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; margin-bottom:8px; }
input[type=checkbox] { width:24px; min-height:24px; height:24px; margin:0; accent-color:var(--color-primary); cursor:pointer; }
form { max-width:420px; }
form h2 { margin:0 0 16px; font-size:18px; }
.error, .form-ok { margin:8px 0; font-size:14px; }
.error { color:var(--color-destructive-text); }
.form-ok { color:var(--color-secondary); display:inline-flex; align-items:center; gap:4px; }
.error:empty, .form-ok:empty { display:none; }
.history { margin:8px 0 0; padding-left:20px; font-size:14px; color:var(--color-muted-foreground); }
.history li { margin:4px 0; }
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.filters select { flex:1 1 140px; width:auto; min-height:40px; margin:0; padding:6px 10px; font-size:14px; }
.evtable { width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; }
.evtable th { resize:horizontal; overflow:hidden; min-width:60px; position:sticky; top:var(--hdr-h, 56px); background:var(--color-card); text-align:left; font-weight:600; padding:8px 10px; border-bottom:1px solid var(--color-border); z-index:5; }
.evtable td { padding:8px 10px; border-bottom:1px solid var(--color-border); vertical-align:top; }
.evtable th.ev { width:34%; }
.evtable th.tn { width:12%; }
.evtable td.ev { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evtable tr[data-row]:hover { background:var(--color-muted); }
.evtable .mono { font-size:13px; }
button.linkish { all:unset; box-sizing:border-box; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--color-secondary); cursor:pointer; font:600 14px/1.5 var(--font-sans); text-decoration:underline; touch-action:manipulation; }
button.linkish:focus-visible { outline:2px solid var(--color-ring); outline-offset:2px; }
.detail { padding:8px 10px; overflow-wrap:anywhere; background:var(--color-muted); font-size:14px; }
.evtable td.detail { white-space:normal; }
.skeleton.row { padding:0; }
.skeleton.row .line { height:14px; margin:11px 0; }
.evwrap { border-bottom:1px solid var(--color-border); }
button.evrow { all:unset; box-sizing:border-box; display:block; width:100%; min-height:44px; padding:6px 4px; cursor:pointer; touch-action:manipulation; font:400 14px/1.4 var(--font-sans); }
button.evrow:focus-visible { outline:2px solid var(--color-ring); outline-offset:-2px; }
button.evrow .mono { font-size:12px; }
.empty { text-align:center; padding:32px 16px; }
.empty svg { color:var(--color-secondary); margin-bottom:8px; }
.empty h2 { justify-content:center; }

.skeleton .line { height:14px; border-radius:6px; margin:12px 0; background:linear-gradient(90deg, var(--color-muted) 25%, var(--color-border) 50%, var(--color-muted) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
.skeleton .line.title { height:20px; width:55%; }
.skeleton .line.short { width:40%; }
@keyframes shimmer { to { background-position:-200% 0; } }
.spin { animation:spin 800ms linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:639px) {
  header select { order:3; flex:1 1 100%; }
  #signout { order:2; }
  nav { position:fixed; left:0; right:0; bottom:0; z-index:30; gap:0; justify-content:space-around; background:var(--color-card); border-top:1px solid var(--color-border); padding:4px 8px calc(4px + env(safe-area-inset-bottom)); }
  nav a { flex:1 1 0; min-width:0; flex-direction:column; justify-content:center; gap:2px; padding:4px; min-height:56px; font-size:12px; }
  nav a span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.authed main { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  nav a:active, button:active { transform:none; }
  .skeleton .line { background:var(--color-muted); }
}

/* Policy pages */
main.doc { max-width:720px; margin:0 auto; padding:16px; line-height:1.6; }
main.doc h3 { margin:24px 0 8px; font-size:17px; }
main.doc ul { padding-left:20px; }
main.doc a { color:var(--color-secondary); }