/* Zazim. Layout: one phone-width column floating on a slow night-glow field; content scrolls under a glass tab bar; plans are "tickets" tinted by their vibe; create + chat slide over as sheets. Single dark theme by choice. */
:root{
  --ink:#09090F;
  --surface:#13131C;
  --raised:#1B1B27;
  --lift:#252534;
  --line:rgba(236,232,255,.08);
  --line-2:rgba(236,232,255,.14);
  --fg:#F5F3FF;
  --muted:#A3A0BD;
  --dim:#6F6C8A;
  --ember:#FF8A5B;
  --rose:#FF4F8B;
  --ok:#4ADE9B;
  --glow:linear-gradient(135deg,var(--ember),var(--rose));
  --display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --body:"Figtree","Avenir Next",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-card:26px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
html,body{height:100%}
/* behave like an app: no double-tap zoom, no text-size jumps, no callout on long-press */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,.bub,.desc{-webkit-user-select:text;user-select:text}
/* iOS zooms into any text box under 16px when you tap it */
input,textarea,select{font-size:16px!important}
body{background:var(--ink);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px;border-radius:12px}

/* ambient field */
.field{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;width:80vmax;height:80vmax;border-radius:50%;animation:drift 38s ease-in-out infinite alternate;will-change:transform}
/* soft glows drawn as gradients: the same look as a big blur, at a fraction of the cost */
.blob.a{background:radial-gradient(closest-side,rgba(255,106,61,.30),rgba(255,106,61,0));left:-30vmax;top:-35vmax}
.blob.b{background:radial-gradient(closest-side,rgba(194,59,255,.20),rgba(194,59,255,0));right:-35vmax;top:5vmax;animation-duration:46s}
.blob.c{background:radial-gradient(closest-side,rgba(43,107,255,.18),rgba(43,107,255,0));left:-15vmax;bottom:-50vmax;animation-duration:52s}
@keyframes drift{to{transform:translate3d(8vmax,6vmax,0) scale(1.12)}}
.grain{position:absolute;inset:0;opacity:.35;background:url(/icons/grain.png) repeat;background-size:64px 64px}

/* shell */
.app{position:relative;z-index:1;height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column}
@media (min-width:560px){.app{border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(9,9,15,.35)}}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 18px 120px;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;margin:0 -18px;padding-inline:18px;background:linear-gradient(var(--ink) 55%,transparent)}
.mark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.mark i{width:22px;height:22px;border-radius:8px;background:var(--glow);display:inline-grid;place-items:center;box-shadow:0 0 24px rgba(255,79,139,.5)}
.mark i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:5px 0 0 -1px var(--ink)}
.iconbtn{position:relative;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);transition:transform .2s var(--ease)}
.iconbtn:active{transform:scale(.92)}
.iconbtn svg{width:20px;height:20px}
.badge{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--rose);font:600 11px/19px var(--mono);text-align:center;box-shadow:0 0 0 3px var(--ink)}

.hello{padding:10px 0 20px}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hello h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,10vw,44px);line-height:.98;letter-spacing:-.035em;margin:10px 0 0;text-wrap:balance}
.hello h1 em{font-style:normal;background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}

.sample{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;margin-bottom:18px;border-radius:16px;border:1px dashed var(--line-2);color:var(--muted);font-size:13px}
.sample span{flex:1;min-width:0}
.sample b{color:var(--fg);font-weight:600}
.pillbtn{flex:none;padding:8px 14px;border-radius:999px;background:var(--fg);color:var(--ink);font-weight:700;font-size:13px}

.sec{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
.sec h2{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.sec span{font:500 12px var(--mono);color:var(--dim)}
.stack{display:flex;flex-direction:column;gap:14px}

/* ticket card */
.card{--h:#FF8A5B;position:relative;border-radius:var(--r-card);padding:18px 18px 16px;background:
  radial-gradient(120% 90% at 0% 0%,color-mix(in oklab,var(--h) 30%,transparent),transparent 60%),
  linear-gradient(180deg,var(--raised),var(--surface));
  border:1px solid color-mix(in oklab,var(--h) 22%,var(--line));overflow:hidden}
.screen.anim .card{animation:rise .6s var(--ease) both}
.stack .card:nth-child(2){animation-delay:.05s}.stack .card:nth-child(3){animation-delay:.1s}.stack .card:nth-child(4){animation-delay:.15s}.stack .card:nth-child(5){animation-delay:.2s}
@keyframes rise{from{opacity:.001;transform:translateY(14px) scale(.985)}}
.c-top{display:flex;align-items:center;gap:12px}
.glyph{flex:none;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:27px;background:color-mix(in oklab,var(--h) 26%,var(--lift));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -10px color-mix(in oklab,var(--h) 70%,transparent)}
.when{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.when .d{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in oklab,var(--h) 70%,var(--fg))}
.when .t{font-family:var(--display);font-weight:700;font-size:22px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rel{flex:none;font:500 12px var(--mono);color:var(--muted);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.rel.live{color:var(--ink);background:var(--ok);border-color:transparent;display:flex;align-items:center;gap:6px}
.rel.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.card h3{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.02;letter-spacing:-.03em;margin:18px 0 4px;text-wrap:balance}
.desc{margin:0;color:var(--muted);font-size:15px;max-width:40ch}
.perf{position:relative;margin:16px -18px 14px;border-top:1.5px dashed var(--line-2)}
.perf::before,.perf::after{content:"";position:absolute;top:-12px;left:-11px;width:22px;height:22px;border-radius:50%;background:var(--ink);border:1px solid var(--line)}
.perf::after{left:auto;right:-11px}
.host{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:14px}
.host b{color:var(--fg);font-weight:600}
.via{font:500 11px var(--mono);letter-spacing:.06em;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.tag{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:color-mix(in oklab,var(--h) 22%,transparent);color:color-mix(in oklab,var(--h) 60%,var(--fg))}
.c-foot{display:flex;align-items:center;gap:12px}
.seats{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.dots{display:flex;flex-wrap:wrap;gap:5px}
.dot{width:10px;height:10px;border-radius:4px;border:1.5px solid var(--line-2)}
.dot.on{background:var(--h);border-color:var(--h);box-shadow:0 0 10px color-mix(in oklab,var(--h) 60%,transparent)}
.dot.me{background:var(--fg);border-color:var(--fg)}
.seatlabel{font:500 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.btn{flex:none;height:46px;padding:0 22px;border-radius:999px;font-weight:700;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .18s var(--ease),background .3s,color .3s}
.btn:active{transform:scale(.94)}
.btn.join{background:var(--h);color:#0b0b10;box-shadow:0 10px 28px -8px color-mix(in oklab,var(--h) 80%,transparent)}
.btn.ghost{background:rgba(255,255,255,.07);border:1px solid var(--line-2)}
.btn.full{background:transparent;border:1px solid var(--line-2);color:var(--dim);cursor:default}
.btn svg{width:18px;height:18px}
.minor{display:flex;gap:16px;margin-top:12px;font-size:13px;color:var(--dim)}
.minor button{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.minor button:hover{color:var(--muted)}
.confirm{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:14px;background:rgba(255,79,139,.1);border:1px solid rgba(255,79,139,.3);font-size:13px}
.confirm span{flex:1}
.confirm button{font-weight:700;padding:6px 12px;border-radius:999px}
.confirm .yes{background:var(--rose);color:var(--ink)}

/* avatars */
.av{--c:#8b5cf6;flex:none;width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;background:var(--c);color:#0b0b10;font:700 11px/1 var(--body);object-fit:cover;overflow:hidden}
.av.s{width:22px;height:22px;font-size:10px}
.av.l{width:44px;height:44px;font-size:16px}
.av.xl{width:84px;height:84px;font-size:30px;box-shadow:0 0 0 4px var(--ink),0 0 0 6px color-mix(in oklab,var(--c) 70%,transparent)}
.avs{display:flex}
.avs .av{box-shadow:0 0 0 2px var(--surface)}
.avs .av+.av{margin-left:-8px}

/* burst */
.burst{position:absolute;z-index:15;pointer-events:none;width:0;height:0}
.burst i{position:absolute;width:8px;height:8px;border-radius:3px;background:var(--h);animation:fly .9s var(--ease) forwards}
.burst i:nth-child(3n){background:var(--fg);border-radius:50%}
@keyframes fly{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* empty */
.empty{text-align:center;padding:40px 18px;border-radius:var(--r-card);border:1px dashed var(--line-2);color:var(--muted)}
.empty h3{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--fg);margin:0 0 6px}
.empty p{margin:0 auto 18px;max-width:30ch}

/* tab bar */
.tabs{position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:10;height:68px;border-radius:24px;display:flex;align-items:center;justify-content:space-around;background:rgba(22,22,32,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid var(--line-2);box-shadow:0 20px 50px -10px rgba(0,0,0,.7)}
.tab{position:relative;width:64px;height:52px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:color .2s}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--fg)}
.tab.on::after{content:"";position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--ember)}
.tab .badge{top:2px;right:10px}
.plus{width:58px;height:58px;border-radius:20px;background:var(--glow);display:grid;place-items:center;color:#fff;box-shadow:0 12px 30px -6px rgba(255,79,139,.65),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-14px);transition:transform .25s var(--ease)}
.plus:active{transform:translateY(-14px) scale(.9)}
.plus svg{width:26px;height:26px}

/* overlays */
.scrim{position:absolute;inset:0;z-index:20;background:rgba(5,5,10,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:94%;display:flex;flex-direction:column;background:var(--surface);border-radius:30px 30px 0 0;border-top:1px solid var(--line-2);transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s;box-shadow:0 -30px 60px -20px rgba(0,0,0,.8)}
.sheet.on{transform:none;visibility:visible;transition:transform .45s var(--ease)}
.grab{width:40px;height:5px;border-radius:3px;background:var(--line-2);margin:10px auto 0;flex:none}
.sheet-body{overflow-y:auto;padding:8px 18px 18px;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
.sheet h2{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.03em;margin:10px 0 2px}
.field-l{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;display:flex;justify-content:space-between}
.field-l b{color:var(--fg);font-weight:500;letter-spacing:.04em;text-transform:none}
.vibes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vibe{--h:#fff;aspect-ratio:1/1.05;max-width:100%;border-radius:20px;background:var(--raised);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);transition:all .25s var(--ease)}
.vibe span{font-size:26px;transition:transform .3s var(--ease)}
.vibe.on{background:color-mix(in oklab,var(--h) 22%,var(--raised));border-color:var(--h);color:var(--fg);box-shadow:0 10px 26px -12px var(--h)}
.vibe.on span{transform:scale(1.15) rotate(-6deg)}
.textin{width:100%;height:50px;margin-top:10px;padding:0 16px;border-radius:16px;background:var(--raised);border:1px solid var(--line);outline:none;font-size:15px}
.textin:focus{border-color:var(--line-2);background:var(--lift)}
.textin::placeholder{color:var(--dim)}
.chips{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:2px 18px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;height:42px;padding:0 16px;border-radius:14px;background:var(--raised);border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--muted);white-space:nowrap;transition:all .2s var(--ease);font-variant-numeric:tabular-nums}
.chip small{font:500 10px var(--mono);margin-left:3px;opacity:.7}
.chip.on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.chip.time{font-family:var(--mono);font-weight:500;padding:0 14px}
.row2{display:flex;align-items:center;gap:14px}
.stepper{display:flex;align-items:center;gap:4px;padding:4px;border-radius:18px;background:var(--raised);border:1px solid var(--line)}
.stepper button{width:42px;height:42px;border-radius:14px;font-size:22px;background:var(--lift)}
.stepper output{min-width:44px;text-align:center;font:700 22px var(--display);font-variant-numeric:tabular-nums}
.seatprev{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
.seatprev i{width:12px;height:12px;border-radius:4px;background:var(--glow);animation:pop .3s var(--ease)}
.seatprev i:first-child{background:var(--fg)}
@keyframes pop{from{transform:scale(0)}}
.toggle{display:flex;align-items:center;gap:14px;width:100%;margin-top:22px;padding:14px 16px;border-radius:18px;background:var(--raised);border:1px solid var(--line);text-align:left}
.toggle div{flex:1;min-width:0}
.toggle b{display:block;font-weight:600}
.toggle small{color:var(--muted);font-size:13px}
.sw{flex:none;width:50px;height:30px;border-radius:15px;background:var(--lift);position:relative;transition:background .25s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:all .3s var(--ease)}
.toggle[aria-checked="true"] .sw{background:var(--ok)}
.toggle[aria-checked="true"] .sw::after{left:23px;background:#fff}
.sheet-foot{flex:none;padding:12px 18px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surface)}
.post{width:100%;height:58px;border-radius:20px;background:var(--glow);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 14px 34px -10px rgba(255,79,139,.7);transition:transform .2s var(--ease)}
.post:active{transform:scale(.97)}
.post small{font:500 12px var(--mono);opacity:.85}

/* notifications */
.nlist{display:flex;flex-direction:column;gap:4px;padding-bottom:10px}
.nitem{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;text-align:left;width:100%}
.nitem:hover{background:var(--raised)}
.nitem .txt{flex:1;min-width:0;font-size:14px;color:var(--muted)}
.nitem .txt b{color:var(--fg);font-weight:600}
.nitem time{font:500 11px var(--mono);color:var(--dim);flex:none}
.nitem.new{background:rgba(255,138,91,.07)}
.nitem .glyph{width:44px;height:44px;border-radius:14px;font-size:20px}

/* chat list */
.crow{--h:#fff;display:flex;align-items:center;gap:14px;width:100%;padding:12px;margin:0 -12px;width:calc(100% + 24px);border-radius:20px;text-align:left;transition:background .2s}
.crow:hover{background:var(--surface)}
.crow .glyph{width:54px;height:54px;border-radius:18px}
.crow .mid{flex:1;min-width:0}
.crow b{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow p{margin:2px 0 0;color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow time{font:500 11px var(--mono);color:var(--dim);flex:none;align-self:flex-start;margin-top:6px}
.wrapcard{--h:#fff;position:relative;padding:18px;border-radius:var(--r-card);background:linear-gradient(135deg,color-mix(in oklab,var(--h) 20%,var(--raised)),var(--surface));border:1px solid color-mix(in oklab,var(--h) 30%,var(--line));overflow:hidden}
.wrapcard .big{position:absolute;right:-10px;top:-18px;font-size:110px;opacity:.16;transform:rotate(12deg);pointer-events:none}
.wrapcard h3{font-family:var(--display);font-size:26px;letter-spacing:-.03em;line-height:1.05;margin:8px 0 10px;max-width:14ch}
.wrapcard .people{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:16px}
.wrapcard .acts{display:flex;gap:10px;flex-wrap:wrap}
.wrapcard .btn.keep{background:var(--fg);color:var(--ink)}

/* chat view */
.chat{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--ink);transform:translateX(100%);transition:transform .45s var(--ease)}
.chat.on{transform:none}
.chat-h{--h:#fff;flex:none;display:flex;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(180deg,color-mix(in oklab,var(--h) 22%,var(--ink)),var(--ink));border-bottom:1px solid var(--line)}
.chat-h .glyph{width:44px;height:44px;border-radius:14px;font-size:22px}
.chat-h .mid{flex:1;min-width:0}
.chat-h b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-h small{color:var(--muted);font:500 12px var(--mono)}
.pin{--h:#fff;margin:12px 14px 0;padding:10px 14px;border-radius:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line)}
.pin b{color:var(--fg);font-family:var(--mono);font-weight:500}
.msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:3px;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.m{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.m .bub{padding:10px 14px;border-radius:20px 20px 20px 6px;background:var(--raised);font-size:15px;overflow-wrap:anywhere;animation:bub .35s var(--ease)}
@keyframes bub{from{transform:translateY(8px) scale(.96);opacity:.001}}
.m .who{font:500 11px var(--mono);color:var(--dim);margin:10px 0 3px 38px}
.m.me{align-self:flex-end}
.m.me .bub{background:var(--h,var(--ember));color:#0b0b10;border-radius:20px 20px 6px 20px;font-weight:500}
.m .avslot{width:26px;flex:none}
.sys{align-self:center;margin:12px 0;font:500 11px var(--mono);letter-spacing:.06em;color:var(--dim);text-align:center}
.qr{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 14px;scrollbar-width:none}
.qr::-webkit-scrollbar{display:none}
.qr button{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap}
.qr button:active{background:var(--lift)}
.composer{flex:none;display:flex;gap:8px;padding:6px 14px calc(12px + env(safe-area-inset-bottom,0px))}
.composer input{flex:1;min-width:0;height:48px;padding:0 18px;border-radius:24px;background:var(--surface);border:1px solid var(--line-2);outline:none}
.composer button{width:48px;height:48px;border-radius:50%;background:var(--glow);display:grid;place-items:center;color:#fff}
.composer button svg{width:20px;height:20px}

/* you */
.me-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0 8px}
.me-head h1{font-family:var(--display);font-size:32px;letter-spacing:-.03em;margin:16px 0 4px}
.stats{display:flex;gap:10px;justify-content:center;margin-top:8px}
.stat{padding:10px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);min-width:96px}
.stat b{display:block;font:700 22px var(--display);font-variant-numeric:tabular-nums}
.stat span{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.search{position:relative}
.search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dim)}
.search .textin{padding-left:44px;margin:0}
.prow{display:flex;align-items:center;gap:12px;padding:10px 0}
.prow .mid{flex:1;min-width:0}
.prow b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow small{color:var(--muted);font-size:12px}
.fbtn{flex:none;height:36px;padding:0 16px;border-radius:999px;font-weight:700;font-size:13px;background:var(--fg);color:var(--ink);transition:all .2s}
.fbtn.on{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.note{color:var(--dim);font-size:13px;margin:6px 0 0}
.modeline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;padding:14px 16px;border-radius:18px;border:1px dashed var(--line-2);font-size:13px;color:var(--muted)}

/* toasts */
.toasts{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:40;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{--h:#FF8A5B;pointer-events:auto;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:20px;background:rgba(30,30,44,.86);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line-2);box-shadow:0 18px 40px -10px rgba(0,0,0,.7);animation:tin .5s var(--ease)}
.toast .glyph{width:40px;height:40px;border-radius:13px;font-size:20px}
.toast .txt{flex:1;min-width:0;font-size:14px}
.toast .txt small{display:block;color:var(--muted);font:500 11px var(--mono)}
.toast.out{animation:tout .35s var(--ease) forwards}
.toast .btn{height:36px;padding:0 14px;font-size:13px}
@keyframes tin{from{transform:translateY(-20px) scale(.96);opacity:0}}
@keyframes tout{to{transform:translateY(-16px);opacity:0}}


/* v2: catalog, custom, place, settings */
.cats{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 10px;padding:2px 18px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;height:34px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line)}
.cat.on{color:var(--ink);background:var(--fg);border-color:var(--fg)}
.vibe{font-size:11.5px;line-height:1.15;text-align:center;padding:4px}
.vibe.other{border-style:dashed}
.custom{margin-top:10px;padding:14px;border-radius:20px;background:var(--raised);border:1px solid var(--line-2)}
.custom .textin{margin:0;background:var(--surface)}
.emojis{display:flex;gap:6px;overflow-x:auto;margin:10px -14px 0;padding:2px 14px;scrollbar-width:none}
.emojis::-webkit-scrollbar{display:none}
.emojis button{flex:none;width:40px;height:40px;border-radius:13px;font-size:20px;background:var(--surface);border:1px solid var(--line)}
.emojis button.on{border-color:var(--fg);background:var(--lift)}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sugg:empty{display:none}
.sugg button{height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--lift)}
.sugg small{display:block;width:100%;font:500 11px var(--mono);color:var(--dim)}
.place{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:14px;font-weight:600;color:var(--fg);text-decoration:none;max-width:100%}
.place span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place svg{flex:none;width:16px;height:16px;color:color-mix(in oklab,var(--h) 70%,var(--fg))}
.place:hover span{text-decoration:underline;text-underline-offset:3px}
.pin a{color:var(--fg);font-weight:600}
.minor .fofchip{text-decoration:none;display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.minor .fofchip i{width:8px;height:8px;border-radius:50%;background:var(--dim)}
.minor .fofchip.on i{background:var(--ok)}
.lock{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:14px 16px;border-radius:18px;background:rgba(74,222,155,.07);border:1px solid rgba(74,222,155,.25);font-size:13px;color:var(--muted)}
.lock svg{flex:none;width:20px;height:20px;color:var(--ok);margin-top:1px}
.lock b{color:var(--fg)}

/* v3: standalone app */
:root{padding:env(safe-area-inset-top,0px) 0 0}
/* a solid band under the phone's status bar, so it matches the header below it */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--ink);z-index:58;pointer-events:none}
html{background:var(--ink);overflow:hidden;overscroll-behavior:none}
.app{overflow:hidden;overflow:clip}
.auth{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:flex-start;padding:0 22px calc(28px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.auth .hero{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding-block:28px 20px}
.auth .mark{font-size:30px}
.auth .mark i{width:30px;height:30px;border-radius:11px}
.auth h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,13vw,60px);line-height:.92;letter-spacing:-.045em;margin:26px 0 14px;text-wrap:balance}
.auth h1 em{font-style:normal;background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth p.lede{color:var(--muted);font-size:16px;max-width:30ch;margin:0}
.ticker{display:flex;gap:8px;margin-top:26px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker div{display:flex;gap:8px;animation:tick 40s linear infinite;flex:none}
.ticker span{flex:none;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;white-space:nowrap}
@keyframes tick{to{transform:translateX(-50%)}}
.authform{display:flex;flex-direction:column;gap:10px}
.authform .textin{margin:0;height:54px;font-size:16px}
.authform .post{margin-top:6px}
.authform .err{color:#FF8FA3;font-size:14px;min-height:20px;margin:0}
.switch{color:var(--muted);font-size:14px;text-align:center;margin-top:8px}
.switch button{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ask{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;margin-bottom:12px;border-radius:20px;background:linear-gradient(135deg,rgba(255,138,91,.14),rgba(255,79,139,.1));border:1px solid rgba(255,138,91,.3)}
.ask .ic{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--glow);color:#fff}
.ask .ic svg{width:20px;height:20px}
.ask div{flex:1;min-width:0}
.ask b{display:block;font-weight:700}
.ask small{color:var(--muted);font-size:13px}
.ask .x{flex:none;width:30px;height:30px;border-radius:10px;color:var(--dim);font-size:18px}
.dist{font:500 12px var(--mono);color:var(--muted);margin-left:6px}
.bub.loc{display:flex;flex-direction:column;gap:6px;min-width:190px}
.bub.loc a{display:flex;align-items:center;gap:8px;color:inherit;font-weight:700;text-decoration:none}
.bub.loc a svg{width:18px;height:18px}
.bub.loc small{font:500 11px var(--mono);opacity:.75}
.gpsbtn{display:flex;align-items:center;gap:8px}
.gpsbtn svg{width:15px;height:15px}
.setrow{display:flex;align-items:center;gap:14px;width:100%;margin-top:10px;padding:14px 16px;border-radius:18px;background:var(--raised);border:1px solid var(--line);text-align:left}
.setrow div{flex:1;min-width:0}
.setrow b{display:block;font-weight:600}
.setrow small{color:var(--muted);font-size:13px}
.setrow .state{flex:none;font:600 12px var(--mono);padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.setrow .state.on{color:var(--ink);background:var(--ok);border-color:transparent}
.signout{display:block;margin:26px auto 0;color:var(--dim);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.boot{position:absolute;inset:0;display:grid;place-items:center;z-index:60;background:var(--ink);transition:opacity .4s}
.boot.gone{opacity:0;pointer-events:none}
.boot .mark{font-size:28px;animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5}}

/* replies + spots */
.minor{flex-wrap:wrap;row-gap:8px}
.minor .cant{color:var(--muted);text-decoration:none;font-weight:600;padding:6px 12px;margin:-6px 0 -6px -12px;border-radius:999px}
.minor .cant:hover{background:rgba(255,255,255,.05);color:var(--fg)}
.minor .spotsbtn{text-decoration:none;font-weight:600;color:var(--muted)}
.minor .spotsbtn.hot{color:var(--ink);background:var(--h);padding:5px 12px;margin:-5px 0;border-radius:999px;box-shadow:0 6px 18px -6px var(--h);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:scale(1.04)}}
.myreply{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;font-size:13px;color:var(--muted)}
.myreply .q{flex:1 1 100%;min-width:0;color:var(--fg);font-weight:500}
.myreply .loved{font:500 12px var(--mono);color:color-mix(in oklab,var(--h) 60%,var(--fg))}
.myreply .acts{display:flex;gap:14px;margin-left:auto}
.myreply .acts button{color:var(--dim);text-decoration:underline;text-underline-offset:3px}
.replies{margin-top:14px;padding:12px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.replies .rh{display:flex;justify-content:space-between;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.reply{display:flex;align-items:center;gap:10px}
.reply .rt{flex:1;min-width:0;font-size:14px;color:var(--muted)}
.reply .rt b{color:var(--fg);font-weight:600}
.reply .heart{flex:none;width:34px;height:34px;border-radius:12px;font-size:17px;color:var(--muted);border:1px solid var(--line)}
.reply .heart.on{border-color:transparent;background:rgba(255,79,139,.15);animation:pop .35s var(--ease)}
.reply .planit{flex:none;height:30px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:700;background:var(--h);color:var(--ink)}
.spotsedit{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:12px;padding:12px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid color-mix(in oklab,var(--h) 35%,var(--line))}
.spotsedit > div:first-child{flex:1 1 120px;min-width:0}
.spotsedit b{display:block;font-weight:600}
.spotsedit small{color:var(--muted);font-size:12px}
.spotsedit .stepper button{width:38px;height:38px}
.spotsedit .stepper button:disabled{opacity:.35}
.se-acts{display:flex;gap:8px;margin-left:auto}
.se-acts button{height:36px;padding:0 14px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted)}
.se-acts .save{background:var(--fg);color:var(--ink);font-weight:700}
.se-acts .save:disabled{opacity:.4}
.rhead{display:flex;align-items:center;gap:14px;margin-top:6px}
.rhead h2{margin:0 0 2px;font-size:26px;text-wrap:balance}
.rhead .note{margin:0}
.rhead .glyph{width:56px;height:56px}
.ropts{display:flex;flex-direction:column;gap:8px}
.ropt{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;border-radius:18px;background:var(--raised);border:1px solid var(--line);text-align:left;font-size:15px;font-weight:600;transition:transform .15s var(--ease),background .2s}
.ropt span{font-size:22px;flex:none}
.ropt:active{transform:scale(.98)}
.ropt:hover{background:var(--lift)}
.ropt.on{border-color:var(--fg)}
.whenchips{margin-top:8px}
.rown{display:flex;gap:8px;align-items:center;padding-bottom:10px}
.rown .textin{margin:0;flex:1;min-width:0}

.invite{display:flex;align-items:flex-end;gap:12px;margin-top:22px;padding:16px;border-radius:22px;background:linear-gradient(135deg,rgba(255,138,91,.16),rgba(255,79,139,.12));border:1px solid rgba(255,138,91,.35)}
.invite > div{flex:1;min-width:0}
.invite b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.02em}
.invite small{color:var(--muted);font-size:13px}
.invite .textin{height:40px;margin-top:10px;font:500 12px var(--mono);color:var(--muted);background:rgba(0,0,0,.25)}

/* v4: friends, circles, tour */
.hint{margin:-4px 2px 0;font-size:13px;color:var(--muted);min-height:18px}
.hint .okh{color:var(--ok);font-weight:600}
.hint button{color:var(--fg);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin-right:6px}
.fbtn.x{width:36px;padding:0;background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.fpair,.fconfirm{flex:none;display:flex;gap:6px}
.fconfirm button{height:36px;padding:0 14px;border-radius:999px;font-weight:700;font-size:13px;color:var(--muted);border:1px solid var(--line-2)}
.fconfirm .yes{background:var(--rose);color:var(--ink);border-color:transparent}
.prow small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.circle{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border-radius:20px;background:var(--surface);border:1px solid var(--line);text-align:left;min-width:0;transition:background .2s}
.circle:hover{background:var(--raised)}
.circle .ce{font-size:24px;margin-bottom:6px}
.circle b{font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.circle small{color:var(--muted);font-size:12px}
.circle.new{border-style:dashed;color:var(--muted)}
.circle.new .ce{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:18px;background:var(--lift)}
.circlename{display:flex;align-items:center;gap:10px}
.circlename .ce{flex:none;width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:var(--raised);border:1px solid var(--line)}
.circlename .textin{margin:0}
.picklist{display:flex;flex-direction:column;gap:4px}
.pick{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:16px;text-align:left;border:1px solid transparent}
.pick:hover{background:var(--raised)}
.pick.on{background:var(--raised);border-color:var(--line-2)}
.pick .mid{flex:1;min-width:0}
.pick b{display:block;font-weight:600}
.pick small{color:var(--muted);font-size:12px}
.pick .tick{flex:none;width:26px;height:26px;border-radius:9px;border:1.5px solid var(--line-2);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px}
.pick.on .tick{background:var(--ok);border-color:var(--ok);color:var(--ink)}
.tour{position:absolute;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));background:rgba(5,5,10,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
.tour.on{opacity:1}
.tour-card{position:relative;width:100%;max-width:440px;padding:26px 22px 22px;border-radius:30px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.8);transform:translateY(30px);transition:transform .45s var(--ease)}
.tour.on .tour-card{transform:none}
.tour-card .x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:12px;color:var(--dim);font-size:20px}
.tour-art{display:flex;gap:10px;margin-bottom:22px}
.tour-art span{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;font-size:30px;background:var(--raised);border:1px solid var(--line);animation:tourpop .5s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.tour-art span:first-child{background:var(--glow);border-color:transparent;box-shadow:0 14px 30px -10px rgba(255,79,139,.6)}
@keyframes tourpop{from{transform:translateY(12px) scale(.85);opacity:.001}}
.tour-card h2{font-family:var(--display);font-weight:800;font-size:32px;line-height:1;letter-spacing:-.035em;margin:10px 0 10px;text-wrap:balance}
.tour-card p{color:var(--muted);font-size:16px;margin:0;max-width:36ch}
.tour-dots{display:flex;gap:6px;margin:22px 0 18px}
.tour-dots i{width:7px;height:7px;border-radius:4px;background:var(--line-2);transition:all .3s var(--ease)}
.tour-dots i.on{width:22px;background:var(--ember)}
.tour-nav{display:flex;gap:10px}
.tour-nav .post{flex:1;height:54px}
.pillbtn.ghost{height:54px;padding:0 20px;border-radius:20px;background:transparent;color:var(--muted);border:1px solid var(--line-2)}
.tour-end{display:flex;flex-direction:column;gap:10px}
.tour-end .setrow{margin:0}

/* v5: safety and app */
.more{flex:none;width:34px;height:34px;margin-left:-4px;border-radius:12px;color:var(--muted);font-size:20px;line-height:1}
.more:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.prow .who{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;border-radius:14px}
.prow .who .mid{flex:1;min-width:0}
.prow .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.bub{text-align:left;font:inherit;color:inherit;cursor:pointer}
.legalnote{margin:2px 4px 0;font-size:12px;line-height:1.5;color:var(--dim);text-align:center}
.legalnote a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.legalrow{display:flex;justify-content:center;gap:20px;margin-top:26px;font-size:13px}
.legalrow a{color:var(--muted);text-decoration:none}
.legalrow a:hover{color:var(--fg)}
.signout.danger{margin-top:10px;color:#FF8FA3}
.ropt.danger{color:#FF8FA3}
.pillbtn.danger{background:var(--rose);color:var(--ink)}
.report{display:flex;flex-direction:column;gap:4px;padding:14px;border-radius:18px;background:var(--raised);border:1px solid var(--line)}
.report b{text-transform:capitalize}
.report small{color:var(--muted);font-size:12px}
.report p{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.25);color:var(--fg);white-space:pre-wrap;font-size:14px}
.report .acts{display:flex;gap:8px;margin-top:8px}
.report .acts button{height:34px;padding:0 14px;border-radius:999px;font-weight:700;font-size:13px;border:1px solid var(--line-2);color:var(--muted)}
.report .acts .yes{background:var(--rose);color:var(--ink);border-color:transparent}

.forgot{margin:-2px 4px 0;text-align:right;font-size:13px}
.forgot button{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}