*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-weight:var(--w-regular);color:var(--n-900);background:#DCDCE3;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0;font-weight:var(--w-strong)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.muted{color:var(--n-600)} .ink{color:var(--n-900);font-weight:var(--w-strong)} .s13{font-size:var(--t-13)}

/* ---------- stage / device ---------- */
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:56px;padding:32px}
.device{position:relative;width:390px;height:844px;border-radius:54px;overflow:hidden;background:var(--n-25);
  box-shadow:0 0 0 11px #111116,0 0 0 12px #3a3a44,0 40px 80px -20px rgba(0,0,0,.45);isolation:isolate;touch-action:pan-y}
.legend{max-width:300px;font-size:var(--t-15);line-height:1.5;color:var(--n-800)} .legend h1{font-size:var(--t-22);margin-bottom:var(--s-12)}
.statusbar{position:absolute;inset:0 0 auto 0;height:47px;display:flex;justify-content:space-between;align-items:center;padding:4px 30px 0 44px;font-size:var(--t-17);font-weight:var(--w-strong);z-index:60;pointer-events:none}
.sb-r{display:flex;gap:6px;align-items:center}
.sig{width:17px;height:11px;background:linear-gradient(90deg,currentColor 0 3px,transparent 3px 4.6px,currentColor 4.6px 7.6px,transparent 7.6px 9.2px,currentColor 9.2px 12.2px,transparent 12.2px 13.8px,currentColor 13.8px);clip-path:polygon(0 75%,22% 75%,22% 52%,45% 52%,45% 28%,72% 28%,72% 0,100% 0,100% 100%,0 100%)}
.wifi{width:15px;height:11px;background:currentColor;clip-path:path("M7.5 11 L0 3.2 A11 11 0 0 1 15 3.2Z")}
.bat{width:25px;height:12px;border:1.2px solid rgba(22,22,29,.4);border-radius:4px;position:relative}.bat:after{content:"";position:absolute;inset:1.5px;right:5px;background:currentColor;border-radius:2px}
/* Dynamic Island — doubles as the toast surface (iOS silent-mode spell) */
.island{position:absolute;top:11px;left:50%;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#fff;font-size:var(--t-15);font-weight:var(--w-strong);overflow:hidden;
  transition:width var(--d-slow) var(--spring-soft),margin var(--d-slow) var(--spring-soft),height var(--d-slow) var(--spring-soft)}
.island .isl-ico,.island .isl-txt{opacity:0;transform:scale(.6);transition:opacity 160ms,transform var(--d-base) var(--spring);white-space:nowrap}
.island.open{width:300px;margin-left:-150px;height:40px}
.island.open .isl-ico,.island.open .isl-txt{opacity:1;transform:none;transition-delay:120ms}
.isl-ico svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.island.wig .isl-ico{animation:bellwig 700ms var(--ease-out) 180ms}

.app{position:absolute;inset:0;transform-origin:50% 0;transition:transform var(--d-slow) var(--ease-ios),border-radius var(--d-slow) var(--ease-ios),filter var(--d-slow);border-radius:0;overflow:hidden;background:var(--n-25)}
.device.sheet-open .app{transform:scale(.92) translateY(18px);border-radius:24px;filter:brightness(.82)}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:47px 0 calc(62px + 34px + 40px);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 220ms var(--ease-out),transform 320ms var(--ease-out),visibility 0s 220ms;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.screen::-webkit-scrollbar{display:none}
.screen#scr-home{padding-top:0}
.screen.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* press state (shared) */
.press{transition:transform 120ms var(--ease-out),background-color 160ms}
.press:active,.press.pressed{transform:scale(.96)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;height:107px;margin-top:0;padding:47px var(--s-16) 0 var(--s-20);display:flex;align-items:center;justify-content:space-between;background:transparent;transition:background 200ms,box-shadow 200ms}
.topbar.scrolled{background:rgba(246,246,248,.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 .5px 0 rgba(12,12,18,.12)}
.wordmark{font-size:var(--t-22);font-weight:var(--w-strong);letter-spacing:-.04em}
.tb-r{display:flex;gap:var(--s-8);align-items:center}
.pf{display:flex;flex-direction:column;align-items:flex-end;padding:var(--s-4) var(--s-8);border-radius:var(--r-12)}
.pf-l{font-size:var(--t-11);color:var(--n-600);line-height:1.1}.pf-v{font-size:var(--t-15);font-weight:var(--w-strong);line-height:1.25}
.bell{position:relative;width:40px;height:40px;border-radius:var(--r-pill);background:var(--n-0);box-shadow:var(--e-1);display:grid;place-items:center}
.bell-ico{width:21px;height:21px;fill:none;stroke:var(--n-900);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;transform-origin:50% 12%}
.bell.wig .bell-ico{animation:bellwig 700ms var(--ease-out)}
.bell.wig .clap{animation:clap 700ms var(--ease-out)}
@keyframes bellwig{0%{transform:rotate(0)}12%{transform:rotate(-22deg)}28%{transform:rotate(18deg)}44%{transform:rotate(-12deg)}60%{transform:rotate(7deg)}76%{transform:rotate(-3deg)}100%{transform:rotate(0)}}
@keyframes clap{0%,100%{transform:none}20%{transform:translateX(-2.2px)}40%{transform:translateX(2px)}60%{transform:translateX(-1px)}}
.badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--t-11);font-weight:var(--w-strong);display:grid;place-items:center;box-shadow:0 0 0 2px var(--n-25);
  transition:transform 260ms var(--ease-out),opacity 200ms}
.badge.gone{transform:translateX(10px) scale(.6);opacity:0}

/* ---------- hero (earn) ---------- */
.hero{margin:var(--s-4) var(--s-16) 0;padding:var(--s-20);border-radius:var(--r-24);background:var(--n-950);color:var(--n-0);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:320px;height:320px;right:-140px;top:-170px;border-radius:50%;background:radial-gradient(closest-side,rgba(82,103,244,.55),rgba(82,103,244,0));pointer-events:none}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.hero-l{font-size:var(--t-15);font-weight:var(--w-strong)}.hero-sub{font-size:var(--t-13);color:var(--n-400);margin-top:2px}
.hero-l.dk{color:var(--n-0)}
.live{display:flex;align-items:center;gap:6px;font-size:var(--t-11);font-weight:var(--w-strong);padding:5px 9px;border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:var(--n-100)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(14,159,90,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(14,159,90,0)}100%{box-shadow:0 0 0 0 rgba(14,159,90,0)}}
.hero-amt{display:flex;align-items:flex-start;margin:var(--s-16) 0 var(--s-12);font-weight:var(--w-strong);letter-spacing:-.04em;position:relative}
.hero-amt .cur{font-size:var(--t-28);line-height:1;margin-top:8px;margin-right:2px;color:var(--n-200)}
.hero-amt .roll{font-size:var(--t-56);line-height:1}
.hero-proof{display:flex;align-items:center;gap:var(--s-12);margin-bottom:var(--s-16);position:relative}
.hero-proof-t{font-size:var(--t-13);color:var(--n-200);line-height:1.35}.hero-proof-t b{color:var(--n-0);font-weight:var(--w-strong)}
.tiles{display:flex;flex:none;padding-left:6px}
.tiles .av{width:32px;height:32px;font-size:var(--t-13);margin-left:-8px;box-shadow:0 0 0 2px var(--n-950);border-radius:var(--r-8)}
.tiles .av:nth-child(1){transform:rotate(-8deg)}.tiles .av:nth-child(2){transform:rotate(4deg) translateY(-2px)}.tiles .av:nth-child(3){transform:rotate(10deg)}.tiles .av:nth-child(4){transform:rotate(-4deg) translateY(1px)}
.cta{width:100%;height:52px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-size:var(--t-17);font-weight:var(--w-strong);display:flex;align-items:center;justify-content:center;gap:var(--s-8);position:relative}
.cta svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.cta:active,.cta.pressed{background:var(--accent-press)}
.cta:disabled{background:var(--n-100);color:var(--n-400);cursor:default;transform:none}
.hero-foot{text-align:center;font-size:var(--t-11);color:var(--n-400);margin-top:var(--s-12);position:relative}

/* ---------- sections ---------- */
.sec{margin-top:var(--s-24)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 var(--s-20);margin-bottom:var(--s-12)}
.sec-h h2{font-size:var(--t-17)}.sec-meta{font-size:var(--t-13);color:var(--n-600)}
.sec-h.pad{margin-top:var(--s-24)}

/* ---------- Instinct card + stack (Slack catch-up cards) ---------- */
.stack{position:relative;height:168px;margin-bottom:16px!important;margin:0 var(--s-16)}
.stack-hint{text-align:center;font-size:var(--t-11);color:var(--n-400);margin-top:var(--s-12)}
.icard{background:var(--n-0);border-radius:var(--r-24);padding:var(--s-16);box-shadow:var(--e-1);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.stack .icard{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform;touch-action:pan-y;cursor:grab;
  transition:transform 420ms var(--spring-soft),opacity 300ms,box-shadow 200ms}
.stack .icard.drag{transition:none;cursor:grabbing;box-shadow:var(--e-2)}
.ic-h{display:flex;align-items:center;gap:var(--s-12)}
.ic-id{flex:1;min-width:0}.ic-sym{font-size:var(--t-17);font-weight:var(--w-strong)}.ic-kind{font-size:var(--t-13);color:var(--accent);font-weight:var(--w-strong)}
.ic-pnl{text-align:right}.ic-pnl b{display:block;font-size:var(--t-17);color:var(--up);font-weight:var(--w-strong)}.ic-pnl span{font-size:var(--t-11);color:var(--up);font-weight:var(--w-strong);letter-spacing:.04em}
.ic-txt{font-size:var(--t-17);line-height:1.35;margin:var(--s-12) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px}
.ic-f{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-13);color:var(--n-600)}
.ic-by{display:flex;align-items:center;gap:6px}.ic-by .av{width:20px;height:20px;font-size:9px;border-radius:50%}
.ic-st{font-size:var(--t-11);padding:3px 8px;border-radius:var(--r-pill);background:var(--n-50)}
.ic-st.live{background:var(--accent-soft);color:var(--accent);font-weight:var(--w-strong);animation:none}
.stamp{position:absolute;top:18px;right:18px;font-size:var(--t-13);font-weight:var(--w-strong);padding:4px 10px;border-radius:var(--r-pill);background:var(--n-900);color:var(--n-0);opacity:0;transform:scale(.8) rotate(6deg);pointer-events:none}
.icard.lp-on{transform:scale(.97)!important;box-shadow:var(--e-2)}

/* avatars */
.av{flex:none;width:44px;height:44px;border-radius:var(--r-12);display:grid;place-items:center;font-size:var(--t-13);font-weight:var(--w-strong);color:var(--n-800);position:relative}
.av-lg{width:84px;height:84px;border-radius:50%;font-size:var(--t-28)}
.av .chain{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:4px;background:var(--accent);box-shadow:0 0 0 2px var(--n-0)}

/* ---------- segmented (foodpanda squish thumb) ---------- */
.markets{margin-top:var(--s-32)}
.seg{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:0 var(--s-16);padding:4px;border-radius:var(--r-pill);background:var(--n-50)}
.seg button{position:relative;z-index:1;height:36px;font-size:var(--t-13);font-weight:var(--w-strong);color:var(--n-600);border-radius:var(--r-pill);transition:color 200ms}
.seg button.on{color:var(--n-900)}
.seg-thumb{position:absolute;top:4px;bottom:4px;left:4px;border-radius:var(--r-pill);background:var(--n-0);box-shadow:var(--e-1)}

/* featured carousel (Cosmos) */
.feat{display:flex;gap:var(--s-12);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s-16) var(--s-16) var(--s-4);scrollbar-width:none;scroll-padding:0 var(--s-16)}
.feat::-webkit-scrollbar{display:none}
.fcard{flex:none;width:72%;scroll-snap-align:start;background:var(--n-0);border-radius:var(--r-24);padding:var(--s-16);box-shadow:var(--e-1);transform-origin:50% 50%;transition:box-shadow 200ms}
.fc-h{display:flex;gap:var(--s-8);align-items:center}.fc-h .av{width:28px;height:28px;font-size:10px;border-radius:50%}
.fc-sym{font-size:var(--t-15);font-weight:var(--w-strong)}.fc-name{font-size:var(--t-13);color:var(--n-600);margin-top:var(--s-12)}
.fc-px{font-size:var(--t-22);font-weight:var(--w-strong);letter-spacing:-.02em;margin-top:2px;white-space:nowrap}.fc-px small{font-size:var(--t-13);color:var(--n-600);font-weight:var(--w-regular);letter-spacing:0;margin-left:4px}
.fc-ch{font-size:var(--t-13);margin-top:2px}.up{color:var(--up)}.down{color:var(--down)}
.fc-note{font-size:var(--t-11);color:var(--n-400);margin-top:var(--s-8)}

/* chips (Airbnb) */
.chips{display:flex;gap:var(--s-8);overflow-x:auto;padding:var(--s-16) var(--s-16) var(--s-4);scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 var(--s-16);border-radius:var(--r-pill);font-size:var(--t-13);font-weight:var(--w-strong);color:var(--n-800);background:var(--n-0);box-shadow:inset 0 0 0 1px var(--n-100);transition:box-shadow 160ms,transform 120ms}
.chip.on{box-shadow:inset 0 0 0 1.5px var(--n-900)}
.chip:active{transform:scale(.95)}
.lhead{display:flex;align-items:center;justify-content:space-between;margin:var(--s-12) var(--s-16) 0;padding:var(--s-12) var(--s-16);border-radius:var(--r-16);background:var(--n-0);box-shadow:var(--e-1);min-height:52px}
.lhead-t{font-size:var(--t-13);font-weight:var(--w-strong)}
.lhead .tiles .av{box-shadow:0 0 0 2px var(--n-0);width:26px;height:26px;font-size:9px}
.lhead.loading .lhead-t{width:96px;height:12px;border-radius:6px;color:transparent;background:var(--n-50)}
.lhead.loading .tiles .av{background:var(--n-50)!important;color:transparent}
.lhead .tiles .av{transition:transform 360ms var(--spring),background 200ms}

/* list rows */
.list{margin:var(--s-8) var(--s-16) 0}
.row{display:flex;align-items:center;gap:var(--s-12);padding:var(--s-12) var(--s-4);border-radius:var(--r-16);transition:background 140ms,transform 140ms var(--ease-out)}
.row:active{background:var(--n-50);transform:scale(.985)}
.row .av{border-radius:50%}
.r-id{flex:1;min-width:0}.r-n{font-size:var(--t-15);font-weight:var(--w-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.r-s{font-size:var(--t-13);color:var(--n-600);margin-top:1px}
.lev{font-size:var(--t-11);font-weight:var(--w-strong);color:var(--n-600);background:var(--n-50);padding:1px 6px;border-radius:6px}
.r-v{text-align:right}.r-p{font-size:var(--t-15);font-weight:var(--w-strong);white-space:nowrap}.r-p .fr{color:var(--n-400)}
.r-c{font-size:var(--t-13);margin-top:1px}
.pill{display:inline-block;font-size:var(--t-13);font-weight:var(--w-strong);padding:2px 8px;border-radius:var(--r-8);margin-top:3px}
.pill.up{background:var(--up-soft)}.pill.down{background:var(--down-soft)}
.skel .av{background:var(--n-50)!important;color:transparent}.skel .sk{height:12px;border-radius:6px;background:var(--n-50)}
.skel .sk.a{width:110px}.skel .sk.b{width:60px;margin-top:6px;height:10px}.skel .sk.c{width:72px;margin-left:auto}.skel .sk.d{width:44px;margin:6px 0 0 auto;height:10px}
.skel{animation:shim 900ms ease-in-out infinite alternate}@keyframes shim{to{opacity:.55}}
.row.enter{animation:rowin 420ms var(--ease-out) both}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}}
.empty{margin:var(--s-16);padding:var(--s-24) var(--s-20);border-radius:var(--r-24);background:var(--n-0);box-shadow:var(--e-1);text-align:center}
.empty .e-ic{width:48px;height:48px;border-radius:50%;background:var(--n-50);display:grid;place-items:center;margin:0 auto var(--s-12)}
.empty .e-ic svg{width:22px;height:22px;fill:none;stroke:var(--n-600);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty h4{margin:0;font-size:var(--t-17);font-weight:var(--w-strong)}.empty p{margin:6px 0 var(--s-16);font-size:var(--t-13);color:var(--n-600);line-height:1.45}
.btn2{height:44px;padding:0 var(--s-20);border-radius:var(--r-pill);background:var(--n-900);color:var(--n-0);font-size:var(--t-15);font-weight:var(--w-strong)}
.empty.small{padding:var(--s-20);box-shadow:none;background:transparent}

/* ---------- other tabs ---------- */
.lt{padding:var(--s-12) var(--s-20) var(--s-12)}.lt h1{font-size:var(--t-28);letter-spacing:-.02em}
.search{display:flex;align-items:center;gap:var(--s-8);margin:0 var(--s-16);height:44px;padding:0 var(--s-12);border-radius:var(--r-12);background:var(--n-50)}
.search svg{width:18px;height:18px;fill:none;stroke:var(--n-600);stroke-width:2;stroke-linecap:round}
.search input{flex:1;border:0;background:none;font:inherit;font-size:var(--t-17);outline:none;color:var(--n-900)}
.feed{padding:0 var(--s-16);display:flex;flex-direction:column;gap:var(--s-12)}
.mini-card{margin:0 var(--s-16);padding:var(--s-20);border-radius:var(--r-24);background:var(--n-950);color:var(--n-0)}
.mini-amt{font-size:40px;font-weight:var(--w-strong);letter-spacing:-.03em;margin:var(--s-8) 0 2px}
.prof{padding:var(--s-24) var(--s-20);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-4)}.prof h1{font-size:var(--t-28);margin-top:var(--s-12)}
.grid2,.grid3{display:grid;gap:var(--s-8);width:100%;margin-top:var(--s-16)}.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:1fr 1fr 1fr;margin-top:var(--s-8)}
.stat{background:var(--n-0);border-radius:var(--r-16);padding:var(--s-16);box-shadow:var(--e-1);display:flex;flex-direction:column;gap:var(--s-4)}
.stat span{font-size:var(--t-13);color:var(--n-600)}.stat b{font-size:var(--t-22);font-weight:var(--w-strong)}.stat.c{align-items:center;text-align:center}.stat.c span{font-size:var(--t-11)}
.note{margin-top:var(--s-24)}

/* ---------- dock: iOS floating tab bar + lens; FAB ---------- */
.dock{position:absolute;left:12px;right:86px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);height:62px;border-radius:var(--r-pill);z-index:40;display:grid;grid-template-columns:repeat(5,1fr);padding:4px;
  background:rgba(255,255,255,.72);backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);box-shadow:0 10px 30px -10px rgba(12,12,18,.28),inset 0 0 0 .5px rgba(255,255,255,.9),0 0 0 .5px rgba(12,12,18,.1)}
.lens{position:absolute;top:4px;bottom:4px;left:4px;border-radius:var(--r-pill);background:rgba(12,12,18,.06);box-shadow:inset 0 0 0 .5px rgba(12,12,18,.04);pointer-events:none}
.dk{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--n-800);border-radius:var(--r-pill)}
.dk .ic{width:26px;height:26px;display:block}
.dk .ic svg{width:100%;height:100%;display:block;overflow:visible}
.dk .lb{font-size:10px;font-weight:var(--w-strong);letter-spacing:-.01em}
.dk.on{color:var(--accent)}
.dk .o{opacity:1;transition:opacity 150ms}.dk .f{opacity:0;transition:opacity 150ms}
.dk.on .o{opacity:0}.dk.on .f{opacity:1}
.dk .ic svg *{transform-box:fill-box}
.fab{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:62px;height:62px;border-radius:50%;background:var(--accent);color:var(--on-accent);z-index:41;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(82,103,244,.7)}
.fab-i{width:26px;height:26px;position:relative}
.fab-i svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform 320ms var(--spring),opacity 180ms,filter 180ms}
.fab-i svg.out{opacity:0;transform:rotate(-90deg) scale(.4);filter:blur(2px)}
.device.sheet-open .fab,.device.sheet-open .dock{transform:translateY(130px);transition:transform 360ms var(--ease-ios)}
.fab,.dock{transition:transform 420ms var(--ease-ios)}

/* ---------- notifications (Vercel popover) ---------- */
.scrim{position:absolute;inset:0;z-index:48;display:none}
.scrim.on{display:block}
.notif{position:absolute;top:104px;right:12px;width:328px;z-index:49;background:var(--n-0);border-radius:var(--r-16);box-shadow:var(--e-3),0 0 0 .5px rgba(12,12,18,.1);transform-origin:calc(100% - 28px) -8px;transform:scale(.94) translateY(-6px);opacity:0;pointer-events:none;
  transition:transform 200ms var(--ease-out),opacity 160ms}
.notif.on{transform:none;opacity:1;pointer-events:auto}
.nt-tabs{display:flex;align-items:center;gap:var(--s-16);padding:0 var(--s-16);height:46px;box-shadow:inset 0 -1px 0 var(--n-50)}
.nt-tabs button{font-size:var(--t-13);color:var(--n-600);height:46px;display:flex;align-items:center;gap:6px}
.nt-tabs button.on{color:var(--n-900);font-weight:var(--w-strong);box-shadow:inset 0 -1.5px 0 var(--n-900)}
.nt-sp{flex:1}.nt-clear{color:var(--accent)!important;font-weight:var(--w-strong)}
.cnt{font-size:var(--t-11);min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--n-50);display:inline-grid;place-items:center;transition:transform 260ms var(--ease-out),opacity 200ms}
.cnt.gone{transform:translateX(8px);opacity:0}
.nt{display:flex;gap:var(--s-12);padding:var(--s-12) var(--s-16);align-items:flex-start;transition:opacity 300ms}
.nt .av{width:36px;height:36px;font-size:11px;border-radius:50%}
.nt-b{flex:1;font-size:var(--t-13);line-height:1.4}.nt-b b{font-weight:var(--w-strong)}.nt-q{color:var(--n-600)}
.nt-d{color:var(--up);font-weight:var(--w-strong);font-size:var(--t-11);margin-top:2px}
.udot{width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px;transition:transform 240ms var(--ease-out),opacity 200ms}
.notif.read .udot{transform:scale(0);opacity:0}.notif.read .nt{opacity:.62}
.nt-foot{font-size:var(--t-11);color:var(--n-400);padding:var(--s-8) var(--s-16) var(--s-12)}

/* ---------- composer sheet (Are.na fluid sheet) ---------- */
.sheet-scrim{position:absolute;inset:0;z-index:50;background:rgba(12,12,18,0);pointer-events:none;transition:background var(--d-slow) var(--ease-ios)}
.device.sheet-open .sheet-scrim{background:rgba(12,12,18,.25);pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:51;background:var(--n-0);border-radius:28px 28px 0 0;padding:0 var(--s-20) calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateY(105%);
  transition:transform 520ms var(--ease-ios);box-shadow:var(--e-3);touch-action:none}
.sheet.on{transform:translateY(0)}
.sheet.drag{transition:none}
.grab{height:22px;display:grid;place-items:center;cursor:grab}.grab i{width:36px;height:5px;border-radius:3px;background:var(--n-200)}
.sh-h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:40px}.sh-h h3{font-size:var(--t-17)}
.ghost{justify-self:start;color:var(--accent);font-size:var(--t-17)}
.sh-body{padding-top:var(--s-8)}
.lbl{font-size:var(--t-13);color:var(--n-600);margin:var(--s-16) 0 var(--s-8)}
.pick{display:flex;gap:var(--s-8);overflow-x:auto;margin:0 calc(-1 * var(--s-20));padding:0 var(--s-20);scrollbar-width:none}.pick::-webkit-scrollbar{display:none}
.dir{display:flex;align-items:center;justify-content:space-between;padding:var(--s-12) var(--s-16);border-radius:var(--r-16);background:var(--n-25)}
.dir-t{display:flex;flex-direction:column}.dir-t b{font-size:var(--t-15);font-weight:var(--w-strong)}.dir-t span{font-size:var(--t-13);color:var(--n-600);transition:opacity 160ms}
.switch{width:52px;height:32px;border-radius:var(--r-pill);background:var(--n-200);position:relative;transition:background 240ms var(--ease-out)}
.switch.on{background:var(--up)}.switch.dn{background:var(--down)}
.knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:var(--r-pill);background:var(--n-0);box-shadow:0 2px 6px rgba(0,0,0,.2)}
textarea{width:100%;margin-top:var(--s-16);border:0;resize:none;font:inherit;font-size:var(--t-17);line-height:1.4;padding:var(--s-12) var(--s-16);border-radius:var(--r-16);background:var(--n-25);outline:none;color:var(--n-900)}
textarea:focus{box-shadow:inset 0 0 0 1.5px var(--accent)}
.sh-pool{font-size:var(--t-13);color:var(--n-600);margin:var(--s-16) 0;line-height:1.4}.sh-pool b{color:var(--n-900);font-weight:var(--w-strong)}
.sh-pool .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);margin-right:6px;vertical-align:1px}

/* ---------- long-press radial (Pinterest) ---------- */
.lp{position:absolute;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity 160ms;background:rgba(246,246,248,.72)}
.lp-clone{position:absolute;margin:0;transform:scale(.97);box-shadow:var(--e-2);pointer-events:none;transition:transform 200ms var(--ease-out)}
.lp.on{opacity:1;pointer-events:auto}
.lp-origin{position:absolute;width:0;height:0}
.lp-btn{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;background:var(--n-0);box-shadow:var(--e-2);display:grid;place-items:center;color:var(--n-900);
  transform:translate(0,0) scale(.3);opacity:0;transition:transform 360ms var(--spring),opacity 140ms,background 120ms,color 120ms}
.lp.on .lp-btn{opacity:1}
.lp-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lp-btn.hot{background:var(--n-900);color:var(--n-0)}
.lp-ring{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(12,12,18,.25)}
.lp-label{position:absolute;left:0;right:0;font-size:var(--t-28);font-weight:var(--w-strong);text-align:center;letter-spacing:-.02em;opacity:0;transform:translateY(6px);transition:opacity 140ms,transform 220ms var(--spring)}
.lp-label.on{opacity:1;transform:none}

/* ---------- success (Strava) ---------- */
.done{position:absolute;inset:0;z-index:80;background:var(--n-950);color:var(--n-0);clip-path:circle(0 at var(--cx,50%) var(--cy,90%));pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.done.on{pointer-events:auto;animation:wipe 620ms var(--ease-ios) forwards}
.done.off{animation:unwipe 420ms var(--ease-ios) forwards}
@keyframes wipe{from{clip-path:circle(0 at var(--cx) var(--cy))}to{clip-path:circle(150% at var(--cx) var(--cy))}}
@keyframes unwipe{from{clip-path:circle(150% at 50% 50%);opacity:1}to{clip-path:circle(150% at 50% 50%);opacity:0}}
.done-c{text-align:center;position:relative;z-index:2;padding:0 var(--s-32)}
.done-t{font-size:40px;font-weight:var(--w-strong);letter-spacing:-.04em;opacity:0;transform:scale(.7)}
.done.on .done-t{animation:pop 640ms var(--spring) 380ms forwards}
.done-s{font-size:var(--t-15);color:var(--n-200);line-height:1.45;margin-top:var(--s-12);opacity:0}
.done.on .done-s{animation:fade 400ms var(--ease-out) 700ms forwards}
.done-b{margin-top:var(--s-32);height:48px;padding:0 var(--s-24);border-radius:var(--r-pill);background:var(--n-0);color:var(--n-950);font-size:var(--t-15);font-weight:var(--w-strong);opacity:0}
.done.on .done-b{animation:fade 400ms var(--ease-out) 950ms forwards}
@keyframes pop{to{opacity:1;transform:none}}@keyframes fade{to{opacity:1}}
.swoosh{position:absolute;overflow:visible;fill:none;stroke:var(--accent);stroke-width:46;stroke-linecap:round;z-index:1}
.swoosh path{stroke-dasharray:700;stroke-dashoffset:700}
.swoosh.s1{top:-20px;right:0;width:100%;height:300px}.swoosh.s2{bottom:30px;left:0;width:100%;height:200px}
.done.on .swoosh path{animation:draw 900ms var(--ease-ios) 520ms forwards}
.done.on .swoosh.s2 path{animation-delay:640ms}
@keyframes draw{to{stroke-dashoffset:0}}
.confetti{position:absolute;inset:0;z-index:1}
.cf{position:absolute;width:26px;height:26px;color:var(--n-0);opacity:0}
.cf svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.done.on .cf{animation:cfly 1100ms var(--ease-out) forwards}
@keyframes cfly{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}25%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}

/* ---------- real phone: full screen, no frame ---------- */
@media (max-width:500px){
  body{background:var(--n-25)}
  .stage{padding:0;display:block}
  .legend{display:none}
  .device{width:100vw;height:100dvh;border-radius:0;box-shadow:none}
  .statusbar,.island{display:none}
  .island.open{display:flex;top:calc(env(safe-area-inset-top,0px) + 8px)}
  .screen{padding-top:env(safe-area-inset-top,0px)}
  .topbar{padding-top:env(safe-area-inset-top,0px);height:calc(60px + env(safe-area-inset-top,0px))}
  .screen#scr-home{padding-top:0}
  .notif{top:calc(env(safe-area-inset-top,0px) + 60px)}
  html.sb .statusbar{display:flex} html.sb .island{display:flex}
  html.sb .screen{padding-top:47px} html.sb .screen#scr-home{padding-top:0} html.sb .topbar{padding-top:47px;height:107px} html.sb .notif{top:104px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .done.on{clip-path:none}
}