/* Page kit: compact building blocks for account, sign-in and info pages (on top of app.css). */
.pg{position:relative;z-index:1;padding:12px 0 28px}
.pg>.container{max-width:860px}
.pg.pg-sm>.container{max-width:560px}
.pg.pg-md>.container{max-width:720px}
.stk>*+*{margin-top:10px}
.pg-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;min-width:0}
.pg-head>div{min-width:0}
.pg-title{font:700 var(--fs-xl)/1.2 var(--font-head);letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.pg-title i{font-size:.8em;color:var(--blue-light)}
.pg-sub{color:var(--text-sub);font-size:var(--fs-sm);margin-top:2px;line-height:1.45}
.pg-head>.btn,.pg-head>.pg-act{margin-left:auto;flex:none}
.pg-back{width:34px;height:34px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;border:1px solid var(--border-md);color:var(--text-sub);transition:all var(--dur-1)}
.pg-back:hover{color:var(--text);border-color:var(--blue)}

/* Account switcher */
.acc-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--gutter)) 12px;padding:2px var(--gutter);scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 20px),transparent)}
.acc-nav::-webkit-scrollbar{display:none}
.acc-nav a{flex:none;scroll-snap-align:center;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-full);background:var(--bg-raised);border:1px solid var(--border);color:var(--text-sub);font-size:var(--fs-xs);font-weight:600;white-space:nowrap;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.acc-nav a i{font-size:.72rem;opacity:.85}
.acc-nav a:hover{color:var(--text);border-color:var(--border-md)}
.acc-nav a.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 14px rgb(var(--blue-rgb)/.32)}
.acc-nav a.on i{opacity:1}
/* Wider screens: all of it at once, wrapping, instead of a strip to scroll (round 147: nine pages now) */
@media (min-width:760px){.acc-nav{flex-wrap:wrap;justify-content:center;overflow:visible;margin-left:0;margin-right:0;padding:2px 0;-webkit-mask-image:none;mask-image:none}}

/* Panels */
.pn{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
[data-theme="light"] .pn,[data-theme="light"] .st{box-shadow:var(--sh-1)}
.pn-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:var(--fs-sm);font-weight:700;min-height:44px}
.pn-h>i{color:var(--blue-light);font-size:.8rem}
.pn-h .sp{margin-left:auto;font-size:var(--fs-2xs);color:var(--text-muted);font-weight:600}
.pn-h .btn{margin-left:auto}
.pn-b{padding:12px 14px}
.pn-f{padding:10px 14px;border-top:1px solid var(--border);background:var(--bg-float)}

/* Balance hero */
.hero-c{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-xl);padding:16px;border:1px solid rgb(var(--blue-rgb)/.28);background:linear-gradient(140deg,rgb(var(--blue-rgb)/.24),rgb(var(--blue-rgb)/.07) 55%,var(--bg-raised))}
.hero-c::before{content:'';position:absolute;z-index:-1;width:240px;height:240px;right:-70px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgb(var(--blue-rgb)/.5),transparent 68%);animation:kitGlow 7s ease-in-out infinite alternate}
.hero-c::after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);transform:translateX(-100%);animation:kitShine 1.4s .3s var(--ease-out) both}
@keyframes kitGlow{to{transform:translate(-40px,30px) scale(1.15)}}
@keyframes kitShine{to{transform:translateX(100%)}}
.hero-top{display:flex;align-items:center;gap:12px}
.hero-ic{width:44px;height:44px;flex:none;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;font-size:1.1rem;background:linear-gradient(135deg,var(--blue),var(--blue-light));box-shadow:0 6px 18px rgb(var(--blue-rgb)/.38)}
.hero-k{font-size:var(--fs-2xs);font-weight:700;color:var(--text-sub);text-transform:uppercase;letter-spacing:.08em}
.hero-v{font:700 clamp(1.6rem,7vw,2.2rem)/1.1 var(--font-head);margin-top:2px;font-variant-numeric:tabular-nums;color:var(--text)}
.hero-v small{font-size:.48em;color:var(--text-sub);margin-right:4px;font-weight:600}
.hero-a{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hero-a .btn{flex:1 1 auto;min-height:40px;padding-inline:8px;white-space:nowrap}
.hero-a .btn-ghost{background:rgba(255,255,255,.04)}
[data-theme="light"] .hero-a .btn-ghost{background:rgba(255,255,255,.7)}

/* Stat tiles */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(128px,100%),1fr));gap:8px}
@media(max-width:520px){.stats:has(>.st:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}.stats:has(>.st:nth-child(3):last-child) .st-k{letter-spacing:.02em}.stats>.st:last-child:nth-child(5),.stats>.st:last-child:nth-child(7){grid-column:span 2}}
.st{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;min-width:0;transition:border-color var(--dur-2),transform var(--dur-2) var(--ease-out)}
.st:hover{border-color:var(--border-md);transform:translateY(-1px)}
.st-k{display:flex;align-items:center;gap:5px;font-size:.625rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.st-v{font:700 clamp(.875rem,3.4vw,1.05rem)/1.25 var(--font-head);margin-top:3px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.t-pos{color:var(--pos)}.t-neg{color:var(--neg)}.t-info{color:var(--info-fg)}.t-money{color:var(--accent)}.t-warn{color:var(--warn-fg)}.t-mute{color:var(--text-muted)}.t-sub{color:var(--text-sub)}

/* List rows */
.rw{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border);transition:background var(--dur-1);min-width:0}
.rw:first-child{border-top:0}
a.rw:hover,.rw.hov:hover{background:var(--bg-hover)}
.ic{width:34px;height:34px;flex:none;border-radius:var(--r-md);display:grid;place-items:center;font-size:.8rem;background:var(--blue-dim);color:var(--info-fg)}
.ic.pos{background:rgba(34,197,94,.12);color:var(--pos)}.ic.neg{background:rgba(239,68,68,.12);color:var(--neg)}.ic.warn{background:var(--amber-dim);color:var(--warn-fg)}.ic.money{background:var(--accent-dim);color:var(--accent)}.ic.mute{background:var(--bg-float);color:var(--text-muted)}
.rw-b{flex:1;min-width:0}
.rw-t{font-size:var(--fs-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-m{font-size:var(--fs-2xs);color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-ref{display:inline-block;margin-right:6px;padding:1px 6px;border-radius:6px;background:var(--bg-float);border:1px solid var(--border);color:var(--text-sub);font:600 .62rem/1.45 var(--font-mono,ui-monospace,monospace);letter-spacing:.02em;text-decoration:none;transition:color var(--dur-1),border-color var(--dur-1)}
a.rw-ref:hover{color:var(--blue-light);border-color:rgb(var(--blue-rgb)/.4)}
.rw-r{text-align:right;flex:none}
.rw-v{font-weight:700;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.rw-day{padding:5px 14px;font-size:.625rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;background:var(--bg-float);border-top:1px solid var(--border)}
.rw-day:first-child{border-top:0}

/* Filter chips and segmented control */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:30px;padding:0 11px;border-radius:var(--r-full);border:1px solid var(--border-md);background:transparent;color:var(--text-sub);font-size:var(--fs-xs);font-weight:600;display:inline-flex;align-items:center;gap:5px;cursor:pointer;transition:all var(--dur-1);white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--border-lg)}
.chip.on{background:var(--blue-dim);border-color:rgb(var(--blue-rgb)/.45);color:var(--info-fg)}
.chip .n{font-size:.625rem;opacity:.75;font-variant-numeric:tabular-nums}
.seg{display:inline-flex;padding:3px;gap:2px;background:var(--bg-float);border:1px solid var(--border);border-radius:var(--r-md);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg>*{flex:none;height:30px;padding:0 12px;border-radius:7px;font-size:var(--fs-xs);font-weight:600;color:var(--text-sub);border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all var(--dur-1)}
.seg>.on{background:var(--bg-raised);color:var(--text);box-shadow:var(--sh-1)}

/* Pager */
.pager{display:flex;justify-content:center;gap:4px;padding:10px;border-top:1px solid var(--border);flex-wrap:wrap}
.pager>*{min-width:32px;height:32px;padding:0 8px;border-radius:8px;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--text-sub);border:1px solid var(--border);transition:all var(--dur-1)}
.pager a:hover{border-color:var(--blue);color:var(--info-fg)}
.pager .on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager .off{opacity:.35;pointer-events:none}
.pager .gap{border:0;min-width:14px;padding:0}

/* Empty, notes, key-value */
.empty{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5}
.empty>i{font-size:1.7rem;opacity:.35;display:block;margin-bottom:8px}
.empty .btn{margin-top:12px}
.note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-xs);line-height:1.55;background:var(--blue-dim);color:var(--text-sub);border:1px solid rgb(var(--blue-rgb)/.2)}
.note>i{color:var(--info-fg);margin-top:2px;flex:none}
.note b,.note strong{color:var(--text)}
.note.warn{background:var(--amber-dim);border-color:rgba(245,158,11,.25)}.note.warn>i{color:var(--warn-fg)}
.note.err{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.22)}.note.err>i{color:var(--neg)}
.note.ok{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.22)}.note.ok>i{color:var(--pos)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;font-size:var(--fs-sm)}
.kv dt{color:var(--text-muted)}
.kv dd{text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}
.kv .sep{grid-column:1/-1;border-top:1px dashed var(--border-md);margin:2px 0}
.lbl{font-size:var(--fs-2xs);font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.g2{display:grid;gap:10px}
@media(min-width:720px){.g2{grid-template-columns:1fr 1fr}.g2 .span{grid-column:1/-1}}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.grow{flex:1;min-width:0}

/* Toggle switch */
.sw{position:relative;width:40px;height:23px;flex:none;display:inline-block}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.sw span{position:absolute;inset:0;border-radius:var(--r-full);background:var(--bg-hover);border:1px solid var(--border-md);transition:background var(--dur-2)}
.sw span::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--dur-2) var(--ease-out)}
.sw input:checked+span{background:var(--blue);border-color:var(--blue)}
.sw input:checked+span::after{transform:translateX(17px)}
.sw input:focus-visible+span{outline:2px solid var(--ring);outline-offset:2px}

/* Progress bar */
.bar{height:6px;border-radius:var(--r-full);background:var(--bg-hover);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue-light));transform-origin:left;animation:kitBar .9s var(--ease-out) both}
@keyframes kitBar{from{transform:scaleX(0)}}

/* Sign-in pages */
.auth{position:relative;z-index:1;min-height:calc(100dvh - var(--nb-header-h) - 40px);display:grid;place-items:center;padding:14px 0 28px}
/* Phones: the card sits near the top, no big empty band above it. Wide screens: a brand panel beside it (round 122). */
@media (max-width:899px){.auth{place-items:start center;min-height:0;padding:12px 0 24px}}
.auth-split{display:grid;gap:20px;width:100%;max-width:410px;margin:0 auto;align-items:center}
.auth-side{display:none}
@media (min-width:900px){.auth-split{max-width:900px;grid-template-columns:1fr 410px}.auth-side{display:block;padding:8px 8px 8px 0}}
.as-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);background:var(--blue-dim);color:var(--info-fg);font-size:var(--fs-2xs);font-weight:700}
.auth-side h2{font:700 1.75rem/1.2 var(--font-head);margin:12px 0 18px;max-width:420px}
.as-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.as-list li{display:grid;grid-template-columns:38px 1fr;column-gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-lg);background:var(--bg-raised);border:1px solid var(--border);animation:kitRise .45s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms)}
.as-ic{grid-row:span 2;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--blue-dim);color:var(--info-fg);font-size:1rem}
.as-ic i{font-size:1.15rem;color:var(--info-fg)}
.as-list b{font-size:var(--fs-sm)}.as-list span{font-size:var(--fs-xs);color:var(--text-muted)}
/* Google sign-up: the username picker */
.um{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(2,4,10,.65);backdrop-filter:blur(4px);overflow-y:auto;align-items:center;justify-content:center;padding:16px}
.um-card{width:100%;max-width:400px;padding:18px;animation:kitRise .3s var(--ease-out)}
.um-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.um-sg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.um-av{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--border);flex-shrink:0}
.auth-card>.note{margin-bottom:12px}
.inp-spin{display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.lbl-opt{text-transform:none;font-weight:500;color:var(--text-muted)}
/* Sign up: the invite code folds away until wanted */
.auth-more{margin:-2px 0 12px}
.auth-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--info-fg)}
.auth-more>summary::-webkit-details-marker{display:none}
.auth-more[open]>summary{margin-bottom:8px}
.auth-more[open]>summary i{transform:rotate(45deg)}.auth-more>summary i{transition:transform var(--dur-2)}
.auth-card{width:100%;max-width:410px;margin:0 auto;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--r-xl);padding:20px 18px;box-shadow:var(--sh-2);position:relative;overflow:hidden;isolation:isolate}
.auth-card::before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:140px;background:radial-gradient(ellipse 80% 100% at 50% 0,rgb(var(--blue-rgb)/.2),transparent)}
.auth-logo{width:46px;height:46px;margin:0 auto 10px;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;font-size:1.15rem;background:linear-gradient(135deg,var(--blue),var(--blue-light));box-shadow:0 8px 22px rgb(var(--blue-rgb)/.4)}
.auth-h{text-align:center;margin-bottom:16px}
.auth-h h1{font:700 var(--fs-xl)/1.2 var(--font-head)}
.auth-h p{color:var(--text-sub);font-size:var(--fs-sm);margin-top:4px}
.auth-or{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--text-muted);font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border-md)}
.auth-foot{text-align:center;font-size:var(--fs-sm);color:var(--text-sub);margin-top:14px}
.auth-foot a{color:var(--info-fg);font-weight:600}

/* Info pages */
.prose{font-size:var(--fs-base);line-height:1.7;color:var(--text-sub)}
.prose h2{font:700 var(--fs-lg)/1.3 var(--font-head);color:var(--text);margin:18px 0 6px}
.prose h3{font-size:var(--fs-md);font-weight:700;color:var(--text);margin:14px 0 4px}
.prose>:first-child{margin-top:0}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:8px}
.prose ul,.prose ol{padding-left:18px}.prose ul{list-style:disc}.prose ol{list-style:decimal}
.prose li+li{margin-top:4px}
.prose a{color:var(--info-fg);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--text)}

/* Entrance */
@keyframes kitRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:kitRise .42s var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
html[data-motion="reduce"] .rise{animation:none}
@media (prefers-reduced-motion:reduce){.rise,.hero-c::before,.hero-c::after,.bar>i{animation:none}}
@media(min-width:720px){.pg{padding:18px 0 36px}.hero-c{padding:20px}.pn-b{padding:14px 16px}.rw{padding:10px 16px}}
@media(max-width:420px){.hide-xs{display:none}}

/* ── Working (round 171) ─────────────────────────────────────────
   Something is on its way: a bright arc runs round the edge and a soft ripple
   spreads, in the state's colour (--busy, else the text colour), so it reads on
   every theme and accent. .busy goes on any round or rounded box; .spin is a
   small turning ring for a status pill. Still, with the arc showing, for
   people who asked for less motion. */
@property --nb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.busy{position:relative}
.busy::before,.busy::after{content:"";position:absolute;inset:-5px;border-radius:inherit;pointer-events:none}
.busy::before{padding:2.5px;background:conic-gradient(from var(--nb-a),transparent 0 35%,var(--busy,currentColor) 90%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:nbArc 1.1s linear infinite}
.busy::after{border:2px solid var(--busy,currentColor);opacity:0;animation:nbRipple 2s cubic-bezier(.2,.6,.35,1) infinite}
.spin{display:inline-block;flex:none;width:.9em;height:.9em;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;border-bottom-color:transparent;animation:nbTurn .75s linear infinite;vertical-align:-.12em}
@keyframes nbArc{to{--nb-a:360deg}}
@keyframes nbTurn{to{transform:rotate(1turn)}}
@keyframes nbRipple{0%{opacity:.65;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}

/* ── Progress tracker (round 171: shared; was in order-card.css) ──
   My orders, the order page and a deposit (includes/track.php). Each step is
   on (done), now (being worked on), bad, mute, or nothing yet (dashed). The
   colour is green; only a failed step is red. The step being worked on is filled, turns and
   ripples, and nothing else moves (round 172: green unless something failed). */
.trk{--c:var(--pos);--lbl:var(--pos);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:8px 6px 10px;list-style:none}
.trk li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.625rem;font-weight:600;color:var(--text-muted);text-align:center;white-space:nowrap}
.trk li+li::before{content:"";position:absolute;top:10px;left:calc(-50% + 17px);right:calc(50% + 17px);height:2px;border-radius:2px;background:var(--border-md)}
.trk li.on::before,.trk li.now::before{background:var(--c);transform-origin:left;animation:trkLine .45s var(--ease-out) both;animation-delay:calc(var(--n) * 90ms)}
.trk li.bad::before,.trk li.mute::before{background:var(--border-lg)}
.trk b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--bg-float);border:2px solid var(--border-md);color:#fff;font-size:.58rem}
.trk .on{color:var(--text-sub)}
.trk .on b,.trk .now b{background:var(--c);border-color:var(--c);animation:trkDot .35s var(--ease-out) both;animation-delay:calc(var(--n) * 90ms)}
.trk .now{color:var(--lbl);font-weight:800}
.trk .now b{--busy:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.trk .bad{color:var(--neg)}.trk .bad b{background:var(--neg);border-color:var(--neg)}
.trk .mute{color:var(--text-sub)}.trk .mute b{background:var(--text-muted);border-color:var(--text-muted)}
.trk small{display:block;margin-top:-3px;font-size:.6rem;font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums}
@keyframes trkLine{from{transform:scaleX(0)}}
@keyframes trkDot{from{transform:scale(.4);opacity:0}}
html[data-motion="reduce"] .busy::before,html[data-motion="reduce"] .busy::after,html[data-motion="reduce"] .spin,html[data-motion="reduce"] .trk *,html[data-motion="reduce"] .trk li::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.busy::before,.busy::after,.spin,.trk *,.trk li::before{animation:none!important}}

/* Bottom sheet (dialog on wider screens) */
.sheet-bg{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(2,4,10,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--dur-2)}
.sheet-bg.open{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:420px;max-height:90dvh;overflow:auto;background:var(--bg-raised);border:1px solid var(--border-md);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform var(--dur-3) var(--ease-out);box-shadow:var(--sh-3)}
.sheet::before{content:'';display:block;width:36px;height:4px;border-radius:4px;background:var(--border-lg);margin:-8px auto 12px}
.sheet-bg.open .sheet{transform:none}
.sheet-ic{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;background:var(--blue-dim);color:var(--info-fg)}
.sheet-ic.pos{background:rgba(34,197,94,.14);color:var(--pos)}.sheet-ic.neg{background:rgba(239,68,68,.14);color:var(--neg)}.sheet-ic.money{background:var(--accent-dim);color:var(--accent)}
.sheet h3{text-align:center;font:700 var(--fs-lg)/1.3 var(--font-head)}
.sheet-d{text-align:center;color:var(--text-sub);font-size:var(--fs-sm);margin:4px 0 12px;line-height:1.5}
.sheet .kv{background:var(--bg-float);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.sheet-a{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.sheet-a>:only-child{grid-column:1/-1}
@media(min-width:560px){.sheet-bg{align-items:center}.sheet{border-radius:var(--r-xl);transform:translateY(16px) scale(.97);padding-bottom:16px}.sheet::before{display:none}}

/* Round 254: density (--dn, set in app.css; not --d, which the admin menu and gift box use for other things) for the page kit. Normal keeps these exact values. */
:root .pg{padding:calc(12px*var(--dn)) 0 calc(28px*var(--dn))}
:root .stk>*+*{margin-top:calc(10px*var(--dn))}
:root .pg-head{margin-bottom:calc(10px*var(--dn))}
:root .pn-h{padding:calc(10px*var(--dn)) calc(14px*var(--dnx));min-height:calc(44px*var(--dn))}
:root .pn-b{padding:calc(12px*var(--dn)) calc(14px*var(--dnx))}
:root .pn-f{padding:calc(10px*var(--dn)) calc(14px*var(--dnx))}
:root .rw{padding:calc(10px*var(--dn)) calc(14px*var(--dnx))}
:root .st{padding:calc(9px*var(--dn)) calc(11px*var(--dnx))}
:root .stats{gap:calc(8px*var(--dn))}
:root .hero-c{padding:calc(16px*var(--dn))}
:root .hero-a{margin-top:calc(14px*var(--dn))}