@import url("./game-day-players.css");
@import url("./market-photo.css");
@import url("./game-day.css");
@import url("./player-live.css");
/* HoloTap v5 — design system. Brand 2026: obsidian ground, the holographic H
   gradient (teal → sky → lavender) as the single point of colour, Sora for
   display, Inter for everything you read. */
@font-face{font-family:'Holo Inter';src:url('/assets/fonts/inter-latin-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
 --bg:#06080D;--bg-2:#04070C;--surface:#0E1218;--raised:#161C25;--raised-2:#1E2630;--line:#222B36;--line-2:#2E3947;
 --text:#F5F7FB;--muted:#AEB8C6;--dim:#8A96A6;--accent:#7CF2D4;--accent-ink:#06080D;--blue:#8FCBFF;--violet:#C6B6FF;--green:#80E6A8;--red:#FF8F96;--gold:#F6D37A;--rose:#FFB3DD;
 --holo:linear-gradient(120deg,#7CF2D4 0%,#8FCBFF 36%,#C6B6FF 68%,#FFB3DD 100%);--holo-soft:linear-gradient(120deg,rgba(124,242,212,.18),rgba(143,203,255,.14),rgba(198,182,255,.16),rgba(255,179,221,.12));
 --font:'Holo Inter',-apple-system,'SF Pro Text',system-ui,'Segoe UI',Roboto,sans-serif;--display:'Sora','Holo Inter',-apple-system,system-ui,sans-serif;
 --r-sm:8px;--r:12px;--r-lg:16px;--r-tile:20px;--r-sheet:26px;--gutter:24px;--header:64px;--tabs:64px;
 /* One type scale for the whole site (tests/type-scale.test.mjs holds every
    stylesheet to it). Read on the phone at arm's length: nothing under 10px,
    body 16px, and the steps are what a card tile, a sheet and a hero need. */
 --fs-micro:10px;--fs-label:11px;--fs-caption:12px;--fs-note:13px;--fs-small:14px;--fs-compact:15px;--fs-body:16px;--fs-lead:18px;--fs-heading:20px;--fs-figure:22px;--fs-subtitle:24px;--fs-title:26px;--fs-figure-lg:30px;--fs-display:34px;--fs-hero:40px;
 --lh-tight:1.15;--lh-snug:1.3;--lh-body:1.5;--lh-loose:1.7;
 /* One spacing scale, so a gap between two things means the same thing on
    every screen. Sections breathe at --s-7; a label sits on its value at --s-1.
    Before this every screen invented its own numbers and the site read as a
    dense admin tool rather than a shop. */
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:72px;
 --shadow-1:inset 0 1px 0 rgba(255,255,255,.04),0 10px 28px rgba(3,7,12,.35);--shadow-2:0 24px 60px rgba(3,7,12,.6);
 --ease:cubic-bezier(.2,.7,.2,1);--fast:160ms;--base:260ms;
 color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Layout utility classes must not expose controls marked hidden by their state. */
[hidden]{display:none!important}
html{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{min-height:100vh;background:radial-gradient(55% 38% at 0% 0%,rgba(124,242,212,.09) 0%,transparent 60%),radial-gradient(45% 32% at 100% 0%,rgba(198,182,255,.08) 0%,transparent 60%),var(--bg);overflow-x:hidden}
img,svg,canvas,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
button{cursor:pointer}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* A file input styled as a button stays in the tab order; the label shows its focus. */
.file-pick{position:relative}.file-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px}
/* Skip link: off screen until keyboard focus reaches it. A heading focused by route changes shows no ring for pointer users. */
.skip-link{position:fixed;left:12px;top:-80px;z-index:12001;padding:12px 16px;border-radius:12px;background:var(--accent);color:var(--bg);font-weight:650;text-decoration:none}.skip-link:focus{top:calc(12px + env(safe-area-inset-top))}
#main h1[tabindex="-1"]:focus:not(:focus-visible),#main[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.num{font-variant-numeric:tabular-nums}
.label{font-size:10px;line-height:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
/* Every figure a reader compares down a column gets tabular digits, so the
   columns actually line up instead of shimmering as the numbers change. */
.num,.price,[class*=price] b,[class*=amount],[class*=score]{font-variant-numeric:tabular-nums}
.label.accent{color:var(--accent)}
/* A real type scale. The old one ran 26 / 18 / 15 — three sizes close enough
   that nothing looked more important than anything else. A page needs one thing
   that is obviously the headline. */
h1{font-family:var(--display);font-size:clamp(30px,3.6vw,44px);line-height:1.08;font-weight:700;letter-spacing:-1.4px;text-wrap:balance}
h2{font-family:var(--display);font-size:clamp(19px,1.9vw,24px);line-height:1.22;font-weight:700;letter-spacing:-.5px;text-wrap:balance}
h3{font-size:16px;line-height:1.35;font-weight:650;letter-spacing:-.2px}
.muted{color:var(--muted)}
.dim{color:var(--dim)}

/* ── Shell ── */
.app{display:flex;flex-direction:column;min-height:100vh}
.header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;height:var(--header);padding:0 40px;background:rgba(11,16,22,.9);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text);flex:none}
.brand span{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand img{width:30px;height:30px;border-radius:0;filter:drop-shadow(0 4px 10px rgba(124,242,212,.35))}
.nav{display:flex;gap:2px;flex:none}
.nav a{display:inline-flex;align-items:center;height:40px;padding:0 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);transition:color var(--fast),background var(--fast)}
.nav a:hover{color:var(--text)}
.nav a[aria-current=page]{color:var(--text);background:var(--raised)}
/* Shop and Membership: in the header on wide desktops, under More on narrower ones; never both. */
.nav .nav-extra{display:none}
@media(min-width:1240px){.nav .nav-extra{display:inline-flex}.nav-more-menu a[data-nav-extra]{display:none}}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:1;min-width:0;justify-content:flex-end}
.search-btn{display:flex;align-items:center;gap:10px;flex:1;max-width:520px;height:40px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--dim);font-size:14px;text-align:left;min-width:0;transition:border-color var(--fast)}
.search-btn:hover{border-color:var(--line-2)}
.search-btn svg{width:18px;height:18px;flex:none;stroke:var(--muted)}
.search-btn span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.search-btn kbd{font:600 11px/1 var(--font);color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--text);flex:none;transition:background var(--fast),transform var(--fast)}
.icon-btn:hover{background:var(--raised)}
.icon-btn:active{transform:scale(.96)}
/* The shared press animation owns compression while this gesture is active. */
html.v5 [data-press-motion]:active{transform:none}
.icon-btn svg{width:20px;height:20px;stroke:currentColor}
.icon-btn .dot{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:var(--bg);font:700 11px/18px var(--font);text-align:center}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--raised-2);border:1px solid var(--line);color:var(--text);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:74px;height:74px;font-size:26px}
.avatar.sm{width:28px;height:28px;font-size:11px}
.main{flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 40px calc(var(--tabs) + 40px)}
/* Route motion is owned by revealPage; data refreshes must never fade the page out. */
.page{animation:none}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Bottom tabs (phone) */
.tabs{display:none}
@media(max-width:900px){
 .header{padding:0 var(--gutter);gap:10px;height:56px}
 .nav{display:none}
 .search-btn{width:40px;flex:none;padding:0;justify-content:center}
 .search-btn span,.search-btn kbd{display:none}
 .main{padding:16px var(--gutter) calc(var(--tabs) + 32px + env(safe-area-inset-bottom))}
 .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start;height:calc(var(--tabs) + env(safe-area-inset-bottom));padding:8px 8px env(safe-area-inset-bottom);background:rgba(11,16,22,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line)}
 .tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;gap:4px;color:var(--muted);font-size:10px;font-weight:600;line-height:12px}
 .tabs a svg{width:24px;height:24px;stroke:currentColor}
 .tabs a[aria-current=page]{color:var(--text)}
 .tabs a.lens{margin-top:0}
 .tabs a.lens i{display:flex;align-items:center;justify-content:center;width:42px;height:30px;margin-top:-3px;margin-bottom:-3px;border-radius:11px;background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 10px rgba(129,216,191,.18);transition:transform var(--fast)}
 .tabs a.lens:active i{transform:scale(.94)}
 .tabs a.lens i svg{width:26px;height:26px;stroke-width:2.2}
}

/* ── Primitives ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;font-size:14px;font-weight:700;letter-spacing:-.1px;background:var(--raised);border:1px solid var(--line);color:var(--text);white-space:nowrap;transition:transform var(--fast),filter var(--fast),background var(--fast)}
.btn:hover{background:var(--raised-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn.primary{background:var(--holo);border-color:transparent;color:var(--accent-ink);box-shadow:0 8px 24px rgba(124,242,212,.22)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--text);background:var(--raised)}
.btn.danger{color:var(--red)}
.btn.sm{min-height:36px;padding:0 14px;font-size:13px}
.btn.lg{min-height:52px;border-radius:14px;font-size:16px}
.btn.block{width:100%}
.btn.pill{border-radius:999px;min-height:36px;padding:0 14px;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.btn.pill[aria-pressed=true],.btn.pill.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chips .btn{flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10px;line-height:12px;font-weight:650;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 8px;white-space:nowrap}
.chip.accent{color:var(--accent);border-color:rgba(129,216,191,.45)}
.chip.green{color:var(--green);border-color:rgba(125,223,166,.45)}
.chip.gold{color:var(--gold);border-color:rgba(242,203,107,.45)}
.chip.red{color:var(--red);border-color:rgba(255,138,144,.45)}
.chip.solid{background:rgba(11,16,22,.8)}
.field{display:flex;flex-direction:column;gap:6px}
.field>span{font-size:12px;font-weight:600;color:var(--muted)}
.input{width:100%;min-height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:15px;transition:border-color var(--fast)}
.input:focus{border-color:var(--accent);outline:0}
.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea.input{min-height:96px;padding:12px 14px;resize:vertical}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AEBDC7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}
.input-wrap{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.input-wrap svg{width:18px;height:18px;stroke:var(--muted);flex:none}
.input-wrap input{flex:1;min-width:0;min-height:42px;font-size:15px}
.card{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card.pad{padding:18px}
.notice{padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line);color:var(--muted);font-size:13px;line-height:18px}
.notice.warn{border-color:rgba(242,203,107,.35);background:rgba(242,203,107,.06);color:var(--text)}
.notice.bad{border-color:rgba(255,138,144,.35);background:rgba(255,138,144,.06);color:var(--text)}
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:44px 24px;border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--raised)}
.empty h3{font-size:18px;line-height:1.3}
.empty p{color:var(--muted);max-width:44ch}
.empty .btn{margin-top:8px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:12px}
.grow{flex:1;min-width:0}
.divider{height:1px;background:var(--line)}
.stat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-1);min-width:0}
.stat b{font-size:22px;line-height:27px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.stat.hero b{font-size:30px;line-height:35px;letter-spacing:-.7px}
.stat.accent{border-color:rgba(129,216,191,.45)}
.stat.accent .label{color:var(--accent)}
.stat small{font-size:12px;line-height:16px;color:var(--muted)}
.up{color:var(--green)}.down{color:var(--red)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-head p{color:var(--muted);font-size:14px;margin-top:4px;max-width:60ch}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.section-head span{font-size:12px;color:var(--muted)}

/* Skeletons */
.skel{position:relative;overflow:hidden;background:var(--raised);border-radius:10px}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel.text{height:14px;width:60%}
.skel.tile{aspect-ratio:63/88}

/* Toast */
.toasts{position:fixed;left:50%;bottom:calc(var(--tabs) + 16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media(min-width:901px){.toasts{bottom:24px}}
/* The toast region lives inside an open .sheet for screen readers. The sheet's opening transform would make it the fixed containing block (toasts clipped and placed inside it), so a sheet holding toasts drops that animation and toasts stay on the viewport, as before. */
.sheet:has(>.toasts){animation:none}
.toast{padding:12px 16px;border-radius:12px;background:var(--raised-2);border:1px solid var(--line-2);color:var(--text);font-size:14px;font-weight:600;box-shadow:var(--shadow-2);animation:toast-in var(--base) var(--ease)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Sheet / modal */
.sheet-root{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(3,7,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade var(--fast) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;max-height:92vh;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:var(--shadow-2);animation:sheet-up var(--base) var(--ease) both;overscroll-behavior:contain}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .close{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:44px;height:44px;z-index:3}
.sheet .sheet-body>h2:first-child{padding-right:48px;overflow-wrap:anywhere}
@media(min-width:901px){.sheet-root{align-items:center;padding:24px}.sheet{max-width:1040px;border-radius:20px;max-height:calc(100vh - 48px)}.sheet.narrow{max-width:520px}}
.sheet .sheet-body{padding:24px}
.sheet h2.title{font-size:22px;line-height:1.25;margin-bottom:14px}

/* ── Stories ── */
.stories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;padding:4px 0 14px}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:6px;width:68px;flex:none;color:var(--muted);font-size:11px;line-height:14px}
.story small{max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.story.self small{color:var(--text)}
.ring{position:relative;width:64px;height:64px;border-radius:50%;padding:2px;background:conic-gradient(from 200deg,#81D8BF,#93C9FF,#B9ADF1,#81D8BF);transition:transform var(--fast)}
.story:active .ring{transform:scale(.95)}
.story.seen .ring{background:var(--line)}
.ring .avatar{width:100%;height:100%;border:3px solid var(--bg);font-size:18px}
.ring .plus{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 15px/22px var(--font);text-align:center;border:2px solid var(--bg)}

/* ── Feed ── */
.feed-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.feed-aside{position:sticky;top:calc(var(--header) + 20px);display:flex;flex-direction:column;gap:16px}
@media(max-width:1000px){.feed-layout{grid-template-columns:minmax(0,1fr)}.feed-aside{position:static}}
.stream,.feed-aside{min-width:0}
.msg-layout{grid-template-columns:320px minmax(0,1fr)}
@media(max-width:800px){.msg-layout{grid-template-columns:minmax(0,1fr)}.msg-layout.has-thread>section:first-child{display:none}.msg-layout:not(.has-thread)>section:last-child{display:none}}
.stream{display:flex;flex-direction:column;gap:16px}
.post{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1)}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 16px}
.post-head .who{display:flex;flex-direction:column;flex:1;min-width:0}
.post-head b{font-size:15px;line-height:20px;font-weight:600}
.post-head small{font-size:12px;line-height:16px;color:var(--muted)}
.post-media{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;max-height:440px;padding:24px;background:radial-gradient(120% 85% at 50% 40%,rgba(129,216,191,.12) 0%,transparent 62%),var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);perspective:900px;cursor:pointer}
.post-media img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:8px;box-shadow:0 26px 40px rgba(3,7,12,.7);transform:rotateY(-9deg) rotateX(4deg);transition:transform .5s var(--ease)}
.post-media:hover img{transform:none}
.post-media .chip{position:absolute;left:14px;top:14px}
.post-media .heart-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
.post-media .heart-burst.go{animation:burst .7s var(--ease)}
@keyframes burst{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1)}}
.post-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.post-body h3{font-size:16px;line-height:1.3}
.post-body p{font-size:15px;line-height:22px}
.post-price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.post-price .fig{display:flex;flex-direction:column;gap:3px}
.post-price .fig b{font-size:22px;line-height:27px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.post-actions{display:flex;align-items:center;gap:6px;padding-top:4px}
/* Instagram order: bare action icons, then the likes line, then the caption with the name inline. */
.post-actions .btn.pill span{display:none}.post-actions .btn.pill{min-width:44px;justify-content:center;border-color:transparent;background:transparent}
.post-likes{display:block;font-size:14px;line-height:20px;font-weight:700;margin:2px 0 4px}.post-caption{font-size:14px;line-height:20px;margin:0}.post-caption b{font-weight:700}
.post-actions .btn.pill{gap:6px}
.post-actions .btn.pill svg{width:18px;height:18px;stroke:currentColor}
.post-actions .btn.pill.liked{color:var(--red);border-color:rgba(255,138,144,.4)}
.post-actions .btn.pill.liked svg{fill:var(--red)}
.card-placeholder{display:flex;align-items:flex-end;justify-content:center;width:118px;height:165px;padding:0 0 12px;border-radius:8px;background:linear-gradient(160deg,#1C2935 0%,#0F1720 60%,#182530 100%);box-shadow:0 20px 34px rgba(3,7,12,.65);border:1px solid rgba(243,246,247,.08);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);text-align:center;transform:rotateY(-9deg) rotateX(4deg)}
/* The same placeholder, sized by whatever frame it was dropped into: the
   fallback for a broken photo has to fit a 63/88 offer thumb as readily as the
   card stage it was designed for. */
.card-placeholder.fitted{width:100%;height:100%;transform:none;box-shadow:none;align-items:center;padding:8px}
.composer{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--raised);border:1px solid var(--line);border-radius:14px;cursor:text;color:var(--dim);font-size:14px}
.composer:hover{border-color:var(--line-2)}
.vault-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,rgba(129,216,191,.18) 0%,transparent 55%),radial-gradient(80% 80% at 0% 100%,rgba(185,173,241,.12) 0%,transparent 60%),var(--raised);border:1px solid rgba(129,216,191,.35);box-shadow:var(--shadow-1)}
.vault-banner .value{font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.people-list{display:flex;flex-direction:column}
.person{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 0;color:var(--text);text-align:left;width:100%}
.person .who{display:flex;flex-direction:column;flex:1;min-width:0}
.person b{font-size:14px;line-height:18px;font-weight:600}
.person small{font-size:12px;line-height:16px;color:var(--muted)}
.person .btn{flex:none}

/* ── Market ── */
.market{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.rail{position:sticky;top:calc(var(--header) + 20px);display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - var(--header) - 40px);overflow:auto;scrollbar-width:thin}
.rail .title{display:flex;align-items:baseline;justify-content:space-between}
.rail .opt{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;font-size:14px;cursor:pointer}
.rail .opt .c{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.rail .opt input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid #708694;border-radius:4px;flex:none;display:grid;place-content:center;margin-right:10px}
.rail .opt input:checked{background:var(--accent);border-color:var(--accent)}
.rail .opt input:checked::after{content:"";width:9px;height:5px;border-left:2px solid var(--bg);border-bottom:2px solid var(--bg);transform:translateY(-1px) rotate(-45deg)}
.rail .opt label{display:flex;align-items:center;flex:1;cursor:pointer}
.rail .price-range{display:flex;gap:8px}
.rail .price-range .input{min-height:36px;padding:0 10px;font-size:13px}
.market-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.tile{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);color:var(--text);text-align:left;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;animation:page-in var(--base) var(--ease) both;animation-delay:calc(var(--i,0) * 30ms)}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:0 18px 30px rgba(3,7,12,.5)}
.tile .art{position:relative;aspect-ratio:63/88;display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(120% 85% at 50% 38%,rgba(129,216,191,.11) 0%,transparent 62%),var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.tile .art img{width:100%;height:100%;object-fit:contain;border-radius:6px;box-shadow:0 14px 22px rgba(3,7,12,.55)}
.tile .art .foil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(129,216,191,.14) 45%,rgba(147,201,255,.14) 52%,rgba(185,173,241,.12) 58%,transparent 70%);mix-blend-mode:screen;opacity:0;transform:translateX(-25%);transition:opacity .25s,transform .6s var(--ease)}
.tile:hover .art .foil{opacity:1;transform:translateX(25%)}
.tile .art .heart{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:10px;background:rgba(11,16,22,.8);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text);transition:transform var(--fast)}
.tile .art .heart:active{transform:scale(.9)}
.tile .art .heart svg{width:16px;height:16px;stroke:currentColor;fill:none}
.tile .art .heart.on svg{fill:var(--red);stroke:var(--red)}
.tile .art .tags{position:absolute;left:10px;top:10px;display:flex;gap:4px;flex-wrap:wrap}
.tile .body{display:flex;flex-direction:column;gap:3px;padding:12px 13px 13px}
.tile .name{font-size:14px;line-height:18px;font-weight:650;letter-spacing:-.15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .meta{font-size:11px;line-height:15px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;margin-top:9px}
.tile .price{display:flex;flex-direction:column;gap:2px}
.tile .price b{font-size:18px;line-height:22px;font-weight:750;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.tile .foot{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.shelf-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px;scroll-snap-type:x mandatory}
.shelf-row::-webkit-scrollbar{display:none}
.shelf-row .tile{flex:0 0 176px;scroll-snap-align:start}
@media(max-width:520px){.shelf-row .tile{flex-basis:150px}}
@media(max-width:1099px){.market{grid-template-columns:1fr;gap:16px}.rail{position:static;max-height:none;overflow:visible}.rail .filters{display:none}.rail.open .filters{display:flex}}

/* ── Card detail ── */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.detail .stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:480px;padding:48px 40px;background:radial-gradient(90% 70% at 50% 45%,rgba(129,216,191,.16) 0%,rgba(147,201,255,.05) 40%,transparent 70%),var(--bg-2);border-right:1px solid var(--line);perspective:1000px}
.detail .stage .holo{position:relative;width:min(380px,90%);aspect-ratio:63/88}
.detail .stage .holo img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 36px 54px rgba(3,7,12,.78);transform:rotateY(-14deg) rotateX(6deg);transition:transform .5s var(--ease)}
.detail .stage .holo.live img,.detail .stage .holo.holo-3d-live img,.detail .stage .holo.live .card-placeholder,.detail .stage .holo.holo-3d-live .card-placeholder{visibility:hidden}
[data-holo-3d]{position:relative;isolation:isolate}
.holo-card-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y pinch-zoom}
.detail .stage .hint{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.detail .info{display:flex;flex-direction:column;gap:14px;padding:44px 32px 32px}
.detail .info h2{font-size:26px;line-height:1.18}
.detail .info .meta{font-size:14px;line-height:20px;color:var(--muted)}
.detail .stats{display:flex;gap:12px}
.detail .stats .stat{flex:1}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.kv>div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.kv>div b{color:var(--text);font-weight:600;text-align:right}
.seller{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.seller b{color:var(--text)}
.offer-row{display:flex;gap:8px}
.offer-row .input{flex:1;min-width:0}
.offer-row select.input{max-width:150px}
.similar{grid-column:1/-1;padding:18px 32px 28px;border-top:1px solid var(--line)}
.similar h3{margin-bottom:12px}
.mini-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.mini{flex:0 0 132px;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--text)}
.mini .art{aspect-ratio:63/88;border-radius:10px;background:radial-gradient(120% 85% at 50% 38%,rgba(129,216,191,.11) 0%,transparent 62%),var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:10px;overflow:hidden}
.mini .art img{width:100%;height:100%;object-fit:contain;border-radius:5px}
.mini b{font-size:13px;line-height:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.spark{width:100%;height:64px;display:block}
@media(max-width:820px){.detail{grid-template-columns:minmax(0,1fr)}.detail .stage{min-height:380px;padding:60px 24px 32px;border-right:0;border-bottom:1px solid var(--line)}.detail .info{padding:20px 20px 24px}.similar{padding:16px 20px 24px}}

/* ── Vault ── */
.vault-head{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:16px;background:radial-gradient(120% 120% at 100% 0%,rgba(129,216,191,.14) 0%,transparent 55%),var(--raised);border:1px solid var(--line);box-shadow:var(--shadow-1);margin-bottom:14px}
.vault-head .display{font-size:34px;line-height:42px;font-weight:700;letter-spacing:-.9px;font-variant-numeric:tabular-nums}
.vault-head .facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:4px}
.vault-head .facts div{display:flex;flex-direction:column;gap:3px}
.vault-head .facts b{font-size:16px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tools .input-wrap{flex:1;min-width:200px}
.tools select.input{width:auto;min-width:160px}

/* ── Lens (web) ── */
.lens-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
@media(max-width:900px){.lens-layout{grid-template-columns:1fr}}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:360px;padding:24px;border:1px dashed var(--line-2);border-radius:20px;background:radial-gradient(120% 85% at 50% 40%,rgba(129,216,191,.1) 0%,transparent 62%),var(--surface);text-align:center;cursor:pointer;transition:border-color var(--fast),background var(--fast)}
.dropzone.over{border-color:var(--accent);background:rgba(129,216,191,.06)}
.dropzone img{max-height:320px;border-radius:10px;box-shadow:0 26px 40px rgba(3,7,12,.7)}
.reticle{width:150px;height:210px;border:2px dashed rgba(129,216,191,.6);border-radius:12px;position:relative}
.reticle::before,.reticle::after{content:"";position:absolute;width:24px;height:24px;border:3px solid var(--accent);border-radius:4px}
.reticle::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.reticle::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.scan-line{position:absolute;left:8px;right:8px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:scan 1.6s ease-in-out infinite;top:10%}
@keyframes scan{0%{top:10%}50%{top:88%}100%{top:10%}}
.result{display:flex;flex-direction:column;gap:12px}
.result .big{font-size:24px;line-height:29px;font-weight:700;letter-spacing:-.5px}
.confidence{display:inline-flex;gap:4px;align-items:center}
.confidence i{width:8px;height:8px;border-radius:2px;background:var(--line)}
.confidence.high i,.confidence.medium i:nth-child(-n+2),.confidence.low i:first-child{background:var(--accent)}

/* ── Shop ── */
.shop-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:center;padding:24px;border-radius:20px;overflow:hidden;background:radial-gradient(110% 120% at 100% 0%,rgba(129,216,191,.2) 0%,transparent 55%),radial-gradient(80% 80% at 0% 100%,rgba(185,173,241,.14) 0%,transparent 60%),var(--raised);border:1px solid rgba(129,216,191,.45);box-shadow:var(--shadow-1)}
.shop-hero h2{font-size:24px;line-height:29px}
.shop-hero .object{min-height:300px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
@media(max-width:900px){.shop-hero{grid-template-columns:1fr}.shop-hero .object{order:-1;min-height:260px}}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.product{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1)}
.product .render{position:relative;height:150px;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 85% at 50% 40%,rgba(129,216,191,.12) 0%,transparent 62%),var(--surface);border-bottom:1px solid var(--line)}
.product .render img{max-height:120px;border-radius:6px;box-shadow:0 14px 20px rgba(3,7,12,.55)}
.product .body{display:flex;flex-direction:column;gap:3px;padding:12px 13px 13px}
.product .price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.product .price b{font-size:18px;line-height:22px;font-weight:750;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.product .price s{font-size:12px;color:var(--dim)}
.product .btn{margin:10px 13px 13px}
.bagbar{position:sticky;bottom:calc(var(--tabs) + 10px + env(safe-area-inset-bottom));z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-radius:14px;background:rgba(28,41,53,.96);border:1px solid var(--line);backdrop-filter:blur(14px);margin-top:16px}
@media(min-width:901px){.bagbar{bottom:16px}}
.bagbar b{font-size:16px;font-variant-numeric:tabular-nums}

/* ── You / membership ── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.plan{display:flex;flex-direction:column;gap:10px;padding:18px;background:var(--raised);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-1)}
.plan.current{border-color:rgba(129,216,191,.45)}
.plan .price{font-size:30px;line-height:35px;font-weight:700;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.plan .price small{font-size:13px;color:var(--muted);letter-spacing:0;font-weight:500}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.plan ul li::before{content:"✓ ";color:var(--accent)}
.plan .btn{margin-top:auto}
.menu{display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1)}
.menu a,.menu button{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-top:1px solid var(--line);color:var(--text);font-size:15px;text-align:left;width:100%}
.menu a:first-child,.menu button:first-child{border-top:0}
.menu a:hover,.menu button:hover{background:var(--raised-2)}
.menu svg{width:20px;height:20px;stroke:var(--accent);flex:none}
.menu .grow{display:flex;flex-direction:column}
.menu small{font-size:12px;color:var(--muted)}
.menu .arrow{color:var(--dim)}
.profile-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.profile-head .who{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.profile-head h1{font-size:24px}
.offer{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:12px;background:var(--raised);border:1px solid var(--line);border-radius:14px}
.offer .thumb{aspect-ratio:63/88;border-radius:6px;overflow:hidden;background:var(--surface)}
.offer .thumb img{width:100%;height:100%;object-fit:contain}
.offer .amt{font-size:18px;font-weight:750;font-variant-numeric:tabular-nums;text-align:right}
.thread{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--text);text-align:left;width:100%}
.thread:first-child{border-top:0}
.bubble{max-width:78%;padding:10px 14px;border-radius:16px;background:var(--raised);border:1px solid var(--line);font-size:14px;line-height:20px}
.bubble.me{margin-left:auto;background:rgba(129,216,191,.14);border-color:rgba(129,216,191,.35)}

/* ── Auth / landing ── */
.auth{min-height:calc(100vh - var(--header));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;padding:40px 0}
@media(max-width:900px){.auth{grid-template-columns:1fr;padding:16px 0}}
.auth-card{max-width:440px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--raised);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-2)}
.auth-card h1{font-size:24px}
.auth-card p{color:var(--muted);font-size:14px}
.hero-copy{display:flex;flex-direction:column;gap:20px;max-width:560px}
.hero-copy h1{font-size:clamp(40px,5.2vw,68px);line-height:1.05;letter-spacing:-2px;text-wrap:balance}
.hero-copy .lead{font-size:18px;line-height:28px;color:var(--muted);max-width:50ch}
.hero-object{min-height:460px;border-radius:24px;background:radial-gradient(90% 70% at 50% 45%,rgba(129,216,191,.16) 0%,rgba(147,201,255,.05) 40%,transparent 70%),var(--bg-2);border:1px solid var(--line);overflow:hidden}
.proof{display:flex;flex-wrap:wrap;gap:12px 32px;list-style:none;padding-top:20px;border-top:1px solid var(--line)}
.proof li{display:flex;flex-direction:column;gap:3px}
.proof b{font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.4px}
.proof span{font-size:13px;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
@media(max-width:900px){.features{grid-template-columns:repeat(2,1fr);gap:10px}}
.feature{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px;border-radius:16px;border:1px solid var(--line);background:var(--raised);color:var(--text);text-align:left;box-shadow:var(--shadow-1);transition:transform .18s var(--ease),border-color .18s}
.feature:hover{transform:translateY(-2px);border-color:var(--line-2)}
.feature i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(129,216,191,.12);color:var(--accent)}
.feature i svg{width:22px;height:22px;stroke:currentColor}
.feature b{font-size:16px;line-height:22px}
.feature span{font-size:13px;line-height:19px;color:var(--muted)}

/* product viewer (user's models) inside v5 surfaces */
[data-holo-product-viewer]{display:block;min-height:280px}
.holo-product-panel,.holo-product-copy,.holo-product-steps,.holo-product-hint,.holo-product-kicker{color:var(--text)}
.holo-product-canvas{min-height:280px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── Landing blocks ── */
.landing{display:flex;flex-direction:column;gap:56px;padding-bottom:40px}
.landing .hero-section{padding:24px 0 8px;min-height:0}
.landing-block h2{font-size:26px;letter-spacing:-.6px}
.hero-copy.compact{gap:14px}
.brand.big{font-size:24px}.brand.big img{width:44px;height:44px;border-radius:0}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.steps li{display:flex;gap:14px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--raised)}
.steps .n{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-content:center;background:rgba(129,216,191,.12);color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.steps b{display:block;font-size:16px;line-height:20px;margin-bottom:6px}
.steps p{font-size:13px;line-height:19px;color:var(--muted)}
.app-cta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:24px;padding:28px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(80% 90% at 90% 10%,rgba(147,201,255,.12),transparent 60%),var(--bg-2)}
@media(max-width:800px){.app-cta{grid-template-columns:1fr}}
.app-cta h2{font-size:24px;letter-spacing:-.5px}
.brand-art{width:100%;max-width:360px;justify-self:end;border-radius:18px;object-fit:cover}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:24px;border-top:1px solid var(--line);font-size:13px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot nav a{color:var(--muted)}.foot nav a:hover{color:var(--text)}
.foot .muted{margin-left:auto;font-size:12px}
.page.narrow{max-width:640px;margin:0 auto}
.reply{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.reply p{font-size:14px;line-height:20px;margin-top:2px}
.tile.clickable{cursor:pointer}
.grid.cards .tile .body b{font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid.cards .tile .body .price{font-weight:750;font-size:16px}
.tile .art>.chip.solid{position:absolute;left:10px;top:10px}
.tile .art .tags .chip{position:static;backdrop-filter:blur(8px)}
.avatar.lg.skel{width:72px;height:72px}
.notfound{min-height:50vh;display:grid;place-content:center;text-align:center;gap:10px}
.notfound h1{font-size:40px;letter-spacing:-1px}
/* hero object: the user's case model, frameless inside the hero panel */
.hero-object .holo-product-experience{border:0;background:transparent;margin:0;padding:8px 8px 0;display:block;border-radius:0}
.hero-object .holo-product-canvas{height:440px}
.hero-object .holo-product-copy,.hero-object .holo-product-kicker{display:none}
.hero-object .holo-product-actions{position:absolute;left:16px;bottom:14px;z-index:2}
.hero-object .holo-product-object{position:relative}
.hero-object .holo-product-hint{position:absolute;right:18px;bottom:20px;margin:0}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 20px}
.post-media{max-height:520px}
.post-media img{max-height:480px;object-fit:contain}
/* live lens */
.dropzone.live{position:relative;padding:0;overflow:hidden;background:#000;min-height:360px;cursor:default}
.dropzone.live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dropzone.live .reticle.live{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(58%,240px);aspect-ratio:63/88;height:auto;border-color:rgba(255,255,255,.75);transition:border-color .2s,box-shadow .2s}
.dropzone.live.steady .reticle.live{border-color:var(--accent);box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.dropzone.live.reading .reticle.live{border-color:var(--blue)}
.dropzone.live.found .reticle.live{border-color:var(--green)}
.dropzone.live .live-state{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(11,16,22,.78);backdrop-filter:blur(8px);font-size:13px;font-weight:600;white-space:nowrap}
.dropzone.live .live-stop{position:absolute;top:12px;right:12px}
@media(max-width:720px){
 .header .brand span{display:none}
 .header .sell-cta{font-size:0;padding:0 12px}.header .sell-cta::after{content:"Sell";font-size:13px;font-weight:650}
 .page-head{flex-direction:column;align-items:stretch;gap:10px}
 .page-head p{max-width:none}
 .section-head span{display:none}
 .hero-copy h1{font-size:clamp(34px,10vw,44px);letter-spacing:-1.4px}
 .hero-object .holo-product-canvas{height:320px}
 .landing{gap:36px}
}
.only-mobile{display:none}
@media(max-width:800px){.only-mobile{display:inline-flex}}
.post-actions{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.post-actions::-webkit-scrollbar{display:none}.post-actions .btn{flex:none}
.detail .stage{overflow:hidden}.sheet{max-width:100vw;overflow-x:hidden}

/* product photos */
.product-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.product-photos figure{margin:0;border-radius:18px;overflow:hidden;background:var(--raised);border:1px solid var(--line)}
.product-photos img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.product-photos figcaption{padding:10px 12px;font-size:12px;color:var(--muted)}
.product-photos.large figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.product-photos.large figcaption b{font-size:16px;color:var(--text)}
.product-photos.large figcaption span{font-size:13px;line-height:18px}
.shop-hero .product-photos{grid-column:1/-1}
@media(max-width:720px){.product-photos{grid-template-columns:1fr 1fr}.product-photos.large{grid-template-columns:1fr}}
.holo-text{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy h1{font-family:var(--display);font-weight:800}
.tabs a.lens i{background:var(--holo)!important}

/* ── Two markets ── */
.market-switch{display:flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.market-switch button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s,transform .18s}
.market-switch button:active{transform:scale(.97)}
.market-switch button small{font-size:11px;font-weight:600;opacity:.7}
.market-switch button.on{background:linear-gradient(135deg,rgba(124,242,212,.22),rgba(143,203,255,.18));color:var(--text);box-shadow:inset 0 0 0 1px rgba(124,242,212,.35)}
.market-switch .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(124,242,212,.2)}
.market-note{font-size:13px;color:var(--muted);margin:-4px 0 12px;line-height:1.5;max-width:70ch}
.market-note b{color:var(--text)}
.chip.open-chip{background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
.chips.suggest{margin:-4px 0 10px}
.chips.suggest .btn{font-size:12px}

/* ── Collector Protection ── */
.protect-promo{align-items:center;gap:14px;text-decoration:none;color:inherit;border:1px solid rgba(124,242,212,.35);background:linear-gradient(135deg,rgba(124,242,212,.08),rgba(198,182,255,.08))}
.protect-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--blue));color:var(--bg);flex:none}
.protect-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;padding:26px;border-radius:22px;background:radial-gradient(120% 120% at 0% 0%,rgba(124,242,212,.16),transparent 55%),radial-gradient(100% 100% at 100% 100%,rgba(198,182,255,.16),transparent 55%),var(--surface);border:1px solid var(--line)}
.protect-hero h1{font-size:clamp(26px,3.4vw,40px);letter-spacing:-1px;margin:0}
.protect-hero .perks{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:center}
.protect-hero .perks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text);line-height:1.45}
.protect-hero .perks li svg{flex:none;margin-top:3px;color:var(--accent)}
.protect-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.wheel-wrap{position:relative;width:min(340px,86vw);margin:2px auto;aspect-ratio:1}
.wheel3d{width:100%;height:100%;border-radius:50%;background:radial-gradient(60% 60% at 50% 50%,rgba(124,242,212,.14),transparent 70%)}
.wheel-wrap .wheel{width:100%;height:100%;display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.wheel-wrap .rotor{transform-origin:160px 160px;transform:rotate(var(--angle,0deg));transition:transform 4s cubic-bezier(.12,.72,.08,1)}
.wheel-wrap.spinning .rotor{transition:transform 4s cubic-bezier(.12,.72,.08,1)}
.wheel-wrap .pointer{position:absolute;top:-6px;left:50%;width:0;height:0;transform:translateX(-50%);border-left:12px solid transparent;border-right:12px solid transparent;border-top:24px solid #fff;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.notice.win{background:linear-gradient(135deg,rgba(124,242,212,.2),rgba(198,182,255,.2));border-color:rgba(124,242,212,.5);animation:pop .5s cubic-bezier(.2,1.6,.3,1)}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.giveaway{padding:16px;border-radius:16px;background:linear-gradient(135deg,rgba(255,214,138,.12),rgba(143,203,255,.1));border:1px solid rgba(255,214,138,.3);display:grid;gap:6px}
.giveaway b{font-size:18px;letter-spacing:-.3px}
@media (max-width:720px){.protect-hero{grid-template-columns:1fr;padding:20px}}
@media (prefers-reduced-motion:reduce){.wheel-wrap .rotor{transition:none}}

/* ── Mystery boxes ── */
.mystery{margin:22px 0 6px}
.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.box{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s}
.box:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.box .body{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.box h3{margin:0;font-size:22px;letter-spacing:-.4px}
.box ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.box li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--text);line-height:1.4}
.box li svg{flex:none;margin-top:3px;color:var(--accent)}
.box .price b{font-size:22px;letter-spacing:-.4px}.box .price s{color:var(--muted);margin-left:8px;font-size:14px}
.box-art{position:relative;aspect-ratio:16/10;background:radial-gradient(90% 90% at 50% 100%,rgba(124,242,212,.14),transparent 60%),#0A0E15;overflow:hidden;isolation:isolate;cursor:grab}
.box-art .glow{position:absolute;inset:auto -20% -60% -20%;height:120%;background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklab,var(--b,var(--blue)) 40%,transparent),transparent 70%);filter:blur(30px);z-index:0;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.6}50%{opacity:1}}
.box-art .face{position:relative;z-index:1;width:150px;height:110px;border-radius:14px;background:linear-gradient(145deg,color-mix(in oklab,var(--a,var(--accent)) 70%,#0a0e15),color-mix(in oklab,var(--b,var(--blue)) 70%,#0a0e15));box-shadow:0 20px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);display:grid;place-items:center;gap:6px;transform:perspective(600px) rotateX(18deg) rotateY(-14deg);transition:transform .4s}
.box:hover .box-art .face{transform:perspective(600px) rotateX(10deg) rotateY(-6deg) translateY(-4px)}
.box-art .face img{width:40px;height:40px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.box-art .face b{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--bg);background:rgba(255,255,255,.75);padding:3px 10px;border-radius:999px}
.box-art .lid{position:absolute;z-index:2;width:164px;height:26px;top:calc(50% - 74px);left:calc(50% - 82px);border-radius:8px;background:linear-gradient(90deg,color-mix(in oklab,var(--b,var(--blue)) 80%,#fff),color-mix(in oklab,var(--a,var(--accent)) 80%,#fff));box-shadow:0 10px 20px rgba(0,0,0,.4);transform:perspective(600px) rotateX(40deg) rotateY(-14deg) translateY(-6px);opacity:.95}
.box.tier-vault{border-color:rgba(198,182,255,.5)}
.box.tier-flare{border-color:rgba(255,184,111,.4)}

.mystery-teaser{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:28px;border-radius:24px;background:radial-gradient(90% 100% at 100% 0%,rgba(198,182,255,.14),transparent 60%),var(--surface);border:1px solid var(--line)}
.mystery-teaser h2{font-size:clamp(24px,3vw,36px);line-height:1.12;letter-spacing:-.8px;margin:6px 0 10px}
.mystery-teaser .teaser-copy p{margin:0 0 16px;line-height:1.55}
.mystery-teaser .box-art{aspect-ratio:16/11;border-radius:20px}
@media (max-width:760px){.mystery-teaser{grid-template-columns:1fr;padding:20px}}

/* ── Home reward row ── */
.reward-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:14px 0 4px}
.reward-card{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:transform .2s,border-color .2s}
.reward-card:hover{transform:translateY(-2px);border-color:rgba(124,242,212,.45)}
.reward-card .rc-art{width:72px;height:72px;border-radius:14px;flex:none;overflow:hidden;display:grid;place-items:center;background:#0A0E15}
.reward-card .wheel-mini{background:conic-gradient(#1FBFA9,#2F7FD6,#6F55DD,#D9942E,#D9527C,#138F7D,#2A62B8,#5540BF,#1FBFA9);position:relative}
.reward-card .wheel-mini::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px var(--accent)}
.reward-card .wheel-mini img{position:relative;z-index:1;width:26px;height:26px}
.reward-card .rc-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.reward-card .rc-copy b{font-size:15px}.reward-card .rc-copy small{font-size:12px;color:var(--muted);line-height:16px}
.reward-card svg{color:var(--muted);flex:none}

/* Anchored sections clear the sticky header */
[id]{scroll-margin-top:calc(var(--header,64px) + 16px)}

/* ── Discover hub ── */
.discover{margin:14px 0 6px}
.discover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.disc{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;min-width:0;transition:transform .18s,border-color .18s,background .18s}
.disc:hover{transform:translateY(-2px);border-color:rgba(124,242,212,.45)}
.disc:active{transform:scale(.98)}
.disc .disc-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--raised);color:var(--accent)}
.disc .disc-icon img{width:22px;height:22px}
.disc.wheel .disc-icon{background:conic-gradient(#1FBFA9,#2F7FD6,#6F55DD,#D9942E,#D9527C,#138F7D,#2A62B8,#5540BF,#1FBFA9)}
.disc.crate .disc-icon{background:linear-gradient(135deg,rgba(198,182,255,.35),rgba(124,242,212,.35));color:#fff}
.disc.tier .disc-icon{background:linear-gradient(135deg,var(--accent),var(--blue));color:var(--bg)}
.disc b{font-size:14px;line-height:1.25;letter-spacing:-.1px}
.disc small{font-size:12px;line-height:1.35;color:var(--muted)}
@media (max-width:900px){.discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.disc{padding:10px}.disc b{font-size:13px}}
/* ── Live popups ── */
.live-pop{position:fixed;right:16px;bottom:calc(var(--tabs) + 16px + env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;gap:8px;max-width:min(360px,calc(100vw - 32px))}
@media (min-width:761px){.live-pop{bottom:20px}}
.live-pop a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--raised);border:1px solid rgba(124,242,212,.4);color:var(--text);text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,.5);animation:livein .45s cubic-bezier(.2,1.4,.3,1)}
.live-pop a .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(124,242,212,.2);flex:none;animation:pulse 1.4s infinite}
.live-pop a b{display:block;font-size:14px;line-height:1.25}.live-pop a small{color:var(--muted);font-size:12px;line-height:1.3}
@keyframes livein{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(124,242,212,.2)}50%{box-shadow:0 0 0 8px rgba(124,242,212,.05)}}

.member-strip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(124,242,212,.12),rgba(198,182,255,.1));border:1px solid rgba(124,242,212,.4);color:var(--text);text-decoration:none}
.member-strip.on{background:var(--surface);border-color:var(--line)}
.member-strip .ms-badge{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--blue));color:var(--bg);flex:none}
.member-strip b{display:block;font-size:14px;line-height:1.25}.member-strip small{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px}

/* Payment and account surfaces remain readable at narrow widths and text zoom. */
.btn{max-width:100%;white-space:normal;line-height:1.4;padding-top:10px;padding-bottom:10px;text-align:center;overflow-wrap:anywhere}
.chips .btn,.post-actions .btn{white-space:nowrap;overflow-wrap:normal}
.row>.grow,.page-head>div,.member-strip>span{min-width:0}
.page-head{gap:18px;flex-wrap:wrap}
.page-head p{max-width:64ch;line-height:1.6;margin-top:10px}
.plan{min-width:0;gap:14px;padding:22px}
.plan ul{line-height:1.6;padding-left:18px}
.plan li+li{margin-top:8px}
.plan .price{line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.member-strip b,.member-strip small{overflow-wrap:anywhere}
.notice{line-height:1.55;overflow-wrap:anywhere}
input,textarea,select{min-width:0}
@media(max-width:420px){.plans{grid-template-columns:minmax(0,1fr)}.protect-promo{flex-wrap:wrap}.member-strip{gap:12px}.member-strip>.btn{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

header .btn{flex-shrink:0;white-space:nowrap}.hero-copy .lead{max-width:48ch;line-height:1.6}.hero-copy h1{letter-spacing:-.035em}

/* Clear entry points: commerce and collection have the same visible hierarchy. */
.hero-free{font-size:14px;line-height:1.7;color:var(--muted);margin-top:18px;max-width:42ch}
.hero-free a{display:block;color:var(--text);text-decoration:underline;text-underline-offset:4px}
.entry-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:24px 0 40px;background:var(--raised)}
.entry-paths>a{display:flex;align-items:center;gap:12px;padding:22px 18px;min-width:0;border-right:1px solid var(--line);transition:background .18s,transform .18s}
.entry-paths>a:last-child{border-right:0}.entry-paths>a:hover{background:var(--raised-2)}.entry-paths>a:active{transform:scale(.98)}
.entry-paths i{display:grid;place-items:center;color:var(--accent);flex:none}.entry-paths span{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0}.entry-paths b{font-size:15px;line-height:1.3}.entry-paths small{font-size:13px;line-height:1.5;color:var(--muted)}.entry-paths>a>svg{flex:none}
.membership-preview{border-top:1px solid var(--line);padding-top:32px}
.membership-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--raised)}
.membership-options>a{display:flex;flex-direction:column;gap:16px;padding:26px;border-right:1px solid var(--line);transition:background .18s}.membership-options>a:last-child{border:0}.membership-options>a:hover{background:var(--raised-2)}
.membership-options b{font-size:34px;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums}.membership-options b small{font-size:14px;letter-spacing:0;font-weight:400;color:var(--muted);margin-left:6px}
.membership-options p{color:var(--muted);line-height:1.6;margin:0}.membership-options strong{font-size:14px;font-weight:600;line-height:1.6}.plan-link{margin-top:auto;font-size:14px;color:var(--accent)}
.plan-terms{font-size:13px;color:var(--muted);line-height:1.7;max-width:95ch;margin-top:16px}
.discovery-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:12px}.discovery-links a{font-size:14px;line-height:1.5;min-height:44px;display:inline-flex;align-items:center;color:var(--muted)}.discovery-links a:first-child{color:var(--accent)}.discovery-links a:hover{color:var(--text)}
.product-photos.large figure>a{display:block;height:100%;transition:background .18s}.product-photos.large figcaption{gap:8px;line-height:1.5}.product-photos.large figcaption strong{color:var(--text);font-size:16px;font-variant-numeric:tabular-nums}
@media(max-width:1100px){.header{gap:12px;padding-inline:20px}.header .search-btn span,.header .search-btn kbd{display:none}.entry-paths{grid-template-columns:repeat(2,minmax(0,1fr))}.entry-paths>a:nth-child(2){border-right:0}.entry-paths>a:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:900px){
 .public-header{height:auto;min-height:56px;flex-wrap:wrap;padding-top:6px;padding-bottom:0;gap:6px 10px}
 .public-header .nav{display:flex;order:3;flex-basis:100%;min-width:0;overflow-x:auto;scrollbar-width:none;gap:4px;border-top:1px solid var(--line)}
 .public-header .nav::-webkit-scrollbar{display:none}.public-header .nav>a{flex:none;min-height:44px;display:flex;align-items:center;padding:0 12px;font-size:14px}
 .public-header .nav>a:first-child{padding-left:0}.desktop-shop{display:none}
 .landing .hero-section{gap:22px;padding-top:22px}.landing .hero-copy .lead{font-size:16px;line-height:1.65}
 .landing .hero-copy h1{font-size:clamp(34px,8.5vw,52px);line-height:1.12}.landing .hero-copy .row{gap:10px}.landing .hero-copy .row .btn{padding:13px 16px;font-size:14px}
 .membership-options{grid-template-columns:1fr}.membership-options>a{border-right:0;border-bottom:1px solid var(--line);padding:24px;gap:12px}.membership-options b{font-size:32px}
 .entry-paths>a{padding:18px 14px;gap:10px}.entry-paths>a>svg{display:none}.entry-paths small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.entry-paths>a,.membership-options>a,.product-photos.large figure>a{transition:none}}

/* ——— Feel pass ———————————————————————————————————————————————
   Everything tappable answers immediately, nothing lurches, and long lists
   stop paying to lay out what is off screen. All of it yields to the
   viewer's reduced-motion setting. */
a,button,summary,[role="button"],label,select,input[type="checkbox"],input[type="radio"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* One press curve for every tappable surface, so the whole app answers the same way. */
.btn,.tile,.chip,.mini,.icon-btn,.heart,.ask-row,.vault-live-card,.gd-owned-card,.gd-event{transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .16s ease,border-color .16s ease,opacity .16s ease}
.tile:active,.mini:active,.vault-live-card:active,.gd-owned-card:active,.gd-event:active{transform:scale(.985)}
.icon-btn:active,.heart:active,.chip:active,.ask-row:not([disabled]):active{transform:scale(.94)}
.btn[disabled],.btn:disabled,button[disabled]{cursor:not-allowed}
/* Keyboard focus is never the thing that disappears. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent,var(--accent));outline-offset:2px;border-radius:8px}
/* A tapped row should not select text on the way down. */
.btn,.tile,.chip,.mini,.icon-btn,.heart,.ask-row,.gd-event,.vault-live-card{-webkit-user-select:none;user-select:none}
/* Momentum scrolling stays inside its own rail instead of dragging the page. */
.chips,.mini-row,.gd-card-rail,.gd-owned-rail,.vault-live-rail,.gd-event-list,.gd-chat-log,.grid{overscroll-behavior:contain}
.chips,.mini-row,.gd-card-rail,.gd-owned-rail,.vault-live-rail{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.chips>*,.mini-row>*,.gd-card-rail>*,.gd-owned-rail>*,.vault-live-rail>*{scroll-snap-align:start}
/* Images fade in instead of popping, and never reflow the row they land in. */
.tile .art img,.gd-owned-card img,.mini .art img{transition:opacity .28s ease}
@media(prefers-reduced-motion:reduce){
 .btn,.tile,.chip,.mini,.icon-btn,.heart,.ask-row,.vault-live-card,.gd-owned-card,.gd-event,.tile .art img{transition:none}
 .btn:active,.tile:active,.mini:active,.icon-btn:active,.heart:active,.chip:active,.vault-live-card:active,.gd-owned-card:active,.gd-event:active,.ask-row:active{transform:none}
 .chips,.mini-row,.gd-card-rail,.gd-owned-rail,.vault-live-rail{scroll-snap-type:none}
}

/* Continue with Google / Apple — above the email fields, because for most people
   it is the faster door, and visually quieter than the primary action so the page
   still has one obvious next step. */
.auth-providers{display:grid;gap:8px;margin-bottom:4px}
.auth-provider{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;font-weight:600}
.auth-provider svg{flex:0 0 auto}
.auth-provider span{line-height:1}
.auth-divider{display:flex;align-items:center;gap:12px;margin:6px 0 2px;color:var(--muted,#8A97A3);font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line,var(--line))}

/* Seller setup, as a ladder. A seller's real question is "can I get paid yet, and
   if not what is left" — position and next step answer it, a status word does not. */
.seller-journey{display:grid;gap:12px;padding:16px;border-radius:18px;border:1px solid var(--line,var(--line));background:var(--card,var(--surface))}
.seller-journey.complete{border-color:rgba(124,242,212,.45)}
.seller-journey.blocked{border-color:rgba(228,105,94,.45)}
.seller-journey-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.seller-journey-head b{display:block;font-size:16px;line-height:22px;color:var(--text,#F3F6F7)}
.seller-journey-head small{display:block;font-size:13px;line-height:19px;color:var(--muted,#8A97A3);margin-top:3px}
.seller-journey-percent{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--accent,var(--accent));font-variant-numeric:tabular-nums}
.seller-progress{height:5px;border-radius:3px;background:var(--line,var(--line));overflow:hidden}
.seller-progress>span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--blue));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.seller-steps{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.seller-step{display:flex;align-items:flex-start;gap:10px}
.seller-step b{display:block;font-size:14px;line-height:20px;color:var(--muted,#8A97A3)}
.seller-step small{display:block;font-size:12px;line-height:17px;color:var(--muted,#8A97A3);opacity:.85}
.seller-step.done b,.seller-step.current b{color:var(--text,#F3F6F7)}
.seller-step.current b{font-weight:700}
.seller-step.todo small{display:none}
.seller-step svg{flex:0 0 auto;margin-top:3px;color:var(--accent,var(--accent))}
.seller-step-dot,.seller-step-empty{flex:0 0 auto;width:15px;height:15px;border-radius:999px;margin-top:3px;box-sizing:border-box}
.seller-step-dot{background:var(--accent,var(--accent));box-shadow:0 0 0 4px rgba(124,242,212,.18)}
.seller-step-empty{border:2px solid var(--line,var(--line))}
@media(prefers-reduced-motion:reduce){.seller-progress>span{transition:none}}

/* ===========================================================================
   2026 REDESIGN — spacing, hierarchy and surfaces
   ===========================================================================
   Written against how StockX, GOAT and Grailed lay a page out, in HoloTap's own
   dark palette. Their pages are not busier than this one was; they are quieter,
   and they use space instead of borders to say what belongs together.

   Three habits this undoes:

   * Everything was boxed. A border around every group is the cheapest way to
     separate things and the least readable — a page of framed rectangles has no
     hierarchy, because every frame claims the same importance. Space separates;
     a border now means "this is a distinct object you can act on".
   * Sections sat 18px apart, the same distance as the rows inside them, so a
     page read as one long list rather than as several parts.
   * Headings and body were a few pixels apart in size. Nothing led. */

.main{padding:var(--s-6) var(--s-6) calc(var(--tabs) + var(--s-8))}
.page-head{align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-5)}
.page-head h1+p,.page-head h2+p{margin-top:var(--s-2);color:var(--muted);max-width:60ch}
.page>section+section,.page>.stack+section,.page>section+.stack{margin-top:var(--s-7)}
.stack{gap:var(--s-3)}
.page.stack{gap:var(--s-6)}

/* Section headings carry a micro-label above them rather than a rule beside
   them — the label says what the section is, the space says where it starts. */
.page section>h2,.page section>.page-head h2{margin-bottom:var(--s-1)}
.page section>.label{display:block;margin-bottom:var(--s-2)}

/* Surfaces: one step of elevation, not four. A card is raised because you can
   act on it; a panel is flat because you only read it. */
.card{border-radius:var(--r-lg);box-shadow:none;border-color:var(--line)}
.card.raised{box-shadow:var(--shadow-1)}
.empty{padding:var(--s-8) var(--s-5);gap:var(--s-3);border-style:solid;border-color:var(--line);background:transparent}
.empty h2,.empty h3{font-size:18px;letter-spacing:-.4px}
.empty p{color:var(--muted);max-width:44ch;line-height:1.65}

/* Controls sized for a thumb, and a primary action that reads as the one thing
   to do on the page. */
.btn{min-height:46px;padding:0 20px;font-size:14px;border-radius:12px}
.btn.primary{font-weight:750}
.btn.sm{min-height:38px;padding:0 13px;font-size:12px}
.input{min-height:48px;font-size:16px;border-radius:12px}

@media(max-width:900px){
 .main{padding:var(--s-5) var(--s-4) calc(var(--tabs) + var(--s-7))}
 .page>section+section,.page>.stack+section,.page>section+.stack{margin-top:var(--s-6)}
 .page.stack{gap:var(--s-5)}
}
@media(max-width:560px){
 .main{padding:var(--s-4) var(--s-4) calc(var(--tabs) + var(--s-6))}
 .empty{padding:var(--s-7) var(--s-4)}
}

/* Card grids everywhere else — the vault, a collector's shelf, search results.
   Same reasoning as the market: the card is the product, so give it the frame
   and take back the padding that was shrinking it. */
.grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--s-6) var(--s-4)}
.tile{border-radius:14px;box-shadow:none;transition:transform var(--fast) var(--ease),border-color var(--fast)}
.tile:hover{transform:translateY(-3px);border-color:var(--line-2)}
.tile .art{padding:8px;border-bottom-color:var(--line)}
.tile .body{gap:var(--s-1);padding:var(--s-3) var(--s-3) var(--s-4)}
.grid.cards .tile .body b{font-size:14px;line-height:19px}

/* A shelf of cards is a list of things, so it is announced as one and it wraps
   sensibly rather than forcing a horizontal scroll on a phone. */
@media(max-width:640px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-3)}
 .tile .art{padding:6px}
}
@media(prefers-reduced-motion:reduce){.tile,.tile:hover{transition:none;transform:none}}

/* The pinned header sat tight against the page. Give it the same gutter as the
   content it sits above, so the brand and the content share one left edge. */
.header{padding:0 var(--s-6);gap:var(--s-5)}
@media(max-width:900px){.header{padding:0 var(--s-4);gap:var(--s-4)}}

/* Finder rows: a keyboard highlight, and the always-there actions. */
.finder-results .thread.is-active,.finder-results .thread:hover{background:var(--raised);outline:1px solid var(--line-2)}
.finder-action b{color:var(--accent)}
/* Finder groups keep the result list's own spacing. */
.finder-options,.finder-group{display:flex;flex-direction:column;gap:inherit}

/* Brand mark polish — keep the holographic H centered and visually weighted
   the same on header, auth, footer, and loading skeleton surfaces. */
.brand{min-height:44px;line-height:1;align-items:center;gap:11px}
.brand img{display:block;flex:0 0 auto;width:34px;height:34px;padding:3px;border-radius:11px;object-fit:contain;object-position:center;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 9px 22px rgba(124,242,212,.18);filter:drop-shadow(0 7px 14px rgba(124,242,212,.22));transform:translateY(0)}
.brand span{display:inline-flex;align-items:center;min-height:1em;line-height:1;white-space:nowrap;background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand.big{gap:13px;min-height:54px}.brand.big img{width:50px;height:50px;padding:4px;border-radius:14px}
.header .brand{margin-right:2px}.header .brand img{width:36px;height:36px}
.header .back-btn{flex:0 0 auto;margin-right:-6px}
@media(max-width:900px){.header .back-btn{width:44px;height:44px;border-radius:14px}}
@media(max-width:420px){.header:has(.back-btn) .brand span{display:none}}
.foot .brand{justify-content:center;align-items:center;gap:10px}.foot .brand img{width:34px;height:34px}
.route-loading .label{text-align:center;display:block}
@media(max-width:720px){.header .brand{gap:8px;min-width:44px}.header .brand img{width:34px;height:34px}.header .brand span{display:inline-flex;font-size:18px}.brand.big img{width:46px;height:46px}}
@media(max-width:390px){.header .brand span{display:none}.header .brand{margin-right:auto}}

/* The tag's QR code, drawn on request from a card's detail page. */
.tag-qr{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.tag-qr p{margin:0;max-width:44ch}
.tag-qr-figure{display:flex;flex-direction:column;gap:6px;align-items:center;margin:0;padding:12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.tag-qr-figure img{display:block;width:180px;height:180px;border-radius:8px;background:var(--bg)}
.tag-qr-figure figcaption{text-align:center;max-width:24ch}

/* The packing slip a seller draws for an order they are shipping. */
.order-slip{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:14px 0}
.order-slip p{margin:0;max-width:46ch;font-size:var(--fs-caption)}
.order-slip-preview{margin:0;padding:10px;border-radius:var(--r);background:#fff;border:1px solid var(--line);max-width:260px}
.order-slip-preview img{display:block;width:100%;height:auto;border-radius:4px}

/* branded empty-card state */
.card-placeholder[data-branded="true"]{position:relative;display:grid;place-items:center;align-content:center;gap:10px;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(138,236,221,.22),transparent 38%),linear-gradient(150deg,#263139,#10161d 58%,#202931);color:var(--text);border-color:rgba(132,232,217,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 20px 34px rgba(3,7,12,.65);letter-spacing:.08em}.card-placeholder[data-branded="true"]::before{content:"";position:absolute;inset:11px;border:1px solid rgba(212,245,239,.12);border-radius:6px}.card-placeholder[data-branded="true"]::after{content:"";position:absolute;width:130%;height:34%;left:-15%;top:16%;background:linear-gradient(100deg,transparent,rgba(118,229,214,.20),rgba(172,141,255,.16),transparent);transform:rotate(-19deg);opacity:.85}.card-placeholder[data-branded="true"] i{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,rgba(117,238,219,.88),rgba(156,132,255,.78));color:#071012;font-style:normal;font-weight:850;letter-spacing:-.06em;box-shadow:0 10px 18px rgba(124,242,212,.25)}.card-placeholder[data-branded="true"] b,.card-placeholder[data-branded="true"] small{position:relative;z-index:1;max-width:78%;text-align:center;line-height:1.45}.card-placeholder[data-branded="true"] b{font-size:11px;color:#e8f4f2;font-weight:650}.card-placeholder[data-branded="true"] small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.tile .art .card-placeholder[data-branded="true"]{width:min(74%,150px);height:min(76%,210px);padding:18px 8px 14px;margin:auto;align-self:center;justify-self:center;transform:translateZ(0) rotateY(-8deg) rotateX(3deg)}

/* Selection follows the route; the center scan shortcut is not an active tab everywhere. */
.atelier-app .tabs a{position:relative;border-radius:14px;transition:background .18s ease,color .18s ease}
.atelier-app .tabs a[aria-current=page]{background:#90e1d21a;color:#a9ece0;box-shadow:inset 0 -2px #90e1d2}
.atelier-app .tabs a.lens:not([aria-current=page]){color:#aeb8c5}
.atelier-app .tabs:not(.holo-command-dock) a.lens:not([aria-current=page]) i{background:#303a49!important;color:#d8e5ed;box-shadow:none}
.atelier-app .atelier-sidebar a.atelier-scan:not([aria-current=page]){background:transparent;color:#b7c5ce}
.atelier-app .atelier-sidebar a[aria-current=page]{box-shadow:inset 3px 0 #90e1d2}
.atelier-app .nav a[aria-current=page]{color:#a9ece0}
@media(prefers-reduced-motion:reduce){.atelier-app .tabs a{transition:none}}

/* A new deployment never replaces the active page or an unfinished checkout. */
.release-update{position:fixed;right:20px;bottom:max(22px,env(safe-area-inset-bottom));z-index:100;display:flex;align-items:center;gap:14px;max-width:min(480px,calc(100vw - 32px));padding:16px;border:1px solid #54676c;border-radius:16px;background:#172127f5;box-shadow:0 12px 36px #0005;color:#eef2f6;font-size:14px;line-height:1.5}
.release-update>span{flex:1;min-width:0}.release-update b,.release-update small{display:block}.release-update small{font-size:12px;color:#becbd0;margin-top:3px}.release-update button{min-height:44px;padding:8px 12px;background:#28423f;border:1px solid #658e84;border-radius:10px;color:#e4f6f0;font:inherit;cursor:pointer;flex-shrink:0}.release-update [data-release-dismiss]{background:transparent;border:0;font-size:24px;padding:8px}.release-update button:focus-visible{outline:2px solid #a5e7d8;outline-offset:3px}@media(max-width:600px){.release-update{right:16px;bottom:calc(82px + env(safe-area-inset-bottom));flex-wrap:wrap}.release-update>span{flex-basis:calc(100% - 52px)}.release-update [data-release-dismiss]{position:absolute;right:6px;top:10px}}

/* Activity: readable grouped updates, confirmed read state and quiet feedback. */
.activity-inbox{max-width:860px;margin-inline:auto}.activity-day{margin:14px 0 10px}.activity-group{overflow:hidden}.activity-item{width:100%;padding:18px;gap:14px;text-align:left;align-items:center}.activity-item .grow{display:grid;gap:5px;min-width:0}.activity-item b{font-weight:500;line-height:1.5;overflow-wrap:anywhere}.activity-item.is-unread{background:rgba(124,242,212,.045)}.activity-item.is-unread b{font-weight:650}.activity-item .avatar{width:44px;height:44px;flex-shrink:0}.activity-unread{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}.activity-item .label{font-size:10px}.activity-item:hover{background:var(--raised)}
@media(prefers-reduced-motion:no-preference){.activity-item{transition:background .18s,transform .16s}.activity-item:active{transform:scale(.99)}}

.activity-inbox>section{margin:0}.activity-inbox .activity-item small.muted{line-height:1.4}

/* Card details use semantic groups without the browser's inset fieldset frame. */
[data-card-details] fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
[data-card-details] fieldset legend {
  padding: 0;
  margin-block: 16px 12px;
  font-weight: 650;
  font-size: 1rem;
}
[data-card-details] .field { min-inline-size: 0; }

/* Offers keep the decision and fee details full-width on narrow screens. */
@media(max-width:520px){
 .offer{grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start}
 .offer>.thumb{grid-column:1;grid-row:1;width:48px}
 .offer>.amt{grid-column:2;grid-row:1;align-self:center}
 .offer>.stack{grid-column:1/-1;grid-row:2}
}

/* Condition repair is a task dialog above app chrome, with one photo in view. */
.sheet-root.sheet-root-top{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;color:var(--text);padding:0;z-index:12000}
.sheet-root-top::backdrop{background:transparent}
.sheet-root-top:not([open]){display:none}
.condition-repair{display:flex;flex-direction:column;gap:20px}
.condition-repair-heading{display:grid;gap:6px;padding-right:30px}
.condition-repair-heading h2,.condition-repair-heading p,.condition-repair-shot h3,.condition-repair-shot p{margin:0}
.condition-repair-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.condition-repair-step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:58px;padding:4px 2px;background:none;border:0;color:var(--muted);font:inherit;font-size:10px;line-height:1.3;text-align:center}
.condition-repair-step span{display:grid;place-items:center;width:28px;height:28px;border:1px solid #405052;border-radius:50%;font-size:12px;font-weight:700}
.condition-repair-step[aria-current="step"]{color:var(--accent)}
.condition-repair-step[aria-current="step"] span{border-color:var(--accent);background:#173a32}
.condition-repair-step.done span{background:var(--accent);border-color:var(--accent);color:#09271f}
.condition-repair-shot{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid #34413f;border-radius:18px;background:#101917}
.condition-repair-shot h3{font-size:18px;margin-bottom:6px}
.condition-repair-shot p{font-size:14px;line-height:1.5;color:var(--muted)}
.condition-repair-image{display:block;width:100%;height:clamp(150px,26vh,250px);object-fit:contain;border-radius:12px;background:#090f0e}
.condition-repair-placeholder{display:grid;place-content:center;gap:8px;min-height:130px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed #3a514b;border-radius:12px}
.condition-repair-placeholder span{font-size:32px;color:var(--accent)}
.condition-repair-actions{display:flex;flex-wrap:wrap;gap:10px}
.condition-repair-actions .primary{flex:1;min-width:160px}
.condition-repair-help{font-size:12px;line-height:1.6;color:var(--muted)}
.condition-repair-help summary{padding:6px 0;cursor:pointer}
.condition-repair-help p{margin:10px 0}
.condition-repair-footer{display:flex;flex-direction:column;gap:8px;position:sticky;bottom:-24px;padding:12px 0 max(8px,env(safe-area-inset-bottom));background:var(--panel,#191e24);border-top:1px solid #34413f}
@media(min-width:901px){.sheet-root.sheet-root-top{padding:24px}}
@media(max-width:420px){.condition-repair{gap:16px}.condition-repair-shot{padding:14px}.condition-repair-heading h2{font-size:22px}.condition-repair-step{font-size:10px}}

/* ---------------------------------------------------------------- v2 shell
   Ink & Holo: the header carries a holographic hairline, the dock keeps five
   quiet glyphs with one raised holo Scan button, and selection is a short mint
   underline — the same chrome the iPhone app draws. */
.header{background:rgba(6,8,13,.9);border-bottom:0}
.header:after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--holo);opacity:.5;pointer-events:none}
.header .brand span{font-weight:800;letter-spacing:-.6px}
.icon-btn{width:44px;height:44px;border-radius:999px;background:transparent;border:1px solid transparent}
.icon-btn:hover{background:var(--raised)}
.atelier-app .tabs.holo-command-dock{padding:4px 8px calc(4px + env(safe-area-inset-bottom));background:rgba(6,8,13,.92);border-top:1px solid var(--line)}
.atelier-app .tabs.holo-command-dock a{min-height:56px;gap:2px;border-radius:0;font-size:var(--fs-label);font-weight:600;letter-spacing:.2px;line-height:14px;color:var(--muted)}
.atelier-app .tabs.holo-command-dock a i.dock-glyph{display:flex;align-items:center;justify-content:center;width:48px;height:28px;border-radius:999px;transition:background var(--fast),color var(--fast)}
.atelier-app .tabs.holo-command-dock a[aria-current=page]{background:transparent;color:var(--accent);box-shadow:none}
.atelier-app .tabs.holo-command-dock a[aria-current=page] i.dock-glyph{background:rgba(124,242,212,.14)}
.atelier-app .tabs.holo-command-dock a[aria-current=page]:after{content:'';position:absolute;top:0;left:50%;width:24px;height:2px;margin-left:-12px;border-radius:2px;background:var(--accent)}
.atelier-app .tabs.holo-command-dock a.lens i.dock-glyph{width:40px;height:40px;margin:-12px 0 0;padding:2px;border-radius:999px;background:var(--holo)!important;box-shadow:0 6px 18px rgba(6,8,13,.5)}
.atelier-app .tabs.holo-command-dock a.lens i.dock-glyph svg{width:36px;height:36px;padding:7px;border-radius:999px;background:var(--accent);color:var(--accent-ink);stroke:var(--accent-ink);stroke-width:2.2}
.atelier-app .tabs.holo-command-dock a.lens:not([aria-current=page]){color:var(--muted)}
.atelier-app .tabs.holo-command-dock .dock-selection{display:none}
.atelier-app .nav a[aria-current=page]{color:var(--accent)}
.atelier-app .atelier-sidebar a[aria-current=page]{box-shadow:inset 3px 0 var(--accent);color:var(--text)}

/* --------------------------------------------------------------- v2 motion
   Ambient only, and the same gestures as the iPhone app: the Scan ring turns,
   unseen story rings carry a turning sheen, live dots breathe, a chosen chip
   pops once, pages rise in. app.css already stops every animation under
   prefers-reduced-motion. */
@keyframes holo-turn{to{transform:rotate(360deg)}}
@keyframes hairline-shift{to{background-position:300% 0}}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes chip-pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes rise-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.header:after{background:var(--holo);background-size:300% 100%;animation:hairline-shift 14s linear infinite}
.atelier-app .tabs.holo-command-dock a.lens i.dock-glyph{position:relative;overflow:hidden;background:transparent!important}
.atelier-app .tabs.holo-command-dock a.lens i.dock-glyph:before{content:'';position:absolute;inset:-30%;background:conic-gradient(from 0deg,#7CF2D4,#8FCBFF,#C6B6FF,#FFB3DD,#7CF2D4);animation:holo-turn 7s linear infinite}
.atelier-app .tabs.holo-command-dock a.lens i.dock-glyph svg{position:relative}
.ring{background:transparent;overflow:hidden}
.ring:before{content:'';position:absolute;inset:-30%;border-radius:50%;background:conic-gradient(from 200deg,#7CF2D4,#8FCBFF,#C6B6FF,#FFB3DD,#7CF2D4);animation:holo-turn 7s linear infinite}
.ring .avatar,.ring .plus{position:relative}
.story.seen .ring:before{background:var(--line);animation:none}
.chip[aria-pressed=true],.chip[aria-selected=true],.chip.on,.gd-leagues button[aria-pressed=true]{animation:chip-pop .28s var(--ease)}
.live-dot,.gd-live-dot,.live .dot{animation:live-pulse 1.6s ease-in-out infinite}
.main>.page,.main>section,.main>article{animation:rise-in .26s var(--ease) both}
/* Market memory: a saved listing whose ask fell, and the recently viewed trail. */
.tile-drop{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:var(--fs-micro);font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums}
.market-recent{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)}
.market-recent h2{font-size:var(--fs-heading);line-height:var(--lh-snug);letter-spacing:-.4px}
.market-recent-row{display:flex;gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:var(--s-1);margin:0 calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
.market-recent-tile{flex:0 0 96px;display:grid;gap:var(--s-1);color:var(--text);scroll-snap-align:start}
.market-recent-tile .art{display:block;height:124px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center;padding:4px}
.market-recent-tile .art img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.market-recent-tile .name{font-size:var(--fs-caption);line-height:var(--lh-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.market-recent-tile b{font-size:var(--fs-compact);font-variant-numeric:tabular-nums}
.atelier-app .tabs.holo-command-dock a[aria-current=page] i.dock-glyph{animation:chip-pop .3s var(--ease)}
/* Game room: Game · Chat · Play, and the views under Game (the same shape as the iPhone app). */
.gd-room-views{display:flex;gap:4px;padding:6px 0 2px;overflow-x:auto;scrollbar-width:none}
.gd-room-views::-webkit-scrollbar{display:none}
.gd-room-views button{flex:none;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--fs-small);font-weight:600;cursor:pointer}
.gd-room-views button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.gd-room-cards{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--accent);font-size:var(--fs-caption);font-weight:600;cursor:pointer;width:100%;text-align:left}
.gd-room-faces{display:flex}.gd-room-faces img{width:22px;height:31px;border-radius:4px;object-fit:cover;margin-right:-4px;border:1px solid var(--bg);background:var(--surface)}
.gd-room-cards>span:not(.gd-room-faces){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-heading-actions .gd-hub-more{position:relative}
.gd-heading-actions .gd-hub-more>div{position:absolute;right:0;top:calc(100% + 6px);min-width:200px;z-index:30}