:root{
  --bg:#080d14; --bg2:#0d1420; --card:#111a28; --card2:#16212f;
  --line:#1e2c3d; --line2:#27384c; --txt:#e8eff8; --dim:#8fa2b8; --dim2:#63758b;
  --gold:#e8b04a; --gold2:#f5c96a; --green:#2fa37e; --green2:#40c79a;
  --blue:#3c7fe0; --red:#e0574a;
  --r:16px; --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 12% -12%, #123028 0%, transparent 58%),
    radial-gradient(900px 520px at 92% 0%, #142743 0%, transparent 55%),
    var(--bg);
  color:var(--txt);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--dim)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:14px 24px;backdrop-filter:blur(14px);
  background:rgba(8,13,20,.82);border-bottom:1px solid rgba(30,44,61,.9);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{width:40px;height:40px;border-radius:11px;border:1px solid var(--line2)}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.brand-text b{font-size:17px;letter-spacing:.5px}
.brand-text i{font-style:normal;font-size:11px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-links{display:flex;align-items:center;gap:22px;font-size:13.5px;color:var(--dim)}
.nav-links a:hover{color:var(--txt)}
.nav-cta{
  padding:7px 15px;border-radius:9px;border:1px solid var(--line2);
  background:#101a26;color:#cfe0f3;font-size:13px;
}
.nav-cta:hover{border-color:var(--gold);color:var(--gold2)}
@media(max-width:760px){
  .nav{padding:11px 16px}
  .nav-links a:not(.nav-cta){display:none}
  .brand-text i{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;margin:22px auto 8px;max-width:1180px;width:100%;padding:0 20px}
.hero-card{
  position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#0b121c;
}
.hero-card img{width:100%;height:auto;display:block}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,5vw,64px);max-width:58%}
.hero-copy h1{margin:6px 0 10px;font-size:clamp(22px,3.6vw,42px);line-height:1.2;letter-spacing:.5px}
.hero-copy p{margin:0;color:var(--dim);font-size:clamp(12px,1.4vw,16px)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hero-tags span{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(16,26,38,.8);color:#bcd0e6}
@media(max-width:720px){ .hero-copy{display:none} }

/* ---------- section ---------- */
.sect{margin:38px auto}
.sect-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
.sect-head h2{margin:0;font-size:19px;letter-spacing:.4px}
.sect-head p{margin:4px 0 0;color:var(--dim2);font-size:13px}
.notice{
  display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;padding:12px 15px;border-radius:12px;
  background:rgba(232,176,74,.07);border:1px solid rgba(232,176,74,.28);color:#e6cd9a;font-size:12.5px;
}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr;gap:14px}}

.card{
  display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.card-media{position:relative;aspect-ratio:10/7;background:#0a1018;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-play{
  position:absolute;bottom:10px;right:10px;font-size:11px;padding:3px 9px;border-radius:7px;
  background:rgba(6,10,16,.82);border:1px solid rgba(255,255,255,.24);color:#e8f0fa;letter-spacing:.4px;
}
.card-badge{
  position:absolute;top:10px;left:10px;font-size:11px;padding:3px 9px;border-radius:7px;
  background:rgba(232,176,74,.16);border:1px solid rgba(232,176,74,.5);color:var(--gold2);letter-spacing:.4px;
}
.card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{margin:0;font-size:16px;letter-spacing:.3px}
.card-body .sub{margin:0;color:var(--dim2);font-size:12.5px}
.card-tags{display:flex;flex-wrap:wrap;gap:6px}
.card-tags span{font-size:11px;padding:2px 8px;border-radius:6px;background:#0f1a27;border:1px solid var(--line);color:#9db0c6}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.price{display:flex;align-items:baseline;gap:5px}
.price b{font-size:22px;font-weight:600;letter-spacing:.3px}
.price span{font-size:11px;color:var(--dim2)}
.stock{font-size:11.5px;color:var(--dim2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
  border:0;border-radius:11px;padding:11px 18px;font-size:14px;font-weight:600;
  background:linear-gradient(180deg,var(--green2),var(--green));color:#04150f;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-ghost{background:#0f1a27;color:#c7d8ec;border:1px solid var(--line2);font-weight:500}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2);filter:none}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#241802}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn-block{width:100%}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;margin-top:22px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.detail-media{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0a1018}
.detail-media img{width:100%;height:auto}
.detail-media video{width:100%;height:auto;display:block;background:#000;aspect-ratio:1/1;object-fit:contain}
.detail-body h1{margin:0 0 6px;font-size:26px}
.detail-body .sub{color:var(--dim2);margin:0 0 16px;font-size:14px}
.detail-body .desc{color:var(--dim);font-size:14px;line-height:1.75}
.spec{width:100%;border-collapse:collapse;margin:18px 0 0;font-size:13.5px}
.spec td{padding:9px 0;border-bottom:1px dashed #1b2839}
.spec td:first-child{color:var(--dim2);width:38%}
.spec td:last-child{text-align:right;color:#dbe7f5}
.buybox{margin-top:22px;padding:18px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(180deg,#141f2e,#0f1825)}
.buybox .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.qty{display:flex;align-items:center;gap:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.qty button{width:38px;height:38px;background:#0e1825;border:0;color:#c7d8ec;font-size:18px;cursor:pointer}
.qty button:hover{background:#16243a}
.qty input{width:52px;height:38px;text-align:center;background:#0b1420;border:0;border-left:1px solid var(--line2);
  border-right:1px solid var(--line2);color:var(--txt);font-size:15px}
.total{display:flex;align-items:baseline;justify-content:space-between;margin:14px 0 4px}
.total b{font-size:26px}
.total span{color:var(--dim2);font-size:12px}
.field{margin-top:14px}
.field label{display:block;font-size:12px;color:var(--dim2);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;background:#0b1420;border:1px solid var(--line2);border-radius:10px;
  padding:11px 13px;color:var(--txt);font-size:14px;outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(47,163,126,.14)}

/* ---------- pay ---------- */
.pay-wrap{max-width:560px;margin:24px auto;width:100%;padding:0 18px}
.pay-card{border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--card2),var(--card));box-shadow:var(--shadow)}
.pay-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);text-align:center}
.pay-head .k{font-size:12px;color:var(--dim2);letter-spacing:1.4px;text-transform:uppercase}
.pay-head .amt{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:8px 0 2px}
.pay-head .amt b{font-size:44px;letter-spacing:.5px;font-weight:600}
.pay-head .amt span{font-size:14px;color:var(--green2)}
.pay-head .ord{font-size:12px;color:var(--dim2);margin-top:4px}
.pay-body{padding:20px 22px 22px}
.qr-shell{display:flex;flex-direction:column;align-items:center;gap:12px}
.qr-frame{
  position:relative;padding:14px;border-radius:18px;background:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.qr-frame img{width:min(64vw,232px);height:min(64vw,232px);image-rendering:pixelated}
.qr-frame .corner{position:absolute;width:22px;height:22px;border:3px solid var(--green2)}
.qr-frame .c1{top:-4px;left:-4px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.qr-frame .c2{top:-4px;right:-4px;border-left:0;border-bottom:0;border-radius:0 9px 0 0}
.qr-frame .c3{bottom:-4px;left:-4px;border-right:0;border-top:0;border-radius:0 0 0 9px}
.qr-frame .c4{bottom:-4px;right:-4px;border-left:0;border-top:0;border-radius:0 0 9px 0}
.qr-tip{font-size:12.5px;color:var(--dim);text-align:center;line-height:1.7}
.qr-tip b{color:var(--gold2);font-weight:600}
.addr-box{margin-top:18px;padding:12px 14px;border-radius:12px;background:#0a1220;border:1px solid var(--line)}
.addr-box .h{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--dim2);margin-bottom:6px}
.addr-box .v{font-size:12.5px;word-break:break-all;color:#cfe0f3}
.addr-box .v span{display:block}
.pay-actions{display:flex;gap:10px;margin-top:16px}
.pay-actions .btn{flex:1}
.timer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;font-size:12.5px;color:var(--dim2)}
.timer b{color:var(--gold2);font-variant-numeric:tabular-nums}
.steps{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.steps li{display:flex;gap:10px;font-size:12.5px;color:var(--dim)}
.steps i{flex:0 0 20px;height:20px;border-radius:50%;background:#12202f;border:1px solid var(--line2);
  color:#8fa2b8;font-style:normal;font-size:11px;display:flex;align-items:center;justify-content:center}
.pay-state{padding:26px 22px;text-align:center}
.pay-state .ico{font-size:38px;line-height:1}
.pay-state h3{margin:10px 0 6px;font-size:18px}
.pay-state p{margin:0;color:var(--dim);font-size:13px}
.spinner{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid #1c2b3d;
  border-top-color:var(--green2);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hash-box{margin-top:14px;padding:10px 12px;border-radius:10px;background:#0a1220;border:1px solid var(--line);
  font-size:11px;word-break:break-all;color:var(--dim)}
.progress{height:6px;border-radius:999px;background:#13202f;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green2));transition:width .3s}

/* ---------- wallet ---------- */
.wallet-wrap{max-width:520px;margin:22px auto;width:100%;padding:0 16px}
/* Parity with the home page: same surface as .card (card2 → card), same 1px
   var(--line) border, same var(--r) radius, and no resting shadow — .card only
   casts one on hover, and the permanent shadow here darkened the page
   background below the card, which was half of the "different theme" look.
   Padding and typography are unchanged. */
.wcard{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--card2),var(--card));
  padding:20px}
.wcard h2{margin:0 0 4px;font-size:18px}
.wcard .sub{color:var(--dim2);font-size:12.5px;margin:0 0 16px}
.wrow{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px}
.wrow:last-of-type{border-bottom:0}
.wrow b{font-weight:500;color:var(--dim2)}
.wrow span{color:var(--txt);text-align:right;word-break:break-all}
/* Same treatment as the home page .notice (gold tint) instead of a red box,
   so the wallet page reads as the same theme rather than an error screen. */
.warn{margin-top:14px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.65;
  background:rgba(232,176,74,.07);border:1px solid rgba(232,176,74,.28);color:#e6cd9a}

/* ---------- panel ---------- */
.panel{max-width:1180px;margin:22px auto;width:100%;padding:0 20px;display:grid;
  grid-template-columns:340px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.panel{grid-template-columns:1fr}}
.pcard{border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--card2),var(--card));padding:18px}
.pcard h3{margin:0 0 14px;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--dim2);font-weight:600}
.pcard .field:first-of-type{margin-top:0}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;color:var(--dim2);font-weight:500;font-size:11px;letter-spacing:.8px;
  text-transform:uppercase;padding:0 8px 9px}
td{padding:10px 8px;border-top:1px solid #1b2839;vertical-align:middle}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid}
.pill.pending{color:#d8b46a;border-color:#4a3a1c;background:#241c0c}
.pill.submitted{color:#86b7ff;border-color:#24406b;background:#101d31}
.pill.paid{color:#6fdc8c;border-color:#1c4029;background:#0e2417}
.pill.expired,.pill.failed{color:#ff9a93;border-color:#4b1d1d;background:#2a1211}

/* ---------- qr modal ---------- */
.modal{position:fixed;inset:0;background:rgba(4,8,13,.82);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px;z-index:80}
.modal.on{display:flex}
.modal-box{background:#0d1622;border:1px solid var(--line2);border-radius:20px;padding:22px;
  max-width:420px;width:100%;text-align:center;box-shadow:var(--shadow)}
.modal-box h4{margin:0 0 4px;font-size:16px}
.modal-box .muted{font-size:12px;margin:0 0 16px}
.modal-qr{background:#fff;border-radius:14px;padding:12px;display:inline-block;margin-bottom:14px}
.modal-qr img{width:224px;height:224px;image-rendering:pixelated}
.modal-box .mono{font-size:11px;word-break:break-all;color:var(--dim)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);
  background:#101c2b;border:1px solid var(--line2);color:#d7e6f7;padding:10px 18px;border-radius:11px;
  font-size:13px;opacity:0;transition:.22s;pointer-events:none;z-index:99;box-shadow:var(--shadow)}
.toast.on{opacity:1;transform:translateX(-50%)}

/* ---------- footer ---------- */
.foot{margin-top:auto;border-top:1px solid var(--line);background:rgba(6,10,16,.7);padding:26px 20px}
.foot-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:11px}
.foot-brand img{width:34px;height:34px;border-radius:9px}
.foot-brand b{display:block;font-size:14px}
.foot-brand span{display:block;font-size:11.5px;color:var(--dim2)}
.foot-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--dim2)}

/* ---------- home additions ---------- */
.kicker{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:#7ed6ba}
.card-off{opacity:.72}
.card-off:hover{transform:none;border-color:var(--line);box-shadow:none}
.card-off .card-media img{filter:grayscale(.35) brightness(.86)}
.empty{
  margin:0 0 18px;padding:26px 24px;border-radius:16px;text-align:center;
  border:1px dashed var(--line2);background:rgba(17,26,40,.6);
}
.empty b{display:block;font-size:15px;margin-bottom:6px}
.empty p{margin:0 auto 16px;max-width:520px;color:var(--dim);font-size:13px;line-height:1.7}
.empty a.btn{display:inline-flex}
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--dim2);margin:20px 0 0}
.crumbs a:hover{color:var(--txt)}
.steps li b{display:block;color:#dbe7f5;font-weight:500;font-size:13px}
.steps li span{display:block;color:var(--dim2);font-size:12.5px;line-height:1.6}
.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:820px){.faq-list{grid-template-columns:1fr}}
.qa{border:1px solid var(--line);border-radius:12px;background:rgba(17,26,40,.6);padding:0 15px}
.qa summary{cursor:pointer;padding:13px 0;font-size:13.5px;color:#dbe7f5;list-style:none;position:relative;padding-right:22px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:0;top:12px;color:var(--dim2);font-size:16px}
.qa[open] summary::after{content:'−'}
.qa p{margin:0 0 14px;color:var(--dim);font-size:12.5px;line-height:1.75}
.buybox-off{border-style:dashed;display:flex;flex-direction:column;gap:6px}
.buybox-off b{font-size:14px}
.buybox-off .muted{font-size:12.5px;margin:0}
.buybox-off a{color:var(--gold2)}
.pay-body #payMain.on{opacity:.45;pointer-events:none;filter:grayscale(.4)}
.bind{margin-top:18px}
.bind input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- panel jump bar ---------- */
/* The backend panel is four sections tall; this bar keeps each one one click
   away and spans both grid columns so it reads as a header, not a widget. */
.pjump{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 12px}
.pjump .btn{flex:0 0 auto}
@media(max-width:640px){.pjump{padding:8px}.pjump .btn{font-size:12px;padding:5px 10px}}
#sec-pay,#sec-orders,#sec-brand,#sec-goods{scroll-margin-top:84px}

/* ---------- panel slots ---------- */
.slots{display:flex;flex-direction:column;gap:14px}
.slot{border:1px solid var(--line);border-radius:14px;background:#0d1724;padding:13px 14px}
.slot-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.slot-id{font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--dim2)}
.sw{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);cursor:pointer;user-select:none}
.sw input{accent-color:var(--green2);width:15px;height:15px}
.slot-main{display:grid;grid-template-columns:132px 1fr;gap:12px}
@media(max-width:640px){.slot-main{grid-template-columns:1fr}}
.slot-thumb{
  position:relative;border:1px dashed var(--line2);border-radius:11px;overflow:hidden;
  aspect-ratio:10/7;background:#0a1018;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.slot-thumb img{width:100%;height:100%;object-fit:cover}
.slot-thumb i{
  position:absolute;left:0;right:0;bottom:0;font-style:normal;font-size:11px;text-align:center;
  padding:4px 0;background:rgba(6,10,16,.78);color:#a9bccf;
}
.slot-vtag{
  align-self:flex-start;font-size:10.5px;letter-spacing:.4px;color:#9fe8b4;
  border:1px solid rgba(111,220,140,.38);background:rgba(111,220,140,.08);
  border-radius:6px;padding:2px 8px;
}
.slot-fields{display:flex;flex-direction:column;gap:8px;min-width:0}
.slot-fields input,.slot-fields textarea{
  width:100%;background:#0b1420;border:1px solid var(--line2);border-radius:9px;
  padding:8px 11px;color:var(--txt);font-size:13px;outline:none;font-family:inherit;
}
.slot-fields input:focus,.slot-fields textarea:focus{border-color:var(--green2)}
.slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot-row input{text-align:center}
.slot-foot{display:flex;align-items:center;gap:8px;margin-top:11px}
.slot-msg{font-size:11.5px;margin-left:auto}

/* ---------- backend video list ---------- */
#sec-video{scroll-margin-top:84px}
.vlist{display:flex;flex-direction:column;gap:6px}
.vrow{
  display:grid;grid-template-columns:26px minmax(120px,1fr) 74px auto;gap:10px;align-items:center;
  padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:#0b1420;
  font-size:12.5px;transition:border-color .15s,background .15s;
}
.vrow.has{border-color:rgba(111,220,140,.30);background:rgba(111,220,140,.05)}
.vrow.flash{border-color:var(--green2);background:rgba(111,220,140,.13)}
.vno{color:var(--dim2);font-size:11px;text-align:center}
.vname{display:flex;flex-direction:column;gap:1px;min-width:0}
.vname i{font-style:normal;font-size:10.5px;color:var(--dim2);letter-spacing:.3px}
.vstate{font-size:11px;color:var(--dim2);white-space:nowrap}
.vrow.has .vstate{color:#9fe8b4}
.vact{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.vact .btn{padding:4px 9px;font-size:11.5px}
.vmsg{grid-column:2/-1;font-size:11px;color:var(--dim2)}
@media(max-width:640px){
  .vrow{grid-template-columns:22px 1fr;gap:6px 8px;padding:8px}
  .vstate{grid-column:2}
  .vact{grid-column:2;justify-content:flex-start}
}

/* ---------- theme gallery (/themes) ---------- */
.themes-page{padding-bottom:40px}
.theme-actions{display:flex;align-items:center;gap:10px}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
@media(max-width:1000px){.theme-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.theme-grid{grid-template-columns:1fr}}
.tcard{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,var(--card2),var(--card));display:flex;flex-direction:column}
.tcard.is-on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.tshot{position:relative;height:210px;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)}
.tshot iframe{position:absolute;top:0;left:0;width:1280px;height:900px;border:0;
  transform:scale(.31);transform-origin:0 0;pointer-events:none}
.tshot a{position:absolute;inset:0;display:block}
.tcard-body{padding:11px 13px 13px;display:flex;align-items:center;gap:10px}
.tcard-body .tname{font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard-body .tid{font-size:11px;color:var(--dim2);letter-spacing:.6px}
.tswatch{display:flex;gap:3px;margin-left:auto;flex:0 0 auto}
.tswatch i{width:13px;height:13px;border-radius:4px;border:1px solid rgba(255,255,255,.18)}
.tcard-body .btn{margin-left:8px;flex:0 0 auto}