/* ============================================================
   GiftsPayr — v3 design system (dark marketplace)
   bg #0B111E · surface #121B2C · border #223049
   text #EAF0F9 · muted #93A3BC
   amber #F7931A (pay/CTA) · green #16C784 (save/success)
   Display: Sora · Body: Inter
   ============================================================ */
/* Fonts are loaded from includes/header.php, not @import — an @import here
   forces the browser to parse this whole file before it can even discover the
   font URL, serialising four round trips before any text can paint. */

:root{
  --ink:#EAF0F9; --ink-soft:#C4D0E2; --muted:#93A3BC;
  --bg:#0B111E; --surface:#121B2C; --surface2:#18243A; --border:#223049;
  --accent:#16C784; --accent-dark:#0FA96C; --amber:#F7931A; --amber-dark:#DE7F0B;
  --danger:#F0616D; --warn:#F3B04C; --info:#5B8DEF;
  --tp:#00B67A;
  --radius:14px; --shadow:0 8px 28px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;font-size:15.5px}
h1,h2,h3,.display{font-family:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(1.65rem,4vw,2.5rem);margin:.2em 0}
h2{font-size:clamp(1.25rem,3vw,1.6rem)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:1220px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .small{font-size:.85rem}
.mt1{margin-top:8px}.mt2{margin-top:16px}.mt3{margin-top:28px}.mt4{margin-top:48px}
.center{text-align:center}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
::selection{background:rgba(247,147,26,.35)}

/* ---------- top bar & nav ---------- */
.topbar{background:#070C16;color:#8FA0BA;font-size:.8rem;padding:7px 0;border-bottom:1px solid var(--border)}
.topbar .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.topbar b{color:var(--amber)}
.ticker{overflow:hidden;white-space:nowrap;max-width:60%}
.ticker span{display:inline-block;padding-right:48px;animation:tick 32s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
nav.main{background:#0B111E;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
nav.main .container{display:flex;align-items:center;gap:18px;height:66px}
.logo{font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.28rem;color:#fff;white-space:nowrap}
.logo .by{color:var(--amber)} .logo:hover{text-decoration:none}
.navlinks{display:flex;gap:16px;align-items:center;margin-left:auto;font-weight:500}
.navlinks a{color:var(--ink-soft)} .navlinks a:hover{color:#fff;text-decoration:none}
.navlinks select{background:var(--surface);color:var(--ink);border-color:var(--border)}
.cartlink{position:relative}
.cartlink .badge{position:absolute;top:-8px;right:-12px;background:var(--amber);color:#0B111E;border-radius:99px;font-size:.68rem;padding:1px 6px;font-weight:800}
.hamb{display:none;background:none;border:1px solid var(--border);color:var(--ink);border-radius:8px;padding:6px 10px;font-size:1.1rem;cursor:pointer}
/* nav search */
.navsearch{position:relative;flex:1;max-width:430px}
.navsearch input{background:var(--surface);border-color:var(--border);color:var(--ink);border-radius:99px;padding:9px 16px 9px 38px;font-size:.9rem}
.navsearch::before{content:'';position:absolute;left:14px;top:50%;width:14px;height:14px;transform:translateY(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2393A3BC' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");z-index:2}
.sugg{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface2);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;z-index:60;display:none;max-height:340px;overflow-y:auto}
.sugg.open{display:block}
.sugg a{display:flex;align-items:center;gap:10px;padding:10px 14px;color:var(--ink);font-weight:500}
.sugg a:hover{background:var(--surface);text-decoration:none}
.sugg .slogo{width:34px;height:22px;border-radius:4px;object-fit:cover;background:var(--surface);flex:0 0 34px}
.sugg .scat{margin-left:auto;font-size:.72rem;color:var(--muted)}
@media(max-width:920px){
  .hamb{display:block;margin-left:auto}
  .ticker{display:none}
  .navsearch{max-width:none}
}

/* ---------- buttons & forms ---------- */
.btn{display:inline-block;background:var(--accent);color:#062015;font-weight:700;padding:12px 24px;border-radius:11px;border:0;cursor:pointer;font-size:.95rem;font-family:inherit;transition:transform .12s,box-shadow .12s}
.btn:hover{background:var(--accent-dark);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border)}
.btn.ghost:hover{border-color:var(--muted);background:var(--surface);color:#fff}
.btn.amber{background:var(--amber);color:#1A0F00;box-shadow:0 6px 20px rgba(247,147,26,.28)}
.btn.amber:hover{background:var(--amber-dark);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.btn.sm{padding:7px 14px;font-size:.85rem}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:600;font-size:.86rem;margin:14px 0 5px;color:var(--ink-soft)}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;font:inherit;background:var(--surface);color:var(--ink)}
input::placeholder,textarea::placeholder{color:#5F6F8A}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input[type=color]{padding:4px;height:42px}
.form-narrow{max-width:440px;margin:0 auto}
.help{font-size:.8rem;color:var(--muted);margin-top:4px}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)} .grid.c5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.grid.c5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid.c4{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid.c4,.grid.c3,.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c5{grid-template-columns:repeat(2,1fr)}}
table.list{width:100%;border-collapse:collapse;font-size:.9rem}
table.list th{text-align:left;color:var(--muted);font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;padding:10px 12px;border-bottom:1px solid var(--border)}
table.list td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700}
.tag.green{background:rgba(22,199,132,.14);color:var(--accent)} .tag.amber{background:rgba(247,147,26,.14);color:var(--amber)}
.tag.red{background:rgba(240,97,109,.14);color:var(--danger)} .tag.blue{background:rgba(91,141,239,.15);color:var(--info)}
.tag.gray{background:var(--surface2);color:var(--muted)}

/* ============================================================
   SIGNATURE: gift-card tile — real card proportions, logo,
   glossy sheen, clean discount pill (no rotated ribbon)
   ============================================================ */
.gc{position:relative;border-radius:12px;overflow:hidden;color:#fff;aspect-ratio:1.586/1;display:flex;flex-direction:column;justify-content:flex-end;padding:0;box-shadow:0 6px 22px rgba(0,0,0,.4);transition:transform .16s,box-shadow .16s;background:linear-gradient(135deg,#243B63,#0B1B33)}
a.gc:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 14px 34px rgba(0,0,0,.5);text-decoration:none;color:#fff}
.gc::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 28%,transparent 42%);pointer-events:none}
.gc .gclogo{position:absolute;inset:0 0 30% 0;display:flex;align-items:center;justify-content:center;padding:10px 12px}
.gc .gclogo img{max-width:92%;max-height:92%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
/* Opaque logo files (real card faces: Swiggy, Amazon Pay, Binance, Amazon) fill the whole
   tile instead of floating as a rectangle inside it. */
.gc .gclogo.full{inset:0;padding:0}
.gc .gclogo.full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
/* Full-bleed card artwork (uploads/brands/art) — fills the entire tile like a real card face */
.gc .gclogo.art{inset:0;padding:0}
.gc .gclogo.art img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none}
.gc .brand{font-family:'Sora',system-ui,sans-serif;font-weight:700;font-size:clamp(.95rem,1.6vw,1.12rem);text-shadow:0 1px 4px rgba(0,0,0,.45);line-height:1.25}
.gc .meta{font-size:.74rem;opacity:.9}
.gc .gcinfo{position:relative;background:linear-gradient(to top,rgba(5,10,20,.86),rgba(5,10,20,.28) 88%,transparent);padding:26px 14px 12px}
.gc .chip{display:none}
.gc .ribbon{position:absolute;top:10px;right:10px;transform:none;background:var(--accent);color:#04150D;font-size:.72rem;font-weight:800;padding:4px 10px;border-radius:99px;letter-spacing:.02em;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.gc .stock{position:absolute;top:10px;left:10px;background:rgba(5,10,20,.55);backdrop-filter:blur(4px);padding:3px 9px;border-radius:99px;font-size:.72rem;font-weight:600}

/* ---------- hero ---------- */
.hero{position:relative;background:radial-gradient(1000px 460px at 78% -10%,rgba(247,147,26,.16),transparent 60%),radial-gradient(800px 420px at 8% 110%,rgba(22,199,132,.12),transparent 60%),linear-gradient(165deg,#0D1526 0%,#0B111E 70%);color:#fff;padding:64px 0 60px;border-bottom:1px solid var(--border)}
.hero h1{color:#fff;max-width:620px;font-size:clamp(1.9rem,4.4vw,3rem)}
.hero p.lede{color:#AEBDD6;max-width:560px;font-size:1.05rem}
.hero .accent{color:var(--amber)}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn.ghost:hover{border-color:#fff}
.statbar{display:flex;gap:34px;flex-wrap:wrap;margin-top:36px}
.statbar b{font-family:'Sora',system-ui,sans-serif;font-size:1.3rem;display:block;color:#fff}
.statbar span{color:#7E90AD;font-size:.8rem}
.counter{font-family:'Sora',system-ui,sans-serif;font-weight:800;color:var(--amber)}
/* hero search */
.herosearch{position:relative;max-width:520px;margin-top:22px}
.herosearch input{padding:15px 18px 15px 46px;border-radius:14px;font-size:1rem;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(6px)}
.herosearch input:focus{border-color:var(--amber)}
.herosearch::before{content:'';position:absolute;left:16px;top:26px;width:17px;height:17px;transform:translateY(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23AEBDD6' stroke-width='2.4' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");z-index:2}

/* hero slider (right side, stacked cards) */
.heroflex{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
@media(max-width:900px){.heroflex{grid-template-columns:1fr}}
.slider{position:relative;height:320px}
.slide{position:absolute;inset:0;margin:auto;width:min(360px,88%);transition:all .45s ease;opacity:0;transform:translateX(64px) scale(.84);pointer-events:none}
.slide.on{opacity:1;transform:none;z-index:3;pointer-events:auto}
.slide.prev{opacity:.4;transform:translateX(-76px) scale(.85);z-index:2}
.slide.next{opacity:.4;transform:translateX(76px) scale(.85);z-index:2}
.slide .gc{box-shadow:0 24px 60px rgba(0,0,0,.55)}
.slide .caption{background:var(--surface2);border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;margin-top:-8px;padding:13px 16px;color:var(--ink)}
.stars{color:var(--amber);letter-spacing:1px}
.sarrow{position:absolute;top:42%;background:var(--surface2);color:var(--ink);border:1px solid var(--border);width:38px;height:38px;border-radius:50%;font-size:1rem;cursor:pointer;z-index:5;box-shadow:var(--shadow)}
.sarrow.l{left:-8px}.sarrow.r{right:-8px}

/* ---------- category chips ---------- */
.catchips{display:flex;gap:10px;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.catchips::-webkit-scrollbar{display:none}
.catchips a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:9px 17px;font-weight:600;font-size:.88rem;color:var(--ink-soft)}
.catchips a:hover,.catchips a.on{border-color:var(--amber);color:#fff;text-decoration:none;background:var(--surface2)}

/* ---------- trust band ---------- */
.trustband{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.coins{display:flex;gap:8px;flex-wrap:wrap}
.coin{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:6px 13px;font-weight:700;font-size:.8rem;color:var(--ink-soft)}
.coin i{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:.62rem;font-weight:800}
.titem{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 16px;font-size:.85rem;font-weight:600;color:var(--ink)}
.tp{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.tp:hover{text-decoration:none}
.tp .tstars{background:var(--tp);color:#fff;border-radius:4px;padding:2px 7px;letter-spacing:2px}
.tpsection{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px}

.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.section-head a{font-weight:600}
.section-head .off{background:rgba(22,199,132,.14);color:var(--accent);border-radius:8px;padding:3px 10px;font-size:.78rem;font-weight:800}

/* ---------- shop (buy page) ---------- */
.shop{display:grid;grid-template-columns:252px 1fr;gap:28px;align-items:start}
@media(max-width:860px){.shop{grid-template-columns:1fr}}
.catlist{display:flex;flex-direction:column}
.catlist a{display:flex;justify-content:space-between;gap:8px;padding:11px 14px;border-radius:9px;color:var(--ink-soft);font-weight:500}
.catlist a b{color:var(--muted);font-weight:600;font-size:.8rem}
.catlist a.on{background:var(--surface2);color:#fff;box-shadow:inset 3px 0 0 var(--amber)}
.catlist a:hover{background:var(--surface2);color:#fff;text-decoration:none}
.toolrow{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.toolrow .n{color:var(--muted);font-size:.88rem}
.toolrow select{width:auto;padding:8px 12px;font-size:.86rem}

/* ---------- card detail ---------- */
.detailgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:36px;align-items:start}
@media(max-width:860px){.detailgrid{grid-template-columns:1fr}}
.pricebox{border:1.5px solid var(--accent);border-radius:14px;padding:18px;background:rgba(22,199,132,.07)}
.pricebox .big{font-family:'Sora',system-ui,sans-serif;font-size:1.8rem;color:var(--accent);font-variant-numeric:tabular-nums}
.strike{text-decoration:line-through;color:var(--muted)}
.denoms{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.denoms .d{background:var(--surface2);border:1.5px solid var(--border);border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer;font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums}
.denoms .d.on{border-color:var(--amber);background:rgba(247,147,26,.12);color:var(--amber)}
.regionpill{background:var(--surface2);border:1.5px solid var(--border);border-radius:99px;padding:6px 14px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--ink)}
.benefits{display:flex;flex-direction:column;gap:8px;margin-top:14px;font-size:.86rem;color:var(--ink-soft)}
.benefits span::before{content:'✓  ';color:var(--accent);font-weight:800}
details.hiw{border:1px solid var(--border);border-radius:10px;margin:10px 0;background:var(--surface)}
details.hiw summary{padding:15px 18px;font-weight:600;cursor:pointer;list-style:none;color:var(--ink)}
details.hiw .a{padding:0 18px 15px;color:var(--ink-soft)}
.faq-item{border:1px solid var(--border);border-radius:10px;margin:10px 0;background:var(--surface)}
.faq-item summary{padding:15px 18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;color:var(--ink)}
.faq-item summary::after{content:'+';color:var(--accent);font-weight:800}
.faq-item[open] summary::after{content:'–'}
.faq-item .a{padding:0 18px 15px;color:var(--ink-soft)}

/* ---------- misc / kept components ---------- */
.flash{padding:12px 16px;border-radius:10px;margin:16px 0;font-weight:500;font-size:.92rem}
.flash.success{background:rgba(22,199,132,.12);color:var(--accent);border:1px solid rgba(22,199,132,.35)}
.flash.error{background:rgba(240,97,109,.12);color:var(--danger);border:1px solid rgba(240,97,109,.35)}
.steps{counter-reset:s}
.step{display:flex;gap:16px;margin:20px 0}
.step::before{counter-increment:s;content:counter(s);flex:0 0 36px;height:36px;border-radius:50%;background:var(--amber);color:#1A0F00;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Sora',system-ui,sans-serif}
.paybox{background:var(--surface2);border:2px dashed var(--border);border-radius:12px;padding:20px;text-align:center}
.paybox .addr{font-family:monospace;font-size:.86rem;word-break:break-all;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px;margin:10px 0;color:var(--ink)}
.codebox{font-family:monospace;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:1.02rem;letter-spacing:.04em;color:var(--ink)}
.progress{display:flex;gap:6px;margin:14px 0}
.progress i{flex:1;height:6px;border-radius:99px;background:var(--border)}
.progress i.on{background:var(--accent)}
.sidebar{display:flex;flex-direction:column;gap:4px}
.sidebar a{padding:9px 14px;border-radius:9px;color:var(--ink-soft);font-weight:500}
.sidebar a.on,.sidebar a:hover{background:var(--surface2);color:#fff;text-decoration:none}
.dash{display:grid;grid-template-columns:210px 1fr;gap:30px;align-items:start}
@media(max-width:840px){.dash{grid-template-columns:1fr}}

footer{background:#070C16;color:#8FA0BA;margin-top:72px;padding:46px 0 26px;font-size:.88rem;border-top:1px solid var(--border)}
footer h4{color:#fff;font-size:.92rem;margin:0 0 12px}
footer a{color:#8FA0BA;display:block;margin:7px 0}
footer a:hover{color:#fff;text-decoration:none}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}
footer .fine{border-top:1px solid var(--border);margin-top:32px;padding-top:18px;font-size:.78rem;color:#5F6F8A}

/* ================= V4: tabs, top strip, referral, animations ================= */
.hometabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px}
.htab{background:transparent;border:1px solid rgba(255,255,255,.14);color:inherit;border-radius:99px;
  padding:9px 16px;cursor:pointer;font-size:.92rem;font-weight:600;transition:all .22s ease}
.htab:hover{border-color:var(--accent,#F7931A);transform:translateY(-1px)}
.htab.on{background:var(--accent,#F7931A);color:#101319;border-color:var(--accent,#F7931A)}
.htab .off{font-size:.68rem;margin-left:4px}
.tabpane{display:none;animation:fadeUp .35s ease}
.tabpane.on{display:block}

.topstrip{display:grid;grid-auto-flow:column;grid-auto-columns:190px;gap:14px;overflow-x:auto;
  padding:12px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.topstrip .gc{scroll-snap-align:start}
.topstrip::-webkit-scrollbar{height:8px}
.topstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}

.refbar{height:8px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.refbar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#F7931A,#2ECC71);
  transition:width .6s ease}

/* Gentle motion everywhere it helps */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shine{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(240%) rotate(18deg)}}
.gc{transition:transform .22s ease, box-shadow .22s ease;position:relative;overflow:hidden}
.gc:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.gc::after{content:"";position:absolute;top:-40%;left:0;width:34%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translateX(-120%) rotate(18deg);pointer-events:none}
.gc:hover::after{animation:shine .8s ease}
.card{transition:transform .2s ease, box-shadow .2s ease}
a.card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1;transform:none}
.ribbon{animation:fadeUp .4s ease}
@media (prefers-reduced-motion: reduce){
  .gc,.card,.htab,.tabpane,.reveal{transition:none;animation:none}
  .gc:hover::after{animation:none}
}

/* ================= V4.1: animated How-it-works ================= */
.hiwanim{background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:34px 22px 22px}
.hiwstage{display:flex;align-items:center;justify-content:space-around;gap:10px;flex-wrap:wrap}
.hiwscene{text-align:center;min-width:180px}
.hiwlabel{margin-top:14px;font-weight:600;font-size:.95rem}
.hiwarrow{font-size:1.6rem;color:var(--accent,#F7931A);animation:nudge 1.6s ease-in-out infinite}
.hiwarrow.d2{animation-delay:.8s}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(8px);opacity:1}}

.hiwcards{display:flex;gap:10px;justify-content:center;align-items:flex-end;height:92px}
.hiwcard{width:58px;height:76px;border-radius:10px;background:linear-gradient(135deg,#24344f,#0B1B33);
  border:1px solid rgba(255,255,255,.12)}
.hiwcard.picked{background:linear-gradient(135deg,#F7931A,#c96f06);display:flex;align-items:center;
  justify-content:center;font-size:1.6rem;animation:pickCard 3.4s ease-in-out infinite;box-shadow:0 10px 24px rgba(247,147,26,.35)}
@keyframes pickCard{0%,15%{transform:translateY(0) scale(1)}30%,70%{transform:translateY(-14px) scale(1.08)}85%,100%{transform:translateY(0) scale(1)}}

.hiwpay{position:relative;height:92px;display:flex;align-items:center;justify-content:center;gap:8px}
.hiwcoin{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.05rem;position:relative}
.hiwcoin.btc{background:#F7931A;animation:orbit 3.4s ease-in-out infinite}
.hiwcoin.usdt{background:#26A17B;animation:orbit 3.4s ease-in-out infinite .35s}
.hiwcoin.eth{background:#627EEA;animation:orbit 3.4s ease-in-out infinite .7s}
@keyframes orbit{0%,10%{transform:translateY(0)}35%{transform:translateY(-16px)}60%{transform:translate(26px,0) scale(.6);opacity:.4}75%,100%{transform:translateY(0) scale(1);opacity:1}}
.hiwlock{font-size:1.8rem;margin-left:6px;animation:lockPulse 3.4s ease-in-out infinite}
@keyframes lockPulse{0%,55%{transform:scale(1)}65%{transform:scale(1.25)}75%,100%{transform:scale(1)}}

.hiwmail{position:relative;height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hiwenv{font-size:2.2rem;animation:envDrop 3.4s ease-in-out infinite}
@keyframes envDrop{0%,20%{transform:translateY(-26px);opacity:0}35%{transform:translateY(0);opacity:1}
  45%{transform:translateY(-4px)}55%,100%{transform:translateY(0);opacity:1}}
.hiwcode{font-family:ui-monospace,monospace;font-size:.86rem;letter-spacing:1px;background:rgba(46,204,113,.14);
  color:#2ECC71;border:1px solid rgba(46,204,113,.4);border-radius:8px;padding:4px 10px;margin-top:6px;
  animation:codePop 3.4s ease-in-out infinite}
@keyframes codePop{0%,45%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.08)}70%,100%{opacity:1;transform:scale(1)}}
.hiwping{position:absolute;top:6px;right:24%;width:10px;height:10px;border-radius:50%;background:#2ECC71;
  animation:ping 3.4s ease-out infinite}
@keyframes ping{0%,45%{box-shadow:0 0 0 0 rgba(46,204,113,.6);opacity:0}55%{opacity:1}
  85%{box-shadow:0 0 0 16px rgba(46,204,113,0);opacity:0}100%{opacity:0}}

.hiwbar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:24px;overflow:hidden}
.hiwbar span{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#F7931A,#2ECC71);animation:fillBar 3.4s ease-in-out infinite}
@keyframes fillBar{0%{width:0}90%{width:100%}100%{width:100%}}

/* Referral banner */
.refbanner{background:linear-gradient(120deg,rgba(247,147,26,.16),rgba(46,204,113,.12));
  border:1px solid rgba(247,147,26,.35);border-radius:18px;padding:34px 26px;text-align:center;position:relative;overflow:hidden}
.refbanner::before{content:"🎁";position:absolute;font-size:5rem;opacity:.12;left:4%;top:8%;transform:rotate(-14deg)}
.refbanner::after{content:"💸";position:absolute;font-size:5rem;opacity:.12;right:4%;bottom:8%;transform:rotate(12deg)}
.navref{background:linear-gradient(90deg,#F7931A,#ffb24d);color:#101319!important;border-radius:99px;
  padding:7px 14px;font-weight:700;font-size:.85rem;white-space:nowrap;animation:refGlow 2.6s ease-in-out infinite}
@keyframes refGlow{0%,100%{box-shadow:0 0 0 0 rgba(247,147,26,.45)}50%{box-shadow:0 0 0 7px rgba(247,147,26,0)}}
@media (prefers-reduced-motion: reduce){
  .hiwcard.picked,.hiwcoin,.hiwlock,.hiwenv,.hiwcode,.hiwping,.hiwbar span,.hiwarrow,.navref{animation:none}
}

/* ================= V4.2: branded signup buttons ================= */
.sso{display:flex;flex-direction:column;gap:10px}
.ssobtn{display:flex;align-items:center;justify-content:center;gap:10px;border-radius:99px;
  padding:12px 16px;font-weight:600;font-size:.95rem;text-decoration:none;
  transition:transform .15s ease, filter .15s ease;border:1px solid transparent}
.ssobtn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ssobtn.google{background:#fff;color:#1b2733}
.ssobtn.apple{background:#000;color:#fff;border-color:rgba(255,255,255,.18)}
.ssobtn.phone{background:#1E8E93;color:#fff}
.ordivider{display:flex;align-items:center;gap:12px;margin:18px 0 6px;color:var(--muted,#8a94a6);font-size:.85rem}
.ordivider::before,.ordivider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.14)}

/* ================= V5: light theme (dark stays default) ================= */
html[data-theme="light"]{
  --ink:#17202E; --ink-soft:#3A475C; --muted:#5D6C82;
  --bg:#F5F7FA; --surface:#FFFFFF; --surface2:#FFFFFF; --border:#E3E8F0;
  --shadow:0 8px 28px rgba(23,32,46,.10);
}
html[data-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-theme="light"] .topbar{background:#0B111E;color:#C4D0E2}
html[data-theme="light"] nav.mainnav{background:#fff;border-bottom:1px solid var(--border)}
html[data-theme="light"] .panel,html[data-theme="light"] .card{background:#fff;border-color:var(--border);box-shadow:var(--shadow)}
html[data-theme="light"] .hero{background:linear-gradient(160deg,#EDF2F9,#F8FAFD)}
html[data-theme="light"] .htab{border-color:#D5DDE8;color:var(--ink-soft)}
html[data-theme="light"] .htab.on{color:#101319}
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{background:#fff;color:var(--ink);border-color:#CBD5E1}
html[data-theme="light"] .hiwanim{background:#fff;border-color:var(--border)}
html[data-theme="light"] .refbanner{background:linear-gradient(120deg,rgba(247,147,26,.10),rgba(46,204,113,.08))}
html[data-theme="light"] .sup-modal{background:#fff;border-color:var(--border)}
html[data-theme="light"] .ssobtn.google{border:1px solid #D5DDE8}
.themetog{background:transparent;border:1px solid var(--border);border-radius:99px;cursor:pointer;
  padding:6px 11px;font-size:.95rem;line-height:1;color:var(--ink);transition:transform .15s}
.themetog:hover{transform:scale(1.08)}

/* ================= V5: Crafin-style product tiles ================= */
.ptile{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:12px;transition:transform .18s ease, box-shadow .18s ease;position:relative;text-decoration:none!important}
.ptile:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.ptile .art{position:relative;border-radius:12px;aspect-ratio:8/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ptile .art img{max-height:62%;max-width:74%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
/* Full-card artwork: fills the entire art area edge-to-edge, no border, no margin */
.ptile .art.full{background:#0B1B33}
.ptile .art.full img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;border-radius:12px}
.ptile .pct{position:absolute;top:8px;right:8px;background:#16C784;color:#fff;font-weight:800;font-size:.78rem;
  border-radius:8px;padding:4px 8px}
.ptile .soldout{position:absolute;top:8px;right:8px;background:#5D6C82;color:#fff;font-weight:700;font-size:.75rem;border-radius:8px;padding:4px 8px}
.ptile .nm{font-weight:700;color:var(--ink);margin:11px 2px 9px;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptile .view{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);
  border-radius:10px;padding:9px 0;color:var(--accent);font-weight:700;font-size:.88rem;transition:background .15s,color .15s}
.ptile:hover .view{background:var(--accent);color:#fff;border-color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:16px}

/* ================= V5: Crafin-style detail page ================= */
.dtabs{display:flex;gap:4px;border-bottom:2px solid var(--border);flex-wrap:wrap}
.dtab{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--muted);
  font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;padding:11px 14px;cursor:pointer}
.dtab.on{color:var(--accent);border-bottom-color:var(--accent)}
.dpane{display:none;padding:18px 2px;line-height:1.7}
.dpane.on{display:block;animation:fadeUp .3s ease}
.paystrip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.paystrip span{border:1px solid var(--border);border-radius:8px;padding:5px 11px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.trustrow{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--border)}
.trustrow:last-child{border-bottom:0}
.trustrow .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:rgba(46,204,113,.12)}
.sellbanner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0B111E,#18243A);border:1px solid var(--border);border-radius:18px;padding:26px 26px}
html[data-theme="light"] .sellbanner{color:#EAF0F9}
.tipcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tipcards .tc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px}
.tipcards .n{display:inline-flex;width:34px;height:34px;border-radius:10px;background:rgba(46,204,113,.13);
  color:var(--accent);font-weight:800;align-items:center;justify-content:center;margin-bottom:9px}
.selhero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.selhero-badges span{background:rgba(46,204,113,.13);border:1px solid rgba(46,204,113,.35);color:var(--accent);
  border-radius:99px;padding:7px 14px;font-size:.83rem;font-weight:700}
.topstrip.pgridstrip{grid-auto-columns:205px}
.topstrip.pgridstrip .ptile{height:100%}

/* ================= V5.1: light theme text & contrast fixes ================= */
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,
html[data-theme="light"] .display{color:var(--ink)}
html[data-theme="light"] body,html[data-theme="light"] p,html[data-theme="light"] label,
html[data-theme="light"] td,html[data-theme="light"] th,html[data-theme="light"] li,
html[data-theme="light"] summary,html[data-theme="light"] .lede{color:var(--ink)}
html[data-theme="light"] .muted,html[data-theme="light"] .small.muted{color:var(--muted)}
html[data-theme="light"] .navlinks a{color:var(--ink)}
html[data-theme="light"] .hometabs{border-bottom-color:var(--border)}
html[data-theme="light"] .htab{color:var(--ink-soft)}
html[data-theme="light"] .ordivider::before,html[data-theme="light"] .ordivider::after{background:var(--border)}
html[data-theme="light"] .statbar div{border-color:var(--border)}
html[data-theme="light"] .statbar b{color:var(--ink)}
html[data-theme="light"] .statbar span{color:var(--muted)}
html[data-theme="light"] .benefits span{color:var(--ink-soft);border-color:var(--border)}
html[data-theme="light"] .pricebox{background:#F0F4F9;border-color:var(--border)}
html[data-theme="light"] .pricebox .big{color:var(--ink)}
html[data-theme="light"] .denoms .d{background:#fff;border-color:#CBD5E1;color:var(--ink)}
html[data-theme="light"] .denoms .d.on{background:var(--amber);color:#1a0f00;border-color:var(--amber)}
html[data-theme="light"] .hiw{background:#fff;border-color:var(--border)}
html[data-theme="light"] .hiw .a{color:var(--ink-soft)}
html[data-theme="light"] .tag{background:#EDF2F9;color:var(--ink-soft);border-color:var(--border)}
html[data-theme="light"] .tag.green{background:rgba(22,199,132,.12);color:#0FA96C}
html[data-theme="light"] .tag.amber{background:rgba(247,147,26,.14);color:#B96F0A}
html[data-theme="light"] table.list th{color:var(--muted);border-color:var(--border)}
html[data-theme="light"] table.list td{border-color:var(--border)}
html[data-theme="light"] .topstrip::-webkit-scrollbar-thumb{background:#C7D2E0}
html[data-theme="light"] .hiwcard{background:linear-gradient(135deg,#DFE7F2,#C6D2E4);border-color:#C6D2E4}
html[data-theme="light"] .hiwbar{background:#E3E8F0}
html[data-theme="light"] .refbar{background:#E3E8F0}
html[data-theme="light"] .trustrow{border-color:var(--border)}
html[data-theme="light"] .dtab{color:var(--muted)}
html[data-theme="light"] .dtab.on{color:var(--accent)}
html[data-theme="light"] .dtabs{border-bottom-color:var(--border)}
html[data-theme="light"] .paystrip span{color:var(--ink-soft);border-color:var(--border)}
html[data-theme="light"] .form-narrow .card{background:#fff}
html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#93A3BC}
html[data-theme="light"] .ptile .nm{color:var(--ink)}
html[data-theme="light"] footer,html[data-theme="light"] .footer{background:#0B111E}
html[data-theme="light"] .selhero-badges span{background:rgba(22,199,132,.10)}

/* ================= V5.1: horizontal brand slider with arrows ================= */
.hslider{position:relative}
.hslider .track{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:14px;overflow-x:auto;
  scroll-behavior:smooth;padding:10px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hslider .track::-webkit-scrollbar{display:none}
.hslider .track > *{scroll-snap-align:start}
.hslider .arr{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface2);color:var(--ink);font-size:1.15rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .15s,background .15s}
.hslider .arr:hover{transform:translateY(-50%) scale(1.1);background:var(--amber);color:#1a0f00}
.hslider .arr.prev{left:-8px}.hslider .arr.next{right:-8px}
html[data-theme="light"] .hslider .arr{background:#fff}

/* ================= V5.1: professional profile ================= */
.profhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:2rem;color:#1a0f00;
  background:linear-gradient(135deg,var(--amber),#ffb24d);box-shadow:0 10px 26px rgba(247,147,26,.35)}
.profstats{display:flex;gap:22px;margin-left:auto}
.profstats div{text-align:center}
.profstats b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.15rem}
.profstats span{font-size:.75rem;color:var(--muted)}
.cardhead{display:flex;gap:12px;align-items:flex-start}
.cardhead .ic{width:42px;height:42px;border-radius:12px;background:rgba(46,204,113,.12);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex:0 0 42px}

/* ================= V5.2: cart icon + empty animation ================= */
.carticon{font-size:1.25rem;position:relative;text-decoration:none!important}
.carticon .badge{position:absolute;top:-7px;right:-11px}
.emptycart{position:relative;display:inline-block;height:96px;width:140px}
.ec-cart{font-size:4rem;display:inline-block;animation:cartRock 2.8s ease-in-out infinite;transform-origin:bottom center}
@keyframes cartRock{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(6deg)}}
.ec-item{position:absolute;font-size:1.5rem;opacity:0;left:50%}
.ec-item.i1{animation:itemDrop 2.8s ease-in infinite .2s}
.ec-item.i2{animation:itemDrop 2.8s ease-in infinite 1.1s;font-size:1.3rem}
.ec-item.i3{animation:itemDrop 2.8s ease-in infinite 1.9s}
@keyframes itemDrop{0%{top:-26px;opacity:0;transform:translateX(-50%) rotate(0)}15%{opacity:1}
  45%{top:26px;opacity:1;transform:translateX(-50%) rotate(24deg)}60%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){.ec-cart,.ec-item{animation:none}.ec-item{display:none}}

/* ================= V5.2: Crafin sell layout ================= */
.sellgrid{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:28px;align-items:start}
@media (max-width:820px){.sellgrid{grid-template-columns:1fr}}
.sellform label{font-weight:600}
.qrow{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border)}
.qrow.qtotal{border-bottom:0;padding-top:12px;font-size:1.2rem}
.whysell{background:linear-gradient(120deg,#0B111E,#141F33);border:1px solid var(--border);border-radius:20px;padding:34px 30px;color:#C4D0E2}
.whylist{list-style:none;margin:16px 0 0;padding:0}
.whylist li{padding:8px 0 8px 30px;position:relative}
.whylist li::before{content:"✔";position:absolute;left:0;color:var(--amber);font-weight:800}
html[data-theme="light"] .whysell{color:#C4D0E2}

/* ================= V6: mobile navigation — half-screen drawer + search toggle ================= */
.searchtog{display:none;background:transparent;border:1px solid var(--border);border-radius:99px;
  width:40px;height:40px;font-size:1.05rem;cursor:pointer;color:var(--ink)}
.navback{display:none}
@media(max-width:920px){
  .searchtog{display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
  .hamb{margin-left:8px}
  .navsearch{display:none;position:absolute;top:64px;left:0;right:0;padding:10px 14px;
    background:var(--surface);border-bottom:1px solid var(--border);z-index:60}
  body.search-open .navsearch{display:block}
  .navsearch input{width:100%}
  /* half-screen right drawer — OPAQUE, theme-correct */
  html .navlinks{display:flex;position:fixed;top:0;right:0;bottom:0;left:auto;width:min(72vw,320px);
    background:#0E1626;border-left:1px solid #26334B;flex-direction:column;
    padding:70px 20px 24px;align-items:stretch;gap:4px;z-index:80;overflow-y:auto;
    transform:translateX(105%);transition:transform .28s ease;box-shadow:-14px 0 40px rgba(0,0,0,.5)}
  html[data-theme="light"] .navlinks{background:#FFFFFF;border-left-color:#E3E8F0;box-shadow:-14px 0 40px rgba(23,32,46,.18)}
  body.menu-open .navlinks{transform:translateX(0)}
  html .navlinks a,html .navlinks .nl{color:#E7EDF6}
  html[data-theme="light"] .navlinks a,html[data-theme="light"] .navlinks .nl{color:#17202E}
  .navlinks .nl{order:99;padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.08);width:100%}
  html[data-theme="light"] .navlinks .nl{border-bottom-color:#EDF1F6}
  /* Order: Currency, Buy, Sell, Support, Login, Signup ... gap ... Refer, Theme */
  .navlinks .nl-currency{order:1;border-bottom:0;margin-bottom:10px;border:1px solid var(--border);border-radius:12px;padding:11px 12px}
  .navlinks .nl-buy{order:2}
  .navlinks .nl-sell{order:3}
  .navlinks .nl-deals{order:4}
  .navlinks .nl-support{order:9;text-align:center;margin-top:14px;border-bottom:0;border-radius:99px;
    padding:13px 16px;font-weight:800;color:#241300!important;position:relative;overflow:hidden;
    background:linear-gradient(135deg,#FFD37E,#F5A60D);box-shadow:0 8px 22px rgba(245,166,13,.4)}
  .navlinks .nl-support::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
    transform:translateX(-140%);animation:sadShine 2.8s ease-in-out infinite}
  .navlinks .nl-cart{order:4}
  .navlinks .nl-account{order:5}
  .navlinks .nl-admin{order:8}
  .navlinks .nl-login{order:6;text-align:center;margin-top:14px;border:1.5px solid var(--amber);
    border-radius:99px;padding:12px 16px;font-weight:700;color:var(--amber)!important;border-bottom-width:1.5px}
  .navlinks .nl-signup{order:7;text-align:center;margin-top:10px;border-bottom:0;border-radius:99px;padding:12px 16px;font-weight:700}
  .navlinks .nl-refer{order:10;margin-top:10px;text-align:center;margin-top:auto;padding:12px 16px}
  .navlinks .nl-theme{order:11;border-bottom:0;margin-top:12px;align-self:center;width:52px;height:44px;
    display:flex;align-items:center;justify-content:center;font-size:1.2rem}
  /* menu items feel */
  .navlinks .nl-buy,.navlinks .nl-sell,.navlinks .nl-support,.navlinks .nl-cart,
  .navlinks .nl-account,.navlinks .nl-admin{border-radius:10px;transition:background .15s;font-size:1.02rem}
  .navlinks .nl-buy:active,.navlinks .nl-sell:active,.navlinks .nl-support:active{background:rgba(247,147,26,.12)}
  .navback{position:fixed;inset:0;z-index:70;background:rgba(5,9,17,.55);backdrop-filter:blur(2px)}
  body.menu-open .navback{display:block}
}

/* ================= V6: how-it-works animation vertical on mobile ================= */
@media(max-width:760px){
  .hiwstage{flex-direction:column;gap:4px}
  .hiwarrow{transform:rotate(90deg);animation:nudgeDown 1.6s ease-in-out infinite;font-size:1.4rem;margin:2px 0}
  .hiwarrow.d2{animation-delay:.8s}
}
@keyframes nudgeDown{0%,100%{transform:rotate(90deg) translateX(0);opacity:.6}50%{transform:rotate(90deg) translateX(8px);opacity:1}}

/* ================= V6: sell animation ================= */
.sellanim .hiwlabel{margin-top:10px}
.sa-form{width:70px;height:88px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
  margin:0 auto;position:relative;padding:10px 9px;animation:formPop 3.4s ease-in-out infinite}
.sa-form i{display:block;height:6px;border-radius:4px;background:var(--border);margin-bottom:7px}
.sa-form i:nth-child(1){width:70%;background:var(--amber)}
.sa-form i:nth-child(2){width:100%}.sa-form i:nth-child(3){width:85%}
.sa-form em{position:absolute;right:-10px;bottom:-8px;font-style:normal;font-size:1.4rem;animation:penWrite 3.4s ease-in-out infinite}
@keyframes formPop{0%,10%{transform:scale(.94)}25%,70%{transform:scale(1)}}
@keyframes penWrite{0%,15%{transform:translate(0,0) rotate(0)}30%{transform:translate(-16px,-14px) rotate(-14deg)}45%{transform:translate(-4px,-4px) rotate(6deg)}60%,100%{transform:translate(0,0)}}
.sa-shield{font-size:2.6rem;display:inline-block;animation:shieldPulse 3.4s ease-in-out infinite}
.sa-check{position:absolute;font-size:1.3rem;margin-left:-14px;margin-top:18px;opacity:0;animation:checkPop 3.4s ease-in-out infinite}
@keyframes shieldPulse{0%,30%{transform:scale(1)}45%{transform:scale(1.18)}55%,100%{transform:scale(1)}}
@keyframes checkPop{0%,45%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.2)}68%,100%{opacity:1;transform:scale(1)}}
.sa-wallet{position:relative;display:inline-block;font-size:2.6rem}
.sa-coin{position:absolute;left:50%;font-size:1.15rem;opacity:0}
.sa-coin.k1{animation:coinIn 3.4s ease-in infinite .1s}
.sa-coin.k2{animation:coinIn 3.4s ease-in infinite .5s}
.sa-coin.k3{animation:coinIn 3.4s ease-in infinite .9s}
@keyframes coinIn{0%,55%{top:-30px;opacity:0;transform:translateX(-50%)}65%{opacity:1}85%{top:6px;opacity:1}92%,100%{opacity:0;top:8px}}

/* ================= V6: support page mobile stacking ================= */
.stack1{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.stack1{grid-template-columns:1fr}}
.suprow2{display:flex;gap:10px}
@media(max-width:560px){.suprow2{flex-direction:column;gap:0}.sup-row{flex-direction:column;gap:0}}

/* ================= V6.1: amount boxes with discount + USD inside ================= */
.denoms{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.d.d2{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;position:relative;line-height:1.15}
.d.d2 b{font-size:.98rem}
.d.d2 small{font-size:.72rem;opacity:.85}
.d.d2 .dpct{position:absolute;top:-8px;right:-6px;background:#16C784;color:#fff;font-size:.66rem;
  font-weight:800;border-radius:7px;padding:2px 6px}
.d.d2.on .dpct{background:#0d8f5f}

/* ================= V6.1: mobile drawer — solid background + close button ================= */
@media(max-width:920px){ .drawerclose{display:flex} }
.drawerclose{display:none;position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border);background:transparent;color:var(--ink);font-size:1.05rem;cursor:pointer;
  align-items:center;justify-content:center}

/* ================= V6.2: mobile slider fix ================= */
@media(max-width:760px){
  .hslider .arr{display:none}                 /* arrows off on touch — swipe instead */
  .hslider .track{grid-auto-columns:44vw;gap:11px;padding:8px 2px 14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .hslider .track > *{scroll-snap-align:start}
  .topstrip,.topstrip.pgridstrip{grid-auto-columns:44vw}
}
@media(max-width:460px){
  .hslider .track,.topstrip,.topstrip.pgridstrip{grid-auto-columns:62vw}
}
/* thin visible scroll hint on mobile */
@media(max-width:760px){
  .hslider .track::-webkit-scrollbar{display:block;height:4px}
  .hslider .track::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
}

/* ================= V6.2: refer & earn animation ================= */
.ra-share{font-size:2.6rem;position:relative;display:inline-block;animation:shieldPulse 3.4s ease-in-out infinite}
.ra-send{position:absolute;font-size:1.2rem;left:50%;top:0;opacity:0}
.ra-send.s1{animation:raSend 3.4s ease-in-out infinite .2s}
.ra-send.s2{animation:raSend 3.4s ease-in-out infinite 1s}
@keyframes raSend{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1}
  55%{transform:translate(46px,-30px) scale(1);opacity:0}100%{opacity:0}}
.ra-people{font-size:2.6rem;display:inline-block;animation:formPop 3.4s ease-in-out infinite}
.ra-spend{position:absolute;margin-top:34px;margin-left:-8px;font-weight:800;color:var(--accent);opacity:0;
  animation:checkPop 3.4s ease-in-out infinite}
.ra-wallets{font-size:1.9rem;position:relative;display:inline-block;letter-spacing:6px}
.ra-reward{position:absolute;font-weight:800;color:#16C784;font-size:1rem;opacity:0}
.ra-reward.r1{left:2px;animation:coinIn 3.4s ease-in infinite .3s}
.ra-reward.r2{right:2px;animation:coinIn 3.4s ease-in infinite .7s}


/* ================= V6.3: light theme header visibility ================= */
html[data-theme="light"] nav.main{background:#fff;border-bottom:1px solid var(--border)}
html[data-theme="light"] nav.main .logo{color:#17202E}
html[data-theme="light"] nav.main .navlinks a,
html[data-theme="light"] nav.main .navlinks .nl{color:#17202E}
html[data-theme="light"] nav.main .navlinks a:hover{color:#000}
html[data-theme="light"] .themetog{border-color:#CBD5E1;color:#17202E}
html[data-theme="light"] .searchtog{border-color:#CBD5E1;color:#17202E}
html[data-theme="light"] .hamb{color:#17202E}
html[data-theme="light"] .navlinks select,
html[data-theme="light"] nav.main select{background:#fff;color:#17202E;border-color:#CBD5E1}
html[data-theme="light"] .cartlink{color:#17202E}
html[data-theme="light"] .navref{color:#101319 !important} /* amber pill stays dark text */
/* desktop: make sure controls never disappear against white */
@media(min-width:921px){
  html[data-theme="light"] nav.main .navlinks{background:transparent}
  html[data-theme="light"] nav.main .navlinks a{color:#17202E}
}

/* ================= V7.1: hide floating support widget while drawer is open ================= */
@media(max-width:920px){
  body.menu-open .sup-btn,body.menu-open .sup-modal{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s}
}
.sup-btn{transition:opacity .2s}

/* ===== Dashboard v2 — modern account overview ===== */
.dash2-hero{position:relative;border-radius:20px;padding:26px 26px 22px;overflow:hidden;color:#fff;
  background:linear-gradient(125deg,#101d3a 0%,#16294f 45%,#0e3b34 100%);border:1px solid rgba(255,255,255,.08)}
.dash2-hero::before{content:"";position:absolute;inset:-40% -20% auto auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,199,132,.28),transparent 65%);pointer-events:none}
.dash2-hero::after{content:"";position:absolute;bottom:-160px;left:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(88,101,242,.22),transparent 65%);pointer-events:none}
.dash2-hero .lbl{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:700}
.dash2-hero .bal{font-size:2.6rem;font-weight:850;letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.dash2-hero .sub{color:rgba(255,255,255,.65);font-size:.85rem;margin-top:4px}
.dash2-hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;position:relative;z-index:1}
.dash2-hero .acts .btn{backdrop-filter:blur(4px)}
.dash2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.dstat{border-radius:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
.dstat .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:10px}
.dstat .v{font-size:1.35rem;font-weight:800;color:var(--ink)}
.dstat .k{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dstat .bar{height:6px;border-radius:99px;background:rgba(128,128,160,.18);margin-top:10px;overflow:hidden}
.dstat .bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#16C784,#0ea5e9)}
.dquick{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.dquick a{display:flex;align-items:center;gap:12px;border-radius:16px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--border);font-weight:700;color:var(--ink);transition:.18s}
.dquick a:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.dquick a .qi{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex:none}
.refcard{border-radius:20px;border:1px solid var(--border);background:var(--surface);padding:22px;position:relative;overflow:hidden}
.refcard::before{content:"";position:absolute;top:-90px;right:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,171,0,.14),transparent 65%);pointer-events:none}
.refcard .earned{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.refcard .earned b{font-size:1.9rem;font-weight:850;color:var(--ink)}
.sharebar{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.sharebtn{display:inline-flex;align-items:center;gap:7px;border-radius:12px;padding:9px 15px;font-weight:700;font-size:.88rem;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);cursor:pointer;transition:.15s}
.sharebtn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent)}
.sharebtn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.sharebtn.primary:hover{color:#fff;filter:brightness(1.06)}
.reflinkbox{display:flex;gap:8px;margin-top:12px}
.reflinkbox input{flex:1;min-width:180px;border-radius:12px;font-size:.9rem}
.dact{border-radius:20px;border:1px solid var(--border);background:var(--surface);padding:20px}
.dact .row{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--border)}
.dact .row:last-child{border-bottom:0}
.dact .ai{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none}
.dact .amt{margin-left:auto;font-weight:800}
.kycpill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;border-radius:99px;padding:2px 9px;margin-left:auto}
.kycpill.t0{background:rgba(255,171,0,.15);color:#e8a300}
.kycpill.tv{background:rgba(22,199,132,.15);color:#16C784}
@media(max-width:640px){.dash2-hero .bal{font-size:2.1rem}}

/* ==========================================================================
   V8 — Sell pages, fintech account design, mobile bottom nav
   ========================================================================== */

/* ---------------- Sell hero ---------------- */
.sellhero{position:relative;overflow:hidden;padding:44px 0 40px;
  background:linear-gradient(135deg,#0f172a 0%,#13294B 52%,#0F766E 100%)}
.sellhero::after{content:"";position:absolute;inset:auto -10% -60% auto;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,230,166,.18),transparent 62%);pointer-events:none}
.sellhero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:36px;align-items:center;position:relative;z-index:1}
.sellhero-h1{font-size:clamp(1.8rem,4.4vw,2.9rem);margin:14px 0 0;color:#fff;line-height:1.14}
.sellhero-h1 .accent{color:var(--accent)}
.nowrap{white-space:nowrap}
@media(max-width:560px){.nowrap{white-space:normal}}
.sellhero .lede{color:rgba(255,255,255,.78)}
.sellhero .tag{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}

/* logo collage */
.sellhero-art{position:relative;min-height:270px}
.collage{position:relative;width:100%;height:290px}
.collage .ctile{position:absolute;width:104px;height:66px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:9px;
  box-shadow:0 14px 34px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.5);
  animation:cfloat 7s ease-in-out infinite}
.collage .ctile::before{content:"";position:absolute;inset:-1px;border-radius:14px;
  background:linear-gradient(140deg,var(--bc),transparent 62%);opacity:.16;pointer-events:none}
.collage .ctile img{max-width:100%;max-height:100%;object-fit:contain}
.collage .t1{top:8%;left:2%;transform:rotate(-8deg);animation-delay:0s}
.collage .t2{top:0;left:32%;transform:rotate(4deg);animation-delay:.5s;z-index:3}
.collage .t3{top:12%;left:62%;transform:rotate(-4deg);animation-delay:1s}
.collage .t4{top:34%;left:16%;transform:rotate(6deg);animation-delay:1.5s;z-index:2}
.collage .t5{top:30%;left:46%;transform:rotate(-6deg);animation-delay:2s;z-index:4}
.collage .t6{top:38%;left:74%;transform:rotate(9deg);animation-delay:2.5s}
.collage .t7{top:62%;left:4%;transform:rotate(5deg);animation-delay:3s}
.collage .t8{top:66%;left:34%;transform:rotate(-7deg);animation-delay:3.5s;z-index:3}
.collage .t9{top:60%;left:64%;transform:rotate(3deg);animation-delay:4s}
.collage .t10{top:24%;left:0;transform:rotate(11deg);animation-delay:4.5s;opacity:.9}
.collage .t11,.collage .t12{display:none}
.collage-glow{position:absolute;inset:12% 8%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,230,166,.24),transparent 68%);filter:blur(26px);z-index:0}
@keyframes cfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:900px){
  .sellhero-in{grid-template-columns:1fr}
  .sellhero-art{min-height:230px;order:2}
  .collage{height:236px;max-width:420px;margin:0 auto}
  .collage .ctile{width:86px;height:56px}
}
@media(max-width:420px){.collage .t9,.collage .t10{display:none}}

/* ---------------- Sell search ---------------- */
.sellsearch input{max-width:520px;border-radius:99px;padding:13px 18px}
.sellsearch-msg{margin:8px 0 0;font-weight:600;font-size:.9rem;min-height:1.2em}
.sellsearch-msg.yes{color:var(--accent)}
.sellsearch-msg.no{color:var(--warn)}

/* ---------------- Sell brand grid ---------------- */
.sellgridcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}
.sellcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:20px 14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--border);
  color:var(--ink);text-align:center;transition:transform .15s,border-color .15s,box-shadow .15s}
.sellcard:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.28)}
.sellcard.is-hidden{display:none}
.sellcard-fee{position:absolute;top:9px;right:9px;display:flex;flex-direction:column;align-items:flex-end;
  line-height:1;font-weight:800;font-size:.82rem;padding:5px 9px;border-radius:9px}
.sellcard-fee small{font-size:.56rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.8;margin-top:2px}
.sellcard-fee.zero{background:rgba(22,199,132,.16);color:var(--accent)}
.sellcard-fee.low{background:rgba(91,141,239,.16);color:var(--info)}
.sellcard-fee.std{background:rgba(243,176,76,.16);color:var(--warn)}
.sellcard-logo{width:100%;height:56px;border-radius:12px;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:8px;margin-top:6px}
.sellcard-logo img{max-width:100%;max-height:100%;object-fit:contain}
.sellcard-name{font-weight:700;font-size:.92rem;line-height:1.25}
.sellcard-reg{font-size:.72rem;color:var(--muted)}
.sellcard-cta{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--accent)}
@media(max-width:560px){
  .sellgridcards{grid-template-columns:repeat(2,1fr);gap:11px}
  .sellcard{padding:16px 10px 13px}
  .sellcard-logo{height:46px}
}

/* ---------------- Per-brand sell hero ---------------- */
.sbhero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:28px;align-items:center;
  padding:26px;border-radius:22px;border:1px solid var(--border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--bc) 26%,transparent),var(--surface) 62%)}
.sbhero-art{display:flex;align-items:center;justify-content:center}
.sbhero-card{width:100%;max-width:330px;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.sbhero-chip{display:flex;align-items:center;justify-content:center;width:210px;height:130px;border-radius:16px;
  background:#fff;padding:20px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.sbhero-chip img{max-width:100%;max-height:100%;object-fit:contain}
.sbhero-stats{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.sbhero-stats b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;line-height:1.1}
.sbhero-stats b.accent{color:var(--accent)}
.sbhero-stats span{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.sbhero-note{margin:16px 0 0;padding:11px 14px;border-radius:12px;font-size:.87rem;
  background:rgba(91,141,239,.1);border:1px solid rgba(91,141,239,.28);color:var(--ink-soft)}
.quoteline{min-height:1.3em;font-weight:700;color:var(--muted);font-size:.9rem}
.quoteline.on{color:var(--accent)}
@media(max-width:820px){.sbhero{grid-template-columns:1fr;padding:20px}}

/* ==========================================================================
   Fintech account surface (.fin) — palette scoped so the storefront is untouched
   ========================================================================== */
.fin{
  --fin-bg:#090D16; --fin-card:#111827; --fin-card-h:#172033; --fin-line:rgba(255,255,255,.06);
  --fin-primary:#2FE6A6; --fin-second:#4C8DFF; --fin-warn:#FFB020; --fin-danger:#FF5C72;
  --fin-text:#FFFFFF; --fin-sub:#A7B0C0; --fin-r:22px;
  position:relative;
}
html[data-theme="light"] .fin{
  --fin-card:#FFFFFF; --fin-card-h:#F4F7FB; --fin-line:rgba(10,20,40,.09);
  --fin-text:#0B1220; --fin-sub:#5A677D;
}

/* ---- banner ---- */
.fin-banner{position:relative;border-radius:26px;overflow:hidden;padding:26px;
  background:linear-gradient(135deg,#0f172a,#13294B 55%,#0F766E)}
.fin-banner-bg{position:absolute;inset:-45% -18% auto auto;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,230,166,.28),transparent 62%);pointer-events:none}
.fin-banner-in{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(260px,auto);
  gap:22px;align-items:center}
.fin-avatar{position:relative;width:82px;height:82px;border-radius:26px;display:flex;align-items:center;
  justify-content:center;font-family:'Sora',system-ui,sans-serif;font-size:2rem;font-weight:800;color:#04231a;
  background:linear-gradient(140deg,#2FE6A6,#4C8DFF);box-shadow:0 12px 30px rgba(47,230,166,.32)}
.fin-verified{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;
  background:var(--fin-primary);color:#04231a;font-size:.8rem;display:flex;align-items:center;
  justify-content:center;border:3px solid #13294B;font-weight:900}
.fin-id h1{margin:0;font-size:clamp(1.3rem,3vw,1.7rem);color:#fff}
.fin-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.fin-chip{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.16)}
.fin-chip.on{background:rgba(47,230,166,.18);color:#7BF3CC;border-color:rgba(47,230,166,.36)}
.fin-meta{display:flex;gap:22px;flex-wrap:wrap;margin:14px 0 0}
.fin-meta div{min-width:0}
.fin-meta dt{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.fin-meta dd{margin:2px 0 0;font-size:.86rem;color:#fff;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.fin-money{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:20px;
  padding:16px 18px;backdrop-filter:blur(8px)}
.fin-money-main span{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:700}
.fin-money-main b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:2rem;color:#fff;line-height:1.15;margin-top:3px}
.fin-money-split{display:flex;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.fin-money-split span{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(255,255,255,.5);font-weight:700}
.fin-money-split b{font-size:1rem;color:#fff}
.fin-money-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
@media(max-width:940px){
  .fin-banner-in{grid-template-columns:auto minmax(0,1fr)}
  .fin-money{grid-column:1 / -1}
}
@media(max-width:520px){
  .fin-banner{padding:18px;border-radius:20px}
  .fin-avatar{width:62px;height:62px;border-radius:20px;font-size:1.5rem}
  .fin-meta{gap:14px}
}

/* ---- buttons ---- */
.fin-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:12px;
  font-weight:700;font-size:.86rem;font-family:inherit;cursor:pointer;border:1px solid var(--fin-line);
  background:rgba(255,255,255,.08);color:var(--fin-text);transition:transform .13s,background .13s,box-shadow .13s}
.fin-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);text-decoration:none;color:var(--fin-text)}
.fin-btn.primary{background:linear-gradient(135deg,var(--fin-primary),#12b98a);color:#042318;border-color:transparent;
  box-shadow:0 8px 22px rgba(47,230,166,.26)}
.fin-btn.primary:hover{color:#042318;box-shadow:0 12px 28px rgba(47,230,166,.34)}
.fin-btn.ghost{background:transparent}
.fin-btn.danger{background:rgba(255,92,114,.14);color:var(--fin-danger);border-color:rgba(255,92,114,.3)}

/* ---- stats ---- */
.fin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}
.fin-stat{background:var(--fin-card);border:1px solid var(--fin-line);border-radius:var(--fin-r);padding:17px 18px;
  transition:transform .15s,background .15s}
.fin-stat:hover{transform:translateY(-2px);background:var(--fin-card-h)}
.fin-stat .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;margin-bottom:11px}
.fin-stat b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.42rem;color:var(--fin-text);line-height:1.1}
.fin-stat .k{display:block;margin-top:5px;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fin-sub);font-weight:700}

/* ---- columns ---- */
.fin-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:16px;margin-top:16px;align-items:start}
@media(max-width:1000px){.fin-cols{grid-template-columns:1fr}}
.fin-left,.fin-right{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---- cards ---- */
.fin-card{background:var(--fin-card);border:1px solid var(--fin-line);border-radius:var(--fin-r);padding:20px}
.fin-h3{margin:0;font-size:1.02rem;display:flex;align-items:center;gap:9px;color:var(--fin-text)}
.fin-h3 .ic{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;
  align-items:center;justify-content:center;font-size:.95rem;flex:none}
.fin-h4{margin:0 0 8px;font-size:.88rem;color:var(--fin-text);letter-spacing:.02em}
.fin-sub{margin:8px 0 0;font-size:.85rem;color:var(--fin-sub)}
.fin-muted{color:var(--fin-sub);font-size:.8rem}
.fin-empty{margin:12px 0 0;font-size:.86rem;color:var(--fin-sub)}
.fin-hr{border:0;border-top:1px solid var(--fin-line);margin:18px 0}
.fin-card label{color:var(--fin-sub)}
.fin-card input,.fin-card select{background:rgba(255,255,255,.05);border-color:var(--fin-line);color:var(--fin-text)}
html[data-theme="light"] .fin-card input,html[data-theme="light"] .fin-card select{background:#fff}

/* ---- pills ---- */
.fin-pill{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:99px;
  background:rgba(255,255,255,.09);color:var(--fin-sub);text-transform:capitalize}
.fin-pill.ok{background:rgba(47,230,166,.16);color:var(--fin-primary)}
.fin-pill.warn{background:rgba(255,176,32,.16);color:var(--fin-warn)}
.fin-pill.bad{background:rgba(255,92,114,.16);color:var(--fin-danger)}

/* ---- timeline ---- */
.fin-timeline{list-style:none;margin:16px 0 0;padding:0 0 0 20px;position:relative}
.fin-timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--fin-line),transparent)}
.fin-tl{position:relative;display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--fin-line)}
.fin-tl:last-child{border-bottom:0}
.tl-dot{position:absolute;left:-19px;top:50%;translate:0 -50%;width:10px;height:10px;border-radius:50%;
  background:var(--fin-sub);box-shadow:0 0 0 3px var(--fin-card)}
.fin-tl.ok .tl-dot{background:var(--fin-primary)}
.fin-tl.info .tl-dot{background:var(--fin-second)}
.fin-tl.warn .tl-dot{background:var(--fin-warn)}
.fin-tl.alt .tl-dot{background:#A78BFA}
.tl-ic{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;
  align-items:center;justify-content:center;flex:none}
.tl-body{flex:1;min-width:0}
.tl-body b{display:block;font-size:.88rem;color:var(--fin-text)}
.tl-when{display:block;font-size:.74rem;color:var(--fin-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-amt{font-weight:800;font-size:.88rem;white-space:nowrap}
.tl-amt.up{color:var(--fin-primary)} .tl-amt.down{color:var(--fin-danger)}

/* ---- tables ---- */
.fin-tablewrap{overflow-x:auto;margin-top:14px}
.fin-table{width:100%;border-collapse:collapse;font-size:.86rem}
.fin-table th{text-align:left;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fin-sub);padding:0 10px 9px 0;font-weight:800}
.fin-table td{padding:11px 10px 11px 0;border-top:1px solid var(--fin-line);color:var(--fin-text)}
@media(max-width:600px){
  .fin-table,.fin-table tbody,.fin-table tr,.fin-table td{display:block;width:100%}
  .fin-table thead{display:none}
  .fin-table tr{border:1px solid var(--fin-line);border-radius:14px;padding:8px 12px;margin-bottom:10px}
  .fin-table td{border:0;display:flex;justify-content:space-between;gap:12px;padding:5px 0}
  .fin-table td::before{content:attr(data-l);color:var(--fin-sub);font-size:.74rem;font-weight:700}
}

/* ---- referral list ---- */
.fin-reflist{list-style:none;margin:0;padding:0}
.fin-reflist li{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1.2fr) auto;gap:12px;
  align-items:center;padding:10px 0;border-bottom:1px solid var(--fin-line)}
.fin-reflist li:last-child{border-bottom:0}
.rf-name{font-size:.87rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fin-text)}
.rf-bar{height:7px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.rf-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fin-primary),var(--fin-second));transition:width .8s ease}

/* ---- progress ring / score ---- */
.fin-ring-wrap{display:flex;gap:16px;align-items:center;margin-top:14px;flex-wrap:wrap}
.fin-ring{width:104px;height:104px;flex:none;transform:rotate(-90deg)}
.fin-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.09);stroke-width:9}
.fin-ring .ring-fg{fill:none;stroke:url(#none);stroke:var(--fin-primary);stroke-width:9;stroke-linecap:round;
  transition:stroke-dashoffset 1s ease}
.fin-ring .ring-t{fill:var(--fin-text);font-size:1.5rem;font-weight:800;text-anchor:middle;
  transform:rotate(90deg);transform-origin:60px 60px;font-family:'Sora',system-ui,sans-serif}
.fin-checks{list-style:none;margin:0;padding:0;font-size:.82rem;color:var(--fin-sub);flex:1;min-width:130px}
.fin-checks li{padding:3px 0}
.fin-checks li.done{color:var(--fin-primary);font-weight:600}
.fin-score{display:flex;align-items:center;gap:12px;margin-top:14px}
.fin-score b{font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;color:var(--fin-text)}
.fin-scorebar{flex:1;height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
.fin-scorebar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fin-danger),var(--fin-warn),var(--fin-primary));transition:width 1s ease}
.fin-tierbar{height:9px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:14px}
.fin-tierbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fin-second),var(--fin-primary));transition:width 1s ease}

/* ---- 2FA / codes ---- */
.fin-secret{margin-top:10px;padding:12px;border-radius:12px;background:rgba(76,141,255,.1);
  border:1px dashed rgba(76,141,255,.4);text-align:center}
.fin-secret code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.14em;
  color:var(--fin-text);word-break:break-all}
.fin-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin-top:14px}
.fin-codes code{padding:9px;border-radius:10px;background:rgba(255,255,255,.06);text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;letter-spacing:.06em;color:var(--fin-text)}
.fin-devices{list-style:none;margin:12px 0 0;padding:0}
.fin-devices li{padding:9px 0;border-bottom:1px solid var(--fin-line)}
.fin-devices li:last-child{border-bottom:0}
.fin-devices b{display:block;font-size:.86rem;color:var(--fin-text);font-weight:700}
.fin-devices span{display:block;font-size:.75rem}

/* ---- floating quick actions ---- */
.fin-fab{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fin-fab-btn{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;font-size:1.7rem;line-height:1;
  color:#042318;background:linear-gradient(135deg,var(--fin-primary,#2FE6A6),#12b98a);
  box-shadow:0 12px 30px rgba(47,230,166,.4);transition:transform .2s}
.fin-fab-btn.open{transform:rotate(45deg)}
.fin-fab-menu{display:flex;flex-direction:column;gap:7px;padding:9px;border-radius:16px;
  background:rgba(17,24,39,.94);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);
  box-shadow:0 16px 40px rgba(0,0,0,.42)}
.fin-fab-menu a{color:#fff;font-size:.86rem;font-weight:600;padding:8px 14px;border-radius:10px;white-space:nowrap}
.fin-fab-menu a:hover{background:rgba(255,255,255,.1);text-decoration:none}
@media(max-width:820px){.fin-fab{bottom:82px;right:14px}.fin-fab-btn{width:48px;height:48px;font-size:1.5rem}}

/* ==========================================================================
   Account sidebar + mobile bottom nav
   ========================================================================== */
.dashnav a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:11px;
  color:var(--ink-soft);font-weight:600;font-size:.9rem;position:relative;transition:background .14s,color .14s}
.dashnav a .dn-ic{width:22px;text-align:center;font-size:.98rem;flex:none}
.dashnav a:hover{background:var(--surface2);color:#fff;text-decoration:none}
.dashnav a.on{background:var(--surface2);color:#fff}
.dashnav a.on::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;
  background:var(--accent)}
.dashnav a.dn-out{margin-top:6px;border-top:1px solid var(--border);padding-top:13px;color:var(--muted)}
.dashnav .kycpill{margin-left:auto}

.botnav{display:none}
@media(max-width:820px){
  .sidebar.dashnav{display:none}
  .botnav{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:55;padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    background:rgba(11,17,30,.9);border-top:1px solid var(--border);backdrop-filter:blur(14px)}
  html[data-theme="light"] .botnav{background:rgba(255,255,255,.92)}
  .botnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);
    font-size:1.12rem;padding:5px 0;border-radius:10px}
  .botnav a i{font-style:normal;font-size:.64rem;font-weight:700;letter-spacing:.03em}
  .botnav a.on{color:var(--accent)}
  .botnav a:hover{text-decoration:none}
  .botnav-mid{margin-top:-24px}
  .botnav-mid span{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;color:#042318;background:linear-gradient(135deg,#2FE6A6,#12b98a);
    box-shadow:0 8px 22px rgba(47,230,166,.42)}
  body{padding-bottom:64px}
}

/* respect reduced motion for every V8 animation */
@media (prefers-reduced-motion:reduce){
  .collage .ctile{animation:none}
  .fin-ring .ring-fg,.fin-scorebar i,.fin-tierbar i,.rf-bar i{transition:none}
}

/* ==========================================================================
   V9 — Live momentum ticker (digit flip)
   ========================================================================== */
.counter.tickr{display:inline-flex;align-items:baseline;gap:1px;font-variant-numeric:tabular-nums}
.tk-d{position:relative;display:inline-block;width:.62em;height:1.05em;overflow:hidden;
  font-style:normal;vertical-align:baseline}
.tk-d b{position:absolute;left:0;right:0;top:0;font-weight:inherit;text-align:center;will-change:transform,opacity}
.tk-sep{font-style:normal;opacity:.55;padding:0 .02em}
@keyframes tkIn{from{transform:translateY(105%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes tkOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-105%);opacity:0}}
.tk-d b.tk-in{animation:tkIn .38s cubic-bezier(.22,1,.36,1) both}
.tk-d b.tk-out{animation:tkOut .38s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .tk-d b.tk-in,.tk-d b.tk-out{animation:none}
}

/* Sell page: grouped sections + featured band */
.sellgroup-h{display:flex;align-items:center;gap:12px;margin:26px 0 4px}
.sellgroup-h h3{margin:0;font-size:1.05rem;white-space:nowrap}
.sellgroup-h::after{content:"";flex:1;height:1px;background:var(--border)}
.sellgroup-h .cnt{font-size:.76rem;color:var(--muted);font-weight:700}
.sellcard.feat{border-color:rgba(22,199,132,.34);
  background:linear-gradient(160deg,rgba(22,199,132,.07),var(--surface) 60%)}

/* Per-brand sell page: SEO prose block */
.sellseo{max-width:820px}
.sellseo h2{margin-top:0}
.sellseo p{color:var(--ink-soft);line-height:1.75;margin:0 0 14px}
.sellseo h3{font-size:1.02rem;margin:24px 0 8px}

/* ==========================================================================
   V10 — Trust Intelligence Panel
   Every ambient animation is transform/opacity only, so the whole section
   stays on the compositor. No layout thrash, no paint storms.
   ========================================================================== */
.tip{position:relative;margin:40px auto 0;max-width:1180px;padding:0 20px;isolation:isolate}

/* ---- ambient background ---- */
.tip-bg{position:absolute;inset:-40px 0 -40px;overflow:hidden;border-radius:40px;pointer-events:none;z-index:0}
.tip-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 35%,transparent 78%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 42%,#000 35%,transparent 78%)}
.tip-orb{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.tip-orb.o1{width:460px;height:460px;top:-180px;left:-90px;
  background:radial-gradient(circle,rgba(255,154,0,.34),transparent 66%);animation:orbA 26s ease-in-out infinite}
.tip-orb.o2{width:520px;height:520px;bottom:-230px;right:-110px;
  background:radial-gradient(circle,rgba(76,141,255,.32),transparent 66%);animation:orbB 32s ease-in-out infinite}
.tip-orb.o3{width:380px;height:380px;top:22%;left:44%;
  background:radial-gradient(circle,rgba(139,92,246,.26),transparent 66%);animation:orbC 38s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(56px,44px,0) scale(1.14)}}
@keyframes orbB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-64px,-38px,0) scale(1.1)}}
@keyframes orbC{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(38px,-52px,0) scale(1.18)}}
.tip-beam{position:absolute;top:-60%;left:-30%;width:42%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);
  transform:rotate(18deg) translate3d(0,0,0);animation:beam 14s linear infinite;will-change:transform}
@keyframes beam{0%{transform:rotate(18deg) translate3d(-40%,0,0)}100%{transform:rotate(18deg) translate3d(340%,0,0)}}
.tip-noise{position:absolute;inset:0;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---- glass shell ---- */
.tip-shell{position:relative;z-index:1;border-radius:26px;padding:15px 20px 12px;
  background:linear-gradient(155deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 42%,rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 2px 0 rgba(255,255,255,.09) inset,
             0 -1px 0 rgba(255,255,255,.05) inset;
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.tip-shell::before{content:"";position:absolute;inset:-1px;border-radius:31px;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,154,0,.5),rgba(76,141,255,.34) 42%,transparent 62%,rgba(139,92,246,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
html[data-theme="light"] .tip-shell{background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(255,255,255,.72));
  border-color:rgba(10,20,40,.09);box-shadow:0 30px 70px -34px rgba(20,40,80,.34)}

/* ---- header ---- */
.tip-head{display:flex;align-items:center;gap:12px;padding:0 4px 11px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.tip-status{display:inline-flex;align-items:center;gap:7px;font-size:.68rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#3DDC97}
.tip-status i{width:7px;height:7px;border-radius:50%;background:#3DDC97;
  box-shadow:0 0 0 0 rgba(61,220,151,.7);animation:pulseDot 2.4s ease-out infinite}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(61,220,151,.65)}70%{box-shadow:0 0 0 9px rgba(61,220,151,0)}100%{box-shadow:0 0 0 0 rgba(61,220,151,0)}}
.tip-headline{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tip-clock{margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;
  letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- modules ---- */
.tip-modules{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;
  gap:0;padding:13px 0 3px}
.tip-div{width:1px;margin:14px 0;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 22%,rgba(255,255,255,.16) 78%,transparent)}
.tip-mod{position:relative;padding:10px 16px;border-radius:16px;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.8,.25,1),background .4s;
  transform:translate3d(0,0,0);will-change:transform}
.tip-mod.t-amber{color:#FF9A00} .tip-mod.t-cyan{color:#22D3EE}
.tip-mod.t-violet{color:#A78BFA} .tip-mod.t-blue{color:#4C8DFF}

/* light sweep on hover */
.tip-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:20px;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 62%);
  transform:translate3d(-110%,0,0)}
.tip-mod:hover{background:rgba(255,255,255,.045);transform:translate3d(0,-6px,0)}
.tip-mod:hover .tip-sheen{opacity:1;transition:transform .85s ease,opacity .2s;transform:translate3d(110%,0,0)}
.tip-mod:hover .tip-ic{transform:translate3d(0,0,0) rotate(8deg) scale(1.08)}
.tip-mod:hover .tip-v{transform:scale(1.04)}
.tip-mod:hover .tip-sparkline{stroke-width:2.2}

.tip-mod-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tip-ic{width:32px;height:32px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:.92rem;background:currentColor;color:inherit;position:relative;
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.tip-ic{background:color-mix(in srgb,currentColor 16%,transparent);
  box-shadow:0 0 24px -6px currentColor,0 0 0 1px color-mix(in srgb,currentColor 26%,transparent) inset}
.tip-badge{display:inline-flex;align-items:center;gap:5px;font-size:.56rem;font-weight:900;letter-spacing:.14em;
  padding:4px 9px;border-radius:99px;color:inherit;
  background:color-mix(in srgb,currentColor 13%,transparent);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.tip-badge .pulse{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

.tip-num{margin-top:10px}
.tip-v{display:inline-block;font-family:'Sora',system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.5rem,2.5vw,2.05rem);letter-spacing:-.035em;line-height:1.02;
  color:#fff;text-shadow:0 0 34px color-mix(in srgb,currentColor 55%,transparent);
  font-variant-numeric:tabular-nums;transition:transform .35s cubic-bezier(.2,.8,.25,1)}
html[data-theme="light"] .tip-v{color:#0B1220;text-shadow:0 0 26px color-mix(in srgb,currentColor 30%,transparent)}
.tip-label{margin-top:5px;font-size:.76rem;font-weight:600;color:var(--ink-soft)}
.tip-spark{display:block;width:100%;height:22px;margin-top:9px;overflow:visible}
.tip-sparkline{transition:stroke-width .3s;filter:drop-shadow(0 0 6px currentColor);
  stroke-dasharray:220;stroke-dashoffset:220;animation:drawLine 1.9s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}
.tip-sub{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:.66rem;color:var(--muted);font-weight:600}
.tip-sub .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;opacity:.85}

/* ---- footer ---- */
.tip-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px 4px 2px;margin-top:3px;border-top:1px solid rgba(255,255,255,.07);
  font-size:.66rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.tip-foot i{width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.5}

/* ---- responsive ---- */
@media(max-width:1000px){
  .tip-modules{grid-template-columns:1fr auto 1fr;gap:0}
  .tip-div:nth-of-type(2){display:none}
  .tip-mod{padding:11px 12px}
  .tip-v{font-size:1.5rem}
}
/* phones: 2x2 rather than a four-high stack — half the height, still legible */
@media(max-width:600px){
  .tip{margin-top:26px;padding:0 12px}
  .tip-modules{grid-template-columns:1fr 1fr;padding:9px 0 2px;gap:2px}
  .tip-div{display:none}
  .tip-shell{padding:12px 11px 9px;border-radius:20px}
  .tip-mod{padding:9px 8px;border-radius:13px}
  .tip-mod:nth-child(4n+1){border-right:1px solid rgba(255,255,255,.07)}
  .tip-ic{width:26px;height:26px;border-radius:9px;font-size:.8rem}
  .tip-num{margin-top:7px}
  .tip-v{font-size:1.32rem}
  .tip-label{font-size:.66rem;margin-top:3px}
  .tip-spark{height:16px;margin-top:6px}
  .tip-sub{font-size:.58rem;margin-top:5px}
  .tip-badge{font-size:.48rem;padding:3px 6px;letter-spacing:.1em}
  .tip-clock{display:none}
  .tip-head{gap:8px;padding-bottom:8px}
  .tip-headline{font-size:.6rem;letter-spacing:.14em}
  .tip-status{font-size:.6rem}
  .tip-foot{gap:9px;font-size:.58rem;padding-top:8px}
  .tip-orb{filter:blur(48px)}
  .tip-beam{display:none}
}
@media(max-width:360px){
  .tip-v{font-size:1.16rem}
  .tip-foot i{display:none}
}

/* ---- motion & transparency preferences ---- */
@media (prefers-reduced-motion:reduce){
  .tip-orb,.tip-beam{animation:none}
  .tip-status i,.tip-badge .pulse{animation:none}
  .tip-sparkline{animation:none;stroke-dashoffset:0}
  .tip-mod,.tip-ic,.tip-v,.tip-sheen{transition:none}
  .tip-mod:hover{transform:none}
}
@supports not (backdrop-filter:blur(2px)){
  .tip-shell{background:rgba(12,18,32,.94)}
}

/* ==========================================================================
   V10 — Seller trade desk (3D preview + dynamic form + live quote)
   ========================================================================== */
.tradedesk{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,4.6fr) minmax(0,3fr);
  gap:20px;align-items:start}
@media(max-width:1120px){.tradedesk{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .td-right{grid-column:1 / -1}}
@media(max-width:820px){.tradedesk{grid-template-columns:1fr}}

/* ---- 3D card preview ---- */
.td-card3d{perspective:1100px;margin-bottom:18px}
.td-card3d-in{position:relative;aspect-ratio:1.6/1;border-radius:22px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(148deg,color-mix(in srgb,var(--bc) 55%,#0b1220),color-mix(in srgb,var(--bc) 18%,#0b1220));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.16) inset;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  transition:transform .45s cubic-bezier(.2,.8,.25,1);transform-style:preserve-3d;will-change:transform}
.td-art{width:100%;height:100%;object-fit:cover}
.td-logo{width:64%;max-height:56%;background:#fff;border-radius:14px;padding:16px;display:flex;
  align-items:center;justify-content:center}
.td-logo img{max-width:100%;max-height:100%;object-fit:contain}
.td-chip{position:absolute;left:20px;bottom:20px;width:38px;height:28px;border-radius:6px;
  background:linear-gradient(135deg,#F5D68A,#C9A227);opacity:.92;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.td-chip::after{content:"";position:absolute;inset:6px 8px;border-radius:2px;
  border:1px solid rgba(0,0,0,.22);border-left:0;border-right:0}
.td-brandline{position:absolute;right:18px;bottom:20px;font-size:.74rem;font-weight:800;
  letter-spacing:.06em;color:rgba(255,255,255,.9);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.td-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.26) 48%,transparent 60%);
  transform:translate3d(-120%,0,0);animation:tdShine 6s ease-in-out infinite;will-change:transform}
@keyframes tdShine{0%,72%{transform:translate3d(-120%,0,0)}100%{transform:translate3d(120%,0,0)}}

.td-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.td-facts div{padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.td-facts span{display:block;font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.td-facts b{display:block;margin-top:3px;font-size:1rem}
.td-facts b.ok{color:var(--accent)}
.td-assure{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.td-assure li{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);line-height:1.45}
.td-assure i{font-style:normal;flex:none}

/* ---- glass form ---- */
.td-form{position:relative;border-radius:26px;padding:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.75);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
html[data-theme="light"] .td-form{background:#fff;border-color:var(--border)}
.td-form-head h2{margin:0;font-size:1.28rem}
.td-form-head p{margin:6px 0 0;font-size:.86rem;color:var(--muted)}
.td-form form{margin-top:20px}

/* ---- form fields ----
   Two variants, deliberately separate:
   .fld-float  text / number / textarea — label floats out of the input
   .fld-static select / date / file     — label sits above, because browsers
               vertically centre the text in those controls regardless of
               padding, which makes a floating label collide with the value. */
.fld{position:relative;margin-bottom:18px}
.fld input,.fld select,.fld textarea{width:100%;border-radius:14px;
  background:rgba(255,255,255,.045);border:1px solid var(--border);color:var(--ink);
  font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s,background .2s}
html[data-theme="light"] .fld input,html[data-theme="light"] .fld select,
html[data-theme="light"] .fld textarea{background:#fff}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);background:rgba(255,255,255,.06)}
.fld em{color:var(--danger);font-style:normal}
.fld-ic{position:absolute;font-size:.95rem;opacity:.75;pointer-events:none;left:14px}
.fld-hint{margin:6px 0 0 4px;font-size:.74rem;color:var(--muted);line-height:1.4}

/* --- floating variant --- */
.fld-float input,.fld-float textarea{padding:21px 40px 8px 42px}
.fld-float textarea{padding-top:25px;resize:vertical;min-height:88px}
.fld-float .fld-ic{top:16px}
.fld-float > label{position:absolute;left:42px;top:15px;font-size:.92rem;color:var(--muted);
  pointer-events:none;transform-origin:left top;
  transition:transform .18s cubic-bezier(.2,.8,.25,1),color .18s}
.fld-float input:focus ~ label,.fld-float textarea:focus ~ label,
.fld-float input:not(:placeholder-shown) ~ label,
.fld-float textarea:not(:placeholder-shown) ~ label{
  transform:translateY(-10px) scale(.74);color:var(--accent)}

/* --- static variant --- */
.fld-static > label{display:block;margin:0 0 7px 2px;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:var(--muted)}
.fld-static input,.fld-static select{padding:13px 40px 13px 42px;min-height:50px}
.fld-static .fld-ic{top:auto;bottom:16px}
.fld-static select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.fld-static input[type="date"]{color-scheme:dark}
html[data-theme="light"] .fld-static input[type="date"]{color-scheme:light}

.fld-ok{position:absolute;right:14px;top:17px;color:var(--accent);opacity:0;transform:scale(.6);
  transition:opacity .2s,transform .28s cubic-bezier(.2,1.4,.4,1);font-weight:900}
.fld.valid .fld-ok{opacity:1;transform:scale(1)}
.fld.valid input{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

/* file drop — deliberately NOT inside .fld, so no absolute-label rule reaches it */
.fldfile{position:relative;margin-bottom:18px}
.drop{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;cursor:pointer;
  padding:22px 16px;border-radius:16px;border:1.5px dashed var(--border);background:rgba(255,255,255,.025);
  transition:border-color .2s,background .2s,transform .2s}
.drop:hover,.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);
  transform:translateY(-2px)}
.drop.has{border-style:solid;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.drop-ic{font-size:1.5rem}
.drop b{font-size:.9rem}
.drop-sub{font-size:.74rem;color:var(--muted)}
.drop-name{font-size:.78rem;color:var(--accent);font-weight:700;word-break:break-all}
.fldfile .fld-hint{margin-top:6px}

.td-terms{font-size:.76rem;color:var(--muted);line-height:1.5;margin:4px 0 16px}

/* premium submit */
.td-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px 22px;border:0;border-radius:16px;cursor:pointer;overflow:hidden;
  font-family:inherit;font-size:1rem;font-weight:800;color:#04231a;
  background:linear-gradient(135deg,#2FE6A6,#12b98a);
  box-shadow:0 14px 34px -10px rgba(47,230,166,.55);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .2s}
.td-submit::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translate3d(-120%,0,0);transition:transform .7s ease}
.td-submit:hover{transform:translateY(-2px);box-shadow:0 20px 44px -10px rgba(47,230,166,.7);
  text-decoration:none;color:#04231a}
.td-submit:hover::after{transform:translate3d(120%,0,0)}
.td-submit:active{transform:translateY(0) scale(.985)}
.td-submit-a{transition:transform .25s}
.td-submit:hover .td-submit-a{transform:translateX(5px)}
.td-submit.busy{pointer-events:none;opacity:.82}

/* ---- live quote panel ---- */
.td-quote{position:sticky;top:88px;border-radius:22px;padding:20px;
  background:linear-gradient(160deg,rgba(47,230,166,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html[data-theme="light"] .td-quote{background:linear-gradient(160deg,rgba(22,199,132,.08),#fff)}
.td-quote-badge{display:inline-flex;align-items:center;gap:6px;font-size:.62rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.td-quote-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:blink 2s ease-in-out infinite}
.td-q-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.86rem;color:var(--muted)}
.td-q-row b{color:var(--ink);font-weight:700}
.td-q-sep{height:1px;margin:9px 0;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.td-q-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.td-q-total span{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:800}
.td-q-total b{font-family:'Sora',system-ui,sans-serif;font-size:1.8rem;color:var(--accent);letter-spacing:-.02em;
  transition:transform .3s cubic-bezier(.2,1.3,.4,1)}
.td-quote.on .td-q-total b{transform:scale(1.03)}
.td-q-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--border)}
.td-q-meta span{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.td-q-meta b{font-size:.9rem}
.td-q-pay{margin-top:14px}
.td-q-pay > span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:800}
.td-q-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.td-q-chips i{font-style:normal;font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--ink-soft)}
.td-q-sec{display:grid;gap:5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border);
  font-size:.72rem;color:var(--muted)}

/* ---- mobile sticky payout bar ---- */
.td-sticky{display:none}
@media(max-width:900px){
  .td-quote{position:static}
  .td-sticky[hidden]{display:none}
  .td-sticky{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:11px 14px calc(11px + env(safe-area-inset-bottom));
    background:rgba(11,17,30,.94);border-top:1px solid var(--border);backdrop-filter:blur(16px);
    box-shadow:0 -8px 30px rgba(0,0,0,.4)}
  html[data-theme="light"] .td-sticky{background:rgba(255,255,255,.95)}
  .td-sticky-l{flex:1;min-width:0}
  .td-sticky-l span{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);font-weight:800}
  .td-sticky-l b{font-family:'Sora',system-ui,sans-serif;font-size:1.25rem;color:var(--accent)}
  .td-sticky-b{padding:13px 22px;border:0;border-radius:13px;font-family:inherit;font-weight:800;
    font-size:.92rem;color:#04231a;background:linear-gradient(135deg,#2FE6A6,#12b98a);cursor:pointer;
    box-shadow:0 8px 22px -6px rgba(47,230,166,.6)}
  .tradedesk{gap:16px}
  .td-form{padding:18px 16px;border-radius:20px}
}
.td-faq{max-width:820px}

@media (prefers-reduced-motion:reduce){
  .td-shine,.td-quote-badge i{animation:none}
  .td-card3d-in,.td-submit,.fld label,.drop{transition:none}
  .td-submit::after{display:none}
}

/* ==========================================================================
   V10 — Sell hub: trust bar + premium brand tiles
   ========================================================================== */
.trustbar{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:18px;border-radius:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.7)}
html[data-theme="light"] .trustbar{background:#fff;border-color:var(--border)}
.tbi{text-align:center;padding:6px 4px;border-radius:14px;transition:background .25s,transform .25s}
.tbi:hover{background:rgba(255,255,255,.05);transform:translateY(-3px)}
.tbi-ic{display:block;font-size:1.05rem;margin-bottom:5px;opacity:.9}
.tbi b{display:block;font-family:'Sora',system-ui,sans-serif;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink)}
.tbi-k{display:block;margin-top:3px;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
@media(max-width:900px){.trustbar{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}}
@media(max-width:460px){.trustbar{grid-template-columns:repeat(2,1fr)}.tbi b{font-size:.98rem}}

/* ---- premium brand tile ---- */
.pcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:22px 15px 15px;border-radius:28px;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.09);color:var(--ink);text-align:center;
  transition:transform .34s cubic-bezier(.2,.8,.25,1),border-color .3s,box-shadow .3s;
  transform:translate3d(0,0,0);will-change:transform}
html[data-theme="light"] .pcard{background:#fff;border-color:var(--border)}
.pcard.is-hidden{display:none}
.pcard-glow{position:absolute;inset:auto -30% -55% -30%;height:170px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--bc) 55%,transparent),transparent 68%);
  filter:blur(34px);opacity:0;transition:opacity .4s}
.pcard-sheen{position:absolute;inset:0;pointer-events:none;border-radius:28px;
  background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translate3d(-115%,0,0)}
.pcard:hover{transform:translate3d(0,-8px,0);text-decoration:none;
  border-color:color-mix(in srgb,var(--bc) 48%,transparent);
  box-shadow:0 26px 52px -20px rgba(0,0,0,.62),
             0 0 0 1px color-mix(in srgb,var(--bc) 22%,transparent)}
.pcard:hover .pcard-glow{opacity:.7}
.pcard:hover .pcard-sheen{transition:transform .85s ease;transform:translate3d(115%,0,0)}
.pcard:hover .pcard-logo{transform:translateY(-2px) scale(1.04)}
.pcard:hover .pcard-cta i{transform:translateX(4px)}
.pcard:active{transform:translate3d(0,-4px,0) scale(.985)}
.pcard.feat{background:linear-gradient(165deg,color-mix(in srgb,var(--bc) 13%,transparent),rgba(255,255,255,.02))}

/* floating pricing badge */
.pcard-badge{position:absolute;top:11px;right:11px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:99px;font-size:.76rem;font-weight:900;letter-spacing:-.01em;
  backdrop-filter:blur(8px);box-shadow:0 5px 14px -4px rgba(0,0,0,.5)}
.pcard-badge i{width:5px;height:5px;border-radius:50%;background:currentColor;
  animation:blink 2.4s ease-in-out infinite}
.pcard-badge.zero{color:#0B3A28;background:linear-gradient(135deg,#3DDC97,#16C784);
  box-shadow:0 5px 16px -4px rgba(22,199,132,.7)}
.pcard-badge.low{color:#08203F;background:linear-gradient(135deg,#7FB2FF,#4C8DFF);
  box-shadow:0 5px 16px -4px rgba(76,141,255,.62)}
.pcard-badge.std{color:#3A2205;background:linear-gradient(135deg,#FFC66B,#FF9A00);
  box-shadow:0 5px 16px -4px rgba(255,154,0,.62)}

.pcard-logo{width:100%;height:60px;border-radius:15px;background:#fff;display:flex;align-items:center;
  justify-content:center;padding:9px;margin-top:8px;transition:transform .34s cubic-bezier(.2,.8,.25,1);
  box-shadow:0 4px 14px -6px rgba(0,0,0,.5)}
.pcard-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pcard-name{font-weight:800;font-size:.94rem;line-height:1.25;letter-spacing:-.01em}
.pcard-reg{font-size:.7rem;color:var(--muted);font-weight:600}
.pcard-meta{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;
  font-size:.66rem;color:var(--muted);font-weight:600}
.pcard-meta .ok{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pcard-meta em{font-style:normal;opacity:.5}
.pcard-cta{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:auto;
  padding:10px 12px;border-radius:13px;font-size:.84rem;font-weight:800;
  color:color-mix(in srgb,var(--bc) 78%,#fff);
  background:color-mix(in srgb,var(--bc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--bc) 28%,transparent);transition:background .25s}
html[data-theme="light"] .pcard-cta{color:var(--bc)}
.pcard:hover .pcard-cta{background:color-mix(in srgb,var(--bc) 24%,transparent)}
.pcard-cta i{font-style:normal;transition:transform .25s}

@media(max-width:560px){
  .sellgridcards{grid-template-columns:repeat(2,1fr);gap:11px}
  .pcard{padding:16px 10px 12px;border-radius:22px;gap:6px}
  .pcard-logo{height:48px;border-radius:12px}
  .pcard-name{font-size:.85rem}
  .pcard-meta{display:none}
  .pcard-badge{top:8px;right:8px;padding:4px 9px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .pcard,.pcard-logo,.pcard-cta i,.pcard-sheen{transition:none}
  .pcard:hover{transform:none}
  .pcard-badge i{animation:none}
}

/* ==========================================================================
   V11 — Premium denomination selector (horizontal snap rail)
   ========================================================================== */
.denhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 10px}
.denhint{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em}

.denrail-wrap{position:relative}
.denrail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding:6px 2px 14px;
  scrollbar-width:none;-ms-overflow-style:none}
.denrail::-webkit-scrollbar{display:none}
/* edge fades tell you there is more to the right */
.denrail-wrap::before,.denrail-wrap::after{content:"";position:absolute;top:0;bottom:14px;width:46px;
  pointer-events:none;z-index:2;opacity:1;transition:opacity .25s}
.denrail-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.denrail-wrap::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.denrail.at-start ~ .denarrow.l{opacity:0;pointer-events:none}
.denrail.at-end ~ .denarrow.r{opacity:0;pointer-events:none}

.denarrow{position:absolute;top:calc(50% - 14px);translate:0 -50%;z-index:3;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--border);cursor:pointer;font-size:1.35rem;line-height:1;
  color:var(--ink);background:rgba(17,24,39,.92);backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.45);transition:opacity .25s,transform .2s,background .2s}
html[data-theme="light"] .denarrow{background:rgba(255,255,255,.95)}
.denarrow.l{left:-6px} .denarrow.r{right:-6px}
.denarrow:hover{transform:translateY(-50%) scale(1.08);background:var(--accent);color:#04231a;border-color:transparent}
.denarrow:disabled{opacity:0;pointer-events:none}
@media(max-width:820px){.denarrow{display:none}}

/* ---- the card itself ---- */
.dcard{position:relative;flex:0 0 auto;width:138px;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;isolation:isolate;
  border-radius:22px;cursor:pointer;text-align:left;font-family:inherit;
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);color:var(--ink);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.2,.8,.25,1),border-color .3s,box-shadow .3s;
  will-change:transform}
html[data-theme="light"] .dcard{background:#fff;border-color:var(--border)}
.dcard-glow{position:absolute;inset:auto -40% -60% -40%;height:150px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--bc) 62%,transparent),transparent 70%);
  filter:blur(30px);opacity:0;transition:opacity .38s}
.dcard-sheen{position:absolute;inset:0;pointer-events:none;border-radius:22px;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.2) 50%,transparent 64%);
  transform:translate3d(-118%,0,0)}
.dcard:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-8px,0) scale(1.045);
  border-color:color-mix(in srgb,var(--bc) 55%,transparent);
  box-shadow:0 26px 54px -18px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--bc) 26%,transparent)}
.dcard:hover .dcard-glow{opacity:.75}
.dcard:hover .dcard-sheen{transition:transform .8s ease;transform:translate3d(118%,0,0)}
.dcard:hover .dcard-art img{transform:scale(1.07) rotate(-1.2deg)}

/* selected state */
.dcard.on{border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),
             0 22px 48px -18px rgba(22,199,132,.5)}
.dcard.on .dcard-glow{opacity:.6}
.dcard.on .dcard-tick{opacity:1;transform:scale(1) rotate(0)}
.dcard.on .dcard-den{color:var(--accent)}
@keyframes dPop{0%{transform:scale(1)}42%{transform:scale(1.075)}100%{transform:scale(1.045)}}
.dcard.pop{animation:dPop .46s cubic-bezier(.2,1.5,.4,1)}

.dcard-off{position:absolute;top:6px;left:6px;z-index:3;padding:3px 7px;border-radius:99px;
  font-size:.62rem;font-weight:900;color:#04231a;
  background:linear-gradient(135deg,#3DDC97,#16C784);box-shadow:0 4px 12px -3px rgba(22,199,132,.75)}
.dcard-tick{position:absolute;top:6px;right:6px;z-index:3;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.64rem;font-weight:900;
  color:#04231a;background:var(--accent);opacity:0;transform:scale(.4) rotate(-40deg);
  transition:opacity .25s,transform .35s cubic-bezier(.2,1.6,.4,1)}

.dcard-art{display:block;height:58px;overflow:hidden;position:relative;
  background:linear-gradient(150deg,color-mix(in srgb,var(--bc) 78%,#000),color-mix(in srgb,var(--bc) 26%,#0b1220))}
.dcard-art img{width:100%;height:100%;object-fit:cover;opacity:.9;
  transition:transform .5s cubic-bezier(.2,.8,.25,1)}
.dcard-art::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(8,17,29,.85))}

.dcard-body{display:flex;flex-direction:column;gap:2px;padding:9px 10px 11px}
.dcard-den{font-family:'Sora',system-ui,sans-serif;font-size:1.12rem;font-weight:800;letter-spacing:-.035em;
  line-height:1.05;transition:color .25s}
.dcard-title{font-size:.6rem;color:var(--muted);font-weight:600;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dcard-price{display:flex;align-items:baseline;gap:5px;margin-top:3px;flex-wrap:wrap}
.dcard-price s{font-size:.65rem;color:var(--muted);opacity:.72}
.dcard-price b{font-size:.9rem;color:var(--accent);font-weight:800}
.dcard-save{font-size:.6rem;font-weight:800;color:#3DDC97;
  background:rgba(22,199,132,.13);border-radius:5px;padding:2px 5px;align-self:flex-start;margin-top:3px}

@media(max-width:820px){
  .dcard{width:126px;border-radius:17px}
  .dcard-art{height:52px}
  .dcard-den{font-size:1.05rem}
  .denrail{gap:9px}
}
/* phones: three cards across with the fourth peeking, so the rail reads as
   scrollable without a hint arrow */
@media(max-width:560px){
  .dcard{width:calc((100% - 22px) / 3);min-width:98px;border-radius:15px;scroll-snap-align:start}
  .dcard-art{height:46px}
  .dcard-den{font-size:.96rem}
  .dcard-title{font-size:.55rem}
  .dcard-price b{font-size:.8rem}
  .dcard-price s{font-size:.58rem}
  .dcard-save{font-size:.55rem;padding:1px 4px}
  .dcard-off{font-size:.56rem;padding:2px 6px;top:5px;left:5px}
  .dcard-tick{width:16px;height:16px;font-size:.56rem;top:5px;right:5px}
  .dcard-body{padding:7px 8px 9px}
  .denrail{gap:8px;padding-bottom:10px}
}

/* ---- animated summary ---- */
.sumbox{border-radius:20px;padding:16px 18px;
  background:linear-gradient(160deg,rgba(22,199,132,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.09)}
html[data-theme="light"] .sumbox{background:linear-gradient(160deg,rgba(22,199,132,.07),#fff)}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;
  font-size:.86rem;color:var(--muted)}
.sum-row b{color:var(--ink);font-weight:700}
.sum-strike{text-decoration:line-through;opacity:.7}
.sum-pct{font-style:normal;font-weight:800;color:var(--accent);font-size:.78rem}
.sum-off{color:var(--accent)!important}
.sum-sep{height:1px;margin:9px 0;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sum-total span{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:800}
.sum-total b{font-family:'Sora',system-ui,sans-serif;font-size:2rem;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;transition:transform .3s cubic-bezier(.2,1.4,.4,1),text-shadow .3s}
.sum-total b.rolling{color:var(--accent)}
.sum-total b.rolled{transform:scale(1.045);text-shadow:0 0 22px rgba(22,199,132,.55)}

.savepill{display:flex;align-items:center;gap:8px;margin-top:12px;padding:9px 13px;border-radius:13px;
  font-size:.84rem;font-weight:700;color:#3DDC97;background:rgba(22,199,132,.12);
  border:1px solid rgba(22,199,132,.28);
  opacity:0;transform:translateY(6px);transition:opacity .32s,transform .32s cubic-bezier(.2,.9,.3,1)}
.savepill.on{opacity:1;transform:translateY(0)}
.savepill b{font-variant-numeric:tabular-nums}
.sum-crypto{margin-top:10px;font-size:.76rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;
  align-items:center}
.sum-crypto i{font-style:normal;font-weight:700;color:var(--ink-soft);
  background:rgba(255,255,255,.06);border-radius:7px;padding:3px 8px}
.sum-crypto .cx{opacity:.5;font-size:.68rem;padding:0 2px}

/* ---- buy button ---- */
.buyrow{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.buyrow .btn.ghost{flex:1;min-width:130px}
.buybtn{position:relative;flex:1.6;min-width:190px;display:flex;align-items:center;justify-content:center;
  gap:9px;padding:15px 20px;border:0;border-radius:15px;cursor:pointer;overflow:hidden;
  font-family:inherit;font-size:.98rem;font-weight:800;color:#2A1500;
  background:linear-gradient(135deg,#FFB84D,#FF9F1A);
  box-shadow:0 14px 32px -10px rgba(255,159,26,.62);
  transition:transform .18s cubic-bezier(.2,.8,.25,1),box-shadow .22s}
.buybtn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translate3d(-120%,0,0);transition:transform .72s ease}
.buybtn:hover{transform:translateY(-2px);box-shadow:0 20px 42px -10px rgba(255,159,26,.78)}
.buybtn:hover::after{transform:translate3d(120%,0,0)}
.buybtn:hover .buybtn-a{transform:translateX(5px)}
.buybtn:active{transform:translateY(0) scale(.985)}
.buybtn.busy{pointer-events:none;opacity:.85}
.buybtn-a{transition:transform .25s}

/* ---- trust tick bar ---- */
.tickbar{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0}
.tickbar li{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;color:var(--muted);
  padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.045);border:1px solid var(--border);
  transition:color .2s,border-color .2s,transform .2s}
.tickbar li:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
  transform:translateY(-2px)}
.tickbar i{font-style:normal;font-size:.85rem}

/* ---- per-denomination SEO blocks ---- */
.denseo{margin-top:18px}
.denseo details{border:1px solid var(--border);border-radius:14px;padding:12px 16px;margin-bottom:9px;
  background:var(--surface)}
.denseo summary{cursor:pointer;font-weight:700;font-size:.92rem}
.denseo p{margin:9px 0 0;font-size:.86rem;color:var(--ink-soft);line-height:1.65}

@media (prefers-reduced-motion:reduce){
  .dcard,.dcard-art img,.dcard-sheen,.dcard-tick,.buybtn,.savepill,.sum-total b,.tickbar li{transition:none}
  .dcard:hover{transform:none}
  .dcard.pop{animation:none}
  .buybtn::after{display:none}
  .denrail{scroll-behavior:auto}
}

/* V11 — small-screen refinements for the summary and form fields */
@media(max-width:560px){
  .sumbox{padding:14px;border-radius:17px}
  .sum-total b{font-size:1.65rem}
  .sum-total span{font-size:.68rem}
  .savepill{font-size:.79rem;padding:8px 11px}
  .buyrow{gap:8px}
  .buyrow .btn.ghost,.buybtn{flex:1 1 100%;min-width:0}
  .buybtn{padding:15px 16px;font-size:.93rem}
  .tickbar{gap:6px}
  .tickbar li{font-size:.69rem;padding:5px 9px}
  .denhead{flex-direction:column;align-items:flex-start;gap:3px}
  .fld-float input,.fld-float textarea{font-size:16px}   /* stops iOS zooming on focus */
  .fld-static input,.fld-static select{font-size:16px}
  .drop{padding:18px 12px}
}

/* ===== Cart layout (V15): responsive + sticky mobile checkout ===== */
.cartgrid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.cart-summary{position:sticky;top:88px}
@media(max-width:820px){
  .cartgrid{grid-template-columns:1fr}
  .cart-summary{position:static}
  /* the summary card is folded away on phones — the sticky bar replaces it */
  .cart-summary{display:none}
  /* leave room so the fixed bar never hides the last cart row */
  .container.mt3{padding-bottom:96px}
}
/* Sticky checkout bar — only shows on phones */
.cart-bar{display:none}
@media(max-width:820px){
  .cart-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--surface);border-top:1px solid var(--border);
    box-shadow:0 -8px 26px rgba(0,0,0,.35)
  }
  .cart-bar-info{display:flex;flex-direction:column;line-height:1.15}
  .cart-bar-info b{font-size:1.35rem}
  .cart-bar .btn{white-space:nowrap;padding:13px 20px;font-size:.98rem}
  /* stop table cells from forcing horizontal scroll on narrow screens */
  .cart-lines td,.cart-lines th{word-break:break-word}
}

/* ===== Account "art" upgrade (V15): richer, animated, premium ===== */

/* Animated aurora wallet hero — layered mesh gradients that drift slowly */
.dash2-hero{
  background:
    radial-gradient(circle at 18% 22%, rgba(22,199,132,.32), transparent 42%),
    radial-gradient(circle at 82% 12%, rgba(88,101,242,.30), transparent 46%),
    radial-gradient(circle at 65% 88%, rgba(14,165,233,.24), transparent 50%),
    linear-gradient(125deg,#0d1a34 0%,#132850 48%,#0c352f 100%);
  background-size:180% 180%,180% 180%,180% 180%,100% 100%;
  animation:heroDrift 18s ease-in-out infinite;
  box-shadow:0 22px 60px -20px rgba(6,20,45,.75),inset 0 1px 0 rgba(255,255,255,.08);
}
@keyframes heroDrift{
  0%,100%{background-position:0% 50%,100% 0%,50% 100%,0 0}
  50%{background-position:60% 40%,30% 60%,70% 20%,0 0}
}
/* fine grain so the gradient reads like art, not a flat fill */
.dash2-hero::after{
  background:
    radial-gradient(circle,rgba(88,101,242,.22),transparent 65%);
}
.dash2-hero .bal{
  background:linear-gradient(92deg,#fff 0%,#d8fff0 40%,#bfe6ff 70%,#fff 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:balShine 6s linear infinite;
  text-shadow:0 2px 24px rgba(120,255,210,.18)}
@keyframes balShine{0%{background-position:0% 0}100%{background-position:220% 0}}
.dash2-hero .acts .btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  transition:transform .16s,background .16s}
.dash2-hero .acts .btn:first-child{background:#16C784;border-color:#16C784;color:#04241a}
.dash2-hero .acts .btn:hover{transform:translateY(-2px)}

/* Glass stat cards that lift + glow on hover, with a top accent line */
.dstat{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),var(--surface));
  backdrop-filter:blur(6px);transition:transform .2s,box-shadow .2s,border-color .2s}
.dstat::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.dstat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  box-shadow:0 16px 34px -18px rgba(0,0,0,.5)}
.dstat .ic{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.dstat .v{background:linear-gradient(90deg,var(--ink),color-mix(in srgb,var(--ink) 70%,var(--accent)));
  -webkit-background-clip:text;background-clip:text}
.dstat .bar span{background:linear-gradient(90deg,#16C784,#0ea5e9,#8b5cf6);background-size:200% 100%;
  animation:barFlow 4s linear infinite}
@keyframes barFlow{0%{background-position:0 0}100%{background-position:200% 0}}

/* Quick-action tiles: gradient sweep on hover */
.dquick a{position:relative;overflow:hidden}
.dquick a::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,transparent,color-mix(in srgb,var(--accent) 12%,transparent),transparent);
  transform:translateX(-120%);transition:transform .5s}
.dquick a:hover::before{transform:translateX(120%)}

/* Referral card: slow conic halo behind the earnings figure */
.refcard::after{content:"";position:absolute;top:-120px;left:-120px;width:300px;height:300px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,171,0,.16),rgba(22,199,132,.14),rgba(88,101,242,.16),rgba(255,171,0,.16));
  filter:blur(30px);animation:refSpin 22s linear infinite;pointer-events:none;z-index:0}
.refcard>*{position:relative;z-index:1}
@keyframes refSpin{to{transform:rotate(360deg)}}
.refcard .earned b{background:linear-gradient(90deg,var(--ink),#F7931A);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* Recent-activity rows: gentle slide-in on the icon */
.dact .row{transition:background .15s}
.dact .row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:10px}

@media(prefers-reduced-motion:reduce){
  .dash2-hero,.dash2-hero .bal,.dstat .bar span,.refcard::after{animation:none}
}

/* ===== Blog studio editor (V15) ===== */
.blogstudio .bs-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.blogstudio .bs-meta{font-size:.82rem;color:var(--muted);font-weight:600}
.bs-toolbar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px;border:1px solid var(--border);
  border-bottom:0;border-radius:12px 12px 0 0;background:var(--bg);position:sticky;top:0;z-index:5}
.bs-toolbar button{border:1px solid transparent;background:transparent;color:var(--ink);cursor:pointer;
  border-radius:8px;padding:7px 11px;font-size:.85rem;font-weight:700;transition:.13s;line-height:1}
.bs-toolbar button:hover{background:var(--surface);border-color:var(--border)}
.bs-toolbar .bs-sep{width:1px;height:22px;background:var(--border);margin:0 4px}
.bs-toolbar .bs-prevtoggle{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:.82rem;
  color:var(--muted);font-weight:600;cursor:pointer}
.bs-toolbar .bs-prevtoggle input{width:auto}

.bs-editwrap{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:0 0 12px 12px;overflow:hidden}
.bs-editwrap textarea{border:0;border-right:1px solid var(--border);border-radius:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88rem;line-height:1.6;resize:vertical;min-height:420px;background:var(--surface)}
.bs-editwrap textarea:focus{outline:0;box-shadow:none}
.bs-preview{background:var(--bg);padding:20px 22px;overflow:auto;max-height:640px}
.bs-editwrap.nopreview{grid-template-columns:1fr}
.bs-editwrap.nopreview .bs-preview{display:none}
.bs-editwrap.nopreview textarea{border-right:0}

/* preview mirrors the public .postbody type scale */
.bs-preview .postbody{font-size:1rem;line-height:1.75;color:var(--ink)}
.bs-preview .postbody h2{margin:24px 0 8px;font-size:1.4rem}
.bs-preview .postbody h3{margin:20px 0 6px;font-size:1.15rem}
.bs-preview .postbody p{margin:0 0 14px}
.bs-preview .postbody ul,.bs-preview .postbody ol{padding-left:22px;line-height:1.8;margin:0 0 14px}
.bs-preview .postbody img{max-width:100%;border-radius:12px;margin:10px 0}
.bs-preview .postbody a{color:var(--accent)}
.bs-preview .postbody a.btn{color:#1a0f00}
.bs-preview .postbody blockquote{margin:16px 0;padding:12px 18px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:0 10px 10px 0;font-style:italic}
.bs-preview .postbody hr{border:0;border-top:1px solid var(--border);margin:22px 0}
.bs-preview .postbody:empty::before{content:"Your formatted post will appear here as you type…";color:var(--muted);font-style:italic}

/* full-screen focus mode */
.blogstudio.bs-fullscreen{position:fixed;inset:0;z-index:200;margin:0;border-radius:0;overflow:auto;
  padding:20px clamp(16px,5vw,60px);background:var(--bg)}
.blogstudio.bs-fullscreen .bs-editwrap textarea{min-height:70vh}
.blogstudio.bs-fullscreen .bs-preview{max-height:76vh}

@media(max-width:860px){
  .bs-editwrap{grid-template-columns:1fr}
  .bs-editwrap textarea{border-right:0;border-bottom:1px solid var(--border)}
  .bs-preview{max-height:420px}
  .bs-toolbar{position:static}
}

/* ============================================================
   ACCOUNT CONSOLE (V16) — modern fintech profile
   ============================================================ */
.acct{--a1:#16C784;--a2:#0FB9CE;--a3:#7C5CFC;--glass:rgba(255,255,255,.03);
  --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
:root[data-theme="light"] .acct{--glass:rgba(10,20,40,.02);--line:rgba(10,20,40,.09);--line2:rgba(10,20,40,.16)}

/* ---- hero ---- */
.acct-hero{position:relative;border-radius:24px;overflow:hidden;padding:28px 30px;
  background:linear-gradient(135deg,#0c1730 0%,#111d3d 45%,#0a2e2c 100%);
  border:1px solid var(--line2);box-shadow:0 24px 60px -26px rgba(4,14,34,.8)}
.acct-hero-glow{position:absolute;inset:-50% -10% auto auto;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(22,199,132,.28),transparent 62%);pointer-events:none;
  animation:acctGlow 16s ease-in-out infinite}
@keyframes acctGlow{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
.acct-hero-grid{position:relative;z-index:1;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.acct-id{display:flex;gap:18px;align-items:center;min-width:260px}
.acct-avatar{position:relative;width:74px;height:74px;border-radius:22px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;font-weight:850;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2) 55%,var(--a3));
  box-shadow:0 10px 30px -8px rgba(22,199,132,.5)}
.acct-avatar-badge{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;
  background:var(--a1);color:#04241a;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;
  border:3px solid #0c1730}
.acct-hello{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.acct-name{margin:2px 0 0;font-size:clamp(1.4rem,3.4vw,1.9rem);color:#fff;line-height:1.1;font-weight:800}
.acct-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.acct-chip{font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.1)}
.acct-chip.verified{background:rgba(22,199,132,.16);color:#5ff0bf;border-color:rgba(22,199,132,.4)}
.acct-chip.pending{background:rgba(243,176,76,.16);color:#ffce8a;border-color:rgba(243,176,76,.4)}
.acct-chip.unverified{background:rgba(240,97,109,.14);color:#ff9ba3;border-color:rgba(240,97,109,.34)}
.acct-chip.ok{color:#5ff0bf}.acct-chip.off{color:#ffce8a}.acct-chip.muted{color:rgba(255,255,255,.55)}
.acct-hero-metrics{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.acct-metric .k{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:700}
.acct-metric .v{display:block;font-size:2rem;font-weight:850;color:#fff;line-height:1.15;margin-top:3px}
.acct-metric .v.shine{background:linear-gradient(92deg,#fff,#c9ffe9,#bfe9ff,#fff);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:acctShine 6s linear infinite}
@keyframes acctShine{to{background-position:220% 0}}
.acct-metric .s{font-size:.78rem;color:rgba(255,255,255,.5)}
.acct-hero-acts{display:flex;gap:10px}

/* ---- buttons ---- */
.acct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;
  font-weight:700;font-size:.92rem;cursor:pointer;border:1px solid var(--line2);background:var(--glass);color:var(--ink);
  transition:transform .15s,box-shadow .15s,filter .15s;text-decoration:none;line-height:1}
.acct-btn:hover{transform:translateY(-2px)}
.acct-btn.primary{background:linear-gradient(135deg,var(--a1),var(--a2));border-color:transparent;color:#04241a;
  box-shadow:0 10px 26px -10px rgba(22,199,132,.6)}
.acct-btn.primary:hover{filter:brightness(1.05)}
.acct-btn.glass{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
:root[data-theme="light"] .acct-btn.glass{color:var(--ink);background:var(--glass);border-color:var(--line2)}
.acct-btn.danger{background:var(--danger);border-color:transparent;color:#fff}
.acct-btn.danger-ghost{background:transparent;border-color:rgba(240,97,109,.4);color:#ff9ba3}
.acct-btn.block{width:100%}
.acct-btn.mt1{margin-top:8px}.acct-btn.mt2{margin-top:14px}
.acct-btnrow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}

/* ---- stat strip ---- */
.acct-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.acct-stat{position:relative;border-radius:18px;padding:18px;background:var(--surface);border:1px solid var(--line);
  overflow:hidden;transition:transform .2s,border-color .2s}
.acct-stat:hover{transform:translateY(-3px);border-color:var(--line2)}
.acct-stat .ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:10px}
.acct-stat .ic.buy{background:rgba(14,165,233,.16)}.acct-stat .ic.sell{background:rgba(22,199,132,.16)}
.acct-stat .ic.ref{background:rgba(247,147,26,.16)}.acct-stat .ic.sec{background:rgba(124,92,252,.16)}
.acct-stat b{display:block;font-size:1.5rem;font-weight:800;color:var(--ink)}
.acct-stat span{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.acct-stat-bar{height:5px;border-radius:99px;background:rgba(128,128,160,.18);margin-top:8px;overflow:hidden}
.acct-stat-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--a3),var(--a2))}

/* ---- layout columns ---- */
.acct-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.acct-col{display:flex;flex-direction:column;gap:18px}

/* ---- glass cards ---- */
.acct-glass{position:relative;border-radius:20px;padding:22px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 12px 34px -22px rgba(0,0,0,.5)}
.acct-cardhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.acct-h3{margin:0;font-size:1.05rem;font-weight:800;color:var(--ink)}
.acct-h4{margin:0 0 8px;font-size:.9rem;font-weight:800;color:var(--ink)}
.acct-sub{color:var(--muted);font-size:.87rem;line-height:1.6;margin:6px 0 0}
.acct-empty{color:var(--muted);font-size:.85rem;font-style:italic}
.acct-muted{color:var(--muted);font-size:.78rem;display:block}
.acct-hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.acct-pill{font-size:.72rem;font-weight:800;padding:4px 11px;border-radius:99px;border:1px solid transparent}
.acct-pill.ok{background:rgba(22,199,132,.16);color:#3fe0a6;border-color:rgba(22,199,132,.34)}
.acct-pill.warn{background:rgba(243,176,76,.16);color:#f3b04c;border-color:rgba(243,176,76,.34)}
.acct-pill.off{background:rgba(240,97,109,.14);color:#f0616d;border-color:rgba(240,97,109,.3)}
.acct-pill.muted{background:rgba(128,128,160,.14);color:var(--muted)}

/* ---- forms ---- */
.acct-form{display:flex;flex-direction:column}
.acct-label{font-size:.78rem;font-weight:700;color:var(--muted);margin:12px 0 5px;letter-spacing:.02em}
.acct-label:first-child{margin-top:4px}
.acct-input{width:100%;border-radius:12px;padding:12px 14px;font-size:.94rem;background:var(--bg);
  border:1px solid var(--line2);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.acct-input:focus{outline:0;border-color:var(--a1);box-shadow:0 0 0 3px rgba(22,199,132,.16)}
.acct-input:disabled{opacity:.6}
.acct-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- reveal (click to show password / bank) ---- */
.acct-reveal-btn{width:100%;display:flex;align-items:center;gap:10px;border-radius:12px;padding:13px 15px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line2);color:var(--ink);font-weight:700;font-size:.92rem;transition:border-color .15s,background .15s}
.acct-reveal-btn:hover{border-color:var(--a1)}
.acct-reveal-btn .acct-reveal-hint{margin-left:auto;font-size:.76rem;color:var(--muted);font-weight:600}
.acct-reveal-btn .acct-caret{transition:transform .2s;color:var(--muted)}
.acct-reveal-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0}
.acct-reveal-body.open{max-height:640px;padding-top:12px}
.acct-reveal.inline .acct-reveal-body.open{padding-top:0}

/* ---- checklist ---- */
.acct-checklist{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.acct-checklist li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);font-weight:600}
.acct-checklist li.done{color:var(--ink)}
.acct-check{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;
  background:rgba(128,128,160,.14);color:var(--muted);flex:none}
.acct-checklist li.done .acct-check{background:rgba(22,199,132,.18);color:#3fe0a6}

/* ---- KYC card ---- */
.acct-kyc-state{display:flex;gap:16px;align-items:center;padding:16px;border-radius:14px;margin-top:6px}
.acct-kyc-state.ok{background:rgba(22,199,132,.08);border:1px solid rgba(22,199,132,.24)}
.acct-kyc-state.pending{background:rgba(243,176,76,.08);border:1px solid rgba(243,176,76,.24)}
.acct-kyc-shield{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex:none;font-weight:900}
.acct-kyc-state.ok .acct-kyc-shield{background:rgba(22,199,132,.18);color:#3fe0a6}
.acct-kyc-state.pending .acct-kyc-shield{background:rgba(243,176,76,.18);color:#f3b04c}
.acct-kyc-state b{color:var(--ink)}
.acct-upload{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px;border-radius:14px;cursor:pointer;
  border:2px dashed var(--line2);background:var(--bg);text-align:center;transition:border-color .15s,background .15s}
.acct-upload:hover,.acct-upload.has{border-color:var(--a1);background:rgba(22,199,132,.05)}
.acct-upload-ic{width:44px;height:44px;border-radius:12px;background:rgba(22,199,132,.14);color:#3fe0a6;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.acct-upload-txt{font-size:.86rem;color:var(--muted);font-weight:600}
.acct-upload-txt em{font-style:normal;opacity:.7;font-size:.78rem}

/* ---- 2FA secret + recovery codes ---- */
.acct-secret{margin-top:10px;padding:14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line2);text-align:center}
.acct-secret code{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.12em;color:var(--ink)}
.acct-recovery{border-color:rgba(247,147,26,.35)}
.acct-codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.acct-codes code{font-family:ui-monospace,Menlo,monospace;font-size:.92rem;text-align:center;padding:9px;border-radius:9px;
  background:var(--bg);border:1px solid var(--line2);color:var(--ink)}

/* ---- devices ---- */
.acct-devices{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.acct-devices li{display:flex;gap:12px;align-items:center;padding:11px 13px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.acct-dev-ic{width:34px;height:34px;border-radius:10px;background:rgba(124,92,252,.14);display:flex;align-items:center;justify-content:center;font-size:1rem;flex:none}
.acct-devices b{color:var(--ink);font-size:.9rem}

/* ---- alerts ---- */
.acct-alert{border-radius:14px;padding:13px 16px;font-size:.9rem;font-weight:600}
.acct-alert.err{background:rgba(240,97,109,.12);border:1px solid rgba(240,97,109,.3);color:#ff9ba3}
.acct-alert.ok{background:rgba(22,199,132,.12);border:1px solid rgba(22,199,132,.3);color:#5ff0bf}

/* ---- withdraw page (fin-*) shared with account theme ---- */
.fin-wrap{display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
.fin-pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fin-h1{margin:0;font-size:clamp(1.5rem,3.4vw,2rem);font-weight:850;color:var(--ink)}
.fin-h2{margin:0;font-size:1.1rem;font-weight:800;color:var(--ink)}
.fin-sub{color:var(--muted);font-size:.9rem;margin:6px 0 0}
.fin-accent{color:var(--accent)}
.fin-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:11px 18px;font-weight:700;
  font-size:.92rem;cursor:pointer;text-decoration:none;border:1px solid var(--border);background:var(--surface);color:var(--ink);transition:transform .15s,filter .15s}
.fin-btn:hover{transform:translateY(-2px)}
.fin-btn.primary{background:linear-gradient(135deg,var(--accent),#0FB9CE);border-color:transparent;color:#04241a}
.fin-btn.ghost{background:transparent}
.fin-btn.block{width:100%}
.fin-grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.fin-glass{border-radius:20px;padding:22px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 34px -22px rgba(0,0,0,.5)}
.fin-glass.locked{opacity:.96}
.fin-method-head{display:flex;gap:13px;align-items:center;margin-bottom:6px}
.fin-method-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex:none;font-weight:800}
.fin-method-ic.crypto{background:rgba(247,147,26,.16);color:#F7931A}
.fin-method-ic.bank{background:rgba(91,141,239,.16)}
.fin-pill{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:99px;display:inline-block;margin-top:4px}
.fin-pill.ok{background:rgba(22,199,132,.16);color:#3fe0a6}
.fin-pill.warn{background:rgba(243,176,76,.16);color:#f3b04c}
.fin-note{color:var(--muted);font-size:.86rem;line-height:1.6;margin:8px 0 0}
.fin-form{display:flex;flex-direction:column;margin-top:8px}
.fin-label{font-size:.78rem;font-weight:700;color:var(--muted);margin:12px 0 5px}
.fin-input{width:100%;border-radius:12px;padding:12px 14px;font-size:.94rem;background:var(--bg);border:1px solid var(--border);color:var(--ink)}
.fin-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,199,132,.16)}
.fin-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fin-fx{margin-top:8px;font-size:.9rem;font-weight:700;color:var(--accent)}
.fin-table{width:100%;border-collapse:collapse}
.fin-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 6px;border-bottom:1px solid var(--border)}
.fin-table td{padding:11px 6px;border-bottom:1px solid var(--line,var(--border));font-size:.9rem}
.fin-alert{border-radius:14px;padding:13px 16px;font-size:.9rem;font-weight:600}
.fin-alert.err{background:rgba(240,97,109,.12);border:1px solid rgba(240,97,109,.3);color:#ff9ba3}
.mt1{margin-top:8px}.mt2{margin-top:14px}

/* ---- responsive ---- */
@media(max-width:920px){
  .acct-cols,.fin-grid2{grid-template-columns:1fr}
  .acct-statgrid{grid-template-columns:1fr 1fr}
  .acct-hero-grid{flex-direction:column;align-items:flex-start}
  .acct-hero-metrics{width:100%;justify-content:space-between}
}
@media(max-width:520px){
  .acct-statgrid{grid-template-columns:1fr 1fr}
  .acct-checklist{grid-template-columns:1fr}
  .acct-row2,.fin-row2{grid-template-columns:1fr}
  .acct-hero{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  .acct-hero-glow,.acct-metric .v.shine{animation:none}
}

/* ============================================================
   V17 — Promo codes · Deals & Offers · Gifting
   ============================================================ */

/* ---- promo panel (checkout) ---- */
.promo-panel .promo-entry{display:flex;gap:8px;margin-top:8px}
.promo-panel .promo-entry input{flex:1}
.promo-auto{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(247,147,26,.16),rgba(22,199,132,.14));
  border:1px solid rgba(247,147,26,.45);border-radius:12px;padding:12px 14px;margin:10px 0;
  animation:promoPulse 2.4s ease-in-out infinite}
.promo-auto b{color:var(--amber)}
.promo-auto .small{display:block;color:var(--ink-soft)}
@keyframes promoPulse{0%,100%{box-shadow:0 0 0 0 rgba(247,147,26,.28)}50%{box-shadow:0 0 0 7px rgba(247,147,26,0)}}
.promo-applied{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.4);border-radius:12px;padding:11px 14px;margin-top:8px}
.promo-row{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-top:8px;transition:border-color .2s,background .2s}
.promo-row.ok{border-color:rgba(22,199,132,.45);background:rgba(22,199,132,.05)}
.promo-row.no{opacity:.8}
.promo-code-tag{font-family:monospace;font-weight:800;letter-spacing:.5px;background:var(--surface2);
  border:1px dashed var(--border);border-radius:8px;padding:7px 11px;white-space:nowrap}
.promo-row.ok .promo-code-tag{border-color:rgba(22,199,132,.55);color:var(--accent)}
.promo-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.promo-state{display:flex;align-items:center;white-space:nowrap}
.promo-nudge{border:1px dashed var(--border);border-radius:12px;padding:10px 12px;font-size:.86rem;margin-top:12px;color:var(--ink-soft)}
.promo-nudge.on{border-color:rgba(22,199,132,.5);background:rgba(22,199,132,.07);color:var(--ink)}

/* ---- gifting (checkout) ---- */
.gift-toggle{display:flex;gap:10px;align-items:center;cursor:pointer;background:var(--surface2);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.gift-toggle input{width:auto}
.gift-box{border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px;
  background:linear-gradient(180deg,rgba(123,47,247,.05),transparent)}
.gift-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:6px}
.gift-theme input{position:absolute;opacity:0}
.gift-theme .gt-card{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:12px;
  padding:12px 6px;color:#fff;cursor:pointer;border:2px solid transparent;transition:transform .15s,border-color .15s;text-align:center}
.gift-theme .gt-card i{font-style:normal;font-size:1.5rem;line-height:1}
.gift-theme .gt-card b{font-size:.72rem;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.gift-theme input:checked + .gt-card{border-color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.gift-theme .gt-card:hover{transform:translateY(-2px)}

/* ---- deals grid ---- */
.deals-hero h1{margin-bottom:4px}
.dealgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.dealgrid.home{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.dealcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s,border-color .18s;color:var(--ink);text-decoration:none}
a.dealcard:hover{text-decoration:none}
.dealcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(247,147,26,.5)}
.deal-top{position:relative;background:var(--surface2);display:flex;align-items:center;justify-content:center;height:110px;padding:14px}
.deal-top img{max-height:74px;max-width:82%;object-fit:contain;border-radius:8px}
.deal-logo-ph{font-size:2.4rem}
.deal-pct{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#F7931A,#F75C2F);color:#111;
  font-weight:800;font-size:.86rem;border-radius:99px;padding:4px 11px;box-shadow:0 4px 12px rgba(247,147,26,.4)}
.deal-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1}
.deal-body h3{margin:0;font-size:.98rem}
.deal-prices{display:flex;align-items:baseline;gap:9px}
.deal-prices b{font-size:1.2rem;color:var(--accent)}
.deal-timer{display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);
  border-radius:9px;padding:6px 10px;font-size:.88rem;width:fit-content}
.deal-timer b{font-family:monospace;letter-spacing:.5px}
.deal-timer.soon{border-color:rgba(240,97,109,.55);color:var(--danger);animation:promoPulse 1.6s ease-in-out infinite}
.deal-timer.over{opacity:.55}
.deal-stock{display:flex;align-items:center;gap:9px}
.deal-stockbar{flex:1;height:6px;background:var(--surface2);border-radius:99px;overflow:hidden}
.deal-stockbar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--danger));border-radius:99px}

/* ---- gift reveal page ---- */
.gift-reveal{border-radius:20px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.gr-hero{position:relative;text-align:center;color:#fff;padding:44px 22px 34px}
.gr-hero h1{color:#fff;margin:.25em 0 .1em}
.gr-hero p{margin:0;opacity:.95}
.gr-emoji{font-size:4rem;line-height:1;animation:grPop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes grPop{0%{transform:scale(0) rotate(-16deg)}100%{transform:scale(1) rotate(0)}}
.gr-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.gr-burst i{position:absolute;font-style:normal;font-size:1.3rem;opacity:0;animation:grFloat 3.6s ease-in-out infinite}
.gr-burst i:nth-child(1){left:12%;top:64%;animation-delay:.1s}
.gr-burst i:nth-child(2){left:26%;top:22%;animation-delay:.7s}
.gr-burst i:nth-child(3){right:14%;top:58%;animation-delay:1.3s}
.gr-burst i:nth-child(4){right:26%;top:18%;animation-delay:1.9s}
.gr-burst i:nth-child(5){left:50%;top:10%;animation-delay:2.5s}
@keyframes grFloat{0%{opacity:0;transform:translateY(10px) scale(.7)}25%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translateY(-26px) scale(1.1)}}
.gr-body{background:var(--surface);padding:22px}
.gr-msg{background:var(--surface2);border-left:4px solid var(--accent);border-radius:10px;padding:14px 16px;
  font-style:italic;margin-bottom:16px}
.gr-msg span{display:block;font-style:normal;color:var(--muted);font-size:.85rem;margin-top:6px}
.gr-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.gr-code{display:flex;align-items:center;gap:9px;margin-top:8px;flex-wrap:wrap}
.gr-code span{font-family:monospace;font-size:1.05rem;background:var(--surface2);border:1px dashed var(--border);border-radius:8px;padding:6px 11px;word-break:break-all}
@media (prefers-reduced-motion:reduce){.promo-auto,.deal-timer.soon,.gr-emoji,.gr-burst i{animation:none}}
@media (max-width:560px){.promo-row{flex-wrap:wrap}.promo-state{width:100%;justify-content:flex-end}}

/* ============================== V18 ============================== */

/* ---- wallet pill (always visible) ---- */
.wpill{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:99px;
  background:linear-gradient(135deg,#0B5FFF,#0847C4);color:#fff!important;font-size:.88rem;
  border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 14px rgba(11,95,255,.35),inset 0 1px 0 rgba(255,255,255,.25);
  text-decoration:none;transition:transform .18s,box-shadow .18s;position:relative;overflow:hidden}
.wpill::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);animation:wpillSheen 5.5s ease-in-out infinite}
@keyframes wpillSheen{0%,72%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
.wpill:hover{transform:translateY(-1px);box-shadow:0 7px 20px rgba(11,95,255,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.wpill-ic{display:flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.18);flex:0 0 auto}
.wpill-amt{font-variant-numeric:tabular-nums;letter-spacing:.2px}
.wpill.wpill-hit{animation:wpillHit .55s ease}
@keyframes wpillHit{0%{transform:scale(1)}35%{transform:scale(1.18);box-shadow:0 0 0 8px rgba(11,95,255,.25)}100%{transform:scale(1)}}
/* fixed variant: mobile only, pinned top-right above everything, survives scroll */
.wpill-fixed{display:none}
@media(max-width:880px){
  /* V3.9: the wallet chip lives INSIDE the header row, immediately left of the
     search button. It scrolls away with the header instead of floating over it,
     so the search control is always reachable. */
  .wpill-fixed{display:inline-flex;position:static;margin-left:auto;margin-right:6px;
    padding:6px 11px 6px 7px;font-size:.8rem;flex:0 0 auto;order:-1}
  .navlinks .wpill{display:none}
  body{--wpill-h:0px}
}
@media(max-width:420px){
  .wpill-fixed .wpill-amt{max-width:64px;overflow:hidden;text-overflow:ellipsis}
}

/* ---- signup bonus ad ---- */
.sad{position:relative;display:flex;align-items:center;gap:18px;margin-bottom:18px;padding:22px 22px 22px 18px;
  border-radius:18px;overflow:hidden;color:#fff;
  background:radial-gradient(120% 160% at 0% 0%,#123B8F 0%,#0B1B33 55%,#081226 100%);
  border:1px solid rgba(110,160,255,.35);box-shadow:0 12px 40px rgba(4,12,30,.45)}
.sad-grid{position:absolute;inset:0;opacity:.16;
  background-image:linear-gradient(rgba(120,170,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.4) 1px,transparent 1px);
  background-size:26px 26px;mask-image:radial-gradient(90% 90% at 30% 40%,#000 30%,transparent 78%)}
.sad-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.5;pointer-events:none}
.sad-orb.o1{width:180px;height:180px;background:#0B5FFF;top:-70px;right:-40px;animation:sadFloat 7s ease-in-out infinite}
.sad-orb.o2{width:120px;height:120px;background:#16C784;bottom:-60px;left:30%;animation:sadFloat 9s ease-in-out infinite reverse}
@keyframes sadFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(14px)}}
.sad-coin{position:relative;flex:0 0 auto;width:74px;height:74px;border-radius:50%;
  background:conic-gradient(from 210deg,#FFE9A8,#F5B60D,#B67B00,#F5B60D,#FFE9A8);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(245,182,13,.45),inset 0 2px 6px rgba(255,255,255,.6),inset 0 -4px 8px rgba(122,79,0,.5);
  animation:sadCoin 3.4s ease-in-out infinite}
@keyframes sadCoin{0%,100%{transform:translateY(0) rotateY(0)}50%{transform:translateY(-7px) rotateY(24deg)}}
.sad-coin-in{font-weight:800;font-size:1.5rem;color:#5C3B00;text-shadow:0 1px 0 rgba(255,255,255,.55)}
.sad-ring{position:absolute;inset:-7px;border-radius:50%;border:2px dashed rgba(255,214,110,.55);animation:sadSpin 14s linear infinite}
@keyframes sadSpin{to{transform:rotate(360deg)}}
.sad-body{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.sad-kicker{font-size:.68rem;letter-spacing:2.5px;font-weight:700;color:#8FD8FF;opacity:.95}
.sad-title{font-size:1.32rem;line-height:1.2;font-weight:700}
.sad-title b{background:linear-gradient(90deg,#FFD666,#F5B60D);-webkit-background-clip:text;background-clip:text;color:transparent}
.sad-sub{font-size:.86rem;opacity:.85;line-height:1.45}
.sad-perks{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.sad-perks i{font-style:normal;font-size:.72rem;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18)}
.sad-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%);
  transform:translateX(-130%);animation:sadShine 4.6s ease-in-out infinite;pointer-events:none}
@keyframes sadShine{0%,60%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
@media(max-width:560px){.sad{gap:14px;padding:18px 16px}.sad-coin{width:60px;height:60px}.sad-coin-in{font-size:1.2rem}.sad-title{font-size:1.12rem}}

/* ---- welcome bonus overlay ---- */
.wb-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,24,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:wbIn .4s ease;transition:opacity .4s}
.wb-overlay.done{opacity:0;pointer-events:none}
@keyframes wbIn{from{opacity:0}}
body.wb-lock{overflow:hidden}
.wb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;perspective:1100px}
.wb-card{position:relative;width:min(320px,80vw);aspect-ratio:1.586;transform-style:preserve-3d;
  animation:wbFlip 2.2s cubic-bezier(.2,.75,.25,1) forwards;will-change:transform}
@keyframes wbFlip{
  0%{transform:translateY(60px) rotateY(180deg) rotateX(18deg) scale(.4);opacity:0}
  45%{transform:translateY(-8px) rotateY(-8deg) rotateX(-4deg) scale(1.04);opacity:1}
  62%{transform:translateY(0) rotateY(4deg) rotateX(2deg) scale(1)}
  100%{transform:translateY(0) rotateY(0) rotateX(0) scale(1);opacity:1}}
.wb-card.fly{animation:wbFly .85s cubic-bezier(.5,-.05,.75,.4) forwards}
@keyframes wbFly{
  20%{transform:scale(1.06) rotateZ(-2deg)}
  100%{transform:translate(var(--tx,40vw),var(--ty,-40vh)) scale(.06) rotateZ(8deg);opacity:.15}}
.wb-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;overflow:hidden}
.wb-front{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:20px;
  background:linear-gradient(130deg,#123B8F 0%,#0B5FFF 45%,#16C784 130%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.wb-back{transform:rotateY(180deg);background:linear-gradient(130deg,#0A1D3F,#122E63);border:1px solid rgba(255,255,255,.2)}
.wb-stripe{position:absolute;top:22%;left:0;right:0;height:34px;background:rgba(0,0,0,.5)}
.wb-chip{position:absolute;top:20px;left:20px;width:42px;height:32px;border-radius:6px;
  background:linear-gradient(135deg,#FFE9A8,#D99A06);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.wb-chip::after{content:"";position:absolute;inset:6px;border:1px solid rgba(0,0,0,.3);border-radius:3px}
.wb-logo{position:absolute;top:22px;right:20px;font-weight:700;font-size:.9rem;color:#fff;opacity:.92}
.wb-logo span{color:#FFD666}
.wb-amount{font-size:2.5rem;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35);line-height:1}
.wb-label{font-size:.68rem;letter-spacing:3px;color:rgba(255,255,255,.85);font-weight:700}
.wb-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);
  transform:translateX(-130%);animation:wbShine 2.6s ease-in-out .9s infinite}
@keyframes wbShine{0%{transform:translateX(-130%)}55%,100%{transform:translateX(130%)}}
.wb-text{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:#fff;
  animation:wbTextIn .7s ease .9s backwards}
@keyframes wbTextIn{from{opacity:0;transform:translateY(12px)}}
.wb-text b{font-size:1.25rem}
.wb-text span{font-size:.9rem;opacity:.85;max-width:340px}
.wb-sparks{position:absolute;inset:0;pointer-events:none}
.wb-sparks i{position:absolute;width:8px;height:8px;border-radius:50%;background:#FFD666;opacity:0;
  animation:wbSpark 1.7s ease .35s}
.wb-sparks i:nth-child(2n){background:#16C784}.wb-sparks i:nth-child(3n){background:#6EA0FF;width:6px;height:6px}
.wb-sparks i:nth-child(1){left:12%;top:28%;animation-delay:.35s}.wb-sparks i:nth-child(2){left:85%;top:22%;animation-delay:.5s}
.wb-sparks i:nth-child(3){left:22%;top:74%;animation-delay:.65s}.wb-sparks i:nth-child(4){left:76%;top:70%;animation-delay:.45s}
.wb-sparks i:nth-child(5){left:50%;top:10%;animation-delay:.75s}.wb-sparks i:nth-child(6){left:8%;top:52%;animation-delay:.9s}
.wb-sparks i:nth-child(7){left:92%;top:48%;animation-delay:.6s}.wb-sparks i:nth-child(8){left:44%;top:88%;animation-delay:.8s}
@keyframes wbSpark{0%{opacity:0;transform:scale(.2) translateY(6px)}30%{opacity:1;transform:scale(1.15) translateY(-8px)}100%{opacity:0;transform:scale(.4) translateY(-26px)}}

/* ---- gift card page promo panel ---- */
.cpromo{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.cpromo-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;background:none;border:0;cursor:pointer;font:inherit;color:inherit;font-size:.92rem;text-align:left}
.cpromo-head b{color:var(--accent)}
.cpromo-chev{transition:transform .25s}
.cpromo.open .cpromo-chev{transform:rotate(180deg)}
.cpromo-body{display:none;padding:0 14px 14px;border-top:1px dashed var(--line)}
.cpromo.open .cpromo-body{display:block;animation:cpIn .3s ease}
@keyframes cpIn{from{opacity:0;transform:translateY(-5px)}}
.cpromo-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.cpromo-row:last-of-type{border-bottom:0}
.cpromo-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cpromo-info i{font-style:normal}
.cpromo-row.ok .promo-code-tag{background:rgba(22,199,132,.14);border-color:rgba(22,199,132,.5);color:var(--accent)}
.cpromo-row.no{opacity:.72}
.cpromo-apply:disabled{opacity:.45;cursor:not-allowed}
.wal-bonus{border:1px solid rgba(22,199,132,.4);background:linear-gradient(160deg,rgba(22,199,132,.08),transparent)}

@media(prefers-reduced-motion:reduce){
  .wpill::after,.sad-shine,.sad-coin,.sad-ring,.sad-orb,.wb-shine,.wb-sparks i{animation:none}
  .wb-card{animation:wbIn .3s ease forwards}
  .wb-card.fly{animation:none;opacity:0;transition:opacity .3s}
}

/* ============================== V19 ============================== */

/* ---- food-app style promo box (card page + checkout) ---- */
.zpromo{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px;overflow:hidden}
.zpromo-entry{display:flex;align-items:center;gap:0;border:1.5px dashed var(--line);border-radius:12px;
  padding:4px 4px 4px 12px;background:var(--bg);transition:border-color .2s}
.zpromo-entry:focus-within{border-color:var(--accent)}
.zpromo-ic{font-size:1.05rem;margin-right:8px}
.zpromo-entry input[type=text]{flex:1;min-width:0;border:0;background:none;padding:10px 4px;font-size:.95rem;
  letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:inherit;outline:none}
.zpromo-entry input[type=text]::placeholder{letter-spacing:.3px;text-transform:none;font-weight:400}
.zpromo-apply{border:0;border-radius:9px;padding:10px 18px;font-weight:800;font-size:.82rem;letter-spacing:1px;
  background:var(--accent);color:#04120A;cursor:pointer;transition:filter .15s,transform .15s}
.zpromo-apply:hover{filter:brightness(1.08);transform:translateY(-1px)}
.zpromo-applied{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.86rem;
  background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.4)}
.zpromo-toggle{display:flex;width:100%;align-items:center;gap:10px;margin-top:12px;padding:10px 2px 2px;
  background:none;border:0;border-top:1px dashed var(--line);cursor:pointer;font:inherit;color:inherit;font-size:.88rem}
.zpromo-toggle > span:first-child{font-weight:600}
.zpromo-count{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.5px;padding:3px 9px;border-radius:99px;
  background:rgba(11,95,255,.12);color:var(--blue,#6EA0FF);border:1px solid rgba(11,95,255,.3)}
.zpromo-chev{transition:transform .25s}
.zpromo.open .zpromo-chev,.zpromo-inline.open .zpromo-chev{transform:rotate(180deg)}
.zpromo-list{display:none}
.zpromo.open .zpromo-list,.zpromo-inline.open .zpromo-list{display:block;animation:zIn .3s ease}
@keyframes zIn{from{opacity:0;transform:translateY(-6px)}}
/* checkout inline variant reuses the toggle without the box chrome */
.zpromo-inline .zpromo-toggle{border-top:0;padding-top:2px;margin-top:0}

/* coupon rows — perforated ticket look */
.zcoupon{position:relative;display:flex;align-items:center;gap:12px;margin-top:10px;padding:12px 12px 12px 0;
  border:1px solid var(--line);border-radius:12px;background:var(--bg);overflow:hidden;transition:border-color .2s}
.zcoupon.ok{border-color:rgba(22,199,132,.45)}
.zcoupon.no{opacity:.66}
.zcoupon-tag{position:relative;align-self:stretch;display:flex;align-items:center;padding:0 10px;
  background:linear-gradient(160deg,rgba(11,95,255,.16),rgba(22,199,132,.12));border-right:1.5px dashed var(--line)}
.zcoupon.ok .zcoupon-tag{background:linear-gradient(160deg,rgba(22,199,132,.2),rgba(22,199,132,.06))}
.zcoupon-tag span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:800;font-size:.72rem;letter-spacing:2px;
  color:var(--accent)}
.zcoupon-tag::before,.zcoupon-tag::after{content:"";position:absolute;right:-7px;width:12px;height:12px;border-radius:50%;
  background:var(--card);border:1px solid var(--line)}
.zcoupon-tag::before{top:-7px}.zcoupon-tag::after{bottom:-7px}
.zcoupon-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.zcoupon-body i{font-style:normal}
.zcoupon .zc-state{font-size:.76rem}
.zcoupon.ok .zc-state{color:var(--accent)}
.zcoupon-apply{border:1px solid var(--accent);border-radius:9px;padding:7px 14px;font-weight:800;font-size:.74rem;
  letter-spacing:1px;background:none;color:var(--accent);cursor:pointer;transition:background .15s,color .15s;flex:0 0 auto;margin-right:2px}
.zcoupon-apply:hover:not(:disabled){background:var(--accent);color:#04120A}
.zcoupon-apply:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--muted)}
@media(max-width:560px){.zcoupon{gap:10px}.zcoupon-apply{padding:7px 10px}}

/* ---- V19 admin media library ---- */
.ml-overlay{position:fixed;inset:0;z-index:2500;background:rgba(4,10,24,.7);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:18px}
.ml-box{width:min(860px,100%);max-height:88vh;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ml-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.ml-x{margin-left:auto;background:none;border:0;color:inherit;font-size:1rem;cursor:pointer;padding:4px 8px;border-radius:8px}
.ml-x:hover{background:var(--bg)}
.ml-drop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px 16px 0;padding:20px;
  border:1.5px dashed var(--line);border-radius:12px;text-align:center;transition:border-color .2s,background .2s;position:relative}
.ml-drop.hot{border-color:var(--accent);background:rgba(22,199,132,.06)}
.ml-browse{background:none;border:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.ml-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--bg);border-radius:0 0 12px 12px;overflow:hidden}
.ml-prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.ml-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px 16px}
.ml-tile{position:relative;display:flex;flex-direction:column;gap:0;border:2px solid var(--line);border-radius:10px;overflow:hidden;
  background:var(--bg);cursor:pointer;padding:0;transition:border-color .15s,transform .15s}
.ml-tile:hover{transform:translateY(-2px)}
.ml-tile.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,199,132,.2)}
.ml-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ml-tile span{padding:6px 8px;font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.ml-foot{display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--bg)}
.ml-coverprev img{max-height:110px;border-radius:10px;margin-top:8px;border:1px solid var(--line)}

/* ============================== V20 — promo card (mockup design) ============================== */
.pcard{position:relative;border:1.5px dashed rgba(110,130,255,.55);border-radius:16px;padding:16px;
  background:linear-gradient(160deg,rgba(88,101,242,.08),rgba(88,101,242,.02));transition:border-color .25s,background .25s}
.pcard.is-applied{border:1.5px solid rgba(22,199,132,.55);
  background:linear-gradient(160deg,rgba(22,199,132,.1),rgba(22,199,132,.02))}
.pcard-head{display:flex;align-items:flex-start;gap:12px}
.pcard-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 auto;border-radius:12px;
  background:rgba(88,101,242,.18);color:#8B96FF;transform:rotate(-8deg)}
.pcard-ic.ok{background:rgba(22,199,132,.16);color:var(--accent)}
.pcard-tt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pcard-tt > b{font-size:1.02rem}
.pcard-sub{font-size:.82rem;color:var(--muted)}
.pcard-sub.ok{color:var(--accent)}
.pcard-badge{flex:0 0 auto;padding:6px 12px;border-radius:99px;font-weight:800;font-size:.76rem;letter-spacing:.5px;
  background:rgba(22,199,132,.16);color:var(--accent);border:1px solid rgba(22,199,132,.45)}
.pcard-entry{display:flex;gap:10px;margin-top:14px}
.pcard-entry input[type=text]{flex:1;min-width:0;padding:13px 15px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg);color:inherit;font-size:.95rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;outline:none;
  transition:border-color .2s,box-shadow .2s}
.pcard-entry input[type=text]::placeholder{letter-spacing:.3px;text-transform:none;font-weight:400;color:var(--muted)}
.pcard-entry input[type=text]:focus{border-color:#8B96FF;box-shadow:0 0 0 3px rgba(88,101,242,.18)}
.pcard-apply{border:0;border-radius:11px;padding:13px 26px;font-weight:800;font-size:.88rem;letter-spacing:.5px;cursor:pointer;
  background:linear-gradient(135deg,#5865F2,#4752C4);color:#fff;box-shadow:0 6px 18px rgba(88,101,242,.35);
  transition:transform .15s,box-shadow .15s,filter .15s}
.pcard-apply:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 8px 24px rgba(88,101,242,.45)}
.pcard-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.pcard-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;font-weight:800;
  letter-spacing:1.5px;font-size:.9rem;background:var(--bg);border:1px solid rgba(22,199,132,.5);color:inherit}
.pcard-chip i{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#04120A;font-style:normal;font-size:.7rem;font-weight:900}
.pcard-remove{margin-left:auto;border:1px solid rgba(255,92,92,.5);border-radius:11px;padding:10px 18px;font-weight:700;
  font-size:.84rem;background:rgba(255,92,92,.08);color:#FF7B7B;cursor:pointer;transition:background .15s}
.pcard-remove:hover{background:rgba(255,92,92,.16)}
form .pcard-remove{margin-left:0}
.pcard-toggle{display:flex;width:100%;align-items:center;gap:10px;margin-top:14px;padding:11px 2px 2px;background:none;
  border:0;border-top:1px dashed rgba(110,130,255,.35);cursor:pointer;font:inherit;color:inherit;font-size:.88rem}
.pcard.is-applied .pcard-toggle{border-top-color:rgba(22,199,132,.3)}
.pcard-toggle > span:first-child{font-weight:600}
.pcard-offers{display:none}
.pcard.open .pcard-offers{display:block;animation:zIn .3s ease}
.pcard.open .zpromo-chev{transform:rotate(180deg)}
.zc-off{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;font-size:.62rem;font-weight:800;
  letter-spacing:.5px;vertical-align:2px;background:rgba(22,199,132,.14);color:var(--accent);border:1px solid rgba(22,199,132,.4)}
.zcoupon.no .zc-off{background:var(--bg);color:var(--muted);border-color:var(--line)}
.ck-savebadge{display:inline-block;margin-top:6px;padding:4px 10px;border-radius:99px;font-size:.72rem;font-weight:700;
  background:rgba(22,199,132,.14);color:var(--accent);border:1px solid rgba(22,199,132,.45)}
@media(max-width:560px){
  .pcard{padding:14px}
  .pcard-entry{flex-direction:column}
  .pcard-hz-form{width:100%;justify-content:stretch}
  .pcard-hz-form input[type=text]{flex:1 1 auto;min-width:0;max-width:none}
  .pcard-hz-form .pcard-apply{flex:0 0 auto;width:auto;padding:12px 24px}
  .pcard-badge{font-size:.68rem;padding:5px 9px}
}

/* ============================== V21 ============================== */

/* ---- compact promo panel ---- */
.pcard-entry{align-items:center;gap:8px;margin-top:0}
.pcard-ic.sm{width:34px;height:34px;border-radius:10px;transform:rotate(-8deg)}
.pcard-appl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pcard-appl .pcard-sub{flex:1;min-width:140px}
.pcard-remove.sm{padding:8px 14px;font-size:.78rem}
.pcard-msg{margin-top:10px;padding:9px 12px;border-radius:10px;font-size:.84rem;animation:zIn .25s ease}
.pcard-msg.ok{background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.4)}
.pcard-msg.err{background:rgba(255,92,92,.08);border:1px solid rgba(255,92,92,.4);color:#FF9B9B}
.sum-promo{color:var(--accent)}
.sum-promo b#sumPromoOff{color:var(--accent)}
.pcard [hidden]{display:none!important}

/* ---- homepage offer advertisement ---- */
.offerad{position:relative;display:flex;align-items:center;gap:20px;padding:22px 24px;border-radius:18px;overflow:hidden;
  color:#fff;text-decoration:none;border:1px solid rgba(255,170,60,.4);
  background:radial-gradient(130% 200% at 0% 0%,#3A1E63 0%,#1B1140 45%,#0D0A26 100%);
  box-shadow:0 14px 44px rgba(10,5,35,.5);transition:transform .2s,box-shadow .2s}
.offerad:hover{transform:translateY(-2px);box-shadow:0 18px 54px rgba(10,5,35,.65)}
.oa-grid{position:absolute;inset:0;opacity:.14;
  background-image:linear-gradient(rgba(190,150,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(190,150,255,.5) 1px,transparent 1px);
  background-size:24px 24px;mask-image:radial-gradient(90% 100% at 25% 40%,#000 25%,transparent 75%)}
.oa-glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55;pointer-events:none}
.oa-glow.g1{width:200px;height:200px;background:#8B5CF6;top:-90px;left:18%;animation:sadFloat 8s ease-in-out infinite}
.oa-glow.g2{width:150px;height:150px;background:#F5A60D;bottom:-70px;right:12%;animation:sadFloat 10s ease-in-out infinite reverse}
.oa-tag{position:relative;flex:0 0 auto;width:62px;height:62px;display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;border-radius:16px;background:linear-gradient(135deg,rgba(255,180,60,.28),rgba(255,120,40,.14));
  border:1px solid rgba(255,180,60,.5);transform:rotate(-8deg);animation:oaWiggle 3.2s ease-in-out infinite}
@keyframes oaWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(4deg) scale(1.06)}}
.oa-body{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.oa-kicker{font-size:.66rem;font-weight:800;letter-spacing:2.2px;color:#FFC46B}
.oa-title{font-size:1.18rem;font-weight:700;line-height:1.25}
.oa-codes{display:flex;flex-wrap:wrap;gap:7px;margin-top:3px}
.oa-codes i{font-style:normal;font-family:monospace;font-weight:700;font-size:.72rem;padding:4px 10px;border-radius:8px;
  background:rgba(255,255,255,.1);border:1px dashed rgba(255,255,255,.35);letter-spacing:1px}
.oa-timer{position:relative;display:flex;align-items:center;gap:5px;flex:0 0 auto}
.oa-cell{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:9px 6px;border-radius:12px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(4px)}
.oa-cell b{font-size:1.35rem;font-variant-numeric:tabular-nums;line-height:1}
.oa-cell i{font-style:normal;font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;opacity:.75}
.oa-sep{font-weight:800;opacity:.55}
.oa-cta{position:relative;flex:0 0 auto;padding:13px 22px;border-radius:12px;font-weight:800;font-size:.9rem;white-space:nowrap;
  background:linear-gradient(135deg,#F5A60D,#E07B00);color:#241300;box-shadow:0 8px 22px rgba(245,166,13,.4)}
.oa-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  transform:translateX(-130%);animation:sadShine 5s ease-in-out infinite;pointer-events:none}
@media(max-width:920px){
  .offerad{flex-wrap:wrap;gap:14px;padding:18px}
  .oa-body{flex:1 1 calc(100% - 82px)}
  .oa-timer{flex:1 1 auto;justify-content:center}
  .oa-cta{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){.oa-tag,.oa-glow,.oa-shine{animation:none}}

/* ============================== V22 ============================== */
/* The hidden attribute must always win, even over display:flex components
   (fixes the always-visible promo summary row and the media-library footer). */
[hidden]{display:none!important}
/* Media library: solid, opaque modal regardless of theme card transparency */
.ml-box{background:#0E1626;border:1px solid #24304A;box-shadow:0 30px 80px rgba(0,0,0,.65)}
html[data-theme=light] .ml-box,body.light .ml-box{background:#fff;border-color:#E2E6EF}
.ml-grid{min-height:180px}
.ml-drop{background:rgba(255,255,255,.02)}

/* ---- V23: blog studio publish panel + checklist ---- */
.bs-publish{display:flex;gap:12px;flex-wrap:wrap;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.bs-check{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.bs-checkbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:10px}
.bs-checkbar i{display:block;height:100%;background:linear-gradient(90deg,#5865F2,#16C784);transition:width .4s}
.bs-checki{display:inline-block;margin:3px 10px 3px 0;font-size:.78rem;color:var(--muted)}
.bs-checki.ok{color:var(--accent)}

/* ---- V23: compact price-first denomination chips (reference design) ---- */
.dcard.dmini{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-width:150px;padding:16px 16px 12px;border-radius:14px;border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s;text-align:left}
.dcard.dmini:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.45)}
.dcard.dmini.on{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.22),0 10px 26px rgba(88,60,180,.25);
  background:linear-gradient(165deg,rgba(139,92,246,.1),var(--card))}
.dmini-price{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.dmini-price s{color:var(--muted);font-size:.86rem}
.dmini-price b{font-size:1.32rem;letter-spacing:-.3px}
.dmini-den{font-size:.72rem;color:var(--muted)}
.dmini-save{margin-top:2px;padding:3px 9px;border-radius:8px;font-size:.7rem;font-weight:700;
  background:rgba(22,199,132,.13);color:var(--accent);border:1px solid rgba(22,199,132,.35)}
.dcard.dmini .dcard-tick{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.66rem;font-weight:900;
  background:#8B5CF6;color:#fff;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s}
.dcard.dmini.on .dcard-tick{opacity:1;transform:scale(1)}

/* ---- V23: horizontal promo panel (reference design) ---- */
.pcard-hz{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pcard-hz .pcard-ic{width:44px;height:44px;border-radius:12px;transform:none;
  background:rgba(139,92,246,.18);color:#B79CFF;flex:0 0 auto}
.pcard-hz-tt{display:flex;flex-direction:column;gap:2px;min-width:170px}
.pcard-hz-tt b{font-size:1rem}
.pcard-hz-tt i{font-style:normal;font-size:.8rem;color:var(--muted)}
.pcard-hz-form{display:flex;gap:10px;flex:1;min-width:240px;justify-content:flex-end}
.pcard-hz-form input[type=text]{flex:1;max-width:280px;min-width:0;padding:12px 15px;border-radius:11px;
  border:1px solid var(--line);background:var(--bg);color:inherit;font-size:.92rem;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;outline:none;transition:border-color .2s,box-shadow .2s}
.pcard-hz-form input[type=text]::placeholder{letter-spacing:.3px;text-transform:none;font-weight:400;color:var(--muted)}
.pcard-hz-form input[type=text]:focus{border-color:#8B5CF6;box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.pcard .pcard-apply{background:linear-gradient(135deg,#7C3AED,#5B21B6);box-shadow:0 6px 18px rgba(124,58,237,.35)}
.pcard .pcard-apply:hover{box-shadow:0 8px 24px rgba(124,58,237,.45)}
/* promo panel base becomes a subtle solid card like the reference */
.pcard{border:1px solid rgba(139,92,246,.3);border-radius:16px;
  background:linear-gradient(160deg,rgba(139,92,246,.07),rgba(88,101,242,.02))}
.pcard.is-applied{border-color:rgba(22,199,132,.5);
  background:linear-gradient(160deg,rgba(22,199,132,.09),rgba(22,199,132,.02))}
@media(max-width:640px){.pcard-hz-form{justify-content:stretch}.pcard-hz-form input[type=text]{max-width:none}}

/* ---- V23: fast delivery / safe & secure info cards ---- */
.infocards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.infocards{grid-template-columns:1fr}}
.ic-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line);
  border-radius:14px;background:var(--card)}
.ic-ic{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;
  font-size:1.2rem;flex:0 0 auto}
.ic-card span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.ic-card i{font-style:normal;font-size:.82rem;color:var(--muted);line-height:1.5}

/* ---- V24: SEO score + AI assistant ---- */
.bs-seo{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.bs-seo-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bs-seo-ring{--p:0;position:relative;width:66px;height:66px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:conic-gradient(var(--rc,#5865F2) calc(var(--p)*1%), var(--line) 0)}
.bs-seo-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--card)}
.bs-seo-ring b{position:relative;font-size:1.15rem;line-height:1}
.bs-seo-ring i{position:relative;font-style:normal;font-size:.58rem;color:var(--muted)}
.bs-seo-ring.g{--rc:#16C784}.bs-seo-ring.a{--rc:#F5A60D}.bs-seo-ring.r{--rc:#FF5C5C}
.bs-ai{margin-top:12px;padding:12px;border-radius:10px;border:1px dashed rgba(139,92,246,.45);
  background:rgba(139,92,246,.06)}
.bs-ai-list{margin:4px 0 10px;padding-left:18px;font-size:.82rem;line-height:1.55}
.bs-ai-list.ok li{color:var(--accent)}
.bs-ai-list.warn li{color:#F5A60D}
.bs-ai-sugg{display:flex;gap:10px;align-items:center;margin-top:8px;padding:8px 10px;border-radius:8px;
  background:var(--bg);border:1px solid var(--line)}
.bs-ai-sugg span{flex:1;min-width:0}
.bs-previewbtn{border:1px solid var(--accent);border-radius:8px;padding:6px 12px;background:rgba(22,199,132,.1);
  color:var(--accent);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.bs-previewbtn:hover{background:rgba(22,199,132,.18)}

/* ============================== V3.0 — Analytics Command Center ============================== */
.ac-head{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ac-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.ac-live{display:inline-block;margin-left:8px;padding:3px 10px;border-radius:99px;font-size:.66rem;font-weight:800;
  letter-spacing:1px;vertical-align:4px;background:rgba(22,199,132,.14);color:var(--accent);
  border:1px solid rgba(22,199,132,.45);animation:acPulse 2.4s ease-in-out infinite}
@keyframes acPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,199,132,.35)}50%{box-shadow:0 0 0 6px rgba(22,199,132,0)}}
.ac-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ac-kpi{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
.ac-kpi-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:2px 0 4px}
.ac-kpi-row b{font-size:1.5rem;letter-spacing:-.4px}
.ac-delta{font-style:normal;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:99px}
.ac-delta.up{background:rgba(22,199,132,.13);color:var(--accent)}
.ac-delta.dn{background:rgba(255,92,92,.12);color:#FF8B8B}
.kpi-spark{width:100%;height:34px;display:block;opacity:.9}
.ac-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.ac-online{margin:8px 0;font-size:.95rem}
.ac-online b{font-size:1.6rem;color:var(--accent)}
.ac-livegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ac-livegrid span{display:flex;flex-direction:column;padding:8px 10px;border-radius:10px;background:var(--bg);border:1px solid var(--line)}
.ac-livegrid b{font-size:1.05rem}
.ac-livegrid i{font-style:normal;font-size:.68rem;color:var(--muted)}
.ac-feed{margin-top:10px;max-height:250px;overflow:auto}
.ac-feedrow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.ac-feedrow:last-child{border-bottom:0}
.ac-fstep{margin-top:9px}
.ac-fbar{height:9px;border-radius:6px;background:var(--line);overflow:hidden;margin-top:3px}
.ac-fbar i{display:block;height:100%;border-radius:6px;transition:width .5s}
.ac-hours{display:flex;gap:2px;align-items:flex-end;height:76px;margin:10px 0 4px}
.ac-hcol{flex:1;display:flex;align-items:flex-end;height:100%;background:var(--bg);border-radius:3px;overflow:hidden}
.ac-hcol i{display:block;width:100%;background:linear-gradient(180deg,#6EA0FF,#0B5FFF);border-radius:3px 3px 0 0}
.ac-alert{margin-top:7px;padding:8px 11px;border-radius:10px;font-size:.8rem}
.ac-alert.up{background:rgba(22,199,132,.08);border:1px solid rgba(22,199,132,.35)}
.ac-alert.dn{background:rgba(255,150,60,.08);border:1px solid rgba(255,150,60,.4)}

/* ---- V3.1: dashboard link-cards ---- */
.ac-link{text-decoration:none;color:inherit;display:block;transition:border-color .15s,transform .15s}
.ac-link:hover{border-color:var(--amber);transform:translateY(-1px)}

/* ---- V3.1: orders pipeline + user avatars ---- */
.op-pipe{display:flex;gap:8px;min-width:max-content;position:relative;padding:2px 0}
.op-stage{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--bg);text-decoration:none;color:inherit;min-width:118px;transition:border-color .15s,transform .15s}
.op-stage:hover{border-color:var(--amber);transform:translateY(-1px)}
.op-stage.on{border-color:var(--amber);background:rgba(245,166,13,.08)}
.op-stage b{font-size:.78rem}
.op-stage span{font-size:.72rem;color:var(--muted)}
.op-stage i{font-style:normal;font-size:.72rem;font-weight:700}
.op-stage.st-paid i,.op-stage.st-delivered i{color:var(--accent)}
.op-stage.st-awaiting_payment i{color:var(--amber)}
.op-stage.st-expired i,.op-stage.st-cancelled i{color:#FF8B8B}
.usr-av{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  font-weight:800;font-size:1rem;color:#fff;background:linear-gradient(135deg,#5865F2,#8B5CF6)}

/* ============================== V3.2 ============================== */

/* ---- live odometer stats under hero ---- */
.livestats{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:18px}
.ls{display:flex;flex-direction:column;gap:2px}
.ls-n{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,#FFD37E,#F5A60D);-webkit-background-clip:text;background-clip:text;color:transparent}
.ls i{font-style:normal;font-size:.74rem;color:rgba(255,255,255,.75)}
.ls-sep{width:1px;height:36px;background:rgba(255,255,255,.2)}
@media(max-width:640px){.livestats{gap:12px}.ls-n{font-size:1.2rem}.ls-sep{height:30px}}

/* ---- 3D promo tier cards ---- */
.promo3d{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;perspective:1000px}
.p3d{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;
  color:#fff;text-decoration:none;overflow:hidden;transform-style:preserve-3d;
  animation:p3dFloat 8s ease-in-out infinite;animation-delay:var(--d,0s);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 14px 34px rgba(5,8,25,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s}
.p3d:hover{transform:rotateY(-8deg) rotateX(6deg) translateY(-5px) scale(1.02);
  box-shadow:0 22px 50px rgba(5,8,25,.66),inset 0 1px 0 rgba(255,255,255,.2)}
.p3d.t1{background:linear-gradient(135deg,#1B4A34,#0B1D15)}
.p3d.t2{background:linear-gradient(135deg,#332766,#150F33)}
.p3d.t3{background:linear-gradient(135deg,#5A3308,#251405)}
@keyframes p3dFloat{0%,100%{transform:rotateY(-2.5deg) rotateX(1.5deg) translateY(0)}50%{transform:rotateY(2.5deg) rotateX(-1.5deg) translateY(-5px)}}
/* left block: the percentage, the hero of the ticket */
.p3d-pct{display:flex;align-items:baseline;gap:4px;flex:0 0 auto;line-height:1;
  font-size:1.65rem;font-weight:900;letter-spacing:-1px;text-shadow:0 4px 16px rgba(0,0,0,.5)}
.p3d-pct i{font-style:normal;font-size:.62rem;letter-spacing:1.6px;opacity:.8}
/* perforation between percent and code, like a real coupon */
.p3d-code{position:relative;flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-weight:800;
  font-size:.8rem;letter-spacing:1.6px;padding:5px 12px;border-radius:8px;
  border:1.5px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.p3d-range{flex:1;min-width:0;font-size:.72rem;opacity:.8;line-height:1.35}
.p3d-shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.15) 50%,transparent 58%);
  transform:translateX(-140%);animation:sadShine 5s ease-in-out infinite;animation-delay:var(--d,0s);pointer-events:none}
.p3d::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:radial-gradient(85% 55% at 50% 0%,rgba(255,255,255,.12),transparent 60%)}
@media(max-width:640px){
  .promo3d{grid-template-columns:1fr;gap:9px}
  .p3d{padding:12px 14px;gap:10px}
  .p3d-pct{font-size:1.5rem}
  .p3d-range{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){.p3d,.p3d-shine{animation:none}}

/* ============================== V3.4 ============================== */

/* ---- welcome-credit advertisement (homepage) ---- */
.wcad{position:relative;display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:18px;overflow:hidden;
  text-decoration:none;color:#fff;border:1px solid rgba(22,199,132,.42);
  background:radial-gradient(130% 190% at 0% 0%,#12402D 0%,#0C2419 48%,#081A13 100%);
  box-shadow:0 16px 44px rgba(4,20,13,.55);transition:transform .2s,box-shadow .2s}
.wcad:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(4,20,13,.7);color:#fff;text-decoration:none}
.wcad-glow{position:absolute;width:220px;height:220px;border-radius:50%;filter:blur(46px);opacity:.5;
  background:#16C784;top:-110px;left:8%;pointer-events:none;animation:sadFloat 9s ease-in-out infinite}
.wcad-coin{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(145deg,#FFD37E,#E8940C);color:#241300;
  box-shadow:0 8px 22px rgba(232,148,12,.45),inset 0 -3px 8px rgba(0,0,0,.25);animation:oaWiggle 3.6s ease-in-out infinite}
.wcad-coin b{font-size:1.3rem;font-weight:900}
.wcad-body{position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.wcad-kicker{font-size:.64rem;font-weight:800;letter-spacing:2px;color:#5BE3AC}
.wcad-title{font-size:1.14rem;font-weight:700;line-height:1.28}
.wcad-sub{font-size:.8rem;opacity:.82;line-height:1.45}
.wcad-cta{position:relative;flex:0 0 auto;padding:12px 20px;border-radius:12px;font-weight:800;font-size:.86rem;
  white-space:nowrap;background:linear-gradient(135deg,#16C784,#0E9C66);color:#04150D;
  box-shadow:0 8px 20px rgba(22,199,132,.36)}
.wcad-shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);
  transform:translateX(-130%);animation:sadShine 5.5s ease-in-out infinite}
@media(max-width:820px){
  .wcad{flex-wrap:wrap;gap:12px;padding:16px}
  .wcad-body{flex:1 1 calc(100% - 80px)}
  .wcad-cta{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){.wcad-coin,.wcad-glow,.wcad-shine{animation:none}}

/* ---- locked-credit notice at checkout ---- */
.bonus-lock{margin-top:8px;padding:10px 13px;border-radius:11px;font-size:.82rem;line-height:1.5;
  background:rgba(245,166,13,.09);border:1px solid rgba(245,166,13,.4)}

/* ---- V3.5: wallet top-up bonus ladder ---- */
.tbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tbtier{position:relative;display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg);transition:border-color .15s,transform .15s}
.tbtier:hover{border-color:var(--accent);transform:translateY(-2px)}
.tb-pay{font-size:.78rem;color:var(--muted)}
.tb-get{font-size:1.24rem;font-weight:800;color:var(--accent);letter-spacing:-.4px}
.tb-tot{font-size:.76rem;color:var(--muted)}
.tb-pct{position:absolute;top:10px;right:10px;font-size:.62rem;font-weight:800;letter-spacing:.5px;
  padding:3px 8px;border-radius:99px;background:rgba(22,199,132,.14);color:var(--accent)}

/* ---- V3.5: referral leaderboard ---- */
.lboard{display:flex;flex-direction:column;gap:8px}
.lbrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card)}
.lbrow.top{border-color:rgba(245,166,13,.45);background:linear-gradient(90deg,rgba(245,166,13,.08),transparent 60%)}
.lb-rank{flex:0 0 34px;font-size:1.05rem;font-weight:800}
.lb-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-inv{flex:0 0 auto;font-size:.76rem;color:var(--muted)}
.lb-amt{flex:0 0 auto;font-weight:800;color:var(--accent)}
@media(max-width:560px){.lb-inv{display:none}}

/* ============================== V3.6 ============================== */

/* ---- sale countdown banner above the promo tickets ---- */
.saleban{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:12px 16px;border-radius:14px;
  border:1px solid rgba(245,166,13,.42);background:linear-gradient(100deg,rgba(245,166,13,.12),rgba(245,166,13,.03))}
.saleban-ic{font-size:1.3rem;flex:0 0 auto}
.saleban-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:180px}
.saleban-txt b{font-size:.94rem}
.saleban-txt i{font-style:normal;font-size:.74rem;color:var(--muted)}
.saleban-clock{display:flex;gap:6px;flex:0 0 auto}
.saleban-clock span{display:flex;flex-direction:column;align-items:center;min-width:42px;padding:6px 4px;border-radius:9px;
  background:var(--bg);border:1px solid var(--line)}
.saleban-clock b{font-size:1.02rem;font-variant-numeric:tabular-nums;line-height:1}
.saleban-clock i{font-style:normal;font-size:.58rem;letter-spacing:1px;color:var(--muted)}
@media(max-width:560px){.saleban-clock{width:100%;justify-content:space-between}}

/* ---- grouped admin navigation ---- */
.adnav .navgrp{border-bottom:1px solid var(--line)}
.adnav .navgrp:last-of-type{border-bottom:0}
.adnav .navgrp>summary{cursor:pointer;list-style:none;padding:9px 10px;font-size:.7rem;font-weight:800;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.adnav .navgrp>summary::-webkit-details-marker{display:none}
.adnav .navgrp>summary::after{content:"▾";margin-left:auto;font-size:.7rem;transition:transform .2s}
.adnav .navgrp[open]>summary::after{transform:rotate(180deg)}
.adnav .navgrp>summary:hover{color:var(--ink)}
.adnav .navgrp a{padding-left:20px;font-size:.86rem}
.navgrp-b{font-size:.62rem}

/* ---- campaign preview ---- */
.cmp-prev{padding:20px;border-radius:12px;background:#fff;color:#1b2733;max-height:520px;overflow:auto}
.cmp-prev img{max-width:100%;height:auto}

/* ============================== V3.7 ============================== */

/* ---- command palette ---- */
.cmdk-trigger{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:8px;padding:9px 11px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg);color:var(--muted);font:inherit;font-size:.8rem;cursor:pointer;text-align:left}
.cmdk-trigger:hover{border-color:var(--amber);color:var(--ink)}
.cmdk-trigger kbd{margin-left:auto;font-size:.66rem;padding:2px 6px;border-radius:5px;border:1px solid var(--line);background:var(--card)}
.cmdk{position:fixed;inset:0;z-index:9999;background:rgba(4,8,20,.72);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px}
.cmdk[hidden]{display:none!important}
.cmdk-box{width:100%;max-width:620px;border-radius:16px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:zIn .16s ease}
.cmdk-box input{width:100%;padding:16px 18px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:inherit;font-size:1rem;outline:none}
.cmdk-results{max-height:52vh;overflow:auto}
.cmdk-grp{padding:9px 16px 4px;font-size:.64rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.cmdk-item{display:flex;gap:11px;align-items:center;padding:9px 16px;text-decoration:none;color:inherit}
.cmdk-item.on,.cmdk-item:hover{background:rgba(245,166,13,.12)}
.cmdk-ic{flex:0 0 22px;font-size:1rem;text-align:center}
.cmdk-t{display:flex;flex-direction:column;min-width:0}
.cmdk-t b{font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-t i{font-style:normal;font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdk-empty{padding:26px;text-align:center;color:var(--muted);font-size:.86rem}
.cmdk-foot{padding:9px 16px;border-top:1px solid var(--line)}

/* ============================== V3.8 — ADMIN APP SHELL ============================== */

/* hide the public storefront chrome inside the admin */
body.adminmode > .topbar,
body.adminmode > header:not(.adtop),
body.adminmode > footer,
body.adminmode .site-header,
body.adminmode .navbar,
body.adminmode .supportfab{display:none!important}
body.adminmode{background:#070D18}

/* ---- fixed top bar ---- */
.adtop{position:fixed;top:0;left:0;right:0;height:58px;z-index:900;display:flex;align-items:center;gap:14px;
  padding:0 18px;background:#0B1322;border-bottom:1px solid #1B2740}
.adtop-burger{display:none;border:0;background:transparent;color:var(--ink);font-size:1.2rem;cursor:pointer}
.adtop-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1rem;color:#fff;text-decoration:none;
  flex:0 0 auto;letter-spacing:-.2px}
.adtop-brand b{color:var(--amber)}
.adtop-search{flex:1;max-width:460px;display:flex;align-items:center;gap:9px;padding:8px 13px;border-radius:10px;
  border:1px solid #1F2C47;background:#0E1728;color:#7E8CA8;font:inherit;font-size:.82rem;cursor:pointer;text-align:left}
.adtop-search:hover{border-color:var(--amber);color:#C9D4E6}
.adtop-sr{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adtop-search kbd{font-size:.66rem;padding:2px 6px;border-radius:5px;border:1px solid #263450;background:#131E33}
.adtop-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.adtop-ic{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;text-decoration:none;font-size:1rem;border:1px solid transparent}
.adtop-ic:hover{background:#131E33;border-color:#1F2C47}
.adtop-ic i{position:absolute;top:2px;right:2px;font-style:normal;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--danger);color:#fff;font-size:.6rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.adtop-me{display:flex;align-items:center;gap:9px;padding-left:8px;border-left:1px solid #1B2740;margin-left:4px}
.adtop-who{display:flex;flex-direction:column;line-height:1.25}
.adtop-who b{font-size:.82rem}
.adtop-who i{font-style:normal;font-size:.66rem;color:var(--muted)}

/* ---- shell + sidebar ---- */
.adshell{display:grid;grid-template-columns:216px 1fr;gap:22px;align-items:start;
  padding:76px 22px 40px;max-width:1720px;margin:0 auto}
.adside{position:sticky;top:76px;display:flex;flex-direction:column;gap:10px;
  border:1px solid #1B2740;border-radius:16px;background:#0B1322;padding:10px;max-height:calc(100vh - 96px);overflow:auto}
.adside .adnav{display:flex;flex-direction:column;gap:2px}
.adside a{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:9px;color:#9FADC6;
  font-size:.85rem;font-weight:500;text-decoration:none}
.adside a:hover{background:#131E33;color:#fff}
.adside a.on{background:linear-gradient(90deg,rgba(245,166,13,.16),rgba(245,166,13,.04));color:#fff;
  box-shadow:inset 2px 0 0 var(--amber)}
.adside-help{margin-top:auto;display:flex!important;align-items:center;gap:10px;padding:11px!important;
  border-radius:12px;background:linear-gradient(135deg,rgba(245,166,13,.16),rgba(245,166,13,.05));
  border:1px solid rgba(245,166,13,.3)}
.adside-help span:last-child{display:flex;flex-direction:column;line-height:1.3}
.adside-help b{font-size:.8rem;color:#fff}
.adside-help i{font-style:normal;font-size:.68rem;color:var(--muted)}
@media(max-width:1000px){
  .adshell{grid-template-columns:1fr;padding:70px 12px 30px}
  .adtop-burger{display:block}
  .adtop-sr,.adtop-who{display:none}
  .adside{position:fixed;top:58px;left:0;bottom:0;width:230px;z-index:880;border-radius:0;max-height:none;
    transform:translateX(-105%);transition:transform .22s}
  body.adnav-open .adside{transform:none}
}

/* ---- V3.8: User 360 ---- */
.u3-grid{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media(max-width:960px){.u3-grid{grid-template-columns:1fr}}
.u3-hero{display:flex;flex-direction:column;gap:16px}
.u3-id{display:flex;gap:14px;align-items:flex-start}
.u3-av{position:relative;flex:0 0 auto;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:1.4rem;color:#fff;background:linear-gradient(135deg,#7C3AED,#5B21B6)}
.u3-dot{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:#16C784;
  border:2px solid var(--card)}
.u3-dot.off{background:#FF5C5C}
.u3-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.u3-metrics span{display:flex;flex-direction:column;gap:1px}
.u3-metrics i{font-style:normal;font-size:.7rem;color:var(--muted)}
.u3-metrics b{font-size:1.32rem;letter-spacing:-.4px}
.u3-metrics u{text-decoration:none;font-size:.66rem;color:var(--muted)}
.u3-facts{display:flex;gap:16px;flex-wrap:wrap;font-size:.76rem;color:var(--muted)}
.u3-facts b{color:var(--ink)}
.u3-risk{display:flex;flex-direction:column}
.u3-gauge-wrap{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}
.u3-gauge{--p:0;--gc:#16C784;position:relative;flex:0 0 auto;width:132px;height:70px;overflow:hidden}
.u3-gauge::before{content:"";position:absolute;top:0;left:0;width:132px;height:132px;border-radius:50%;
  background:conic-gradient(from 270deg,var(--gc) calc(var(--p)*0.5%),var(--line) 0)}
.u3-gauge::after{content:"";position:absolute;top:14px;left:14px;width:104px;height:104px;border-radius:50%;background:var(--card)}
.u3-gauge span{position:absolute;bottom:0;left:0;width:132px;text-align:center;z-index:2;line-height:1}
.u3-gauge b{font-size:2rem;font-weight:800}
.u3-gauge i{font-style:normal;font-size:.68rem;color:var(--muted);display:block;margin-top:2px}
.u3-checks{flex:1;min-width:150px;display:flex;flex-direction:column;gap:3px}
.u3-chk{font-size:.74rem;line-height:1.5}
.u3-chk.ok{color:var(--accent)}
.u3-chk.warn{color:#F5A60D}
.u3-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.u3-stat{display:flex;gap:11px;align-items:center;padding:13px;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.u3-stat-ic{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;font-size:1.05rem;flex:0 0 auto}
.u3-stat-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.u3-stat-t i{font-style:normal;font-size:.68rem;color:var(--muted)}
.u3-stat-t b{font-size:1.18rem;letter-spacing:-.3px}
.u3-stat-t u{text-decoration:none;font-size:.64rem;color:var(--muted)}


/* ---- V3.8: KPI cards with icon chip + full-width trend (reference design) ---- */
.ac-kpi{position:relative;padding:16px 16px 0;overflow:hidden}
.ac-kpi > .small.muted{padding-right:44px;display:block}
.ac-kpi .kpi-spark{margin:10px -16px 0;width:calc(100% + 32px);height:46px}
.ac-kpi-ic{position:absolute;top:13px;right:13px;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:.95rem}

/* ============================== V3.9 ============================== */

/* ---- offer banner: 3D tag + floating real brand logos ---- */
.offerad{text-decoration:none!important}
.offerad *{text-decoration:none!important}
.oa-stage{position:relative;flex:0 0 auto;width:150px;height:104px;perspective:700px}
@media(max-width:920px){.oa-stage{width:100%;height:92px;order:-1}}
.oa-tag3d{position:absolute;left:44px;top:22px;width:60px;height:60px;transform-style:preserve-3d;
  animation:oaSpin 7s ease-in-out infinite;z-index:3}
.oa-tag3d-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;
  border-radius:16px;background:linear-gradient(145deg,rgba(255,200,110,.34),rgba(255,140,40,.16));
  border:1px solid rgba(255,190,90,.6);box-shadow:0 12px 30px rgba(255,150,30,.3),inset 0 2px 0 rgba(255,255,255,.3)}
.oa-tag3d-shadow{position:absolute;left:8px;right:8px;bottom:-14px;height:12px;border-radius:50%;
  background:rgba(0,0,0,.45);filter:blur(7px);animation:oaShadow 7s ease-in-out infinite}
@keyframes oaSpin{
  0%,100%{transform:rotateY(-16deg) rotateX(8deg) translateY(0)}
  50%{transform:rotateY(16deg) rotateX(-6deg) translateY(-10px)}}
@keyframes oaShadow{0%,100%{transform:scaleX(1);opacity:.45}50%{transform:scaleX(.8);opacity:.25}}
/* orbiting gift-card chips carrying the real brand art */
.oa-chip{position:absolute;width:54px;height:36px;border-radius:8px;overflow:hidden;background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.5);
  animation:oaFloat 6s ease-in-out infinite;will-change:transform}
.oa-chip img{width:100%;height:100%;object-fit:cover;display:block}
.oa-chip.o1{left:0;top:2px;animation-delay:0s;transform:rotate(-11deg)}
.oa-chip.o2{left:96px;top:0;animation-delay:.7s;transform:rotate(9deg)}
.oa-chip.o3{left:-6px;top:60px;animation-delay:1.4s;transform:rotate(7deg)}
.oa-chip.o4{left:100px;top:62px;animation-delay:2.1s;transform:rotate(-8deg)}
.oa-chip.o5{left:50px;top:-14px;animation-delay:2.8s;transform:rotate(3deg);opacity:.9}
.oa-chip.o6{left:48px;top:80px;animation-delay:3.5s;transform:rotate(-4deg);opacity:.9}
@keyframes oaFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:920px){
  .oa-chip.o5,.oa-chip.o6{display:none}
  .oa-tag3d{left:calc(50% - 30px);top:16px}
  .oa-chip.o1{left:8%}.oa-chip.o2{left:auto;right:8%}
  .oa-chip.o3{left:22%;top:52px}.oa-chip.o4{left:auto;right:22%;top:52px}
}
@media(prefers-reduced-motion:reduce){.oa-tag3d,.oa-chip,.oa-tag3d-shadow{animation:none}}

/* ---- V3.9: colourful admin sidebar ---- */
.adside .adlink{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:11px;
  color:#A9B6CD;font-size:.84rem;font-weight:600}
.adlink-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:.92rem;background:color-mix(in srgb, var(--ic) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--ic) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.adlink-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adlink-b{flex:0 0 auto;min-width:20px;padding:1px 7px;border-radius:99px;font-size:.66rem;font-weight:800;
  background:var(--amber);color:#241300;text-align:center}
.adside .adlink:hover{background:#131E33;color:#fff}
.adside .adlink:hover .adlink-ic{background:color-mix(in srgb, var(--ic) 34%, transparent)}
.adside .adlink.on{background:color-mix(in srgb, var(--ic) 16%, #131E33);color:#fff;
  box-shadow:inset 2px 0 0 var(--ic)}
.adside .adlink.on .adlink-ic{background:var(--ic);color:#0B1322;border-color:transparent}
/* group headers */
.adnav .navgrp>summary{display:flex;align-items:center;gap:10px;padding:7px 9px;margin-top:4px;border-radius:11px;
  font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;font-weight:800;color:#8FA0BC}
.adnav .navgrp>summary:hover{background:#131E33;color:#fff}
.navgrp-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;background:color-mix(in srgb, var(--gc) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--gc) 45%, transparent)}
.adnav .navgrp>summary>span:nth-child(2){flex:1}
.navgrp-b{flex:0 0 auto;min-width:20px;padding:1px 7px;border-radius:99px;font-size:.64rem;font-weight:800;
  background:var(--amber);color:#241300;text-align:center}
.adnav .navgrp[open]>summary{color:#fff}
.adnav .navgrp{border-bottom:0}
.adnav .navgrp>summary::after{opacity:.5}

/* ============================== V4.0 — HERO UNBOXING ============================== */

/* ---- left column typography ---- */
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:99px;font-size:.78rem;
  font-weight:700;color:#8FE9C4;background:rgba(22,199,132,.1);border:1px solid rgba(22,199,132,.35);margin-bottom:16px}
.hero-h1{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px}
.grad-warm{background:linear-gradient(95deg,#FFB84D,#FF6BAA 60%,#C77DFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-cool{position:relative;background:linear-gradient(95deg,#4FC3FF,#7C9CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-cool::after{content:"";position:absolute;left:0;right:6%;bottom:-2px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#4FC3FF,transparent)}

/* ---- stage ---- */
.unbox{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px;perspective:1200px}
.ub-stage{--mx:0;--my:0;position:relative;width:100%;max-width:560px;height:480px;transform-style:preserve-3d;
  transform:rotateX(calc(var(--my) * -4deg)) rotateY(calc(var(--mx) * 6deg));transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.unbox.paused *{animation-play-state:paused!important}

/* ambient light + starfield behind everything */
.ub-ambient{position:absolute;left:50%;top:56%;width:420px;height:420px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,30,.30),rgba(140,60,255,.16) 46%,transparent 70%);
  filter:blur(28px);animation:ubBreathe 8s ease-in-out infinite}
.ub-stars{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(1.6px 1.6px at 18% 22%,#fff,transparent),radial-gradient(1.4px 1.4px at 76% 16%,#BFD8FF,transparent),
    radial-gradient(1.6px 1.6px at 88% 62%,#FFD9A0,transparent),radial-gradient(1.3px 1.3px at 12% 68%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 62% 86%,#D7B8FF,transparent),radial-gradient(1.2px 1.2px at 42% 8%,#fff,transparent);
  animation:ubTwinkle 5s ease-in-out infinite}
@keyframes ubTwinkle{0%,100%{opacity:.35}50%{opacity:.75}}
@keyframes ubBreathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.94)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}

/* ---- the box ---- */
.ub-box{position:absolute;left:50%;bottom:62px;width:212px;height:132px;translate:-50% 0;transform-style:preserve-3d;
  animation:ubFloat 8s ease-in-out infinite}
@keyframes ubFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.ub-front,.ub-side{position:absolute;border-radius:8px}
@keyframes ubInner{0%,26%{opacity:0}34%,86%{opacity:1}100%{opacity:0}}
.ub-front{left:0;right:0;bottom:0;height:112px;
  background:linear-gradient(165deg,#1D2A48,#0D1526 60%,#080E1B);
  border:1px solid rgba(120,160,255,.3);
  box-shadow:0 24px 60px rgba(2,6,20,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.ub-front b{position:absolute;left:0;right:0;top:44%;text-align:center;font-size:.74rem;font-weight:800;
  letter-spacing:.5px;color:rgba(255,255,255,.72)}
.ub-front b i{font-style:normal;color:var(--amber)}
.ub-front::after{content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,190,90,.9),transparent 12%);opacity:0;
  animation:ubSeam 8s ease-in-out infinite}
@keyframes ubSeam{0%,14%{opacity:0}24%,30%{opacity:1}42%,100%{opacity:0}}
.ub-side{width:26px;height:112px;bottom:0;background:linear-gradient(180deg,#16223C,#0A1120);
  border:1px solid rgba(120,160,255,.18)}
.ub-side.l{left:-13px;transform:rotateY(58deg)}
.ub-side.r{right:-13px;transform:rotateY(-58deg)}
.ub-lid{position:absolute;left:-9px;right:-9px;top:-4px;height:34px;border-radius:9px;
  background:linear-gradient(165deg,#243357,#101A2F);border:1px solid rgba(140,180,255,.4);
  box-shadow:0 10px 26px rgba(2,6,20,.6),inset 0 1px 0 rgba(255,255,255,.22);
  transform-origin:50% 100%;animation:ubLid 8s cubic-bezier(.3,.8,.3,1) infinite;z-index:4}
.ub-lid b{position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:.9rem;font-weight:900;
  color:#7C9CFF;text-shadow:0 0 12px rgba(124,156,255,.8)}
@keyframes ubLid{
  0%,26%{transform:translateY(0) rotateX(0)}
  38%{transform:translateY(-84px) rotateX(-58deg)}
  86%{transform:translateY(-78px) rotateX(-52deg)}
  100%{transform:translateY(0) rotateX(0)}}
.ub-glowpool{position:absolute;left:50%;bottom:-26px;width:280px;height:64px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,160,40,.55),transparent 70%);filter:blur(16px);
  animation:ubInner 8s ease-in-out infinite}
.ub-shadow{position:absolute;left:50%;bottom:-30px;width:210px;height:26px;translate:-50% 0;border-radius:50%;
  background:rgba(0,0,0,.6);filter:blur(14px)}

/* ---- volumetric rays ---- */
.ub-rays{position:absolute;left:50%;bottom:150px;width:2px;height:2px;translate:-50% 0;z-index:2}
.ub-rays i{position:absolute;left:50%;bottom:0;width:38px;height:230px;translate:-50% 0;transform-origin:50% 100%;
  background:linear-gradient(to top,rgba(255,190,90,.55),transparent 78%);filter:blur(7px);opacity:0;
  animation:ubRay 8s ease-in-out infinite}
.ub-rays i:nth-child(1){rotate:-34deg}.ub-rays i:nth-child(2){rotate:-16deg}
.ub-rays i:nth-child(3){rotate:0deg;height:270px}
.ub-rays i:nth-child(4){rotate:16deg}.ub-rays i:nth-child(5){rotate:34deg}
@keyframes ubRay{0%,28%{opacity:0;scale:.6 .4}40%{opacity:1;scale:1 1}86%{opacity:.55}100%{opacity:0}}
.ub-flare{position:absolute;left:50%;bottom:168px;width:230px;height:230px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,190,90,.6) 22%,transparent 62%);
  opacity:0;animation:ubFlare 8s ease-in-out infinite;z-index:2}
@keyframes ubFlare{0%,30%{opacity:0;scale:.3}39%{opacity:.95;scale:1.15}52%{opacity:.18;scale:.9}100%{opacity:0}}

/* ---- cards ---- */
.ub-cards{position:absolute;inset:0;transform-style:preserve-3d;z-index:3}
.ub-card{position:absolute;left:50%;bottom:118px;width:150px;height:96px;translate:-50% 0;border-radius:13px;
  overflow:hidden;background:#fff;transform-style:preserve-3d;opacity:0;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 20px 40px rgba(2,6,20,.6),inset 0 0 0 1px color-mix(in srgb,var(--bc) 40%,transparent);
  animation:var(--anim) 8s cubic-bezier(.25,.9,.3,1) infinite}
.ub-card img{width:100%;height:100%;object-fit:cover;display:block}
.ub-card-gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);
  transform:translateX(-120%);animation:ubGloss 8s ease-in-out infinite}
@keyframes ubGloss{0%,52%{transform:translateX(-120%)}70%,100%{transform:translateX(120%)}}
/* each card gets its own flight path, staggered so they leave the box one by one */







.ub-card.c1{--anim:ubC1;z-index:6}.ub-card.c2{--anim:ubC2;z-index:7}
.ub-card.c3{--anim:ubC3;z-index:6}.ub-card.c4{--anim:ubC4;z-index:5}
.ub-card.c5{--anim:ubC5;z-index:4}.ub-card.c6{--anim:ubC6;z-index:4}
.ub-card.c7{--anim:ubC7;z-index:2;filter:blur(.6px)}

/* ---- coins ---- */
.ub-coins{position:absolute;inset:0;z-index:5;pointer-events:none}
.ub-coin{position:absolute;left:50%;bottom:130px;width:38px;height:38px;translate:-50% 0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;color:#6B3E00;
  background:conic-gradient(from 210deg,#FFE9A8,#F5B60D,#B67B00,#F5B60D,#FFE9A8);
  box-shadow:0 6px 18px rgba(180,110,0,.55),inset 0 2px 5px rgba(255,255,255,.7),inset 0 -4px 7px rgba(120,70,0,.5);
  opacity:0;animation:var(--kanim) 8s ease-out infinite}





.ub-coin.k1{--kanim:ubK1}.ub-coin.k2{--kanim:ubK2}.ub-coin.k3{--kanim:ubK3;z-index:8}
.ub-coin.k4{--kanim:ubK4}.ub-coin.k5{--kanim:ubK5;filter:blur(1px)}

/* ---- sparks ---- */
.ub-sparks{position:absolute;inset:0;z-index:4;pointer-events:none}
.ub-sparks i{position:absolute;left:50%;bottom:140px;width:6px;height:6px;border-radius:50%;background:#FFD37E;
  opacity:0;animation:ubSpark 8s ease-out infinite;box-shadow:0 0 10px rgba(255,200,110,.9)}
.ub-sparks i:nth-child(2n){background:#7C9CFF;box-shadow:0 0 10px rgba(124,156,255,.9);width:5px;height:5px}
.ub-sparks i:nth-child(3n){background:#FF6BAA;box-shadow:0 0 10px rgba(255,107,170,.9);width:4px;height:4px}
.ub-sparks i:nth-child(1){--dx:calc(-140 * var(--u));--dy:calc(-210 * var(--u));animation-delay:0s}
.ub-sparks i:nth-child(2){--dx:calc(110 * var(--u));--dy:calc(-236 * var(--u));animation-delay:.12s}
.ub-sparks i:nth-child(3){--dx:calc(-224 * var(--u));--dy:calc(-96 * var(--u));animation-delay:.24s}
.ub-sparks i:nth-child(4){--dx:calc(206 * var(--u));--dy:calc(-118 * var(--u));animation-delay:.06s}
.ub-sparks i:nth-child(5){--dx:calc(-56 * var(--u));--dy:calc(-262 * var(--u));animation-delay:.3s}
.ub-sparks i:nth-child(6){--dx:calc(64 * var(--u));--dy:calc(-274 * var(--u));animation-delay:.18s}
.ub-sparks i:nth-child(7){--dx:calc(-176 * var(--u));--dy:calc(-166 * var(--u));animation-delay:.36s}
.ub-sparks i:nth-child(8){--dx:calc(168 * var(--u));--dy:calc(-186 * var(--u));animation-delay:.09s}
.ub-sparks i:nth-child(9){--dx:calc(-250 * var(--u));--dy:calc(-16 * var(--u));animation-delay:.27s}
.ub-sparks i:nth-child(10){--dx:calc(246 * var(--u));--dy:calc(-8 * var(--u));animation-delay:.15s}


/* ---- delivery chip ---- */
.ub-chip{position:absolute;top:6px;right:0;display:flex;align-items:center;gap:11px;padding:11px 16px;border-radius:14px;
  background:rgba(13,20,38,.82);border:1px solid rgba(140,180,255,.28);backdrop-filter:blur(8px);z-index:9}
.ub-chip i{font-style:normal;font-size:1.3rem}
.ub-chip span{display:flex;flex-direction:column;line-height:1.2}
.ub-chip u{text-decoration:none;font-size:.68rem;color:var(--muted)}
.ub-chip b{font-size:1.05rem;color:var(--amber)}

/* ---- hover: brighter, lifted ---- */
.unbox:hover .ub-ambient{filter:blur(22px);opacity:1}
.unbox:hover .ub-card{box-shadow:0 26px 52px rgba(2,6,20,.72),0 0 0 1px color-mix(in srgb,var(--bc) 60%,transparent)}
.unbox:hover .ub-glowpool{scale:1.12}

/* ---- responsive ---- */


/* ---- accessibility: no motion, static composed scene ---- */
@media(prefers-reduced-motion:reduce){
  .unbox *{animation:none!important;transition:none!important}
  .ub-lid{transform:translateY(calc(-78 * var(--u))) rotateX(-52deg)}
  .ub-mouth,.ub-glowpool,.ub-rays i,.ub-flare{opacity:1}
  .ub-card,.ub-coin{opacity:1}
  .ub-card.c1{transform:translate(calc(-162 * var(--u)),calc(-116 * var(--u))) rotate(-11deg)}
  .ub-card.c2{transform:translate(calc(-38 * var(--u)),calc(-186 * var(--u))) rotate(-3deg)}
  .ub-card.c3{transform:translate(calc(102 * var(--u)),calc(-170 * var(--u))) rotate(9deg)}
  .ub-card.c4{transform:translate(calc(184 * var(--u)),calc(-100 * var(--u))) rotate(14deg)}
  .ub-card.c5{transform:translate(calc(-144 * var(--u)),calc(-32 * var(--u))) rotate(-18deg)}
  .ub-card.c6{transform:translate(calc(146 * var(--u)),calc(-24 * var(--u))) rotate(17deg)}
  .ub-card.c7{transform:translate(calc(28 * var(--u)),calc(-244 * var(--u))) scale(.76)}
  .ub-coin.k1{transform:translate(calc(-212 * var(--u)),calc(-140 * var(--u)))}
  .ub-coin.k2{transform:translate(calc(-250 * var(--u)),calc(30 * var(--u))) scale(.8)}
  .ub-coin.k3{transform:translate(calc(220 * var(--u)),calc(-162 * var(--u)))}
  .ub-coin.k4{transform:translate(calc(254 * var(--u)),calc(26 * var(--u))) scale(.9)}
  .ub-coin.k5{transform:translate(calc(-100 * var(--u)),calc(-260 * var(--u))) scale(.6)}
  .ub-coin.k6{transform:translate(calc(-188 * var(--u)),calc(20 * var(--u))) scale(.7)}
  .ub-confetti{display:none}
}

/* ---- V4.0: hero split — text stays readable, scene gets ~48% ---- */
.hero{padding:52px 0 46px}
.heroflex{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px}
.hero .lede{max-width:520px}
@media(max-width:900px){.heroflex{grid-template-columns:1fr}}

/* ============================== V4.1 — PREMIUM UNBOXING ============================== */

/* ---- reflective floor ---- */
.ub-floor{position:absolute;left:50%;bottom:16px;width:520px;height:150px;translate:-50% 0;
  background:radial-gradient(ellipse at 50% 0%,rgba(120,90,255,.20),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.05),transparent 68%);
  transform:perspective(560px) rotateX(72deg);border-radius:50%;filter:blur(1px);pointer-events:none}
.ub-reflect{position:absolute;left:0;right:0;top:112px;height:70px;border-radius:8px;
  background:linear-gradient(180deg,rgba(40,60,110,.5),transparent 72%);
  transform:scaleY(-1);filter:blur(3px);opacity:.5;pointer-events:none}

/* ---- box: heavier, machined ---- */
.ub-front{background:linear-gradient(168deg,#26334F 0%,#141E33 42%,#080D18 100%)}
.ub-rim{position:absolute;inset:0;border-radius:8px;pointer-events:none;
  border:1px solid rgba(190,215,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -14px 26px rgba(0,0,0,.5),
    inset 8px 0 18px rgba(0,0,0,.35),inset -8px 0 18px rgba(0,0,0,.35)}
.ub-ribbon-v{position:absolute;left:50%;top:0;bottom:0;width:22px;translate:-50% 0;pointer-events:none;
  background:linear-gradient(90deg,rgba(245,166,13,.05),rgba(255,190,90,.55),rgba(245,166,13,.05));
  box-shadow:0 0 16px rgba(255,170,40,.45)}
.ub-plate{position:absolute;left:50%;top:18px;translate:-50% 0;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;font-size:1.05rem;
  color:#0B1322;background:linear-gradient(140deg,#FFD37E,#F5A60D 45%,#7C9CFF);
  box-shadow:0 4px 14px rgba(255,170,40,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.ub-front b{top:auto;bottom:16px;font-size:.7rem}
.ub-lid{background:linear-gradient(168deg,#2C3B5C,#131D31 70%)}
.ub-lid-rim{position:absolute;inset:0;border-radius:9px;pointer-events:none;
  border:1px solid rgba(200,222,255,.42);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -8px 16px rgba(0,0,0,.45)}
.ub-ribbon-lid{position:absolute;left:50%;top:0;bottom:0;width:22px;translate:-50% 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,190,90,.6),transparent)}
/* micro-vibration just before the lid lifts */
.ub-box{animation:ubFloat 8s ease-in-out infinite,ubShiver 8s linear infinite}
@keyframes ubShiver{0%,20%{translate:-50% 0}
  22%{translate:calc(-50% - 1.5px) 0}24%{translate:calc(-50% + 1.5px) 0}
  26%{translate:calc(-50% - 1.2px) 0}28%{translate:calc(-50% + 1.2px) 0}
  30%,100%{translate:-50% 0}}

/* ---- card materials: no two alike ---- */
.ub-card{background:#0E1626}
.ub-card-face{position:absolute;inset:3px;border-radius:10px;overflow:hidden;display:block}
.ub-card-face img{width:100%;height:100%;object-fit:cover;display:block}
.ub-card-edge{position:absolute;inset:0;border-radius:13px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.18)}
.ub-card-scratch{position:absolute;inset:0;border-radius:13px;pointer-events:none;opacity:.14;
  background:repeating-linear-gradient(102deg,transparent 0 7px,rgba(255,255,255,.5) 7px 8px)}
.ub-card-giftic{position:absolute;right:7px;bottom:6px;font-style:normal;font-size:.82rem;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.m-titanium{background:linear-gradient(150deg,#2A2E36,#0B0D12);box-shadow:0 20px 40px rgba(2,6,20,.66),inset 0 0 0 1px rgba(190,200,220,.34)}
.m-brushed{background:linear-gradient(150deg,#8E97A6,#4A5262);
  box-shadow:0 20px 40px rgba(2,6,20,.6),inset 0 0 0 1px rgba(255,255,255,.42)}
.m-brushed .ub-card-scratch{opacity:.3}
.m-gunmetal{background:linear-gradient(150deg,#3A4356,#171D2A);box-shadow:0 20px 40px rgba(2,6,20,.62),inset 0 0 0 1px rgba(160,180,215,.3)}
.m-satin{background:linear-gradient(150deg,#D7DCE6,#9AA3B4);box-shadow:0 20px 40px rgba(2,6,20,.5),inset 0 0 0 1px rgba(255,255,255,.7)}
.m-chrome{background:linear-gradient(150deg,#EDF2FA 0%,#7E8CA6 38%,#1B2334 70%,#B9C4D6 100%);
  box-shadow:0 20px 40px rgba(2,6,20,.6),inset 0 0 0 1px rgba(255,255,255,.6)}
.m-anodized{background:linear-gradient(150deg,color-mix(in srgb,var(--bc) 70%,#101828),#0B1220);
  box-shadow:0 20px 40px rgba(2,6,20,.6),inset 0 0 0 1px color-mix(in srgb,var(--bc) 65%,transparent)}
.m-graphite{background:linear-gradient(150deg,#20242D,#0A0C11);box-shadow:0 20px 40px rgba(2,6,20,.7),inset 0 0 0 1px rgba(150,160,180,.28)}

/* ---- eruption physics: launch → peak → gravity → settle with a small bounce ---- */








/* ---- minted coins ---- */
.ub-coin{width:42px;height:42px;background:none;box-shadow:none;color:transparent}
.ub-coin b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:1.05rem;font-weight:900;
  box-shadow:0 8px 20px rgba(0,0,0,.6),inset 0 2px 5px rgba(255,255,255,.65),inset 0 -5px 9px rgba(0,0,0,.35)}
.mt-gold b{background:conic-gradient(from 210deg,#FFEDB8,#F5B60D,#9E6A00,#F5B60D,#FFEDB8);color:#6B3E00;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.mt-silver b{background:conic-gradient(from 200deg,#FFFFFF,#C3CCDC,#6C7793,#C3CCDC,#FFFFFF);color:#39435A}
.mt-gun b{background:conic-gradient(from 190deg,#8792A8,#3C4557,#1A2130,#3C4557,#8792A8);color:#DCE5F5}
.mt-irid b{background:conic-gradient(from 160deg,#9BE7FF,#C79BFF,#FFB4E1,#9BE7FF);color:#2A1E45}
/* engraved rim */
.ub-coin::after{content:"";position:absolute;inset:3px;border-radius:50%;pointer-events:none;
  border:1.5px solid rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}

.ub-coin.k6{--kanim:ubK6;z-index:3}
/* two coins now land on the floor and settle, rather than hovering */



/* ---- metallic confetti ---- */
.ub-confetti{position:absolute;inset:0;z-index:3;pointer-events:none}
.ub-confetti i{position:absolute;left:50%;bottom:140px;width:9px;height:6px;border-radius:1px;opacity:0;
  animation:ubConf 8s cubic-bezier(.2,.7,.4,1) infinite}
.ub-confetti i:nth-child(3n+1){background:linear-gradient(120deg,#FFD37E,#E8940C)}
.ub-confetti i:nth-child(3n+2){background:linear-gradient(120deg,#C79BFF,#7C4DFF)}
.ub-confetti i:nth-child(3n){background:linear-gradient(120deg,#8FE9FF,#2AA6D6)}
.ub-confetti i:nth-child(1){--cx:calc(-198 * var(--u));--cy:calc(-176 * var(--u));--cr:520deg;animation-delay:.02s}
.ub-confetti i:nth-child(2){--cx:calc(172 * var(--u));--cy:calc(-206 * var(--u));--cr:-480deg;animation-delay:.1s}
.ub-confetti i:nth-child(3){--cx:calc(-256 * var(--u));--cy:calc(-64 * var(--u));--cr:610deg;animation-delay:.18s}
.ub-confetti i:nth-child(4){--cx:calc(246 * var(--u));--cy:calc(-92 * var(--u));--cr:-560deg;animation-delay:.06s}
.ub-confetti i:nth-child(5){--cx:calc(-96 * var(--u));--cy:calc(-268 * var(--u));--cr:430deg;animation-delay:.22s}
.ub-confetti i:nth-child(6){--cx:calc(88 * var(--u));--cy:calc(-284 * var(--u));--cr:-500deg;animation-delay:.14s}
.ub-confetti i:nth-child(7){--cx:calc(-238 * var(--u));--cy:calc(22 * var(--u));--cr:660deg;animation-delay:.26s}
.ub-confetti i:nth-child(8){--cx:calc(232 * var(--u));--cy:calc(14 * var(--u));--cr:-620deg;animation-delay:.3s}
.ub-confetti i:nth-child(9){--cx:calc(-150 * var(--u));--cy:calc(-230 * var(--u));--cr:480deg;animation-delay:.34s}
.ub-confetti i:nth-child(10){--cx:calc(140 * var(--u));--cy:calc(-244 * var(--u));--cr:-540deg;animation-delay:.12s}
.ub-confetti i:nth-child(11){--cx:calc(-40 * var(--u));--cy:calc(-306 * var(--u));--cr:400deg;animation-delay:.28s}
.ub-confetti i:nth-child(12){--cx:calc(56 * var(--u));--cy:calc(-296 * var(--u));--cr:-460deg;animation-delay:.2s}


/* ---- cinematic camera push as the box opens ---- */
.ub-stage{animation:ubCam 8s cubic-bezier(.3,.7,.3,1) infinite}
@keyframes ubCam{0%,28%{scale:1}40%{scale:1.055}62%{scale:1.02}84%{scale:1.015}100%{scale:1}}

/* ---- hover: stronger reflections, lifted cards ---- */
.unbox:hover .ub-card-gloss{opacity:1}
.unbox:hover .ub-plate{box-shadow:0 6px 22px rgba(255,170,40,.75),inset 0 1px 0 rgba(255,255,255,.7)}
.unbox:hover .ub-mouth{filter:brightness(1.25)}



@media(prefers-reduced-motion:reduce){
  .ub-stage,.ub-box,.ub-confetti i{animation:none!important}
  .ub-confetti{display:none}
  .ub-coin.k6{opacity:1;transform:translate(calc(-188 * var(--u)),calc(20 * var(--u))) scale(.7)}
}

/* ============================== V4.2 — MOBILE FIT + METAL COIN MARKS ============================== */

/* ---- nothing may push the page sideways ---- */
html,body{max-width:100%;overflow-x:hidden}
.hero{overflow:hidden}

/* ---- the box mouth: light only escapes from the opening, never over the face ---- */
.ub-mouth{position:absolute;left:5px;right:5px;top:0;height:30px;border-radius:7px 7px 3px 3px;z-index:1;
  background:linear-gradient(180deg,#FFF3CE,#FFC153 42%,#E8760A);
  box-shadow:0 0 46px 14px rgba(255,160,30,.6),inset 0 3px 8px rgba(255,255,255,.75);
  opacity:0;animation:ubInner 8s ease-in-out infinite}
.ub-front{z-index:3}
.ub-lid{z-index:5}
.ub-side{z-index:2}
.ub-rays,.ub-flare{z-index:2}

/* ---- crypto marks: vector geometry wearing the coin's metal ---- */
.ub-coin b{overflow:hidden}
.ub-coin svg{width:60%;height:60%;display:block}
.mt-gold svg{fill:#6B3E00;filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.mt-silver svg{fill:#39435A;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.mt-gun svg{fill:#DCE5F5;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.mt-irid svg{fill:#2A1E45;filter:drop-shadow(0 1px 0 rgba(255,255,255,.5))}

/* ---- mobile: the scene must fit the viewport, not overflow it ----
   The card/coin flight paths are written in px, so instead of clipping them we
   scale the whole stage from its own centre and let the wrapper own the width. */

@media(max-width:640px){
  .ub-stage{scale:.48;height:300px}
}
@media(max-width:400px){
  .ub-stage{scale:.4;height:260px}
}

/* ============ V4.3 — proportional flight paths (fit any screen) ============ */
/* Every distance is multiplied by --s, so one variable retunes the whole
   composition per breakpoint and nothing can ever leave the viewport. */
.ub-stage{--s:1}
@keyframes ubC1{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(2deg)}32%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(2deg)}42%{opacity:1;transform:translate(calc(-138 * var(--u)),calc(-186 * var(--u))) scale(1.02) rotate(-22deg)}54%{opacity:1;transform:translate(calc(-166 * var(--u)),calc(-96 * var(--u))) scale(1) rotate(-8deg)}60%{opacity:1;transform:translate(calc(-160 * var(--u)),calc(-124 * var(--u))) scale(1) rotate(-13deg)}84%{opacity:1;transform:translate(calc(-162 * var(--u)),calc(-116 * var(--u))) scale(1) rotate(-11deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC2{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(-3deg)}34%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(-3deg)}44%{opacity:1;transform:translate(calc(-30 * var(--u)),calc(-252 * var(--u))) scale(1.06) rotate(9deg)}56%{opacity:1;transform:translate(calc(-40 * var(--u)),calc(-168 * var(--u))) scale(1.04) rotate(-2deg)}62%{opacity:1;transform:translate(calc(-38 * var(--u)),calc(-192 * var(--u))) scale(1.04) rotate(-4deg)}84%{opacity:1;transform:translate(calc(-38 * var(--u)),calc(-186 * var(--u))) scale(1.04) rotate(-3deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC3{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}36%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}46%{opacity:1;transform:translate(calc(112 * var(--u)),calc(-238 * var(--u))) scale(.98) rotate(20deg)}58%{opacity:1;transform:translate(calc(100 * var(--u)),calc(-152 * var(--u))) scale(.98) rotate(6deg)}64%{opacity:1;transform:translate(calc(102 * var(--u)),calc(-176 * var(--u))) scale(.98) rotate(10deg)}84%{opacity:1;transform:translate(calc(102 * var(--u)),calc(-170 * var(--u))) scale(.98) rotate(9deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC4{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(4deg)}38%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(4deg)}48%{opacity:1;transform:translate(calc(196 * var(--u)),calc(-166 * var(--u))) scale(.95) rotate(26deg)}60%{opacity:1;transform:translate(calc(182 * var(--u)),calc(-84 * var(--u))) scale(.94) rotate(11deg)}66%{opacity:1;transform:translate(calc(184 * var(--u)),calc(-106 * var(--u))) scale(.94) rotate(15deg)}84%{opacity:1;transform:translate(calc(184 * var(--u)),calc(-100 * var(--u))) scale(.94) rotate(14deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC5{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(-4deg)}40%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(-4deg)}50%{opacity:1;transform:translate(calc(-166 * var(--u)),calc(-104 * var(--u))) scale(.88) rotate(-30deg)}62%{opacity:1;transform:translate(calc(-146 * var(--u)),calc(-16 * var(--u))) scale(.86) rotate(-15deg)}68%{opacity:1;transform:translate(calc(-144 * var(--u)),calc(-38 * var(--u))) scale(.86) rotate(-19deg)}84%{opacity:1;transform:translate(calc(-144 * var(--u)),calc(-32 * var(--u))) scale(.86) rotate(-18deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC6{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}42%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}52%{opacity:1;transform:translate(calc(160 * var(--u)),calc(-96 * var(--u))) scale(.86) rotate(28deg)}64%{opacity:1;transform:translate(calc(142 * var(--u)),calc(-10 * var(--u))) scale(.84) rotate(14deg)}70%{opacity:1;transform:translate(calc(146 * var(--u)),calc(-30 * var(--u))) scale(.84) rotate(18deg)}84%{opacity:1;transform:translate(calc(146 * var(--u)),calc(-24 * var(--u))) scale(.84) rotate(17deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubC7{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}44%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.34) rotate(0deg)}54%{opacity:0.94;transform:translate(calc(30 * var(--u)),calc(-296 * var(--u))) scale(.78) rotate(-12deg)}66%{opacity:0.94;transform:translate(calc(26 * var(--u)),calc(-232 * var(--u))) scale(.76) rotate(2deg)}72%{opacity:0.94;transform:translate(calc(28 * var(--u)),calc(-250 * var(--u))) scale(.76) rotate(4deg)}84%{opacity:0.94;transform:translate(calc(28 * var(--u)),calc(-244 * var(--u))) scale(.76) rotate(5deg)}96%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(40 * var(--u))) scale(.4) rotate(0deg)}}
@keyframes ubK1{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}34%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}48%{opacity:1;transform:translate(calc(-206 * var(--u)),calc(-150 * var(--u))) scale(1) rotateY(360deg)}84%{opacity:1;transform:translate(calc(-212 * var(--u)),calc(-140 * var(--u))) scale(1) rotateY(700deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(700deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(700deg)}}
@keyframes ubK2{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}37%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}49%{opacity:1;transform:translate(calc(-238 * var(--u)),calc(-120 * var(--u))) scale(.82) rotateY(400deg)}66%{opacity:1;transform:translate(calc(-252 * var(--u)),calc(34 * var(--u))) scale(.8) rotateY(720deg)}72%{opacity:1;transform:translate(calc(-248 * var(--u)),calc(20 * var(--u))) scale(.8) rotateY(770deg)}84%{opacity:1;transform:translate(calc(-250 * var(--u)),calc(30 * var(--u))) scale(.8) rotateY(810deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(810deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(810deg)}}
@keyframes ubK3{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}36%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}50%{opacity:1;transform:translate(calc(214 * var(--u)),calc(-172 * var(--u))) scale(1.15) rotateY(-380deg)}84%{opacity:1;transform:translate(calc(220 * var(--u)),calc(-162 * var(--u))) scale(1.15) rotateY(-720deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(-720deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(-720deg)}}
@keyframes ubK4{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}40%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}52%{opacity:1;transform:translate(calc(240 * var(--u)),calc(-140 * var(--u))) scale(.92) rotateY(-420deg)}68%{opacity:1;transform:translate(calc(256 * var(--u)),calc(30 * var(--u))) scale(.9) rotateY(-740deg)}74%{opacity:1;transform:translate(calc(252 * var(--u)),calc(16 * var(--u))) scale(.9) rotateY(-790deg)}84%{opacity:1;transform:translate(calc(254 * var(--u)),calc(26 * var(--u))) scale(.9) rotateY(-820deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(-820deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(-820deg)}}
@keyframes ubK5{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}43%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}57%{opacity:0.75;transform:translate(calc(-96 * var(--u)),calc(-268 * var(--u))) scale(.6) rotateY(340deg)}84%{opacity:0.75;transform:translate(calc(-100 * var(--u)),calc(-260 * var(--u))) scale(.6) rotateY(640deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(640deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(640deg)}}
@keyframes ubK6{0%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}45%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(0deg)}56%{opacity:1;transform:translate(calc(-176 * var(--u)),calc(-96 * var(--u))) scale(.7) rotateY(420deg)}70%{opacity:1;transform:translate(calc(-190 * var(--u)),calc(26 * var(--u))) scale(.7) rotateY(700deg)}76%{opacity:1;transform:translate(calc(-186 * var(--u)),calc(14 * var(--u))) scale(.7) rotateY(760deg)}84%{opacity:1;transform:translate(calc(-188 * var(--u)),calc(20 * var(--u))) scale(.7) rotateY(800deg)}95%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(800deg)}100%{opacity:0;transform:translate(calc(0 * var(--u)),calc(20 * var(--u))) scale(.3) rotateY(800deg)}}
@keyframes ubSpark{0%,32%{opacity:0;transform:translate(0,0) scale(.3)}
  40%{opacity:1;transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45)) scale(1.15)}
  62%{opacity:.6;transform:translate(var(--dx),var(--dy)) scale(.75)}
  72%,100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) - 30 * var(--u))) scale(.4)}}
@keyframes ubConf{0%,32%{opacity:0;transform:translate(0,0) rotate(0) scale(.4)}
  40%{opacity:1;transform:translate(calc(var(--cx) * .55),calc(var(--cy) * .8)) rotate(calc(var(--cr) * .4)) scale(1)}
  62%{opacity:.9;transform:translate(var(--cx),calc(var(--cy) * .35)) rotate(calc(var(--cr) * .75)) scale(.9)}
  84%{opacity:.5;transform:translate(calc(var(--cx) * 1.05),calc(44 * var(--u))) rotate(var(--cr)) scale(.8)}
  92%,100%{opacity:0;transform:translate(calc(var(--cx) * 1.05),calc(58 * var(--u))) rotate(var(--cr)) scale(.75)}}

/* ---- breakpoints: shrink the SPREAD and the pieces, never clip them ---- */




/* ---- V4.3: give the desktop stage room for the tallest card, and align the
     emergence point with the (smaller) box mouth on phones ---- */
.unbox{min-height:560px}
.ub-stage{height:520px}





/* ============ V4.4 — one viewport unit drives the entire scene ============
   --u is a length that equals 1px on a wide desktop and shrinks with the
   viewport on anything narrower. EVERY dimension and every flight distance is
   a multiple of it, so the composition keeps its exact proportions at any
   screen size: never cropped, never shrunk into a corner. */
.unbox{container-type:inline-size}
/* Fallback for engines without container queries: derive from the viewport. */
.ub-stage{--u:min(1px, calc(100vw / 700))}
/* Preferred: derive the unit from the scene's OWN column, so the composition is
   correct whether it sits in half a desktop hero or the full width of a phone. */
@supports (width:1cqw){
  .ub-stage{--u:min(1px, calc(100cqw / 660))}
}
.unbox{min-height:calc(560 * var(--u));overflow:visible;padding:0}
.ub-stage{width:100%;height:calc(520 * var(--u));scale:1}

.ub-card{width:calc(150 * var(--u));height:calc(96 * var(--u));bottom:calc(118 * var(--u));
  border-radius:calc(13 * var(--u))}
.ub-card-face{inset:calc(3 * var(--u));border-radius:calc(10 * var(--u))}
.ub-card-giftic{right:calc(7 * var(--u));bottom:calc(6 * var(--u));font-size:calc(13 * var(--u))}
.ub-coin{width:calc(42 * var(--u));height:calc(42 * var(--u));bottom:calc(130 * var(--u))}
.ub-coin b{font-size:calc(17 * var(--u))}
.ub-box{width:calc(212 * var(--u));height:calc(132 * var(--u));bottom:calc(62 * var(--u))}
.ub-front,.ub-side{height:calc(112 * var(--u))}
.ub-side{width:calc(26 * var(--u))}
.ub-side.l{left:calc(-13 * var(--u))}
.ub-side.r{right:calc(-13 * var(--u))}
.ub-lid{height:calc(34 * var(--u));left:calc(-9 * var(--u));right:calc(-9 * var(--u));top:calc(-4 * var(--u))}
.ub-lid b{font-size:calc(14 * var(--u))}
.ub-plate{width:calc(34 * var(--u));height:calc(34 * var(--u));top:calc(18 * var(--u));font-size:calc(17 * var(--u));
  border-radius:calc(10 * var(--u))}
.ub-front b{bottom:calc(16 * var(--u));font-size:calc(11 * var(--u))}
.ub-mouth{height:calc(30 * var(--u));left:calc(5 * var(--u));right:calc(5 * var(--u))}
.ub-floor{width:calc(520 * var(--u));height:calc(150 * var(--u));bottom:calc(16 * var(--u))}
.ub-shadow{width:calc(210 * var(--u));height:calc(26 * var(--u));bottom:calc(-30 * var(--u))}
.ub-glowpool{width:calc(280 * var(--u));height:calc(64 * var(--u));bottom:calc(-26 * var(--u))}
.ub-ambient{width:calc(420 * var(--u));height:calc(420 * var(--u))}
.ub-rays{bottom:calc(150 * var(--u))}
.ub-rays i{width:calc(38 * var(--u));height:calc(230 * var(--u))}
.ub-rays i:nth-child(3){height:calc(270 * var(--u))}
.ub-flare{width:calc(230 * var(--u));height:calc(230 * var(--u));bottom:calc(168 * var(--u))}
.ub-sparks i,.ub-confetti i{bottom:calc(140 * var(--u))}
.ub-sparks i{width:calc(6 * var(--u));height:calc(6 * var(--u))}
.ub-confetti i{width:calc(9 * var(--u));height:calc(6 * var(--u))}

/* every card and coin stays in the composition on phones — nothing is dropped */
.ub-card,.ub-coin,.ub-confetti i,.ub-sparks i{display:block}

/* the hero stacks tight on phones — no dead space above the scene */



/* ============ V4.5 — centred scene, bigger artwork, chip beneath ============ */

/* The scene column is bigger now: a smaller divisor means a larger unit, and the
   geometry still clears both edges at 320px (proof in the deploy notes). */
.ub-stage{--u:min(1px, calc(100vw / 640))}
@supports (width:1cqw){ .ub-stage{--u:min(1px, calc(100cqw / 600))} }

/* The delivery chip used to be a flex sibling of the stage on phones, which pushed
   the whole composition off-centre. It now sits BELOW the scene, in its own row. */

/* the chip is alive: a soft breathing glow plus a light sweep across its face */
.ub-chip{overflow:hidden;animation:chipPulse 3.4s ease-in-out infinite}
.ub-chip::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(108deg,transparent 38%,rgba(255,210,130,.28) 50%,transparent 62%);
  transform:translateX(-140%);animation:chipShine 3.4s ease-in-out infinite}
.ub-chip i{animation:chipTick 3.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,13,0);border-color:rgba(140,180,255,.28)}
  45%{box-shadow:0 0 22px 2px rgba(245,166,13,.28);border-color:rgba(245,166,13,.5)}}
@keyframes chipShine{0%,55%{transform:translateX(-140%)}85%,100%{transform:translateX(140%)}}
@keyframes chipTick{0%,100%{transform:rotate(0)}42%{transform:rotate(12deg)}58%{transform:rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.ub-chip,.ub-chip::after,.ub-chip i{animation:none}}

/* layout for phones is declared last so it always beats the decorative rules */
@media(max-width:900px){
  .hero{padding:24px 0 18px}
  .heroflex{gap:12px}
  .unbox{flex-direction:column;align-items:center;justify-content:flex-start;margin-top:-4px}
  .ub-stage{order:1;margin:0 auto}
  .ub-chip{order:2;position:static;translate:none;margin:calc(6 * var(--u)) auto 0;width:max-content}
}

/* ============================== V4.6 — TWO-LEVEL ADMIN NAV ============================== */
.adtabs{position:fixed;top:58px;left:0;right:0;z-index:880;display:flex;gap:8px;padding:9px 18px;
  background:#0B1322;border-bottom:1px solid #1B2740;overflow-x:auto;scrollbar-width:none}
.adtabs::-webkit-scrollbar{display:none}
.adtab{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:11px;flex:0 0 auto;
  text-decoration:none;color:#9FADC6;font-size:.85rem;font-weight:600;border:1px solid transparent;
  transition:background .15s,color .15s,border-color .15s}
.adtab:hover{background:#131E33;color:#fff}
.adtab.on{color:#fff;background:color-mix(in srgb, var(--tc) 18%, #101B2E);
  border-color:color-mix(in srgb, var(--tc) 50%, transparent)}
.adtab-ic{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;
  font-size:.9rem;background:color-mix(in srgb, var(--tc) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--tc) 40%, transparent)}
.adtab.on .adtab-ic{background:var(--tc);color:#0B1322;border-color:transparent}
.adtab-b{min-width:19px;padding:1px 6px;border-radius:99px;font-size:.64rem;font-weight:800;
  background:var(--danger);color:#fff;text-align:center}
.adshell{padding-top:124px}
.adside{top:124px;max-height:calc(100vh - 144px);border-color:#1B2740}
.adside-head{padding:6px 10px 10px;font-size:.66rem;font-weight:800;letter-spacing:1.6px;color:var(--tc)}
.adside .adlink.on{background:color-mix(in srgb, var(--tc) 16%, #131E33);box-shadow:inset 2px 0 0 var(--tc)}
.adside .adlink.on .adlink-ic{background:var(--tc);color:#0B1322;border-color:transparent}
@media(max-width:1000px){
  .adtabs{top:58px;padding:8px 12px}
  .adtab-t{display:none}
  .adtab{padding:8px 10px}
  .adshell{padding-top:118px}
  .adside{top:auto}
}

/* ---- V4.6: profile details + pending orders ---- */
.u3-details{padding-top:12px;border-top:1px solid var(--line)}
.u3-drow{display:flex;gap:12px;align-items:baseline;padding:5px 0;border-bottom:1px dashed var(--line);font-size:.8rem}
.u3-drow:last-child{border-bottom:0}
.u3-drow i{font-style:normal;color:var(--muted);flex:0 0 108px}
.u3-drow b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.u3-pend{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding:8px 11px;
  border-radius:10px;background:rgba(245,166,13,.07);border:1px solid rgba(245,166,13,.28);font-size:.82rem}

/* ============================== V4.7 — ROYAL LUXURY ADMIN ============================== */
body.adminmode{background:radial-gradient(1200px 600px at 50% -10%,#0C1A2E 0%,#07101F 45%,#050914 100%)}

/* ---- header refinements ---- */
.adtop{background:linear-gradient(180deg,rgba(13,23,40,.96),rgba(7,16,31,.92));
  border-bottom:1px solid rgba(212,175,55,.16);backdrop-filter:blur(14px);height:60px}
.adtop-brand{letter-spacing:-.3px}
.adtop-brand span[aria-hidden]{filter:drop-shadow(0 0 8px rgba(212,175,55,.6))}
.adtop-search{background:rgba(10,18,32,.8);border-color:rgba(148,163,184,.16)}
.adtop-search:focus-within,.adtop-search:hover{border-color:rgba(212,175,55,.5);
  box-shadow:0 0 0 3px rgba(212,175,55,.1)}

/* ---- the nine premium navigation buttons ---- */
.lxnav{position:fixed;top:60px;left:0;right:0;z-index:880;display:flex;gap:10px;padding:12px 18px;
  background:linear-gradient(180deg,rgba(10,18,32,.95),rgba(5,9,20,.9));
  border-bottom:1px solid rgba(148,163,184,.1);overflow:visible;flex-wrap:wrap;scrollbar-width:none}
.lxnav::-webkit-scrollbar{display:none}
.lxnav-item{position:relative;flex:0 0 auto}
.lxbtn{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:96px;padding:11px 8px 9px;
  border-radius:15px;cursor:pointer;overflow:hidden;font:inherit;color:#CBD5E1;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s,box-shadow .24s,color .24s}
.lxbtn-ic{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;
  font-size:1.02rem;background:color-mix(in srgb, var(--nc) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--nc) 38%, transparent);
  transition:transform .24s,background .24s,box-shadow .24s}
.lxbtn-t{font-size:.74rem;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.lxbtn-b{position:absolute;top:7px;right:9px;min-width:18px;padding:1px 5px;border-radius:99px;
  font-size:.6rem;font-weight:800;background:#EF4444;color:#fff}
.lxbtn-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .24s;
  background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb, var(--nc) 26%, transparent),transparent 70%)}
.lxbtn:hover{transform:translateY(-3px);color:#F8FAFC;border-color:color-mix(in srgb, var(--nc) 52%, transparent);
  box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 22px color-mix(in srgb, var(--nc) 22%, transparent),inset 0 1px 0 rgba(255,255,255,.12)}
.lxbtn:hover .lxbtn-ic{transform:scale(1.08);background:color-mix(in srgb, var(--nc) 32%, transparent)}
.lxbtn:hover .lxbtn-glow{opacity:1}
.lxbtn:active{transform:translateY(-1px) scale(.98)}
.lxnav-item.on .lxbtn{color:#fff;border-color:color-mix(in srgb, var(--nc) 62%, transparent);
  background:linear-gradient(160deg,color-mix(in srgb, var(--nc) 18%, rgba(255,255,255,.04)),rgba(255,255,255,.02));
  box-shadow:0 12px 28px rgba(0,0,0,.55),0 0 26px color-mix(in srgb, var(--nc) 26%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16)}
.lxnav-item.on .lxbtn-ic{background:var(--nc);color:#050914;border-color:transparent;
  box-shadow:0 0 16px color-mix(in srgb, var(--nc) 55%, transparent)}
.lxnav-item.on .lxbtn::after{content:"";position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--nc),transparent);box-shadow:0 0 10px var(--nc)}
.lxnav-item.on .lxbtn-glow{opacity:.8}

/* ---- dropdown ---- */
.lxmenu{position:absolute;top:calc(100% + 9px);left:0;min-width:236px;z-index:60;padding:7px;border-radius:15px;
  background:linear-gradient(165deg,rgba(16,27,45,.97),rgba(9,16,30,.97));backdrop-filter:blur(16px);
  border:1px solid color-mix(in srgb, var(--nc) 32%, rgba(148,163,184,.16));
  box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 30px color-mix(in srgb, var(--nc) 12%, transparent);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.3,1)}
.lxnav-item.open .lxmenu{opacity:1;transform:none;pointer-events:auto}
.lxnav-item:nth-last-child(-n+3) .lxmenu{left:auto;right:0}
.lxmenu-i{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;text-decoration:none;
  color:#CBD5E1;font-size:.84rem;transition:background .18s,color .18s}
.lxmenu-i:hover{background:rgba(255,255,255,.06);color:#fff}
.lxmenu-i.on{background:color-mix(in srgb, var(--nc) 16%, transparent);color:#fff;
  box-shadow:inset 2px 0 0 var(--nc)}
.lxmenu-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:.84rem;background:rgba(255,255,255,.05);flex:0 0 auto}
.lxmenu-b{margin-left:auto;font-style:normal;min-width:19px;padding:1px 6px;border-radius:99px;
  font-size:.63rem;font-weight:800;background:#EF4444;color:#fff;text-align:center}

/* ---- shell without a permanent sidebar ---- */
.lxshell{grid-template-columns:1fr;padding-top:140px;max-width:1680px}
.lxshell .adside{display:none}
@media(max-width:1000px){
  .lxnav{padding:9px 12px;gap:8px}
  .lxbtn{width:74px;padding:9px 6px 8px}
  .lxbtn-t{font-size:.66rem}
  .lxshell{padding-top:132px;padding-left:12px;padding-right:12px}
}

/* ---- luxury card treatment across the admin ---- */
body.adminmode .card{background:linear-gradient(165deg,rgba(17,29,48,.92),rgba(10,18,32,.92));
  border:1px solid rgba(148,163,184,.12);border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.045);
  transition:border-color .22s,transform .22s,box-shadow .22s}
body.adminmode .card:hover{border-color:rgba(212,175,55,.26);transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}
body.adminmode h1{letter-spacing:-.5px}
body.adminmode .ac-kpi{background:linear-gradient(165deg,rgba(17,29,48,.94),rgba(10,18,32,.94));
  border-color:rgba(148,163,184,.13)}
body.adminmode .ac-kpi:hover{border-color:rgba(212,175,55,.3)}
body.adminmode .btn.amber{background:linear-gradient(135deg,#F5C451,#D4AF37);color:#1A1204;
  box-shadow:0 8px 22px rgba(212,175,55,.32)}

/* ---- V4.7: profile panels ---- */
.u3-spend,.u3-wallet{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px}
.u3-spend span,.u3-wallet span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(148,163,184,.1)}
.u3-spend i,.u3-wallet i{font-style:normal;font-size:.68rem;color:var(--muted)}
.u3-spend b,.u3-wallet b{font-size:1.12rem;letter-spacing:-.3px}
.u3-osrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;
  border-bottom:1px dashed rgba(148,163,184,.14);font-size:.84rem}
.u3-osrow:last-child{border-bottom:0}
.u3-osrow a{text-decoration:none}
.u3-empty{display:flex;flex-direction:column;align-items:center;gap:3px;padding:26px 14px;text-align:center;
  border-radius:12px;background:rgba(255,255,255,.02);border:1px dashed rgba(148,163,184,.18);margin-top:8px}
.u3-empty b{font-size:.9rem}
.u3-empty i{font-style:normal;font-size:.74rem;color:var(--muted)}
.u3-note{margin-top:9px;padding:10px 12px;border-radius:11px;background:rgba(212,175,55,.06);
  border:1px solid rgba(212,175,55,.22)}
.lnk-del{background:none;border:0;color:#FF8B8B;font:inherit;font-size:.72rem;cursor:pointer;padding:0}
.lnk-del:hover{text-decoration:underline}

/* ============ V4.7.2 — dropdown clipping + leftover storefront chrome ============ */

/* The nav was a horizontal scroll container. Per spec, overflow-x:auto forces the
   other axis to compute to auto as well, so the dropdown was being clipped by the
   nav itself — which is why only a sliver appeared under the button. The nav no
   longer scrolls on desktop; it wraps, and overflow stays visible. */
.lxnav{overflow:visible;flex-wrap:nowrap}
@media(min-width:1001px){ .lxnav{justify-content:flex-start} }

/* Hide every piece of storefront chrome inside the admin. The earlier rule used a
   direct-child combinator and missed nav.main, so the public navigation was still
   rendering (ghosted) behind the admin bar. */
body.adminmode .topbar,
body.adminmode nav.main,
body.adminmode .supportfab,
body.adminmode footer.site,
body.adminmode .sitefoot{display:none!important}

@media(max-width:1000px){
  /* On phones the row does scroll, so the menu is lifted out of the scroller and
     pinned under the bar at full width instead of being clipped by it. */
  .lxnav{overflow-x:auto;flex-wrap:nowrap}
  .lxnav-item.open .lxmenu{position:fixed;top:132px;left:10px;right:10px;width:auto;min-width:0;
    max-height:60vh;overflow:auto}
}

/* ============================== V4.8 — Account area ============================== */
/* ---- shared sidebar ---- */
.dash{grid-template-columns:268px 1fr;gap:26px}
@media(max-width:1080px){.dash{grid-template-columns:232px 1fr;gap:18px}}
.sidebar.dashnav{padding:14px;gap:0;position:sticky;top:82px}
.dn-svg{width:18px;height:18px;flex:none}
.dn-me{display:flex;gap:12px;align-items:center;padding:8px 6px 14px;color:inherit}
.dn-me:hover{text-decoration:none}
.dn-av{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.35rem;color:#fff;
  background:linear-gradient(140deg,#4F46E5,#7C3AED 55%,#0FB9CE);box-shadow:0 0 0 3px var(--surface),0 0 0 5px rgba(99,102,241,.55)}
.dn-av.ok{box-shadow:0 0 0 3px var(--surface),0 0 0 5px rgba(22,199,132,.7)}
.dn-av.ok::after{content:"✓";position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:var(--accent);
  color:#04241a;font-size:.7rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.dn-me-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.dn-me-t b{font-family:'Sora',system-ui,sans-serif;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dn-tier{font-style:normal;font-size:.74rem;font-weight:700;color:#A78BFA;margin-top:2px}
.dn-tier.ok{color:var(--accent)}
.dn-me-t small{font-size:.72rem;color:var(--muted);margin-top:2px}
.dn-level{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:13px;margin:2px 0 12px;
  background:var(--surface2);border:1px solid var(--border);color:var(--ink-soft)}
.dn-level .dn-svg{color:var(--accent)}
.dn-level:hover{text-decoration:none;border-color:var(--accent)}
.dn-level-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.dn-level-t i{font-style:normal;font-size:.7rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.dn-level-t b{font-size:.8rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn-chev{color:var(--muted);width:16px;height:16px}
.dn-links{display:flex;flex-direction:column;gap:2px}
.dashnav .dn-links a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--ink-soft);
  font-weight:600;font-size:.88rem;position:relative;transition:background .14s,color .14s}
.dashnav .dn-links a .dn-ic{width:22px;display:flex;justify-content:center;color:var(--muted);flex:none}
.dashnav .dn-links a:hover{background:var(--surface2);color:var(--ink);text-decoration:none}
.dashnav .dn-links a:hover .dn-ic{color:var(--ink)}
.dashnav .dn-links a.on{background:linear-gradient(90deg,rgba(99,102,241,.22),rgba(99,102,241,.06));color:var(--ink);border:1px solid rgba(99,102,241,.35)}
.dashnav .dn-links a.on .dn-ic{color:#A5B4FC}
.dashnav .dn-links a.on::before{display:none}
.dashnav .dn-links .kycpill{margin-left:auto;font-size:.66rem;padding:2px 8px;border-radius:99px;font-weight:800}
.kycpill.tv{background:rgba(22,199,132,.16);color:var(--accent)}
.kycpill.tp{background:rgba(247,147,26,.16);color:var(--amber)}
.kycpill.t0{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.dashnav .dn-links a.dn-out{margin-top:8px;border-top:1px solid var(--border);border-radius:0 0 11px 11px;padding-top:14px;color:var(--danger)}
.dashnav .dn-links a.dn-out .dn-ic{color:var(--danger)}
.dashnav .dn-links a.dn-out:hover{background:rgba(240,97,109,.08)}
html[data-theme="light"] .dashnav .dn-links a.on{background:rgba(99,102,241,.1)}
@media(max-width:820px){
  .botnav a .dn-svg{width:22px;height:22px}
  .botnav-mid span .dn-svg{width:24px;height:24px;stroke-width:2.6}
}

/* ---- dashboard ---- */
.dsh{display:flex;flex-direction:column;gap:18px;min-width:0}
.dsh h1{font-size:clamp(1.45rem,2.6vw,1.85rem);margin:0}
.dsh h2{font-size:1.05rem;margin:0}
.dsh-top{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dsh-hello p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
.dsh-invite{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:16px;color:var(--ink);
  background:linear-gradient(120deg,rgba(124,58,237,.16),rgba(59,130,246,.08));border:1px solid rgba(139,92,246,.35);
  transition:transform .15s,border-color .15s}
.dsh-invite:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(139,92,246,.7)}
.dsh-invite-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#C4B5FD;background:rgba(139,92,246,.18);flex:none}
.dsh-invite-t{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dsh-invite-t b{font-size:.92rem}
.dsh-invite-t i{font-style:normal;font-size:.76rem;color:var(--muted)}
.dsh-invite-btn{display:inline-flex;align-items:center;gap:6px;margin-left:6px;padding:9px 14px;border-radius:10px;font-weight:700;font-size:.82rem;
  background:linear-gradient(135deg,#6366F1,#7C3AED);color:#fff;white-space:nowrap;box-shadow:0 6px 18px rgba(99,102,241,.35)}
.dsh-invite-btn .dn-svg{width:15px;height:15px}

.dsh-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr);border-radius:20px;overflow:hidden;
  border:1px solid var(--border);background:var(--surface)}
.dsh-wallet{position:relative;padding:26px 26px 22px;color:#fff;overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%,#3B2FA8 0%,#1F2A6B 35%,#131C3F 70%,#111A33 100%)}
.dsh-wallet::before{content:"";position:absolute;inset:auto -60px -120px auto;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.45),transparent 70%);filter:blur(10px)}
.dsh-wallet>*{position:relative;z-index:1}
.dsh-wallet .lbl{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.72)}
.dsh-wallet .bal{display:flex;align-items:center;gap:12px;font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:2.7rem;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.dsh-eye{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:9px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dsh-eye:hover{background:rgba(255,255,255,.2)}
.dsh-wallet .sub{margin-top:6px;font-size:.92rem;color:rgba(255,255,255,.72)}
.dsh-wallet .note{margin-top:8px;font-size:.78rem;color:rgba(255,255,255,.62)}
.dsh-wallet .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.dsh-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:11px;font-weight:700;font-size:.86rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font-family:inherit;transition:transform .12s,background .12s}
.dsh-btn:hover{text-decoration:none;background:rgba(255,255,255,.16);transform:translateY(-1px)}
.dsh-btn.primary{background:var(--accent);border-color:var(--accent);color:#04241a;box-shadow:0 6px 18px rgba(22,199,132,.3)}
.dsh-btn.primary:hover{background:#1EDB93;color:#04241a}
.dsh-card .dsh-btn{border-color:var(--border);background:var(--surface2);color:var(--ink)}
.dsh-card .dsh-btn.primary{background:var(--accent);border-color:var(--accent);color:#04241a}
.dsh-more{position:relative}
.dsh-more summary{list-style:none}
.dsh-more summary::-webkit-details-marker{display:none}
.dsh-menu{position:absolute;left:0;top:calc(100% + 6px);min-width:220px;z-index:30;padding:6px;border-radius:12px;
  background:var(--surface2);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column}
.dsh-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.85rem}
.dsh-menu a:hover{background:var(--surface);text-decoration:none}
.dsh-menu .dn-svg{color:var(--muted);width:16px;height:16px}

.dsh-kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.dsh-kpi{position:relative;display:flex;flex-direction:column;gap:2px;padding:20px 22px;background:var(--surface);color:var(--ink);transition:background .15s}
.dsh-kpi:hover{text-decoration:none;background:var(--surface2)}
.dsh-kpi .k{font-size:.8rem;color:var(--muted);font-weight:600}
.dsh-kpi b{font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;letter-spacing:-.02em;line-height:1.15}
.dsh-kpi i{font-style:normal;font-size:.76rem;color:var(--muted)}
.dsh-kpi i a{color:var(--accent);font-weight:600}
.dsh-kpi .ic{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent)}
.dsh-kpi .ic .dn-svg{width:20px;height:20px}
.dsh-kpi .bar{display:block;height:5px;border-radius:99px;background:rgba(128,128,160,.2);margin-top:8px;overflow:hidden;max-width:140px}
.dsh-kpi .bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#8B5CF6,#5B8DEF)}

.dsh-card{border-radius:18px;border:1px solid var(--border);background:var(--surface);padding:20px 22px;min-width:0}
.dsh-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.dsh-head p{margin:0;font-size:.82rem;color:var(--muted);flex-basis:100%}
.dsh-link{margin-left:auto;font-size:.84rem;font-weight:700}
.dsh-chip{margin-left:auto;font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);color:var(--ink-soft)}

.dsh-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.dsh-quick a{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:14px;color:var(--ink);min-width:0;
  background:color-mix(in srgb,var(--c) 6%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 30%,var(--border));transition:transform .15s,border-color .15s}
.dsh-quick a:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--c)}
.dsh-quick .qi{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.dsh-quick a>span:last-child{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dsh-quick b{font-size:.84rem;line-height:1.2}
.dsh-quick i{font-style:normal;font-size:.7rem;color:var(--muted);line-height:1.25}

.dsh-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;align-items:stretch}
.dsh-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:36px 16px;border-radius:14px;
  border:1px dashed var(--border);background:var(--surface2);min-height:240px}
.dsh-empty-ic{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface);border:1px solid var(--border);margin-bottom:8px}
.dsh-empty-ic .dn-svg{width:26px;height:26px}
.dsh-empty b{font-family:'Sora',system-ui,sans-serif;font-size:1.05rem}
.dsh-empty i{font-style:normal;font-size:.82rem;color:var(--muted);margin-bottom:12px}
.dsh-orders{display:flex;flex-direction:column}
.dsh-order{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border);color:var(--ink)}
.dsh-order:last-child{border-bottom:0}
.dsh-order:hover{text-decoration:none;background:var(--surface2);border-radius:10px}
.dsh-order .oi{flex:none;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#5B8DEF;background:rgba(91,141,239,.14)}
.dsh-order .ot{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.dsh-order .ot b{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-order .ot i{font-style:normal;font-size:.74rem;color:var(--muted)}
.dsh-order .oa{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.dsh-order .oa b{font-size:.9rem}
.dsh-order .tag{font-size:.66rem;padding:2px 8px}
.dsh-earn{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.dsh-earn b{font-family:'Sora',system-ui,sans-serif;font-size:1.6rem;letter-spacing:-.02em}
.dsh-earn span{font-size:.8rem;color:var(--muted)}
.dsh-earn .d{font-style:normal;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:99px;align-self:flex-start;margin-top:4px}
.dsh-earn .d.up{background:rgba(22,199,132,.14);color:var(--accent)}
.dsh-earn .d.dn{background:rgba(240,97,109,.14);color:var(--danger)}
.dsh-chart{display:block;width:100%;height:auto}
.dsh-chart .grid{stroke:var(--border);stroke-dasharray:3 4}
.dsh-chart .tick{fill:var(--muted);font-size:11px;font-family:'Inter',system-ui,sans-serif}
.dsh-chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.dsh-chart .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}

@media(max-width:960px){
  .dsh-hero{grid-template-columns:1fr}
  .dsh-cols{grid-template-columns:1fr}
  .dsh-invite{width:100%}
}
@media(max-width:640px){
  .dsh-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dsh-kpis{grid-template-columns:1fr 1fr}
  .dsh-kpi{padding:16px 14px}
  .dsh-kpi b{font-size:1.2rem}
  .dsh-kpi .ic{width:34px;height:34px;top:12px;right:12px}
  .dsh-kpi .ic .dn-svg{width:16px;height:16px}
  .dsh-wallet{padding:20px 18px}
  .dsh-wallet .bal{font-size:2.15rem}
  .dsh-card{padding:16px}
  .dsh-invite-t i{display:none}
  .dsh-invite-btn{margin-left:auto}
}
html[data-theme="light"] .dsh-wallet{background:radial-gradient(120% 140% at 100% 0%,#4F46E5 0%,#3730A3 40%,#1E2A5C 100%)}

/* ============================== V4.8 — Admin User 360 ============================== */
/* --card / --line were referenced across the admin sheet but never declared;
   declare them once so every admin component gets a real surface and rule colour. */
body.adminmode{--card:rgba(15,25,44,.92);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14)}
.u4{display:flex;flex-direction:column;min-width:0}
.u4-crumb{display:flex;gap:8px;align-items:center;margin:0 0 12px;font-size:.8rem;color:var(--muted)}
.u4-crumb b{color:var(--ink)}
.u4-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.u4-main,.u4-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.u4-ch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.u4-ch>b{font-size:1rem}
.u4-ch>a,.u4-ch>span{margin-left:auto}
.u4-ch>span+span{margin-left:0}
.u4-inline{display:inline}

/* hero */
.u4-hero{position:relative;overflow:hidden}
.u4-hero::before{content:"";position:absolute;inset:-80px auto auto -40px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.28),transparent 68%);pointer-events:none}
.u4-hero>*{position:relative}
.u4-id{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.u4-av{position:relative;flex:0 0 auto;width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:2.1rem;color:#fff;
  background:linear-gradient(140deg,#4F46E5,#7C3AED 60%,#A855F7);box-shadow:0 12px 30px rgba(124,58,237,.35)}
.u4-dot{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:50%;background:#16C784;border:3px solid #0F192C}
.u4-dot.off{background:#FF5C5C}
.u4-id-t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.u4-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.u4-name b{font-family:'Sora',system-ui,sans-serif;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.u4-uid{font-size:.76rem;color:var(--muted);padding:2px 8px;border:1px solid var(--line);border-radius:99px}
.u4-mail{font-size:.9rem;color:var(--ink-soft)}
.u4-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.u4-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.u4-menu{position:relative}
.u4-menu summary{list-style:none;cursor:pointer;display:inline-block}
.u4-menu summary::-webkit-details-marker{display:none}
.u4-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:250px;padding:6px;border-radius:12px;
  background:#101A2E;border:1px solid var(--line2);box-shadow:0 20px 50px rgba(0,0,0,.5);display:flex;flex-direction:column}
.u4-menu-list a,.u4-menu-list button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:8px;background:none;border:0;
  color:var(--ink);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer}
.u4-menu-list a:hover,.u4-menu-list button:hover{background:rgba(255,255,255,.07);text-decoration:none}
.u4-menu-list button.danger{color:#FF8B8B}
.u4-menu-list form{display:block}
.u4-facts{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.u4-facts b{color:var(--ink);font-weight:600}
.u4-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-right:4px;vertical-align:middle}
.u4-live.on{background:#16C784;box-shadow:0 0 0 3px rgba(22,199,132,.25)}

/* metric strip */
.u4-metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.u4-metric{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:14px 14px 12px;border-radius:14px;
  border:1px solid var(--line);background:var(--card);min-height:88px}
.u4-metric i{font-style:normal;font-size:.72rem;color:var(--muted);font-weight:600}
.u4-metric b{font-family:'Sora',system-ui,sans-serif;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15;position:relative;z-index:1}
.u4-metric u{text-decoration:none;font-size:.68rem;color:var(--muted);position:relative;z-index:1}
.u4-spark{position:absolute;right:0;bottom:0;width:58%;height:34px;opacity:.9}

.u4-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.u4-otabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.u4-otab{display:flex;flex-direction:column;gap:3px;padding:10px 11px;border-radius:11px;color:var(--ink);
  background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.u4-otab:hover{text-decoration:none;border-color:var(--c)}
.u4-otab i{font-style:normal;font-size:.68rem;color:var(--c);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u4-otab b{font-size:1.15rem;letter-spacing:-.02em}
.u4-tablewrap{overflow-x:auto}
.u4-table th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.u4-table td,.u4-table th{padding:8px 8px;vertical-align:middle}
.u4-table .btn.sm{padding:4px 10px;font-size:.74rem}
.u4-sum{cursor:pointer;color:var(--muted)}
.u4-wrows{display:flex;flex-direction:column;gap:6px}
.u4-wrow{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.u4-wrow i{font-style:normal;flex:1;font-size:.84rem;color:var(--ink-soft)}
.u4-wrow b{font-size:.95rem}
.u4-wic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.9rem;
  background:color-mix(in srgb,var(--c) 18%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}

/* risk ring */
.u4-ring-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.u4-ring{--p:0;--gc:#16C784;position:relative;flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  background:conic-gradient(var(--gc) calc(var(--p)*1%),rgba(255,255,255,.08) 0);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 30px color-mix(in srgb,var(--gc) 30%,transparent)}
.u4-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:#0F192C}
.u4-ring span{position:relative;z-index:1;text-align:center;line-height:1}
.u4-ring b{font-family:'Sora',system-ui,sans-serif;font-size:1.8rem;font-weight:800;display:block}
.u4-ring i{font-style:normal;font-size:.66rem;color:var(--muted);display:block;margin-top:3px}
.u4-checks{flex:1;min-width:140px;display:flex;flex-direction:column;gap:4px}
.u4-chk{font-size:.76rem;line-height:1.45}
.u4-chk.ok{color:var(--accent)}
.u4-chk.warn{color:#F5A60D}
.u4-risklbl{display:inline-block;margin-top:10px;letter-spacing:.06em}
.u4-drows{display:flex;flex-direction:column}
.u4-drow{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.8rem}
.u4-drow:last-child{border-bottom:0}
.u4-drow i{font-style:normal;color:var(--muted);flex:1}
.u4-drow b{font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.u4-yes{color:var(--accent)} .u4-no{color:#FF8B8B}
.u4-ev{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:.78rem;padding:6px 0;border-bottom:1px dashed var(--line)}
.u4-ev:last-child{border-bottom:0}

/* row of three */
.u4-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.u4-chart{display:block;width:100%;height:auto;margin:4px 0 10px}
.u4-spend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.u4-spend span{display:flex;flex-direction:column;gap:1px;min-width:0}
.u4-spend i{font-style:normal;font-size:.66rem;color:var(--muted)}
.u4-spend b{font-size:.95rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u4-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:26px 12px;
  border-radius:12px;border:1px dashed var(--line);font-size:1.3rem;min-height:150px}
.u4-empty b{font-size:.92rem}
.u4-empty i{font-style:normal;font-size:.76rem;color:var(--muted)}
.u4-empty.sm{min-height:0;padding:16px 12px;font-size:1.1rem}
.u4-brand{display:flex;justify-content:space-between;gap:8px;font-size:.82rem;margin-top:8px}
.u4-brand i{font-style:normal;font-size:.72rem}
.u4-tl{max-height:400px;overflow:auto;padding-right:4px}
.u4-tl-day{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted);margin:10px 0 4px}
.u4-tl-row{--c:#7E8CA8;position:relative;display:grid;grid-template-columns:44px 14px minmax(0,1fr);gap:6px;align-items:start;padding:5px 0;font-size:.78rem}
.u4-tl-row::before{content:"";position:absolute;left:50px;top:0;bottom:0;width:1px;background:var(--line)}
.u4-tl-t{color:var(--muted);font-variant-numeric:tabular-nums}
.u4-tl-dot{position:relative;z-index:1;width:9px;height:9px;border-radius:50%;background:var(--c);margin:5px 0 0 2px;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}
.u4-tl-x{min-width:0;overflow:hidden;text-overflow:ellipsis}
.u4-tl-row.order{--c:#6EA0FF}.u4-tl-row.paid{--c:#16C784}.u4-tl-row.wallet{--c:#F5A60D}.u4-tl-row.ticket{--c:#F472B6}
.u4-tl-row.view{--c:#A78BFA}.u4-tl-row.mail{--c:#22D3EE}.u4-tl-row.security{--c:#FF8B8B}.u4-tl-row.created{--c:#FBBF24}
.u4-noteform{display:flex;gap:8px;align-items:flex-start}
.u4-noteform textarea{flex:1;min-height:58px;resize:vertical}
.u4-note{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.u4-note-m{display:flex;justify-content:space-between;gap:8px;margin-top:4px}
.u4-ref{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.8rem}
.u4-ref:last-of-type{border-bottom:0}
.u4-ref-who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u4-ref-bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.u4-ref-bar i{display:block;height:100%;background:linear-gradient(90deg,#16C784,#22D3EE);border-radius:99px}
.u4-actrow{display:flex;gap:8px;flex-wrap:wrap}
.u4-adjust label{display:block;margin-bottom:6px}
.u4-adjust-row{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px}
.u4-adjust-row input{min-width:0}

@media(max-width:1180px){.u4-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.u4-three{grid-template-columns:1fr 1fr}}
@media(max-width:1000px){.u4-grid{grid-template-columns:1fr}.u4-two{grid-template-columns:1fr}.u4-side{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:720px){
  .u4-three,.u4-side{grid-template-columns:1fr}
  .u4-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u4-otabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .u4-spend{grid-template-columns:1fr 1fr}
  .u4-av{width:64px;height:64px;font-size:1.6rem}
  .u4-name b{font-size:1.2rem}
  .u4-acts{width:100%}
  .u4-menu-list{right:auto;left:0}
  .u4-adjust-row{grid-template-columns:1fr}
}

/* V4.8 — admin shell fixes: the category bar ends at ~164px, so the first 24px of
   every admin page (breadcrumbs, page titles) sat underneath it. Also the footer and
   support bubble carry no .site/.supportfab class, so the V4.7.2 hide rule never
   matched them. */
body.adminmode .adshell{padding-top:182px}
body.adminmode > footer,body.adminmode .sup-btn,body.adminmode .sup-modal{display:none!important}
@media(max-width:1000px){body.adminmode .adshell{padding-top:168px}}
@media(max-width:840px){.dash{grid-template-columns:1fr;gap:0}}
.u4 .card{min-width:0}
.u4-otabs{overflow:hidden}
@media(max-width:820px){
  .dsh-kpi .k{padding-right:40px}
  /* keep the support bubble clear of the account bottom nav */
  body:has(.botnav) .sup-btn{bottom:80px!important}
}

/* ============================== V4.9 — Promo hub (banner + clock + tickets, one block) ============================== */
.promohub{position:relative;display:flex;flex-direction:column;gap:18px;padding:22px 24px 24px;border-radius:20px;overflow:hidden;color:#fff;
  border:1px solid rgba(255,170,60,.4);background:radial-gradient(130% 200% at 0% 0%,#3A1E63 0%,#1B1140 45%,#0D0A26 100%);
  box-shadow:0 14px 44px rgba(10,5,35,.5)}
.promohub>*{position:relative}
.promohub .oa-grid,.promohub .oa-glow,.promohub .oa-shine{position:absolute}
.ph-top-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ph-body{flex:1;min-width:240px;display:flex;flex-direction:column;gap:5px}
.ph-title{margin:0;font-size:1.25rem;line-height:1.25;color:#fff}
.ph-sub{font-size:.78rem;color:rgba(255,255,255,.7)}
.ph-cta{align-self:center}
.promohub .promo3d{margin-top:2px}

/* ---- 3D flip clock ---- */
.ph-clock{display:flex;align-items:center;gap:6px;flex:0 0 auto;perspective:600px}
.ph-colon{font-weight:800;font-size:1.4rem;opacity:.55;margin-bottom:16px;animation:phBlink 1s steps(1) infinite}
@keyframes phBlink{50%{opacity:.15}}
.ph-flip{display:flex;flex-direction:column;align-items:center;gap:5px}
.ph-flip i{font-style:normal;font-size:.58rem;letter-spacing:1.6px;text-transform:uppercase;opacity:.75}
.ph-card{position:relative;width:58px;height:62px;border-radius:11px;transform-style:preserve-3d;
  font-family:'Sora',system-ui,sans-serif;font-weight:800;font-size:1.7rem;font-variant-numeric:tabular-nums;line-height:62px;text-align:center;
  box-shadow:0 10px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.ph-card b{font-weight:800}
.ph-top,.ph-bot,.ph-fold{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:linear-gradient(180deg,#2A1D55,#1A1240);
  backface-visibility:hidden}
.ph-top,.ph-fold-top{top:0;border-radius:11px 11px 0 0;border-bottom:1px solid rgba(0,0,0,.5)}
.ph-bot,.ph-fold-bot{bottom:0;border-radius:0 0 11px 11px;background:linear-gradient(180deg,#1A1240,#120C30)}
.ph-bot b,.ph-fold-bot b{position:relative;top:-31px;display:block}
.ph-fold{transform-origin:50% 100%;z-index:2}
.ph-fold-top{transform:rotateX(0)}
.ph-fold-bot{transform-origin:50% 0;transform:rotateX(90deg)}
.ph-flip.flip .ph-fold-top{animation:phFoldTop .3s ease-in forwards}
.ph-flip.flip .ph-fold-bot{animation:phFoldBot .3s .3s ease-out forwards}
@keyframes phFoldTop{to{transform:rotateX(-90deg)}}
@keyframes phFoldBot{to{transform:rotateX(0)}}
.ph-flip[data-fl="s"] .ph-top,.ph-flip[data-fl="s"] .ph-fold-top{background:linear-gradient(180deg,#5A3308,#3a2105)}
.ph-flip[data-fl="s"] .ph-bot,.ph-flip[data-fl="s"] .ph-fold-bot{background:linear-gradient(180deg,#3a2105,#251405)}
.promohub.soon .ph-card{animation:phUrgent 1s ease-in-out infinite}
.promohub.soon .oa-kicker{color:#FF8B8B}
@keyframes phUrgent{0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 0 rgba(255,92,92,.45)}50%{box-shadow:0 10px 24px rgba(0,0,0,.45),0 0 0 6px rgba(255,92,92,0)}}
.ph-over{font-weight:800;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.1)}

/* ---- pointer-tracked tilt + light on the tickets ---- */
.p3d.tilting{animation:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px) scale(1.03);transition:transform .08s linear}
.p3d.tilting::after{background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 55%)}
.p3d-code{cursor:copy;transition:background .15s}
.p3d-code:hover{background:rgba(255,255,255,.22)}
.p3d-code.copied{background:rgba(22,199,132,.35);border-style:solid;border-color:#16C784}

@media(max-width:920px){
  .promohub{padding:18px 16px 20px;gap:14px}
  .ph-top-row{gap:14px}
  .ph-body{flex:1 1 calc(100% - 170px)}
  .ph-clock{flex:1 1 100%;justify-content:center}
  .ph-cta{flex:1 1 100%;text-align:center}
  .ph-title{font-size:1.1rem}
}
@media(max-width:480px){.ph-card{width:50px;height:54px;font-size:1.45rem;line-height:54px}.ph-bot b,.ph-fold-bot b{top:-27px}}
@media(prefers-reduced-motion:reduce){.ph-colon,.promohub.soon .ph-card{animation:none}.ph-flip.flip .ph-fold{animation:none}}
.ph-fold{visibility:hidden}
.ph-flip.flip .ph-fold{visibility:visible}
@media(max-width:640px){
  .promohub .oa-stage{height:80px}
  .promohub .p3d{display:grid;grid-template-columns:auto auto 1fr;align-items:center}
  .promohub .p3d-pct{font-size:1.35rem}
  .promohub .p3d-range{font-size:.68rem;text-align:right}
}

/* ============================== V5.1 — MOBILE PASS ============================== */
/* Nine in ten visitors are on a phone. Everything below is scoped to phones and
   fixes the things the desktop-first rules broke there. */

/* --- storefront: the cart page's "leave room for the sticky checkout bar" rule
       was written against .container.mt3, which every page uses — so the home
       page had ~100px of dead space under the category chips and under the
       coin strip. It is now scoped to the cart page only. --- */
@media(max-width:820px){.cartpage{padding-bottom:96px}}

/* --- account dashboard: "More actions" opened a dropdown inside a wallet card
       that has overflow:hidden, so on phones only a sliver showed. It now
       unfolds inline as a two-column list. --- */
@media(max-width:960px){
  .dsh-more{flex:1 1 100%}
  .dsh-more summary{width:100%;justify-content:center}
  .dsh-more[open] summary{background:rgba(255,255,255,.18)}
  .dsh-menu{position:static;margin-top:8px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:4px;
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
  .dsh-menu a{color:#fff;font-size:.82rem}
  .dsh-menu .dn-svg{color:rgba(255,255,255,.7)}
}
@media(max-width:380px){.dsh-menu{grid-template-columns:1fr}}

/* --- admin: section menu as a bottom sheet on phones --- */
.lxsheet{position:fixed;inset:0;z-index:960}
.lxsheet[hidden]{display:none}
.lxsheet-bd{position:absolute;inset:0;background:rgba(3,7,16,.66)}
.lxsheet-p{position:absolute;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:8px 12px calc(14px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;
  background:linear-gradient(165deg,#111D30,#0A1220);border:1px solid rgba(148,163,184,.16);border-bottom:0;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:lxsUp .26s cubic-bezier(.2,.8,.3,1)}
@keyframes lxsUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.lxsheet-grip{display:block;width:42px;height:4px;border-radius:99px;background:rgba(148,163,184,.35);margin:2px auto 10px}
.lxsheet-h{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;border-bottom:1px solid rgba(148,163,184,.12);margin-bottom:6px}
.lxsheet-h b{font-size:1rem;color:#fff}
.lxsheet-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--nc,#6EA0FF);color:#050914;font-size:1rem;box-shadow:0 0 16px color-mix(in srgb,var(--nc,#6EA0FF) 55%,transparent)}
.lxsheet-x{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.16);
  background:rgba(255,255,255,.04);color:#CBD5E1;font-size:.9rem;cursor:pointer}
.lxsheet-list{display:flex;flex-direction:column;gap:2px}
.lxsheet-list .lxmenu-i{padding:13px 12px;font-size:.95rem;min-height:48px}
.lxsheet-list .lxmenu-i.on{background:color-mix(in srgb,var(--nc,#6EA0FF) 18%,transparent);box-shadow:inset 3px 0 0 var(--nc,#6EA0FF)}
.lxsheet-list .lxmenu-ic{width:32px;height:32px;font-size:1rem}
body.lxsheet-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.lxsheet-p{animation:none}}

@media(max-width:1000px){
  /* 1. the admin page can never be wider than the phone. A grid track is
        minmax(auto,1fr) by default, so one wide table or an auto-fill KPI grid
        pushed the whole page to ~600px, which html{overflow-x:hidden} then cut
        off — that is why nothing would "slide". */
  body.adminmode .adshell{padding-left:12px;padding-right:12px;max-width:100vw;overflow-x:clip}
  body.adminmode .adshell>*{min-width:0;max-width:100%}
  body.adminmode .card{min-width:0;max-width:100%;padding:16px 14px;overflow-wrap:anywhere}
  body.adminmode .grid{gap:12px}
  body.adminmode .grid.c2,body.adminmode .grid.c3,body.adminmode .grid.c4,body.adminmode .grid.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.adminmode .ac-kpis,body.adminmode .dash2-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.adminmode .ac-kpi{padding:12px;min-width:0}
  body.adminmode .ac-kpi b{font-size:1.15rem}
  body.adminmode h1{font-size:1.32rem;line-height:1.2}
  body.adminmode h2{font-size:1.08rem}
  body.adminmode .op-pipe{min-width:max-content}

  /* 2. tables slide inside their own card instead of stretching the page */
  body.adminmode table.list{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;font-size:.84rem}
  body.adminmode table.list>thead,body.adminmode table.list>tbody{display:table;width:100%;min-width:max-content}
  body.adminmode table.list th,body.adminmode table.list td{white-space:nowrap;padding:10px}
  body.adminmode .u4-tablewrap,body.adminmode .card[style*="overflow-x:auto"]{scrollbar-width:thin}

  /* 3. top bar */
  .adtop{padding:0 12px;gap:10px;height:56px}
  .adtop-search{padding:8px 10px;min-width:0}
  .adtop-search kbd{display:none}
  .adtop-me{padding-left:4px;margin-left:0}
  .adtop-right{gap:4px}

  /* 4. section tiles: one compact scroller, page starts directly under it */
  .lxnav{top:56px;padding:8px 12px;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .lxnav-item{scroll-snap-align:center}
  .lxbtn{width:72px;padding:8px 6px 7px;gap:4px;border-radius:13px}
  .lxbtn-ic{width:30px;height:30px;border-radius:9px;font-size:.92rem}
  .lxbtn-t{font-size:.64rem}
  .lxbtn-b{top:5px;right:6px}
  .lxbtn:hover{transform:none}
  .lxnav-item.open .lxmenu{display:none}
  body.adminmode .adshell,body.adminmode .lxshell{padding-top:140px}

  /* 5. thumb-sized controls; 16px inputs stop iOS zooming the page on focus */
  body.adminmode .btn.sm{padding:9px 14px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  body.adminmode input,body.adminmode select,body.adminmode textarea{font-size:16px}
  body.adminmode form[style*="display:flex"]>input,body.adminmode form[style*="display:flex"]>select{flex:1 1 150px;min-width:0;max-width:none!important}
  body.adminmode .u4-menu-list a,body.adminmode .u4-menu-list button{padding:12px 11px;font-size:.9rem}

  /* 6. users list */
  .ur-head{flex-wrap:wrap}
  .ur-360{flex:1 1 100%}
  .ur-acts .btn{flex:1 1 calc(50% - 4px)}
  .ur-adjust{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ur-adjust .btn{grid-column:1/-1}

  /* 7. User 360: the Actions menu unfolds in place (the hero clips overflow) */
  .u4-acts{width:100%}
  .u4-acts>.btn,.u4-acts>form{flex:1 1 calc(50% - 4px)}
  .u4-acts>form .btn{width:100%}
  .u4-menu{flex:1 1 100%}
  .u4-menu summary{width:100%}
  .u4-menu summary .btn{width:100%}
  .u4-menu-list{position:static;margin-top:6px;min-width:0;box-shadow:none}
  .u4-hero{overflow:visible}
  .u4-id-t{min-width:0}
  .u4-mail{overflow-wrap:anywhere}
}
@media(max-width:400px){
  body.adminmode .ac-kpis{grid-template-columns:1fr 1fr}
  .ur-acts .btn{flex-basis:100%}
}

/* --- users list card (all sizes) --- */
.ur-head{display:flex;gap:12px;align-items:flex-start}
.ur-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ur-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ur-name b{font-size:1rem}
.ur-name .tag{font-size:.66rem;padding:2px 8px}
.ur-email{font-size:.86rem;color:var(--ink-soft);overflow-wrap:anywhere}
.ur-meta{line-height:1.5}
.ur-360{flex:0 0 auto;align-self:flex-start;white-space:nowrap}
.ur-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.ur-adjust{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ur-adjust input[name=amount]{max-width:120px}
.ur-adjust input[name=why]{max-width:240px}
/* security centre: cluster tables and the rules form stack on phones */
@media(max-width:760px){body.adminmode .grid.c2.fs-stack{grid-template-columns:1fr}}

/* ============================================================
   V5.2 — Unified customer feedback & ratings
   ============================================================ */
.fb-stars{display:inline-flex;gap:2px;line-height:1;vertical-align:middle}
.fb-stars i{position:relative;font-style:normal;font-size:1.05rem;color:var(--border);--f:0%}
.fb-stars i::before{content:'★'}
.fb-stars i::after{content:'★';position:absolute;left:0;top:0;width:var(--f);overflow:hidden;color:var(--amber);white-space:nowrap}
.fb-stars.lg i{font-size:1.5rem}
.fb-stars.sm i{font-size:.85rem}
.fb-h{font-size:1.02rem;margin:0 0 6px}
.fb-chart-empty{color:var(--muted);font-size:.9rem;padding:22px 0;text-align:center;border:1px dashed var(--border);border-radius:12px}
/* --- page --- */
.fb-page{padding-bottom:20px}
.fb-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin-top:18px;padding:34px 36px;border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,var(--surface),var(--bg))}
.fb-hero h1{margin:0 0 6px}
.fb-hero .lede{color:var(--ink-soft);margin:0 0 18px;font-size:1.05rem}
.fb-score{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.fb-score-n{font-family:'Sora',sans-serif;font-weight:800;font-size:4.2rem;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.fb-score-n small{font-size:1.1rem;color:var(--muted);margin-left:6px;font-weight:600;letter-spacing:0}
.fb-score-r{display:flex;flex-direction:column;gap:4px}
.fb-score-c{color:var(--ink-soft);font-size:.95rem} .fb-score-c b{color:var(--ink)}
.fb-score-rec{font-size:.9rem;color:var(--muted)} .fb-score-rec b{color:var(--accent);font-size:1.05rem}
.fb-empty-hero{padding:20px 22px;border:1px dashed var(--border);border-radius:14px}
.fb-empty-hero b{font-size:1.15rem} .fb-empty-hero p{margin:4px 0 0}
.fb-dist{display:grid;gap:8px}
.fb-dist-row{display:grid;grid-template-columns:40px 1fr 92px;align-items:center;gap:12px;font-size:.9rem}
.fb-dist-l{color:var(--ink-soft);font-weight:600;white-space:nowrap} .fb-dist-l i{color:var(--amber);font-style:normal}
.fb-dist-bar{display:block;height:10px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--border)}
.fb-dist-bar b{display:block;height:100%;background:linear-gradient(90deg,var(--amber),#FFB454);border-radius:99px;transition:width .6s ease}
.fb-dist-v{display:flex;justify-content:space-between;gap:8px;white-space:nowrap} .fb-dist-v b{color:var(--ink)} .fb-dist-v i{color:var(--muted);font-style:normal;font-size:.8rem}
.fb-panels{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:16px;margin-top:16px}
.fb-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;min-width:0}
.fb-panel.wide{min-width:0}
.fb-panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:8px}
.fb-trendwrap{margin-top:16px}
.fb-attrs{display:grid;gap:12px;margin-top:14px}
.fb-attr{display:grid;grid-template-columns:150px 1fr 120px;gap:12px;align-items:center;font-size:.9rem}
.fb-attr-l{color:var(--ink-soft)}
.fb-attr-bar{display:block;height:8px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.fb-attr-bar b{display:block;height:100%;background:var(--accent);border-radius:99px}
.fb-attr.na .fb-attr-bar{opacity:.5}
.fb-attr-v{text-align:right;white-space:nowrap} .fb-attr-v b{font-size:1rem;color:var(--ink)} .fb-attr-v i{color:var(--muted);font-style:normal;font-size:.78rem;margin-left:4px}
.fb-ring{display:block;margin:6px auto 8px}
.fb-ring-big{font-family:'Sora',sans-serif;font-weight:800;font-size:26px;fill:var(--ink)}
.fb-ring-sub{font-size:11px;fill:var(--muted)}
.fb-trend{width:100%;height:auto;display:block}
.fb-grid{stroke:var(--border);stroke-width:1}
.fb-axis{fill:var(--muted);font-size:11px}
.fb-vol{fill:var(--info);opacity:.45}
.fb-dot{fill:var(--amber);stroke:var(--surface);stroke-width:2}
.fb-tabs{display:flex;gap:4px;background:var(--surface2);padding:4px;border-radius:10px;border:1px solid var(--border)}
.fb-tab{background:none;border:0;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;padding:7px 12px;border-radius:7px;cursor:pointer}
.fb-tab.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.fb-list{margin-top:40px}
.fb-filters{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px}
.fb-filters input,.fb-filters select{padding:9px 12px;border-radius:9px;font-size:.9rem}
.fb-clear{grid-column:1/-1;justify-self:end}
.fb-list-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
.fb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fb-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fb-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.fb-verified{font-size:.72rem;font-weight:700;color:var(--accent);background:rgba(22,199,132,.12);padding:3px 9px;border-radius:99px;white-space:nowrap}
.fb-card-c{margin:0;color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.fb-card-f{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.fb-card-f span{display:flex;flex-direction:column;gap:2px} .fb-card-f b{font-size:.92rem} .fb-card-f i{font-style:normal;color:var(--muted);font-size:.78rem}
.fb-card-b{font-size:.75rem;font-weight:600;color:var(--ink-soft);background:var(--surface2);padding:4px 10px;border-radius:99px;white-space:nowrap;border:1px solid var(--border)}
.fb-empty{text-align:center;padding:40px 20px;border:1px dashed var(--border);border-radius:16px}
.fb-pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.fb-pg{padding:8px 13px;border-radius:9px;border:1px solid var(--border);color:var(--ink-soft);font-size:.88rem;font-weight:600;background:var(--surface)}
.fb-pg:hover{text-decoration:none;border-color:var(--muted);color:var(--ink)}
.fb-pg.on{background:var(--amber);color:#1A0F00;border-color:var(--amber)} .fb-pg.off{opacity:.4} .fb-pg.dots{border:0;background:none}
.fb-cta{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:28px 32px;border-radius:18px;border:1px solid var(--border);background:var(--surface2)}
/* --- form --- */
.fb-form-wrap{max-width:1040px;padding-bottom:40px}
.fb-form-grid{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:start}
.fb-form-side{position:sticky;top:84px}
.fb-side-card{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:16px;background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--border)}
.fb-side-k{font-size:.78rem;color:var(--muted)} .fb-side-brand{font-family:'Sora',sans-serif;font-size:1.35rem} .fb-side-v{color:var(--ink-soft)} .fb-side-m{font-size:.78rem;color:var(--muted);margin-top:6px}
.fb-side-card .tag{align-self:flex-start}
.fb-form{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 30px}
.fb-q{padding:20px 0;border-top:1px solid var(--border);border-radius:10px;transition:background .3s}
.fb-q:first-of-type{border-top:0}
.fb-q h2{font-size:1.02rem;margin:0 0 12px}
.fb-q.required h2::after{content:' *';color:var(--amber)}
.fb-q.missing{background:rgba(240,97,109,.08);box-shadow:0 0 0 2px rgba(240,97,109,.4)}
.fb-qgrid{display:grid;gap:14px}
.fb-qrow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.fb-qrow label{margin:0;font-size:.92rem;color:var(--ink-soft)}
.fb-starin{display:inline-flex;align-items:center;gap:2px;flex-direction:row-reverse;justify-content:flex-end}
.fb-starin input{position:absolute;opacity:0;width:1px;height:1px}
.fb-starin label{font-size:1.8rem;line-height:1;color:var(--border);cursor:pointer;padding:2px;border-radius:6px;transition:transform .1s,color .1s;user-select:none}
.fb-starin label .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fb-starin label:hover,.fb-starin label:hover~label{color:var(--amber);transform:scale(1.08)}
.fb-starin input:checked~label{color:var(--amber)}
.fb-starin input:focus-visible+label{outline:3px solid var(--amber);outline-offset:2px}
.fb-starin-t{order:-1;margin-left:10px;min-width:74px;font-size:.8rem;color:var(--muted)}
.fb-q.required .fb-starin label{font-size:2.3rem}
.fb-chips{display:flex;gap:8px;flex-wrap:wrap}
.fb-chips input{position:absolute;opacity:0;width:1px;height:1px}
.fb-chips label{padding:9px 18px;border-radius:99px;border:1.5px solid var(--border);cursor:pointer;font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.fb-chips.big label{padding:13px 22px;font-size:.95rem}
.fb-chips input:checked+label{border-color:var(--accent);color:var(--accent);background:rgba(22,199,132,.1)}
.fb-chips input:focus-visible+label{outline:3px solid var(--amber);outline-offset:2px}
.fb-nps{display:grid;grid-template-columns:repeat(11,1fr);gap:6px}
.fb-nps input{position:absolute;opacity:0;width:1px;height:1px}
.fb-nps label{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;border:1.5px solid var(--border);cursor:pointer;font-weight:700;color:var(--ink-soft)}
.fb-nps input:checked+label{background:var(--amber);color:#1A0F00;border-color:var(--amber)}
.fb-nps input:focus-visible+label{outline:3px solid var(--amber);outline-offset:2px}
.fb-nps-ends{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-top:6px}
.fb-count{text-align:right;margin-top:4px}
.fb-submit{display:flex;gap:10px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--border)}
.fb-done{text-align:center;max-width:640px;margin:30px auto;padding:44px 30px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.fb-done-ic{width:64px;height:64px;border-radius:50%;background:rgba(22,199,132,.15);color:var(--accent);font-size:1.8rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.fb-pick{display:grid;gap:10px}
.fb-pick-i{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--ink)}
.fb-pick-i:hover{text-decoration:none;border-color:var(--muted)} .fb-pick-i i{font-style:normal;color:var(--muted);margin-left:6px}
.fb-pick-s{font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:center} .fb-pick-s.cta{color:var(--accent);font-weight:700}
/* --- purchases / order integration --- */
.fb-rate-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--border)}
.fb-rate-row .l{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem}
/* --- card page block --- */
.fb-brandrate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 6px}
.fb-brandrate b{font-size:1.05rem} .fb-brandrate .small{color:var(--muted)}
.fb-brandattrs{margin-top:8px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.fb-brandattrs .fb-attr{grid-template-columns:130px 1fr 96px;font-size:.84rem} .fb-brandattrs .fb-attrs{gap:8px;margin-top:0}
/* --- homepage --- */
.fb-home{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.fb-home-cards{display:grid;gap:10px}
.fb-home-card{padding:14px 16px;border-radius:12px;background:var(--surface2);border:1px solid var(--border);font-size:.92rem}
.fb-home-card p{margin:6px 0 4px} .fb-home-card i{font-style:normal;color:var(--muted);font-size:.8rem}
/* --- admin --- */
.fbadm-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.fbadm-kpi{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface)} .fbadm-kpi .small{display:block} .fbadm-kpi b{font-size:1.45rem;letter-spacing:-.3px}
.fbadm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .fbadm-grid .card{min-width:0}
.fbadm-grid .full{grid-column:1/-1}
.fbadm-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0} .fbadm-filters input,.fbadm-filters select{width:auto;min-width:130px;padding:8px 10px;font-size:.88rem}
.fbadm-insight{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--border);font-size:.9rem} .fbadm-insight:last-child{border:0}
.fbadm-insight i{font-style:normal} .fbadm-insight.up i{color:var(--accent)} .fbadm-insight.dn i{color:var(--danger)} .fbadm-insight.flat i{color:var(--muted)}
.fb-hbars{display:grid;gap:8px} .fb-hbar{display:grid;grid-template-columns:150px 1fr 90px;gap:10px;align-items:center;font-size:.86rem}
.fb-hbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fb-hbar-bar{display:block;height:9px;border-radius:99px;background:var(--surface2);border:1px solid var(--border);overflow:hidden} .fb-hbar-bar b{display:block;height:100%;border-radius:99px}
.fb-hbar-v{text-align:right;white-space:nowrap} .fb-hbar-v i{color:var(--muted);font-style:normal;font-size:.76rem;margin-left:4px}
.fb-npswrap{text-align:center} .fb-gauge{width:180px;height:auto;display:block;margin:0 auto}
.fb-npsbar{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--surface2);margin:8px 0}
.fb-npsseg.p{background:var(--accent)} .fb-npsseg.n{background:var(--amber)} .fb-npsseg.d{background:var(--danger)}
.fb-npslegend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)} .fb-npslegend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.fb-npslegend .p{background:var(--accent)} .fb-npslegend .n{background:var(--amber)} .fb-npslegend .d{background:var(--danger)}
.fbadm-src{font-size:.7rem;padding:2px 8px;border-radius:99px;background:var(--surface2);color:var(--ink-soft);border:1px solid var(--border);white-space:nowrap}
.fbadm-tbl td{white-space:nowrap} .fbadm-tbl .cm{white-space:normal;min-width:220px;max-width:340px;color:var(--ink-soft);font-size:.84rem}
.fbadm-tbl .r{font-weight:700;color:var(--amber)} .fbadm-tbl .acts{display:flex;gap:4px;flex-wrap:wrap}
.fbadm-tbl .acts button,.fbadm-tbl .acts a{font-size:.72rem;padding:4px 8px}
.fbadm-bulk{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);margin:10px 0}
.fbadm-bulk select{width:auto}
.fbadm-detail{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fbadm-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:.9rem} .fbadm-kv dt{color:var(--muted)} .fbadm-kv dd{margin:0;overflow-wrap:anywhere}
.fbadm-steps{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 16px}
.fbadm-steps span{padding:6px 12px;border-radius:99px;border:1px solid var(--border);font-size:.8rem;color:var(--muted)} .fbadm-steps span.on{background:var(--amber);color:#1A0F00;border-color:var(--amber);font-weight:700} .fbadm-steps span.done{color:var(--accent);border-color:var(--accent)}
.fbadm-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.fbadm-map label{display:block;font-size:.8rem;color:var(--muted);margin:0 0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fbadm-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0}
.fbadm-sum span{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column} .fbadm-sum b{font-size:1.3rem}
.fbadm-sum .ok b{color:var(--accent)} .fbadm-sum .warn b{color:var(--amber)} .fbadm-sum .bad b{color:var(--danger)}
.fbadm-rowbad{background:rgba(240,97,109,.08)} .fbadm-rowdup{background:rgba(247,147,26,.08)}
.fbadm-comp{display:grid;gap:6px} .fbadm-comp div{display:grid;grid-template-columns:160px 1fr 44px;gap:10px;align-items:center;font-size:.84rem}
.fbadm-comp span{height:7px;border-radius:99px;background:var(--surface2);overflow:hidden;display:block} .fbadm-comp span b{display:block;height:100%;background:var(--info)}
@media(max-width:1000px){
  .fb-hero{grid-template-columns:1fr;gap:22px;padding:26px 22px}
  .fb-panels{grid-template-columns:1fr 1fr} .fb-panel.wide{grid-column:1/-1}
  .fb-cards{grid-template-columns:1fr 1fr}
  .fb-filters{grid-template-columns:1fr 1fr}
  .fbadm-grid{grid-template-columns:1fr} .fbadm-detail{grid-template-columns:1fr}
}
@media(max-width:720px){
  .fb-score-n{font-size:3.4rem}
  .fb-panels{grid-template-columns:1fr}
  .fb-cards{grid-template-columns:1fr}
  .fb-filters{grid-template-columns:1fr}
  .fb-form-grid{grid-template-columns:1fr} .fb-form-side{position:static} .fb-form{padding:20px 16px}
  .fb-qrow{grid-template-columns:1fr;gap:6px} .fb-starin{flex-direction:row-reverse;justify-content:flex-end} .fb-starin label{font-size:2rem}
  .fb-q.required .fb-starin label{font-size:2.5rem}
  .fb-nps{grid-template-columns:repeat(6,1fr)} .fb-nps label{height:42px}
  .fb-attr{grid-template-columns:110px 1fr 100px}
  .fb-dist-row{grid-template-columns:34px 1fr 84px}
  .fb-home{grid-template-columns:1fr}
  .fb-hbar{grid-template-columns:100px 1fr 80px}
  .fbadm-kv{grid-template-columns:1fr} .fbadm-kv dt{margin-top:6px}
  .fb-panel-head .fb-tabs{width:100%;overflow-x:auto}
  .fb-cta{padding:22px 20px}
}
/* V5.2b — feedback nav pill, hero rating strip, review card layout */
.navfb{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(90deg,#16C784,#22D3A6);color:#062015!important;border-radius:99px;padding:7px 14px;font-weight:700;font-size:.85rem;white-space:nowrap;box-shadow:0 4px 14px rgba(22,199,132,.25)}
.navfb svg{width:15px;height:15px;fill:#062015} .navfb b{background:rgba(6,32,21,.16);border-radius:99px;padding:1px 8px;font-size:.78rem}
.navfb:hover{filter:brightness(1.06);text-decoration:none}
html[data-theme="light"] .navfb{color:#062015!important}
@media(max-width:920px){.navlinks .nl-feedback{order:9;margin-top:10px;justify-content:center;padding:12px 16px}}
.herorating{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:12px 18px 12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(4px);transition:border-color .15s,background .15s}
.herorating:hover{text-decoration:none;border-color:rgba(247,147,26,.7);background:rgba(255,255,255,.09)}
.hr-tiles{display:inline-flex;gap:3px} .hr-tiles i{position:relative;width:26px;height:26px;border-radius:6px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;--f:0%;overflow:hidden}
.hr-tiles i::before{content:'';position:absolute;inset:0;width:var(--f);background:linear-gradient(90deg,#F7931A,#FFB454)} .hr-tiles i::after{content:'★';position:relative;color:#fff;font-size:.95rem;line-height:1}
.hr-t{font-size:.95rem;color:#fff} .hr-t b{font-family:'Sora',sans-serif;font-size:1.05rem} .hr-t em{font-style:normal;font-weight:800;color:#FFB454}
.hr-c{font-size:.8rem;color:rgba(255,255,255,.72)} .hr-c b{color:#fff} .hr-arrow{margin-left:auto;font-size:1.3rem;color:rgba(255,255,255,.6)}
html[data-theme="light"] .herorating{background:#fff;border-color:var(--border);color:var(--ink)} html[data-theme="light"] .hr-t,html[data-theme="light"] .hr-c b{color:var(--ink)} html[data-theme="light"] .hr-c{color:var(--muted)} html[data-theme="light"] .hr-tiles i{background:#e8edf5}
@media(max-width:640px){.herorating{gap:10px;padding:10px 12px;width:100%}.hr-tiles i{width:22px;height:22px}.hr-arrow{display:none}}
.fb-card-h{display:flex;gap:12px;align-items:flex-start}
.fb-av{width:40px;height:40px;border-radius:50%;flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Sora',sans-serif;background:linear-gradient(135deg,rgba(247,147,26,.25),rgba(22,199,132,.25));color:var(--ink);border:1px solid var(--border)}
.fb-card-who{display:flex;flex-direction:column;gap:3px;min-width:0} .fb-card-who>b{font-size:1rem} .fb-card-who .fb-verified{align-self:flex-start}
.fb-card-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fb-card-rate i{font-style:normal;font-weight:700;font-size:.82rem;color:var(--amber)} .fb-card-rate em{font-style:normal;font-size:.78rem;color:var(--muted)}
.fb-card-bought{font-size:.82rem;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .fb-worked{color:var(--accent);font-weight:600;font-size:.76rem}
.fb-card .fb-card-c{padding-top:4px}
/* admin quick add + bulk paste */
.fbq-grid{display:grid;grid-template-columns:1.2fr .6fr 1fr;gap:10px} .fbq-grid .full{grid-column:1/-1}
.fbq-stars .fb-starin label{font-size:2rem}
.fbq-tabs{display:flex;gap:6px;margin-bottom:12px} .fbq-tabs a{padding:9px 16px;border-radius:99px;border:1px solid var(--border);color:var(--ink-soft);font-weight:600;font-size:.9rem} .fbq-tabs a.on{background:var(--amber);color:#1A0F00;border-color:var(--amber)} .fbq-tabs a:hover{text-decoration:none}
.fbq-tpl{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;white-space:pre-wrap;color:var(--ink-soft)}
.fbq-paste{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;min-height:260px}
.fbq-recent{display:grid;gap:8px} .fbq-recent div{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--surface2);font-size:.85rem}
@media(max-width:760px){.fbq-grid{grid-template-columns:1fr}}
/* V5.2c — storefront nav fit + quick-add attribute stars */
.navlinks>*{white-space:nowrap}
@media(min-width:921px) and (max-width:1340px){.navlinks{gap:11px}.navsearch{max-width:300px}.navfb span{display:none}.navfb{padding:7px 11px}.navref{padding:7px 11px}}
@media(min-width:921px) and (max-width:1120px){.navlinks .nl-support,.navlinks .nl-deals{display:none}.navsearch{max-width:220px}}
.fbq-attrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 18px}
.fbq-attr{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--border)}
.fbq-attr>span{flex:1;font-size:.86rem;color:var(--ink-soft)} .fbq-attr .fb-starin label{font-size:1.45rem} .fbq-attr .fb-starin-t{display:none}
.fbq-clear{background:none;border:0;color:var(--muted);font-size:1rem;cursor:pointer;padding:0 4px;line-height:1} .fbq-clear:hover{color:var(--danger)}
/* V5.2d — segmented donut charts */
.fb-donutwrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px}
.fb-donut{display:block;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.fb-donut-big{font-family:'Sora',sans-serif;font-weight:800;font-size:27px;fill:var(--ink);letter-spacing:-.5px}
.fb-donut-sub{font-size:10.5px;fill:var(--muted);letter-spacing:.2px}
.fb-legend{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:5px}
.fb-legend li{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center;font-size:.82rem;padding:5px 8px;border-radius:8px;background:var(--surface2);border:1px solid var(--border)}
.fb-legend i{width:10px;height:10px;border-radius:3px;display:block} .fb-legend span{color:var(--ink-soft)} .fb-legend b{color:var(--ink);font-variant-numeric:tabular-nums} .fb-legend em{font-style:normal;color:var(--muted);min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
/* V5.3 — four promo tiers + rolling clock restart */
.promohub.four .promo3d{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.promohub.four .promo3d{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.promohub.four .promo3d{grid-template-columns:1fr}}
.p3d.t4{background:linear-gradient(135deg,#6B1D3A,#2A0B18)}
.p3d-tier{position:absolute;top:8px;right:10px;font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55)}
.promohub.restart .ph-clock{animation:phRestart 1.6s ease}
@keyframes phRestart{0%{filter:brightness(1)}20%{filter:brightness(1.9) drop-shadow(0 0 18px rgba(247,147,26,.9))}100%{filter:brightness(1)}}
.adtop-ist{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--muted);padding:6px 10px;border:1px solid var(--border);border-radius:99px;white-space:nowrap} .adtop-ist b{color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:760px){.adtop-ist{display:none}}
/* ================= V5.4 — mobile drawer ================= */
.mdrawer{display:none}
@media(max-width:920px){
  html .navlinks{display:none!important}
  .mdrawer{display:flex;flex-direction:column;gap:12px;position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:80;overflow-y:auto;padding:18px 16px 28px;
    background:#0B111E;border-left:1px solid #202B41;box-shadow:-18px 0 50px rgba(0,0,0,.55);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);color:#E7EDF6}
  html[data-theme="light"] .mdrawer{background:#F7F9FC;border-left-color:#E3E8F0;color:#17202E}
  body.menu-open .mdrawer{transform:translateX(0)}
  .md-head{display:flex;align-items:center;gap:10px;padding:2px 2px 6px}
  .md-logo svg{width:42px;height:42px;display:block}
  .md-brand{display:flex;flex-direction:column;line-height:1.15} .md-brand b{font-family:'Sora',sans-serif;font-size:1.15rem} .md-brand i{font-style:normal;font-size:.76rem;color:var(--muted)}
  .md-close{margin-left:auto;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:inherit;font-size:1.05rem;cursor:pointer}
  html[data-theme="light"] .md-close{background:#E9EEF5}
  .md-cur{position:relative;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border);margin:0;font-size:.95rem;cursor:pointer}
  .md-cur select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0} .md-cur-flag{font-size:1.2rem} .md-cur b{font-weight:700} .md-cur-n{color:var(--ink-soft)} .md-chev{margin-left:auto;font-style:normal;color:var(--muted);font-size:1.1rem;line-height:.6}
  .md-group{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:4px 6px}
  .md-group a{display:flex;align-items:center;gap:12px;padding:13px 10px;font-size:1rem;font-weight:500;color:inherit;border-bottom:1px solid var(--border)} .md-group a:last-child{border-bottom:0} .md-group a:hover{text-decoration:none}
  .md-group a i{margin-left:auto;font-style:normal;color:var(--muted);font-size:1.25rem;line-height:1}
  .md-ic{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 32px}
  .md-ic.g{background:rgba(22,199,132,.16)} .md-ic.v{background:rgba(139,92,246,.18)} .md-ic.a{background:rgba(247,147,26,.18)} .md-ic.b{background:rgba(59,130,246,.18)} .md-ic.w{background:rgba(255,255,255,.08)} .md-ic.o{background:rgba(249,115,22,.18)}
  html[data-theme="light"] .md-ic.w{background:#E9EEF5}
  .md-badge,.md-pill{margin-left:auto;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:99px;background:rgba(22,199,132,.16);color:var(--accent);font-style:normal} .md-group a .md-badge+i,.md-group a .md-pill+i{margin-left:8px}
  .md-btn{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;padding:15px 18px;border-radius:99px;font-weight:700;font-size:1rem;color:inherit;border:1.5px solid var(--border);background:var(--surface)}
  .md-btn span{position:absolute;right:18px;font-size:1rem;opacity:.85} .md-btn:hover{text-decoration:none}
  .md-btn.amber{background:linear-gradient(90deg,#F97316,#F7931A,#FBBF24);color:#1A0F00;border-color:transparent;box-shadow:0 10px 26px rgba(247,147,26,.35)}
  .md-rate{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:14px 14px;border-radius:14px;background:rgba(22,199,132,.08);border:1px solid rgba(22,199,132,.35);color:inherit} .md-rate:hover{text-decoration:none}
  .md-rate-ic{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.3rem}
  .md-rate-t{display:flex;flex-direction:column} .md-rate-t b{font-size:1.02rem} .md-rate-t i{font-style:normal;color:var(--accent);font-size:.9rem}
  .md-rate-s{display:flex;flex-direction:column;align-items:flex-end;gap:4px} .md-rate-s>i{font-style:normal;font-size:.76rem;color:var(--muted)} .md-rate-s>i b{color:var(--accent)}
  .md-tiles{display:inline-flex;gap:3px} .md-tiles i{position:relative;width:24px;height:24px;border-radius:5px;background:rgba(255,255,255,.12);display:inline-flex;align-items:center;justify-content:center;--f:0%;overflow:hidden}
  .md-tiles i::before{content:'';position:absolute;inset:0;width:var(--f);background:var(--accent)} .md-tiles i::after{content:'★';position:relative;color:#fff;font-size:.9rem}
  html[data-theme="light"] .md-tiles i{background:#DCE3EC}
  .md-why{padding:14px 14px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--border)} .md-why>b{font-size:.95rem;display:block;margin-bottom:12px}
  .md-why div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center} .md-why span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-soft)}
  .md-why i{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:1rem;border:1.5px solid}
  .md-why .c1{color:#60A5FA;border-color:#60A5FA} .md-why .c2{color:var(--accent);border-color:var(--accent)} .md-why .c3{color:var(--amber);border-color:var(--amber)} .md-why .c4{color:#FBBF24;border-color:#FBBF24}
  .md-theme{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--border);color:inherit;font:inherit;font-size:1rem;cursor:pointer;text-align:left}
  .md-switch{margin-left:auto;width:54px;height:30px;border-radius:99px;background:var(--amber);position:relative;transition:background .2s} .md-switch i{position:absolute;top:3px;left:27px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s}
  .md-theme.off .md-switch{background:#94A3B8} .md-theme.off .md-switch i{left:3px}
  .md-out{text-align:center;color:var(--muted);font-size:.85rem;padding:6px}
}
/* ================= V5.4 — poster-style 3D offer (ph2) ================= */
.ph2{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:20px;align-items:center;padding:34px 40px;border-radius:26px;overflow:hidden;color:#fff;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 0%,#1B1540 0%,#0B0F26 45%,#070A17 100%);border:1px solid rgba(120,110,255,.25);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.ph2-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ph2-grid{position:absolute;inset:auto -10% -30% -10%;height:60%;background:linear-gradient(rgba(120,110,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(120,110,255,.18) 1px,transparent 1px);background-size:44px 44px;transform:perspective(500px) rotateX(64deg);opacity:.5;mask-image:linear-gradient(transparent,#000 40%)}
.ph2-glow{position:absolute;width:560px;height:560px;border-radius:50%;filter:blur(90px);opacity:.5}
.ph2-glow.a{left:-160px;top:-200px;background:#4C3AE0} .ph2-glow.b{right:-180px;bottom:-240px;background:#F7931A;opacity:.35}
.ph2-bolt{position:absolute;top:10%;width:2px;height:60%;background:linear-gradient(transparent,#7C6CFF,transparent);opacity:.45;filter:blur(1px);animation:ph2bolt 5s ease-in-out infinite}
.ph2-bolt.l{left:6%;transform:rotate(18deg)} .ph2-bolt.r{right:7%;transform:rotate(-14deg);animation-delay:2.5s}
@keyframes ph2bolt{0%,100%{opacity:.15}50%{opacity:.6}}
.ph2-spark{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#FFD37E;box-shadow:0 0 10px #F7931A;opacity:0;animation:ph2spark 3.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ph2spark{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}
/* scene */
.ph2-scene{position:relative;z-index:1;height:380px;perspective:1100px;transform-style:preserve-3d;--px:0deg;--py:0deg;order:2}
.ph2-scene>*{transform-style:preserve-3d}
.ph2-pedestal{position:absolute;left:50%;bottom:26px;width:270px;height:60px;transform:translateX(-50%)}
.ph2-pedestal i{position:absolute;left:0;right:0;border-radius:50%;background:linear-gradient(180deg,#2A2564,#120F33);box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12),0 0 60px rgba(124,108,255,.35)}
.ph2-pedestal i:first-child{top:22px;height:44px;opacity:.9} .ph2-pedestal i:last-child{top:8px;height:38px;left:22px;right:22px;background:linear-gradient(180deg,#3A3390,#1A1548)}
.ph2-box{position:absolute;left:50%;bottom:78px;width:150px;height:150px;transform:translateX(-50%) rotateY(calc(-24deg + var(--px))) rotateX(calc(-8deg + var(--py)));animation:ph2float 5s ease-in-out infinite;transition:transform .25s ease}
@keyframes ph2float{0%,100%{margin-bottom:0}50%{margin-bottom:12px}}
.ph2-face{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden}
.ph2-face.front{background:linear-gradient(160deg,#2F2A7A,#151243);transform:translateZ(75px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ph2-face.side{background:linear-gradient(160deg,#1E1A56,#0D0B2C);transform:rotateY(90deg) translateZ(75px)}
.ph2-face.top{background:linear-gradient(135deg,#4B43A8,#2B2570);transform:rotateX(90deg) translateZ(75px)}
.ph2-ribbon{position:absolute;background:linear-gradient(90deg,#F7931A,#FFC46B,#F7931A);box-shadow:0 0 18px rgba(247,147,26,.7)}
.ph2-ribbon.v{left:50%;top:-4px;bottom:-4px;width:24px;margin-left:-12px;transform:translateZ(76px)}
.ph2-ribbon.h{top:50%;left:-4px;right:-4px;height:24px;margin-top:-12px;transform:translateZ(76px)}
.ph2-bow{position:absolute;left:50%;top:-30px;width:110px;height:60px;transform:translateX(-50%) translateZ(60px) rotateX(-20deg)}
.ph2-bow i{position:absolute;top:10px;width:46px;height:40px;border:8px solid #FFB347;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;box-shadow:0 0 14px rgba(247,147,26,.6)}
.ph2-bow i:first-child{left:6px;transform:rotate(-24deg)} .ph2-bow i:nth-child(2){right:6px;transform:rotate(24deg)}
.ph2-bow b{position:absolute;left:50%;top:22px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE0A6,#E07B00)}
.ph2-boxglow{position:absolute;left:-30%;right:-30%;bottom:-70px;height:60px;border-radius:50%;background:radial-gradient(#F7931A,transparent 70%);opacity:.55;filter:blur(12px);transform:translateZ(-20px)}
.ph2-card{position:absolute;width:120px;height:76px;transform-style:preserve-3d;animation:ph2card 6s ease-in-out infinite;transition:transform .3s}
.ph2-card-face{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 22px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.7);}
.ph2-card-face::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 48%,rgba(255,255,255,0) 60%);mix-blend-mode:screen;animation:ph2sheen 4.5s ease-in-out infinite}
.ph2-card-face img{width:100%;height:100%;object-fit:cover;display:block}
.ph2-card-edge{position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#B8C0CC,#5A6470);transform:translateZ(-6px) translate(4px,4px)}
@keyframes ph2sheen{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@keyframes ph2card{0%,100%{translate:0 0}50%{translate:0 -12px}}
.ph2-card.c1{left:2%;top:18%;transform:rotateY(calc(28deg + var(--px))) rotateZ(-14deg) rotateX(var(--py));animation-delay:0s}
.ph2-card.c2{left:20%;top:2%;transform:rotateY(calc(18deg + var(--px))) rotateZ(-6deg) rotateX(var(--py));animation-delay:.9s}
.ph2-card.c3{right:20%;top:4%;transform:rotateY(calc(-18deg + var(--px))) rotateZ(7deg) rotateX(var(--py));animation-delay:1.7s}
.ph2-card.c4{right:2%;top:22%;transform:rotateY(calc(-30deg + var(--px))) rotateZ(14deg) rotateX(var(--py));animation-delay:2.4s}
.ph2-coin{position:absolute;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;color:#3A2200;
  background:radial-gradient(circle at 35% 30%,#FFE59A,#F5A623 55%,#B76E00);box-shadow:0 10px 24px rgba(0,0,0,.55),inset 0 -4px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.5),0 0 20px rgba(247,147,26,.45);animation:ph2coin 7s linear infinite}
.ph2-coin i{font-style:normal;transform:translateZ(2px)}
.ph2-coin.btc{left:14%;bottom:26%;animation-delay:0s} .ph2-coin.eth{right:12%;bottom:32%;background:radial-gradient(circle at 35% 30%,#CBB9FF,#7C6CFF 55%,#3A2FA0);color:#12083A;animation-delay:2s} .ph2-coin.usdt{right:30%;top:30%;width:34px;height:34px;font-size:1rem;background:radial-gradient(circle at 35% 30%,#B9F5DC,#26A17B 55%,#0F6B4C);color:#04281B;animation-delay:4s}
@keyframes ph2coin{0%{transform:rotateY(0deg) translateY(0)}50%{transform:rotateY(180deg) translateY(-10px)}100%{transform:rotateY(360deg) translateY(0)}}
/* body */
.ph2-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ph2-kick{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#FFD37E;background:rgba(255,255,255,.06);border:1px solid rgba(255,211,126,.45);box-shadow:0 0 24px rgba(247,147,26,.25)}
.ph2-h{margin:0;font-family:'Sora',sans-serif;font-weight:900;line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-size:clamp(2.2rem,4.6vw,3.9rem);display:flex;flex-direction:column}
.ph2-h span{color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.5)} .ph2-h b{background:linear-gradient(180deg,#FFD37E,#F7931A 60%,#E56F00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 24px rgba(247,147,26,.45))}
.ph2-sub{margin:0;font-size:1.05rem;color:#C9D2E6;max-width:520px} .ph2-sub b{color:#FFB454}
.ph2-clock{display:flex;align-items:center;gap:8px;padding:14px 18px;border-radius:18px;background:rgba(10,12,34,.7);border:1px solid rgba(247,147,26,.5);box-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 40px rgba(0,0,0,.45),inset 0 0 40px rgba(247,147,26,.08)}
.ph2-clock .ph-flip b{color:#FFB454} .ph2-clock .ph-flip i{color:#AEB7CC;letter-spacing:2px}
.ph2-ends{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:1.5px;color:#FFD37E;background:rgba(247,147,26,.12);border:1px solid rgba(247,147,26,.4)}
.ph2-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.ph2-feats span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px;border-right:1px solid rgba(255,255,255,.08)} .ph2-feats span:last-child{border-right:0}
.ph2-feats i{font-style:normal;font-size:1.7rem;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.ph2-feats .f1{background:rgba(139,92,246,.22)} .ph2-feats .f2{background:rgba(59,130,246,.22)} .ph2-feats .f3{background:rgba(22,199,132,.22)} .ph2-feats .f4{background:rgba(247,147,26,.22)}
.ph2-feats b{font-size:.86rem} .ph2-feats em{font-style:normal;font-size:.74rem;color:#AEB7CC}
.ph2-cta{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:18px 24px;border-radius:16px;font-family:'Sora',sans-serif;font-weight:900;font-size:1.35rem;letter-spacing:2px;color:#1A0F00;
  background:linear-gradient(180deg,#FFC94D,#F7931A);box-shadow:0 12px 0 #B76E00,0 24px 50px rgba(247,147,26,.45);transition:transform .12s,box-shadow .12s}
.ph2-cta:hover{text-decoration:none;transform:translateY(2px);box-shadow:0 10px 0 #B76E00,0 20px 40px rgba(247,147,26,.45)} .ph2-cta span{font-size:1.2rem}
.ph2-tiers{font-size:.74rem;letter-spacing:.5px;color:#8E98B0;align-self:center}
.ph2-trust{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.ph2-trust>*{display:flex;flex-direction:column;gap:2px;color:#fff;font-size:.86rem} .ph2-trust a:hover{text-decoration:none} .ph2-trust i{font-style:normal;font-size:.74rem;color:#AEB7CC} .ph2-trust .fb-stars{margin:2px 0}
.ph2-av{flex-direction:row;gap:0} .ph2-av i{width:30px;height:30px;border-radius:50%;margin-left:-8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.72rem;color:#fff;border:2px solid #0B0F26;background:linear-gradient(135deg,#7C6CFF,#F7931A)} .ph2-av i:first-child{margin-left:0}
.ph2.restart .ph2-clock{animation:phRestart 1.6s ease}
@media(max-width:1000px){.ph2{grid-template-columns:1fr;padding:26px 20px 28px}.ph2-scene{order:0;height:300px}.ph2-body{align-items:center;text-align:center}.ph2-h{align-items:center}.ph2-sub{text-align:center}.ph2-box{width:120px;height:120px}.ph2-face.front,.ph2-ribbon.v,.ph2-ribbon.h{transform:translateZ(60px)}.ph2-face.side{transform:rotateY(90deg) translateZ(60px)}.ph2-face.top{transform:rotateX(90deg) translateZ(60px)}.ph2-card{width:96px;height:60px}}
@media(max-width:640px){.ph2-feats{grid-template-columns:repeat(2,1fr)}.ph2-feats span:nth-child(2){border-right:0}.ph2-feats span:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}.ph2-clock{padding:10px 8px;gap:4px}.ph2-scene{height:250px}.ph2-trust{justify-content:center;text-align:center}.ph2-trust>*{align-items:center}}
@media(prefers-reduced-motion:reduce){.ph2-box,.ph2-card,.ph2-coin,.ph2-spark,.ph2-bolt,.ph2-card-face::after{animation:none}}
/* V5.5 — compact offer, drawer refer row */
.ph2{padding:26px 32px;gap:14px;grid-template-columns:1fr .9fr}
.ph2-scene{height:300px} .ph2-box{width:120px;height:120px;bottom:64px} .ph2-face.front,.ph2-ribbon.v,.ph2-ribbon.h{transform:translateZ(60px)} .ph2-face.side{transform:rotateY(90deg) translateZ(60px)} .ph2-face.top{transform:rotateX(90deg) translateZ(60px)}
.ph2-card{width:100px;height:64px} .ph2-pedestal{width:220px} .ph2-bow{width:90px;top:-26px}
.ph2-body{gap:10px} .ph2-h{font-size:clamp(1.8rem,3.4vw,2.8rem)} .ph2-sub{font-size:.95rem;max-width:460px} .ph2-kick{padding:7px 14px;font-size:.72rem}
.ph2-clock{padding:10px 12px;gap:6px} .ph2-clock .ph-flip{transform:scale(.86);margin:-4px -2px} .ph2-ends{padding:6px 12px;font-size:.72rem}
.ph2-cta{padding:14px 22px;font-size:1.15rem;box-shadow:0 8px 0 #B76E00,0 18px 40px rgba(247,147,26,.4);max-width:520px} .ph2-cta:hover{box-shadow:0 6px 0 #B76E00,0 14px 30px rgba(247,147,26,.4)}
.ph2-trust{padding:10px 14px;max-width:520px} .ph2-tiers{font-size:.72rem}
@media(max-width:1000px){.ph2{grid-template-columns:1fr;padding:22px 16px 24px}.ph2-scene{height:230px}.ph2-cta,.ph2-trust{max-width:none;width:100%}}
@media(max-width:920px){
  .md-group a.md-refer{flex-wrap:nowrap} .md-refer .md-t{white-space:nowrap} .md-refer .md-pill{margin-left:auto;padding:3px 8px;font-size:.66rem;white-space:nowrap;flex:0 0 auto} .md-refer i{margin-left:8px}
}
/* V5.5 — live indicators */
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#16C784;box-shadow:0 0 0 0 rgba(22,199,132,.7);animation:livedot 1.8s ease-out infinite;vertical-align:middle;margin-left:4px}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(22,199,132,.7)}70%{box-shadow:0 0 0 7px rgba(22,199,132,0)}100%{box-shadow:0 0 0 0 rgba(22,199,132,0)}}
.navfb .livedot{background:#062015;box-shadow:none;animation:none;width:0;margin:0;display:none}
.hr-live{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:1.5px;color:#16C784;padding:3px 8px;border-radius:99px;border:1px solid rgba(22,199,132,.5)} .hr-live .livedot{margin:0}
.fb-livetag{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:700;font-size:.9em} .fb-livetag .livedot{margin:0}
/* V5.6 — broadcast / compose UI */
.bc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.bc-aud{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.bc-aud label{margin:0;cursor:pointer} .bc-aud input{position:absolute;opacity:0;width:1px;height:1px}
.bc-aud span{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface2);font-size:.86rem;font-weight:500}
.bc-aud span b{font-size:.8rem;padding:2px 9px;border-radius:99px;background:var(--surface);border:1px solid var(--border)}
.bc-aud input:checked+span{border-color:var(--amber);background:rgba(247,147,26,.1)} .bc-aud input:checked+span b{background:var(--amber);color:#1A0F00;border-color:var(--amber)}
.bc-text{font-family:Inter,system-ui,sans-serif;font-size:.95rem;line-height:1.6;padding:14px}
.bc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:14px;border-top:1px solid var(--border)} .bc-send{margin-left:auto;display:flex;gap:6px;align-items:center}
.bc-ai summary{cursor:pointer;font-weight:600;color:var(--amber)}
.bc-frame{width:100%;height:720px;border:0;border-radius:14px;background:#EEF2F7}
.bc-prog{height:10px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--border)} .bc-prog b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#7FE0B4)}
@media(max-width:1000px){.bc-grid{grid-template-columns:1fr}.bc-frame{height:560px}}
.fb-faq{padding:10px 0;border-bottom:1px solid var(--border)} .fb-faq:last-child{border-bottom:0} .fb-faq summary{cursor:pointer;font-weight:600}
/* V5.7 — jackpot coin burst */
.ph2-coin{display:none}
.ph2-jcoin{position:absolute;left:50%;bottom:150px;width:44px;height:44px;margin-left:-22px;border-radius:50%;opacity:0;transform-style:preserve-3d;
  animation:ph2jack 4.4s cubic-bezier(.2,.7,.3,1) infinite;animation-delay:var(--dl);z-index:3;filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
.ph2-jcoin b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.75),inset 0 -5px 8px rgba(0,0,0,.35),0 0 0 2px rgba(0,0,0,.18),0 0 18px rgba(247,147,26,.35)}
.ph2-jcoin b::after{content:'';position:absolute;inset:5px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);pointer-events:none}
.ph2-jcoin svg{width:22px;height:22px}
.ph2-jcoin.mt-gold svg{fill:#6B3E00} .ph2-jcoin.mt-silver svg{fill:#39435A} .ph2-jcoin.mt-gun svg{fill:#DCE5F5} .ph2-jcoin.mt-irid svg{fill:#2A1E45}
@keyframes ph2jack{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotateY(0deg)}
  6%{opacity:1;transform:translate(calc(var(--dx)*.25),calc(var(--dy)*1.6)) scale(1) rotateY(calc(var(--r)*.15))}
  22%{opacity:1;transform:translate(calc(var(--dx)*.8),calc(var(--dy)*2.4)) scale(1.05) rotateY(calc(var(--r)*.45))}
  48%{opacity:1;transform:translate(var(--dx),calc(var(--dy)*.6)) scale(.98) rotateY(calc(var(--r)*.8))}
  62%{opacity:.95;transform:translate(calc(var(--dx)*1.05),90px) scale(.9) rotateY(var(--r))}
  70%,100%{opacity:0;transform:translate(calc(var(--dx)*1.05),110px) scale(.85) rotateY(var(--r))}
}
.ph2-jflash{position:absolute;left:50%;bottom:170px;width:140px;height:140px;margin-left:-70px;border-radius:50%;background:radial-gradient(rgba(255,214,140,.9),rgba(247,147,26,.35) 40%,transparent 70%);opacity:0;animation:ph2jflash 4.4s ease-out infinite;z-index:2;pointer-events:none}
@keyframes ph2jflash{0%{opacity:0;transform:scale(.4)}5%{opacity:.9;transform:scale(1)}30%{opacity:0;transform:scale(1.6)}100%{opacity:0}}
.ph2-face.top{animation:ph2lid 4.4s ease-in-out infinite;transform-origin:top center}
@keyframes ph2lid{0%,2%{transform:rotateX(90deg) translateZ(60px)}8%{transform:rotateX(90deg) translateZ(60px) translateY(-14px)}18%,100%{transform:rotateX(90deg) translateZ(60px)}}
.ph2-bow{animation:ph2bow 4.4s ease-in-out infinite}
@keyframes ph2bow{0%,2%{translate:0 0}8%{translate:0 -14px}18%,100%{translate:0 0}}
@media(max-width:1000px){.ph2-jcoin{width:36px;height:36px;margin-left:-18px;bottom:120px}.ph2-jcoin svg{width:18px;height:18px}.ph2-jflash{bottom:135px}}
@media(prefers-reduced-motion:reduce){.ph2-jcoin,.ph2-jflash,.ph2-face.top,.ph2-bow{animation:none}.ph2-jcoin{opacity:1;transform:translate(var(--dx),var(--dy))}}
/* V6.0 — premium logo studio */
.lg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lg-item{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)} .lg-item.hd{border-color:rgba(22,199,132,.5)}
.lg-prev{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden} .lg-prev img{width:100%;height:100%;object-fit:cover} .lg-prev img.lg-logo{width:60%;height:60%;object-fit:contain}
.lg-meta{padding:10px 12px;font-size:.86rem} .lg-act{display:flex;gap:4px;margin-top:6px} .lg-act input{flex:1;padding:6px 8px;font-size:.78rem} .lg-act input[type=file]{font-size:.7rem}
/* V6.1 — floating cards show the real premium card art or a contained logo, never a stretched one */
.ub-card-face .hf-art,.ph2-card-face .hf-art{width:100%;height:100%;object-fit:cover;display:block}
.hf-css{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit}
.hf-css .hf-mark{width:66%;height:58%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.ub-card-face{background:#0E1626} .ph2-card-face{background:#0E1626}
.ub-card-face img,.ph2-card-face img{object-fit:contain} .ub-card-face img.hf-art,.ph2-card-face img.hf-art{object-fit:cover}
/* V6.2 — metallic finish on floating cards */
.ub-card-face::after,.ph2-card-face::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:2;
  background:linear-gradient(105deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 28%,rgba(0,0,0,.18) 55%,rgba(255,255,255,.14) 78%,rgba(255,255,255,0) 100%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,rgba(0,0,0,.03) 2px 4px);mix-blend-mode:overlay}
.ub-card-face,.ph2-card-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.35)}
.hf-css{background-image:linear-gradient(135deg,rgba(255,255,255,.18),transparent 45%,rgba(0,0,0,.25))!important}
.cb-chips{display:flex;flex-wrap:wrap;gap:5px} .cb-chips label{margin:0} .cb-chips input{position:absolute;opacity:0;width:1px;height:1px}
.cb-chips span{display:inline-block;padding:5px 10px;border-radius:99px;border:1px solid var(--border);font-size:.78rem;color:var(--ink-soft);cursor:pointer} .cb-chips input:checked+span{background:var(--amber);color:#1A0F00;border-color:var(--amber)}
/* V6.7 — offer scene on phones: smaller box so the floating cards stay clear */
@media(max-width:640px){
  .ph2-scene{height:230px;perspective:800px}
  .ph2-box{width:84px;height:84px;bottom:52px} .ph2-face.front,.ph2-ribbon.v,.ph2-ribbon.h{transform:translateZ(42px)} .ph2-face.side{transform:rotateY(90deg) translateZ(42px)} .ph2-face.top{transform:rotateX(90deg) translateZ(42px)}
  .ph2-ribbon.v{width:16px;margin-left:-8px} .ph2-ribbon.h{height:16px;margin-top:-8px} .ph2-bow{width:64px;height:40px;top:-20px} .ph2-bow i{width:28px;height:24px;border-width:5px} .ph2-bow b{width:14px;height:14px;margin-left:-7px;top:14px}
  .ph2-pedestal{width:170px;height:44px;bottom:18px} .ph2-pedestal i:first-child{top:16px;height:30px} .ph2-pedestal i:last-child{top:6px;height:26px;left:16px;right:16px}
  .ph2-boxglow{bottom:-40px;height:36px}
  .ph2-card{width:78px;height:50px} .ph2-card.c1{left:0;top:26%} .ph2-card.c2{left:16%;top:4%} .ph2-card.c3{right:16%;top:6%} .ph2-card.c4{right:0;top:28%}
  .ph2-jcoin{width:28px;height:28px;margin-left:-14px;bottom:96px} .ph2-jcoin svg{width:14px;height:14px} .ph2-jflash{bottom:104px;width:90px;height:90px;margin-left:-45px}
  @keyframes ph2lid{0%,2%{transform:rotateX(90deg) translateZ(42px)}8%{transform:rotateX(90deg) translateZ(42px) translateY(-10px)}18%,100%{transform:rotateX(90deg) translateZ(42px)}}
}
/* V6.9 — premium gold live counters + buy grid chunking */
.ls-n.tickr{display:inline-flex;align-items:baseline;gap:0;font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:-.5px;line-height:1;background:none;color:#FFD37E;-webkit-text-fill-color:initial;filter:drop-shadow(0 2px 10px rgba(247,147,26,.35))}
.ls-n.tickr .tk-d{width:.62em;height:1.06em;line-height:1.06}
.ls-n.tickr .tk-d b,.ls-n.tickr .tk-sep{background:linear-gradient(180deg,#FFE7A8 0%,#F7B233 55%,#D98200 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:800;opacity:1}
.ls-n.tickr .tk-sep{padding:0 .04em}
.ls-n.tickr .tk-d b.tk-in{animation:tkIn .45s cubic-bezier(.22,1,.36,1) both,tkGlow 1.2s ease-out both}
@keyframes tkGlow{0%{filter:drop-shadow(0 0 10px rgba(255,211,126,.95)) brightness(1.6)}100%{filter:none;brightness:1}}
html[data-theme="light"] .ls-n.tickr{filter:none}
.pg-more{display:contents}
@media(max-width:640px){.ls-n.tickr{font-size:1.55rem}}

/* ==========================================================================
   GiftsPayr theme — electric blue / violet primary, gold accents, deep navy
   ========================================================================== */
:root{--bg:#070B1A;--surface:#0E1529;--surface2:#141D36;--border:#1F2A4A;--amber:#5B6CFF;--amber-dark:#4553E0;--info:#38BDF8;--gold:#F5B942}
html[data-theme="light"]{--amber:#4F5BFF;--amber-dark:#3B47E0}
body{background:radial-gradient(1200px 600px at 70% -10%,rgba(91,108,255,.18),transparent 60%),var(--bg)}
.btn.amber,.navref,.md-btn.amber,.ph2-cta,.fb-pg.on,.fbq-tabs a.on,.cb-chips input:checked+span,.bc-aud input:checked+span b,.fb-nps input:checked+label,.md-switch{color:#fff!important;background:linear-gradient(90deg,#5B6CFF,#7C3AED);border-color:transparent;box-shadow:0 8px 22px rgba(91,108,255,.35)}
.btn.amber:hover,.ph2-cta:hover{filter:brightness(1.08)}
.navref{background:transparent;border:1.5px solid var(--gold);color:var(--gold)!important;box-shadow:none}
.navfb{background:var(--surface2);border:1.5px solid #3B4A7A;color:var(--ink)!important;box-shadow:none} .navfb svg{fill:#7C6CFF} .navfb b{background:#5B6CFF;color:#fff}
.hero-h1 .grad-warm{background:linear-gradient(90deg,#8B9BFF,#7C3AED);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-h1 .grad-cool{background:linear-gradient(90deg,#F5B942,#F7931A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-badge{border-color:rgba(91,108,255,.45);background:rgba(91,108,255,.12);color:#C7CEFF}
.ls-n,.ls-n.tickr .tk-d b,.ls-n.tickr .tk-sep{background:linear-gradient(180deg,#FFE7A8,#F5B942 55%,#D98200);-webkit-background-clip:text;background-clip:text;color:transparent}
.herorating{border-color:rgba(91,108,255,.35)} .hr-tiles i::before{background:linear-gradient(90deg,#5B6CFF,#7C3AED)} .hr-t em{color:#A5B4FF}
.ph2{background:radial-gradient(120% 90% at 50% 0%,#1A1550 0%,#0B0F2E 45%,#070B1A 100%);border-color:rgba(124,108,255,.35)} .ph2-h b{background:linear-gradient(180deg,#C7CEFF,#7C6CFF 60%,#5B6CFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.ph2-kick,.ph2-ends{color:#C7CEFF;border-color:rgba(124,108,255,.5)} .ph2-clock{border-color:rgba(124,108,255,.5)} .ph2-clock .ph-flip b{color:#A5B4FF}
.ph2-ribbon{background:linear-gradient(90deg,#F5B942,#FFE7A8,#F5B942);box-shadow:0 0 18px rgba(245,185,66,.7)} .ph2-bow i{border-color:#F5B942} .ph2-bow b{background:radial-gradient(circle at 35% 35%,#FFE7A8,#D98200)}
.ph2-face.front{background:linear-gradient(160deg,#3F55FF,#1E2A8A)} .ph2-face.side{background:linear-gradient(160deg,#2A3AB0,#151C5C)} .ph2-face.top{background:linear-gradient(135deg,#6C7BFF,#3F55FF)}
.ph2-pedestal i{background:linear-gradient(180deg,#26308A,#12163F);box-shadow:0 12px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.12),0 0 60px rgba(91,108,255,.4)}
/* hero scene: glowing ring platform */
.ub-scene::after{content:'';position:absolute;left:50%;bottom:8%;width:78%;aspect-ratio:3/1;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(91,108,255,.55);box-shadow:0 0 30px rgba(91,108,255,.55),inset 0 0 40px rgba(124,58,237,.35);pointer-events:none;animation:gpRing 6s linear infinite}
.ub-scene::before{content:'';position:absolute;left:50%;bottom:11%;width:56%;aspect-ratio:3/1;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(124,58,237,.5);box-shadow:0 0 22px rgba(124,58,237,.5);pointer-events:none;animation:gpRing 4s linear infinite reverse}
@keyframes gpRing{0%{filter:brightness(.9)}50%{filter:brightness(1.4)}100%{filter:brightness(.9)}}
/* hero stat tiles + benefits row */
.gp-stats{display:grid;grid-template-columns:repeat(4,auto);gap:10px;margin-top:20px}
.gp-stat{padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.03);display:flex;flex-direction:column;gap:2px;min-width:120px}
.gp-stat i{font-style:normal;font-size:1.1rem} .gp-stat b{font-family:'Sora',sans-serif;font-size:1.35rem} .gp-stat span{font-size:.74rem;color:var(--muted)}
.gp-stat.rate b{color:#F5B942;font-size:1.05rem}
.gp-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden}
.gp-benefits>div{display:flex;gap:12px;align-items:center;padding:16px 18px;border-right:1px solid var(--border)} .gp-benefits>div:last-child{border-right:0}
.gp-benefits i{font-style:normal;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:rgba(91,108,255,.15)} .gp-benefits b{display:block;font-size:.9rem} .gp-benefits span{font-size:.76rem;color:var(--muted)}
.gp-benefits em{font-style:normal;color:#A5B4FF}
.gp-offerstrip{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:12px;margin-top:22px}
.gp-offer{padding:16px 18px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(91,108,255,.14),rgba(124,58,237,.08));display:flex;flex-direction:column;gap:6px}
.gp-offer small{font-size:.68rem;letter-spacing:1.5px;text-transform:uppercase;color:#A5B4FF;font-weight:700} .gp-offer b{font-size:1rem} .gp-offer span{font-size:.8rem;color:var(--muted)}
.gp-tiers{display:flex;gap:8px} .gp-tiers div{flex:1;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.25);text-align:center} .gp-tiers div span{display:block;font-size:.7rem;color:var(--muted)} .gp-tiers div b{color:#F5B942;font-size:1.05rem}
@media(max-width:900px){.gp-stats{grid-template-columns:1fr 1fr}.gp-benefits{grid-template-columns:1fr 1fr}.gp-benefits>div:nth-child(2){border-right:0}.gp-benefits>div:nth-child(-n+2){border-bottom:1px solid var(--border)}.gp-offerstrip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gp-benefits,.gp-offerstrip{grid-template-columns:1fr}.gp-benefits>div{border-right:0;border-bottom:1px solid var(--border)}}