/* zen theme tokens (house default): zen-light + zen-cosmic, switched by data-theme on <html>. */
[data-theme="zen-light"]{
  --surface:#ffffff; --elevated:#f3faf6; --line:#cfe6da; --line-strong:#a7c4b8;
  --fg:#0c2f28; --muted:#33504a; --faint:#5b7a6f; --tab-fg:#ffffff;
  --cyan:#0d6b80; --teal:#0d5b6e; --green:#047857; --amber:#b45309;
  --pink:#be185d; --purple:#7b2da8; --indigo:#4f46e5; --sky:#0369a1;
  --card-bg:#ffffff;
  --card-shadow:0 10px 26px -14px rgba(16,75,60,.18),0 0 24px -12px rgba(94,234,212,.45),0 0 0 1px rgba(125,211,252,.16);
  --nav-pill-bg:linear-gradient(135deg,#d3f0f4,#e9dbf8); --nav-pill-bg-hover:linear-gradient(135deg,#bde7ec,#ddc9f6);
  --nav-pill-border:#7cb3b9; --nav-pill-fg:#0d5b6e;
  --nav-pill-current-bg:linear-gradient(135deg,#6d28d9,#7c3aed); --nav-pill-current-fg:#ffffff; --nav-pill-current-shadow:rgba(109,40,217,.35);
}
[data-theme="zen-cosmic"]{
  --surface:#13151f; --elevated:#181b26; --line:#262a3b; --line-strong:#3c4566;
  --fg:#e7e9ee; --muted:#9aa3b4; --faint:#6b7280; --tab-fg:#0a0a14;
  --cyan:#22d3ee; --teal:#2dd4bf; --green:#4ade80; --amber:#fbbf24;
  --pink:#f472b6; --purple:#a855f7; --indigo:#6366f1; --sky:#7dd3fc;
  --card-bg:linear-gradient(180deg,#13151f,rgba(19,21,31,.7));
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 28px -18px rgba(99,102,241,.65);
  --nav-pill-bg:linear-gradient(135deg,#163039,#2a2148); --nav-pill-bg-hover:linear-gradient(135deg,#1d3f4a,#36295e);
  --nav-pill-border:#3d7986; --nav-pill-fg:#7fe0d4;
  --nav-pill-current-bg:linear-gradient(135deg,#6d28d9,#7c3aed); --nav-pill-current-fg:#ffffff; --nav-pill-current-shadow:rgba(109,40,217,.5);
}
*{box-sizing:border-box} html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg); min-height:100vh; -webkit-font-smoothing:antialiased; background-attachment:fixed;
}
[data-theme="zen-light"] body{
  background:
    radial-gradient(55rem 30rem at 10% -8%, rgba(52,211,153,.30), transparent 60%),
    radial-gradient(48rem 28rem at 96% 0%, rgba(125,211,252,.24), transparent 55%),
    radial-gradient(44rem 30rem at 50% 116%, rgba(196,181,253,.16), transparent 60%),
    linear-gradient(170deg,#e4f3e9 0%,#daeede 50%,#e2f1ea 100%);
  background-attachment:fixed;
}
[data-theme="zen-cosmic"] body{
  background:
    radial-gradient(60rem 60rem at 110% -10%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(52rem 52rem at -10% 110%, rgba(6,182,212,.10), transparent 60%),
    #0a0a14;
  background-attachment:fixed;
}
.card{position:relative;background:var(--card-bg);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;box-shadow:var(--card-shadow)}
.btn{cursor:pointer;border:1px solid var(--line);background:var(--elevated);color:var(--muted);
  border-radius:999px;padding:6px 14px;font-size:13px;transition:.15s}
.btn:hover{border-color:var(--cyan);color:var(--fg)}
.snapshot{display:grid;grid-template-columns:1fr;gap:10px;margin:8px 0}
@media (min-width:640px){.snapshot{grid-template-columns:1fr 1fr;gap:12px 14px}}
.snap{border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:10px;padding:11px 14px;background:var(--elevated)}
.snap-k{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin-bottom:3px}
.snap-v{font-size:13px;line-height:1.5;color:var(--fg)}
.snap-v strong{font-weight:700}
.snapshot-title{font-size:10px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin:0 0 8px}
.snapshot-hint{font-size:11px;color:var(--muted);margin-top:8px}
.modal{ display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(6,12,24,.55); align-items:center; justify-content:center; }
.modal.open{ display:flex; }
.modal .box{ background:var(--card-bg); color:var(--fg); width:480px; max-width:92%;
  max-height:85%; overflow:auto; border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--card-shadow, 0 24px 70px rgba(0,0,0,.4)); }
.modal .hdr{ background:var(--teal); color:#fff; padding:10px 14px; font-weight:700;
  display:flex; align-items:center; gap:10px; }
.modal .bodyy{ padding:13px 15px; line-height:1.55; }
.modal .ftr{ padding:9px 15px 13px; text-align:right; }
.modal .box button{ background:var(--teal); color:#fff; border:0; padding:6px 18px;
  border-radius:6px; cursor:pointer; font:inherit; }
.modal .box button:hover{ filter:brightness(1.08); }