/* Clip Club mobile: the desktop's ice hologram (tokens, fonts, topo map, corner brackets, platform glows),
   in an iOS shell built by hand. Motion = transform/opacity only. No grain, no blur on content, blur only on chrome. */
@font-face{font-family:Unb;src:url(fonts/unbounded-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Unb;src:url(fonts/unbounded-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fig;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Fig;src:url(fonts/figtree-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Fig;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Fig;src:url(fonts/figtree-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Mart;src:url(fonts/martian-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Mart;src:url(fonts/martian-mono-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
:root{--bg:#04070a;--ink:#ecf7ff;--dim:rgba(220,238,250,.74);--faint:rgba(196,222,238,.52);--ghost:rgba(196,222,238,.32);--line:rgba(170,225,255,.13);--line2:rgba(196,238,255,.30);--fill:rgba(150,215,255,.045);
  --ice:#9fe8ff;--ice2:#d9f7ff;--ok:#74f0c0;--warn:#ffb16b;--crit:#ff6b81;--sans:Fig,-apple-system,system-ui,sans-serif;--mono:Mart,ui-monospace,monospace;--disp:Unb,Fig,sans-serif;--r:14px;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--tab:calc(50px + var(--sb))}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,input,a{font:inherit;color:inherit;background:none;border:0;text-decoration:none}
input{-webkit-user-select:text;user-select:text}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#topo{position:absolute;left:-6%;top:-6%;width:112%;height:112%;animation:drift 160s steps(64) infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(-1.5%,-1%,0)}to{transform:translate3d(1.5%,1%,0)}}
.beam{position:absolute;inset:0;background:radial-gradient(700px 360px at 80% -8%,rgba(160,225,255,.13),transparent 60%),radial-gradient(500px 400px at 0% 110%,rgba(120,200,255,.07),transparent 60%)}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 40%,rgba(2,4,6,.75) 100%)}

/* page stack */
#stack{position:fixed;inset:0;z-index:1;overflow:hidden}
.page{position:absolute;inset:0;background:transparent;will-change:transform;contain:layout paint}
.page.pushed{background:var(--bg);box-shadow:-12px 0 40px rgba(0,0,0,.55)}
.page.pushed::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(600px 300px at 80% -8%,rgba(160,225,255,.09),transparent 60%)}
.page.under::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.25);pointer-events:none}

.sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding:calc(44px + var(--st)) calc(16px + var(--sr)) calc(var(--tab) + 24px) calc(16px + var(--sl))}
.inner{display:flex;flex-direction:column;gap:12px;max-width:640px;margin:0 auto;will-change:transform}
.ptr{position:absolute;left:50%;top:calc(44px + var(--st) + 6px);margin-left:-14px;width:28px;height:28px;opacity:0;pointer-events:none}
.ptr .spin{position:absolute;inset:4px;border-radius:50%;border:2px solid rgba(159,232,255,.25);border-top-color:var(--ice)}
.ptr.on .spin{animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* nav bar: transparent over the large title, translucent blurred once scrolled */
.nb{position:absolute;left:0;right:0;top:0;z-index:4;padding-top:var(--st);pointer-events:none}
.nb::before{content:'';position:absolute;inset:0;background:rgba(6,11,16,.62);border-bottom:.5px solid rgba(170,225,255,.16);opacity:0;transition:opacity .2s}
.nb.solid::before{opacity:1}
.nb-bar{position:relative;height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 calc(8px + var(--sr)) 0 calc(8px + var(--sl));pointer-events:auto}
.nb-t{font:600 16px var(--sans);opacity:0;transform:translate3d(0,4px,0);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.nb.solid .nb-t,.nb.sub .nb-t{opacity:1;transform:none}
.nb-r{justify-self:end;display:flex;gap:4px}.nb-l{width:1px}
.nb-ic{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;color:var(--ice)}.nb-ic svg{width:21px;height:21px;stroke-width:1.8}
.nb-back{display:flex;align-items:center;gap:0;height:40px;padding:0 8px 0 2px;color:var(--ice);font-size:16px;justify-self:start}.nb-back .chev{width:24px;height:24px;stroke-width:2.4}
.lt{font:600 30px/1.15 var(--disp);letter-spacing:-.02em;margin:2px 2px 4px;transform-origin:left center;will-change:opacity,transform}

/* panels: same hologram card as the desktop */
.panel{position:relative;display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(150,215,255,.06),rgba(150,215,255,.018));box-shadow:inset 0 1px 0 rgba(225,248,255,.09),0 18px 40px -24px rgba(0,0,0,.8);padding:14px 16px;min-width:0}
.panel::before,.panel::after{content:'';position:absolute;width:12px;height:12px;pointer-events:none;border-color:var(--line2);border-style:solid}
.panel::before{top:-1px;left:-1px;border-width:1px 0 0 1px;border-top-left-radius:var(--r)}.panel::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0;border-bottom-right-radius:var(--r)}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.ph b{font:600 13px var(--sans);color:var(--dim)}
.gh{font:600 13px var(--sans);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:8px 4px -4px;font-size:11.5px}

/* press feedback (haptic-style squeeze) */
.pr{transition:transform .32s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.pr.down{transform:scale(.965);transition-duration:.08s;transition-timing-function:ease-out}
.row.pr.down,.nb-ic.pr.down,.nb-back.pr.down{transform:none;opacity:.55}

/* hero */
.hero{overflow:hidden;padding-bottom:0}
.hl{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--dim)}
.ldot{width:8px;height:8px;border-radius:50%;background:#5eeaaa;box-shadow:0 0 6px rgba(94,234,170,.6)}.ldot.off{background:rgba(196,222,238,.3);box-shadow:none}
.hs{font-size:12.5px;color:var(--faint);margin-top:2px}.hs b{color:var(--ok);font-weight:600}
.sig{display:block;width:calc(100% + 32px);height:46px;margin:6px -16px 0}

/* odometer */
.odo{display:inline-flex;font:500 22px/1 var(--disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow:hidden;height:1.12em;align-items:flex-start}
.odo.big{font-size:44px;margin:8px 0 2px}.odo.mid{font-size:26px}.odo.sm{font-size:15px;font-family:var(--sans);font-weight:600}
.od{display:inline-block;height:1.12em;overflow:hidden}.od>span{display:flex;flex-direction:column;transition:transform .9s cubic-bezier(.22,1.2,.36,1);will-change:transform}
.od i,.odo .sep{font-style:normal;height:1.12em;line-height:1.12em;display:block}.odo .sep{display:inline-block}

/* chart card */
.chartp{padding:12px 12px 10px;overflow:hidden}.chartp .ph{padding:0 4px}
.chart-host{position:relative;height:var(--ch,180px);border-radius:10px;overflow:hidden;background:rgba(3,7,10,.35);border:1px solid rgba(170,225,255,.07)}
.chart-host .t3h{height:100%}.t3{touch-action:pan-y!important}.t3-hint,.t3-exp{display:none!important}
.c2{position:absolute;inset:0;touch-action:pan-y}.c2 canvas{display:block;width:100%;height:100%}
.c2-tip{position:absolute;top:8px;left:0;padding:8px 10px;border-radius:10px;background:rgba(6,11,16,.82);border:1px solid var(--line2);font-size:12px;opacity:0;transition:opacity .12s;pointer-events:none;min-width:150px}
.c2-tip.on{opacity:1}.c2-tip b{display:block;font:500 10px var(--mono);color:var(--ice);margin-bottom:4px}.c2-tip span{display:flex;align-items:center;gap:6px}.c2-tip i{width:7px;height:7px;border-radius:50%}.c2-tip em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:11px}

/* segmented control */
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);padding:2px;border-radius:9px;background:rgba(150,215,255,.08);border:1px solid rgba(170,225,255,.08);min-width:120px}
.seg .thumb{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n));border-radius:7px;background:rgba(190,235,255,.18);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(225,248,255,.25);transform:translate3d(calc(var(--i) * 100%),0,0);transition:transform .36s cubic-bezier(.3,1.25,.5,1)}
.seg button{position:relative;z-index:1;height:30px;padding:0 10px;font-size:13px;font-weight:600;color:var(--dim);transition:color .2s;white-space:nowrap}.seg button.on{color:var(--ink)}
.seg button em{font-style:normal;font:400 10.5px var(--mono);color:var(--faint);margin-left:3px}

/* platform tiles */
.tiles{display:grid;gap:10px}
.tile{display:grid;grid-template-columns:1fr 120px;gap:4px 12px;align-items:end;box-shadow:inset 0 1px 0 rgba(225,248,255,.09),inset 0 -44px 60px -50px var(--pc),0 18px 40px -24px rgba(0,0,0,.8)}
.tile.youtube{--pc:#ff6276}.tile.tiktok{--pc:#4ff0e6}.tile.instagram{--pc:#c991ff}
.tile .th{grid-column:1/-1;display:flex;gap:8px;align-items:center;font-size:13.5px}.tile .th b{font-weight:600}.tile .th .chev{margin-left:auto;color:var(--ghost)}
.pfic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);color:var(--pc)}
.tv>span:not(.odo){display:block;font-size:12px;color:var(--faint);margin-top:4px}.tv>span:not(.odo) b{color:var(--ok);font-weight:600}
.spark{width:120px;height:46px;display:block}.spark.big{width:100%;height:90px;margin:4px 0 8px}
.chev{width:15px;height:15px;color:var(--ghost);stroke-width:2.2}

/* inset grouped lists */
.group{border-radius:var(--r);background:rgba(10,18,24,.55);border:1px solid var(--line);overflow:hidden}
.group.flat{background:rgba(150,215,255,.05)}
.row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;width:100%;text-align:left;padding:9px 14px;min-height:50px;border-top:.5px solid rgba(170,225,255,.11)}
.row:first-child{border-top:0}.row .chev{margin-right:-4px}
.tx{font-size:14px;line-height:1.3;overflow-wrap:anywhere;min-width:0}.rv{font:400 12.5px var(--mono);font-variant-numeric:tabular-nums;color:var(--dim)}
.mono{font:400 11.5px var(--mono);color:var(--faint);white-space:nowrap}
.pf{display:inline-flex;gap:5px;align-items:center;font-size:11.5px;font-weight:600;color:var(--dim)}.pf svg{width:13px;height:13px}
.pf.youtube svg,.youtube .pfic{color:#ff6276}.pf.tiktok svg,.tiktok .pfic{color:#4ff0e6}.pf.instagram svg,.instagram .pfic{color:#c991ff}
.empty{color:var(--faint);text-align:center;padding:22px 12px}
.key{font-size:12px;color:var(--faint);padding:0 4px}

/* iOS switch */
.tg{grid-template-columns:1fr auto;cursor:pointer}.sw{position:absolute;opacity:0;pointer-events:none}
.sw-ui{position:relative;width:51px;height:31px;border-radius:16px;background:rgba(150,215,255,.16);transition:background .25s}
.sw-ui::after{content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#f4fbff;box-shadow:0 3px 8px rgba(0,0,0,.3),0 1px 1px rgba(0,0,0,.16);transition:transform .34s cubic-bezier(.3,1.3,.5,1)}
.sw:checked+.sw-ui{background:#3fcf8e}.sw:checked+.sw-ui::after{transform:translate3d(20px,0,0)}
.tg:active .sw-ui::after{width:31px}.sw:checked+.sw-ui:active::after{}

/* forecast */
.fc{border-left:2px solid var(--line2)}.fc.good{border-left-color:var(--ok)}.fc.none{border-left-color:var(--crit)}.fc.maybe{border-left-color:var(--warn)}
.fh{display:flex;justify-content:space-between;align-items:center}.fhk{font-size:13px;color:var(--dim);margin:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fhk.wrap{white-space:normal}
.vd{display:block;font:500 17px var(--disp);margin:2px 0 6px}.fc.none .vd{color:#ff9aa8}.fc.good .vd{color:var(--ok)}.fc.maybe .vd{color:#ffd0a1}
.fm{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--faint)}
.fg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}.fg .w{grid-column:1/-1}.fg>div>span{display:block;font:400 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}.fg b{font-size:14px;font-weight:600}
.act{padding:12px 14px;border-radius:12px;background:var(--fill);border:1px solid var(--line);font-size:14px}
canvas.pc{display:block;width:100%;height:150px}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;border-radius:13px;font-weight:600;font-size:16px}
.btn.pri{color:#04121a;background:linear-gradient(180deg,#d9f7ff,#9fe8ff)}.btn.sec{background:rgba(150,215,255,.1);color:var(--ice);border:1px solid var(--line)}
.btn.danger{background:rgba(255,107,129,.1);color:#ff8597;border:1px solid rgba(255,107,129,.2)}.btn:disabled{opacity:.5}

/* tab bar: translucent, blurred */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);height:var(--tab);padding:0 var(--sr) var(--sb) var(--sl);border-top:.5px solid rgba(170,225,255,.16)}
.tabbar::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(6,11,16,.66);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;color:var(--ghost);transition:color .2s}
.tabbar svg{width:27px;height:27px;stroke-width:1.7;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.tabbar button.on{color:var(--ice)}.tabbar button.on svg{fill:rgba(159,232,255,.16)}
.tabbar button:active svg{transform:scale(.86);transition-duration:.08s}

/* sheets */
#sheets{position:fixed;inset:0;z-index:40;pointer-events:none}
.sh-bd{position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events:auto;opacity:0}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - var(--st) - 24px);display:flex;flex-direction:column;pointer-events:auto;border-radius:14px 14px 0 0;background:linear-gradient(180deg,#0b141b,#070d12);border:1px solid var(--line2);border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(225,248,255,.12);padding-bottom:var(--sb);will-change:transform;transform:translate3d(0,110%,0)}
.grab{display:grid;place-items:center;height:20px;flex:none}.grab i{width:36px;height:5px;border-radius:3px;background:rgba(196,222,238,.35)}
.sh-h{display:flex;align-items:center;justify-content:space-between;padding:0 16px 8px;flex:none}.sh-h b{font:600 17px var(--sans)}
.sh-x{width:30px;height:30px;border-radius:15px;display:grid;place-items:center;background:rgba(150,215,255,.12);color:var(--dim)}.sh-x svg{width:14px;height:14px;stroke-width:2.6}
.sh-b{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 16px 20px;display:flex;flex-direction:column;gap:12px}
.ps-top{display:flex;justify-content:space-between;align-items:center}.ps-h{font-size:15px;line-height:1.35}
.ps-n{display:flex;align-items:baseline;gap:8px}.ps-n>span{font-size:13px;color:var(--faint)}
.ps-fc{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill);display:grid;gap:4px}.ps-fc b{font:500 15px var(--disp)}.ps-fc.none b{color:#ff9aa8}.ps-fc.good b{color:var(--ok)}.ps-fc.maybe b{color:#ffd0a1}.ps-fc span{font-size:13px;color:var(--dim)}

/* login */
.login{margin-top:6vh;display:grid;gap:6px}.login label{font-size:12px;font-weight:600;color:var(--dim)}
.login input{width:100%;font-size:17px;padding:13px 14px;border-radius:12px;background:rgba(150,215,255,.06);border:1px solid var(--line);outline:0}.login input:focus{border-color:var(--line2)}
.err{min-height:20px;font-size:13px;color:#ff9aa8}

/* splash */
#splash{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .4s}#splash img{width:26vw;max-width:120px;border-radius:22%}
#splash i{position:absolute;bottom:calc(30% - 20px);width:40px;height:2px;border-radius:1px;background:linear-gradient(90deg,transparent,var(--ice),transparent);animation:sp 1.1s ease-in-out infinite}
@keyframes sp{0%,100%{transform:translateX(-30px);opacity:.2}50%{transform:translateX(30px);opacity:1}}
#splash.out{opacity:0;pointer-events:none}
body.rm *,body.rm *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){#topo{animation:none}}
.fg b .odo{color:inherit}
.t3 .t3-x,.t3 .t3-now,.t3 .t3-y,.t3 .t3-yt{margin:0!important;white-space:nowrap}
.tv .odo{color:var(--ink)}

.nb.solid::before{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}