:root { --cream:#D6E8F7; --paper:#fff; --sand:#C1D9EE; --line:#B5CEE5; --ink:#16202F; --soft:#5A6B7F; --faint:#8FA4B9;
  --clay:#D8613F; --clay-deep:#B74A2C; --clay-tint:#FCE0D4; --moss:#3E7E61; --moss-tint:#C8EEDA; --honey:#C4861C; --honey-tint:#FBE5B8; --rose:#B4405C; --rose-tint:#F9D3DE; --sky:#4A86C5;
  --serif:"Iowan Old Style","New York",Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
* { box-sizing:border-box }
body { margin:0; background:var(--cream); color:var(--ink); font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased }
h1,h2,h3 { font-family:var(--serif); font-weight:500; letter-spacing:-.02em; margin:0; line-height:1.1 }
h1 { font-size:34px } h2 { font-size:24px } h3 { font-size:18px }
p { margin:0 }
a { color:inherit }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
.soft { color:var(--soft) } .faint { color:var(--faint) } .small { font-size:13px }
button, input, select, textarea { font:inherit }
.btn { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 18px; border-radius:999px; border:1.5px solid transparent; background:var(--ink); color:#fff; font-weight:600; cursor:pointer }
.btn:hover { background:#22304a } .btn:disabled { opacity:.5; cursor:default }
.btn.outline { background:transparent; border-color:var(--ink); color:var(--ink) } .btn.outline:hover { background:rgba(255,255,255,.5) }
.btn.clay { background:var(--clay) } .btn.clay:hover { background:var(--clay-deep) }
.btn.moss { background:var(--moss) }
.btn.sm { min-height:32px; padding:0 14px; font-size:13px }
input[type=text], input[type=password], input[type=email], select, textarea { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink) }
input:focus, select:focus, textarea:focus { outline:2px solid var(--ink); outline-offset:1px }
.card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:20px }
.card.tint { background:var(--sand); border-color:transparent }
.wrap { width:min(1180px, calc(100% - 40px)); margin:0 auto }
.grid { display:grid; gap:14px } .g2 { grid-template-columns:repeat(2,1fr) } .g3 { grid-template-columns:repeat(3,1fr) } .g4 { grid-template-columns:repeat(4,1fr) } .g5 { grid-template-columns:repeat(5,1fr) }
@media (max-width:900px) { .g3,.g4,.g5 { grid-template-columns:repeat(2,1fr) } } @media (max-width:560px) { .g2,.g3,.g4,.g5 { grid-template-columns:1fr } }
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.between { justify-content:space-between }
.stat { font-family:var(--serif); font-size:34px; line-height:1 }
table { width:100%; border-collapse:collapse; font-size:14px }
th { text-align:left; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line) }
td { padding:10px; border-bottom:1px solid rgba(181,206,229,.6); vertical-align:top }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums }
tr:last-child td { border-bottom:0 }
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--sand); color:var(--ink) }
.pill.moss { background:var(--moss-tint); color:var(--moss) } .pill.honey { background:var(--honey-tint); color:#8a5a0e } .pill.rose { background:var(--rose-tint); color:var(--rose) } .pill.clay { background:var(--clay-tint); color:var(--clay-deep) }
.mono { font-family:ui-monospace, Menlo, monospace; font-size:12px; word-break:break-all }
pre { background:var(--cream); border-radius:12px; padding:12px; font-size:12px; overflow:auto; max-height:260px; margin:0 }
.notice { background:var(--rose-tint); color:var(--rose); border-radius:14px; padding:12px 14px; font-weight:500 }
.notice.ok { background:var(--moss-tint); color:var(--moss) }
[hidden] { display:none !important }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px }
.login .card { width:min(420px,100%); padding:32px }
.brand { font-family:var(--serif); font-size:30px; letter-spacing:-.03em }

/* Shell */
.top { position:sticky; top:0; z-index:5; background:rgba(214,232,247,.9); backdrop-filter:blur(12px); border-bottom:1px solid rgba(181,206,229,.7) }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px }
.tabs { display:flex; gap:4px; flex-wrap:wrap }
.tabs button { background:transparent; border:0; padding:8px 14px; border-radius:999px; color:var(--soft); font-weight:600; cursor:pointer }
.tabs button[aria-selected=true] { background:#fff; color:var(--ink) }
main.wrap { padding:28px 0 60px }

/* Bars */
.bars { display:flex; align-items:flex-end; gap:4px; height:160px; padding-top:8px }
.bar { flex:1; background:var(--ink); border-radius:6px 6px 0 0; min-width:6px; position:relative }
.bar.alt { background:var(--sky) }
.bar span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; color:var(--soft); white-space:nowrap; display:none }
.bar:hover span { display:block }
.axis { display:flex; gap:4px; font-size:10px; color:var(--faint) } .axis span { flex:1; text-align:center; overflow:hidden; white-space:nowrap }

/* Review */
.doc { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--cream) }
.doc img { display:block; width:100%; max-height:520px; object-fit:contain; background:#fff }
.doc a { display:block; padding:10px 12px; font-size:13px }
.reading dt { font-weight:600; font-size:13px; margin-top:8px } .reading dd { margin:0; color:var(--soft) }