/* Warm cream-to-yellow canvas, translucent white cards, dark pill navigation, big thin numerals. */
:root{--ink:#1d1b16;--soft:#6f6a5c;--card:rgba(255,255,255,.62);--line:rgba(29,27,22,.08);--dark:#26241f;--gold:#f6c945;--gold-2:#fbe08a;--err:#9a3324;--ok:#2f6f4f;
--l0:#d9d2bd;--l1:#f2d680;--l2:#eebd3a;--l3:#d99a14;--l4:#26241f;--r:26px}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font:15px/1.5 "Inter","Segoe UI",system-ui,sans-serif;color:var(--ink);background:linear-gradient(135deg,#f3ecdc 0%,#f7e9b5 55%,#f6d977 100%) fixed}
#app{max-width:1240px;margin:0 auto;padding:20px 16px 56px}
h1{font-weight:300;font-size:clamp(30px,5vw,46px);letter-spacing:-.02em;margin:26px 0 4px}
h1.hero em{font-style:normal;font-weight:600}
h2{font-size:16px;font-weight:600;margin:0 0 10px}
.sub{color:var(--soft);font-size:13px;margin:4px 0 12px}
code{font:12px ui-monospace,Menlo,monospace;word-break:break-all;color:var(--soft)}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-weight:700;letter-spacing:.14em;font-size:13px}
nav{display:flex;gap:4px;flex-wrap:wrap;background:rgba(255,255,255,.55);padding:5px;border-radius:999px;border:1px solid var(--line);margin:0 auto 0 8px}
nav button{background:transparent;color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:500;position:relative}
nav button.on{background:var(--dark);color:#fff}
.out{margin-left:auto;background:transparent;color:var(--soft);border:1px solid var(--line)}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:9px 18px;background:var(--dark);color:#fff;min-height:40px}
button.quiet{background:rgba(255,255,255,.7);color:var(--ink);border:1px solid var(--line)}
button.danger{background:var(--err)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.badge{font-style:normal;font-size:11px;background:var(--gold);color:var(--ink);border-radius:999px;padding:1px 7px;margin-left:6px}
.card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r);padding:20px;box-shadow:0 8px 30px rgba(120,90,10,.07)}
.well{background:rgba(255,255,255,.7);border-radius:16px;padding:12px}
.auth{max-width:420px;margin:12vh auto}
label{display:block;font-size:12px;color:var(--soft);margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;padding:11px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink)}
textarea{resize:vertical;border-radius:18px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.row input{flex:1;min-width:180px;width:auto}
.err{color:var(--err);font-weight:500}
.grid{display:grid;gap:16px}.mt{margin-top:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:1.6fr 1fr}.g2{grid-template-columns:1fr 1.3fr}
.g3 > .wide{grid-column:auto}
.stat{display:flex;flex-direction:column;gap:2px}
.stat .k{font-size:13px;color:var(--soft)}
.stat b{font-weight:200;font-size:clamp(38px,5vw,58px);letter-spacing:-.03em;line-height:1.05}
.stat .s{font-size:12px;color:var(--soft)}
.map{width:100%;height:auto;display:block}
.dot{fill:var(--l0)}.dot.l1{fill:var(--l1)}.dot.l2{fill:var(--l2)}.dot.l3{fill:var(--l3)}.dot.l4{fill:var(--l4)}
.legend{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--soft);flex-wrap:wrap}
.sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:var(--l0)}
.sw.l1{background:var(--l1)}.sw.l4{background:var(--l4)}.sw.a1{background:var(--l1)}.sw.a2{background:var(--dark)}.sw.a3{background:var(--l3)}
.rank,.key{list-style:none;margin:0;padding:0}
.rank li{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 0;border-bottom:1px solid var(--line)}
.rank li:last-child{border:0}.rank .bar{grid-column:1/-1}
.bar{width:100%;height:8px;display:block}.bt{fill:rgba(29,27,22,.08)}.bf{fill:var(--dark)}
.meter{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin:10px 0}.meter .bar{grid-column:1/-1}
.line{width:100%;height:auto}.line .stroke{fill:none;stroke:var(--dark);stroke-width:2;stroke-dasharray:1 6;stroke-linecap:round}
.line .area{fill:rgba(246,201,69,.25)}.line .pt{fill:var(--dark)}.line .pt.peak{fill:var(--gold);stroke:var(--dark);stroke-width:2}
.split{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.donut{width:150px;height:150px;transform:rotate(-90deg)}.donut text{transform:rotate(90deg);transform-origin:70px 70px}
.arc{fill:none;stroke-width:18}.arc.track{stroke:rgba(29,27,22,.08)}.arc.a1{stroke:var(--l1)}.arc.a2{stroke:var(--dark)}.arc.a3{stroke:var(--l3)}
.dnum{font-size:26px;font-weight:300;fill:var(--ink)}
.key li{margin:6px 0}
.list{display:flex;flex-direction:column;gap:12px}
.user .uh{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.tag{font-size:12px;border-radius:999px;padding:3px 10px;background:rgba(29,27,22,.07)}
.tag.pro{background:var(--gold)}.tag.gift{background:var(--gold-2)}.tag.bad{background:#f2cfc8;color:var(--err)}
.tk{text-align:left;color:var(--ink);display:flex;flex-direction:column;gap:2px;position:relative;border-radius:20px;min-height:0}
.tk.on{background:#fff}.tk .badge{position:absolute;right:16px;top:14px}
.chat .msgs{display:flex;flex-direction:column;gap:10px;max-height:50vh;overflow:auto;margin-bottom:8px}
.m{max-width:85%;background:rgba(255,255,255,.85);padding:10px 14px;border-radius:18px}.m p{margin:0 0 4px;white-space:pre-wrap}
.m.me{align-self:flex-end;background:var(--gold-2)}
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--soft);font-weight:500}td,th{padding:8px 6px;border-bottom:1px solid var(--line)}
@media (max-width:900px){.g4{grid-template-columns:1fr 1fr}.g3,.g2{grid-template-columns:1fr}nav{margin:0;order:3;width:100%;overflow-x:auto;flex-wrap:nowrap}}
@media (prefers-color-scheme:dark){:root{--ink:#f3efe3;--soft:#b2ab98;--card:rgba(40,37,30,.66);--line:rgba(255,255,255,.1);--dark:#f6c945;--l0:#3a372e;--l4:#fff4cf}
body{background:linear-gradient(135deg,#1c1a15,#2a2412 60%,#3a2f0f) fixed}button,nav button.on{color:#1d1b16}button.quiet,nav button{color:var(--ink)}
input,select,textarea,.m,.well,.tk.on{background:rgba(255,255,255,.08)}.m.me{background:rgba(246,201,69,.25)}.dnum,.line .pt{fill:var(--ink)}.bf{fill:var(--gold)}}