/* Take1 brand + app shell */
:root{
  --bg:#0b0b0e;--panel:#111115;--panel2:#18181d;--line:#25252b;--line2:#303037;
  --ink:#e8e8ec;--muted:#8a8a94;--g:#86efac;--g2:#5fcb88;--g3:#24392e;--gdark:#052e16;
  --side:84px;--top:56px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:Geist,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,select,textarea,input{font:inherit;color:inherit}

/* pixel icon */
.px{display:inline-block;width:32px;height:32px;image-rendering:pixelated;filter:drop-shadow(0 0 6px rgba(134,239,172,.55))}
.px svg{width:100%;height:100%;display:block;overflow:visible}
.px .arm{transform-origin:1px 6px;animation:clap 2.6s cubic-bezier(.6,0,.2,1) infinite}
.px .flash{opacity:0;animation:flash 2.6s linear infinite}
@keyframes clap{0%,52%{transform:rotate(-22deg)}62%,100%{transform:rotate(0)}}
@keyframes flash{0%,61%{opacity:0}63%{opacity:1}75%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.px .arm,.px .flash{animation:none}}

/* wordmark */
.brand{display:flex;align-items:center;gap:9px;position:relative}
.brand b{font-weight:800;font-size:21px;letter-spacing:-.05em;line-height:1;text-shadow:0 0 18px rgba(134,239,172,.45)}
.brand::before{content:"";position:absolute;inset:-14px -22px;background:radial-gradient(closest-side,rgba(134,239,172,.22),transparent);z-index:-1;pointer-events:none}

/* sidebar */
.side{position:fixed;left:12px;top:12px;bottom:12px;width:60px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 40%,rgba(255,255,255,.015));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;z-index:30}
.side .home{margin-bottom:14px;position:relative}
.side .home::before{content:"";position:absolute;inset:-12px;background:radial-gradient(closest-side,rgba(134,239,172,.25),transparent);z-index:-1}
.side a.i{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--muted);position:relative;transition:color .25s ease,background .25s ease,box-shadow .25s ease,transform .25s ease}
.side a.i:hover{background:rgba(255,255,255,.06);color:var(--ink);transform:translateY(-1px)}
.side a.i.on{color:var(--g);background:linear-gradient(180deg,rgba(134,239,172,.22),rgba(134,239,172,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(134,239,172,.22)}
.side a.i svg{width:20px;height:20px}
.side a.i[data-tip]::after{content:attr(data-tip);position:absolute;left:56px;white-space:nowrap;background:rgba(24,24,29,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);font-size:12px;padding:6px 10px;border-radius:9px;color:var(--ink);opacity:0;transform:translateX(-4px);pointer-events:none;transition:.2s ease}
.side a.i[data-tip]:hover::after{opacity:1;transform:none}
.side .plus{margin-top:10px;background:var(--g);color:var(--gdark)!important}
.side .plus:hover{background:#a7f3c4!important}
.side .sp{flex:1}

/* top bar */
.shell{margin-left:var(--side);min-height:100vh;overflow-x:clip;min-width:0}
.topbar{position:sticky;top:0;z-index:20;height:var(--top);display:flex;align-items:center;gap:10px;padding:0 16px;background:rgba(11,11,14,.6);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
.topbar .brand .px{display:none}
.topbar .brand{margin-right:6px}
.topbar .grow{flex:1}
.capill{display:flex;align-items:center;gap:8px;height:36px;max-width:440px;min-width:0;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:0 6px 0 12px;font-size:13px;color:var(--muted)}
.capill span{color:var(--g2);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.04em}
.capill code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"Geist Mono",ui-monospace,monospace;color:var(--ink)}
.capill button{border:0;background:var(--panel2);color:var(--ink);font-size:12px;padding:5px 9px;border-radius:7px;cursor:pointer}
.capill button:disabled{opacity:.4;cursor:default}
.btn-g{border:0;background:var(--g);color:var(--gdark);font-weight:600;font-size:14px;height:36px;padding:0 16px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:.15s}
.btn-g:hover{background:#a7f3c4}
.btn-o{border:1px solid var(--line2);background:transparent;color:var(--ink);font-weight:500;font-size:14px;height:36px;padding:0 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
.btn-o:hover{border-color:#4a4a52}

/* ticker */
.ticker{height:34px;border-bottom:1px solid var(--line);overflow:hidden;display:flex;align-items:center;font-size:13px;color:var(--muted);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker .row{display:flex;gap:28px;white-space:nowrap;animation:tick 40s linear infinite;padding-left:28px}
.ticker .row i{font-style:normal;color:var(--g)}
.ticker .row b{color:var(--ink);font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* mobile tab bar */
.tabs{display:none}
@media (max-width:760px){
  .side{display:none}
  .shell{margin-left:0;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .topbar .brand .px{display:inline-block}
  .topbar .capill{display:none}
  .tabs{display:flex;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:30;height:60px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(40,40,46,.55),rgba(20,20,24,.6));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.5)}
  .tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--muted);transition:color .25s}
  .tabs a svg{width:21px;height:21px}
  .tabs a.on{color:var(--g)}
  .tabs a.plus span{width:40px;height:30px;border-radius:10px;background:var(--g);color:var(--gdark);display:grid;place-items:center}
}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;background:var(--g);color:var(--gdark);font-weight:600;font-size:13px;padding:10px 16px;border-radius:10px;transition:.25s;pointer-events:none;z-index:60;max-width:90vw;text-align:center}
.toast.show,.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width:760px){.toast{bottom:calc(84px + env(safe-area-inset-bottom))}}