/* ShulkerShop v5 — clean pass.
   Type: Space Grotesk (display) + Inter (body). Silkscreen is used for the logo wordmark only.
   Spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 (the --s* tokens). Purple is an accent, not a surface. */
:root{
  --bg:#09080d; --surface:#111017; --surface2:#17151f; --line:#211e2b; --line2:#2d2939;
  --text:#ecebf2; --muted:#9a97a8; --dim:#6c6979;
  --accent:#8b5cf6; --accent2:#a78bfa; --accent-ink:#c4b5fd; --ok:#4ade80;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r:10px; --r-lg:14px; --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--text);font:400 15px/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;image-rendering:pixelated}
button,input,select{font:inherit;color:inherit}
::selection{background:#8b5cf655}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s5)}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1}
h1{font-size:clamp(36px,5vw,56px)}
h2{font-size:clamp(26px,3vw,32px)}
h3{font-size:17px;letter-spacing:-.01em}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font-size:13px;font-weight:500;color:var(--accent-ink);margin-bottom:var(--s3)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:#09080dcc;backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;height:64px;gap:var(--s6)}
.brand{display:flex;align-items:center;gap:10px;font-family:"Silkscreen",monospace;font-size:16px;letter-spacing:.02em;white-space:nowrap}
.brand img{width:24px;height:24px}
.nav-links{display:flex;gap:var(--s1)}
.nav-links a{padding:6px 12px;border-radius:8px;color:var(--muted);font-size:14px;font-weight:500;transition:color .15s,background .15s}
.nav-links a:hover,.nav-links a.on{color:var(--text)}
.nav-links a.on{background:var(--surface2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.burger{display:none;width:36px;height:36px;border:1px solid var(--line2);border-radius:8px;background:none;cursor:pointer;place-items:center}
.burger i,.burger i:before,.burger i:after{display:block;width:14px;height:1.5px;background:var(--text);position:relative;transition:transform .2s}
.burger i:before,.burger i:after{content:"";position:absolute;left:0}
.burger i:before{top:-5px}.burger i:after{top:5px}
.burger.x i{background:none}.burger.x i:before{transform:translateY(5px) rotate(45deg)}.burger.x i:after{transform:translateY(-5px) rotate(-45deg)}
.mobile-menu{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r);font-size:14px;font-weight:500;white-space:nowrap;border:1px solid transparent;cursor:pointer;background:none;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#7c4ff0}
.btn-ghost{border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:var(--surface2)}
.btn-text{color:var(--muted);padding:0 10px}.btn-text:hover{color:var(--text)}
.btn-lg{height:44px;padding:0 20px;font-size:15px}
.btn-block{width:100%}

/* sections */
section{padding:var(--s9) 0}
section+section{border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s5);margin-bottom:var(--s7)}
.sec-head p{color:var(--muted);margin-top:var(--s2);max-width:520px}
.link{color:var(--muted);font-size:14px;font-weight:500;transition:color .15s}.link:hover{color:var(--text)}

/* hero */
.hero{padding:var(--s8) 0 var(--s9)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center}
.hero h1{max-width:560px}
.hero h1 span{color:var(--accent-ink);white-space:nowrap}
.lead{font-size:17px;color:var(--muted);max-width:480px;margin-top:var(--s4)}
.actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.new-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;border:1px solid var(--line2);border-radius:999px;font-size:13px;color:var(--muted);margin-bottom:var(--s5);transition:border-color .15s,color .15s}
.new-tag:hover{border-color:#4b3f6b;color:var(--text)}
.new-tag b{font-weight:500;color:var(--accent-ink);background:#8b5cf61f;border-radius:999px;padding:1px 8px;font-size:12px}
.stage{position:relative;display:grid;place-items:center;min-height:440px}
.stage:before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#8b5cf62e,transparent 65%);opacity:calc(.6 + var(--open,0) * .4)}

/* 3D shulker (shulker3d.js) */
.shulker3d{position:relative;width:min(320px,80%);aspect-ratio:1}
.sh-cam{position:absolute;inset:0;perspective:2200px}
.sh-world{position:absolute;left:50%;top:76%;transform-style:preserve-3d;transform:rotateX(-27deg) rotateY(45deg)}
.sh-g{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.sf{position:absolute;left:0;top:0;background-size:100% 100%;image-rendering:pixelated;backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent}
.sf i{position:absolute;inset:0;background:#0b0614;pointer-events:none}
.sh-glow{position:absolute;left:0;top:0;width:calc(12 * var(--u));height:calc(12 * var(--u));margin:calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));border-radius:50%;
  background:radial-gradient(circle,#efe6ffaa 0%,#a47bff55 35%,transparent 70%);transform:translate3d(0,calc(-11 * var(--u)),0) rotateY(-45deg) rotateX(27deg);opacity:0;pointer-events:none}
.sh-shadow{position:absolute;left:0;top:0;width:calc(24 * var(--u));height:calc(24 * var(--u));margin:calc(-12 * var(--u)) 0 0 calc(-12 * var(--u));border-radius:50%;
  background:radial-gradient(circle,#000000aa 0%,#00000044 45%,transparent 70%);transform:rotateX(90deg)}

/* featured product */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--s7);align-items:center}
.demo{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.demo canvas{display:block;width:100%;aspect-ratio:72/44;image-rendering:pixelated}
.demo-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--line);font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim)}
.feature h2{margin-bottom:var(--s3)}
.feature p{color:var(--muted)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:var(--s5) 0}
.seg button{flex:none;white-space:nowrap;height:30px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.mode-note{min-height:3.2em;font-size:14px}
.price-line{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.price-line .price{font-family:var(--display);font-size:22px;font-weight:600}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cat{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);transition:background .15s;min-height:180px}
.cat+.cat{border-left:1px solid var(--line)}
.cat:hover{background:var(--surface)}
.cat img{width:28px;height:28px;margin-bottom:var(--s3)}
.cat p{color:var(--muted);font-size:14px;flex:1}
.cat .count{font-size:12.5px;color:var(--dim)}
.cat .count.live{color:var(--accent-ink)}

/* help */
.help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.help-grid a{display:block;padding-top:var(--s4);border-top:1px solid var(--line2);transition:border-color .15s}
.help-grid a:hover{border-color:var(--accent)}
.help-grid p{color:var(--muted);font-size:14px;margin-top:var(--s2)}

/* product cards */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.pcard{display:block;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;transition:border-color .15s}
.pcard:hover{border-color:var(--line2)}
.pthumb{height:150px;display:grid;place-items:center;border-bottom:1px solid var(--line);background:var(--surface2)}
.pthumb img{width:56px;height:56px}
.pbody{padding:var(--s4) var(--s5) var(--s5)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.prow b{font-weight:600;font-size:15px}
.pbody p{color:var(--muted);font-size:14px;margin-top:var(--s1)}
.pmeta{margin-top:var(--s3);font-size:12.5px;color:var(--dim)}

/* store */
.page-head{padding:var(--s8) 0 var(--s6)}
.page-head p{color:var(--muted);margin-top:var(--s2)}
.toolbar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s5)}
.toolbar .seg{margin:0}
.toolbar .seg span{margin-left:6px;color:var(--dim);font-size:12px}
.search{position:relative;flex:1;min-width:200px;max-width:320px;margin-left:auto}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim)}
.inp,.search input,select{width:100%;height:38px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:0 12px;font-size:14px;color:var(--text);transition:border-color .15s}
.search input{padding-left:36px}
.inp:focus,.search input:focus,select:focus{outline:0;border-color:var(--accent)}
select{width:auto;cursor:pointer}
.store-count{font-size:13px;color:var(--dim);margin-bottom:var(--s3)}
.store-body{padding-bottom:var(--s9)}
.empty{border:1px dashed var(--line2);border-radius:var(--r-lg);padding:var(--s8) var(--s5);text-align:center}
.empty img{width:36px;height:36px;margin:0 auto var(--s4);opacity:.8}
.empty p{color:var(--muted);margin:var(--s2) auto var(--s5);max-width:380px}

/* product page */
.crumbs{font-size:13px;color:var(--dim);padding:var(--s6) 0 var(--s5)}
.crumbs a:hover{color:var(--text)}
.p-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;padding-bottom:var(--s7);border-bottom:1px solid var(--line)}
.p-icon{width:56px;height:56px;border:1px solid var(--line2);border-radius:var(--r);display:grid;place-items:center;background:var(--surface);margin-bottom:var(--s5)}
.p-icon img{width:32px;height:32px}
.p-top p.tag{color:var(--muted);font-size:17px;margin-top:var(--s3)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s4)}
.chip{font-size:12.5px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:2px 10px}
.p-buy{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6);flex-wrap:wrap}
.p-buy .price{font-family:var(--display);font-size:28px;font-weight:600}
.p-buy small{color:var(--dim);font-size:13px;width:100%}
.p-banner{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.p-banner canvas{display:block;width:100%;aspect-ratio:140/60;image-rendering:pixelated}
.pd{display:grid;grid-template-columns:1fr 280px;gap:var(--s7);padding:var(--s6) 0 var(--s9)}
.tabs{position:relative;display:flex;gap:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s6);overflow-x:auto}
.tabs button{background:none;border:0;padding:10px 0;color:var(--muted);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.tabs button.on,.tabs button:hover{color:var(--text)}
.tabs .ink{position:absolute;bottom:-1px;height:1.5px;background:var(--text);transition:left .25s var(--ease),width .25s var(--ease)}
.pane{display:none}.pane.on{display:block}
.block+.block{margin-top:var(--s7)}
.block h2{font-size:20px;margin-bottom:var(--s4)}
.block>p{color:var(--muted)}
.flist{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--s6)}
.flist b{display:block;font-weight:500;margin-bottom:2px}
.flist span{color:var(--muted);font-size:14px}
.cmds{width:100%;border-collapse:collapse;font-size:14px}
.cmds td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.cmds td:first-child{padding-right:var(--s5);white-space:nowrap}
code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.note{font-size:13px;color:var(--dim);margin-top:var(--s4)}
.log h3{font-size:16px;margin-bottom:var(--s2)}
.log ul,.perks{padding-left:18px;color:var(--muted);font-size:14px}
details{border-bottom:1px solid var(--line)}
summary{padding:var(--s4) 0;cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--dim);transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
.ans{color:var(--muted);font-size:14px;padding-bottom:var(--s4)}
.side{position:sticky;top:88px;align-self:start;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.kv div{display:flex;justify-content:space-between;gap:var(--s4);padding:10px 0;font-size:14px;border-bottom:1px solid var(--line)}
.kv div:last-child{border:0}
.kv span{color:var(--dim)}.kv b{font-weight:500;text-align:right}
.side .btn{margin-top:var(--s4)}

/* footer */
footer{border-top:1px solid var(--line);padding:var(--s8) 0 var(--s6)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6)}
.foot-grid p{color:var(--dim);font-size:14px;margin-top:var(--s3);max-width:280px}
.foot-grid h4{font-size:13px;font-weight:500;color:var(--text);margin-bottom:var(--s3)}
.foot-grid div>a:not(.brand){display:block;color:var(--muted);font-size:14px;padding:4px 0;transition:color .15s}
.foot-grid div>a:not(.brand):hover{color:var(--text)}
.legal{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-size:13px;color:var(--dim)}

/* modal / sheets / forms */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--s5);background:#000000b0;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.modal.open{opacity:1;visibility:visible}
.sheet{width:min(420px,100%);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r-lg);padding:var(--s5)}
.modal .sheet{transform:translateY(8px);transition:transform .25s var(--ease)}
.modal.open .sheet{transform:none}
.sheet header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s5)}
.x{background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer;width:32px;height:32px;border-radius:8px}.x:hover{background:var(--surface2);color:var(--text)}
.line-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.line-item img{width:32px;height:32px}
.line-item span{flex:1;font-size:14px}.line-item small{color:var(--dim)}
.field{display:block;font-size:13px;color:var(--muted);margin-bottom:var(--s4)}
.field .row{display:flex;gap:var(--s2);margin-top:6px}
.field .seg{display:flex;margin:6px 0 0}
.field .seg button{flex:1}
.sheet>.btn-primary{width:100%;height:42px}
.divider{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0;color:var(--dim);font-size:12px}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.auth{display:grid;place-items:center;min-height:calc(100vh - 64px - 220px);padding:var(--s8) 0}
.auth h1{font-size:24px;text-align:center}
.auth .sub{color:var(--muted);font-size:14px;text-align:center;margin:var(--s2) 0 var(--s5)}
.auth .btn-ghost{width:100%}.auth .btn-ghost+.btn-ghost{margin-top:var(--s2)}
.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,20px);opacity:0;background:var(--surface2);border:1px solid var(--line2);border-radius:var(--r);padding:10px 16px;font-size:14px;transition:opacity .2s,transform .2s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* admin (owner-only mock) */
.wall{display:grid;place-items:center;min-height:100vh;padding:var(--s5);text-align:center}
.wall h3{font-size:20px;margin:var(--s3) 0 var(--s2)}
.wall p{color:var(--muted);font-size:14px;margin-bottom:var(--s5)}
.wall .btn{width:100%;margin-top:var(--s2)}
.badge{display:inline-block;font-size:12px;font-weight:500;border:1px solid var(--line2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.badge.warn{color:#fbbf24;border-color:#fbbf2444}
.badge.bad{color:#f87171;border-color:#f8717144}
.admin{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.a-side{border-right:1px solid var(--line);padding:var(--s5) var(--s4);display:flex;flex-direction:column;gap:var(--s6)}
.a-side nav{display:flex;flex-direction:column;gap:2px}
.a-side nav a{padding:8px 10px;border-radius:8px;color:var(--muted);font-size:14px}
.a-side nav a.on,.a-side nav a:hover{background:var(--surface2);color:var(--text)}
.a-main{padding:var(--s6) var(--s6) var(--s8);max-width:1100px}
.a-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s6);flex-wrap:wrap}
.a-top h1{font-size:28px;margin-top:var(--s3)}
.a-top p{color:var(--muted);font-size:14px;margin-top:4px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:var(--s4)}
.kpi{padding:var(--s5)}.kpi+.kpi{border-left:1px solid var(--line)}
.kpi span{font-size:13px;color:var(--dim)}.kpi b{display:block;font-family:var(--display);font-size:26px;font-weight:600;margin:4px 0}.kpi small{color:var(--muted);font-size:12.5px}
.a-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s4)}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.panel h3{font-size:15px;margin-bottom:var(--s4);display:flex;justify-content:space-between;gap:var(--s3)}
.panel h3 small{font:400 12.5px var(--body);color:var(--dim)}
.chart{display:flex;align-items:flex-end;gap:6px;height:160px}
.chart div{flex:1;background:var(--accent);opacity:.85;border-radius:3px 3px 0 0;height:0;transition:height .6s var(--ease)}
.chart-x{display:flex;gap:6px;margin-top:6px}.chart-x span{flex:1;text-align:center;font-size:11px;color:var(--dim)}
.t{width:100%;border-collapse:collapse;font-size:14px}
.t th{text-align:left;font-weight:500;color:var(--dim);font-size:12.5px;padding:0 0 10px}
.t td{padding:10px 0;border-top:1px solid var(--line);color:var(--muted)}.t td b{color:var(--text);font-weight:500}
.status{color:var(--ok);font-size:13px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.form-grid label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.form-grid .full{grid-column:1/-1}
.drop{border:1px dashed var(--line2);border-radius:var(--r);padding:var(--s5);text-align:center;color:var(--dim)}

/* motion: one subtle reveal, nothing else */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* responsive */
@media (max-width:960px){
  .hero .wrap,.feature,.p-top{grid-template-columns:1fr}
  .stage{min-height:340px;order:-1}
  .cats{grid-template-columns:1fr 1fr}.cat:nth-child(3){border-left:0}.cat:nth-child(n+3){border-top:1px solid var(--line)}
  .pgrid{grid-template-columns:1fr 1fr}
  .pd{grid-template-columns:1fr}.side{position:static}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}
  .admin{grid-template-columns:1fr}.a-side{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;padding:var(--s3) var(--s4)}
  .a-side nav{flex-direction:row}.a-side nav a{white-space:nowrap}
  .kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(3){border-left:0}.kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .a-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .wrap{padding:0 var(--s4)}
  .wrap.auth{padding:var(--s7) var(--s4);min-height:0}
  section{padding:var(--s8) 0}
  .hero{padding:var(--s4) 0 var(--s8)}
  .stage{min-height:280px;padding-top:36px}.shulker3d{width:210px}
  .nav-links,.nav-right .btn-text{display:none}
  .burger{display:grid}
  .mobile-menu{display:block;position:fixed;top:64px;left:0;right:0;z-index:49;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s2) var(--s4) var(--s4);
    opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
  .mobile-menu.open{opacity:1;visibility:visible;transform:none}
  .mobile-menu a{display:block;padding:12px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  .mobile-menu a:last-child{border:0}
  .sec-head{flex-direction:column;align-items:flex-start;margin-bottom:var(--s6)}
  .cats,.pgrid,.help-grid{grid-template-columns:1fr}
  .cat+.cat{border-left:0;border-top:1px solid var(--line)}.cat{min-height:0}
  .help-grid{gap:var(--s5)}
  .search{max-width:none;margin-left:0;order:-1;flex-basis:100%}
  .toolbar .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap}
  .flist{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .kpis{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}
  .a-main{padding:var(--s5) var(--s4)}
  .cmds td:first-child{white-space:normal}
}

/* accounts, sign-in and purchases (real API) */
.auth-seg{display:flex;margin:0 0 var(--s5)}.auth-seg button{flex:1}
.form-err{font-size:13px;color:#f87171;margin:calc(-1 * var(--s2)) 0 var(--s4)}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}
.acct{padding-bottom:var(--s8)}
.acct .page-head p b{color:var(--text);font-weight:500}
.acct .link{color:var(--accent-ink)}
.notice{border:1px solid var(--line2);background:var(--surface);border-radius:var(--r);padding:var(--s3) var(--s4);font-size:14px;margin-bottom:var(--s5)}
.notice.ok{border-color:#4ade8055;color:#bbf7d0}.notice.bad{border-color:#f8717155;color:#fecaca}
.lic{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin-bottom:var(--s4);background:var(--surface)}
.lic header{display:flex;align-items:center;gap:var(--s4)}
.lic header img{width:40px;height:40px}
.lic header>div{flex:1;min-width:0}.lic header small{color:var(--dim);font-size:13px}
.lic-key{display:flex;align-items:center;gap:var(--s3);margin:var(--s5) 0;padding:var(--s3) var(--s4);border:1px solid var(--line2);border-radius:var(--r);background:var(--bg)}
.lic-key span{font-size:12.5px;color:var(--dim);white-space:nowrap}
.lic-key code{flex:1;font-size:15px;letter-spacing:.06em;color:var(--accent-ink);overflow-wrap:anywhere;user-select:all}
.lic-steps h4{font:600 14px var(--display);margin-bottom:var(--s2)}
.lic-steps p{font-size:14px;color:var(--muted)}
.lic-steps ol{margin:var(--s3) 0 0 var(--s5);font-size:14px;color:var(--text)}.lic-steps li{margin-bottom:6px;padding-left:4px}
@media (max-width:640px){.lic header{flex-wrap:wrap}.lic-key{flex-wrap:wrap}.lic-key code{flex-basis:100%;order:3}}