:root{--bg:#1a0b2e;--card:#261242;--ink:#f6f0ff;--muted:#b7a8d4;
--pink:#ff2d9b;--gold:#ffc83f;--line:rgba(255,255,255,.14);--bad:#ff6b6b;--good:#5ee9a4}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* No 300ms wait before a tap registers — that delay is the single biggest
   reason a web page feels sluggish next to an app.
   On the TAPPABLE things only. Setting touch-action on `*` puts it on html and
   body too, and on some Android browsers that interferes with the panning
   gesture itself — which is how a page ends up refusing to scroll at all. */
a,button,.btn,.chip,label,input,select,textarea,summary{
touch-action:manipulation}
/* MUST be !important. `button,.btn` below sets display:block, which beats the
   browser's own [hidden] rule — so every hidden button was on screen anyway,
   including ones the code had deliberately left without a click handler. That is
   why tapping "turn on notifications" did nothing on unsupported devices. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
/* Stops the rubber-band bounce revealing a white strip behind the page. */
html,body{overscroll-behavior-y:none}
/* Nothing may push the page wider than the screen. If it does, the page scrolls
   sideways while a full-width fixed bar stays put, and the bar looks like it is
   sliding about. The chips rows scroll inside themselves instead. */
/* No overflow rule anywhere near the scrolling element. overflow-x:hidden on
   html and body together makes some Android browsers — Samsung Internet among
   them — pick the wrong scrolling element and stop scrolling vertically at all,
   and overflow on main risks a nested scroller instead. Nothing is allowed to
   be wider than the screen in the first place: long words and pasted links
   wrap, images and tables are capped, and the chip rows scroll inside
   themselves. */
main{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
main img,main table,main pre{max-width:100%}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
-webkit-font-smoothing:antialiased}
/* The repeating pattern sits behind everything, with a glow bleeding down from
   the top so the artwork blends into the page instead of stopping dead. */
body{background-image:radial-gradient(120% 60% at 50% 0%,rgba(255,45,155,.22),transparent 60%),
url('/a/pattern.webp');background-repeat:no-repeat,repeat;background-size:auto,300px 300px;
background-attachment:scroll;padding:0 16px env(safe-area-inset-bottom)}
main{max-width:460px;margin:0 auto;padding:0 0 40px}
.hero{margin:0 -16px 0;padding-top:env(safe-area-inset-top)}
.hero img{display:block;width:100%;height:auto}
/* Capped on shorter phones, so ordering is on the first screen rather than
   below a picture that fills it. The characters are at the top, so the crop
   only ever takes the dark floor off the bottom. */
.hero img{max-height:54vh;object-fit:cover;object-position:50% 18%}
/* Pulls the card up over the bottom of the artwork, like the mockup. */
.hero+.card,.hero+form,.hero+h1{margin-top:-58px;position:relative;z-index:2}
h1{font-size:30px;line-height:1.15;margin:0 0 6px;letter-spacing:-.4px}
h1 .hl{color:var(--gold)}
.brand{text-align:center;font-weight:900;letter-spacing:1px;font-size:15px;
color:var(--pink);text-transform:uppercase;margin:0 0 4px;
text-shadow:0 0 10px rgba(255,45,155,.85),0 0 22px rgba(255,45,155,.45)}
p{margin:0 0 16px}.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;
padding:24px;margin:0 0 16px;
box-shadow:0 10px 26px rgba(0,0,0,.35)}
label{display:block;font-weight:700;margin:0 0 8px;font-size:15px;
letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
/* A label that IS a name — a product, a person — keeps its own capitals. */
label.plain{text-transform:none;letter-spacing:0;color:var(--ink);font-size:16px}
textarea{width:100%;font-size:16px;padding:15px 16px;border-radius:14px;
background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--ink);
margin:0 0 16px;font-family:inherit;line-height:1.5;resize:vertical;
-webkit-appearance:none}
textarea:focus{outline:2px solid var(--pink);outline-offset:1px}
input{width:100%;font-size:20px;padding:16px;border-radius:14px;
border:2px solid rgba(255,255,255,.18);background:rgba(0,0,0,.28);color:var(--ink);
margin:0 0 18px}
input::placeholder{color:#7d6fa0}
/* Dropdowns and file pickers, which were left as the phone's tiny defaults. */
select{width:100%;font-size:17px;font-family:inherit;padding:14px 44px 14px 16px;
border-radius:14px;border:2px solid rgba(255,255,255,.18);color:var(--ink);
background-color:rgba(0,0,0,.28);margin:0 0 18px;-webkit-appearance:none;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;
background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select:focus{outline:none;border-color:var(--pink)}
select option{background:#261242;color:#f6f0ff}
input[type=file]{font-size:15px;padding:10px;color:var(--muted)}
input[type=file]::file-selector-button{font:inherit;font-weight:800;border:0;
border-radius:10px;padding:9px 14px;margin-right:12px;background:var(--pink);color:#fff}
input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,45,155,.2)}
/* One big, unmissable action per screen. */
button,.btn{display:block;width:100%;min-height:58px;font-size:19px;font-weight:800;
letter-spacing:.5px;border:0;border-radius:16px;background:var(--pink);color:#fff;
text-align:center;text-decoration:none;padding:16px;cursor:pointer;
text-transform:uppercase;box-shadow:0 0 0 2px rgba(255,45,155,.55),0 10px 30px rgba(255,45,155,.4)}
/* A visible, immediate response to every press. Nothing worse than tapping and
   wondering whether it registered. */
button,.btn{transition:transform .08s ease,box-shadow .15s ease,opacity .15s ease}
button:active,.btn:active{transform:scale(.97)}
/* Each page settles in: its cards rise into place one after another. Quick
   enough never to feel like waiting. */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
main>.card,main>.orow,main>.gshop-row,main>.lrow,main>.empty,main>.nbar,main>.gstreakbar,
main>.gquick,main>.glist{animation:rise .32s cubic-bezier(.2,.8,.2,1) both}
main>:nth-child(2){animation-delay:.03s}main>:nth-child(3){animation-delay:.06s}
main>:nth-child(4){animation-delay:.09s}main>:nth-child(5){animation-delay:.12s}
main>:nth-child(6){animation-delay:.15s}main>:nth-child(n+7){animation-delay:.18s}
.orow{transition:transform .08s ease,border-color .15s ease}
a.orow:active{transform:scale(.99)}
input{transition:border-color .15s ease,box-shadow .15s ease}
/* Phones set to "reduce motion": the looping, decorative animations are
   switched off one by one where they're defined (pulses, glows, shimmer),
   and long ones are shortened here — but taps, fades and the wheel still
   move, so the app never feels frozen or broken. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-iteration-count:1 !important}
  .gwheel-lights i,.gwheel-pin{animation:none !important}}
.btn.secondary{background:transparent;color:var(--ink);box-shadow:none;
border:2px solid var(--line);text-transform:none;font-weight:700}
.msg{padding:14px 16px;border-radius:14px;margin:0 0 16px;font-weight:700}
.msg.bad{background:rgba(255,107,107,.16);color:var(--bad);
border:1px solid rgba(255,107,107,.4)}
.msg.good{background:rgba(94,233,164,.14);color:var(--good);
border:1px solid rgba(94,233,164,.35)}
.tag{text-align:center;color:var(--muted);font-size:14px;margin:14px 0 0}
.step{display:flex;gap:14px;margin:0 0 16px;align-items:flex-start}
nav.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;z-index:50;
background:#140a26;
border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);
/* Promoted to its own layer. Without this iOS repaints a fixed bar on the main
   thread during momentum scrolling, so it lags behind and appears to slide
   with the page before snapping back. */
transform:translateZ(0);-webkit-transform:translateZ(0);
-webkit-backface-visibility:hidden;backface-visibility:hidden}
nav.tabs a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
padding:10px 1px 8px;color:var(--muted);text-decoration:none;font-size:11px;
white-space:nowrap;
font-weight:700;letter-spacing:.2px;min-height:56px;justify-content:center}
nav.tabs a span{font-size:21px;line-height:1}
nav.tabs a.on{color:var(--pink)}
.back{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;
width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:22px;text-decoration:none;color:var(--ink);
background:var(--card);border:1px solid var(--line);z-index:40}
.back:active{transform:scale(.94)}
.back,.bell{transform:translateZ(0);-webkit-backface-visibility:hidden}
body.has-back main{padding-top:74px}
/* Whatever scrolls up under the round buttons is softly blurred, so the
   buttons never sit on top of readable text. Invisible until something's
   under it. */
body.has-back::before{content:"";position:fixed;top:0;left:0;right:0;z-index:39;
height:calc(env(safe-area-inset-top,0px) + 68px);pointer-events:none;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.bell{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:21px;text-decoration:none;
background:var(--card);border:1px solid var(--line);z-index:40}
.ic-now{display:flex;gap:20px;justify-content:center;align-items:flex-end;margin-top:14px;flex-wrap:wrap}
.ic-now figure{margin:0;text-align:center}
.ic-now img{width:76px;height:76px;display:block;background:#000;object-fit:cover}
.ic-now img.ic-ios{border-radius:18px}
.ic-now img.ic-and{border-radius:50%}
.ic-now img.ic-tab{width:40px;height:40px;border-radius:9px;margin:0 auto 18px}
.ic-now figcaption{font-size:12px;color:var(--muted);margin-top:6px;font-weight:700}
.ic-stage{position:relative;width:100%;max-width:320px;margin:0 auto;aspect-ratio:1/1;
border-radius:22%;overflow:hidden;touch-action:none;background:#000;border:1px solid var(--line)}
.ic-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.ic-safe{position:absolute;inset:0;border:2px dashed rgba(255,255,255,.75);border-radius:50%;
pointer-events:none}
.ic-bgrow{display:flex;gap:12px;align-items:center}
.pace-row{display:flex;flex-wrap:wrap;gap:8px}
.pace-row button{flex:1;min-width:60px;margin:0}
.pace-row button.on{background:var(--pink);color:#fff;border-color:var(--pink)}
[data-os][hidden],[data-mode][hidden]{display:none}
.big-install{min-height:62px;font-size:19px}
.share-hint{position:fixed;left:50%;bottom:calc(6px + env(safe-area-inset-bottom));z-index:70;
font-size:34px;transform:translateX(-50%);animation:sharebob 1s ease-in-out infinite;
pointer-events:none}
@keyframes sharebob{50%{transform:translate(-50%,8px)}}
/* In Safari the arrow points at Safari's own Share button, under the page —
   so the app's tab bar is moved out of its way. */
body:has([data-mode="install"]:not([hidden]) .share-hint:not([hidden])) nav.tabs{display:none}
body:has([data-mode="install"]:not([hidden]) .share-hint:not([hidden])) main{padding-bottom:90px}
.newicon{width:96px;height:96px;border-radius:22px;display:block;margin:14px auto;
box-shadow:0 8px 30px rgba(255,46,147,.35)}
ol.howto{list-style:none;padding:0;margin:0 0 12px;display:block}
ol.howto li{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;line-height:1.45}
ol.howto li>span:last-child{flex:1;min-width:0}
.stepn{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pink);color:#fff;
display:grid;place-items:center;font-weight:800;font-size:14px}
.icon-block{position:fixed;inset:0;z-index:200;background:rgba(10,4,22,.96);
display:flex;align-items:center;justify-content:center;padding:24px;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.icon-block-in{max-width:380px;text-align:center}
.icon-block-in img{width:112px;height:112px;border-radius:26px;display:block;margin:0 auto 18px;
box-shadow:0 10px 40px rgba(255,46,147,.4)}
.icon-block-in h2{font-size:26px;margin:0 0 10px}
.icon-block-in p{color:var(--muted);margin:0 0 20px;line-height:1.5}
.icon-block-in .btn{margin-top:8px}
.field-hint{font-size:13px;margin:-6px 0 14px;line-height:1.4}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.statrow div{background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;
display:flex;flex-direction:column}
.statrow b{font-size:20px}
.statrow span{font-size:13px;color:var(--muted)}
div.linkbox{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 12px;margin:0 0 10px;
overflow-wrap:anywhere;font-size:14px}
.msg.shopnote{background:rgba(120,170,255,.12);border-color:rgba(120,170,255,.45);color:var(--ink);
display:flex;gap:10px;align-items:flex-start}
.shop-hero{display:flex;justify-content:center;padding:28px 0 6px}
.shop-hero img{width:120px;height:120px;border-radius:28px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero.shop-hero+.card,.hero.shop-hero+form,.hero.shop-hero+h1,.adm .hero.shop-hero+.card.hello{margin-top:14px}
.hero.shop-hero img{max-height:none;object-fit:cover}
input.colour-pick{height:56px;padding:6px;cursor:pointer;-webkit-appearance:none;appearance:none}
input.colour-pick::-webkit-color-swatch-wrapper{padding:0}
input.colour-pick::-webkit-color-swatch{border:0;border-radius:10px}
input.colour-pick::-moz-color-swatch{border:0;border-radius:10px}
.shoptag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;
padding:2px 8px;border-radius:999px;background:rgba(120,170,255,.18);color:#bcd3ff;
vertical-align:middle;white-space:nowrap}
.app-gate{overflow-y:auto;align-items:flex-start;padding-top:max(36px,env(safe-area-inset-top))}
.app-gate .icon-block-in{margin:auto}
.app-gate .howto{text-align:left;margin:0 0 14px}
.app-gate .gate-or{font-size:14px;margin:10px 0 0}
.app-gate .share-hint{z-index:210}
.app-gate h2{font-size:23px}
.app-gate .icon-block-in{padding-bottom:56px}
.icon-nudge{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));
z-index:60;max-width:440px;margin:0 auto;background:#2a1450;border:1px solid var(--pink);
border-radius:18px;padding:14px;display:flex;gap:12px;align-items:center;
box-shadow:0 10px 40px rgba(0,0,0,.5)}
.icon-nudge img{width:48px;height:48px;border-radius:12px;flex:none}
.icon-nudge .tx{flex:1;min-width:0;font-size:14px;line-height:1.35}
.icon-nudge .tx b{display:block;font-size:15px}
.icon-nudge a.go{flex:none;background:var(--pink);color:#fff;border-radius:12px;padding:10px 12px;
font-weight:800;font-size:14px;text-decoration:none}
.icon-nudge button{flex:none;width:30px;height:30px;min-height:30px;padding:0;border-radius:50%;
background:rgba(255,255,255,.1);color:var(--ink);margin:0;font-size:14px}
.pick.ic-fit .opt span{display:block;text-align:left}
.ic-fit small{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:3px}
.ic-bgrow input[type=color]{width:58px;height:46px;padding:3px;border-radius:12px;flex:none;margin:0}
[data-icon-editor][hidden]{display:none}
.tabs a span{position:relative}
.tbadge{position:absolute;top:-6px;right:-12px;min-width:18px;height:18px;border-radius:99px;
background:var(--pink);color:#fff;font-size:10.5px;font-weight:800;display:flex;
align-items:center;justify-content:center;padding:0 5px;line-height:1}
.bell.chatbtn{right:72px}
.bell.chatbtn.has-new{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,46,147,.25)}
.bell b{position:absolute;top:-4px;right:-4px;min-width:21px;height:21px;
border-radius:99px;background:var(--pink);color:#fff;font-size:11px;
display:flex;align-items:center;justify-content:center;padding:0 5px}
body.has-tabs main{padding-bottom:96px}
/* Five stars in one row, the way every app asks for a rating. The DOM runs
   5..1 and the row is reversed, so "this star and every one before it" is
   just the checked star and its later siblings. */
.stars{display:flex;flex-direction:row-reverse;justify-content:center;gap:6px;
margin:6px 0 14px}
.star{display:block;margin:0;position:relative;cursor:pointer;text-decoration:none;
text-transform:none;letter-spacing:0}
.star input{position:absolute;opacity:0;width:0;height:0}
.star span{display:flex;align-items:center;justify-content:center;width:54px;height:54px;
border-radius:14px;font-size:30px;line-height:1;background:rgba(0,0,0,.25);
border:1px solid var(--line);color:rgba(255,255,255,.3);
transition:transform .08s ease,color .12s ease,background .12s ease}
.star span .i{width:28px;height:28px;margin:0}
.stars .star:has(input:checked) span,.stars .star:has(input:checked)~.star span{
color:var(--gold);border-color:rgba(255,200,63,.55);background:rgba(255,200,63,.12)}
.stars .star:has(input:checked) span .i,.stars .star:has(input:checked)~.star span .i{
fill:var(--gold)}
a.star span{filter:none;opacity:1}
.star input:focus-visible+span{outline:2px solid var(--pink);outline-offset:2px}
.star:active span{transform:scale(.92)}
.stars-hint{text-align:center;font-size:13px;color:var(--muted);margin:-6px 0 12px}
/* A progress bar, instead of a row of text characters. */
.meter{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.meter .bar{flex:1;height:10px;border-radius:99px;background:rgba(255,255,255,.1);
overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:99px;
background:linear-gradient(90deg,var(--pink),var(--gold))}
.meter span{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;
white-space:nowrap}
/* The ready-made lines. They wrap rather than scroll sideways: a phrase you
   have to swipe to find is a phrase nobody taps. */
.quicks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.quicks button{text-transform:none;letter-spacing:0}
.quicks button{flex:0 1 auto;width:auto;min-height:0;margin:0;padding:10px 14px;
border-radius:99px;background:var(--card);border:1px solid var(--line);
color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;box-shadow:none}
.quicks button:active{transform:scale(.97);border-color:var(--pink)}
/* Reviews page: the score and how it breaks down. */
.rscore{display:flex;gap:18px;align-items:center}
.rscore-big{flex:none;text-align:center}
.rscore-big b{display:block;font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1}
.rscore-big .rv-stars{justify-content:center;margin:6px 0 4px}
.rscore-big span.muted{font-size:13px}
.rbars{flex:1;min-width:0}
.rbar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
font-variant-numeric:tabular-nums;margin:3px 0}
.rbar>span:first-child{width:10px;text-align:right}
.rbar .bar{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rbar .bar i{display:block;height:100%;border-radius:99px;background:var(--gold)}
.rbar>span:last-child{width:22px;text-align:right}
.rq-card{padding:14px 16px}
.rq-card+.rq-card{border-top:1px solid rgba(255,255,255,.07)}
.rq-card p{margin:6px 0 0;font-size:15px;line-height:1.45}
p.step{font-size:13px;font-weight:800;color:var(--muted);letter-spacing:.3px;
margin:14px 0 8px}
.notify.review{background:rgba(94,233,164,.12);border-color:rgba(94,233,164,.4)}
.notify.review b{color:var(--good)}
.notify{background:rgba(255,200,63,.12);border:1px solid rgba(255,200,63,.4);
border-radius:16px;padding:18px;margin:0 0 16px}
.notify.boost{background:linear-gradient(135deg,rgba(255,45,155,.22),
rgba(255,200,63,.16));border-color:var(--gold);border-width:2px}
.notify.boost b{color:var(--gold);font-size:18px;letter-spacing:.4px}
.clock{font-size:30px;font-weight:900;letter-spacing:1px;text-align:center;
margin:12px 0;color:#fff;font-variant-numeric:tabular-nums}
.notify.deal{background:rgba(94,233,164,.12);border-color:rgba(94,233,164,.45)}
.notify.deal b{color:var(--good)}
.notify.rep{background:rgba(255,45,155,.12);border-color:rgba(255,45,155,.45)}
.notify.rep>b:first-child{color:var(--pink)}
.notify.rep p b{color:var(--pink)}
/* Only the box's first bold is its heading. Every bold used to be, so a
   bold word mid-sentence broke onto a line of its own. */
.notify>b:first-child{display:block;font-size:17px;margin:0 0 8px;color:var(--gold)}
.notify p{margin:0 0 8px}
.notify ul{margin:0 0 10px 20px;padding:0}
.notify li{margin:0 0 4px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;
-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:10px 15px;border-radius:99px;background:var(--card);
border:1px solid var(--line);color:var(--muted);text-decoration:none;
font-size:14px;font-weight:700;white-space:nowrap}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff}
.chg{font-size:13px;font-weight:800;padding:3px 9px;border-radius:99px;
vertical-align:middle;margin-left:8px;letter-spacing:.3px}
.chg.up{background:rgba(94,233,164,.16);color:var(--good)}
.chg.down{background:rgba(255,107,107,.16);color:var(--bad)}
.chg.level,.chg.new{background:rgba(255,255,255,.08);color:var(--muted)}
.steps{display:flex;gap:4px;margin:0 0 16px}
.steps div{flex:1 1 0;min-width:0;text-align:center;font-size:clamp(7.5px,2.5vw,10px);
font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0;
white-space:nowrap;overflow-wrap:normal;word-break:normal}
.steps div b{display:block;height:6px;border-radius:99px;background:var(--line);
margin:0 0 6px}
.steps div.done b{background:var(--pink)}
.steps div.now b{background:var(--gold)}
.steps div.now{color:var(--gold)}
.next{background:rgba(255,200,63,.12);border:1px solid rgba(255,200,63,.35);
border-radius:14px;padding:14px 16px;margin:0 0 16px;font-weight:700}
.next>b:first-child{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.4px;
color:var(--gold);margin:0 0 4px}
.line{display:flex;gap:8px;margin:0 0 10px}
.line input[type=text],.line input:not([type]){flex:1;margin:0}
.line input[type=number]{width:86px;margin:0;text-align:center}
.pick{display:flex;gap:10px;margin:0 0 18px}
.pick.tall{flex-direction:column;gap:8px}
.pick.tall .opt span{text-align:left;padding:14px 16px}
.opt{flex:1;margin:0;text-transform:none;font-weight:700;color:var(--ink)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:block;padding:16px 10px;text-align:center;border-radius:14px;
border:2px solid var(--line);background:rgba(0,0,0,.25)}
.opt input:checked+span{border-color:var(--pink);background:rgba(255,45,155,.16)}
.orow{display:block;padding:14px 16px;margin:0 0 10px;border-radius:14px;
background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--ink);
text-decoration:none}
.orow b{display:block;font-size:17px}
.orow span{display:block;font-size:15px}
.orow.pend{border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,45,155,.35)}
/* The number in its pink circle. Only the FIRST bold — every bold used to
   become a circle, so "Delivery" mid-sentence was stretched into a pink blob. */
.step>b:first-child{flex:0 0 34px;height:34px;border-radius:50%;background:var(--pink);
color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
div.step>div{padding-top:6px;line-height:1.45}
div.step>div b{color:var(--ink)}

/* ---- A thing on the menu ----------------------------------------------
   Three columns: tick, what it is, what it costs. The prices sit in their own
   column with tabular figures so they line up down the page — with stock
   running from £18 to £300 in one list, a ragged right edge is what makes it
   hard to compare at a glance. */
.mrow{text-transform:none;letter-spacing:0;color:var(--ink);font-size:16px;
display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;
align-items:center;padding:13px 14px;margin:0 0 8px;border-radius:14px;
background:rgba(0,0,0,.25);border:1px solid var(--line);cursor:pointer}
.mrow .nm{font-weight:800;font-size:16px;line-height:1.3}
.mrow .pr{font-variant-numeric:tabular-nums;font-weight:800;font-size:16px;
white-space:nowrap;text-align:right}
/* Priced on the day. Gold so it reads as an invitation to ask, not as a
   missing number. */
.mrow .ask{color:var(--gold);font-weight:800;font-size:14px;white-space:nowrap}
.mrow input[type=checkbox]{width:24px;height:24px;margin:0;flex:0 0 auto;
accent-color:var(--pink)}
.mrow .qty{width:56px;padding:7px 4px;margin:0;font-size:15px;
text-align:center}
/* Ticked rows stand out, so a long list still shows what is in the basket.
   Only a highlight — nothing depends on it. */
.mrow:has(input:checked){border-color:var(--pink);
background:rgba(255,45,155,.10)}

/* ---- A break between sections -----------------------------------------
   A rule with the name sitting on it, and the count on the other end. A
   label floating above a group says less and takes more room. */
.msec{display:flex;align-items:center;gap:12px;margin:24px 0 10px}
.msec b{font-size:15px;font-weight:800;white-space:nowrap}
.msec i{flex:1;height:1px;background:var(--line);display:block}
.msec em{color:var(--muted);font-size:13px;font-style:normal;
white-space:nowrap}
.gone{opacity:.5}
/* The order button follows you down the list, so a long menu does not mean
   scrolling back to the bottom to send it. Clears the tab bar. */
.stick{position:sticky;bottom:calc(88px + env(safe-area-inset-bottom));
z-index:20;margin:16px 0 0}
.stick button[disabled]{visibility:hidden}

/* ---- An order, for triage ---------------------------------------------
   Who and what on the left, the money on the right where the eye lands, how
   long it has waited underneath. The money is what decides which one to do
   first, so it carries the weight — and an order with no price shows the
   action instead of an empty space. */
a.ord,.ord{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 12px;
align-items:center;
padding:12px 14px;margin:0 0 8px;border-radius:18px;
background:var(--card);border:1px solid var(--line);
color:var(--ink);text-decoration:none}
.ord .av{grid-column:1;grid-row:1/span 3;width:40px;height:40px;font-size:14px;
align-self:center}
.ord .who,.ord .what,.ord .meta{grid-column:2;min-width:0}
.ord .who{font-weight:800;font-size:17px;line-height:1.25;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.ord .what{color:var(--muted);font-size:15px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.ord .meta{color:var(--muted);font-size:13px}
.ord .money{grid-column:3;grid-row:1/span 3;align-self:center;text-align:right;
font-variant-numeric:tabular-nums;font-weight:800;font-size:19px;
white-space:nowrap}
.ord .money small{display:block;font-size:11.5px;font-weight:700;color:var(--good);margin-top:2px}
.ord .need{grid-column:3;grid-row:1/span 3;align-self:center;text-align:right;
color:var(--pink);font-weight:800;font-size:14px;line-height:1.2;
white-space:nowrap}
.ord .late{color:var(--bad);font-weight:800}
.ord.pend{border-color:var(--pink);box-shadow:0 0 0 1px rgba(255,45,155,.35)}
a.ord:active{transform:scale(.99)}

/* ---- Messages: a proper chat, both sides ----------------------------------
   Bubbles left and right, day markers, the name once per run of messages,
   and a send box that stays at the bottom of the screen. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
white-space:nowrap}
.chathead{display:flex;align-items:center;gap:12px;margin:0 0 4px}
/* The chat's own header: stays at the top while the messages scroll under
   it, with the back arrow inside it rather than floating over the bubbles. */
.chatbar{position:sticky;top:0;z-index:6;margin:0 -16px 8px;
padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
background:rgba(20,10,38,.94);border-bottom:1px solid var(--line);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chatbar .chathead{margin:0;gap:10px}
.chatbar h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatbar .sub{line-height:1.5}
.chatback{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:20px;color:var(--ink);text-decoration:none;flex:none;
background:rgba(255,255,255,.07)}
.chatbar .av{width:40px;height:40px;font-size:15px}
.chatbar form{margin:0;flex:none}
.chatbar .done{width:auto;min-height:0;padding:9px 12px;font-size:13px;border-radius:99px;
text-transform:none;letter-spacing:0;background:rgba(94,233,164,.15);color:var(--good);
border:1px solid rgba(94,233,164,.35);box-shadow:none}
.chathead h1{font-size:22px;margin:0;line-height:1.15}
.chathead .sub{font-size:13px;color:var(--muted);margin-top:2px}
.chathead .sub a{color:var(--ink);font-weight:700;text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.25)}
.av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-weight:900;font-size:16px;color:#fff;flex:none;
letter-spacing:.3px}
.av.team{background:linear-gradient(135deg,#ff2d9b,#7b2ff7);font-size:20px}
.av.ic{background:rgba(255,255,255,.08);font-size:21px}
.pill{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;
border-radius:99px;letter-spacing:.2px;vertical-align:middle}
.pill.need{background:rgba(255,45,155,.18);color:var(--pink)}
.pill.ok{background:rgba(94,233,164,.15);color:var(--good)}
.pill.wait{background:rgba(255,255,255,.08);color:var(--muted)}
.pill.ord{background:rgba(255,200,63,.14);color:var(--gold);text-decoration:none}
.chat{display:flex;flex-direction:column;padding:2px 0 6px}
.chat .day{align-self:center;font-size:12px;font-weight:800;color:var(--muted);
background:rgba(255,255,255,.07);padding:4px 11px;border-radius:99px;margin:14px 0 8px}
.chat .who{font-size:12px;font-weight:800;color:var(--muted);margin:8px 12px 3px}
.chat .who.me{align-self:flex-end}
.bub{max-width:82%;padding:9px 13px;border-radius:19px;font-size:16px;
line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;margin:2px 0}
.bub.me{align-self:flex-end;background:var(--pink);color:#fff}
.bub.them{align-self:flex-start;background:#2f1a52;border:1px solid var(--line)}
.bub.me.last{border-bottom-right-radius:6px}
.bub.them.last{border-bottom-left-radius:6px}
.chat .tm{font-size:11px;color:var(--muted);margin:3px 12px 6px}
.chat .tm.me{align-self:flex-end}
.chatnote{text-align:center;font-size:13.5px;color:var(--muted);margin:14px 0}
.composer{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));z-index:5;
display:block;padding:8px;margin:12px 0 0;
background:rgba(20,10,38,.94);border:1px solid var(--line);border-radius:26px;
box-shadow:0 -6px 24px rgba(0,0,0,.35);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.composer textarea{flex:1;margin:0;min-height:46px;max-height:150px;resize:none;
border-radius:20px;padding:12px 15px;line-height:1.35;border:0;
background:rgba(255,255,255,.07)}
.composer button{width:46px;height:46px;min-height:46px;border-radius:50%;padding:0;
flex:none;font-size:20px;text-transform:none;letter-spacing:0;margin:0}
.composer.dock{position:fixed;left:0;right:0;bottom:0;max-width:460px;margin:0 auto;
border-radius:0;border:0;border-top:1px solid var(--line);
padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:none}
.chat.docked{padding-bottom:96px}
.comp-row{display:flex;gap:8px;align-items:flex-end}
label.attach{position:relative;width:46px;height:46px;flex:none;margin:0;padding:0;
border-radius:50%;display:grid;place-items:center;color:var(--ink);cursor:pointer;
background:rgba(255,255,255,.07);text-transform:none;letter-spacing:0;font-size:20px}
label.attach:active{transform:scale(.94)}
.attach input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;padding:0}
.attach .i{width:22px;height:22px;margin:0}
label.attach.wide{width:auto;flex:1;height:auto;min-height:50px;border-radius:14px;display:flex;gap:7px;
justify-content:center;align-items:center;font-size:15px;font-weight:700;color:var(--ink);
border:1px solid var(--line);white-space:nowrap;letter-spacing:0;padding:0 12px}
.new-acts{display:flex;gap:10px;margin-top:10px;align-items:stretch}
.new-acts button{flex:1.3;margin:0;white-space:nowrap;padding-left:10px;padding-right:10px;letter-spacing:0;font-size:15px}
.att-prev{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;position:relative}
.att-prev[hidden]{display:none}
.att-thumb{width:56px;height:56px;border-radius:12px;overflow:hidden;flex:none;background:#000;
display:grid;place-items:center;color:#fff}
.att-thumb img,.att-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.att-tx{flex:1;min-width:0;font-size:14px;color:var(--muted);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.att-prev .att-x{width:34px;height:34px;min-height:34px;font-size:15px;
background:rgba(255,255,255,.1);color:var(--ink)}
.att-bar{position:absolute;left:4px;right:4px;bottom:2px;height:4px;border-radius:4px;
background:rgba(255,255,255,.12);overflow:hidden}
.att-bar[hidden]{display:none}
.att-bar i{display:block;height:100%;width:0;background:var(--pink);transition:width .2s}
.att-err{margin:6px 8px 2px;font-size:13.5px;color:#ff8fa3;font-weight:600}
.att-err[hidden]{display:none}
.bub.has-media{padding:4px;width:78%;max-width:300px}
.bub-media{display:block;border-radius:15px;overflow:hidden;background:#000}
.bub-media img{display:block;width:100%;max-height:360px;object-fit:cover}
.bub-media video{display:block;width:100%;max-height:400px;background:#000}
.bub-tx{padding:6px 9px 5px}
.media-gone{display:flex;align-items:center;gap:8px;padding:9px 10px;font-size:14px;opacity:.85}
.media-gone .i{width:18px;height:18px;margin:0}
.chatback .i{width:20px;height:20px}
.av.team .i{width:20px;height:20px}
.chatnote .i{width:15px;height:15px;margin-right:6px;vertical-align:-3px;color:var(--good)}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
a.topic{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:99px;
border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);
text-decoration:none;font-size:14px;font-weight:600}
a.topic .i{width:15px;height:15px;color:var(--pink)}
a.topic.on{background:rgba(255,45,155,.16);border-color:rgba(255,45,155,.5)}
.quickrow{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin:10px 0 0;
scrollbar-width:none}
.quickrow::-webkit-scrollbar{display:none}
.quickrow form{margin:0;flex:none}
.quickrow button{width:auto;min-height:0;padding:9px 14px;font-size:14px;
font-weight:700;border-radius:99px;text-transform:none;letter-spacing:0;
background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);
box-shadow:none;white-space:nowrap}
/* A conversation in a list. */
a.crow{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
padding:12px 14px;border-radius:18px;background:var(--card);
border:1px solid var(--line);margin:0 0 8px;text-decoration:none;color:var(--ink)}
a.crow:active{transform:scale(.99)}
a.crow.new{border-color:rgba(255,45,155,.55);box-shadow:0 0 0 1px rgba(255,45,155,.25)}
.crow .mid{min-width:0}
.crow .nm{display:block;font-weight:800;font-size:16px;
overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crow .nm .pill{margin-left:4px}
.crow .pv{color:var(--muted);font-size:14px;margin-top:2px;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.crow.new .pv{color:var(--ink)}
.crow .side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;
align-self:start;padding-top:2px}
.crow .tm2{font-size:12px;color:var(--muted);white-space:nowrap}
.crow.new .tm2{color:var(--pink);font-weight:800}
.dot{width:10px;height:10px;border-radius:50%;background:var(--pink);display:inline-block}
.gtabs.inbox a{font-size:14px;white-space:nowrap;padding:10px 4px}
.gtabs.inbox a b{display:inline-block;min-width:20px;padding:1px 6px;margin-left:4px;
border-radius:99px;background:var(--pink);color:#fff;font-size:12px}
details.newchat>summary{list-style:none;cursor:pointer}
details.newchat>summary::-webkit-details-marker{display:none}

/* ---- Deals ---------------------------------------------------------------- */
article.deal{border-radius:22px;overflow:hidden;margin:0 0 16px;background:var(--card);
border:1px solid var(--line);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.deal-pic{display:block;width:100%;max-height:320px;object-fit:cover}
.deal-in{padding:18px 18px 20px}
.deal-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.deal-tags .pill{background:rgba(255,255,255,.08);color:var(--muted)}
.pill.hot{background:rgba(255,45,155,.18)!important;color:var(--pink)!important}
article.deal h2{font-size:23px;line-height:1.2;margin:0 0 8px}
article.deal p{margin:0 0 16px;color:#e4d9f7;line-height:1.5}
.deal-acts{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:stretch}
.deal-acts .btn{margin:0;white-space:nowrap;font-size:17px;padding:15px 12px;
min-height:54px}
.deal-acts .share{padding:15px 16px;text-transform:none;letter-spacing:0}
.deal-acts>*{min-width:0}
@media (max-width:360px){.deal-in{padding:16px 14px 18px}
.deal-acts .btn{font-size:15px;padding:14px 10px}.deal-acts .share{padding:14px 12px}}
.deal-tags .pill{display:inline-flex;align-items:center;gap:5px}
.deal-tags .pill .i{width:13px;height:13px}
.pill.ends.soon{background:rgba(255,200,60,.16)!important;color:var(--gold)!important}
.deal-acts .btn .i{width:18px;height:18px;margin-right:8px;vertical-align:-3px}
.deal-acts button.btn{width:100%}
.deal-acts .btn>span{overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){.deal-acts .share .share-tx{display:none}
.deal-acts .share .i{margin:0}.deal-acts .share{padding:14px 16px}}
.deal-acts button.btn[disabled]{opacity:.45;box-shadow:none}
.deal-form{margin:0}
.deal-note{margin:0 0 10px!important;font-size:13px;color:var(--muted)!important}
.offers{margin:0 0 16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
background:rgba(0,0,0,.14)}
.offers .offer{display:flex;align-items:center;gap:12px;padding:13px 14px;margin:0;
font-size:15px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink);
position:relative}
.offers .offer+.offer{border-top:1px solid rgba(255,255,255,.07)}
.offers label.offer{cursor:pointer;-webkit-tap-highlight-color:transparent}
.offers label.offer input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.offer-box{flex:none;width:24px;height:24px;border-radius:8px;display:grid;
place-items:center;border:2px solid rgba(255,255,255,.28);color:transparent;
transition:background .15s,border-color .15s}
.offer-box .i{width:15px;height:15px;stroke-width:3}
.offers label.offer:has(input:checked){background:rgba(255,45,155,.10)}
.offers input:checked+.offer-box{background:var(--pink);border-color:var(--pink);color:#fff}
.offers input:focus-visible+.offer-box{outline:2px solid var(--pink);outline-offset:2px}
.offers input:disabled~*{opacity:.4}
.offer-tx{flex:1;min-width:0;line-height:1.35}
.offer-pr{flex:none;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
a.nbar{text-decoration:none;color:inherit}

/* ---- Ordering: the basket ------------------------------------------------- */
.order-form{margin:0}
.bk-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bk-head .brand{margin:0}
.bk-count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.bk-list{margin:8px 0 0}
.bk-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;
align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.bk-row.pop{animation:bkpop .35s ease}
/* Small phones: the name gets the full width, the +/- go underneath. */
@media (max-width:360px){.bk-row{grid-template-columns:auto 1fr;row-gap:8px}
.bk-row .bk-tx{grid-column:1/-1}.bk-row .bk-x{justify-self:end}}
@keyframes bkpop{0%{background:rgba(255,45,155,.18)}100%{background:transparent}}
.bk-tx{min-width:0}
.bk-tx b{display:block;font-size:16px;font-weight:700;line-height:1.3;
overflow-wrap:anywhere}
.bk-tx span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:12px;
overflow:hidden;background:rgba(0,0,0,.2)}
.stepper button{width:34px;min-height:36px;height:36px;padding:0;margin:0;border-radius:0;
background:none;box-shadow:none;color:var(--ink);display:grid;place-items:center}
.stepper button .i{width:16px;height:16px;margin:0}
.stepper input{width:38px;height:36px;padding:0;margin:0;border:0;border-radius:0;
background:none;text-align:center;font-size:16px;font-weight:700;
font-variant-numeric:tabular-nums;-moz-appearance:textfield;box-shadow:none}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
button.bk-x{width:32px;height:32px;min-height:0;padding:0;margin:0;border-radius:10px;
background:none;box-shadow:none;color:var(--muted);display:grid;place-items:center}
button.bk-x .i{width:18px;height:18px;margin:0}
.bk-empty{display:flex;align-items:center;gap:10px;margin:10px 0 4px;color:var(--muted);
font-size:15px}
.bk-empty[hidden]{display:none}
.bk-empty .i{width:20px;height:20px;flex:none}
.bk-free{display:flex;gap:8px;align-items:center;margin:14px 0 0}
.bk-free input{flex:1;min-width:0;margin:0}
.bk-free button.sm{flex:none;min-height:48px;padding:0 14px}
.bk-total{display:flex;align-items:baseline;justify-content:space-between;
margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.bk-total[hidden]{display:none}
.bk-total span{color:var(--muted);font-size:14px}
.bk-total b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
details.addmenu{margin:14px 0 0;border:1px solid var(--line);border-radius:16px;
overflow:hidden;background:rgba(0,0,0,.14)}
details.addmenu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
gap:12px;padding:12px 14px}
details.addmenu>summary::-webkit-details-marker{display:none}
details.addmenu[open]>summary{border-bottom:1px solid var(--line)}
details.addmenu[open]>summary .fold-go{transform:rotate(180deg)}
.am-tx{flex:1;min-width:0}
.am-tx b{display:block;font-size:15px}
.am-tx span{display:block;font-size:13px;color:var(--muted)}
.msearch{position:relative;margin:12px 14px 4px}
.msearch .i{position:absolute;left:12px;top:50%;transform:translateY(-50%);
width:18px;height:18px;color:var(--muted)}
.msearch input{margin:0;padding-left:40px}
.full-menu{display:flex;align-items:center;justify-content:center;gap:6px;
margin:14px 0 0;font-size:14px;color:var(--muted)!important;text-decoration:none}
.full-menu .i{width:14px;height:14px}

/* ---- A thing on the menu (in the basket panel and on the menu page) ------ */
.mi-group{margin:0}
.mi-group[hidden]{display:none}
.mi-sec{display:flex;justify-content:space-between;margin:14px 14px 4px;font-size:12px;
font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mi-sec span{letter-spacing:0;text-transform:none;font-weight:500}
button.mi,.mi{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
margin:0;padding:12px 14px;border:0;border-radius:0;background:none;box-shadow:none;
text-align:left;text-transform:none;letter-spacing:0;color:var(--ink);font-size:15px;
font-weight:500;border-top:1px solid rgba(255,255,255,.06)}
button.mi[hidden]{display:none}
button.mi:active{transform:none;background:rgba(255,255,255,.04)}
button.mi[disabled]{opacity:.4}
.mi-nm{flex:1;min-width:0;line-height:1.35}
/* "Only 2 left" / "Selling fast" — a little nudge under the name. */
/* Sales boosters. */
.boost-hero{background:linear-gradient(140deg,rgba(255,45,155,.2),rgba(123,60,255,.16));
border-color:rgba(255,45,155,.4)}
.bh-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bh-stats span{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:14px;
background:rgba(0,0,0,.22);border:1px solid var(--line);min-width:0}
.bh-stats b{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.bh-stats small{font-size:11px;color:var(--muted);font-weight:700;line-height:1.3}
.bmoves{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.grp-row{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;
padding:12px 0;border-bottom:1px solid var(--line)}
.grp-row:first-child{padding-top:2px}
.grp-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.grp-tx b{font-size:15px}
.grp-tx span{font-size:13px;color:var(--muted)}
.grp-act{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.grp-act:empty{display:none}
.grp-act .btn.sm{width:auto;min-height:0;padding:9px 14px;font-size:14px;margin:0}
.bk-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);
color:inherit;text-decoration:none}
.bk-row:last-child{border-bottom:0}
.bk-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.bk-tx b{font-size:15px}
.bk-tx span{font-size:13px;overflow-wrap:anywhere}
.bk-money{font-weight:800;white-space:nowrap}
.bmove{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px;
border-radius:16px;border:1px solid var(--line);background:var(--card)}
.bmove .bm-ic{font-size:26px;grid-row:span 2}
.bm-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.bm-tx b{font-size:15px}
.bm-tx span{font-size:13px;color:var(--muted)}
.bmove .btn.sm{grid-column:2;justify-self:start;width:auto;min-height:0;padding:9px 14px;
font-size:14px;margin:6px 0 0}
.bmove.hot{border-color:rgba(255,45,155,.5)}
.bmove.low{border-color:rgba(255,140,60,.5)}
.bmove.basket{border-color:rgba(94,233,164,.45)}
.sched-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.sched-row:first-child{border-top:0}
.sched-ic .i{width:20px;height:20px;color:var(--gold)}
.sched-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.sched-tx b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-tx span{font-size:12px;color:var(--muted)}
.sched-row button.sm{width:auto;min-height:0;padding:7px 12px;font-size:13px;margin:0}
.boost-auto .np-row .gl-ic{flex:none}
.cap-row .np-tx{flex:1}
.cap-row .pace-row button{flex:1;min-width:48px}
.cres{padding:12px 0;border-top:1px solid var(--line)}
.cres:first-child{border-top:0;padding-top:2px}
.cr-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.cr-top b{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-kind{flex:none;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;
background:rgba(255,255,255,.08);color:var(--muted)}
.cr-when{font-size:12px;color:var(--muted);margin:3px 0 8px}
.cr-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cr-nums span{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.2)}
.cr-nums b{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}
.cr-nums small{font-size:11px;color:var(--muted);font-weight:700}
.cr-nums .money b{color:var(--good,#5ee9a4)}
.when-pick{grid-template-columns:1fr 1fr}
/* Sales reps. */
.sr-hero{background:linear-gradient(140deg,rgba(94,233,164,.16),rgba(123,60,255,.16));
border-color:rgba(94,233,164,.4)}
.sr-how{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.sr-how div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:14px;
background:rgba(0,0,0,.22);border:1px solid var(--line)}
.sr-how b{font-size:22px;font-weight:900;color:var(--good,#5ee9a4)}
.sr-how span{font-size:12px;color:var(--muted);line-height:1.35}
.sr-bal{text-align:center;background:linear-gradient(160deg,rgba(94,233,164,.18),rgba(38,18,66,1) 70%);
border-color:rgba(94,233,164,.45)}
.sr-lbl{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-top:6px}
.sr-big{display:block;font-size:46px;font-weight:900;letter-spacing:-1px;color:var(--good,#5ee9a4);
font-variant-numeric:tabular-nums;margin:2px 0 10px}
.sr-bar i{background:linear-gradient(90deg,#5ee9a4,#5adcff)}
.sr-barlbl{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-weight:700;
margin:6px 0 10px}
.sr-togo{font-size:14px;font-weight:700;margin:0 0 12px}
.sr-togo.ok{color:var(--good,#5ee9a4)}
.again-top{margin:0 0 14px}
a.sr-upsell{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
background:linear-gradient(135deg,rgba(94,233,164,.14),rgba(123,60,255,.12));border-color:rgba(94,233,164,.4)}
.sr-upsell .su-ic{font-size:28px}
.sr-upsell .su-tx{flex:1;display:flex;flex-direction:column;gap:2px}
.sr-upsell .su-tx span{font-size:13px;color:var(--muted)}
.sr-plus{font-size:11px;font-weight:900;padding:2px 7px;border-radius:999px;margin-left:6px;
background:rgba(94,233,164,.16);color:var(--good,#5ee9a4)}
.sr-bal .nbar{text-align:left;margin:0 0 12px}
.sr-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.sr-stats span{display:flex;flex-direction:column;padding:12px 14px;border-radius:16px;
background:var(--card);border:1px solid var(--line)}
.sr-stats b{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums}
.sr-stats small{font-size:12px;color:var(--muted);font-weight:700}
.sr-t-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.sr-t-top span{font-size:13px;color:var(--muted);font-weight:700}
.sr-target .gp-bar i{background:linear-gradient(90deg,#ffd25a,#ff5cb0)}
.sr-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;
border-top:1px solid var(--line)}
.sr-row:first-child{border-top:0}
.sr-ic{font-size:20px}
.sr-tx{display:flex;flex-direction:column;min-width:0}
.sr-tx b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-tx span{font-size:12px;color:var(--muted)}
.sr-amt{font-variant-numeric:tabular-nums;color:var(--good,#5ee9a4)}
.sr-amt.neg{color:var(--muted)}
.bigcode{font-size:34px;font-weight:900;letter-spacing:4px;font-variant-numeric:tabular-nums;
padding:16px;margin:10px 0 0;border-radius:16px;background:rgba(0,0,0,.25);border:1px dashed var(--line);
color:var(--gold);cursor:pointer;font-family:ui-monospace,Menlo,monospace}
.srrep{display:flex;align-items:center;gap:12px;padding:12px 14px;text-decoration:none;color:var(--ink);
border-top:1px solid var(--line)}
.srrep:first-child{border-top:0}
.srr-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.srr-tx b{font-size:15px}
.srr-tx span{font-size:12.5px;color:var(--muted)}
.srr-bal{text-align:right;display:flex;flex-direction:column}
.srr-bal b{color:var(--good,#5ee9a4);font-variant-numeric:tabular-nums}
.srr-bal small{font-size:11px;color:var(--muted)}
.srask{padding:12px 0;border-top:1px solid var(--line)}
.srask:first-child{border-top:0;padding-top:0}
.sa-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.sa-pitch{font-size:14px;font-style:italic;color:#e6dcf7;margin:0 0 10px}
.srask .duo button{width:100%}
.sr-set .line .pre,.sr-set .line .post{font-weight:800;color:var(--muted);padding:0 6px}
/* Notification choices: a row per kind, with a switch. */
.nprefs .np-row{display:flex;align-items:center;gap:12px;padding:12px 0;margin:0;
border-top:1px solid var(--line)}
.nprefs .np-row:first-of-type{border-top:0}
.np-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.np-tx b{font-size:15px}
.np-tx span{font-size:13px;color:var(--muted)}
.np-sw{flex:none;width:52px;min-height:0;height:30px;padding:0;margin:0;border-radius:999px;
position:relative;background:rgba(255,255,255,.14);border:1px solid var(--line);box-shadow:none;
transition:background .2s}
.np-sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
background:#fff;transition:transform .2s cubic-bezier(.3,1.4,.5,1);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.np-sw.on{background:var(--good,#5ee9a4);border-color:transparent}
.np-sw.on i{transform:translateX(22px)}
.np-sw.locked{opacity:.55}
.np-note{display:flex;align-items:center;gap:6px;font-size:12.5px;margin:10px 0 0}
.np-note .i{width:15px;height:15px}
.urg{display:block;width:max-content;margin-top:3px;font-size:11px;font-weight:800;
letter-spacing:.2px;padding:2px 8px;border-radius:999px;line-height:1.4}
.urg.low{color:#ffd0a0;background:rgba(255,140,60,.16);border:1px solid rgba(255,140,60,.45)}
.urg.hot{color:#ffc2dd;background:rgba(255,45,155,.14);border:1px solid rgba(255,45,155,.45);
animation:urgpulse 2.4s ease-in-out infinite}
@keyframes urgpulse{50%{box-shadow:0 0 12px rgba(255,45,155,.45)}}
.nbar.kept{border-color:rgba(94,233,164,.5)}
.mi-pr{flex:none;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.mi-pr.ask{font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.mi-add{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,45,155,.16);color:var(--pink)}
.mi-add .i{width:16px;height:16px;margin:0;stroke-width:2.6}
.mi-add .mi-in{display:none}
button.mi.in .mi-add{background:var(--pink);color:#fff}
button.mi.in .mi-add .i:not(.mi-in){display:none}
button.mi.in .mi-add .mi-in{display:block}
.menu-form .mi-group{background:var(--card);border:1px solid var(--line);
border-radius:18px;overflow:hidden;margin:0 0 14px}
.menu-form .mi-group>.mi:first-of-type,.menu-form .mi-sec+.mi{border-top:0}
.menu-form .mi-sec{margin:14px 14px 6px}
label.mi.chk,.adm label.mi.chk{cursor:pointer;-webkit-tap-highlight-color:transparent;
position:relative;letter-spacing:0;text-transform:none;font-size:15px;font-weight:500;
color:var(--ink);margin:0}
label.mi.chk input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
label.mi.chk:has(input:checked){background:rgba(255,45,155,.10)}
label.mi.chk input:checked+.offer-box{background:var(--pink);border-color:var(--pink);color:#fff}
label.mi.chk input:disabled~*{opacity:.4}
label.mi.chk input:focus-visible+.offer-box{outline:2px solid var(--pink);outline-offset:2px}
label.mi.chk .qty{flex:none;width:50px;margin:0;padding:8px 4px;text-align:center;
font-size:15px;display:none}
label.mi.chk:has(input:checked) .qty{display:block}
.mi.still{min-height:48px}
.mi.gone .mi-pr{color:var(--muted);font-weight:600}
.mi-group+.full-menu{margin-top:4px}

/* ---- Ordering: how and who ------------------------------------------------ */
.pick .opt span{display:flex;align-items:center;justify-content:center;gap:8px}
.pick .opt span .i{width:20px;height:20px;margin:0}
details.who{margin:0 0 16px}
details.who>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
padding:4px 0}
details.who>summary::-webkit-details-marker{display:none}
details.who[open]>summary{margin-bottom:12px}
.who-tx{flex:1;min-width:0}
.who-tx b{display:block;font-size:16px}
.who-tx span{display:block;font-size:14px;color:var(--muted)}
.who-ch{flex:none;font-size:14px;font-weight:700;color:var(--pink)}
details.who[open] .who-ch{color:var(--muted)}
button.send{margin:6px 0 0}
.send-note{margin:12px 8px 22px;font-size:13px;line-height:1.45;color:var(--muted);
text-align:center}
.send-note .i{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
/* ---- Verify --------------------------------------------------------------- */
.codecard .code-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.codecard .code-row b{font-size:30px;letter-spacing:3px;font-variant-numeric:tabular-nums;
color:var(--gold)}
label.upload,.adm label.upload{position:relative;display:flex;flex-direction:column;
align-items:center;gap:4px;padding:22px 16px;margin:0 0 14px;border-radius:16px;
border:2px dashed rgba(255,45,155,.45);background:rgba(255,45,155,.06);cursor:pointer;
text-transform:none;letter-spacing:0;color:var(--ink);text-align:center}
label.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
margin:0}
label.upload .up-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
background:rgba(255,45,155,.16);color:var(--pink);margin-bottom:6px}
label.upload .up-ic .i{width:22px;height:22px;margin:0}
label.upload b{font-size:16px;overflow-wrap:anywhere}
label.upload span:last-child{font-size:13px;color:var(--muted);font-weight:500}
label.upload.picked{border-style:solid;border-color:var(--good);background:rgba(94,233,164,.08)}
.adm .done-ic.ok{background:rgba(94,233,164,.14);color:var(--good)}

/* ---- Games ---------------------------------------------------------------- */
.gcard .g-head{display:flex;gap:14px;align-items:flex-start}
.gcard .g-head h2.big{margin:0 0 4px}
.gcard .g-head .muted{display:block;font-size:14px;line-height:1.45}
.g-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
background:linear-gradient(135deg,var(--pink),#7b2ff7);color:#fff}
.g-ic .i{width:24px;height:24px;margin:0}
.g-chips{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.g-acts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.g-acts .btn{margin:0;min-height:52px;padding:14px 8px;font-size:16px;white-space:nowrap;
min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:380px){.g-acts .btn.secondary .i{display:none}.g-acts .btn{font-size:15px}}

/* ---- Account & notifications --------------------------------------------- */
details.fold.acct{margin:0 0 10px}
details.fold.acct form{padding:4px 16px 16px}
details.fold.acct button[type=submit]{margin-top:6px}
.nstatus .ns-row{display:flex;gap:12px;align-items:flex-start;margin:0 0 14px}
.nstatus .ns-row b{display:block;font-size:16px}
.nstatus .ns-row b+span{display:block;font-size:14px;color:var(--muted);line-height:1.45}
.nstatus [data-push-test]{margin-top:0}
.adm .gl-row.note{align-items:flex-start}
.adm .gl-row.note .gl-ic{margin-top:2px}
.adm .gl-row.note.fresh{background:rgba(255,45,155,.06)}
.note-body{display:block;font-size:14px;color:#d9cdef;line-height:1.45;margin:2px 0 4px;
white-space:normal}
.note-pic{display:block;width:100%;border-radius:12px;margin:6px 0}
i.newdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pink);
margin-left:8px;vertical-align:2px}

/* ---- REP ------------------------------------------------------------------ */
button.linkbox{display:flex;align-items:center;gap:10px;width:100%;min-height:0;
margin:12px 0 0;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.25);
border:1px solid var(--line);box-shadow:none;color:var(--muted);font-size:14px;
font-weight:500;text-transform:none;letter-spacing:0;text-align:left}
button.linkbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;font-variant-numeric:tabular-nums}
button.linkbox .i{width:16px;height:16px;margin:0;flex:none}
.rung{display:flex;gap:14px;align-items:flex-start;padding:12px 0;position:relative}
.rung+.rung{border-top:1px solid rgba(255,255,255,.07)}
.rung-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
font-size:14px;font-weight:800;border:2px solid var(--line);color:var(--muted)}
.rung-n .i{width:16px;height:16px;margin:0;stroke-width:3}
.rung.done .rung-n{background:var(--good);border-color:var(--good);color:#12081f}
.rung.next .rung-n{border-color:var(--pink);color:var(--pink)}
.rung-tx{flex:1;min-width:0}
.rung-tx b{display:block;font-size:15px}
.rung-tx>span:not(.ochip){display:block;font-size:14px;color:var(--muted);margin:2px 0 0}
.rung-tx .ochip{margin-top:6px}
.rung.done .rung-tx b{color:var(--good)}
.rung.next{background:rgba(255,45,155,.07);margin:0 -14px;padding:12px 14px;border-radius:14px}
.rung.next .meter{margin-top:10px}

/* ---- Wallet --------------------------------------------------------------- */
.wallet .w-label{margin:2px 0 0;font-size:14px;color:var(--muted);font-weight:600}
.wallet h1.w-fig{font-size:46px;letter-spacing:-.03em;margin:0 0 8px;
font-variant-numeric:tabular-nums}
.wallet .owe{color:var(--bad)}
.ticket{display:flex;gap:14px;align-items:flex-start;margin:0 0 10px;padding:16px;
border-radius:18px;background:linear-gradient(135deg,rgba(255,45,155,.16),rgba(155,110,255,.12));
border:1px dashed rgba(255,45,155,.45);position:relative}
.t-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
background:var(--pink);color:#fff}
.t-ic .i{width:22px;height:22px;margin:0}
.t-tx{min-width:0}
.t-tx b{display:block;font-size:17px;line-height:1.3;margin:0 0 4px}
.t-tx>span:not(.ochip){display:block;font-size:14px;color:#d9cdef;line-height:1.45}
.t-tx .ochip{margin-top:8px}
.ticket.prize{margin:0 0 14px}
.draw-row{margin:12px 0 0}
.draw-row .ochip{font-size:14px;padding:7px 12px}
.t-tx .t-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--pink);margin:0 0 2px}
.ticket.prize b{font-size:20px}
.track{margin:14px 0 0}
.track-h{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.track-h b{font-size:15px}
.track-h span span{color:var(--muted);font-size:14px}
.track .muted{margin:2px 0 0;font-size:13px}
.adm .gl-ic.t-pinkic{background:rgba(255,45,155,.16);color:var(--pink)}
.adm .gl-ic.hotc{background:rgba(255,45,155,.14);color:var(--pink)}
.amt{flex:none;font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.amt.up{color:var(--good)}
.amt.down{color:var(--ink)}

/* ---- My orders ------------------------------------------------------------ */
.ochip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:99px;
font-size:13px;font-weight:700;background:rgba(255,255,255,.08);color:#d9cdef;
white-space:nowrap}
.ochip .i{width:14px;height:14px;margin:0}
.ochip.wait{background:rgba(255,200,63,.14);color:var(--gold)}
.ochip.go{background:rgba(155,110,255,.18);color:#c7b1ff}
.ochip.hot{background:rgba(255,45,155,.18);color:var(--pink)}
.ochip.ok{background:rgba(94,233,164,.13);color:var(--good)}
.ochip.bad{background:rgba(255,107,107,.13);color:var(--bad)}
.ochip.sm{padding:3px 8px;font-size:12px;flex:none}
.ocard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
margin:0 0 12px}
.ocard-id{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.04em;
font-variant-numeric:tabular-nums}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:20px;
margin:0 0 12px;overflow:hidden;box-shadow:0 10px 26px rgba(0,0,0,.3)}
a.ocard-main{display:block;padding:16px 16px 14px;color:var(--ink);text-decoration:none}
a.ocard-main:active{background:rgba(255,255,255,.03)}
.ocard-item{display:block;font-size:18px;font-weight:700;line-height:1.3;margin:0 0 12px}
.ocard .steps{margin:0 0 10px}
.ocard-next{margin:0 0 10px;font-size:14px;color:#d9cdef;line-height:1.45}
.ocard-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:10px;border-top:1px solid rgba(255,255,255,.07);font-size:14px;
color:var(--muted);font-variant-numeric:tabular-nums}
.ocard-foot .i{width:18px;height:18px;flex:none}
.ocard-foot .was{margin-left:6px;text-decoration:line-through;opacity:.6}
.ocard>.btn{margin:0 16px 16px;width:calc(100% - 32px)}
.adm .gl-ic.ok{background:rgba(94,233,164,.13);color:var(--good)}
.adm .gl-ic.bad{background:rgba(255,107,107,.13);color:var(--bad)}
.adm .gl-ic.wait{background:rgba(255,200,63,.13);color:var(--gold)}
.gl-h .was{margin-left:4px;text-decoration:line-through;opacity:.6}
.adm .gl-row.past .gl-h{white-space:normal}
.gl-h b.t-ok{color:var(--good);font-weight:600}
.gl-h b.t-bad{color:var(--bad);font-weight:600}
.ofacts{padding-top:6px;padding-bottom:6px}
.orow2{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.orow2+.orow2{border-top:1px solid rgba(255,255,255,.07)}
.orow2>.i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--muted)}
.orow2>span{min-width:0}
.orow2 b{display:block;font-size:15px}
.orow2 b+span{display:block;font-size:14px;color:var(--muted);line-height:1.45;
overflow-wrap:anywhere}
.oacts{margin:0 0 16px}
.oacts>*+*{margin-top:10px}
.oacts form{margin:0}
details.sure-row>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
justify-content:center;gap:8px;padding:12px;color:var(--muted);font-weight:600;font-size:15px}
details.sure-row>summary::-webkit-details-marker{display:none}
details.sure-row>summary .i{width:16px;height:16px}
details.sure-row[open]>summary{color:var(--bad)}
details.sure-row .muted{text-align:center;margin:0 0 10px}
.btn.secondary.bad{color:var(--bad);border-color:rgba(255,107,107,.45)}
.about-chip{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px;
border-radius:12px;background:rgba(255,45,155,.10);border:1px solid rgba(255,45,155,.3);
color:var(--ink)!important;text-decoration:none;font-size:14px}
.about-chip .i{width:18px;height:18px;flex:none;color:var(--pink)}
.about-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .i{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
.nbar.good{border-color:rgba(94,233,164,.35);background:rgba(94,233,164,.08)}
.nbar.good .nbar-ic{background:rgba(94,233,164,.16);color:var(--good)}
.nbar-go{flex:none;width:18px;height:18px;color:var(--muted)}

/* ---- Home: the games banner and the small tiles ------------------------- */
a.gamebar{display:flex;align-items:center;gap:14px;margin:14px 0 0;
padding:16px 16px;border-radius:18px;text-decoration:none;color:var(--ink);
background:linear-gradient(120deg,#5b1fa8 0%,#b0207a 60%,#ff2d9b 100%);
box-shadow:0 8px 24px rgba(255,45,155,.25);border:1px solid rgba(255,255,255,.14)}
a.gamebar:active{transform:scale(.98)}
.gamebar .gi{font-size:34px;line-height:1;flex:none;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.gamebar .gt2{flex:1;min-width:0}
.gamebar b{display:block;font-size:18px;font-weight:900}
.gamebar small{display:block;font-size:13.5px;opacity:.9;margin-top:2px;
line-height:1.3}
.gamebar .go{flex:none;font-weight:900;font-size:13px;padding:8px 12px;
border-radius:99px;background:rgba(255,255,255,.18);letter-spacing:.3px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.tiles a{display:flex;align-items:center;gap:10px;padding:14px;
border-radius:16px;background:var(--card);border:1px solid var(--line);
text-decoration:none;color:var(--ink);font-weight:800;font-size:16px;min-width:0}
.tiles a span{font-size:24px;line-height:1;flex:none}
.tiles a:active{transform:scale(.97)}
.home-sec{margin:22px 0 0}
.facts{margin:12px 0 0;display:flex;flex-direction:column;gap:7px;font-size:15px}
.facts div{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.facts span{width:20px;text-align:center;flex:none}
.facts a{color:var(--ink)}
.sec-h{margin:20px 4px 10px;font-weight:800;font-size:16px;color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wa-banner{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;
padding:14px 16px;border-radius:16px;text-decoration:none;color:#fff;
background:linear-gradient(120deg,#5b1fa8,#b0207a);border:1px solid rgba(255,255,255,.15)}
.wa-banner span{margin-left:auto;font-weight:900;background:rgba(255,255,255,.18);
padding:6px 12px;border-radius:99px;font-size:14px}
.wa-msg{white-space:pre-wrap;background:rgba(0,0,0,.3);border:1px solid var(--line);
border-radius:14px;padding:14px;margin:0 0 12px;font-size:15px;line-height:1.45;
overflow-wrap:anywhere}
.pill.wa{background:rgba(37,211,102,.16);color:#4ee07f}
.amount-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin:-2px 0 14px}
.amount-row input{margin:0;font-size:18px;padding:12px 12px 12px 34px}
.amount-row .money-in span{top:12px;left:14px;font-size:18px}
.amount-row button{width:auto;min-height:0;margin:0;padding:0 18px;font-size:16px}
.wa-box+.items,.wa-box+div,.wa-box+h2,.wa-box+p{margin-top:14px}
.gl-h .lowleft{color:#ffb36b;font-weight:800}
.head-stats .today-take{color:var(--good,#5ee9a4);border-color:rgba(94,233,164,.45)}
.wa-box{margin:12px 0 0;padding:12px 14px;border-radius:14px;
background:rgba(37,211,102,.08);border:1px solid rgba(37,211,102,.3)}
.wa-box .muted{margin-left:6px}
a.btn.wa-btn{margin:10px 0 0;background:#1faa59;box-shadow:0 0 0 2px rgba(37,211,102,.4);
text-transform:none;letter-spacing:0}
.cu-dots{display:flex;gap:5px;margin:10px 0 12px}
.cu-dots b{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.cu-dots b.done{background:var(--good)}
.cu-dots b.now{background:var(--pink)}
.day-h{margin:14px 4px 8px;font-size:13px;font-weight:800;color:var(--muted);
text-transform:uppercase;letter-spacing:.4px}
.money-in{position:relative}
.money-in span{position:absolute;left:16px;top:16px;font-size:20px;font-weight:800;
color:var(--muted)}
.money-in input{padding-left:36px}
.duo .btn{margin:0;font-size:16px;min-height:52px;padding:14px 8px;
white-space:nowrap;text-transform:none;letter-spacing:0}
/* The bill: price, what came off, what to pay. Figures line up on the right. */
.bill{margin:12px 0 4px;padding:12px 14px;border-radius:14px;
background:rgba(0,0,0,.28);border:1px solid var(--line)}
.bill div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;
font-variant-numeric:tabular-nums}
.bill .off{color:var(--good)}
.bill .add{color:var(--bad)}
.bill .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:9px;
font-weight:900;font-size:19px}
.bill .tot span:last-child{color:var(--gold)}
.bill p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.was,.orow span.was{display:inline;text-decoration:line-through;opacity:.6;
margin-left:6px;font-weight:600}
details.howto{margin:4px 0 0}
details.howto>summary{list-style:none;text-align:center;color:var(--muted);
font-weight:700;padding:12px;cursor:pointer;text-decoration:underline}
details.howto>summary::-webkit-details-marker{display:none}
button.quiet{background:none;border:0;box-shadow:none;color:var(--muted);
min-height:0;font-size:15px;font-weight:700;text-transform:none;
letter-spacing:0;padding:12px;text-decoration:underline}

/* ---- The minigames -------------------------------------------------------
   The playing area takes no scrolling or zooming gestures, so a swipe moves
   the basket rather than the page. */
.gstage{position:relative;border-radius:18px;overflow:hidden;
background:radial-gradient(120% 90% at 50% 0%,#3a1a63 0%,#1a0b30 70%);
border:1px solid var(--line);touch-action:none;user-select:none;
-webkit-user-select:none;-webkit-touch-callout:none;margin:0 0 14px}
.gstage canvas{display:block;width:100%}
.ghud{display:flex;justify-content:space-between;align-items:baseline;
gap:12px;margin:0 0 8px;font-weight:800}
.ghud b{font-size:30px;font-variant-numeric:tabular-nums;line-height:1}
.ghud span{color:var(--muted);font-size:14px}
.ghud .gt{font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)}
.gbar{height:6px;border-radius:6px;background:rgba(255,255,255,.12);
overflow:hidden;margin:0 0 12px}
.gbar i{display:block;height:100%;width:100%;background:var(--pink);
transform-origin:left center}
/* The countdown and the end of a round sit over the playing area. */
.gover{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;text-align:center;padding:24px;
background:rgba(16,6,32,.72);gap:6px}
.gover .big{font-size:64px;font-weight:900;line-height:1;
font-variant-numeric:tabular-nums}
.gover p{margin:0}
/* Tap the Looney: nine holes. These reset the full-width pink button style
   every other button on the site uses. */
.tapgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
padding:16px}
.tapgrid .hole{display:flex;align-items:center;justify-content:center;
aspect-ratio:1;width:auto;min-height:0;margin:0;padding:0;border-radius:50%;
background:rgba(0,0,0,.38);border:2px solid var(--line);box-shadow:none;
font-size:clamp(34px,12vw,60px);line-height:1;text-transform:none;
letter-spacing:0;color:var(--ink);transition:none}
.tapgrid .hole span{display:block;transform:scale(0);
transition:transform .09s ease-out}
.tapgrid .hole.up span{transform:scale(1)}
.tapgrid .hole.gold{border-color:var(--gold);
box-shadow:0 0 18px rgba(255,200,60,.45)}
.tapgrid .hole.bomb{border-color:var(--bad)}
.tapgrid .hole.hit{background:rgba(94,233,164,.25)}
.tapgrid .hole.ouch{background:rgba(255,107,107,.32)}
.tapgrid .hole:active{transform:none}
.tapgrid .hole{position:relative;overflow:visible}
.tapgrid .hole span,.tapgrid .hole i{pointer-events:none}
/* The +1 / +3 / -3 that floats up from a tapped hole. */
.tapgrid .hole i{position:absolute;left:0;right:0;top:18%;text-align:center;
font-style:normal;font-weight:900;font-size:22px;color:var(--good,#5ee9a4);
opacity:0;animation:gpop .6s ease-out forwards}
.tapgrid .hole i:empty{display:none}
.tapgrid .hole i.gold{color:var(--gold)}
.tapgrid .hole i.minus{color:var(--bad)}
@keyframes gpop{0%{opacity:1;transform:translateY(0) scale(1.15)}
100%{opacity:0;transform:translateY(-34px) scale(1)}}
/* Memory Match: cards that flip over in 3D. Reset the pink button style. */
.mwrap{display:flex;padding:12px;box-sizing:border-box}
.mgrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
perspective:900px}
.mgrid .mcard{position:relative;width:auto;min-height:0;height:auto;margin:0;
padding:0;border:0;border-radius:12px;background:none;box-shadow:none;
transform-style:preserve-3d;transition:transform .28s cubic-bezier(.3,1.4,.5,1);
font-size:clamp(22px,8vw,40px);line-height:1;text-transform:none;letter-spacing:0;
color:var(--ink);animation:mdeal .35s ease-out backwards}
.mgrid .mcard:active{transform:scale(.96)}
.mgrid .mcard span{position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;border-radius:12px;backface-visibility:hidden;
-webkit-backface-visibility:hidden;pointer-events:none}
.mgrid .mback{background:linear-gradient(145deg,#ff4fa8,#7b2cbf);
border:2px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 4px rgba(0,0,0,.12)}
.mgrid .mface{background:linear-gradient(160deg,#fff7fd,#f1dcff);
transform:rotateY(180deg);border:2px solid rgba(255,255,255,.6)}
.mgrid .mcard.up,.mgrid.peek .mcard{transform:rotateY(180deg)}
.mgrid .mcard.gold .mface{background:linear-gradient(160deg,#fff3c4,#ffd25a);
border-color:var(--gold);box-shadow:0 0 16px rgba(255,200,60,.55)}
.mgrid .mcard.golden .mface{background:linear-gradient(160deg,#fff6d0,#ffb800);
box-shadow:0 0 24px rgba(255,200,60,.85)}
.mgrid .mcard.pow .mface{background:linear-gradient(160deg,#e3fbff,#8ee6ff)}
.mgrid .mcard.no .mface{background:#ffd0d0;animation:mshake .35s}
.mgrid .mcard.boom .mface{background:#ff8f8f}
/* Opacity on the card itself would flatten the 3D and show its back, so
   the matched face fades instead. */
.mgrid .mcard.done{transform:rotateY(180deg) scale(.9);transition:transform .28s}
.mgrid .mcard.done .mface{box-shadow:0 0 0 3px var(--good,#5ee9a4);opacity:.45;
transition:opacity .45s .2s}
@keyframes mdeal{0%{opacity:0;transform:translateY(-18px) scale(.8)}
100%{opacity:1}}
@keyframes mshake{0%,100%{translate:0}25%{translate:-4px}75%{translate:4px}}
@media (prefers-reduced-motion:reduce){.mgrid .mcard{transition:none;animation:none}}
.gstage,.gstage *{-webkit-tap-highlight-color:transparent}
/* The last five seconds: the clock goes red. */
[data-game].hurry .gt{color:var(--bad)}
[data-game].hurry .gbar i{background:var(--bad)}
.gbar i{transition:background .2s}
@media (prefers-reduced-motion:reduce){.tapgrid .hole i{animation:none;opacity:0}}
/* ---- Game juice: combo, power-ups, mute, floating words, summary ---- */
.gmeta{display:flex;align-items:center;gap:8px;min-height:34px;margin:-4px 0 8px}
.gcombo{font-weight:900;font-size:14px;padding:5px 10px;border-radius:999px;
background:rgba(255,255,255,.1);border:1px solid var(--line);
font-variant-numeric:tabular-nums;white-space:nowrap}
.gcombo.m2{background:rgba(94,233,164,.18);border-color:rgba(94,233,164,.6)}
.gcombo.m3{background:rgba(255,200,60,.2);border-color:var(--gold);color:var(--gold)}
.gcombo.m4{background:rgba(255,45,155,.25);border-color:var(--pink);color:#fff;
animation:gglow .6s ease-in-out infinite alternate}
@keyframes gglow{from{box-shadow:0 0 0 rgba(255,45,155,0)}
to{box-shadow:0 0 16px rgba(255,45,155,.7)}}
.gpows{display:flex;gap:6px;flex:1;min-width:0;overflow:hidden}
.gpow{font-weight:800;font-size:13px;padding:5px 9px;border-radius:999px;
background:rgba(90,220,255,.16);border:1px solid rgba(90,220,255,.55);
white-space:nowrap;font-variant-numeric:tabular-nums}
.gmeta .gmute{width:auto;min-height:0;margin:0 0 0 auto;padding:6px 10px;
border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);
box-shadow:none;font-size:17px;line-height:1;text-transform:none;letter-spacing:0;
flex:0 0 auto}
.gfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.gover{z-index:3;overflow-y:auto;justify-content:flex-start;padding:14px 16px}
.gover>:first-child,.gover>.gconfetti+*{margin-top:auto}
.gover>:last-child{margin-bottom:auto}
.gover .gscore{font-size:48px}
/* The summary can hold a lot after a big round: give it the room. */
[data-game].gdone .gstage{min-height:520px}
.gacts{display:flex;gap:8px;width:100%;max-width:300px;margin-top:6px}
.gover .gacts .gbtn{flex:1 1 0;margin:0;max-width:none;min-width:0}
[data-game="tap"] .gstage{min-height:330px;display:flex;align-items:center}
[data-game="tap"] .tapgrid{flex:1}
.gword{position:absolute;transform:translate(-50%,-50%);font-weight:900;
font-size:22px;color:var(--good,#5ee9a4);white-space:nowrap;
text-shadow:0 2px 0 rgba(0,0,0,.45);animation:gword .75s ease-out forwards}
.gword.gold{color:var(--gold);font-size:26px}
.gword.minus{color:var(--bad);font-size:26px}
.gword.lost{color:var(--muted);font-size:16px}
.gword.power{color:#5adcff;font-size:22px}
.gword.combo,.gword.perfect,.gword.frenzy{font-size:34px;color:#fff;
animation:gbig 1s ease-out forwards;
text-shadow:0 0 18px rgba(255,45,155,.9),0 3px 0 rgba(0,0,0,.5)}
.gword.perfect{color:var(--gold);text-shadow:0 0 18px rgba(255,200,60,.8),0 3px 0 rgba(0,0,0,.5)}
.gword.frenzy{font-size:42px;color:var(--pink)}
@keyframes gword{0%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}
100%{opacity:0;transform:translate(-50%,-150%) scale(1)}}
@keyframes gbig{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
18%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}
70%{opacity:1;transform:translate(-50%,-50%) scale(1)}
100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.gspark{position:absolute;width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;
animation:gspark .52s ease-out forwards}
@keyframes gspark{from{opacity:1;transform:translate(0,0)}
to{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.4)}}
[data-game].frenzy .gstage{border-color:var(--pink);
box-shadow:0 0 0 2px rgba(255,45,155,.35),0 0 26px rgba(255,45,155,.35)}
[data-game].ouch .gstage{animation:gouch .3s ease-out}
@keyframes gouch{from{box-shadow:0 0 0 3px rgba(255,107,107,.8)}to{box-shadow:none}}
.gover .gname{font-weight:800;font-size:21px}
.gover .gbtn{margin-top:10px;max-width:260px}
.gover a.gbtn{margin-top:6px}
.gover .gcount{font-size:84px;animation:gbig .65s ease-out}
.gnew{font-weight:900;color:var(--gold);font-size:18px}
.grank{font-weight:800}
.gstreak{font-weight:700;color:#ffb03c;font-size:14px}
.gsum{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%;max-width:330px;
margin:4px 0 2px}
.gsum div{background:rgba(255,255,255,.07);border:1px solid var(--line);
border-radius:12px;padding:5px 6px;display:flex;flex-direction:column;align-items:center}
.gsum b{font-size:18px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.gsum span{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;
letter-spacing:.02em;white-space:nowrap}
.ghow{text-align:center;margin:6px 0 0;font-size:14px}
/* Tap the Looney: power-ups glow blue, and a ring round each face runs down
   as it gets ready to hide. */
.tapgrid .hole.power{border-color:#5adcff;box-shadow:0 0 18px rgba(90,220,255,.5)}
.tapgrid .hole.up{background:conic-gradient(rgba(255,255,255,.16) calc(var(--left,1) * 360deg),
rgba(0,0,0,.38) 0)}
.tapgrid .hole.up.bomb{background:conic-gradient(rgba(255,107,107,.18) calc(var(--left,1) * 360deg),
rgba(0,0,0,.38) 0)}
.tapgrid .hole i{display:none}
/* The daily streak on the games page. */
.gstreakbar{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;
padding:14px 16px;margin:0 0 14px;border-radius:16px;border:1px solid var(--line);
background:rgba(255,176,60,.08)}
.gstreakbar.on{border-color:rgba(255,176,60,.6);background:rgba(255,176,60,.14)}
.gstreakbar .gs-ic svg{width:28px;height:28px;color:#ffb03c}
.gstreakbar .gs-tx{display:flex;flex-direction:column;min-width:0}
.gstreakbar .gs-tx span{color:var(--muted);font-size:14px}
.gstreakbar .gs-days{grid-column:1 / -1;display:flex;gap:6px;margin-top:6px}
.gstreakbar .gs-days i{flex:1;height:7px;border-radius:7px;background:rgba(255,255,255,.12)}
.gstreakbar .gs-days i.on{background:#ffb03c}
.gstreakbar .gs-tx b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gs-freeze{font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;
background:rgba(111,227,255,.16);border:1px solid rgba(111,227,255,.45);color:#bff3ff;
text-decoration:none;white-space:nowrap}
.gs-freeze.off{background:none;border-style:dashed;color:var(--muted)}
.gstreakbar .gs-tx .gs-saved{color:#bff3ff;font-weight:700;margin-top:4px}
@media (prefers-reduced-motion:reduce){.gword,.gword.combo,.gword.perfect,
.gword.frenzy,.gover .gcount,.gcombo.m4{animation:none}.gspark{display:none}}
/* ---- Rewards: level card, challenge, quick links, badges, skins -------- */
.gplayer{background:linear-gradient(135deg,rgba(255,45,155,.22),rgba(90,60,200,.18));
border-color:rgba(255,45,155,.45)}
.gp-top{display:flex;gap:14px;align-items:center}
.gp-lv{flex:0 0 auto;width:66px;height:66px;border-radius:50%;display:flex;
flex-direction:column;align-items:center;justify-content:center;font-size:28px;
font-weight:900;line-height:1;background:radial-gradient(circle at 30% 30%,#ff5fb6,#b0157a);
box-shadow:0 0 0 3px rgba(255,200,60,.8),0 6px 18px rgba(255,45,155,.45)}
.gp-lv small{font-size:9px;letter-spacing:.12em;opacity:.85;margin-bottom:2px}
.gp-tx{display:flex;flex-direction:column;min-width:0}
.gp-tx b{font-size:22px;font-weight:900}
.gp-xp{color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.gp-bar{height:12px;border-radius:12px;background:rgba(0,0,0,.35);overflow:hidden;
margin:14px 0 6px;border:1px solid var(--line)}
.gp-bar i{display:block;height:100%;border-radius:12px;
background:linear-gradient(90deg,var(--pink),var(--gold))}
.gp-next{display:flex;justify-content:space-between;gap:10px;font-size:13px;
color:var(--muted);font-weight:700}
.gp-orders{margin:10px 0 0;font-size:13px;color:var(--muted);display:flex;gap:6px;
align-items:center}
.gp-orders svg{width:16px;height:16px;flex:0 0 auto}
.gchal .gc-head{display:flex;gap:12px;align-items:center}
.gc-ic{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;
align-items:center;justify-content:center;background:rgba(90,220,255,.16);color:#5adcff}
.gc-ic svg{width:22px;height:22px}
.gc-tx{display:flex;flex-direction:column;flex:1;min-width:0}
.gc-tx small{font-size:11px;letter-spacing:.1em;color:#5adcff;font-weight:800}
.gc-tx b{font-size:17px}
.gc-xp{flex:0 0 auto;font-weight:900;color:var(--gold);font-size:14px;white-space:nowrap}
.gchal .gp-bar{margin:12px 0 4px;height:9px}
.gchal .gp-bar i{background:#5adcff}
.gchal.done{border-color:rgba(94,233,164,.6)}
.gchal.done .gc-ic{background:rgba(94,233,164,.2);color:var(--good)}
.gchal.done .gp-bar i{background:var(--good)}
.gc-foot{margin:4px 0 0;font-size:13px}
.gquick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.gquick a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;
border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.05);
color:var(--ink);text-decoration:none;text-align:center;min-width:0}
.gquick span{display:flex;width:40px;height:40px;border-radius:12px;align-items:center;
justify-content:center;background:rgba(255,200,60,.14);color:var(--gold)}
.gquick span svg{width:22px;height:22px}
.gquick b{font-size:14px}
.gquick small{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.gbadges{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.gbadge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
padding:14px 8px;border-radius:16px;border:1px solid var(--line);
background:rgba(255,255,255,.04);opacity:.6}
.gbadge.on{opacity:1;border-color:rgba(255,200,60,.55);background:rgba(255,200,60,.09)}
.gbadge .gb-ic{font-size:34px;line-height:1.1}
.gbadge.on .gb-ic{filter:drop-shadow(0 0 10px rgba(255,200,60,.5))}
.gbadge small{font-size:12px;color:var(--muted)}
.gskins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gskins form{margin:0}
.gskin{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;
height:100%;min-height:0;margin:0;padding:12px 4px;border-radius:14px;
border:2px solid var(--line);background:rgba(255,255,255,.05);box-shadow:none;
color:var(--ink);text-transform:none;letter-spacing:0;font-weight:700}
.gskin span{font-size:32px;line-height:1.15}
.gskin b{font-size:14px}
.gskin small{font-size:11px;color:var(--muted);font-weight:700;display:flex;
gap:3px;align-items:center;text-align:center;justify-content:center}
.gskin small svg{width:12px;height:12px;flex:0 0 auto}
.gskin.on{border-color:var(--pink);background:rgba(255,45,155,.16)}
.gskin.on small{color:var(--pink)}
.gskin.locked span{filter:grayscale(1);opacity:.45}
.lrow small.lv{font-size:11px;font-weight:800;color:var(--gold);
background:rgba(255,200,60,.12);border-radius:6px;padding:1px 5px;margin-left:4px;
vertical-align:middle;white-space:nowrap}
/* The summary's XP bar fills from where it was to where it is now. */
.gxp{display:flex;align-items:center;gap:8px;width:100%;max-width:330px;margin:6px 0 0}
.gx-lv{font-weight:900;font-size:13px;color:var(--gold);white-space:nowrap}
.gx-bar{flex:1;height:10px;border-radius:10px;background:rgba(0,0,0,.4);overflow:hidden}
.gx-bar i{display:block;height:100%;width:var(--to);border-radius:10px;
background:linear-gradient(90deg,var(--pink),var(--gold));
animation:gxfill 1.1s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes gxfill{from{width:var(--from)}to{width:var(--to)}}
.gx-gain{color:var(--gold);font-size:15px;white-space:nowrap}
.gpills{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;max-width:330px;
margin:5px 0 0}
.gpill{font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;
background:rgba(255,255,255,.1);border:1px solid var(--line)}
.gpill.chal{background:rgba(94,233,164,.16);border-color:rgba(94,233,164,.6)}
.gpill.badge{background:rgba(255,200,60,.16);border-color:rgba(255,200,60,.6)}
.gpill.skin{background:rgba(90,220,255,.16);border-color:rgba(90,220,255,.6)}
.glevelup{font-weight:900;font-size:15px;letter-spacing:.14em;color:var(--gold);
display:flex;flex-direction:column;align-items:center;animation:gbig 1.6s ease-out both;
animation-name:glevel}
.glevelup b{font-size:24px;letter-spacing:0;color:#fff;
text-shadow:0 0 16px rgba(255,45,155,.9)}
@keyframes glevel{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.15)}
45%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.gconfetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gconfetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;
opacity:0;animation:gconf 2s ease-in forwards}
@keyframes gconf{0%{opacity:1;transform:translateY(0) rotate(0)}
100%{opacity:0;transform:translateY(560px) rotate(var(--spin,360deg))}}
@media (prefers-reduced-motion:reduce){.gx-bar i,.glevelup{animation:none}
.gconfetti{display:none}}
/* The level on the Me page: tap it to go to the games. */
.melv{display:inline-flex;align-items:center;gap:7px;margin-top:7px;padding:4px 10px 4px 4px;
border-radius:999px;background:rgba(255,200,60,.12);border:1px solid rgba(255,200,60,.5);
color:var(--ink);text-decoration:none;max-width:100%}
.melv-n{font-weight:900;font-size:12px;padding:2px 7px;border-radius:999px;
background:linear-gradient(135deg,var(--pink),#b0157a);color:#fff;white-space:nowrap}
.melv-t{font-weight:800;font-size:13px;color:var(--gold);white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.melv-bar{width:46px;height:6px;border-radius:6px;background:rgba(0,0,0,.35);
overflow:hidden;flex:0 0 auto}
.melv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pink),var(--gold))}
/* ---- Rewards v2: rarity, boxes, the wheel, happy hour ------------------ */
.rchip{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.06em;
text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid;
white-space:nowrap}
.rchip.common{color:#c9c3dd;border-color:rgba(201,195,221,.5);background:rgba(201,195,221,.08)}
.rchip.rare{color:#5adcff;border-color:rgba(90,220,255,.6);background:rgba(90,220,255,.1)}
.rchip.epic{color:#c48bff;border-color:rgba(196,139,255,.7);background:rgba(196,139,255,.12)}
.rchip.legendary{color:#ffc83c;border-color:rgba(255,200,60,.8);background:rgba(255,200,60,.14);
box-shadow:0 0 10px rgba(255,200,60,.35)}
.rcounts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gbadge.on.rare,.gskin.rare:not(.locked){border-color:rgba(90,220,255,.6)}
.gbadge.on.epic,.gskin.epic:not(.locked){border-color:rgba(196,139,255,.75);
box-shadow:0 0 14px rgba(196,139,255,.25)}
.gbadge.on.legendary,.gskin.legendary:not(.locked){border-color:rgba(255,200,60,.85);
box-shadow:0 0 18px rgba(255,200,60,.35);animation:gleg 2.4s ease-in-out infinite alternate}
@keyframes gleg{from{box-shadow:0 0 8px rgba(255,200,60,.25)}to{box-shadow:0 0 22px rgba(255,200,60,.55)}}
.gskin.on{border-color:var(--pink)!important}
.gbadge .rchip,.gskin .rchip{margin-top:3px}
.gskin span.rchip{font-size:9px;line-height:1.4}
.gp-boost{display:inline-block;margin-top:4px;font-size:12px;font-weight:900;color:#fff;
background:linear-gradient(90deg,var(--pink),#ff8a3c);border-radius:999px;padding:3px 9px;
animation:gglow .8s ease-in-out infinite alternate;align-self:flex-start}
.gc-xp{display:flex;flex-direction:column;align-items:flex-end}
.gc-xp small{font-size:11px;color:var(--muted);font-weight:700}
.ghappy{display:flex;flex-direction:column;gap:2px;padding:12px 16px;margin:0 0 14px;
border-radius:16px;border:1px dashed rgba(255,45,155,.5);background:rgba(255,45,155,.06)}
.ghappy b{font-size:15px}
.ghappy span{font-size:13px;color:var(--muted)}
.ghappy.on{border-style:solid;border-color:var(--pink);
background:linear-gradient(135deg,rgba(255,45,155,.35),rgba(255,138,60,.25));
animation:gglow .7s ease-in-out infinite alternate}
.ghappy.on span{color:#fff}
.gbox-cta,.gspin-cta{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
padding:14px 16px;margin:0 0 14px;border-radius:18px;text-decoration:none;color:var(--ink);
border:1px solid var(--line);background:rgba(255,255,255,.05)}
.gbox-cta{border-color:rgba(255,200,60,.7);
background:linear-gradient(135deg,rgba(255,200,60,.22),rgba(255,45,155,.18));
animation:gglow 1s ease-in-out infinite alternate}
.gspin-cta.ready{border-color:rgba(90,220,255,.7);background:rgba(90,220,255,.12)}
.gbox-cta b,.gspin-cta b{display:block;font-size:16px}
.gbox-cta small,.gspin-cta small{display:block;color:var(--muted);font-size:12px}
.gb-big{font-size:34px;line-height:1}
.gbox-cta .go,.gspin-cta .go{font-weight:900;padding:8px 14px;border-radius:999px;
background:var(--pink);color:#fff;font-size:14px}
.gspin-cta:not(.ready) .go{background:rgba(255,255,255,.1)}
.gbox-cta .gb-big{animation:gwobble 1.6s ease-in-out infinite}
@keyframes gwobble{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}
85%{transform:rotate(12deg)}92%{transform:rotate(-6deg)}}
.gx-bonus{color:var(--gold);font-size:14px;white-space:nowrap}
.gboxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:0 0 14px}
.gboxes form{margin:0}
.gboxbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;min-height:0;
margin:0;padding:16px 8px;border-radius:18px;border:2px solid var(--line);
background:rgba(255,255,255,.05);box-shadow:none;color:var(--ink);text-transform:none;
letter-spacing:0}
.gboxbtn .gb-big{font-size:44px;animation:gwobble 2s ease-in-out infinite}
.gboxbtn small{color:var(--muted);font-size:12px;font-weight:700}
.gboxbtn b{font-size:13px;color:var(--pink)}
.gboxbtn.rare{border-color:rgba(90,220,255,.6);background:rgba(90,220,255,.08)}
.gboxbtn.epic{border-color:rgba(196,139,255,.75);background:rgba(196,139,255,.1)}
.gboxbtn.legendary{border-color:rgba(255,200,60,.85);background:rgba(255,200,60,.1);
animation:gleg 1.6s ease-in-out infinite alternate}
.gprize{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
position:relative;overflow:hidden}
.gprize .gp-big{font-size:56px;line-height:1.1}
.gprize b{font-size:19px}
/* Opening a box: full screen, the box shakes, bursts, and the reel lands. */
body.gmodal-open{overflow:hidden}
.gmodal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
padding:20px;background:rgba(10,3,22,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gm-card{position:relative;width:100%;max-width:360px;display:flex;flex-direction:column;
align-items:center;gap:10px;text-align:center;padding:26px 18px;border-radius:24px;
background:radial-gradient(120% 90% at 50% 0%,#3a1a63,#1a0b30);border:2px solid var(--line);
overflow:hidden}
.gmodal.rare .gm-card{border-color:#5adcff}
.gmodal.epic .gm-card{border-color:#c48bff}
.gmodal.legendary .gm-card{border-color:#ffc83c}
.gmodal.won.rare .gm-card{box-shadow:0 0 40px rgba(90,220,255,.5)}
.gmodal.won.epic .gm-card{box-shadow:0 0 50px rgba(196,139,255,.6)}
.gmodal.won.legendary .gm-card{box-shadow:0 0 60px rgba(255,200,60,.7)}
.gm-box span{display:block;font-size:84px;line-height:1}
.gm-box.shake span{animation:gshake .12s linear infinite}
@keyframes gshake{0%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(8deg) scale(1.06)}
100%{transform:rotate(-8deg) scale(1)}}
.gm-box.burst span{animation:gburst .4s ease-out forwards}
@keyframes gburst{to{transform:scale(1.8);opacity:0}}
.gm-box.burst{height:0;overflow:visible}
.gm-label{margin:0;font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:13px;
color:var(--muted)}
.gm-reel{font-size:70px;line-height:1.1;min-height:78px}
.gm-reel.spin{animation:greel .08s linear}
@keyframes greel{from{transform:translateY(-14px);opacity:.4}to{transform:none;opacity:1}}
.gm-reel.land{animation:gland .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes gland{from{transform:scale(.3)}to{transform:scale(1)}}
.gm-out{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.gm-prize{margin:0;font-weight:900;font-size:21px}
.gm-level{margin:0;font-weight:900;color:var(--gold);letter-spacing:.08em}
.gm-level b{display:block;font-size:22px;color:#fff;letter-spacing:0}
.gm-card .gacts{max-width:none}
/* The wheel: one slice per prize, a ticking pin at the top, a ring of
   lights round the edge that chase while it spins. */
.gwheel-wrap{position:relative;width:min(310px,84vw);aspect-ratio:1;margin:14px auto 22px}
.gwheel-pin{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:3;
font-size:32px;color:var(--gold);text-shadow:0 3px 8px rgba(0,0,0,.7);transform-origin:50% 20%}
.gwheel-wrap:has(.gwheel.spinning) .gwheel-pin{animation:gpin .12s ease-in-out infinite alternate}
@keyframes gpin{to{transform:translateX(-50%) rotate(-14deg)}}
.gwheel{position:absolute;inset:10px;border-radius:50%;border:5px solid #ffd25a;
box-shadow:0 0 0 5px #3a1a63,0 0 0 7px rgba(255,210,90,.55),0 10px 40px rgba(255,45,155,.45),
inset 0 0 30px rgba(0,0,0,.35);will-change:transform}
.gwheel::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.22),transparent 55%)}
.gwheel.spinning .wl{filter:blur(.6px)}
.gwheel.landed{animation:gland .5s ease-out}
@keyframes gland{40%{box-shadow:0 0 0 5px #3a1a63,0 0 0 7px #ffd25a,0 0 60px rgba(255,210,90,.9),
inset 0 0 30px rgba(0,0,0,.35)}}
.gw-hub{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
border-radius:50%;display:grid;place-items:center;font-size:26px;z-index:2;
background:radial-gradient(circle at 35% 30%,#fff3c4,#ffb800 60%,#b97800);
box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.25)}
.gwheel-lights{position:absolute;inset:0;pointer-events:none}
.gwheel-lights i{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;
transform-origin:4.5px calc(min(310px,84vw) / 2);border-radius:50%;
background:#ffe7a0;box-shadow:0 0 8px #ffd25a}
.gwheel-lights i:nth-child(odd){opacity:.45}
.gwheel-wrap:has(.gwheel.spinning) .gwheel-lights i{animation:glight .5s steps(1) infinite}
.gwheel-wrap:has(.gwheel.spinning) .gwheel-lights i:nth-child(odd){animation-delay:.25s}
@keyframes glight{50%{opacity:.25}}
.gwheel .wl{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none}
.gwheel .wl>span{display:flex;flex-direction:column;align-items:center;margin-top:8%;
font-size:22px;line-height:1.1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.gwheel .wl b{font-size:10px;font-weight:900;color:#fff;max-width:60px;text-align:center;
text-shadow:0 1px 2px rgba(0,0,0,.7)}
.gprize.won{animation:gprizein .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes gprizein{from{transform:scale(.7);opacity:0}}
.gspin-btn{font-size:20px}
.gspin-btn.extra{font-size:17px;background:linear-gradient(135deg,#5adcff,#7b5cff);color:#fff;margin-bottom:10px}
.gspin-btn.extra:disabled{opacity:.5}
@media (prefers-reduced-motion:reduce){.gbox-cta,.gbox-cta .gb-big,.gboxbtn .gb-big,
.gboxbtn.legendary,.gbadge.on.legendary,.gskin.legendary,.ghappy.on,.gp-boost,
.gm-box.shake span{animation:none}}
.gpill.gold{background:rgba(255,200,60,.22);border-color:#ffc83c}
.gpill.badge.epic{border-color:#c48bff}
.gpill.badge.legendary{border-color:#ffc83c;box-shadow:0 0 10px rgba(255,200,60,.4)}
.gx-mult{font-size:11px;color:#fff;background:var(--pink);border-radius:999px;padding:1px 6px}
.gpow.xp{background:rgba(255,45,155,.2);border-color:var(--pink)}
.gover a.gopen{border-color:var(--gold);color:var(--gold)}
.gover.gflash{animation:gflash .7s ease-out}
@keyframes gflash{0%{background:rgba(255,200,60,.65)}100%{background:rgba(16,6,32,.72)}}
.tapgrid .hole.golden{border-color:#ffc83c;box-shadow:0 0 26px rgba(255,200,60,.9);
animation:gleg .4s ease-in-out infinite alternate}
/* The early-order discount countdown. */
.promobar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
padding:12px 14px;margin:0 0 14px;border-radius:16px;
background:linear-gradient(135deg,rgba(255,45,155,.3),rgba(255,138,60,.22));
border:1px solid var(--pink);animation:gglow .9s ease-in-out infinite alternate}
.promobar .pb-ic svg{width:26px;height:26px;color:#fff}
.promobar .pb-tx{display:flex;flex-direction:column;min-width:0}
.promobar .pb-tx b{font-size:16px}
.promobar .pb-tx span{font-size:13px;font-weight:700;color:#ffd7ea}
.promobar .pb-go{font-weight:900;padding:8px 14px;border-radius:999px;background:#fff;
color:var(--pink);text-decoration:none;font-size:14px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.promobar{animation:none}}
/* ---- Season pass, game of the day, quests, mastery ---------------------- */
.gseason{display:block;text-decoration:none;color:var(--ink);
background:linear-gradient(135deg,rgba(255,200,60,.2),rgba(123,60,255,.22));
border-color:rgba(255,200,60,.55)}
.gs-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.gs-badge{font-weight:900;letter-spacing:.1em;color:var(--gold);font-size:12px}
.gs-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:6px}
.gs-row b{font-size:26px;font-weight:900}
.gs-row b small{font-size:14px;color:var(--muted)}
.gs-next{font-size:13px;font-weight:800;color:var(--gold);text-align:right}
.gseason .gp-bar{margin:10px 0 6px}
.gs-foot{font-size:12px;color:var(--muted);font-weight:700}
.ggotd{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;
margin:0 0 14px;border-radius:16px;text-decoration:none;color:var(--ink);
border:1px solid rgba(255,138,60,.7);background:rgba(255,138,60,.14)}
.ggotd .gd-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;
justify-content:center;background:rgba(255,138,60,.25);color:#ffb03c}
.ggotd .gd-ic svg{width:22px;height:22px}
.ggotd small{display:block;font-size:11px;letter-spacing:.1em;color:#ffb03c;font-weight:900}
.ggotd b{font-size:15px}
.ggotd .go{font-weight:900;padding:8px 14px;border-radius:999px;background:#ff8a3c;color:#fff;font-size:14px}
.gquests .gq-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.gquests .gq-head span{font-size:12px;font-weight:900;letter-spacing:.1em;color:#c48bff}
.gquests .gq-head small{font-size:12px}
.gq{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 0;
border-top:1px solid var(--line)}
.gq-ic{font-size:20px}
.gq-tx{display:flex;flex-direction:column;gap:4px;min-width:0}
.gq-tx b{font-size:14px}
.gq-tx small{font-size:11px;color:var(--muted);font-weight:700}
.gq-bar{display:block;height:6px;border-radius:6px;background:rgba(0,0,0,.35);overflow:hidden}
.gq-bar i{display:block;height:100%;background:#c48bff;border-radius:6px}
.gq.done .gq-bar i{background:var(--good)}
.gq-rw{display:flex;flex-direction:column;align-items:flex-end;font-weight:900;font-size:12px;
color:var(--gold);white-space:nowrap}
.gq-rw small{font-size:10px;color:var(--muted)}
.ochip.mast{color:#c48bff;border-color:rgba(196,139,255,.5)}
.ochip.hot{color:#ffb03c;border-color:rgba(255,176,60,.6)}
.gtrack{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.gt-tier{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;
padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);
text-align:center;opacity:.7}
.gt-tier .gt-n{position:absolute;top:5px;left:8px;font-size:11px;font-weight:900;color:var(--muted)}
.gt-tier .gt-ic{font-size:28px;line-height:1.2}
.gt-tier .gt-w{font-size:11px;font-weight:800}
.gt-tier .gt-st{font-size:11px;font-weight:900;color:var(--good);min-height:14px}
.gt-tier.got{opacity:1;border-color:rgba(94,233,164,.55);background:rgba(94,233,164,.08)}
.gt-tier.next{opacity:1;border-color:var(--pink);background:rgba(255,45,155,.12)}
.gt-tier.next .gt-st{color:var(--pink)}
.gt-tier.big{border-width:2px}
.gt-tier.big:not(.got):not(.next){border-color:rgba(255,200,60,.45)}
.gpill.mastery{background:rgba(196,139,255,.18);border-color:#c48bff}
.gpill.season{background:rgba(255,200,60,.18);border-color:#ffc83c}
.gxp.gmast{margin-top:4px}
.gxp.gmast .gx-lv{color:#c48bff}
.gxp.gmast .gx-bar i{background:#c48bff}
.gxp.gmast small{font-size:11px;color:var(--muted);font-weight:800;white-space:nowrap}
/* ---- Looney Gems ---------------------------------------------------------- */
.ggems{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
text-decoration:none;color:var(--ink);border-color:rgba(90,220,255,.6);
background:linear-gradient(135deg,rgba(90,220,255,.16),rgba(123,60,255,.2))}
.gg-ic{font-size:34px;filter:drop-shadow(0 0 10px rgba(90,220,255,.6));animation:ggem 2.4s ease-in-out infinite}
@keyframes ggem{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-3px) rotate(6deg)}}
.gg-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.gg-tx b{font-size:17px;font-weight:900}
.gg-tx small{font-size:12px;color:var(--muted);font-weight:700}
.gg-tx .gp-bar{height:7px;margin-top:3px}
.gg-tx .gp-bar i{background:linear-gradient(90deg,#5adcff,#b46cff)}
.ggems .go{font-weight:900;padding:8px 14px;border-radius:999px;background:#5adcff;color:#13072b;font-size:14px}
.ggemhero{text-align:center;border-color:rgba(90,220,255,.6);
background:radial-gradient(circle at 50% 0,rgba(90,220,255,.25),transparent 70%),var(--card)}
.gg-bal{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}
.gg-bal .gg-ic{font-size:48px}
.gg-bal b{font-size:44px;font-weight:900;line-height:1}
.gg-bal small{font-size:13px;font-weight:800;color:#5adcff;letter-spacing:.08em;text-transform:uppercase}
.gfiver{border-color:rgba(94,233,164,.6);background:linear-gradient(135deg,rgba(94,233,164,.14),rgba(90,220,255,.1))}
.gf-top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.gf-big{font-size:34px}
.gf-top b{display:block;font-size:19px;font-weight:900}
.gf-top small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.gfiver .gp-bar i{background:linear-gradient(90deg,#5ee9a4,#5adcff)}
.gf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.gf-row .muted{font-size:13px;font-weight:700}
.gf-pend{margin:10px 0 0;font-size:13px;font-weight:800;color:var(--gold)}
.gem-btn{width:auto;min-height:0;padding:9px 14px;font-size:14px;font-weight:900;white-space:nowrap;
background:linear-gradient(135deg,#5adcff,#b46cff);color:#13072b;border:0;border-radius:999px;box-shadow:none}
.gem-btn:disabled{background:rgba(255,255,255,.08);color:var(--muted);opacity:1}
.gshop-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;
margin:0 0 8px;border-radius:16px;border:1px solid var(--line);background:var(--card)}
.gs-ic2{font-size:28px}
.gs-tx2{display:flex;flex-direction:column;gap:2px;min-width:0}
.gs-tx2 b{font-size:15px}
.gs-tx2 small{font-size:12px;color:var(--muted);font-weight:700}
.gshop-skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.gsk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:16px;
text-align:center;border:1px solid rgba(255,200,60,.45);background:rgba(255,200,60,.06)}
.gsk-ic{font-size:36px}
.gsk b{font-size:14px}
.gsk small{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:4px}
.gsk.own{border-color:rgba(94,233,164,.55);background:rgba(94,233,164,.08)}
.gsk-own{font-size:13px;font-weight:900;color:var(--good);padding:8px 0}
/* Shop: section jumps, the weekly drop, the freeze, name flair. */
.gshop-jump{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 6px;padding:2px 16px 10px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gshop-jump::-webkit-scrollbar{display:none}
.gshop-jump a{flex:none;font-size:13px;font-weight:800;padding:8px 13px;border-radius:999px;
border:1px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;white-space:nowrap}
[id="weekly"],[id="freeze"],[id="boosts"],[id="flair"],[id="pass"],[id="boxes"],[id="skins"]{scroll-margin-top:80px}
.gshop-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gs-timer{font-size:12px;font-weight:800;color:#bff3ff;padding:4px 10px;border-radius:999px;
background:rgba(111,227,255,.12);border:1px solid rgba(111,227,255,.35);white-space:nowrap}
.gshop-skins.weekly{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:6px}
.gsk.wk{position:relative;border-color:rgba(180,108,255,.55);
background:linear-gradient(160deg,rgba(180,108,255,.16),rgba(90,220,255,.06))}
.gsk.wk.legendary{border-color:rgba(255,200,60,.7);
background:linear-gradient(160deg,rgba(255,200,60,.2),rgba(255,45,155,.08));
box-shadow:0 0 22px rgba(255,200,60,.18)}
.gsk-r{position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:900;letter-spacing:.5px;
text-transform:uppercase;color:#d9c2ff}
.gsk.wk.legendary .gsk-r{color:var(--gold)}
.gsk.wk .gsk-ic{font-size:44px;margin-top:8px}
.gs-note{font-size:12px;margin:0 0 6px}
.gs-save{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:900;padding:2px 7px;
border-radius:999px;background:rgba(94,233,164,.16);color:var(--good);vertical-align:2px}
.gs-have{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:#bff3ff;margin-top:4px}
.gs-have i{font-style:normal;filter:grayscale(1);opacity:.35}
.gs-have i.on{filter:none;opacity:1}
.gshop-row.freeze{border-color:rgba(111,227,255,.45);background:linear-gradient(135deg,rgba(111,227,255,.1),var(--card))}
a.gem-btn{display:inline-block;text-decoration:none}
.gem-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.gem-btn.on{background:rgba(94,233,164,.16);border:1px solid rgba(94,233,164,.55);color:var(--good)}
.gfl-prev{margin:0 0 4px}
.gfl-h{font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.gfl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,104px),1fr));gap:8px}
.gfl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;
border:1px solid var(--line);background:rgba(0,0,0,.18);text-align:center;min-width:0}
.gfl:last-child{grid-column:1/-1;border-color:rgba(255,200,60,.45);
background:linear-gradient(135deg,rgba(255,92,138,.12),rgba(92,200,255,.12))}
.gfl b{font-size:17px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gfl small{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:4px}
.gfl.own,.gfl-row.own{border-color:rgba(94,233,164,.45)}
.gfl-list{display:flex;flex-direction:column;gap:8px}
.gfl-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;
border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.18)}
.gfl-row small.ftitle{font-size:12px}
.gearn .ge-row,.ghist .gh-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
padding:8px 0;border-top:1px solid var(--line)}
.gearn .ge-row:first-child,.ghist .gh-row:first-child{border-top:0}
.ge-row>span:first-child{font-size:20px}
.ge-tx{display:flex;flex-direction:column;min-width:0}
.ge-tx b{font-size:14px}
.ge-tx small{font-size:11px;color:var(--muted);font-weight:700}
.ge-n{font-size:13px;color:#5adcff;white-space:nowrap}
.ghist .gh-row{grid-template-columns:1fr auto;font-size:14px}
.ghist b.up{color:#5adcff}
.ghist b.down{color:var(--muted)}
.gskip{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
border-color:rgba(90,220,255,.55)}
.gk-tx b{display:block;font-size:16px}
.gk-tx small{display:block;font-size:12px;color:var(--muted);font-weight:700}
.gskip button{width:auto;min-height:0;padding:10px 16px;font-size:15px;font-weight:900;border-radius:999px;
background:linear-gradient(135deg,#5adcff,#b46cff);color:#13072b;border:0;box-shadow:none}
.gskip button:disabled{background:rgba(255,255,255,.08);color:var(--muted);opacity:1}
.gt-tier.gem:not(.got):not(.next){border-color:rgba(90,220,255,.5)}
.gt-tier .gt-st{color:var(--muted)}
.gt-tier.got .gt-st{color:var(--good)}
.ghow h2{margin:0 0 8px;font-size:19px}
.ghow ul{margin:0 0 12px;padding-left:18px}
.ghow li{margin:0 0 8px;font-size:14px;line-height:1.45}
.gpill.gems{background:rgba(90,220,255,.18);border-color:#5adcff}
.gevent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;
margin:0 0 14px;border-radius:16px;border:1px solid #ff8a3c;
background:linear-gradient(135deg,rgba(255,80,60,.3),rgba(255,180,60,.2));animation:gpulse 2s ease-in-out infinite}
@keyframes gpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,60,.0)}50%{box-shadow:0 0 22px 2px rgba(255,138,60,.45)}}
.ge-fire{font-size:30px}
.ge-tx b{display:block;font-size:15px;font-weight:900;letter-spacing:.04em}
.ge-tx small{display:block;font-size:12px;font-weight:700;color:#ffd7c2}
.glogin .gl-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px}
.glogin .gl-head b{font-size:12px;letter-spacing:.1em;color:#5ee9a4}
.glogin .gl-head small{font-size:11px;color:var(--muted);font-weight:700}
.glogin.ready{border-color:rgba(94,233,164,.7);background:linear-gradient(135deg,rgba(94,233,164,.14),rgba(90,220,255,.08))}
.gl-days{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.gl-d{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;border-radius:12px;
border:1px solid var(--line);background:rgba(255,255,255,.04)}
.gl-d small{font-size:10px;font-weight:800;color:var(--muted);white-space:nowrap}
.gl-d i{font-style:normal;font-size:20px;line-height:1.2}
.gl-d.got{border-color:rgba(94,233,164,.5);background:rgba(94,233,164,.1)}
.gl-d.got i{color:var(--good);font-weight:900}
.gl-d.today{border-color:#5ee9a4;background:rgba(94,233,164,.2);animation:gpulse 1.6s ease-in-out infinite}
.gl-d.big:not(.got){border-color:rgba(255,200,60,.6)}
.gl-claim{background:linear-gradient(135deg,#5ee9a4,#5adcff);color:#13072b;font-weight:900;border:0}
.gl-foot{margin:8px 0 0;font-size:12px;color:var(--muted);font-weight:700}
.gl-foot.warn{color:#ffb03c}
.gs-goldchip{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:900;
background:linear-gradient(135deg,#ffd166,#ff9f1c);color:#3a2200}
.ggold{border:2px solid #ffc83c;background:linear-gradient(135deg,rgba(255,200,60,.22),rgba(255,120,30,.12))}
.gg-head{display:flex;gap:12px;align-items:center}
.gg-crown{font-size:38px;filter:drop-shadow(0 0 10px rgba(255,200,60,.6))}
.gg-head b{display:block;font-size:18px;letter-spacing:.08em;color:#ffd166}
.gg-head small{display:block;font-size:12px;color:var(--ink);font-weight:700;opacity:.85}
.gg-now{margin:10px 0 0;font-size:13px}
.ggold button{margin-top:10px;background:linear-gradient(135deg,#ffd166,#ff9f1c);color:#3a2200;font-weight:900;border:0}
.ggold button:disabled{background:rgba(255,255,255,.08);color:var(--muted);opacity:1}
.gg-need{margin:6px 0 0;font-size:12px;color:var(--muted);font-weight:700;text-align:center}
.gprestige{border-color:rgba(255,200,60,.6)}
.gprestige b{display:block;font-size:18px}
.gprestige small{display:block;font-size:12px;color:var(--muted);font-weight:700;margin:4px 0}
.gboardlink{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
margin:0 0 14px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--ink);
text-decoration:none;font-weight:900}
.gboardlink span{font-size:12px;color:var(--muted);font-weight:700}
.gt-gold{display:block;width:100%;margin-top:4px;padding:3px 2px;border-radius:8px;font-size:10px;font-weight:800;
background:rgba(255,200,60,.08);color:rgba(255,209,102,.6);border:1px dashed rgba(255,200,60,.35)}
.gt-gold.on{background:rgba(255,200,60,.18);color:#ffd166;border-style:solid}
.goldrow{border-color:rgba(255,200,60,.6);background:rgba(255,200,60,.08)}
.gpboard .lrow.me{border-color:var(--pink)}
.lrow.bot{opacity:.85;border-style:dashed}
[data-game].lucky canvas,[data-game].lucky .g-stage{box-shadow:0 0 0 2px #3ddc84,0 0 24px rgba(61,220,132,.35)}
.lrow .luck{font-size:13px}
.ptool{padding:10px 0;border-top:1px solid var(--line)}
.ptool:first-child{border-top:0}
.ptool button{margin-top:8px}
.ptool.sec button{background:transparent;border:1px solid var(--line);color:var(--ink)}
.repstats .rs-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center}
.repstats .rs-kpis b{display:block;font-size:30px;font-weight:900}
.repstats .rs-kpis span{font-size:12px;color:var(--muted);font-weight:700}
.repjoin .rj-row{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;
padding:10px 0;border-top:1px solid var(--line)}
.repjoin .rj-row span{grid-row:span 2;font-size:26px}
.repjoin .rj-row b{font-size:16px}
.repjoin .rj-row small{font-size:12px;color:var(--muted);font-weight:700}
.wa-to{margin:0 0 12px}
.wa-to-row{display:flex;gap:8px}
.wa-to-row input{flex:1;margin:0}
.wa-to-row button{width:auto;margin:0;padding:0 18px}

/* A leaderboard row: position, name, score. The score column lines up. */
.lrow{display:grid;grid-template-columns:2.2em 1fr auto;gap:10px;
align-items:center;padding:11px 14px;margin:0 0 6px;border-radius:12px;
background:rgba(0,0,0,.25);border:1px solid var(--line)}
.lrow .pos{font-weight:900;color:var(--muted);font-variant-numeric:tabular-nums}
.lrow .sc{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
.lrow.me{border-color:var(--pink);background:rgba(255,45,155,.10)}
/* Name flair, bought with gems: a coloured name and a title. */
.fl-pink{color:#ff5cb0;text-shadow:0 0 12px rgba(255,92,176,.45)}
.fl-cyan{color:#6fe3ff;text-shadow:0 0 12px rgba(111,227,255,.4)}
.fl-green{color:#7dff9a;text-shadow:0 0 12px rgba(125,255,154,.35)}
.fl-gold{color:#ffd25a;text-shadow:0 0 12px rgba(255,210,90,.45)}
.fl-rainbow{background:linear-gradient(90deg,#ff5c8a,#ffb84d,#fff35c,#6dff8f,#5cc8ff,#b57bff,#ff5c8a);
background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:flrain 4s linear infinite;font-weight:900}
@keyframes flrain{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.fl-rainbow{animation:none}}
small.ftitle{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;
text-transform:uppercase;padding:2px 7px;border-radius:999px;vertical-align:2px;
color:#ffe9a8;background:rgba(255,200,60,.14);border:1px solid rgba(255,200,60,.4);
white-space:nowrap}
.lrow.top .pos{color:var(--gold)}
.gtabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.gtabs a{flex:1 1 0;min-width:0;text-align:center;padding:10px 8px;
border-radius:12px;border:2px solid var(--line);color:var(--ink);
text-decoration:none;font-weight:800;font-size:15px}
.gtabs a.on{border-color:var(--pink);background:rgba(255,45,155,.14)}
.gtabs.games a{flex:1 1 auto;white-space:nowrap;font-size:14px;display:inline-flex;
align-items:center;justify-content:center;gap:6px;padding:9px 10px}
.gtabs.games a svg{width:16px;height:16px;flex:none}
@media (max-width:360px){.gtabs.games{gap:6px}.gtabs.games a{font-size:12.5px;padding:8px 6px;gap:4px}
.gtabs.games a svg{width:14px;height:14px}}
/* ---- Icons and type ------------------------------------------------------
   Outline icons inherit the colour and size of the text they sit in. */
.i{width:1.15em;height:1.15em;flex:none;vertical-align:-.22em}
button .i,.btn .i{width:20px;height:20px;margin-right:8px;vertical-align:-4px}
/* Buttons in normal case everywhere: calmer, and quicker to read than
   capitals. */
button,.btn{text-transform:none;letter-spacing:-.01em;font-size:18px;font-weight:700}
@font-face{font-family:Inter;src:url('/f/inter.woff2') format('woff2');
font-weight:100 900;font-style:normal;font-display:swap}
/* The admin app: Inter, one type scale, quieter labels. */
body.adm,.adm input,.adm textarea,.adm select,.adm button{
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body.adm{font-size:16px;line-height:1.5;letter-spacing:-.006em;
font-feature-settings:"cv11"}
.adm h1{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.12}
.adm h2{font-weight:700;letter-spacing:-.02em}
.adm .brand{font-size:12px;font-weight:700;letter-spacing:.12em;text-shadow:none;
text-align:left;margin:0 0 8px}
.adm .card{border-radius:20px;padding:20px;border-color:rgba(255,255,255,.08);
box-shadow:0 8px 22px rgba(0,0,0,.28)}
.adm label{font-size:12px;letter-spacing:.09em}
.adm .sec-h{display:flex;align-items:center;gap:8px;margin:26px 4px 10px;
font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted)}
.adm .sec-h .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);
box-shadow:0 0 0 4px rgba(255,45,155,.18)}
.adm .sec-h .n{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:0}
.adm button,.adm .btn{font-size:17px}
.adm .btn.secondary{border:1px solid rgba(255,255,255,.18)}
.adm .msg{font-weight:600;font-size:15px}
.adm .msg .i{margin-right:6px}
.adm nav.tabs{background:rgba(18,8,34,.96)}
.adm nav.tabs a{font-weight:600;font-size:11px;letter-spacing:0;gap:4px}
.adm nav.tabs a span{font-size:22px}
.adm nav.tabs a .i{stroke-width:1.9}
/* Order rows: name, item, then one muted line with a small icon. */
.adm .ord .who{font-weight:700;font-size:16px;letter-spacing:-.01em}
.adm .ord .what{font-size:15px;color:#e6dcf7}
.adm .ord .meta{font-size:13px;line-height:1.45}
.adm .ord .meta .i{width:14px;height:14px;vertical-align:-2px;margin-right:3px}
.adm .ord .money small .i{width:12px;height:12px;vertical-align:-1px;margin-left:3px}
.adm button.chip{display:inline-flex;width:auto;min-height:0;margin:0;padding:10px 15px;
font-size:14px;font-weight:600;color:var(--ink);background:var(--card);
border:1px solid var(--line);box-shadow:none}
.adm button.chip:active{background:var(--pink);border-color:var(--pink)}
.adm .next a,.adm .msg a{color:var(--gold);font-weight:700}
.off .i{width:15px;height:15px;vertical-align:-2px}
.adm .ord .money{font-size:18px;letter-spacing:-.02em}
.adm .ord .need{font-size:12.5px;font-weight:700;padding:6px 10px;border-radius:99px;
background:rgba(255,45,155,.13);line-height:1}
.adm .pill{font-weight:700;letter-spacing:0;padding:4px 10px}
.adm .pill .i{width:13px;height:13px;margin-right:4px;vertical-align:-2px}
/* Tiles: a pink outline icon and a label. */
.adm .tiles a{font-weight:600;font-size:15px}
.adm .tiles a span{font-size:20px;color:var(--pink)}
.adm .tiles a b{margin-left:auto;font-size:12px;font-weight:700;color:#fff;
background:var(--pink);border-radius:99px;padding:2px 8px;font-variant-numeric:tabular-nums}
.adm .facts{gap:9px}
.adm .facts span{color:var(--muted);font-size:17px;line-height:1.3}
.adm .foot{font-size:13px;color:var(--muted);margin:22px 4px 0;line-height:1.5}
.adm .foot .i{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.adm .head-stats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.adm .head-stats span{display:inline-flex;align-items:center;gap:6px;font-size:13px;
font-weight:600;color:var(--muted);background:rgba(255,255,255,.06);
border-radius:99px;padding:6px 11px}
.adm .head-stats .i{width:14px;height:14px}
.adm .empty{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;
row-gap:2px;align-items:center;padding:16px;border-radius:18px;
border:1px dashed rgba(255,255,255,.14);color:var(--muted);font-size:15px;margin:0 0 8px}
.adm .empty>.i{color:var(--good);grid-row:1/span 2;align-self:center}
.adm .empty>b{grid-column:2;color:var(--ink);font-size:15px}
.adm .empty>span{grid-column:2;font-size:14px;line-height:1.45}
/* Customer page: round quick buttons, three figures, the fold. */
.adm .qbs{display:flex;gap:10px;margin:16px 0 0}
.adm .qb{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:12px 6px;border-radius:16px;background:rgba(255,255,255,.06);color:var(--ink);
text-decoration:none;font-size:13px;font-weight:600}
.adm .qb span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,45,155,.16);color:var(--pink);font-size:19px}
.adm .qb.wa span{background:rgba(37,211,102,.16);color:#4ee07f}
.adm .qb:active{transform:scale(.97)}
.adm .kpis{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;
border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden}
.adm .kpis div{padding:12px 8px;text-align:center;min-width:0}
.adm .kpis div+div{border-left:1px solid rgba(255,255,255,.08)}
.adm .kpis b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm .kpis span{font-size:12px;color:var(--muted);font-weight:600}
.adm .card>.msg:last-child{margin-bottom:0}
.adm .card>.msg{margin-top:14px}
.adm .chathead h1{font-size:24px}
.adm details.fold{margin:22px 0 0}
.adm details.fold>summary{list-style:none;display:flex;align-items:center;gap:12px;
padding:15px 16px;border-radius:18px;background:var(--card);
border:1px solid rgba(255,255,255,.08);cursor:pointer;font-weight:600;font-size:16px;
flex-wrap:wrap}
.adm details.fold>summary::-webkit-details-marker{display:none}
.adm details.fold>summary>.i:first-child{color:var(--muted)}
.adm details.fold>summary span{flex:1 0 100%;order:3;font-size:13px;color:var(--muted);
font-weight:500;margin:-6px 0 0 32px}
.adm details.fold .fold-go{margin-left:auto;color:var(--muted);transition:transform .15s}
.adm details.fold[open] .fold-go{transform:rotate(180deg)}
.adm details.fold[open]>summary{margin-bottom:12px}
.adm .duo button{margin:0}
/* Segmented day switcher. */
.adm .seg{display:flex;gap:4px;margin:16px 0 0;padding:4px;border-radius:14px;
background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.adm .seg a{flex:1;text-align:center;padding:9px 4px;border-radius:10px;font-size:14px;
font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap}
.adm .seg a.on{background:var(--pink);color:#fff}
@media (max-width:370px){.adm .seg a{font-size:12.5px;padding:9px 2px;letter-spacing:-.01em}
.adm .seg{gap:2px}.duo .btn,.duo button{font-size:14px;padding-left:8px;padding-right:8px}
.duo .btn .i,.duo button .i{display:none}}
/* The collections timeline: time, a line with dots, a card. */
.adm .tline{position:relative}
.adm .tl{display:grid;grid-template-columns:52px 18px minmax(0,1fr);align-items:stretch;
color:var(--ink);text-decoration:none;position:relative}
.adm .tl-time{padding:16px 0 0;text-align:right;font-weight:700;font-size:16px;
letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.adm .tl-time small{display:block;font-size:11px;font-weight:600;color:var(--muted);
letter-spacing:.04em}
.adm .tl-dot{position:relative}
.adm .tl-dot::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;
background:rgba(255,255,255,.1)}
.adm .tl:first-child .tl-dot::before{top:22px}
.adm .tl:last-child .tl-dot::before{bottom:auto;height:22px}
.adm .tl:only-child .tl-dot::before{display:none}
.adm .tl-dot::after{content:"";position:absolute;left:3px;top:18px;width:12px;height:12px;
border-radius:50%;background:#1a0b2e;border:2px solid rgba(255,255,255,.35)}
.adm .tl.nxt .tl-dot::after{background:var(--pink);border-color:var(--pink);
box-shadow:0 0 0 4px rgba(255,45,155,.2)}
.adm .tl.out .tl-dot::after{background:var(--gold);border-color:var(--gold);
box-shadow:0 0 0 4px rgba(255,200,63,.2)}
.adm .tl.done .tl-dot::after{background:var(--good);border-color:var(--good)}
.adm .tl-card{display:flex;flex-direction:column;gap:2px;margin:0 0 10px 6px;
padding:12px 14px;border-radius:16px;background:var(--card);
border:1px solid rgba(255,255,255,.08);min-width:0;position:relative}
.adm .tl.nxt .tl-card{border-color:rgba(255,45,155,.6);box-shadow:0 0 0 1px rgba(255,45,155,.25)}
.adm .tl.out .tl-card{border-color:rgba(255,200,63,.6);background:rgba(255,200,63,.08)}
.adm .tl.done .tl-card{opacity:.55}
.adm .tl:active .tl-card{transform:scale(.99)}
.adm .tl-top{display:flex;align-items:baseline;gap:8px}
.adm .tl-top b{font-size:16px;font-weight:700;flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.adm .tl-top .money{font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.adm .tl-sub{font-size:14px;color:#d9cdef;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.adm .tl-st{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.adm .tl-st .i{width:14px;height:14px;vertical-align:-2px;margin-right:5px}
.adm .tl-st.bad{color:var(--bad);font-weight:600}
.adm .tl-st.ok{color:var(--good);font-weight:600}
.adm .tl-st.hot{color:var(--gold);font-weight:600}
.adm .tl-next{position:absolute;top:-8px;right:12px;font-size:11px;font-weight:700;
background:var(--pink);color:#fff;padding:2px 8px;border-radius:99px;letter-spacing:.02em}
/* Saved pickup spots: one tap to send. */
.adm .spots{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.adm .spot{display:flex;align-items:center;gap:8px}
.adm .spot form{margin:0}
.adm .spot form:first-child{flex:1;min-width:0}
.adm .spot button.go{width:100%;min-height:0;margin:0;padding:13px 14px;text-align:left;
font-size:15px;font-weight:600;background:rgba(255,45,155,.12);color:var(--ink);
border:1px solid rgba(255,45,155,.35);box-shadow:none;border-radius:14px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .spot button.go .i{color:var(--pink)}
.adm .spot button.rm{width:44px;min-height:44px;margin:0;padding:0;border-radius:12px;
background:transparent;border:1px solid rgba(255,255,255,.12);box-shadow:none;
color:var(--muted)}
.adm .spot button.rm .i{margin:0}
.adm .check{display:flex;align-items:center;gap:10px;margin:-4px 0 14px;font-size:14px;
color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.adm .check input{width:20px;height:20px;margin:0;accent-color:var(--pink)}
/* Messages. */
.adm .seg a b{margin-left:6px;font-size:11px;background:rgba(255,255,255,.22);
border-radius:99px;padding:1px 7px}
.adm .chatbar h1{font-size:18px}
.adm .chatbar .sub{display:flex;gap:12px;flex-wrap:wrap}
.adm .chatbar .sub a,.adm .chatbar .sub span{display:inline-flex;align-items:center;gap:4px;
color:var(--muted);text-decoration:none;font-weight:600;font-size:13px}
.adm .chatbar .sub .i{width:14px;height:14px}
.adm .chatbar .sub a{border:0;text-decoration:none;padding:0}
.adm .chatback .i{width:20px;height:20px}
.adm .chatbar .done{font-size:13px;font-weight:700;display:inline-flex;align-items:center}
.adm .chatbar .done .i{width:15px;height:15px;margin-right:5px;vertical-align:0}
.adm .chatbar .sub a,.adm .chatbar .sub span{white-space:nowrap;word-break:normal;
overflow-wrap:normal}
@media (max-width:360px){
.adm .chatbar .sub{gap:10px;flex-wrap:nowrap}
.adm .chatbar .done{font-size:0;padding:9px}
.adm .chatbar .done .i{margin:0;width:18px;height:18px}}
.adm .chat-order{margin:0 0 6px}
.adm .chat-order .ord{margin:0}
.adm .quickrow button{font-size:14px;font-weight:600}
.adm .qedit{flex:none;display:inline-flex;align-items:center;gap:5px;padding:9px 14px;
border-radius:99px;border:1px dashed rgba(255,255,255,.25);color:var(--muted);
text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.adm .qedit .i{width:14px;height:14px}
.composer button .i{margin:0;width:20px;height:20px}
.adm .pill.ord .i{width:12px;height:12px}
.adm button.rmx{width:40px;min-height:40px;margin:0;padding:0;border-radius:12px;
background:transparent;border:1px solid rgba(255,255,255,.12);box-shadow:none;color:var(--muted)}
.adm button.rmx .i{margin:0;width:18px;height:18px}
/* A small "show me" fold inside a card. */
.adm details.peek{margin:14px 0 0}
.adm details.peek>summary{list-style:none;display:flex;align-items:center;gap:8px;
cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;padding:6px 2px}
.adm details.peek>summary::-webkit-details-marker{display:none}
.adm details.peek>summary .fold-go{margin-left:auto;transition:transform .15s}
.adm details.peek[open]>summary .fold-go{transform:rotate(180deg)}
.adm details.peek .wa-msg{margin:8px 0 0}
.adm .pick .opt span .i{width:17px;height:17px;margin-right:6px;vertical-align:-3px}
.adm .duo input{margin-bottom:16px}
.adm .head-stats .ok{color:var(--good)}
/* Reviews: slim rows, small buttons. */
.adm .rvs{background:var(--card);border:1px solid rgba(255,255,255,.08);
border-radius:18px;overflow:hidden}
.adm .rv{padding:14px 16px;position:relative}
.adm .rv+.rv{border-top:1px solid rgba(255,255,255,.07)}
.adm .rv.new{background:rgba(255,45,155,.05)}
.adm .rv-stars{display:flex;gap:2px;color:rgba(255,255,255,.2)}
.adm .rv-stars .i{width:16px;height:16px}
.adm .rv-stars .i.on{color:var(--gold);fill:var(--gold)}
.adm .rv-text{margin:6px 0 4px;font-size:15px;line-height:1.45}
.adm .rv-who{margin:0;font-size:13px;color:var(--muted)}
.adm .rv-who a{color:var(--muted)}
.adm .rv-acts{display:flex;align-items:center;gap:8px;margin-top:10px}
.adm .rv-acts form{margin:0}
.adm button.sm{display:inline-flex;align-items:center;width:auto;min-height:0;margin:0;
padding:8px 12px;font-size:13px;font-weight:600;border-radius:10px;box-shadow:none;
background:rgba(255,255,255,.07);color:var(--ink);border:1px solid rgba(255,255,255,.12)}
.adm button.sm .i{width:15px;height:15px;margin-right:6px;vertical-align:0}
.adm button.sm.go{background:var(--pink);border-color:var(--pink);color:#fff}
.adm button.sm.bad{background:rgba(255,107,107,.16);border-color:rgba(255,107,107,.4);
color:var(--bad)}
.adm details.sure{margin-left:auto}
.adm details.sure>summary{list-style:none;cursor:pointer;width:36px;height:36px;
display:grid;place-items:center;border-radius:10px;color:var(--muted);
border:1px solid rgba(255,255,255,.12)}
.adm details.sure>summary::-webkit-details-marker{display:none}
.adm details.sure[open]>summary{color:var(--bad);border-color:rgba(255,107,107,.4)}
.adm details.sure[open] form{position:absolute;right:62px;bottom:14px;margin:0}
.adm h2.big{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.adm .small-print{font-size:14px;color:var(--muted);line-height:1.5;padding:4px 2px 0}
.adm .small-print p{margin:0 0 10px}
.adm .glist .av{width:38px;height:38px;font-size:14px;flex:none}
.adm .glist.apps .gl-row{flex-wrap:wrap}
.adm .gl-acts{flex:1 0 100%;display:flex;gap:8px;padding-left:51px}
.adm .gl-acts form{margin:0}
.adm button.sm{white-space:nowrap}
@media (max-width:360px){.adm .gl-acts{padding-left:0}}
.adm .pick .opt{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}
.adm .duo .btn,.adm .duo button{margin:0;width:100%}
.adm .kpis.two{grid-template-columns:1fr 1fr;margin:12px 0 14px}
/* Stock: one slim row per item, tap to count. */
.adm .slist{background:var(--card);border:1px solid rgba(255,255,255,.08);
border-radius:18px;overflow:hidden}
.adm details.srow+details.srow{border-top:1px solid rgba(255,255,255,.07)}
.adm details.srow>summary{list-style:none;display:flex;align-items:center;gap:10px;
padding:14px 16px;cursor:pointer}
.adm details.srow>summary::-webkit-details-marker{display:none}
.adm details.srow[open]>summary{background:rgba(255,255,255,.04)}
.adm .st-name{flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.adm .st-n{font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.adm .st-n.bad{color:var(--bad)}
.adm .st-n.warn{color:var(--gold)}
.adm .st-go{display:inline-flex;align-items:center;gap:2px;font-size:13px;
font-weight:600;color:var(--muted)}
.adm .st-go .i{width:15px;height:15px}
.adm details.srow[open] .fold-go{transform:rotate(180deg)}
.adm .ldot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--bad)}
.adm details.srow form{padding:4px 16px 16px;margin:0}
.adm details.srow input{font-size:17px;padding:12px 14px}
/* Today's run: numbered stops, the pin fix inside the stop. */
.adm .stop-top{display:flex;gap:12px;align-items:flex-start}
.adm .stop-top h2{margin:0 0 2px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.adm .stop-top p{margin:0;font-size:13px}
.adm .stop-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;
place-items:center;background:var(--pink);color:#fff;font-weight:800;font-size:15px}
.adm .stop-n.q{background:rgba(255,107,107,.18);color:var(--bad)}
.adm .stop-acts{display:flex;gap:8px;margin:14px 0 12px;flex-wrap:wrap}
.adm a.sm{display:inline-flex;align-items:center;padding:8px 12px;font-size:13px;
font-weight:600;border-radius:10px;background:rgba(255,255,255,.07);color:var(--ink);
border:1px solid rgba(255,255,255,.12);text-decoration:none}
.adm a.sm .i{width:15px;height:15px;margin-right:6px}
.adm a.sm.go{background:var(--pink);border-color:var(--pink);color:#fff}
.adm .pinrq-num{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:15px;
font-variant-numeric:tabular-nums}
.adm .pinrq-num .i{width:15px;height:15px;color:var(--muted)}
.adm .pinrq-chk{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:13px;
font-weight:600}
.adm .pinrq-chk .i{width:15px;height:15px}
.adm .pinrq-chk.ok{color:var(--good,#3ddc84)}
.adm .pinrq-chk.warn{color:var(--gold)}
.adm .pinrq-chk.bad{color:var(--bad)}
.adm .done-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;
margin:6px 0 12px;background:rgba(255,45,155,.14);color:var(--pink)}
.adm .done-ic .i{width:28px;height:28px}
.adm .i.up{transform:rotate(180deg)}
.adm .pinfix{margin:14px 0 0;padding:12px;border-radius:14px;
background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.25)}
.adm .pinfix p{margin:0 0 10px;font-size:13px;color:#ffb3b3}
.adm .pinfix p .i{width:14px;height:14px;margin-right:5px;vertical-align:-2px}
.adm .pinfix .btn{min-height:44px;padding:10px;font-size:15px}
.adm .pinfix .searchbar{margin-top:10px}
.adm .gl-big{flex:none;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.adm .gl-h.wrap{white-space:normal;color:#d9cdef}
.adm .money-in.rate{width:110px;flex:none;margin:0}
.adm .money-in.rate input{margin:0;font-size:16px;padding:10px 10px 10px 30px}
.adm .money-in.rate span{top:50%;transform:translateY(-50%);left:12px;font-size:16px}
.adm .glist form.gl-row{margin:0}
.adm .glist .gl-row>.av{width:38px;height:38px;font-size:14px}
/* Money: statements you can add up by eye, and the takings chart. */
.adm h1.hero{font-size:40px;letter-spacing:-.04em;margin:2px 0 4px}
.adm .stmt{padding:6px 18px 12px}
.adm .ln{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
padding:11px 0;font-size:15px;border-bottom:1px solid rgba(255,255,255,.06)}
.adm .ln b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.adm .ln small{color:var(--muted);font-size:12px;margin-left:4px}
.adm .ln.sub{color:var(--muted)}
.adm .ln.total{border-bottom:0;border-top:1px solid rgba(255,255,255,.18);margin-top:4px;
font-size:17px;font-weight:700}
.adm .ln.total b{font-size:19px}
.adm .stmt .note{margin:10px 0 0;font-size:13px}
.adm .chart svg{display:block;width:100%;height:auto;overflow:visible}
.adm .chart-total{margin:0 0 10px;font-size:22px;font-weight:800;letter-spacing:-.02em;
font-variant-numeric:tabular-nums}
.adm .chart path{fill:rgba(255,45,155,.42)}
.adm .chart g.now path{fill:var(--pink)}
.adm .chart g:hover path{fill:#ff6cb8}
.adm .chart .hit{fill:transparent}
.adm .chart .zero{fill:rgba(255,255,255,.18)}
.adm .chart .base{stroke:rgba(255,255,255,.14);stroke-width:1}
.adm .chart text{font-family:Inter,sans-serif;fill:var(--muted);font-size:10px}
.adm .chart text.lbl{fill:var(--ink);font-weight:700;font-size:11px}
/* Earners: rank, name, a share bar, what it made. */
.adm .er{display:flex;align-items:center;gap:12px;padding:12px 14px}
.adm .er+.er{border-top:1px solid rgba(255,255,255,.07)}
.adm .er-n{flex:none;width:24px;text-align:center;font-weight:800;color:var(--muted);
font-variant-numeric:tabular-nums}
.adm .er-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.adm .er-mid b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.adm .er-mid span{font-size:12.5px;color:var(--muted)}
.adm .er-mid span.warn{color:var(--gold)}
.adm .er-bar{display:block;height:5px;border-radius:99px;background:rgba(255,255,255,.07);
margin-top:6px;overflow:hidden}
.adm .er-bar i{display:block;height:100%;border-radius:99px;background:var(--pink)}
.adm .er-r{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.adm .er-r b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
/* Figures: one card per period. */
.adm .fig .fig-top{display:flex;align-items:center;gap:10px;margin:2px 0 4px}
.adm .fig .fig-top b{font-size:30px;font-weight:800;letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.adm .fig p{margin:0 0 4px;font-size:15px}
.adm .fig p.muted{font-size:13px;margin:6px 0 0}
/* Figures you can tap. */
.adm a.card,.adm a.fhero{display:block;color:var(--ink);text-decoration:none}
.adm a.fhero:active,.adm a.ftile:active,.adm a.er:active{background:rgba(255,255,255,.05)}
.adm .fhint{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;
font-weight:700;color:var(--pink)}
.adm .fhint .i{width:16px;height:16px}
.adm .fchips{padding:0 0 8px;margin:0 -4px}
.adm .fchips .chip{padding:8px 13px;font-size:13.5px}
.adm .ftiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 6px}
.adm a.ftile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
padding:13px 14px;min-height:98px;border-radius:18px;background:var(--card);
border:1px solid rgba(255,255,255,.08);color:var(--ink);text-decoration:none;
box-shadow:0 8px 22px rgba(0,0,0,.22)}
.adm .ftile .ft-l{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--muted);padding-right:18px}
.adm .ftile .ft-n{font-size:23px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm .ftile .ft-s{font-size:12.5px;color:var(--muted);max-width:100%;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.adm .ftile .chg{margin:2px 0 0}
.adm .ftile .gl-go{position:absolute;right:10px;top:12px}
.adm .fg-r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
font-variant-numeric:tabular-nums}
.adm .fg-r .chg{margin:0}
.adm .fwrap .gl-h{white-space:normal}
.adm a.er{color:var(--ink);text-decoration:none}
.adm a.er .gl-go{flex:none;width:18px;height:18px;color:rgba(255,255,255,.3)}
.adm .er.peak .er-bar i{background:var(--gold)}
.adm a.fday{display:flex;justify-content:space-between;gap:10px;text-decoration:none;color:var(--muted)}
.adm .chart a{cursor:pointer}
.adm a.ln.go{color:inherit;text-decoration:none}
.adm a.ln.go b{display:inline-flex;align-items:center;gap:4px}
.adm .ln-go{width:15px;height:15px;color:rgba(255,255,255,.35)}
.adm a.hs-link{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.adm a.hs-link .i:last-child{width:14px;height:14px;opacity:.5}
.adm .chart a:active path{opacity:.7}
.statrow a{display:flex;flex-direction:column;background:rgba(255,255,255,.05);border-radius:12px;
padding:10px 12px;color:var(--ink);text-decoration:none}
.adm .gl-row.off .gl-t{color:var(--muted);text-decoration:line-through}
.adm .rv.dim{opacity:.6}
.adm .dl-top{display:flex;align-items:center;gap:10px}
.adm .dl-top b{flex:1;min-width:0;font-size:16px}
.adm .rv-acts{flex-wrap:wrap}
.adm .dl-top .av{width:36px;height:36px;font-size:13px;flex:none}
.adm .pick.three .opt span{padding-left:4px;padding-right:4px;gap:5px;white-space:nowrap;font-size:14px}
.adm .pick.three .opt span .i{width:16px;height:16px}
/* Plain links inside admin pages: never the browser's default blue. */
.adm main a:not([class]){color:var(--ink);text-decoration-color:rgba(255,255,255,.3)}
/* ---- Customer side ---------------------------------------------------- */
/* The tab bar: five across, Order raised in the middle. */
nav.tabs a.mid{position:relative;color:var(--ink)}
nav.tabs a.mid span{width:46px;height:46px;margin:-22px 0 2px;border-radius:50%;
display:grid;place-items:center;background:var(--pink);color:#fff;
box-shadow:0 6px 18px rgba(255,45,155,.45),0 0 0 4px #140a26}
nav.tabs a.mid span .i{width:24px;height:24px;stroke-width:2.4}
nav.tabs a.mid.on{color:var(--pink)}
/* The one-line "turn on updates" banner. */
.nbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;
border-radius:16px;background:rgba(255,200,63,.10);border:1px solid rgba(255,200,63,.3)}
.nbar[hidden]{display:none !important}
.nbar form{margin:0;flex:none}
.nbar-ic{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
background:rgba(255,200,63,.18);color:var(--gold);font-size:18px}
.nbar-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nbar-tx b{font-size:14.5px;font-weight:700}
.nbar-tx span{font-size:12.5px;color:var(--muted);line-height:1.35}
.nbar button.sm{flex:none}
/* Home. */
.adm .hero+.card.hello{margin-top:-58px}
.adm .hello .head-stats{margin-top:10px}
.adm .btn.cta{font-size:18px;min-height:58px}
.adm a.card.live{display:block;color:var(--ink);text-decoration:none;margin-top:16px;
border-color:rgba(255,45,155,.35)}
.adm a.card.live .dl-top b{font-size:17px}
.adm a.card.live .next{margin:12px 0 0}
.adm .sec-h .sec-more,.adm a.sec-more{margin-left:auto;display:inline-flex;align-items:center;
gap:2px;color:var(--pink);font-size:13px;font-weight:600;text-transform:none;
letter-spacing:0;text-decoration:none}
.adm .sec-more .i{width:15px;height:15px}
.adm .dstrip{display:flex;gap:10px;overflow-x:auto;margin:0 -16px 6px;padding:0 16px 6px;
scroll-snap-type:x mandatory;scrollbar-width:none}
.adm .dstrip::-webkit-scrollbar{display:none}
.adm .dcard{flex:0 0 78%;max-width:300px;scroll-snap-align:start;display:flex;
flex-direction:column;gap:4px;padding:14px 16px;border-radius:18px;text-decoration:none;
color:var(--ink);background:linear-gradient(135deg,rgba(255,45,155,.22),rgba(123,47,247,.18));
border:1px solid rgba(255,45,155,.3)}
.adm .dcard b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.adm .dcard span:last-child{font-size:13px;color:#e6dcf7;line-height:1.4}
.adm .dcard-ic{color:var(--gold);font-size:18px}
.adm .dcard.has-pic{padding-top:0;overflow:hidden}
.adm .dcard-pic{display:block;height:118px;margin:0 -16px 8px;background-size:cover;
background-position:center;border-bottom:1px solid rgba(255,45,155,.25)}
/* "Hot right now": small cards you swipe along; one tap starts the order. */
.hotstrip{display:flex;gap:10px;overflow-x:auto;margin:0 -16px 8px;padding:2px 16px 8px;
scroll-snap-type:x mandatory;scrollbar-width:none}
.hotstrip::-webkit-scrollbar{display:none}
.hotcard{flex:0 0 46%;max-width:200px;scroll-snap-align:start;display:flex;flex-direction:column;
gap:6px;padding:12px;border-radius:16px;text-decoration:none;color:var(--ink);
background:var(--card);border:1px solid var(--line);transition:transform .12s ease}
.hotcard:active{transform:scale(.97)}
.hotcard .urg{margin:0}
.hotcard.has-pic{padding-top:0;overflow:hidden}
.hc-pic{display:block;height:104px;margin:0 -12px 2px;background-size:cover;background-position:center;
background-color:rgba(0,0,0,.25)}
/* Menu item pictures: a rounded square beside the name. */
.mthumb{flex:none;width:52px;height:52px;border-radius:12px;object-fit:cover;
background:rgba(255,255,255,.06);border:1px solid var(--line)}
.mi .mthumb{margin-right:2px}
.gl-row.has-photo{gap:12px}
.mphoto{flex:none;position:relative;margin:0}
.mph-pick{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
border:1.5px dashed rgba(255,255,255,.28);color:var(--muted);overflow:hidden;background:rgba(0,0,0,.2)}
.mph-pick .i{width:20px;height:20px}
.mph-img{width:48px;height:48px;object-fit:cover;display:block}
.mphoto:has(.mph-img) .mph-pick{border-style:solid;border-color:var(--line)}
.mph-x{position:absolute;top:-6px;right:-6px;width:20px;height:20px;min-height:0;padding:0;margin:0;
border-radius:50%;display:grid;place-items:center;background:#3a1a63;border:1px solid var(--line);box-shadow:none}
.mph-x .i{width:12px;height:12px}
.mphoto.busy .mph-pick{opacity:.5}
.hotcard b{font-size:14.5px;line-height:1.3;flex:1;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;overflow:hidden}
.hc-foot{display:flex;align-items:center;justify-content:space-between}
.hc-pr{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.hc-add{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
background:var(--pink);color:#fff}
.hc-add .i{width:16px;height:16px}
.urg.pop{color:#ffe9a8;background:rgba(255,200,60,.12);border:1px solid rgba(255,200,60,.4)}
.adm .home-sec{margin:16px 0 0}
.adm .card.invite .duo .btn{margin:0}
.adm a.card.invite.join{display:block;color:var(--ink);text-decoration:none}
.adm .card.ask .stars{justify-content:flex-start;margin:10px 0 0}
.adm .card.ask .star span{width:46px;height:46px;font-size:22px;filter:none;opacity:1;
color:rgba(255,255,255,.25);background:rgba(0,0,0,.2)}
.adm .card.ask .star:hover span,.adm .card.ask .star:focus span{color:var(--gold)}
.adm .card.ask .stars .star:hover span,.adm .card.ask .stars .star:hover~.star span{
color:var(--gold);fill:var(--gold)}
.adm .rs-head{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.adm .rs-head>b{font-size:28px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;flex:none}
.adm .rs-head>.rv-stars{flex:none;white-space:nowrap}
.adm .rs-head>.muted{font-size:13px;line-height:1.3}
.adm .rq{padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}
.adm .rq p{margin:4px 0 0;font-size:14.5px;color:#e6dcf7}
.adm .gamebar .gi{font-size:24px}
.adm .gamebar .go{letter-spacing:0;text-transform:none;font-weight:700}
/* The Me page. */
.adm .kpis b.bad{color:var(--bad)}
/* The bell sits top-right on its own; a page that starts with a card (no
   artwork) leaves room for it so it never covers a heading. */
body.has-bell:not(.has-back) main>.card:first-child,
body.has-bell:not(.has-back) main>.msg:first-child,
body.has-bell:not(.has-back) main>form:first-child{margin-top:70px}
.adm .bell{color:var(--ink);font-size:20px}
.adm .ord.mine .av{width:40px;height:40px;font-size:18px;color:var(--muted)}
.adm .ord.mine .what{color:var(--muted);font-size:14px}
.adm .qb{white-space:nowrap}
.adm .duo button{white-space:nowrap}
@media (max-width:360px){
.adm .qb{font-size:12px;padding:10px 4px}
.adm .kpis b{font-size:16px}
.adm .duo button{font-size:15px;padding:14px 8px}
.adm .duo button .i{margin-right:5px}}
/* Grouped lists: one card per group, slim rows with hairlines between. */
.adm .glist{background:var(--card);border:1px solid rgba(255,255,255,.08);
border-radius:18px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.22)}
.adm .gl-row{display:flex;align-items:center;gap:13px;padding:12px 14px;
color:var(--ink);text-decoration:none;position:relative;min-height:62px}
.adm .gl-row+.gl-row::before{content:"";position:absolute;top:0;right:0;left:61px;
border-top:1px solid rgba(255,255,255,.07)}
.adm .gl-row:active{background:rgba(255,255,255,.05)}
.adm .gl-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;
place-items:center;font-size:18px;background:rgba(255,45,155,.14);color:var(--pink)}
.adm .t-gold .gl-ic{background:rgba(255,200,63,.13);color:var(--gold)}
.adm .t-violet .gl-ic{background:rgba(155,110,255,.16);color:#b79bff}
.adm .t-green .gl-ic{background:rgba(94,233,164,.13);color:var(--good)}
.adm .t-grey .gl-ic{background:rgba(255,255,255,.08);color:#cfc3e6}
.adm .gl-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.adm .gl-t{font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3}
.adm .gl-h{font-size:13px;color:var(--muted);line-height:1.35;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.adm .gl-n{flex:none;font-size:12px;font-weight:700;color:#fff;background:var(--pink);
border-radius:99px;padding:2px 8px;font-variant-numeric:tabular-nums}
.adm .gl-go{flex:none;width:18px;height:18px;color:rgba(255,255,255,.3)}
.adm .head-stats .ok,.adm .head-stats .shut{gap:7px}
.adm .head-stats .sdot{width:8px;height:8px;border-radius:50%;background:var(--good);
box-shadow:0 0 0 3px rgba(94,233,164,.2)}
.adm .head-stats .shut{color:var(--bad)}
.adm .head-stats .shut .sdot{background:var(--bad);box-shadow:0 0 0 3px rgba(255,107,107,.2)}
.adm .chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;
font-size:14px;color:#d9cdef}
.adm .chip .i{width:16px;height:16px}
.adm .chip b{font-size:12px;font-weight:700;background:rgba(255,255,255,.1);
border-radius:99px;padding:1px 7px;font-variant-numeric:tabular-nums}
.adm .chip.on b{background:rgba(255,255,255,.25)}
.adm .searchbar{position:relative;display:flex;gap:8px;margin:14px 0 0}
.adm .searchbar>.i{position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--muted);width:18px;height:18px;pointer-events:none}
.adm .searchbar input{margin:0;flex:1;min-width:0;font-size:16px;padding:13px 12px 13px 42px;
border-width:1px}
.adm .searchbar button{width:auto;min-height:0;padding:0 18px;margin:0;font-size:15px;
box-shadow:none}