/* Professional theme: neutral, one accent, restrained motion */
:root{
  --bg:#F6F7F9; --surface:#FFFFFF; --line:#E5E7EB; --line-2:#D9DCE2;
  --text:#0E1116; --text-2:#4B5260; --text-3:#8A919E; --accent:#2B59FF; --accent-soft:#EEF2FF;
  --ink:var(--text); --ink-2:var(--text-2); --ink-3:var(--text-3); --cream:var(--bg); --paper:var(--surface);
  --bouncy:cubic-bezier(.2,.8,.2,1) !important; --snappy:cubic-bezier(.2,.8,.2,1) !important;
  --r-xl:16px; --r-l:12px; --r-m:10px;
}
@supports (transition-timing-function:linear(0,1)){ :root{ --bouncy:cubic-bezier(.2,.8,.2,1); --snappy:cubic-bezier(.2,.8,.2,1);} }
html,body{background:var(--bg)}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);font-feature-settings:'cv11','ss01','tnum'}
.title,.headline,.pod .pts,.step b,.list-head h3,.history-head,.row .rank,.row .val b,.how h3,.p-name,.stat .n,.plus,.av span,.brand-mark span,.p-avatar span{font-family:'Inter',system-ui,sans-serif !important}
.ripple{display:none}
.press.down{transform:scale(.985)}

/* header */
.hero{background:var(--surface);color:var(--text);border-radius:0;border-bottom:1px solid var(--line);padding:calc(16px + env(safe-area-inset-top)) 16px 16px}
.brand-mark{width:36px;height:36px;border-radius:9px;background:var(--text)}
.brand-mark svg{display:none}
.brand-mark span{color:#fff;font-size:14px;font-weight:700;letter-spacing:-.01em}
.title{font-size:17px;font-weight:700;letter-spacing:-.01em}
.subtitle{font-size:12.5px;font-weight:500;color:var(--text-3);opacity:1;margin-top:2px}
.live-chip{height:28px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text-2);font-size:11px;font-weight:600;letter-spacing:.04em}
.live-dot{width:7px;height:7px;background:#8993A4;box-shadow:none;animation:none}
.live-chip.snap .live-dot{background:var(--text-3)}
.headline{font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:22px 0 14px;min-height:0}
.headline br{display:none}
.headline .w:first-child{margin-right:.28em}
.headline .w:last-child{color:var(--text-3);font-weight:600}
.seg{background:#F1F2F5;border-radius:10px;padding:3px;height:38px;border:1px solid var(--line)}
.seg button{border-radius:8px;font-weight:600;font-size:13px;color:var(--text-2)}
.seg button.on{color:var(--text)}
.seg-pill{top:3px;bottom:3px;border-radius:8px;background:var(--surface);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px rgba(16,24,40,.04);transition:transform .35s var(--bouncy),width .35s var(--bouncy)}
.seg-pill.squish{animation:none}

/* podium -> top 3 cards */
.podium-wrap{padding:16px 16px 0;min-height:0}
.podium{gap:8px;grid-template-columns:1fr 1fr 1fr;align-items:end}
.pod{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 8px 0;overflow:hidden}
.pod.r1{border-color:var(--text);box-shadow:0 8px 24px -12px rgba(16,24,40,.25)}
.pod .av,.pod.r1 .av{width:48px;height:48px;margin-bottom:10px;border-radius:50%;background:#EEF0F3}
.pod.r1 .av{width:56px;height:56px;background:var(--text)}
.pod.r1 .av span{color:#fff}
.pod .av > svg,.row .av > svg{display:none}
.pod .av span{font-size:16px;font-weight:600;color:var(--text)}
.pod.r1 .av span{font-size:18px}
.crown{top:-10px;width:20px;height:16px;margin-left:-10px;color:#C9A227}
.crown svg{filter:none}
.pod .name{font-size:13px;font-weight:600}
.pod .pts{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:2px 0 12px}
.pod .pts small{font-family:'Inter',sans-serif;font-weight:500;color:var(--text-3)}
.step,.pod.r1 .step,.pod.r2 .step,.pod.r3 .step{height:auto;background:transparent;box-shadow:none;border-radius:0;border-top:1px solid var(--line);padding:8px 0 10px}
.step b,.pod.r3 .step b{font-family:'JetBrains Mono',monospace !important;font-size:12px;font-weight:600;color:var(--text-3);letter-spacing:.06em}
.step b::before{content:'#'}
.pod.r1 .step b{color:var(--text)}
.floor{display:none}
.skel .pod{min-height:150px}
.skel .r1 .step,.skel .r2 .step,.skel .r3 .step{background:transparent}
.skel .pod .av{background:#EEF0F3}
.skel .bone{background:#EEF0F3}

/* list */
.zero-note{border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:500;font-size:13px;color:var(--text-2)}
.zero-note::before{width:6px;height:6px;background:var(--accent)}
.list-head{margin:24px 2px 8px}
.list-head h3,.history-head{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.list-head span{font-weight:500;font-size:12px}
#board{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
#board:empty{border:0}
.row{border-radius:0;box-shadow:none;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.row:last-child{border-bottom:0}
.row .rank{font-family:'JetBrains Mono',monospace !important;font-size:12px;font-weight:600;width:24px}
.row .av{width:34px;height:34px;border-radius:50%;background:#EEF0F3}
.row .av span{font-size:12.5px;font-weight:600;color:var(--text)}
.row .nm{font-weight:600;font-size:14.5px}
.bar{height:4px;background:#F0F1F4;margin-top:6px}
.bar i{background:var(--text) !important}
.row .val b{font-size:16px;font-weight:700}
.row .val small{font-weight:500}
.empty{border:1px solid var(--line);border-radius:12px;font-weight:500;font-size:14px}
.empty .em-ic{border-radius:10px;background:var(--accent-soft);color:var(--accent);width:44px;height:44px}

/* how */
.how{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 16px 16px}
.how::after{display:none}
.how-ic{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent)}
.how-ic svg{width:18px;height:18px}
.how h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.how p{font-size:14px;font-weight:400;color:var(--text-2)}
.how b{font-weight:600}
.email-btn{background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:10px;height:46px;padding:0 6px 0 14px;font-weight:500;font-size:14px;font-family:'JetBrains Mono',monospace}
.copy-tag{background:var(--text);color:#fff;border-radius:7px;height:32px;font-weight:600;font-size:12.5px;font-family:'Inter',sans-serif}
.copy-tag.done{background:#16A34A}
.how small{font-weight:400;color:var(--text-3)}
.foot{font-weight:500}

/* profile */
.p-hero{background:var(--surface) !important;border-radius:0;border-bottom:1px solid var(--line);padding:calc(12px + env(safe-area-inset-top)) 16px 24px}
.p-hero::before{display:none}
.back-btn{width:36px;height:36px;border-radius:9px;background:var(--surface);color:var(--text);border:1px solid var(--line)}
.back-btn svg{width:18px;height:18px}
.p-eyebrow{font-weight:600;font-size:11px;color:var(--text-3)}
.p-avatar{width:76px;height:76px;border-radius:50%;background:var(--text);margin:8px auto 12px}
.p-avatar svg{display:none}
.p-avatar span{font-size:26px;font-weight:600;color:#fff !important}
.p-name{font-size:24px;font-weight:700;letter-spacing:-.02em}
.p-rank,.p-sub{height:26px;border-radius:999px;font-weight:600;font-size:12px;padding:0 10px}
.p-rank{background:var(--text);color:#fff}
.p-rank svg{color:#C9A227}
.p-sub{background:#F1F2F5;color:var(--text-2)}
.p-stats{gap:8px}
.stat,.stat.s1,.stat.s2,.stat.s3{background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:left;padding:14px 12px}
.stat .n{font-size:22px;font-weight:700}
.stat .l{font-size:11.5px;font-weight:500;color:var(--text-3)}
.hist{border-radius:12px;box-shadow:none;border:1px solid var(--line)}
.hist .range{font-weight:600;font-size:14.5px}
.hist .sub{font-weight:500}
.days i{background:var(--text);border-radius:2px;opacity:.85}
.days i.z{background:#EEF0F3}
.plus{background:var(--accent-soft);color:var(--accent);border-radius:8px;font-size:14px;font-weight:700;padding:6px 10px}
#toast{background:var(--text);color:#fff;border-radius:10px;font-weight:500;font-size:14px;transition:transform .35s var(--bouncy),visibility 0s linear .35s}
#toast.show{transition:transform .35s var(--bouncy),visibility 0s}
@media (min-width:521px){body{box-shadow:0 0 0 1px var(--line)}}

.pod .av span,.row .av span{color:var(--text) !important}
.pod.r1 .av span{color:#fff !important}
.pod .av,.row .av{background:#EEF0F3 !important}
.pod.r1 .av{background:var(--text) !important}

.compose-options{margin:16px 0 12px}.compose-options summary{display:block;background:#0B0D12;color:#fff;border-radius:10px;padding:14px 16px;font-weight:600;cursor:pointer;list-style:none;text-align:center}.compose-options summary::-webkit-details-marker{display:none}.compose-options summary::after{content:' +';float:right}.compose-options[open] summary::after{content:' -'}.compose-links{display:grid;gap:8px;padding-top:10px}.compose-links a{display:block;padding:13px 12px;border:1px solid #d8dde6;border-radius:8px;color:#17233b;text-decoration:none;font-size:14px;font-weight:600;min-height:44px;box-sizing:border-box}.compose-links a[hidden]{display:none}.compose-links p{font-size:12px;line-height:1.5;color:#657083;margin:3px 0 0}.compose-options a:focus-visible,.compose-options summary:focus-visible{outline:3px solid #597dff;outline-offset:2px}