/* Bite Store — dark violet storefront (matches supplied design) */
:root{
  --bg:#0b0b12; --bg2:#101019; --panel:#151522; --panel2:#1b1b2b; --line:#26263a;
  --text:#f5f3ff; --muted:#a5a2b7; --accent:#8b5cf6; --accent2:#a855f7; --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --grad:linear-gradient(135deg,#8b5cf6,#6d28d9); --r:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.16),transparent 60%),var(--bg);color:var(--text);font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;padding-bottom:64px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;outline:none;width:100%}
input:focus{border-color:var(--accent)}
::placeholder{color:#6b6880}
.hidden,[hidden]{display:none!important}

/* announce */
.announce{background:linear-gradient(90deg,#7c3aed,#a855f7);color:#fff;text-align:center;padding:9px 14px;font-size:13px;font-weight:600}

/* nav */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:18px;padding:12px 22px;background:rgba(11,11,18,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 6px 18px rgba(124,58,237,.45)}
.logo svg{width:22px;height:22px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:16px}
.brand-text small{color:var(--muted);font-size:11px}
.links{display:flex;align-items:center;gap:4px;margin-left:8px}
.links a,.ddbtn{padding:8px 12px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600}
.links a:hover,.ddbtn:hover{background:var(--panel);color:var(--text)}
.links a.active{color:var(--accent2)}
.dd{position:relative}
.caret{font-size:10px;opacity:.7}
.ddmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:190px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;box-shadow:0 18px 50px rgba(0,0,0,.5);z-index:70}
.dd.open .ddmenu,.me.open .ddmenu{display:block}
.ddmenu a,.ddmenu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:9px;color:var(--muted);font-size:13.5px}
.ddmenu a:hover,.ddmenu button:hover{background:var(--panel2);color:var(--text)}
.ddmenu.right{left:auto;right:0}
.me-head{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
.me-head b{font-size:14px}
.me-head span{color:var(--ok);font-size:13px;font-weight:700}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:38px;height:38px;border-radius:11px;background:var(--panel);display:grid;place-items:center;color:var(--muted);position:relative}
.icon-btn:hover{color:var(--text);background:var(--panel2)}
.icon-btn svg{width:19px;height:19px}
.cart-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--accent2);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);font-weight:700;display:grid;place-items:center}
.me{position:relative}

/* buttons */
.btn{padding:9px 16px;border-radius:11px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.btn svg{width:16px;height:16px}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(124,58,237,.35)}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:var(--panel);border:1px solid var(--line);color:var(--text)}
.btn.ghost:hover{background:var(--panel2)}
.btn.small{padding:6px 12px;font-size:12.5px;border-radius:9px}
.btn.wide{width:100%}
.btn.danger{background:rgba(248,113,113,.14);color:var(--bad)}
.btn.ok{background:rgba(52,211,153,.14);color:var(--ok)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;max-width:1240px;margin:0 auto;padding:56px 22px 30px}
.hero h1{font-size:clamp(30px,4.4vw,52px);line-height:1.12;margin:0 0 16px;letter-spacing:-.5px}
.grad{background:linear-gradient(90deg,#a855f7,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad2{background:linear-gradient(90deg,#c084fc,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:16px;max-width:560px;margin:0 0 24px}
.searchbar{display:flex;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:5px;max-width:520px}
.searchbar input{border:0;background:transparent;padding:10px 14px}
.searchbar .btn{border-radius:10px;padding:0 18px}
.trust-row{display:flex;gap:18px;margin-top:18px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.hero-art{position:relative;height:320px;display:grid;place-items:center}
.orb{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(168,85,247,.5),rgba(124,58,237,.12) 55%,transparent 70%);filter:blur(6px)}
.bag{position:relative;width:200px;filter:drop-shadow(0 30px 50px rgba(124,58,237,.5))}
.bag svg{width:100%}
.float-tile{position:absolute;width:52px;height:52px;border-radius:14px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-size:24px;box-shadow:0 14px 30px rgba(0,0,0,.45);animation:bob 5s ease-in-out infinite}
.t1{top:12%;left:8%}.t2{top:6%;right:20%;animation-delay:.6s}.t3{top:38%;right:4%;animation-delay:1.2s}
.t4{bottom:24%;left:4%;animation-delay:1.8s}.t5{bottom:8%;right:26%;animation-delay:2.4s}.t6{top:52%;left:16%;animation-delay:3s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* categories */
.cats{display:flex;gap:12px;overflow-x:auto;padding:8px 22px 18px;max-width:1240px;margin:0 auto;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 18px;min-width:96px;border-radius:16px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;transition:.15s}
.cat-chip .ci{width:40px;height:40px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:19px}
.cat-chip:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
.cat-chip.active{background:var(--grad);border-color:transparent;color:#fff}
.cat-chip.active .ci{background:rgba(255,255,255,.16)}

/* sections / grid */
.sec{max-width:1240px;margin:0 auto;padding:14px 22px 8px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sec-head h2{margin:0;font-size:21px}
.viewall{color:var(--accent2);font-size:13.5px;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;position:relative;transition:.16s}
.card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.55);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.p-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:var(--panel2)}
.badge{position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:999px;color:#fff}
.badge.pop{background:linear-gradient(90deg,#f43f5e,#ef4444)}
.badge.best{background:linear-gradient(90deg,#10b981,#059669)}
.badge.off{background:linear-gradient(90deg,#f59e0b,#d97706)}
.card .cat{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.card h3{margin:0;font-size:15px;line-height:1.3;min-height:2.6em}
.card .meta{color:var(--muted);font-size:12px}
.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.price{color:var(--accent2);font-weight:800;font-size:17px}
.stock{font-size:11px;color:var(--ok)}
.stock.out{color:var(--bad)}
.empty{grid-column:1/-1;background:var(--panel);border:1px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center;color:var(--muted)}

/* why */
.why{max-width:1240px;margin:26px auto 40px;padding:0 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.why-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.why-card span{font-size:26px}
.why-card h3{margin:10px 0 6px;font-size:16px}
.why-card p{margin:0;color:var(--muted);font-size:13.5px}

/* footer */
.foot{border-top:1px solid var(--line);padding:26px 22px;margin-top:20px}
.foot-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.foot-links{display:flex;gap:16px}
.foot-links a:hover{color:var(--text)}

/* bottom nav (mobile) */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:65;display:none;background:rgba(13,13,20,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);padding:6px 0;border-radius:10px}
.bottomnav a.active{color:var(--accent2)}
.bi{font-size:18px}

/* drawers */
.scrim{position:fixed;inset:0;background:rgba(5,5,10,.68);z-index:80}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--bg2);border-left:1px solid var(--line);z-index:90;display:flex;flex-direction:column;animation:slide .22s ease}
@keyframes slide{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.dr-head h3{margin:0;font-size:17px}
.x{width:32px;height:32px;border-radius:9px;background:var(--panel);color:var(--muted)}
.x:hover{color:var(--text)}
.dr-body{flex:1;overflow-y:auto;padding:16px 18px}
.dr-foot{border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.tot-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.tot-row.big{font-size:17px;color:var(--text)}
.tot-row .ok{color:var(--ok)}
.coupon-row{display:flex;gap:8px}

/* cart lines */
.cl{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.cl .p-icon{width:44px;height:44px;font-size:20px;flex:0 0 auto}
.cl .ci-n{flex:1;min-width:0}
.cl .ci-n b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl .ci-n span{color:var(--muted);font-size:12px}
.qty{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:9px;padding:3px 6px}
.qty button{width:22px;height:22px;border-radius:6px;background:var(--panel);color:var(--muted);font-weight:700}
.qty b{min-width:18px;text-align:center;font-size:13px}
.rm{color:var(--bad);font-size:16px}

/* payment */
.pay-opt{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px;text-align:left}
.pay-opt:hover{border-color:var(--accent)}
.pay-opt.sel{border-color:var(--accent);background:rgba(139,92,246,.1)}
.pay-opt .pi{width:38px;height:38px;border-radius:10px;background:var(--panel2);display:grid;place-items:center;font-size:18px}
.pay-opt b{display:block;font-size:14px}
.pay-opt small{color:var(--muted);font-size:11.5px}
.pay-opt .bal{margin-left:auto;color:var(--ok);font-weight:700;font-size:13px}
.pay-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:12px}
.pay-box h4{margin:0 0 10px;font-size:14px}
.addr{font-family:ui-monospace,Menlo,monospace;font-size:12px;word-break:break-all;background:var(--bg);border:1px dashed var(--line);border-radius:10px;padding:10px;color:var(--accent2)}
.amt-big{font-size:26px;font-weight:800;color:var(--ok);margin:6px 0}
.qr{display:grid;place-items:center;margin:12px 0}
.qr img{width:150px;height:150px;border-radius:12px;background:#fff;padding:8px}
.status-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:700}
.status-pill.pending{background:rgba(251,191,36,.14);color:var(--warn)}
.status-pill.confirmed,.status-pill.completed{background:rgba(52,211,153,.14);color:var(--ok)}
.status-pill.processing,.status-pill.review{background:rgba(96,165,250,.14);color:#60a5fa}
.status-pill.cancelled,.status-pill.failed,.status-pill.expired{background:rgba(248,113,113,.14);color:var(--bad)}
.spin{width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hint{color:var(--muted);font-size:12px;margin-top:8px}
.copy-btn{margin-top:8px}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,5,10,.65);backdrop-filter:blur(3px);padding:18px}
.modal-card{position:relative;width:min(400px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:24px;animation:pop .18s ease}
@keyframes pop{from{transform:scale(.96);opacity:.5}to{transform:none;opacity:1}}
.modal-card .x{position:absolute;top:14px;right:14px}
.tabs{display:flex;background:var(--panel);border-radius:12px;padding:4px;margin-bottom:18px}
.tab{flex:1;padding:9px;border-radius:9px;color:var(--muted);font-weight:700;font-size:14px}
.tab.active{background:var(--grad);color:#fff}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600}
.msg{margin:0;font-size:13px;text-align:center;min-height:18px}
.msg.err{color:var(--bad)} .msg.ok{color:var(--ok)}

/* toast — its own layer: no dark backdrop, no blur, never blocks the page (v4.14.9) */
.toast-layer{position:fixed;inset:0;z-index:130;display:grid;place-items:start center;padding-top:80px;pointer-events:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#toast{pointer-events:none;place-items:start center;padding-top:80px}
.toast-layer .toast-card{pointer-events:none}
.toast-card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;padding:13px 20px;font-size:14px;font-weight:600;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:pop .18s ease}
.toast-card.err{border-left-color:var(--bad)}
.toast-card.ok{border-left-color:var(--ok)}

/* generic page shell (account/orders/support/products) */
.page{max-width:1240px;margin:0 auto;padding:34px 22px 60px}
.page h1{font-size:26px;margin:0 0 6px}
.page .sub{color:var(--muted);margin:0 0 24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.panel h3{margin:0 0 14px;font-size:16px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;gap:12px;align-items:center}
.stat .si{width:42px;height:42px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;font-size:19px}
.stat b{display:block;font-size:19px}
.stat span{color:var(--muted);font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{color:var(--muted);text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
.tbl-wrap{overflow-x:auto}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.chip.ok{background:rgba(52,211,153,.14);color:var(--ok)}
.chip.warn{background:rgba(251,191,36,.14);color:var(--warn)}
.chip.bad{background:rgba(248,113,113,.14);color:var(--bad)}
.chip.info{background:rgba(96,165,250,.14);color:#60a5fa}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}
.delivery-box{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow:auto}

/* maintenance */
.maint{max-width:520px;margin:12vh auto;text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:44px}
.maint .big{font-size:44px}

/* responsive */
@media (max-width:900px){
  .links{display:none}
  .hero{grid-template-columns:1fr;padding-top:34px}
  .hero-art{height:230px;order:-1}
  .orb{width:260px;height:260px}
  .bag{width:150px}
  .float-tile{width:42px;height:42px;font-size:19px}
  .bottomnav{display:flex}
  body{padding-bottom:70px}
  #loginBtn,#signupBtn{display:none}
  .nav{padding:10px 14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .card h3{font-size:13.5px}
  .price{font-size:15px}
}
@media (min-width:901px){ .bottomnav{display:none} }

/* =========================================================== v2.1 additions */
/* --- telegram premium-emoji product icons --- */
.p-icon{overflow:hidden;position:relative}
.p-icon .emoji-img{width:100%;height:100%;object-fit:contain;display:block;border-radius:inherit}
.p-icon .emoji-txt{font-size:26px;line-height:1}
.p-icon.big{width:78px;height:78px;border-radius:20px;font-size:34px}
.p-icon.big .emoji-txt{font-size:34px}
.sold-row{display:flex}
.sold{font-size:11.5px;color:var(--warn);font-weight:700;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);padding:2px 8px;border-radius:999px}
.chip.auto{background:rgba(52,211,153,.12);color:var(--ok);border:1px solid rgba(52,211,153,.25);font-size:10px;padding:1px 6px;border-radius:999px;font-weight:700}
.card h3{cursor:pointer}
.card h3:hover{color:var(--accent2)}

/* --- products toolbar --- */
.p-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.p-head h1{margin:0 0 4px;font-size:26px}
.p-head .sub{margin:0}
.view-toggle{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.view-toggle button{padding:8px 14px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:700}
.view-toggle button:hover{color:var(--text)}
.view-toggle button.active{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(124,58,237,.4)}
.p-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:14px}
.searchbar.slim{flex:1 1 260px;max-width:none;margin:0}
.tool-right{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-left:auto}
.sortlab{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}
.sortlab select{width:auto;min-width:190px;padding:9px 12px;border-radius:11px;background:var(--panel2);border:1px solid var(--line)}
.switch{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:38px;height:21px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);position:relative;transition:.18s;flex:0 0 auto}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:.18s}
.switch input:checked + .track{background:var(--grad);border-color:transparent}
.switch input:checked + .track::after{transform:translateX(17px);background:#fff}
.chips-scroll{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;margin-bottom:6px;scrollbar-width:thin}
.chips-scroll .cat-chip{flex-direction:row;align-items:center;min-width:auto;padding:8px 13px;font-size:12.5px;gap:7px}
.chips-scroll .cat-chip .ci{width:24px;height:24px;border-radius:8px;font-size:14px}
.cnum{background:rgba(255,255,255,.09);border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:800;margin-left:2px}
.cat-chip.active .cnum{background:rgba(255,255,255,.22)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.cat-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;text-align:left;transition:.16s}
.cat-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.cat-card .cc-ic{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font-size:22px;margin-bottom:4px}
.cat-card b{font-size:15px}
.cat-card .cc-n{color:var(--muted);font-size:12.5px}
.cat-card .cc-price{color:var(--ok);font-size:12px;font-weight:700;margin-top:auto}

/* --- product detail modal --- */
.modal-backdrop{position:fixed;inset:0;z-index:120;background:rgba(5,5,10,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:18px;overflow-y:auto}
.pm-card{width:min(620px,100%);max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pm-card .x{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:10px;background:var(--panel2);color:var(--muted)}
.pm-card .x:hover{color:var(--text)}
.pm-top{display:flex;gap:16px;align-items:flex-start;margin-bottom:14px}
.pm-top h2{margin:6px 0 8px;font-size:20px;line-height:1.3}
.pm-top .cat{color:var(--muted);font-size:12.5px;font-weight:600}
.pm-stats{display:flex;gap:7px;flex-wrap:wrap}
.pm-price{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
.pm-price span{font-size:28px;font-weight:800;background:linear-gradient(90deg,#c4b5fd,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-desc{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px;color:var(--muted);font-size:13.5px;margin:12px 0;max-height:220px;overflow-y:auto;white-space:normal}
.pm-actions{display:flex;gap:10px;flex-wrap:wrap}
.pm-actions .btn{flex:1 1 180px}
body.no-scroll{overflow:hidden}

/* --- full-page auth screen (matches supplied signup design) --- */
body.auth-mode{padding-bottom:0}
body.auth-mode .nav,body.auth-mode main,body.auth-mode .foot,body.auth-mode .bottomnav,body.auth-mode .announce{display:none!important}
.auth-page{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.auth-hero{position:relative;overflow:hidden;padding:40px 48px;background:radial-gradient(900px 500px at 20% 10%,rgba(139,92,246,.30),transparent 60%),radial-gradient(700px 500px at 90% 90%,rgba(76,29,149,.35),transparent 60%),linear-gradient(160deg,#0d0b17,#150f2b 55%,#0b0b12);border-right:1px solid var(--line)}
.auth-hero-inner{max-width:520px;position:relative;z-index:2;height:100%;display:flex;flex-direction:column}
.auth-logo{display:flex;align-items:center;gap:10px;margin-bottom:38px}
.logo-badge{width:40px;height:40px;border-radius:12px;background:var(--grad);display:grid;place-items:center;font-size:20px;box-shadow:0 8px 22px rgba(124,58,237,.5)}
.logo-text{font-size:19px;font-weight:800;letter-spacing:.2px}
.logo-text em{font-style:normal;background:linear-gradient(90deg,#c4b5fd,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-title{font-size:clamp(30px,3.4vw,44px);line-height:1.12;margin:0 0 12px;font-weight:800;letter-spacing:-.5px}
.grad-text{background:linear-gradient(90deg,#c4b5fd,#a855f7 60%,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{color:var(--muted);font-size:15.5px;margin:0 0 26px;max-width:430px}
.auth-feats{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:14px}
.auth-feats li{display:flex;gap:13px;align-items:flex-start}
.afeat-ic{width:42px;height:42px;flex:0 0 auto;border-radius:13px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.3);display:grid;place-items:center;font-size:19px}
.auth-feats b{display:block;font-size:14.5px}
.auth-feats span span,.auth-feats li div span{color:var(--muted);font-size:12.8px}
.auth-art{position:relative;height:190px;margin:14px 0 6px;flex:0 0 auto}
.art-glow{position:absolute;inset:0;background:radial-gradient(220px 140px at 50% 55%,rgba(168,85,247,.45),transparent 70%);filter:blur(6px)}
.art-cube{position:absolute;left:50%;top:50%;width:104px;height:104px;transform:translate(-50%,-50%) rotate(-12deg);border-radius:26px;background:linear-gradient(145deg,#8b5cf6,#4c1d95);display:grid;place-items:center;box-shadow:0 26px 60px rgba(76,29,149,.6),inset 0 1px 0 rgba(255,255,255,.35);animation:cubeFloat 6s ease-in-out infinite}
.cube-face{font-size:44px;font-weight:900;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.4)}
@keyframes cubeFloat{0%,100%{transform:translate(-50%,-52%) rotate(-12deg)}50%{transform:translate(-50%,-46%) rotate(-6deg)}}
.art-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(168,85,247,.28);border-radius:50%;transform:translate(-50%,-50%)}
.art-ring.r1{width:190px;height:190px}
.art-ring.r2{width:270px;height:270px;border-style:dashed;opacity:.55;animation:spin 26s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.art-star{position:absolute;color:#c4b5fd;font-size:16px;opacity:.85;animation:twinkle 3.2s ease-in-out infinite}
.art-star.s1{left:16%;top:22%}
.art-star.s2{right:18%;top:16%;animation-delay:.7s}
.art-star.s3{left:22%;bottom:16%;animation-delay:1.4s}
.art-star.s4{right:14%;bottom:24%;animation-delay:2.1s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.auth-proof{display:flex;align-items:center;gap:14px;margin:8px 0 20px}
.proof-avatars{display:flex}
.pav{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;border:2px solid #12101f;margin-left:-10px;background:linear-gradient(135deg,hsl(calc(var(--i)*58),70%,58%),hsl(calc(var(--i)*58 + 30),70%,42%))}
.pav:first-child{margin-left:0}
.auth-proof p{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.auth-proof b{color:var(--text);font-size:14px}
.auth-proof i{font-style:normal;color:var(--warn)}
.auth-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.acat{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);font-size:12.2px;font-weight:600;transition:.15s}
.acat:hover{border-color:var(--accent);color:var(--text);background:rgba(139,92,246,.12)}
.acat.more{background:var(--grad);color:#fff;border-color:transparent}

.auth-card-wrap{display:grid;place-items:center;padding:36px 26px;background:var(--bg)}
.auth-card{width:min(430px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px 26px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.auth-back{position:absolute;top:16px;left:16px;width:34px;height:34px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:16px}
.auth-back:hover{color:var(--text)}
.auth-head{text-align:center;margin-bottom:20px}
.auth-ic{width:56px;height:56px;margin:0 auto 12px;border-radius:18px;background:var(--grad);display:grid;place-items:center;font-size:26px;box-shadow:0 12px 30px rgba(124,58,237,.45)}
.auth-head h2{margin:0 0 5px;font-size:23px}
.auth-head p{margin:0;color:var(--muted);font-size:13.2px}
.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:13px;background:#fff;color:#1f1f1f;font-weight:700;font-size:14.5px;border:1px solid #e4e4e7;transition:.15s}
.btn-google:hover{background:#f4f4f5;transform:translateY(-1px)}
.btn-google:disabled{opacity:.55;cursor:not-allowed;transform:none}
.social-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.social-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border-radius:13px;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:11.5px;transition:.15s}
.social-btn i{font-style:normal;color:var(--muted);font-weight:600}
.social-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.social-btn:hover i{color:var(--text)}
.or-div{display:flex;align-items:center;gap:12px;margin:18px 0;color:#6b6880;font-size:11.5px;font-weight:700;letter-spacing:1px}
.or-div::before,.or-div::after{content:'';flex:1;height:1px;background:var(--line)}
.frow{margin-bottom:13px}
.frow label{display:block;font-size:12.8px;font-weight:700;color:var(--muted);margin-bottom:6px}
.in-wrap{position:relative;display:flex;align-items:center}
.in-ic{position:absolute;left:12px;font-size:14px;opacity:.85;pointer-events:none}
.in-wrap input{padding-left:38px;padding-right:42px;height:46px;border-radius:13px}
.eye{position:absolute;right:8px;width:30px;height:30px;border-radius:9px;color:var(--muted);font-size:14px}
.eye:hover{color:var(--text);background:var(--panel)}
.terms{display:flex;gap:9px;align-items:flex-start;font-size:12.4px;color:var(--muted);margin:4px 0 14px;cursor:pointer}
.terms input{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:#8b5cf6}
.terms b{color:var(--accent2);font-weight:600}
.auth-msg{border-radius:11px;padding:10px 12px;font-size:12.8px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel2)}
.auth-msg.err{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35);color:#fecaca}
.auth-msg.info{background:rgba(139,92,246,.12);border-color:rgba(139,92,246,.35);color:#ddd6fe}
.btn-grad{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:13px;background:linear-gradient(90deg,#8b5cf6,#a855f7 55%,#d946ef);color:#fff;font-weight:800;font-size:15px;box-shadow:0 14px 34px rgba(139,92,246,.42);transition:.16s}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(139,92,246,.55)}
.btn-grad:disabled{opacity:.65;cursor:progress;transform:none}
.btn-grad .arw{font-size:17px}
.auth-switch{text-align:center;font-size:13px;color:var(--muted);margin:16px 0 18px}
.auth-switch button{color:var(--accent2);font-weight:800;min-height:32px;padding:4px 8px;margin:-4px -2px;border-radius:8px}
.auth-switch button:hover{text-decoration:underline}
.trust-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;border-top:1px solid var(--line);padding-top:16px}
.tbadge{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 4px}
.tbadge .tb-ic{font-size:15px}
.tbadge b{font-size:12.2px}
.tbadge i{font-style:normal;font-size:10px;color:var(--muted)}


@media (max-width:640px){
  .p-head{align-items:flex-start}
  .view-toggle{width:100%}
  .view-toggle button{flex:1}
  .tool-right{width:100%;margin-left:0}
  .sortlab{flex:1}
  .sortlab select{width:100%;min-width:0}
  .pm-top{flex-direction:column}
  .auth-card{padding:22px 18px}
}

/* --- v2.1.1 signup page: exact mockup details --- */
.auth-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:36px}
.auth-topbar .auth-logo{margin-bottom:0}
.secure-pill{padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.top-signin{padding:9px 20px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-weight:700;font-size:13.5px}
.top-signin:hover{border-color:var(--accent);background:rgba(139,92,246,.14)}
.auth-title{font-size:clamp(32px,3.6vw,50px)}
.afeat-ic.a1{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.42)}
.afeat-ic.a2{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.42)}
.afeat-ic.a3{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.42)}
.afeat-ic.a4{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.42)}
.art-pedestal{position:absolute;left:50%;top:80%;width:230px;height:54px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(168,85,247,.55),transparent);filter:blur(3px)}
.art-tile{position:absolute;width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#2b2542,#151022);border:1px solid rgba(168,85,247,.4);display:grid;place-items:center;font-size:21px;box-shadow:0 16px 34px rgba(0,0,0,.55);animation:bob 6s ease-in-out infinite}
.art-tile.at1{left:8%;top:6%;animation-delay:.2s}
.art-tile.at2{right:10%;top:2%;animation-delay:.9s}
.art-tile.at3{right:4%;top:36%;animation-delay:1.6s}
.art-tile.at4{left:4%;top:38%;animation-delay:2.3s}
.art-tile.at5{left:14%;bottom:16%;animation-delay:3s}
.art-tile.at6{right:12%;bottom:12%;animation-delay:3.7s}
.testimonial{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:14px;margin:0 0 18px}
.testimonial .t-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,#8b5cf6,#4c1d95);display:grid;place-items:center;font-size:19px;flex:0 0 auto}
.testimonial p{margin:0 0 6px;font-size:13px;line-height:1.5;color:var(--text)}
.t-by{font-size:12px;color:var(--muted)}
.verif{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#3b82f6;color:#fff;font-size:9px;font-style:normal;margin-left:4px;vertical-align:middle}
.btn-google{position:relative}
.btn-google .g-arw{position:absolute;right:14px;color:#6b7280;font-size:18px;font-weight:700}
.btn-grad{background:linear-gradient(90deg,#a855f7,#8b5cf6 45%,#38bdf8)}
.btn-grad:hover{box-shadow:0 18px 42px rgba(56,189,248,.4)}
.tb-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:16px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.32)}
.tb-ic.tb1{background:rgba(168,85,247,.16);border-color:rgba(168,85,247,.42)}
.tb-ic.tb2{background:rgba(45,212,191,.14);border-color:rgba(45,212,191,.42)}
.tb-ic.tb3{background:rgba(217,70,239,.14);border-color:rgba(217,70,239,.42)}
.social-btn{padding:13px 6px}
@media (max-width:480px){.secure-pill{display:none}}

/* =========================================================== v2.2 mobile mockup match + motion */
@media (max-width:900px){
  .hero-art{display:none}
  .hero{padding-top:24px}
  .hero-copy h1{font-size:31px;line-height:1.15}
  .hero p{font-size:15px}
  .cats{padding:4px 14px 14px;gap:10px}
  .cat-chip{min-width:86px;padding:12px 8px;border-radius:16px;gap:7px}
  .cat-chip .ci{width:46px;height:46px;border-radius:15px;font-size:22px;background:linear-gradient(150deg,#241d3d,#151022);border:1px solid var(--line)}
  .cat-chip.active .ci{background:rgba(255,255,255,.18);border-color:transparent}
  .cat-chip .cnum{display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card{padding:13px}
  .card .p-icon{width:52px;height:52px;border-radius:14px}
  .searchbar{max-width:none}
}
@media (max-width:900px){ .menu-btn{display:grid} }
@media (min-width:901px){ .menu-btn{display:none} }
.bottomnav .bi{width:24px;height:24px;display:grid;place-items:center;font-size:0}
.bottomnav .bi svg{width:22px;height:22px}
.bottomnav a{gap:5px;font-size:10.5px;font-weight:600}
.bottomnav a.active{color:var(--accent2)}
.menu-links{display:flex;flex-direction:column;gap:2px}
.mlink{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:12px;color:var(--text);font-weight:600;font-size:14.5px;text-align:left;width:100%}
.mlink:hover{background:var(--panel2)}
.menu-h{margin:16px 4px 8px;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.menu-cats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mcat{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--muted)}
.mcat span{font-size:16px}
.mcat:hover{border-color:var(--accent);color:var(--text)}

/* onboarding wall */
body.onb-mode{padding-bottom:0}
body.onb-mode .nav,body.onb-mode main,body.onb-mode .foot,body.onb-mode .bottomnav,body.onb-mode .announce{display:none!important}
.onb-page{min-height:100vh;display:grid;place-items:center;padding:28px 16px;position:relative;overflow:hidden;background:radial-gradient(820px 520px at 50% -12%,rgba(139,92,246,.24),transparent 62%),radial-gradient(600px 420px at 90% 100%,rgba(56,189,248,.12),transparent 60%),var(--bg)}
.onb-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:conic-gradient(from 0deg,rgba(139,92,246,.28),transparent 38%,rgba(56,189,248,.2),transparent 72%,rgba(139,92,246,.28));filter:blur(70px);animation:spinSlow 16s linear infinite}
.onb-card{width:min(480px,100%);position:relative;z-index:2;animation:cardIn .55s cubic-bezier(.2,.9,.3,1.15) both}
.req{color:var(--bad)}
.onb-sec{margin:18px 0 4px}
.onb-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.onb-sec-head b{font-size:13.2px}
.onb-sec-head .opt{font-size:10px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;letter-spacing:.4px}
.onb-sec-head .skip{margin-left:auto;color:var(--accent2);font-size:12.2px;font-weight:700}
.onb-sec-head .skip:hover{text-decoration:underline}
.int-chips{display:flex;flex-wrap:wrap;gap:8px}
.ichip{padding:8px 14px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:600;transition:.15s;animation:popIn .4s both}
.ichip:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
.ichip.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.42)}
.onb-note{margin-top:13px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.5}

/* motion / "crafted by a pro" feel */
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shineSweep{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}
@keyframes glowPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@keyframes glint{0%,84%{opacity:0;transform:translateX(-60%)}90%{opacity:.85}100%{opacity:0;transform:translateX(60%)}}
.grad-text{background-size:220% 220%;animation:gradShift 7s ease infinite}
.auth-title{animation:slideUp .7s .05s both}
.auth-sub{animation:slideUp .7s .16s both}
.auth-feats li{animation:slideUp .6s both}
.auth-feats li:nth-child(1){animation-delay:.26s}
.auth-feats li:nth-child(2){animation-delay:.36s}
.auth-feats li:nth-child(3){animation-delay:.46s}
.auth-feats li:nth-child(4){animation-delay:.56s}
.auth-art{animation:cardIn .8s .3s both;transform:translate3d(calc(var(--px,0)*16px),calc(var(--py,0)*12px),0);transition:transform .3s ease-out}
.auth-proof{animation:slideUp .7s .62s both}
.testimonial{animation:slideUp .7s .72s both}
.auth-cats{animation:slideUp .7s .82s both}
.auth-card{animation:cardIn .55s .12s both}
.art-glow{animation:glowPulse 4.2s ease-in-out infinite}
.art-tile{position:absolute;overflow:hidden}
.art-tile::after{content:'';position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);opacity:0;animation:glint 4.6s ease-in-out infinite}
.art-tile.at2::after{animation-delay:.7s}
.art-tile.at3::after{animation-delay:1.4s}
.art-tile.at4::after{animation-delay:2.1s}
.art-tile.at5::after{animation-delay:2.8s}
.art-tile.at6::after{animation-delay:3.5s}
.pav{animation:popIn .5s both;animation-delay:calc(var(--i)*90ms + 600ms)}
.btn-grad,.btn-google{position:relative;overflow:hidden}
.btn-grad::after,.btn-google::after{content:'';position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none}
.btn-grad:hover::after,.btn-google:hover::after{animation:shineSweep .8s ease}
.grid .card{animation:popIn .45s both;animation-delay:calc(min(var(--i,0),18)*35ms)}
.cat-grid .cat-card{animation:popIn .45s both;animation-delay:calc(min(var(--i,0),18)*35ms)}
main > section.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
main > section.reveal.revealed{opacity:1;transform:none}
.hero-art .float-tile{animation:bob 5s ease-in-out infinite}
.hero-art .bag{animation:cardIn .9s .1s both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  main > section.reveal{opacity:1;transform:none}
}

/* =========================================================== v2.3 responsive auth + live tiles + mobile cards */
/* floating tiles: live product icons + swap animation */
.art-tile .emoji-img,.float-tile .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:7px}
.art-tile .emoji-txt,.float-tile .emoji-txt{font-size:20px}
.tile-swap > *{animation:tileSwap .55s ease both}
@keyframes tileSwap{0%{opacity:0;transform:scale(.55) rotate(-14deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
/* mobile product cards: mockup jaisi compact */
@media (max-width:900px){
  .grid{align-items:stretch}
  .card{height:100%}
  .card .p-icon{order:1}
  .card h3{order:2;font-size:13.8px;line-height:1.35}
  .card .cat{order:3;font-size:10.8px;gap:4px}
  .card .meta{order:4}
  .card .price-row{order:5;margin-top:auto}
  .card .sold-row{order:6}
  .card .add{order:7}
  .card .cat .chip{display:none}
}

/* =========================================================== v2.4 single-screen auth (no scroll), profile menu, merged home */
/* avatars */
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar.sm{width:34px;height:34px;font-size:14px;flex:none}
.avatar.big{width:58px;height:58px;font-size:22px;flex:none}
.me-head{display:flex;align-items:center;gap:10px}
.me-head div{display:flex;flex-direction:column;gap:1px}
/* edit profile modal */
.ep-card{width:min(480px,100%);max-height:92dvh;overflow-y:auto;padding:18px}
.ep-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(139,92,246,.07)}
.ep-top div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ep-top b{font-size:15px}
.ep-top span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.ep-top em{font-style:normal;font-size:10.5px;color:var(--acc,#8b5cf6)}
.ep-form label,.ep-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);margin-bottom:10px}
.ep-lbl{font-size:12px;color:var(--muted);margin:4px 0 8px}
.ep-card .ichips{margin-bottom:12px}
.ep-pw{margin:4px 0 12px;border:1px dashed var(--line);border-radius:12px;padding:10px 12px}
.ep-pw summary{cursor:pointer;font-size:12.5px;color:var(--acc,#8b5cf6);font-weight:600}
.ep-pw label{margin-top:10px}
/* home sec tools */
.sec-tools{display:flex;align-items:center;gap:10px}
.count-pill{font-size:11px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:99px;padding:2px 9px;vertical-align:middle;margin-left:6px}
.mini-sel{background:var(--panel,#15151f);color:var(--text,#eee);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-size:12px}

/* =========================================================== v2.5: stacked hero restore (task-11 revert), sign-in sheet, stock/desc cards, legal, seasons, cute maintenance */
@media (min-width:880px){ .auth-page{grid-template-columns:1.05fr .95fr} }
@media (max-width:879px){
  .auth-page{grid-template-columns:1fr}
  .auth-hero{border-right:0;border-bottom:1px solid var(--line);padding:24px 18px 28px}
  .auth-hero-inner{max-width:660px;margin:0 auto}
  .auth-topbar{margin-bottom:20px;flex-wrap:wrap}
  .auth-title{font-size:clamp(30px,8.6vw,44px)}
  .auth-sub{font-size:14.5px;margin-bottom:18px}
  .auth-feats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .auth-feats li{gap:10px}
  .afeat-ic{width:38px;height:38px;border-radius:12px;font-size:17px}
  .auth-feats b{font-size:13.2px}
  .auth-feats li div span{font-size:11.6px}
  .auth-art{height:180px;margin:6px 0 2px}
  .art-cube{width:86px;height:86px;border-radius:22px}
  .cube-face{font-size:36px}
  .art-tile{width:40px;height:40px;border-radius:13px;font-size:18px}
  .art-ring.r1{width:150px;height:150px}
  .art-ring.r2{width:215px;height:215px}
  .art-pedestal{width:190px;height:44px}
  .testimonial{padding:12px}
  .testimonial p{font-size:12.4px}
  .auth-card-wrap{padding:24px 14px 44px;align-content:start}
  .auth-card{padding:24px 18px}
}
@media (max-width:400px){
  .auth-feats{grid-template-columns:1fr}
  .trust-badges{gap:7px}
}
/* --- Sign In as overlay sheet: signup page peeche transparent/dim --- */
body.auth-sheet .auth-card-wrap{position:fixed;inset:0;z-index:95;background:rgba(9,9,17,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto;padding:20px 14px 40px;display:flex;justify-content:center;align-content:flex-start}
body.auth-sheet .auth-card{width:min(440px,100%);margin-top:5vh;animation:sheetIn .38s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(139,92,246,.35)}
body.auth-sheet .auth-hero{filter:brightness(.72) saturate(.9)}
body.auth-sheet .auth-topbar .top-signin{display:none}
@keyframes sheetIn{from{transform:translateY(30px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.tlink{color:var(--acc,#8b5cf6);font-weight:700;text-decoration:none}
.tlink:hover{text-decoration:underline}
/* --- cards: description + stock visible --- */
.card{min-width:0}
.card .meta{overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11.5px;line-height:1.45;color:var(--muted);margin:4px 0 6px;min-height:2.9em}
.card .stock{font-size:10.5px;font-weight:700}
.card .stock.out{color:#fb7185}
.card.oos{opacity:.72}
.card.oos .p-icon{filter:grayscale(.7)}
.badge.oos-b{background:linear-gradient(135deg,#f43f5e,#b91c1c);color:#fff}
/* --- home advanced toolbar --- */
.home-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 14px}
.stk-lbl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.stk-lbl input{accent-color:var(--acc,#8b5cf6);width:15px;height:15px}
/* --- legal pages --- */
.legal{max-width:760px;margin:0 auto;padding:34px 18px 60px}
.legal h1{font-size:clamp(24px,5vw,34px);margin-bottom:4px}
.legal h2{font-size:16px;margin:22px 0 6px;color:var(--acc,#8b5cf6)}
.legal p{color:var(--muted);font-size:13.5px;line-height:1.7;margin:0 0 8px}
/* --- season particles + badge --- */
#seasonLayer{position:fixed;inset:0;pointer-events:none;z-index:4;overflow:hidden}
#seasonLayer span{position:absolute;top:-10%;animation:seasonFall linear infinite;opacity:.45;filter:saturate(1.1)}
@keyframes seasonFall{0%{transform:translateY(-8vh) rotate(0deg)}100%{transform:translateY(112vh) rotate(340deg)}}
.season-badge{position:absolute;left:50%;transform:translateX(-50%);top:9px;background:linear-gradient(135deg,var(--season,#8b5cf6),#6d28d9);color:#fff;font-size:10.5px;font-weight:800;padding:4px 12px;border-radius:99px;letter-spacing:.2px;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:badgePop 2.6s ease-in-out infinite;white-space:nowrap;z-index:66}
@keyframes badgePop{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.06)}}
@media (max-width:760px){.season-badge{display:none}}
/* --- cute maintenance screen --- */
.maint{min-height:calc(100dvh - 130px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;position:relative;overflow:hidden;background:radial-gradient(700px 420px at 50% 18%,rgba(139,92,246,.22),transparent 70%),radial-gradient(500px 300px at 80% 80%,rgba(56,189,248,.12),transparent 70%)}
.maint-gears{display:flex;gap:14px;font-size:30px;margin-bottom:6px}
.maint-gears span:nth-child(1){animation:spinSlow 5s linear infinite}
.maint-gears span:nth-child(2){animation:spinSlow 7s linear infinite reverse}
.maint-gears span:nth-child(3){animation:wobble 1.6s ease-in-out infinite}
.maint-mascot{font-size:clamp(58px,12vw,92px);animation:bounceCute 1.8s ease-in-out infinite;filter:drop-shadow(0 16px 30px rgba(139,92,246,.45))}
.maint h1{font-size:clamp(26px,6vw,44px);margin:10px 0 8px;background:linear-gradient(90deg,#fff,var(--season,#8b5cf6),#fff);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shineTxt 3s linear infinite}
@keyframes shineTxt{to{background-position:200%}}
.maint .hint{color:var(--muted);max-width:420px;font-size:14px;line-height:1.6}
.maint-bar{width:min(300px,70vw);height:10px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line);margin:22px 0 14px;overflow:hidden}
.maint-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--season,#8b5cf6),#38bdf8,var(--season,#8b5cf6));animation:barSlide 1.6s ease-in-out infinite}
@keyframes barSlide{0%{margin-left:-40%}100%{margin-left:100%}}
.maint-hearts{display:flex;gap:16px;font-size:22px}
.maint-hearts span{animation:floaty 2.4s ease-in-out infinite}
.maint-hearts span:nth-child(2){animation-delay:.3s}
.maint-hearts span:nth-child(3){animation-delay:.6s}
.maint-hearts span:nth-child(4){animation-delay:.9s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.maint-tag{margin-top:14px;font-size:12px;color:var(--season,#8b5cf6);font-weight:700}
@keyframes bounceCute{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes wobble{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}

.maint-mode .bottomnav,.maint-mode .foot{display:none}

/* =========================================================== v2.6 boot splash + perceived loading */
#bootSplash{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(620px 420px at 50% 36%,rgba(139,92,246,.28),transparent 70%),#0b0b12;transition:opacity .45s ease,visibility .45s}
#bootSplash.done{opacity:0;visibility:hidden}
.bs-ring{position:relative;width:104px;height:104px;display:grid;place-items:center}
.bs-ring i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 40deg,#8b5cf6 90deg,#38bdf8 150deg,transparent 200deg 360deg);animation:spinSlow 1.15s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));filter:drop-shadow(0 0 10px rgba(139,92,246,.8))}
.bs-ring b{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#a855f7,#6d28d9);display:grid;place-items:center;font-size:30px;animation:corePulse 1.6s ease-in-out infinite;box-shadow:0 0 34px rgba(139,92,246,.65),inset 0 0 18px rgba(255,255,255,.22)}
@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.bs-txt{font-size:11.5px;color:#c4b5fd;letter-spacing:3.5px;font-weight:800;background:linear-gradient(90deg,#8b5cf6,#e9d5ff,#38bdf8,#8b5cf6);background-size:250%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shineTxt 2.2s linear infinite}
.bs-txt .dots i{animation:dotBlink 1.2s infinite;font-style:normal}
.bs-txt .dots i:nth-child(2){animation-delay:.2s}
.bs-txt .dots i:nth-child(3){animation-delay:.4s}
@keyframes dotBlink{0%,60%,100%{opacity:.15}30%{opacity:1}}
.bs-scan{position:absolute;left:0;right:0;height:120px;top:-140px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.10),transparent);animation:scanMove 2.4s ease-in-out infinite}
@keyframes scanMove{0%{top:-140px}50%{top:100%}100%{top:-140px}}
body.booting #view,body.booting .foot,body.booting .bottomnav,body.booting .nav,body.booting .auth-page,body.booting #onbPage{visibility:hidden}
#loadbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,#8b5cf6,#38bdf8);z-index:310;transition:width .25s ease,opacity .35s;opacity:0;border-radius:0 99px 99px 0;box-shadow:0 0 12px rgba(139,92,246,.8)}
#loadbar.on{opacity:1}
.skel{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--panel,#15151f)}
.skel i{display:block;position:relative;overflow:hidden;border-radius:8px;background:rgba(255,255,255,.05);height:12px;margin-bottom:10px}
.skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.11),transparent);animation:shim 1.1s linear infinite}
.skel .ic{width:52px;height:52px;border-radius:14px;margin-bottom:12px}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.searchbar{position:relative}
.searchbar.busy::after{content:'';position:absolute;right:58px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(139,92,246,.35);border-top-color:#8b5cf6;border-radius:50%;animation:spinSlow .7s linear infinite}
.count-pill.pulse{animation:pillPulse .5s ease}
@keyframes pillPulse{50%{transform:scale(1.2);color:#fff;background:rgba(139,92,246,.55)}}

/* =========================================================== v2.7 mobile hero-only auth + popup sheet + futuristic splash */
.hero-cta{display:none}
@media (max-width:879px){
  body:not(.auth-sheet) .auth-card-wrap{display:none}
  .auth-hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;border-bottom:0}
  .testimonial{display:none}
  .auth-art{height:160px}
  .hero-cta{display:flex;margin:16px auto 0;width:min(320px,86%);height:48px;font-size:15px;border-radius:14px;align-items:center;justify-content:center;gap:8px}
  .auth-cats{margin-top:14px}
}
body.auth-sheet .auth-card-wrap{display:flex}

/* =========================================================== v2.8 real brand icons on categories (from bot premium emoji) */
.ci .emoji-img,.cc-ic .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:5px}
.chips-scroll .ci .emoji-img{padding:3px}
.ci .emoji-txt,.cc-ic .emoji-txt{line-height:1}
.cc-ic .emoji-txt{font-size:22px}
.card .cat .cat-ic{display:inline-flex;width:15px;height:15px;vertical-align:-2px;margin-right:2px}
.card .cat .cat-ic .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:4px}
.card .cat .cat-ic .emoji-txt{font-size:12px}

/* =========================================================== v2.9 recent search chips */
.recent-row{align-items:center;min-height:0}
.recent-row[hidden]{display:none}
.recent-lbl{font-size:11px;color:var(--muted);margin-right:2px;flex:0 0 auto}
.rchip{flex-direction:row;min-width:auto;padding:6px 8px 6px 6px;gap:7px;border-color:rgba(139,92,246,.4);background:rgba(139,92,246,.10)}
.rchip .ci{width:26px;height:26px;border-radius:9px;font-size:14px;background:rgba(255,255,255,.08)}
.rchip .ci .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:3px}
.rchip .rn{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:var(--text)}
.rchip .rx{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:10px;background:rgba(255,255,255,.10);color:var(--muted);cursor:pointer}
.rchip .rx:hover{background:#f43f5e;color:#fff}
/* admin analytics charts */
.an-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.an-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.02)}
.an-card h4{margin:0 0 10px;font-size:13px;color:var(--muted)}
.bar-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:12px}
.bar-row .bl{width:86px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.bar-row .bb{height:14px;border-radius:7px;background:linear-gradient(90deg,#8b5cf6,#38bdf8);min-width:3px}
.bar-row .bv{font-weight:700}
.an-dates{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.an-dates input{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:7px 9px;color:var(--text);font-size:12px}

/* =========================================================== v2.9.2 premium live search autocomplete */
.ac-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:90;background:var(--panel,#15151f);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(139,92,246,.14);padding:6px;max-height:min(62vh,430px);overflow-y:auto;animation:acIn .16s ease}
@keyframes acIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.ac-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;cursor:pointer}
.ac-item.active{background:rgba(139,92,246,.14);box-shadow:inset 0 0 0 1px rgba(139,92,246,.35)}
.ac-ic{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ac-ic .emoji-img,.ac-ic .emoji-txt{width:100%;height:100%;object-fit:contain;font-size:20px;display:block}
.ac-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ac-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-name mark{background:none;color:#c4b5fd;font-weight:800}
.ac-sub{font-size:11.5px;color:var(--muted,#9aa3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-stock{color:#4ade80}.ac-oos{color:#f87171}
.ac-price{font-weight:800;color:#c4b5fd;font-size:13px;flex:0 0 auto}
.ac-go{color:var(--muted,#9aa3b8);font-weight:700}
.ac-all{margin-top:4px;border-top:1px solid var(--line);padding:10px 12px;font-size:12.5px;color:var(--muted,#9aa3b8);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ac-all:hover{color:#c4b5fd}
.ac-empty{padding:14px 12px;font-size:12.5px;color:var(--muted,#9aa3b8)}

/* =========================================================== v2.11 brand logo + intro film */
.logo{background:transparent;box-shadow:none;overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain}
.logo-badge{background:transparent;box-shadow:none;overflow:hidden}
.logo-badge img{width:100%;height:100%;object-fit:contain}
.bs-ring b{background:rgba(139,92,246,.14);backdrop-filter:blur(2px)}
.bs-ring b img{width:72%;height:72%;object-fit:contain}
#introWrap{position:fixed;inset:0;z-index:9998;background:#060812;transition:opacity .5s ease}
#introWrap.fade{opacity:0;pointer-events:none}
#introWrap iframe{width:100%;height:100%;border:0;display:block}
/* v4.60.3: an invisible tap layer above the film — a tap skips the intro instead of clicking the page under it */
#introWrap{position:fixed}
#introSkip{position:absolute;inset:0;z-index:2;background:transparent;border:0;padding:0;margin:0;cursor:pointer;color:transparent;font-size:0}

/* v2.11.2: intro hi pehla experience hai — koi alag boot loading nahi */
html.will-intro #bootSplash{display:none}
#introWrap{background:radial-gradient(circle at 50% 45%,rgba(99,60,255,.22),transparent 62%),#060812}

/* =========================================================== v3.0 premium mobile UI + dynamic orbital bag */
#menuBtn{display:none}
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(139,92,246,.14);border:1px solid rgba(139,92,246,.4);color:#c4b5fd;font-size:12px;font-weight:700;letter-spacing:.4px;margin-bottom:12px}
.trust-row span{display:inline-flex;align-items:center;gap:6px}
.trust-row i{font-style:normal}
.bag-stage{position:relative;width:min(300px,100%);aspect-ratio:1/1;display:grid;place-items:center}
.bag-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(124,58,237,.4),rgba(34,211,238,.12) 55%,transparent 72%);filter:blur(6px);animation:bagPulse 4.5s ease-in-out infinite}
@keyframes bagPulse{50%{opacity:.75;transform:scale(1.05)}}
.bag-svg{width:62%;height:auto;filter:drop-shadow(0 18px 34px rgba(88,28,135,.55)) drop-shadow(0 0 18px rgba(34,211,238,.18));animation:bagFloat 5.2s ease-in-out infinite}
@keyframes bagFloat{50%{transform:translateY(-8px)}}
.orbit{position:absolute;inset:0;pointer-events:none}
.oi{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:12px;background:rgba(19,15,36,.88);border:1px solid rgba(139,92,246,.38);box-shadow:0 6px 16px rgba(0,0,0,.5),0 0 12px rgba(139,92,246,.22);display:flex;align-items:center;justify-content:center;will-change:transform;transition:opacity .45s ease}
.oi .emoji-img,.oi .emoji-txt{width:100%;height:100%;object-fit:contain;font-size:22px;display:block;border-radius:inherit}
.oi::after{content:'';position:absolute;inset:-3px;border-radius:14px;box-shadow:0 0 14px rgba(34,211,238,.5);opacity:0;animation:oiGlow 6s ease-in-out infinite;animation-delay:var(--gd,0s)}
@keyframes oiGlow{0%,86%,100%{opacity:0}92%{opacity:.8}}
.oi-in{opacity:0;transform:scale(.3)}
.oi-out{opacity:0 !important;transform:scale(.4) !important;transition:opacity .45s ease,transform .45s ease}
.feat-head{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:2px auto 10px;padding:0 22px;font-size:15px}
.feat-head b{font-size:16px}
.view-all{color:#c4b5fd;font-weight:700;font-size:13px}
.view-all i{font-style:normal}
@media (max-width:900px){
  .hero{padding:16px 14px 6px}
  .hero-panel{display:flex;align-items:center;gap:12px;background:linear-gradient(160deg,rgba(139,92,246,.16),rgba(13,13,22,.6) 55%);border:1px solid var(--line);border-radius:20px;padding:16px 14px;overflow:hidden}
  .hero-copy{flex:1;min-width:0}
  .hero h1{font-size:clamp(19px,5.4vw,26px);margin:0 0 8px}
  .hero p{font-size:12.5px;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-badge{padding:4px 10px;font-size:10.5px;margin-bottom:8px}
  .trust-row{gap:6px 12px;margin-top:6px;font-size:11px;flex-wrap:wrap}
  .trust-row span{white-space:nowrap}
  .view-all{white-space:nowrap}
  .hero-art{display:block;height:auto;flex:0 0 40%;max-width:42%;order:0}
  .bag-stage{width:100%;height:clamp(110px,22vh,180px);aspect-ratio:auto}
  .bag-svg{width:54%}
  .oi{width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:10px}
  .oi .emoji-txt{font-size:17px}
  .hero-below{margin-top:12px}
  .feat-head{padding:0 14px;margin-top:10px}
  #catRow .cat-chip{flex-direction:column;gap:6px;min-width:88px;padding:12px 10px;border-radius:16px}
  #catRow .cat-chip .ci{width:40px;height:40px}
  #catRow .cat-chip .cnum{display:inline-block;margin-left:0;background:rgba(139,92,246,.18);border-radius:999px;padding:2px 8px;font-size:10.5px}
  #menuBtn{display:grid}
  #loginBtn,#signupBtn{display:none}
  .bottomnav{display:flex;justify-content:space-around}
  .bottomnav a{font-size:10.5px;gap:3px}
}
@media (min-width:901px){
  #menuBtn{display:none}
  .hero-panel{display:contents}
  .hero-below{display:contents}
}

/* ============ v3.1 reference-match polish (task-22 follow-up) ============ */
.hero-badge{background:rgba(244,114,182,.10);border-color:rgba(244,114,182,.42);color:#f9a8d4}
.hero-badge .b-ico{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,#fde047,#f59e0b);color:#1a1a2e;font-size:11px;font-style:normal;box-shadow:0 0 10px rgba(250,204,21,.55)}
.searchbar .s-ico{display:flex;align-items:center;justify-content:center;width:38px;flex:0 0 38px;color:#7c7c9a}
.searchbar .s-ico svg{width:19px;height:19px}
.searchbar input{padding-left:2px}
.bag-svg{width:72%;overflow:visible;filter:drop-shadow(0 0 22px rgba(255,61,184,.35)) drop-shadow(0 0 14px rgba(34,211,238,.22)) drop-shadow(0 16px 30px rgba(76,29,149,.55))}
.ring-g{animation:ringP 3.2s ease-in-out infinite}
.spk{animation:twk 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.spk2{animation-delay:.9s}.spk3{animation-delay:1.7s}
.gem{animation:gemFloat 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.gem2{animation-delay:2.2s}
@keyframes ringP{0%,100%{opacity:.45}50%{opacity:.95}}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
@keyframes gemFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(6deg)}}
.bottomnav a.active{color:#a855f7;text-shadow:0 0 14px rgba(168,85,247,.85)}
.bottomnav a.active .bi{filter:drop-shadow(0 0 8px rgba(168,85,247,.85))}
@media (max-width:900px){
  .bag-svg{width:114%}
  .oi{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:12px;border-color:rgba(34,211,238,.45);background:linear-gradient(145deg,rgba(38,24,58,.95),rgba(14,8,26,.95));box-shadow:0 0 0 1px rgba(34,211,238,.22),0 0 14px rgba(34,211,238,.30),0 6px 16px rgba(0,0,0,.55)}
  .hero-badge .b-ico{width:16px;height:16px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .ring-g,.spk,.gem{animation:none}
}
@media (max-width:900px){
  .hero-panel{flex-wrap:wrap}
  .trust-row{order:3;flex:1 0 100%;margin-top:12px;gap:8px;justify-content:space-between;flex-wrap:nowrap}
  .trust-row span{flex:1;align-items:flex-start;white-space:normal;font-size:11px;line-height:1.35}
  .trust-row i{font-size:15px;margin-top:1px}
  .bag-svg{width:140%}
}
@media (min-width:901px){
  .hero-copy{grid-column:1;grid-row:1}
  .hero-art{grid-column:2;grid-row:1}
  .trust-row{grid-column:1;grid-row:2;margin-top:-6px}
  .searchbar{grid-column:1;grid-row:3}
  .recent-row{grid-column:1 / -1;grid-row:4}
}

/* ============ v3.2 user-feedback fixes (clean URLs, DP header, compact auth, borderless hero) ============ */
#menuBtn{display:none !important}
.hero-badge{white-space:nowrap;font-size:11px}
.cube-logo{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 0 16px rgba(168,85,247,.85)) drop-shadow(0 0 30px rgba(34,211,238,.35))}
.art-cube{background:linear-gradient(145deg,#2b1655,#150c2e);border:1px solid rgba(168,85,247,.5)}
.pav{overflow:hidden;background:#241335;font-size:0}
.pav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media (max-width:900px){
  .hero{padding:6px 0 0}
  .hero-panel{border:0;border-radius:0;background:linear-gradient(180deg,rgba(139,92,246,.13),rgba(13,13,22,0) 78%);padding:14px 16px 6px;overflow:visible}
  .hero-badge{font-size:10px;padding:4px 9px;gap:5px}
  .hero-badge .b-ico{width:14px;height:14px;font-size:9px}
  .cats{overflow:visible;flex-wrap:wrap;gap:8px;padding:4px 14px 12px;justify-content:flex-start}
  .cat-chip{min-width:86px;padding:10px 12px}
  .auth-card{padding:18px 16px;border-radius:18px;width:min(400px,100%)}
  .auth-card h2{font-size:20px}
  .auth-card input{padding:11px 42px 11px 38px;font-size:14px}
  .auth-card .btn{padding:11px 12px;font-size:14px}
}

/* post-auth cinematic loading overlay (v3.2) */
#piWrap{position:fixed;inset:0;z-index:9997;background:#0b0b12}
#piWrap iframe{width:100%;height:100%;border:0;display:block}

.price-alt{color:var(--muted);font-size:11px;font-weight:600;margin-left:5px;white-space:nowrap}
.pkr-alt{color:var(--muted);font-size:.82em;font-weight:600;font-style:normal;white-space:nowrap}

/* ================= v4.0: light mode, dropdown menu, product/checkout/order screens, hover pop ================= */
:root[data-theme="light"]{
  --bg:#f4f4fb; --bg2:#ececf6; --panel:#ffffff; --panel2:#f1f0fa; --line:#e3e2f0;
  --text:#16162c; --muted:#676b81;
  --grad:linear-gradient(135deg,#7c3aed,#6d28d9);
}
:root[data-theme="light"] body{background:radial-gradient(1200px 600px at 80% -10%,rgba(139,92,246,.10),transparent 60%),var(--bg)}
:root[data-theme="light"] ::placeholder{color:#9a97b0}
:root[data-theme="light"] .hero{color:var(--text)}
:root[data-theme="light"] .card,:root[data-theme="light"] .panel,:root[data-theme="light"] .glass{box-shadow:0 8px 26px rgba(80,70,180,.10)}
:root[data-theme="light"] .bottomnav,:root[data-theme="light"] .topbar{background:rgba(255,255,255,.9)}
:root[data-theme="light"] .icon-btn{background:var(--panel);border-color:var(--line)}
:root[data-theme="light"] .grad,:root[data-theme="light"] .grad2{-webkit-text-fill-color:initial;background:none;color:#7c3aed}
:root[data-theme="light"] .gradt{-webkit-text-fill-color:initial;background:none;color:#7c3aed}


/* bottom nav: 3 tabs */
.bottomnav{grid-template-columns:repeat(3,1fr)}

/* futuristic theme switcher */
.theme-sw{width:52px!important;padding:0!important;display:flex;align-items:center;justify-content:center}
.ts-track{position:relative;display:block;width:34px;height:20px;border-radius:20px;background:linear-gradient(90deg,#312e81,#0f172a);border:1px solid var(--line);box-shadow:inset 0 0 8px rgba(139,92,246,.5);transition:background .3s}
:root[data-theme="light"] .ts-track{background:linear-gradient(90deg,#bfdbfe,#e9d5ff);box-shadow:inset 0 0 8px rgba(124,58,237,.25)}
.ts-knob{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#38bdf8);display:flex;align-items:center;justify-content:center;transition:left .25s cubic-bezier(.2,1.4,.4,1);box-shadow:0 0 10px rgba(139,92,246,.8)}
:root[data-theme="light"] .ts-knob{left:15px;background:linear-gradient(135deg,#f59e0b,#fbbf24);box-shadow:0 0 10px rgba(245,158,11,.7)}
.ts-knob svg{width:11px;height:11px;color:#fff}
.ts-sun{display:none}
:root[data-theme="light"] .ts-sun{display:block}
:root[data-theme="light"] .ts-moon{display:none}

/* shared glass + gradients for new screens */
.glass{background:var(--panel);border:1px solid var(--line);border-radius:20px}
.gradt{background:linear-gradient(90deg,var(--accent),#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.pkrt{color:var(--muted);font-weight:700}
svg.i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pui{padding-top:6px}
.pui .p-head h1{font-size:20px}

/* ---------- single product page (Dark Aurora default) ---------- */
.pp{max-width:560px;margin:0 auto}
.pp-top{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.pp-crumb{font-size:10px;font-weight:900;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.pp-crumbname{font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-hero{position:relative;padding:26px 18px 20px;text-align:center;overflow:hidden;border-radius:26px}
.pp-hero::before{content:'';position:absolute;inset:-40%;background:radial-gradient(closest-side,rgba(139,92,246,.20),transparent 70%);animation:ppSpin 16s linear infinite;pointer-events:none}
:root[data-theme="light"] .pp-hero::before{background:radial-gradient(closest-side,rgba(139,92,246,.12),transparent 70%)}
@keyframes ppSpin{to{transform:rotate(360deg)}}
.pp-badge{position:absolute;top:12px;left:14px;background:linear-gradient(90deg,#f43f5e,#fb7185);color:#fff;font-size:10px;font-weight:900;padding:5px 11px;border-radius:20px;letter-spacing:.4px}
.pp-badge.off{background:linear-gradient(90deg,#f59e0b,#fbbf24);color:#331}
.pp-cat{position:relative;z-index:3;display:flex;width:fit-content;margin:12px auto 0;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:900;padding:5px 11px;border-radius:20px;letter-spacing:.4px;display:inline-flex;gap:6px;align-items:center}
.pp-vis{position:relative;z-index:2;width:128px;height:128px;margin:0 auto;border-radius:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 44px rgba(139,92,246,.28);border:1px solid var(--line)}
.pp-vis img,.pp-vis video{width:74px;height:74px;object-fit:contain;border-radius:16px}
.pp-title{position:relative;margin-top:14px;font-size:21px;font-weight:900;line-height:1.3}
.pp-price{position:relative;display:flex;align-items:baseline;justify-content:center;gap:10px;margin-top:6px}
.pp-price .u{font-size:27px;font-weight:900;background:linear-gradient(90deg,var(--accent),#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-price .p{font-size:13px;font-weight:800;color:var(--muted)}
.pp-desc{margin:14px 0 0;padding:15px 16px}
.pp-desc p{font-size:13.5px;line-height:1.7;white-space:pre-line;color:var(--text);opacity:.92}
.pp-lab{font-size:10.5px;font-weight:900;letter-spacing:1.2px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.pp-lab svg{width:14px;height:14px}
.pp-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:12px}
.pp-stat{padding:13px 8px;text-align:center;border-radius:18px}
.pp-stat .sic{width:34px;height:34px;margin:0 auto 8px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.pp-stat .sic svg{width:17px;height:17px}
.pp-stat b{display:block;font-size:13px;font-weight:900}
.pp-stat b.ok{color:var(--ok)} .pp-stat b.out{color:var(--bad)} .pp-stat b.soldv{color:var(--warn)}
.pp-stat span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.8px;color:var(--muted);margin-top:3px;text-transform:uppercase}
.pp-qty{display:flex;align-items:center;gap:14px;margin-top:12px;padding:14px 16px;border-radius:18px}
.pp-qty .step{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:20px;font-weight:900}
.pp-qty .qv{min-width:40px;text-align:center;font-size:20px;font-weight:900}
.pp-qty .ql{margin-left:auto;text-align:right}
.pp-qty .ql .t{font-size:17px;font-weight:900;background:linear-gradient(90deg,var(--accent),#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-qty .ql .pk{font-size:11px;font-weight:800;color:var(--muted)}
.pp-buy{width:100%;margin:16px 0 6px;border:none;border-radius:18px;padding:17px;font-size:16px;font-weight:900;color:#fff;background:linear-gradient(90deg,var(--accent),#38bdf8);box-shadow:0 10px 30px rgba(139,92,246,.35);letter-spacing:.3px}
.pp-buy:disabled{opacity:.5;box-shadow:none}
.pp-buy:active{transform:scale(.985)}
.pp-safe{text-align:center;font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:10px}

/* ---------- checkout + payment ---------- */
.co{max-width:560px;margin:0 auto}
.co-top{display:flex;align-items:center;gap:10px;margin:4px 0 12px}
.co-top h1{font-size:20px;font-weight:900}
.co-tot{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--muted)}
.co-empty{text-align:center;padding:44px 20px}
.co-empty .co-ic{font-size:40px}
.co-empty h1{font-size:20px;margin:10px 0 4px}
.co-item{display:flex;gap:12px;padding:13px;margin-top:12px;align-items:center;border-radius:18px}
.co-item .thumb{width:56px;height:56px;border-radius:15px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.co-item .thumb img,.co-item .thumb video{width:34px;height:34px;object-fit:contain;border-radius:8px}
.co-item .imid{flex:1;min-width:0}
.co-item .imid b{font-size:13.5px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-item .up{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px}
.co-item .mini{display:flex;align-items:center;gap:8px;margin-top:7px}
.co-item .mstep{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:14px;font-weight:900}
.co-item .mqv{min-width:20px;text-align:center;font-size:13px;font-weight:900}
.co-item .irt{text-align:right}
.co-item .irt b{font-size:14px;font-weight:900;display:block}
.co-item .irt span{font-size:10.5px;font-weight:700;color:var(--muted)}
.co-coupon{display:flex;gap:8px;margin-top:12px;padding:10px;border-radius:16px}
.co-coupon input{flex:1}
.co-coupon button{border:1px solid var(--line);border-radius:13px;padding:0 16px;background:var(--panel2);color:var(--text);font-size:12.5px;font-weight:900}
.co-sums{margin-top:12px;padding:15px 16px;border-radius:18px}
.srow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;font-weight:700;color:var(--muted);padding:4px 0}
.srow b{color:var(--text);text-align:right}
.srow .okv{color:var(--ok)}
.srow.big{font-size:15px;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.gw{margin-top:12px;padding:15px;cursor:pointer;position:relative;overflow:hidden;border-radius:18px}
.gw.sel{box-shadow:0 0 0 2px var(--accent),0 10px 30px rgba(139,92,246,.18)}
.gwh{display:flex;align-items:center;gap:12px}
.gw .gic{width:42px;height:42px;border-radius:13px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto}
.gwh b{font-size:14px;font-weight:900;display:block}
.gwh span{font-size:11px;font-weight:700;color:var(--muted)}
.gtag{margin-left:auto;font-size:9.5px;font-weight:900;letter-spacing:.5px;padding:5px 9px;border-radius:14px}
.gtag.ok{background:rgba(52,211,153,.15);color:#34d399}
.gtag.info{background:rgba(56,189,248,.15);color:#38bdf8}
.gtag.warn{background:rgba(251,191,36,.15);color:#fbbf24}
.gw .radio{position:absolute;top:15px;right:15px;width:20px;height:20px;border-radius:50%;border:2px solid var(--line)}
.gw.sel .radio{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 45%,transparent 50%)}
.gbody{display:none;margin-top:13px;padding-top:13px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}
.gw.sel .gbody{display:block}
.co-pay{margin-top:14px;padding:16px;border-radius:18px}
.co-pay h4{margin:0 0 8px;font-size:13.5px}
.co-pay .amt-big{font-size:24px;font-weight:900;background:linear-gradient(90deg,var(--accent),#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
.co-pay .addr{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:10px 12px;margin-top:9px;font-size:11px;font-weight:800;color:var(--text);word-break:break-all}
.cpb{margin-left:auto;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:6px 10px;font-size:10.5px;font-weight:900;flex:0 0 auto}

/* ---------- order complete ---------- */
.oc{max-width:560px;margin:0 auto}
.oc-hero{text-align:center;padding:30px 18px 24px;margin-top:6px;position:relative;overflow:hidden;border-radius:26px}
.oc-hero .ring{width:92px;height:92px;margin:0 auto;border-radius:50%;background:linear-gradient(135deg,var(--accent),#38bdf8);display:flex;align-items:center;justify-content:center;position:relative;animation:ocPop .5s cubic-bezier(.2,1.6,.4,1)}
.oc-hero .ring.wait{background:var(--panel2);border:1px solid var(--line)}
.oc-hero .ring::after{content:'';position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--accent);opacity:.4;animation:ocPulse 1.8s ease-out infinite}
@keyframes ocPulse{0%{transform:scale(.85);opacity:.5}100%{transform:scale(1.35);opacity:0}}
@keyframes ocPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.oc-hero .ring svg{width:44px;height:44px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.oc-hero h1{margin-top:16px;font-size:22px;font-weight:900}
.oc-hero .sub{color:var(--muted);font-size:12.5px;margin-top:6px}
.oid{display:inline-block;margin-top:14px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:7px 14px;font-size:12px;font-weight:900;letter-spacing:.5px}
.tl{display:flex;margin:16px 6px 0;padding:0 6px}
.tln{flex:1;text-align:center;position:relative}
.tln .dot{width:30px;height:30px;margin:0 auto;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;position:relative;z-index:2;color:var(--muted)}
.tln.done .dot{background:linear-gradient(135deg,var(--ok),#6ee7b7);border-color:transparent;color:#063}
.tln b{display:block;font-size:10.5px;font-weight:900;margin-top:7px}
.tln span{display:block;font-size:9.5px;font-weight:700;color:var(--muted);margin-top:2px}
.tlline{position:absolute;top:15px;left:calc(50% + 18px);width:calc(100% - 36px);height:2px;background:linear-gradient(90deg,var(--ok),var(--accent));z-index:1}
.oc-creds{margin-top:14px;padding:15px 16px;border-radius:20px}
.crow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:12.5px;font-weight:800}
.crow:last-of-type{border-bottom:none}
.crow .k{color:var(--muted);font-size:10.5px;font-weight:900;letter-spacing:.8px;width:74px;flex:0 0 auto;text-transform:uppercase}
.crow .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.btn2{flex:1;border-radius:15px;padding:14px;font-size:13px;font-weight:900;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.btn2.pri{border:none;background:linear-gradient(90deg,var(--accent),#38bdf8);color:#fff}
.oc-items{margin-top:12px;padding:15px 16px;border-radius:20px}

/* ---------- desktop hover preview ---------- */
#hoverPop{position:fixed;z-index:60;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 18px 50px rgba(0,0,0,.5);pointer-events:none;animation:hpIn .18s ease}
@keyframes hpIn{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
#hoverPop .hp-head{display:flex;gap:10px;align-items:center}
#hoverPop .hp-thumb{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
#hoverPop .hp-thumb img,#hoverPop .hp-thumb video{width:26px;height:26px;object-fit:contain;border-radius:6px}
#hoverPop .hp-head b{font-size:12.5px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hoverPop .hp-head span{font-size:10px;font-weight:700;color:var(--muted);display:flex;gap:5px;align-items:center}
#hoverPop .hp-price{margin-top:9px;font-size:16px;font-weight:900;background:linear-gradient(90deg,var(--accent),#38bdf8);-webkit-background-clip:text;background-clip:text;color:transparent}
#hoverPop .hp-price i{font-style:normal;font-size:11px;color:var(--muted);-webkit-text-fill-color:var(--muted)}
#hoverPop .hp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#hoverPop .hp-chips span{font-size:9.5px;font-weight:900;padding:4px 8px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
#hoverPop .hp-chips span.ok{color:#34d399;border-color:rgba(52,211,153,.4)}
#hoverPop .hp-chips span.bad{color:#f87171;border-color:rgba(248,113,113,.4)}
#hoverPop .hp-hint{margin-top:9px;font-size:10px;font-weight:800;color:var(--accent)}
/* home categories: page-scroll only (no independent strip scroll) — owner rule */
#homeProd .chips-scroll{overflow:visible;flex-wrap:wrap;gap:8px}
#homeProd .chips-scroll .cat-chip{flex:0 0 auto}
.pp-cat img,.pp-cat video,.pp-cat .emoji-img{width:14px;height:14px;object-fit:contain;border-radius:4px;padding:0}
.pp-cat .emoji-txt{font-size:12px}
:root[data-theme="light"] .nav{background:rgba(255,255,255,.92);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .nav .brand b,:root[data-theme="light"] .nav .brand span{color:var(--text)}
:root[data-theme="light"] .nav .links a{color:var(--muted)}
:root[data-theme="light"] .nav .links a.active{color:#7c3aed}
:root[data-theme="light"] .toast{background:#fff;color:#16162c;border-color:var(--line)}
:root[data-theme="light"] .drawer,:root[data-theme="light"] .modal{background:var(--bg)}
:root[data-theme="light"] .card .meta{color:var(--muted)}
:root[data-theme="light"] .searchbar input{background:#fff}
:root[data-theme="light"] .bottomnav a{color:var(--muted)}
:root[data-theme="light"] .bottomnav a.active{color:#7c3aed}

/* ================= v4.1: admin-selectable product card styles ================= */
.okv{color:var(--ok)} .badv{color:var(--bad)}
/* --- 3) Modern Gradient --- */
.card--gradient{background:linear-gradient(160deg,#7c3aed 0%,#6d28d9 48%,#4c1d95 100%);border:none;color:#fff;position:relative;overflow:hidden}
.card--gradient::before{content:'';position:absolute;inset:0;background:radial-gradient(140px 100px at 88% 6%,rgba(255,255,255,.22),transparent 60%),radial-gradient(120px 90px at 6% 96%,rgba(56,189,248,.25),transparent 60%);pointer-events:none}
.card--gradient>*{position:relative}
.cg-badge{position:absolute;top:10px;left:10px;z-index:2;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:10px;font-weight:900;padding:5px 11px;border-radius:14px;letter-spacing:.3px}
.cg-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cg-head .p-icon{width:46px;height:46px;border-radius:13px;flex:0 0 auto}
.cg-head .p-icon .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:4px}
.cg-head h3{font-size:14.5px;line-height:1.3;color:#fff;margin:0}
.card--gradient .meta{color:rgba(255,255,255,.85)}
.cg-price{font-size:22px;font-weight:900;color:#fff;margin:6px 0 2px}
.cg-price i{display:block;font-style:normal;font-size:11.5px;font-weight:800;color:rgba(255,255,255,.72)}
.cg-chips{display:flex;gap:8px;margin:9px 0 10px;flex-wrap:wrap}
.cg-chips span{background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:6px 10px;font-size:10.5px;font-weight:800;color:#fff}
.cg-chips .okv{color:#6ee7b7} .cg-chips .badv{color:#fca5a5}
.card--gradient .add{background:linear-gradient(90deg,#ffffff,#e9d5ff);color:#4c1d95;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.card--gradient .add:disabled{background:rgba(255,255,255,.35);color:rgba(255,255,255,.7)}
/* --- 5) Glass Effect --- */
.card--glass{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;overflow:hidden}
.card--glass::before{content:'';position:absolute;inset:0;background:radial-gradient(130px 95px at 86% 10%,rgba(56,189,248,.42),transparent 62%),radial-gradient(150px 110px at 10% 88%,rgba(217,70,239,.38),transparent 62%),radial-gradient(90px 70px at 60% 45%,rgba(139,92,246,.25),transparent 60%);pointer-events:none;animation:glassFloat 9s ease-in-out infinite alternate}
@keyframes glassFloat{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-6px,5px,0) scale(1.06)}}
.card--glass>*{position:relative}
.card--glass h3{color:#fff}
.card--glass .meta{color:rgba(255,255,255,.8)}
.cgl-price{font-size:20px;font-weight:900;color:#fff;margin:6px 0 2px}
.cgl-price i{display:block;font-style:normal;font-size:11px;font-weight:800;color:rgba(255,255,255,.7)}
.cgl-chips{display:flex;gap:8px;margin:9px 0 10px}
.cgl-chips span{flex:1;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:7px 9px;display:flex;flex-direction:column;gap:2px;backdrop-filter:blur(4px)}
.cgl-chips b{font-size:9.5px;font-weight:800;color:rgba(255,255,255,.72);letter-spacing:.4px}
.cgl-chips i{font-style:normal;font-size:12.5px;font-weight:900;color:#fff}
.cgl-chips .okv{color:#6ee7b7} .cgl-chips .badv{color:#fca5a5}
.card--glass .add{background:linear-gradient(90deg,#d946ef,#8b5cf6);color:#fff;box-shadow:0 8px 24px rgba(217,70,239,.35)}
:root[data-theme="light"] .card--glass{background:rgba(255,255,255,.62);border-color:rgba(124,58,237,.18)}
:root[data-theme="light"] .card--glass h3,:root[data-theme="light"] .cgl-price{color:var(--text)}
:root[data-theme="light"] .card--glass .meta,.cgl-price i{color:var(--muted)}
:root[data-theme="light"] .cgl-chips span{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.14)}
:root[data-theme="light"] .cgl-chips b{color:var(--muted)}
:root[data-theme="light"] .cgl-chips i{color:var(--text)}
/* --- 10) Banner / Product Image --- */
.card--banner{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;padding:0 0 12px}
.cb-banner{position:relative;height:96px;display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;cursor:pointer}
.cb-banner::after{content:'';position:absolute;inset:0;background:radial-gradient(120px 70px at 20% 20%,rgba(255,255,255,.28),transparent 60%),radial-gradient(140px 80px at 85% 85%,rgba(217,70,239,.35),transparent 62%);pointer-events:none}
.cb-crown{font-size:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));position:relative}
.cb-brand{font-size:24px;font-weight:900;font-style:italic;color:#fff;letter-spacing:.5px;text-shadow:0 2px 10px rgba(0,0,0,.45);position:relative}
.cb-badge{position:absolute;top:8px;right:8px;z-index:2;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:9.5px;font-weight:900;padding:4px 9px;border-radius:12px;backdrop-filter:blur(4px)}
.card--banner h3{padding:10px 12px 0;font-size:14.5px}
.card--banner .meta{padding:0 12px}
.cb-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px;margin:8px 0 2px}
.cb-price{font-size:18px;font-weight:900;color:#f472b6}
.cb-price i{display:block;font-style:normal;font-size:10.5px;font-weight:800;color:var(--muted)}
.cb-stats{display:flex;flex-direction:column;gap:3px;font-size:10px;font-weight:800;color:var(--muted);text-align:right}
.card--banner .add{margin:10px 12px 0;width:calc(100% - 24px)}

/* ---- v4.1 fixes: neutralize legacy mobile order rules + variant tweaks ---- */
.card--gradient .p-icon,.card--gradient h3,.card--gradient .cat,.card--gradient .meta,.card--gradient .price-row,.card--gradient .sold-row,.card--gradient .add,
.card--glass .p-icon,.card--glass h3,.card--glass .cat,.card--glass .meta,.card--glass .price-row,.card--glass .sold-row,.card--glass .add,
.card--banner .p-icon,.card--banner h3,.card--banner .cat,.card--banner .meta,.card--banner .price-row,.card--banner .sold-row,.card--banner .add{order:initial}
.cg-head{margin-top:26px}
.cg-head h3{min-height:0}
.cg-chips{gap:6px}
.cg-chips span{padding:5px 8px;font-size:9.8px}
.card--glass .badge{position:absolute;top:10px;right:10px;left:auto;width:auto;background:rgba(10,8,18,.62);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);z-index:2}
.card--glass .p-icon{width:60px;height:60px}
.cgl-price i{color:rgba(255,255,255,.7)}
:root[data-theme="light"] .cgl-price i{color:var(--muted)}

/* ---- v4.1 polish ---- */
.cg-chips{display:grid;grid-template-columns:1fr 1fr}
.cg-chips span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgl-chips b{white-space:nowrap;font-size:9px}
.cb-brand{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.cb-crown{flex:0 0 auto}
.cg-chips{gap:5px}
.cg-chips span{padding:4px 6px;font-size:9.2px}
.cg-chips span{padding:4px 5px;font-size:8.8px;font-variant-numeric:tabular-nums}

/* ================= v4.2: categories UX (home segment + new cat grid + detail) ================= */
:root[data-theme="light"]{--ok:#059669;--warn:#b45309;--bad:#dc2626}
#homeProd .p-head{margin-bottom:10px}
#homeProd .p-head .view-toggle{flex:1}
#homeProd .view-toggle button{flex:1;padding:10px 8px;font-size:12.5px;font-weight:800}
.cat-back{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12px;font-weight:800;color:var(--accent2);margin:0 0 10px;width:fit-content;transition:.15s}
.cat-back:hover{border-color:var(--accent);color:var(--accent)}
.cat-head{display:flex;align-items:center;gap:11px;background:linear-gradient(140deg,rgba(139,92,246,.14),transparent 70%),var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:10px}
.cat-head b{font-size:15px;font-weight:900;display:block;line-height:1.25}
.cat-head small{font-size:11px;color:var(--muted);font-weight:700}
.cat-head small i{font-style:normal}
.cat-head .cc-ic{width:48px;height:48px;border-radius:14px;font-size:22px;flex:0 0 auto}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cat-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:left;transition:.16s}
.cat-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.cat-card .cc-ic{width:44px;height:44px;border-radius:13px;margin-bottom:0;background:linear-gradient(140deg,hsl(var(--h,265) 70% 46%),hsl(calc(var(--h,265) + 30) 70% 30%));display:grid;place-items:center;font-size:20px;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.cat-card b{font-size:13px;line-height:1.25;font-weight:800}
.cat-card .cc-n{color:var(--muted);font-size:10.5px;font-weight:700;line-height:1.5}
.cat-card .cc-n em{font-style:normal;color:var(--ok);font-weight:800}
.cat-card .cc-n i{font-style:normal;color:var(--muted)}
.cat-card .cc-ar{position:absolute;top:10px;right:12px;color:var(--muted);font-size:15px;font-weight:800}
:root[data-theme="light"] .cat-card{box-shadow:0 6px 20px rgba(80,70,180,.10)}
:root[data-theme="light"] .cat-card .cc-ic{box-shadow:0 6px 16px rgba(80,70,180,.22)}
:root[data-theme="light"] .cat-back{color:#6d28d9}
:root[data-theme="light"] .cat-head{background:linear-gradient(140deg,rgba(124,58,237,.08),transparent 70%),var(--panel)}
:root[data-theme="light"] .view-toggle{background:var(--panel2)}
:root[data-theme="light"] .card--gradient .meta{color:rgba(255,255,255,.88)}
:root[data-theme="light"] .card--gradient h3,:root[data-theme="light"] .cg-price{color:#fff}

/* ================= v4.2.1: cart drawer + checkout line items redesign ================= */
.cl{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.cl .p-icon{overflow:hidden}
.cl .p-icon .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:4px}
.cl .ci-n b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.cl .ci-n span{display:block;margin-top:2px}
.cl .cr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cl .cr .lt{font-size:12.5px;font-weight:800;text-align:right;white-space:nowrap}
.cl .rm{width:26px;height:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:11px;display:grid;place-items:center}
.co-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center}
.co-item .thumb .emoji-img{width:100%;height:100%;object-fit:contain;border-radius:inherit;padding:6px}
.co-item .imid b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:0}
.co-item .imid .up{margin-top:3px}
.co-item .ico{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.co-item .mini{margin-top:0;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px 6px;gap:6px}
.co-item .irt{text-align:right}
:root[data-theme="light"] .co-item .mini{background:var(--panel2)}

/* ===== v4.5 wallet strip + deposit page ===== */
#walletStrip{max-width:var(--wrap,1200px);margin:10px auto 0;padding:0 14px}
.ws-in{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:15px;background:var(--panel);border:1px solid var(--line);box-shadow:0 10px 26px -18px rgba(80,60,200,.5)}
.ws-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:linear-gradient(135deg,var(--accent),var(--accent2));flex-shrink:0}
.ws-tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.ws-tx small{font-size:10px;font-weight:750;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.ws-tx b{font-size:14.5px;color:var(--text)}
.ws-add{margin-left:auto;padding:8px 14px;font-size:12px;border-radius:11px}
.ws-hist{border:none;background:none;color:var(--muted);font-size:11.5px;font-weight:700;cursor:pointer;padding:6px}
.dep-page{max-width:760px;margin:0 auto}
.dep-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dep-head h1{margin:0;font-size:22px}
.dep-usd{margin-left:auto;padding:6px 12px;border-radius:999px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:var(--ok);font-size:10.5px;font-weight:800;letter-spacing:.06em}
.dep-sum{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:16px 0;padding:14px 16px;border-radius:15px;background:var(--panel);border:1px solid var(--line)}
.dep-sum small{display:block;font-size:10px;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.05em}
.dep-sum b{font-size:16px;color:var(--text)}
.dep-sum .btn{margin-left:auto}
.dep-steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dep-steps span{padding:7px 12px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:10.8px;font-weight:750}
.dep-steps span.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
.dep-h{font-size:13.5px;margin:18px 0 10px;color:var(--text)}
.dep-methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.dep-m{display:flex;gap:11px;align-items:center;padding:12px;border-radius:14px;background:var(--panel);border:1.5px solid var(--line);cursor:pointer;transition:.16s;color:var(--text)}
.dep-m:hover{border-color:var(--accent)}
.dep-m.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.dep-mi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;background:var(--panel2);flex-shrink:0}
.dep-mn b{display:block;font-size:12.5px}
.dep-mn small{display:block;font-size:10.3px;color:var(--muted);font-weight:650;line-height:1.4}
.dep-amt{display:flex;align-items:center;gap:0;border-radius:14px;background:var(--panel);border:1.5px solid var(--line);overflow:hidden;max-width:340px}
.dep-pre{padding:0 12px;font-size:17px;font-weight:800;color:var(--muted);border-right:1px solid var(--line);align-self:stretch;display:grid;place-items:center}
.dep-amt input{flex:1;border:none;background:none;padding:13px 14px;font-size:16px;font-weight:750;color:var(--text);outline:none;min-width:0}
.dep-quick{display:flex;gap:8px;margin:10px 0 6px;flex-wrap:wrap}
.dep-quick button{padding:7px 15px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:750;cursor:pointer}
.dep-quick button:hover{border-color:var(--accent)}
.dep-conv,.dep-pay{margin-top:14px;padding:14px 16px;border-radius:15px;background:var(--panel);border:1px solid var(--line)}
.dc-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--muted);font-weight:650;flex-wrap:wrap}
.dc-row:last-of-type{border-bottom:none}
.dc-row b{margin-left:auto;color:var(--text);font-weight:750;text-align:right}
.dc-row b.pkr{color:var(--accent2)}
.dep-ins{padding:10px 12px;border-radius:11px;background:var(--panel2);font-size:12px;color:var(--text);font-weight:600;line-height:1.55;white-space:pre-line}
.dep-lb{display:block;margin:10px 0;font-size:11.5px;color:var(--muted);font-weight:700}
.dep-lb input{width:100%;margin-top:5px;padding:10px 12px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:13px;outline:none}
.dep-done{text-align:center;padding:34px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.dep-done-ic{font-size:38px;margin-bottom:8px}
.dep-cards{display:none;flex-direction:column;gap:9px;margin-top:12px}
.dep-card{padding:11px 13px;border-radius:13px;background:var(--panel);border:1px solid var(--line)}
.dep-card b{display:block;font-size:14px;color:var(--text);margin:4px 0 2px}
.dep-card small{font-size:10.5px;color:var(--muted);font-weight:650}
@media (max-width:700px){.tbl-wrap:has(+ .dep-cards){display:none}.dep-cards{display:flex}.dep-sum .btn{margin-left:0}}

/* ===== v4.5.2 deposit page — reference-C exact ===== */
header.nav .dep-backhdr{margin-right:2px}
.dep2{max-width:1080px;margin:0 auto;padding:18px 16px 90px}
.d2-head{display:flex;align-items:flex-start;gap:12px}
.d2-head h1{margin:0;font-size:23px;line-height:1.2;letter-spacing:-.02em;font-weight:800}
.d2-br{display:none}
.d2-pill{margin-left:auto;flex-shrink:0;padding:7px 13px;border-radius:999px;background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.45);color:var(--ok);font-size:10.5px;font-weight:800;letter-spacing:.05em;white-space:nowrap}
.d2-sub{margin:6px 0 16px;font-size:12.5px}
.d2-cols{display:grid;grid-template-columns:1fr;gap:16px}
.d2-bal{display:flex;align-items:center;gap:12px;padding:14px 16px}
.d2-bal-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 8px 20px -8px rgba(124,58,237,.8);flex-shrink:0}
.d2-bal-tx{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.d2-bal-tx small{font-size:10.5px;color:var(--muted);font-weight:700}
.d2-bal-tx b{font-size:17px}
.d2-bal-p{font-size:10.5px;color:var(--warn);font-weight:750}
.d2-vt{margin-left:auto;padding:8px 13px;font-size:11.5px;border-radius:11px}
.d2-lb{font-size:13px;font-weight:800;margin:16px 0 10px;color:var(--text)}
.d2-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.d2-tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px 10px;border-radius:14px;background:var(--panel);border:1.5px solid var(--line);cursor:pointer;transition:.16s;min-width:0}
.d2-tile:hover{border-color:var(--accent)}
.d2-tile.sel{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent),0 10px 26px -14px rgba(124,58,237,.7)}
.d2-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:17px;font-weight:850;flex-shrink:0;box-shadow:inset 0 -8px 14px -10px rgba(0,0,0,.5)}
.d2-tn{font-size:10.8px;font-weight:750;color:var(--text);text-align:center;line-height:1.25;overflow-wrap:anywhere}
.d2-ts{font-size:9px;color:var(--muted);font-weight:650}
.d2-tile{position:relative}
.d2-tag{position:absolute;top:5px;right:5px;font-style:normal;font-size:8px;font-weight:800;letter-spacing:.02em;color:#34D399;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.35);border-radius:999px;padding:1px 5px;line-height:1.55;pointer-events:none}
.d2-det{padding:16px}
.d2-det-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.d2-det-h b{font-size:14px}
.d2-det-h .hint{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--accent2)}
.dep-amt{display:flex;align-items:stretch;border-radius:13px;background:var(--panel2);border:1.5px solid var(--line);overflow:hidden;height:50px}
.dep-pre{padding:0 14px;font-size:16px;font-weight:800;color:var(--muted);border-right:1px solid var(--line);display:grid;place-items:center}
.dep-amt input{flex:1;border:none;background:none;padding:0 14px;font-size:16px;font-weight:750;color:var(--text);outline:none;min-width:0}
.dep-quick{display:flex;gap:8px;margin:10px 0 12px;flex-wrap:wrap}
.dep-quick button{padding:8px 16px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:750;cursor:pointer;transition:.15s}
.dep-quick button.on,.dep-quick button:hover{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.d2-conv{display:flex;flex-direction:column;gap:9px;margin:4px 0 14px}
.d2-cr{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);flex-wrap:wrap}
.d2-ci{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.d2-cl{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1;font-size:10.8px;color:var(--muted);font-weight:700}
.d2-cl b{font-size:12.8px;color:var(--text);font-weight:800}
.d2-cl b.pkr{color:var(--accent2)}
.d2-note{font-size:10.3px;color:var(--muted);font-weight:650;line-height:1.5;margin:2px 2px 0}
.d2-cta{width:100%;margin-top:6px;padding:14px 16px;border:none;border-radius:13px;background:linear-gradient(90deg,#A855F7 0%,#7C3AED 45%,#3B82F6 100%);color:#fff;font-size:13.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 12px 30px -12px rgba(124,58,237,.9);transition:.18s}
.d2-cta:hover{filter:brightness(1.08)}
.d2-cta:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.d2-pay{padding:16px;margin-top:14px}
.d2-done{text-align:center;padding:26px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--line);margin-top:14px}
.d2-done-ic{font-size:34px;margin-bottom:6px}
.d2-hist{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:12px}
.d2-hcard{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.d2-hcard b{font-size:15px}
.d2-hcard small{font-size:10.3px;color:var(--muted);font-weight:650}
.d2-hrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
@media (min-width:960px){
  .d2-cols{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .d2-head h1{font-size:26px}
  .d2-br{display:inline}
  .d2-hist{grid-template-columns:1fr 1fr}
  .dep2{padding:26px 22px 60px}
}
@media (max-width:430px){
  .d2-grid{gap:8px}
  .d2-ic{width:36px;height:36px;font-size:15px;border-radius:10px}
  .d2-head h1{font-size:20px}
  .d2-pill{padding:6px 10px;font-size:9.5px}
  .dep2{padding:14px 12px 88px}
}
/* wallet strip reference-A match */
#walletStrip .ws-add{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;color:#fff;box-shadow:0 10px 24px -10px rgba(124,58,237,.9);font-weight:800}
#walletStrip .ws-ic{background:linear-gradient(135deg,var(--accent),var(--accent2))}

@media (max-width:959px){.d2-vt{display:none}}

.ws-ic svg{width:20px;height:20px}

html{overflow-x:clip}
body{overflow-x:clip}

/* v4.5.4 profile menu balance box + manual delivery notes */
.me-balbox{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin:6px 8px;border-radius:12px;background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(59,130,246,.10));border:1px solid rgba(124,58,237,.35)}
.me-balbox small{font-size:9.6px;letter-spacing:.09em;text-transform:uppercase;color:var(--mut);font-weight:800}
.me-balbox b{font-size:16.5px;color:var(--text)}
.me-balbox span:not(#meRate):not(#msRate){font-size:11.5px;color:var(--mut);font-weight:650}
.me-balbox #meRate,.me-balbox #msRate{font-size:10.4px;color:#a78bfa;font-weight:700;margin-top:2px}
.mm-dep{margin:2px 8px 6px;padding:9px 12px;border-radius:11px;border:0;cursor:pointer;font-weight:800;font-size:12.5px;color:#fff;background:linear-gradient(135deg,#a855f7,#7c3aed 55%,#3b82f6);box-shadow:0 10px 22px -12px rgba(124,58,237,.9)}
.ddmenu .mm-dep{display:block;width:calc(100% - 16px)}
.co-manual{border-color:rgba(245,158,11,.5)!important}
.co-manual-note{padding:14px 16px;margin-bottom:14px;border-radius:14px;border:1px solid rgba(245,158,11,.5);background:rgba(245,158,11,.10)}
.co-manual-note b{color:#fbbf24;font-size:13.5px}
.co-manual-note p{margin:6px 0 0;font-size:12px;color:var(--mut);line-height:1.55}

/* v4.5.5 customer dashboard (reference tokens) */
.dsh{max-width:560px;margin:0 auto;padding:14px 14px 90px}
.dsh-welc h1{font-size:23px;font-weight:850;letter-spacing:-.01em;margin:2px 0 3px}
.dsh-welc .sub{font-size:12px;color:var(--mut)}
.dsh-wallet{display:flex;align-items:center;gap:12px;margin:14px 0;padding:16px 14px;border-radius:18px;border:1px solid rgba(124,45,255,.55);background:linear-gradient(135deg,rgba(124,45,255,.16),rgba(11,18,43,.6) 60%);box-shadow:0 0 0 1px rgba(124,45,255,.12),0 18px 40px -22px rgba(124,45,255,.55)}
.dsh-w-ic{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,#9B35FF,#7C2DFF);display:grid;place-items:center;flex:none;box-shadow:0 10px 24px -10px rgba(124,45,255,.8)}
.dsh-w-ic svg{width:25px;height:25px}
.dsh-w-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.dsh-w-tx small{font-size:10.5px;color:var(--mut);font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.dsh-w-tx b{font-size:24px;font-weight:850;letter-spacing:-.01em}
.dsh-w-tx span{font-size:11.5px;color:var(--mut);font-weight:650}
.dsh-w-act{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.dsh-w-act .btn{padding:10px 16px;border-radius:12px;font-size:12.5px;font-weight:800;background:linear-gradient(135deg,#9B35FF,#7C2DFF);border:0;box-shadow:0 12px 26px -12px rgba(124,45,255,.9)}
.dsh-link{font-size:11px;font-weight:750;color:#b7a5fd}
.dsh-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dsh-q{display:flex;align-items:center;gap:10px;padding:13px 12px;border-radius:15px;border:1px solid var(--ln);background:var(--pn);text-decoration:none;color:var(--tx)}
.dsh-q-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--qc);background:color-mix(in srgb,var(--qc) 16%,transparent);flex:none}
.dsh-q-ic svg{width:19px;height:19px}
.dsh-q-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.dsh-q-tx b{font-size:12.3px;font-weight:800}
.dsh-q-tx small{font-size:10.3px;color:var(--mut);font-weight:650}
.dsh-ch{color:var(--mut);font-size:16px;font-weight:700}
.dsh-hrow{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}
.dsh-hrow h2{font-size:15.5px;font-weight:850}
.dsh-hrow a{font-size:11px;font-weight:750;color:#b7a5fd}
.dsh-ov{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dsh-ovc{display:flex;align-items:center;gap:9px;padding:12px 10px;border-radius:14px;border:1px solid var(--ln);background:var(--pn)}
.dsh-ov-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--oc);background:color-mix(in srgb,var(--oc) 16%,transparent);flex:none}
.dsh-ov-ic svg{width:18px;height:18px}
.dsh-ovc div{display:flex;flex-direction:column}
.dsh-ovc small{font-size:10px;color:var(--mut);font-weight:750}
.dsh-ovc b{font-size:17px;font-weight:850}
.dsh-ro{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:14px;border:1px solid var(--ln);background:var(--pn);margin-bottom:9px;cursor:pointer;text-align:left;color:var(--tx)}
.dsh-ro-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:18px;background:linear-gradient(135deg,rgba(124,45,255,.25),rgba(25,216,245,.15));flex:none}
.dsh-ro-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.dsh-ro-tx b{font-size:12.2px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-ro-tx small{font-size:10.3px;color:var(--mut);font-weight:650}
.dsh-ro-rt{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.dsh-ro-rt b{font-size:12px;font-weight:800}
.dsh-badge{padding:3px 9px;border-radius:8px;font-size:9.6px;font-weight:800;border:1px solid}
.dsh-badge.st-completed,.dsh-badge.st-confirmed{color:#11D6A0;border-color:rgba(17,214,160,.5);background:rgba(17,214,160,.12)}
.dsh-badge.st-processing,.dsh-badge.st-review,.dsh-badge.st-pending_payment{color:#FFAA16;border-color:rgba(255,170,22,.5);background:rgba(255,170,22,.12)}
.dsh-badge.st-cancelled,.dsh-badge.st-failed{color:#F42E70;border-color:rgba(244,46,112,.5);background:rgba(244,46,112,.12)}
.dsh-rec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dsh-rc{display:flex;flex-direction:column;gap:10px;padding:13px 12px;border-radius:15px;border:1px solid var(--ln);background:var(--pn);cursor:pointer;color:var(--tx);text-align:left}
.dsh-rc-top{display:flex;align-items:center;gap:9px}
.dsh-rc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,#3B82F6,#7C2DFF);flex:none}
.dsh-rc-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.dsh-rc-tx b{font-size:12.2px;font-weight:800}
.dsh-rc-tx small{font-size:9.9px;color:var(--mut);font-weight:650;line-height:1.3}
.dsh-rc-ft{display:flex;align-items:center;justify-content:space-between;gap:6px}
.dsh-count{padding:4px 9px;border-radius:8px;background:rgba(124,45,255,.16);color:#c4b5fd;font-size:9.8px;font-weight:800}
.dsh-minis{display:flex;gap:4px}
.dsh-minis span{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;background:rgba(255,255,255,.07)}
.dsh-empty,.dsh-err{padding:20px;border-radius:14px;border:1px dashed var(--ln);color:var(--mut);font-size:12px;text-align:center}
.skel{position:relative;overflow:hidden;background:var(--pn)!important;border-color:var(--ln)!important;min-height:58px}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:skmv 1.2s infinite}
@keyframes skmv{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.bell-btn{position:relative}
.bell-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:#F42E70;box-shadow:0 0 0 2px var(--bg)}
.bell-panel{width:290px;max-height:340px;overflow-y:auto;padding:0}
.bp-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--ln);position:sticky;top:0;background:var(--pn)}
.bp-head b{font-size:12.5px}
.bp-head button{border:0;background:none;color:#b7a5fd;font-size:10.5px;font-weight:750;cursor:pointer}
.bp-item{padding:10px 12px;border-bottom:1px solid var(--ln)}
.bp-item.unr{background:rgba(124,45,255,.08)}
.bp-item b{font-size:11.8px}
.bp-item p{margin:3px 0;font-size:10.8px;color:var(--mut);line-height:1.45}
.bp-item small{font-size:9.6px;color:var(--mut)}
.bp-empty{padding:18px;text-align:center;color:var(--mut);font-size:11.5px}
@media (min-width:960px){.dsh{max-width:760px}.dsh-qa{grid-template-columns:repeat(4,minmax(0,1fr))}.dsh-rec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:340px){.dsh-wallet{flex-wrap:wrap}.dsh-w-act{flex-direction:row;align-items:center;width:100%;justify-content:space-between}.dsh-ovc b{font-size:15px}}

/* ---- v4.5.7: teaser, svg chrome icons ---- */
.teaser{max-width:430px;margin:20px auto 34px;padding:18px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);text-align:center}
.teaser h3{margin:0 0 12px;font-size:15px;color:var(--text)}
.tz-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tz-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:12px;font-weight:600}
.tz-ic{font-size:14px;line-height:1}
.teaser .hint{margin:12px 0 0;font-size:11px;color:var(--muted)}
.si svg,.bi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.co-ic svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- v4.5.8: 2-item bottom nav, google pw note, header cleanup ---- */
.bottomnav{justify-content:center;gap:10px}
.bottomnav a{flex:0 1 190px;justify-content:center}
.ep-pw.disabled{opacity:.72}
.ep-pw.disabled input{background:var(--panel2);cursor:not-allowed}
#epPwNote{margin:6px 0 0;color:var(--muted);font-size:11.5px}

/* ---- v4.5.9: dashboard emoji-media sizing ---- */
.dsh-rc-ic .emoji-img,.dsh-ro-ic .emoji-img{width:100%;height:100%;object-fit:contain;display:block}
.dsh-minis span .emoji-img{width:20px;height:20px;object-fit:contain;display:block;vertical-align:middle}
.dsh-rc-ic .emoji-txt,.dsh-ro-ic .emoji-txt{font-size:22px;line-height:1}

/* v4.5.10: deposit back button lives inside the page, never in the global header */
.d2-back{margin:2px 0 10px}

/* ---- v4.5.11: smooth-scroll perf (look unchanged) ---- */
.card{content-visibility:auto;contain-intrinsic-size:auto 260px}
.nav,.bottomnav{transform:translateZ(0)}
#seasonLayer span{will-change:transform}

/* v4.5.12: logout lives on dashboard */
.dsh-logout{margin:14px 0 2px}

/* ---- v4.5.13: no visible tap blocks on touch + Add to Cart + fly-to-cart ---- */
*{-webkit-tap-highlight-color:transparent}
body{touch-action:manipulation}
:focus:not(:focus-visible){outline:none}
.cbtns{display:flex;flex-direction:column;gap:8px}
.addcart{font-size:12px;padding:7px 12px;border-radius:9px}
.fly-ico{position:fixed;z-index:200;pointer-events:none;will-change:transform,opacity;box-shadow:0 8px 22px rgba(0,0,0,.45)}
@keyframes cartBump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
#cartBtn.bump{animation:cartBump .5s ease}

/* ---- v4.5.14: bell panel fix + full stock/sold numbers + compact 4-across mobile cards ---- */
.cg-chips i,.cb-stats i{font-style:normal}
.bico{font-style:normal}
#bellPanel:not([hidden]){display:block}
.cg-chips span,.cgl-chips span,.cb-stats span,.cb-row span{overflow:visible;text-overflow:clip;white-space:normal;word-break:break-word;max-width:100%}

/* ---- v4.5.15: cards back to pre-compaction look; stock/sold stay fully visible ---- */
@media (max-width:900px){
  .cg-chips b,.cb-stats b{display:none}
  .cg-chips span,.cb-stats span{white-space:nowrap}
  .cb-stats{flex-wrap:wrap}
  .cb-row{flex-direction:column;align-items:flex-start;gap:2px}
}
/* cart-count attention: pop + expanding rings + tempting wiggle (transform/opacity only) */
@keyframes ccPop{0%{transform:scale(.4)}55%{transform:scale(1.55)}75%{transform:scale(.92)}100%{transform:scale(1)}}
.cart-count.pop{animation:ccPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes ccRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(2.7);opacity:0}}
.cart-count.ring::before,.cart-count.ring::after{content:'';position:absolute;inset:-2px;border-radius:999px;border:2px solid var(--accent,#8b5cf6);animation:ccRing 1.15s ease-out infinite;pointer-events:none}
.cart-count.ring::after{animation-delay:.5s}
@keyframes ccTempt{0%,100%{transform:rotate(0) scale(1)}12%{transform:rotate(-9deg) scale(1.14)}26%{transform:rotate(8deg) scale(1.14)}40%{transform:rotate(-6deg) scale(1.08)}54%{transform:rotate(4deg) scale(1.05)}70%{transform:rotate(0) scale(1)}}
#cartBtn.tempt{animation:ccTempt 1.15s ease-in-out 3}


/* v4.9.3 — Binance Pay USDT-only instructions */
.bp-note{display:flex;flex-direction:column;gap:4px;margin:10px 0;padding:11px 13px;border-radius:12px;background:rgba(240,185,11,.09);border:1px solid rgba(240,185,11,.35);color:var(--text);font-size:12.5px;line-height:1.5}
.bp-note b{color:#F0B90B;font-size:13px}
.bp-steps{margin:8px 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--mut);line-height:1.5}
.bp-steps li b{color:var(--text)}
.d2-cl small{display:block;color:var(--mut);font-size:10.5px;margin-top:2px}

/* v4.10 notifications */
.bp-tabs{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.bp-tabs button{flex:1;min-width:120px;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--mut);font-size:11.5px;font-weight:750;cursor:pointer;transition:.15s}
.bp-tabs button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--text)}
.bp-tabs .bp-n{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--bad);color:#fff;font-size:9.5px;font-style:normal;font-weight:800;margin-left:3px}
.bp-item{display:flex;gap:9px;align-items:flex-start}
.bp-item .bp-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:16px;flex-shrink:0;overflow:hidden}
.bp-item .bp-ic img{width:26px;height:26px;object-fit:contain}
.bp-item .bp-tx{flex:1;min-width:0}
.bp-meta{display:flex;gap:6px;flex-wrap:wrap;margin:5px 0 3px}
.bp-prod{font-size:10px;font-weight:750;padding:2px 7px;border-radius:6px;background:rgba(124,58,237,.16);color:var(--accent2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-ord{font-size:10px;font-weight:750;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.07);color:var(--mut);font-family:ui-monospace,monospace}
.bp-item.imp{background:linear-gradient(90deg,rgba(124,58,237,.12),transparent);border-left:2px solid var(--accent)}
.bp-item[data-link]:not([data-link=""]){cursor:pointer}
.bp-foot{padding:8px 12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--mut);line-height:1.5}

/* v4.10 product icons in admin */
.pico-wrap{display:inline-grid;place-items:center;vertical-align:-6px;margin-right:7px}
.pico{display:inline-grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.07);font-size:15px;line-height:1;overflow:hidden}
.pico-img,.pico-vid{border-radius:7px;object-fit:cover;background:rgba(255,255,255,.06);vertical-align:middle}

/* v4.11 price history graph */
.pp-hist{position:relative}
.ph-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ph-head b{font-size:13.5px}
.ph-low{font-size:10px;font-weight:750;padding:3px 8px;border-radius:7px;background:rgba(52,211,153,.16);color:#34d399}
.ph-chips{margin-left:auto;display:flex;gap:4px}
.ph-chips button{border:1px solid var(--line);background:var(--panel2);color:var(--muted);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:7px;cursor:pointer}
.ph-chips button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--text)}
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 10px}
.ph-stats>div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:7px 10px}
.ph-stats span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.ph-stats b{font-size:13.5px}
.ph-up{color:#f87171}.ph-down{color:#34d399}.ph-flat{color:var(--muted)}
.ph-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);padding:2px 2px 0}
@media (max-width:520px){.ph-stats{grid-template-columns:repeat(2,1fr)}}

/* v4.12 currency switcher */
.cur-wrap{position:relative}
/* v4.16.5: switcher moved into the products toolbar — navbar copy is hidden while that toolbar is on screen */
body.cur-in-toolbar .nav .cur-wrap{display:none}
.cur-wrap.in-tool .cur-btn{height:36px}
.cur-wrap.in-tool .cur-menu{left:0;right:auto}
@media (max-width:560px){
  .cur-wrap.in-tool .cur-menu{position:fixed;left:10px;right:10px;top:auto;width:auto;max-width:420px;margin:0 auto}
}
/* v4.16.5: in the products toolbar the code stays visible and Sort keeps a usable width on phones */
@media (max-width:640px){
  .cur-wrap.in-tool{order:-1;flex:0 0 auto}
  .cur-wrap.in-tool .cur-code{display:inline}
  .cur-wrap.in-tool .cur-btn{height:36px;padding:0 10px;gap:5px}
  .p-toolbar .tool-right{gap:10px;row-gap:10px}
  .sortlab{flex:1 1 140px;min-width:120px}
  .p-toolbar .switch{flex:0 0 auto}
}
.cur-btn{display:flex;align-items:center;gap:5px;height:38px;padding:0 11px;border-radius:11px;background:var(--panel);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:750;cursor:pointer}
.cur-btn:hover{background:var(--panel2)}
.cur-btn.on{border-color:var(--accent)}
.cur-btn .cur-sym{font-size:14px;line-height:1}
.cur-btn .cur-code{letter-spacing:.4px;opacity:.85}
.cur-menu{position:absolute;top:calc(100% + 8px);left:auto;right:0;width:322px;max-height:430px;padding:0;overflow:hidden;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:80}
.cur-menu[hidden]{display:none}
.cur-menu:not([hidden]){display:flex}
.cur-head{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;border-bottom:1px solid var(--line);font-size:12.5px}
.cur-note{font-size:10px;font-weight:750;color:var(--accent2);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.28);padding:2px 7px;border-radius:6px}
.cur-search{margin:9px 11px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:12px;outline:none}
.cur-search:focus{border-color:var(--accent)}
.cur-list{overflow-y:auto;padding:0 6px 8px}
.ddmenu .cur-row{display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;padding:8px 8px;border-radius:9px;cursor:pointer;color:var(--text)}
.ddmenu .cur-row:hover{background:rgba(255,255,255,.055);color:var(--text)}
.ddmenu .cur-row.on{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.cur-row .cur-sym{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:13px;flex:0 0 auto}
.cur-row .cur-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.cur-row .cur-tx b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-row .cur-tx small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur-row .cur-rate{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cur-empty{padding:16px;text-align:center;color:var(--muted);font-size:12px}
.fx-val{white-space:nowrap}
.pp-watch{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:10px;padding:11px;border-radius:12px;border:1px dashed var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:12.5px;font-weight:650;cursor:pointer}
.pp-watch:hover{color:var(--text);border-color:var(--accent)}
.pp-watch.on{color:#6ee7b7;border-style:solid;border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.09)}
@media (max-width:700px){
  .cur-btn{height:34px;padding:0 8px;gap:3px}
  .cur-btn .cur-code{display:none}
  .cur-menu{position:fixed;top:58px;left:10px;right:10px;width:auto;max-height:70vh}
}

/* v4.13: tappable notifications — product icon + "go to the exact event" */
.bp-item.tappable{cursor:pointer;position:relative;transition:background .15s ease}
.bp-item.tappable:hover{background:rgba(124,45,255,.12)}
.bp-item .bp-ic video{width:26px;height:26px;object-fit:contain}
.bp-item .bp-go{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:17px;line-height:1;color:var(--mut);opacity:.65}
.bp-item.tappable:hover .bp-go{color:var(--accent2);opacity:1}
.bp-item .bp-tx{padding-right:12px}
.flash-target{animation:flashTgt 2.2s ease}
@keyframes flashTgt{0%,60%{box-shadow:0 0 0 2px var(--accent),0 0 26px rgba(124,45,255,.45)}100%{box-shadow:0 0 0 0 transparent}}

/* Maintenance is a storefront state, including owner browser sessions. */
body.maint-mode .nav,body.maint-mode #announceBar,body.maint-mode .auth-page,body.maint-mode #onbPage{display:none!important}

/* v4.18.5: never freeze visible phone animation. Keep the original SVG shapes,
   colours, logo, timings and glows; move static artwork on independent HTML
   compositor layers instead of relaying out animated SVG geometry every frame. */
.bag-stage{isolation:isolate;contain:layout style}
.bag-svg{position:relative;display:block;aspect-ratio:1;flex-shrink:0;filter:none;will-change:transform}
.bag-base,.bag-particle{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bag-base,.bag-particle>svg{filter:drop-shadow(0 0 22px rgba(255,61,184,.35)) drop-shadow(0 0 14px rgba(34,211,238,.22)) drop-shadow(0 16px 30px rgba(76,29,149,.55))}
.bag-particle{display:block;pointer-events:none;transform-box:border-box;transform-origin:var(--particle-origin,50% 50%);will-change:transform,opacity}
.bag-particle>svg{display:block;width:100%;height:100%;overflow:visible}
.bag-glow{will-change:transform,opacity}
/* The pedestal belongs behind the bag, as in the original SVG draw order. */
.bag-particle.ring-g{z-index:-1}
#bagStage.motion-paused, #bagStage.motion-paused *,
#bagStage.motion-paused *::before, #bagStage.motion-paused *::after {
  animation-play-state:paused!important;
}

/* Preserve moving glass gradients in view; skip only invisible ambient work. */
.card--glass.ambient-sleep::before{animation-play-state:paused}

/* v4.18.6: touch-scroll rendering, not an animation freeze. Keep the moving
   glass gradients; replace repeated live backdrop sampling with tinted glass.
   Per-card content-visibility estimates were changing row geometry mid-swipe. */
.grid .card,.cat-grid .cat-card{animation-fill-mode:backwards}
#gridSent.grid-more{height:auto;display:flex;justify-content:center;padding:18px}
@media (max-width:900px), (hover:none) and (pointer:coarse) {
  .nav,.bottomnav,.card--glass,.cgl-chips span,.card--glass .badge,.modal,.modal-backdrop,.drawer{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .nav{background:rgba(11,11,18,.97)}
  .card--glass{background:rgba(27,27,35,.96)}
  :root[data-theme="light"] .nav{background:rgba(255,255,255,.97)}
  :root[data-theme="light"] .card--glass{background:rgba(245,243,255,.96)}
  .card{content-visibility:visible;contain-intrinsic-size:none}
}
@media (hover:none) and (pointer:coarse) {
  .card:hover{transform:none;box-shadow:none}
}

/* v4.19.0 payment guidance / safe text and file delivery; retain existing brand typography. */
.payment-panel{font-family:inherit;line-height:1.65;overflow-wrap:anywhere;text-align:left}.payment-panel .amt-big{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.payment-guidance{border:1px solid rgba(245,185,11,.3);background:rgba(245,185,11,.06);border-radius:14px;padding:14px;margin:16px 0}.payment-guidance p{margin:8px 0;font-size:13px}.payment-panel .addr{overflow-wrap:anywhere;word-break:break-word}.delivery-item{border:1px solid var(--line,rgba(140,140,160,.25));border-radius:12px;padding:14px;margin:10px 0;min-width:0;overflow-wrap:anywhere}.delivery-text{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font:13px/1.65 ui-monospace,monospace;max-height:65vh;overflow:auto;padding:12px;background:rgba(120,120,140,.08);border-radius:8px}.delivery-item summary{cursor:pointer;font-weight:700}.delivery-item a{display:inline-block;margin:6px 5px 0 0}.payment-panel [role=status]{padding:12px 0;font-weight:600}

/* v4.20: accessible saved payment deadline; no decorative animation changes. */
.payment-countdown{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;padding:15px 17px;margin-bottom:18px;border:1px solid #6c66ff66;border-radius:14px;background:#7867ff12}
.payment-countdown span{font-size:14px;font-weight:600}.payment-time{font:700 28px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--text,#ecebff)}
.payment-countdown small{grid-column:1/-1;color:var(--muted,#aaa9bd);font-size:12px;line-height:1.6}.payment-ended{border-color:#ef6666}.payment-closed p{line-height:1.75}.payment-settled{display:none}
.payment-receipt{margin:18px 0;padding:16px;border:1px solid #7773aa44;border-radius:14px;min-width:0}.payment-receipt h3{margin-top:0}.receipt-ref{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;word-break:break-word;line-height:1.7;min-width:0}
@media(max-width:380px){.payment-countdown{padding:12px;gap:5px}.payment-countdown span{font-size:12px}.payment-time{font-size:24px}.payment-receipt{padding:12px}.payment-receipt .kv{grid-template-columns:1fr}.payment-receipt dd{margin-left:0}}

/* Storefront controls: bounded editors/previews; existing brand/motion styles untouched. */
.sf-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.sf-toolbar{position:relative}
.sf-editor-row{border:1px solid var(--line);padding:16px;border-radius:14px;margin:12px 0;min-width:0}
.sf-editor-row>.row{gap:8px;flex-wrap:wrap;margin-bottom:12px}.sf-check{display:flex!important;align-items:center;gap:8px}.sf-check input{width:auto!important}
.sf-preview-shell{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px;margin-top:16px;background:#111827}
#sfPreviewFrame{display:block;border:0;height:820px;max-width:none;background:white;margin:auto}
.sf-preview-label{position:fixed;bottom:8px;left:8px;z-index:99999;font:600 10px system-ui;padding:6px 10px;color:white;background:#312e81;border:1px solid #a5b4fc;border-radius:20px;pointer-events:none}
.sf-product-options{display:flex;flex-wrap:wrap;gap:6px;max-height:190px;overflow:auto;margin:12px 0}.sf-source{display:block;font-size:10px;color:var(--mut)}
.sf-collection{margin:28px auto;max-width:1280px;padding:16px 0}.sf-collection h2{font-size:clamp(20px,3vw,28px);margin:0 0 18px}.sf-collection details,.sf-collection blockquote{border:1px solid var(--line);background:var(--panel);padding:16px;border-radius:14px;margin:10px 0;overflow-wrap:anywhere}.sf-collection summary{cursor:pointer;font-weight:650}.sf-collection blockquote p{margin:0 0 8px}.sf-collection blockquote footer{font-size:12px;color:var(--mut)}
.sf-hide-stock .cg-chips>span:first-child,.sf-hide-stock .cgl-chips>span:first-child,.sf-hide-stock .cb-stats>span:first-child{display:none}
.sf-hide-sold .cg-chips>span:nth-child(2),.sf-hide-sold .cgl-chips>span:nth-child(2),.sf-hide-sold .cb-stats>span:nth-child(2){display:none}
.sf-notice-link{color:inherit;text-decoration:underline;font-weight:700}.sf-editor-row input,.sf-editor-row textarea,.sf-editor-row select{min-width:0;max-width:100%}
@media(max-width:600px){.sf-toolbar .row>.btn{flex:1 1 145px}.sf-tabs>.btn{flex:1 1 125px}.sf-editor-row{padding:12px}.sf-collection{padding:8px}.sf-toolbar h3{flex-wrap:wrap}.sf-tabs{gap:6px}}

body.auth-mode:not(.maint-mode) #announceBar:not([hidden]){display:block!important}
.auth-title,.auth-sub,.hero-badge,.trust-row span,.sf-catalog-title{overflow-wrap:anywhere}

/* ============================================================ v4.51.0 — FLASH SALE
   Template is chosen by the owner in Admin → Flash sale (A Neon Cyber · B Aurora Glass ·
   C Deal Ticket [default] · D Spotlight Stage). Every animation below is CSS only; the countdown
   digits are written by the shared ticker in app.js from the server's real end time. */
.fs-strip{margin:14px 0 18px}
.fs-strip-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;margin-bottom:10px}
.fs-strip-head b{letter-spacing:.1em;font-size:12px}
.fs-live-dot{width:8px;height:8px;border-radius:50%;background:#22e08a;box-shadow:0 0 0 0 rgba(34,224,138,.6);animation:fsPulse 2s infinite}
@keyframes fsPulse{70%{box-shadow:0 0 0 9px rgba(34,224,138,0)}100%{box-shadow:0 0 0 0 rgba(34,224,138,0)}}
.fs-count{font-weight:800;font-size:10.5px;padding:2px 8px;border-radius:999px;background:rgba(34,224,138,.14);color:#22e08a;border:1px solid rgba(34,224,138,.35)}
.fs-note{color:var(--muted,#8b8ba6);font-size:11.5px}
.fs-strip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:14px;grid-auto-rows:1fr}
.fs-card{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.fs-views{font-size:10.5px;color:var(--muted,#8b8ba6);margin-top:6px}
.fs-stock{display:inline-block;font-size:10.5px;font-weight:800;margin-top:6px;padding:2px 7px;border-radius:6px;background:#ffe6bf;color:#8a5a1e;border:1px dashed #e0b078}
.fs-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:12px;border-radius:9px;padding:8px 14px;border:0;cursor:pointer}
.fs-pr{display:flex;align-items:baseline;gap:8px}
.fs-now{font-size:22px;font-weight:900;letter-spacing:-.5px}
.fs-pr s{opacity:.65;font-size:11.5px}
.fs-off{font-size:9.5px;font-weight:900;padding:2px 6px;border-radius:5px}
.fs-ic{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.fs-ic-fb{font-size:26px;line-height:1}
.fs-corner{position:absolute;top:8px;right:8px;z-index:3;font-size:10px;font-weight:900;padding:3px 7px;border-radius:999px;
  background:linear-gradient(135deg,#ff2d75,#ff7a3d);color:#fff;box-shadow:0 6px 16px -8px #ff2d75;animation:fsBreathe 2.6s ease-in-out infinite}
@keyframes fsBreathe{50%{transform:scale(1.06)}}
.card.has-flash{box-shadow:0 0 0 1.5px rgba(255,45,117,.55),0 18px 34px -26px rgba(255,45,117,.9)}
.card.has-flash{position:relative;z-index:2}

/* ---- A · Neon Cyber */
.fs-A{background:#080a12;border:1px solid rgba(0,212,255,.30);padding:12px;font-family:ui-monospace,Menlo,monospace}
.fs-A .fs-c{position:absolute;width:14px;height:14px;border:2px solid #00d4ff;opacity:.9}
.fs-A .c1{top:5px;left:5px;border-right:0;border-bottom:0}.fs-A .c2{top:5px;right:5px;border-left:0;border-bottom:0}
.fs-A .c3{bottom:5px;left:5px;border-right:0;border-top:0}.fs-A .c4{bottom:5px;right:5px;border-left:0;border-top:0}
.fs-A .fs-scan{position:absolute;left:0;right:0;height:60px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,212,255,.16),transparent);animation:fsScan 3.2s linear infinite}
@keyframes fsScan{0%{top:-60px}100%{top:100%}}
.fs-A .fs-hdr{display:flex;align-items:center;gap:6px;margin-bottom:8px;position:relative;z-index:2}
.fs-A .fs-tag{font-size:9px;font-weight:900;letter-spacing:.12em;color:#041018;background:#00d4ff;padding:3px 7px;border-radius:4px}
.fs-A .fs-pin{margin-left:auto;font-size:8.4px;letter-spacing:.1em;color:#8be9ff;border:1px solid rgba(0,212,255,.45);padding:2px 5px;border-radius:4px}
.fs-A .fs-body{flex:1;display:flex;gap:10px;align-items:center;position:relative;z-index:2}
.fs-A .fs-box{width:62px;height:62px;flex:0 0 62px;border-radius:10px;padding:5px;border:1px solid rgba(0,212,255,.4);
  background:radial-gradient(circle at 40% 30%,rgba(0,212,255,.2),rgba(6,16,26,.9) 75%)}
.fs-A .fs-main b{font-family:system-ui,sans-serif;font-size:12.5px;display:block;line-height:1.25}
.fs-A .fs-meta{font-size:9px;letter-spacing:.08em;color:#7fd8ef;margin:3px 0 5px}
.fs-A .fs-now{color:#eafcff;text-shadow:0 0 16px rgba(0,212,255,.7)}
.fs-A .fs-off{background:#b6ff3d;color:#041018}
.fs-A .fs-btn{margin-top:auto;width:100%;background:linear-gradient(90deg,#00d4ff,#7ef9ff);color:#02141b;position:relative;z-index:2}

/* ---- B · Aurora Glass */
.fs-B{background:rgba(18,18,30,.55);border:1px solid rgba(255,255,255,.16);padding:12px;backdrop-filter:blur(12px)}
.fs-B .fs-blob{position:absolute;border-radius:50%;filter:blur(24px);opacity:.75}
.fs-B .b1{width:120px;height:120px;background:#ff2d75;top:8%;left:6%;animation:fsDrift 12s ease-in-out infinite alternate}
.fs-B .b2{width:110px;height:110px;background:#7c5cff;top:30%;right:4%;animation:fsDrift 15s ease-in-out infinite alternate-reverse}
.fs-B .b3{width:96px;height:96px;background:#00d4ff;bottom:2%;left:28%;animation:fsDrift 18s ease-in-out infinite alternate}
@keyframes fsDrift{to{transform:translate3d(18px,-14px,0) scale(1.12)}}
.fs-B .fs-glass{position:relative;z-index:2;border-radius:14px;padding:11px;background:rgba(10,10,18,.62);border:1px solid rgba(255,255,255,.14)}
.fs-B .fs-top{display:flex;gap:9px;align-items:center}
.fs-B .fs-chip{width:46px;height:46px;flex:0 0 46px;border-radius:12px;padding:4px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22)}
.fs-B .fs-pill{display:inline-block;font-size:8.6px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:999px;
  background:rgba(255,45,117,.3);border:1px solid rgba(255,255,255,.26);color:#fff}
.fs-B b{display:block;font-size:12.5px;margin-top:4px}
.fs-B .fs-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.fs-B .fs-clock{font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;color:#fff;border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:5px 9px}
.fs-B .fs-btn{flex:1;background:linear-gradient(135deg,#ff2d75,#7c5cff);color:#fff}
.fs-B .fs-now{background:linear-gradient(100deg,#fff,#ffd7e6,#d8ccff,#fff);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:fsSheen 3.2s linear infinite}
@keyframes fsSheen{to{background-position:220% 0}}

/* ---- C · Deal Ticket (default) */
.fs-C{background:linear-gradient(180deg,#fff8ee,#ffeede);color:#241a2b;border-radius:16px;box-shadow:0 18px 34px -26px rgba(0,0,0,.7)}
.fs-C .fs-ribbon{position:absolute;top:0;right:0;font-size:9px;font-weight:900;letter-spacing:.1em;color:#3a1200;
  background:linear-gradient(90deg,#ffd166,#ff9d00);padding:4px 12px;border-radius:0 16px 0 10px;animation:fsRibbon 3s ease-in-out infinite}
@keyframes fsRibbon{50%{filter:brightness(1.14)}}
.fs-C .fs-c-inner{display:flex;gap:10px;align-items:center;padding:14px 14px 8px}
.fs-C .fs-tile{width:48px;height:48px;flex:0 0 48px;border-radius:12px;background:#fff;padding:4px;border:1px solid #ecdcc9}
.fs-C b{font-size:13px;display:block;line-height:1.25}
.fs-C small{font-size:9.6px;color:#7a6b7f}
.fs-C .fs-pr.pad{padding:2px 14px 0}
.fs-C .fs-now{color:#e01f5b;font-size:24px}
.fs-C .fs-pr s{color:#9a8b9e;opacity:1}
.fs-C .fs-save{margin-left:auto;font-size:9.4px;font-weight:900;color:#0d4a2b;background:#b8f5cf;padding:3px 7px;border-radius:6px}
.fs-C .fs-punch{height:12px;margin:9px 0 8px;
  background:radial-gradient(circle at 6px 6px,rgba(0,0,0,.16) 5px,transparent 5.4px) repeat-x 0 0/20px 12px}
.fs-C .fs-bottom{display:flex;align-items:center;gap:8px;padding:0 14px 13px;margin-top:auto}
.fs-C .fs-cds{font-size:13px;font-weight:900;font-variant-numeric:tabular-nums;background:#fff;border:1px solid #e6d5c3;
  border-radius:7px;padding:4px 9px;box-shadow:0 2px 0 #e6d5c3;color:#241a2b}
.fs-C .fs-btn{margin-left:auto;background:linear-gradient(135deg,#ff2d75,#ff7a3d);color:#fff}
.fs-C .fs-views{color:#7a6b7f;padding:0 14px 12px;margin:0}

/* ---- D · Spotlight Stage */
.fs-D{background:radial-gradient(120% 90% at 50% -20%,#2b1b48 0%,#0a0a12 62%);border:1px solid rgba(255,255,255,.12);padding:12px}
.fs-D .fs-rays{position:absolute;left:50%;top:-45%;width:380px;height:380px;margin-left:-190px;pointer-events:none;opacity:.75;
  background:conic-gradient(from 0deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,.1) 8deg,transparent 16deg,transparent 30deg,
    rgba(255,255,255,.08) 38deg,transparent 46deg,transparent 60deg,rgba(255,255,255,.09) 68deg,transparent 76deg);
  animation:fsSpin 24s linear infinite}
@keyframes fsSpin{to{transform:rotate(1turn)}}
.fs-D .fs-halo{position:absolute;left:50%;top:6px;width:140px;height:140px;margin-left:-70px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,209,102,.5),transparent 62%);filter:blur(12px);animation:fsHalo 3.4s ease-in-out infinite}
@keyframes fsHalo{50%{transform:scale(1.12);opacity:.7}}
.fs-D .fs-inner{position:relative;z-index:2}
.fs-D .fs-top{display:flex;align-items:center;gap:6px}
.fs-D .fs-tag{font-size:8.8px;font-weight:900;letter-spacing:.08em;color:#2a1500;background:linear-gradient(90deg,#ffe600,#ffb020);padding:3px 7px;border-radius:5px}
.fs-D .fs-pin{margin-left:auto;font-size:8.2px;font-weight:800;color:#ffe9b8;border:1px solid rgba(255,214,102,.45);padding:2px 6px;border-radius:999px}
.fs-D .fs-hero{display:grid;place-items:center;padding:12px 0 6px}
.fs-D .fs-orb{width:76px;height:76px;border-radius:50%;padding:9px;background:radial-gradient(circle at 38% 32%,#3a2a63,#15121f 72%);
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 0 20px rgba(255,214,102,.2);animation:fsFloat 4.6s ease-in-out infinite}
@keyframes fsFloat{50%{transform:translateY(-5px)}}
.fs-D .fs-name{display:block;text-align:center;font-size:13px}
.fs-D .fs-pr.center{justify-content:center;margin-top:4px}
.fs-D .fs-now{color:#fff;text-shadow:0 6px 22px rgba(255,209,102,.5)}
.fs-D .fs-off{background:#b6ff3d;color:#2a1500}
.fs-D .fs-row{display:flex;align-items:center;gap:8px;margin-top:auto}
.fs-D .fs-digits{font-size:12.5px;font-weight:900;font-variant-numeric:tabular-nums;color:#ffe9b8}
.fs-D .fs-btn{flex:1;background:linear-gradient(90deg,#ffe600,#ffb020);color:#2a1500}
.fs-D .fs-views{color:#c9b9e8;text-align:center}

/* users who ask for less motion get the card without movement, not a broken layout */
@media (prefers-reduced-motion: reduce){
  /* animation-name (not the shorthand) so the touch-scroll guards elsewhere in this file stay intact */
  .fs-card *,.fs-corner,.fs-live-dot{animation-name:none!important}
}
@media (max-width:520px){
  .fs-strip-grid{grid-template-columns:1fr}
  .fs-C .fs-bottom{flex-wrap:wrap}
}

/* ============================================================ v4.56.0 — FLASH CARD "LIGHT" PASS
   The owner asked for the cards to pull the eye: an RGB light travelling around the border, a breathing
   discount chip, a sheen on the price and a CTA that keeps nudging. Everything is transform / opacity /
   filter on a handful of small elements, so the strip stays smooth while the page scrolls.
   All of it is opt-out: the media query at the bottom stops every animation for reduced-motion visitors. */
.fs-card{
  --ring-a:#ff2d75; --ring-b:#ffd166; --ring-c:#22e3ff; --ring-d:#8b5cf6;
  isolation:isolate;
}
.fs-A{--ring-a:#00d4ff; --ring-b:#b6ff3d; --ring-c:#7ef9ff; --ring-d:#00d4ff}
.fs-B{--ring-a:#ff2d75; --ring-b:#7c5cff; --ring-c:#22e3ff; --ring-d:#ffd166}
.fs-C{--ring-a:#ff2d75; --ring-b:#ff7a3d; --ring-c:#ffd166; --ring-d:#e01f5b}
.fs-D{--ring-a:#ffe600; --ring-b:#ffb020; --ring-c:#ff7a3d; --ring-d:#fff6a8}

/* the ring: a conic gradient spinning behind a mask that keeps only the 2.5px border */
.fs-ring{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:8;padding:3px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  overflow:hidden;opacity:.95}
.fs-ring i{position:absolute;left:50%;top:50%;width:240%;aspect-ratio:1;translate:-50% -50%;will-change:transform;
  background:conic-gradient(from 0deg,
    transparent 0 42%, var(--ring-a) 55%, var(--ring-b) 62%, var(--ring-c) 70%, var(--ring-d) 78%, transparent 92% 100%);
  animation:fsRingSpin 3.4s linear infinite;will-change:transform}
@keyframes fsRingSpin{to{transform:rotate(1turn)}}
/* the same light bleeding just inside the edge, so the border reads as a glowing tube */
.fs-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 14px -4px var(--ring-b),inset 0 0 30px -18px var(--ring-a);opacity:.85;
  animation:fsRingGlow 3.4s ease-in-out infinite}
@keyframes fsRingGlow{0%,100%{opacity:.55}50%{opacity:1}}

/* discount chip breathes, price sheens, CTA keeps nudging — the three things that make people click */
.fs-card .fs-off,.fs-card .fs-corner,.fs-card .fs-save{animation:fsChipPulse 2.1s ease-in-out infinite}
@keyframes fsChipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.fs-card .fs-now{background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative}
.fs-card .fs-now::after{content:"";position:absolute;inset:-4px -8px;border-radius:8px;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.75) 50%,transparent 58%);
  transform:translateX(-140%);will-change:transform;animation:fsPriceSweep 3.6s linear infinite}
.fs-A .fs-now{background-image:linear-gradient(100deg,#eafcff 0 38%,#ffffff 50%,#7ef9ff 62% 100%)}
.fs-B .fs-now{background-image:linear-gradient(100deg,#ffffff 0 38%,#ffd7e6 50%,#d8ccff 62% 100%)}
.fs-C .fs-now{background-image:linear-gradient(100deg,#e01f5b 0 38%,#ff8fb4 50%,#e01f5b 62% 100%)}
.fs-D .fs-now{background-image:linear-gradient(100deg,#ffffff 0 38%,#ffe9b8 50%,#ffffff 62% 100%)}
@keyframes fsPriceSweep{0%{transform:translateX(-140%)}60%,100%{transform:translateX(140%)}}
.fs-A .fs-now,.fs-B .fs-now,.fs-D .fs-now{text-shadow:none}
.fs-card .fs-btn{position:relative;overflow:hidden;animation:fsCtaNudge 2.8s ease-in-out infinite}
@keyframes fsCtaNudge{0%,86%,100%{transform:translateY(0) scale(1)}92%{transform:translateY(-2px) scale(1.03)}}
.fs-card .fs-btn::after{content:"";position:absolute;top:-60%;left:0;width:45%;height:220%;
  transform:translateX(-160%) rotate(16deg);will-change:transform;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:fsCtaSheen 2.8s ease-in-out infinite}
@keyframes fsCtaSheen{0%,62%{transform:translateX(-160%) rotate(16deg)}100%{transform:translateX(330%) rotate(16deg)}}
.fs-card .fs-tag,.fs-card .fs-pill,.fs-card .fs-ribbon{animation:fsTagBlink 3.2s ease-in-out infinite}
.fs-card .fs-cds,.fs-card .fs-digits,.fs-card .fs-clock{animation:fsClockBeat 2.4s ease-in-out infinite}
@keyframes fsClockBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes fsTagBlink{0%,100%{opacity:1}50%{opacity:.82}}
.fs-strip-head .fs-live-dot{animation:fsPulse 2s infinite, fsDotGlow 2s ease-in-out infinite}
@keyframes fsDotGlow{50%{box-shadow:0 0 0 0 rgba(34,224,138,0),0 0 14px 2px rgba(34,224,138,.9)}}
/* the whole card breathes very slightly — 1.5px, enough to read as "alive", not enough to move the layout */
.fs-card{animation:fsCardBreathe 6s ease-in-out infinite}
@keyframes fsCardBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
.fs-card:hover .fs-ring i{animation-duration:1.6s}
.fs-card:hover{animation-duration:0s}
.fs-card:active{transform:scale(.985)}

/* v4.59.0: cards that are off screen do no work at all (IntersectionObserver adds .fs-anim) */
.fs-card:not(.fs-anim) .fs-ring i,
.fs-card:not(.fs-anim)::after,
.fs-card:not(.fs-anim) .fs-now::after,
.fs-card:not(.fs-anim) *{animation-name:none!important}
/* v4.59.0: a drawer or modal over the page pauses the storefront loops (the scrim's blur would otherwise
   re-composite the animated grid every frame) */
body.overlay-open .fs-card *,body.overlay-open .fs-card::after,body.overlay-open .fs-ring i{animation-name:none!important}
/* v4.59.0: measured-low-fps devices keep the look, lose the continuous loops */
body.perf-lite .fs-ring i,body.perf-lite .fs-card::after,body.perf-lite .fs-now::after{animation-name:none!important}
body.perf-lite .fs-card .fs-now{background:none;color:inherit;-webkit-text-fill-color:currentColor}
body.perf-lite .fs-card,body.perf-lite .fs-card .fs-off,body.perf-lite .fs-card .fs-tag,
body.perf-lite .fs-card .fs-ribbon,body.perf-lite .fs-card .fs-pill,body.perf-lite .fs-card .fs-btn{animation-duration:9s}

@media (prefers-reduced-motion: reduce){
  .fs-ring i,.fs-card,.fs-card::after,.fs-card *{animation-name:none!important}
  .fs-card .fs-now{background:none;color:inherit;-webkit-text-fill-color:currentColor}
}

/* ============================================================ v4.58.0 — COUPON APPLIED (shopper side)
   The price counts down in JS; these are the layer around it: the discount row pops in, one sweep of
   light crosses the totals card, a "+ you saved" chip floats up, cart lines glow green. Transform and
   opacity only; prefers-reduced-motion (bottom) removes every one of them. */
.cp-host{position:relative}
.cp-row-pop{animation:cpRowPop 900ms cubic-bezier(.2,1.3,.4,1) 1}
@keyframes cpRowPop{
  0%{transform:translateY(8px) scale(.96);opacity:0}
  55%{transform:translateY(0) scale(1.06);opacity:1}
  100%{transform:translateY(0) scale(1);opacity:1}}
#discRow.cp-row-pop #cartDisc,.co-sums .srow.cp-row-pop b{color:#22e38a;text-shadow:0 0 16px rgba(34,227,138,.55)}
.cp-sheen{position:relative;overflow:hidden}
.cp-sheen::after{content:"";position:absolute;top:-60%;left:0;width:34%;height:220%;pointer-events:none;
  transform:translateX(-140%) rotate(14deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:cpSweep 900ms ease-out 1}
@keyframes cpSweep{from{transform:translateX(-140%) rotate(14deg)}to{transform:translateX(420%) rotate(14deg)}}
.cp-save-float{position:absolute;right:12px;top:-30px;z-index:5;pointer-events:none;
  font-size:12.5px;font-weight:800;color:#0b3;padding:5px 10px;border-radius:999px;
  background:rgba(34,227,138,.16);border:1px solid rgba(34,227,138,.5);
  animation:cpFloat 1.85s cubic-bezier(.2,.9,.3,1) 1 forwards}
@keyframes cpFloat{
  0%{transform:translateY(14px) scale(.8);opacity:0}
  22%{transform:translateY(0) scale(1.07);opacity:1}
  70%{transform:translateY(-14px) scale(1);opacity:1}
  100%{transform:translateY(-30px) scale(.96);opacity:0}}
.cp-item-glow{animation:cpItemGlow 900ms ease-out 1}
@keyframes cpItemGlow{
  0%{background:rgba(34,227,138,.22);box-shadow:0 0 0 1px rgba(34,227,138,.45) inset}
  100%{background:transparent;box-shadow:0 0 0 0 transparent}}
.cp-applied{background:rgba(34,227,138,.18)!important;border-color:rgba(34,227,138,.6)!important;color:#22e38a!important;
  animation:cpAppliedPop 420ms cubic-bezier(.2,1.4,.4,1) 1}
@keyframes cpAppliedPop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.cp-shake{animation:cpShake 480ms ease-in-out 1}
@keyframes cpShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.cp-bad{border-color:#ff5d73!important;box-shadow:0 0 0 2px rgba(255,93,115,.22)!important}

@media (prefers-reduced-motion: reduce){
  .cp-row-pop,.cp-sheen::after,.cp-save-float,.cp-item-glow,.cp-applied,.cp-shake{animation-name:none!important}
}

/* v4.60.0: server-rendered crawl block. It exists only in the first HTML response — inside <main id="view">,
   which is visibility:hidden while body.booting — and app.js removes it before the boot splash lifts, so a
   shopper never sees it. These rules only keep it sane if scripts are blocked or very slow. */
/* #seoSsr is taken out of the flow: visibility:hidden still reserves layout space, and a taller
   document adds a scrollbar that would shift the whole page for a moment. Out of flow = zero CLS.
   #seoSsrNoJs keeps normal flow because it is the page for a visitor without JavaScript. */
#seoSsr{position:absolute;top:0;left:0;right:0;z-index:0;pointer-events:none}
/* v4.60.1: ironclad guard — once the app has booted the crawl block can never paint, even if a cached copy
   of the home markup is restored on Back. It exists only for the pre-boot HTML and for crawlers. */
body:not(.booting) #seoSsr{display:none!important}
#seoSsrNoJs{max-width:920px;margin:0 auto;padding:14px 18px 22px;font-size:14px;line-height:1.65;color:var(--txt,#e8e8f2)}
#seoSsr,#seoSsrNoJs{font-size:14px;line-height:1.65;color:var(--txt,#e8e8f2);max-width:920px;padding:14px 18px 22px}
#seoSsr h1,#seoSsrNoJs h1{font-size:22px;line-height:1.3;margin:0 0 8px}
#seoSsr h2,#seoSsrNoJs h2{font-size:16px;margin:16px 0 6px}
#seoSsr h3,#seoSsrNoJs h3{font-size:14px;margin:12px 0 2px}
#seoSsr p,#seoSsrNoJs p{margin:6px 0}
#seoSsr .ssr-crumbs,#seoSsrNoJs .ssr-crumbs{font-size:12px;opacity:.8}
#seoSsr .ssr-crumbs i,#seoSsrNoJs .ssr-crumbs i{font-style:normal;margin:0 4px}
#seoSsr .ssr-price b,#seoSsrNoJs .ssr-price b{font-size:20px}
#seoSsr .ssr-meta,#seoSsrNoJs .ssr-meta{font-size:12px;opacity:.75}
#seoSsr ul,#seoSsrNoJs ul{margin:6px 0 0 18px;padding:0}
#seoSsr li,#seoSsrNoJs li{margin:3px 0}
#seoSsr a,#seoSsrNoJs a{color:var(--violet,#a78bfa)}

/* ============================================================ v4.60.6 — DEPOSIT PAYOUT (shopper side)
   The moment an admin approval lands, the deposit panel stops being a status line and becomes a small
   show: a split-flap board riffles the amount, the digits settle on the credited value, a printer slot
   feeds out an invoice-style receipt (the same design language as the store invoice: purple header,
   orange rule, tear notches, label/value rows, green verified strip).
   Only transform/opacity animate; the paper slides inside a box that already reserves the space, so
   nothing below it reflows. prefers-reduced-motion (bottom of this block) shows the finished state. */
.dpr-wrap{position:relative;overflow:hidden}
.dpr-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;border-radius:999px;padding:5px 11px;border:1px solid rgba(251,191,36,.4);
  background:rgba(251,191,36,.12);color:var(--warn);transition:background .25s,color .25s,border-color .25s}
.dpr-badge i{width:7px;height:7px;border-radius:50%;background:currentColor}
.dpr-wrap.dpr-paid .dpr-badge{background:rgba(52,211,153,.14);border-color:rgba(52,211,153,.5);color:var(--ok)}
.dpr-title{font-size:16px;margin:9px 0 2px;letter-spacing:-.2px}
.dpr-sub{margin:0 0 12px;color:var(--muted);font-size:12.5px}

/* split-flap board */
.dpr-board{display:flex;justify-content:center;gap:5px;padding:11px 9px;border-radius:13px;
  background:linear-gradient(#0d0d16,#0a0a11);border:1px solid var(--line);overflow:hidden}
.dpr-cell{position:relative;width:30px;height:46px;border-radius:5px;overflow:hidden;perspective:220px;
  background:linear-gradient(#22222f 0 49.4%,#12121c 50.6% 100%);border:1px solid #2b2b3d;
  font:800 24px/46px ui-monospace,Menlo,monospace;text-align:center;color:#e9e5ff}
.dpr-cell::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.8);z-index:5}
.dpr-cell b{position:relative;z-index:1;display:block;font-weight:800}
.dpr-cell .dpr-leaf{position:absolute;left:-1px;right:-1px;top:-1px;height:24px;overflow:hidden;z-index:4;
  background:#22222f;border-radius:5px 5px 0 0;transform-origin:bottom center}
.dpr-cell .dpr-leaf span{display:block;height:46px;line-height:46px}
.dpr-cell .dpr-leaf::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5))}
.dpr-wrap.dpr-paid .dpr-cell{border-color:rgba(52,211,153,.32)}
.dpr-note{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin:7px 3px 0;
  letter-spacing:.04em;text-transform:uppercase}

/* printer slot + paper */
.dpr-printer{margin-top:13px}
.dpr-slot{position:relative;height:24px;border-radius:9px;background:linear-gradient(#20202e,#141420);
  border:1px solid #2b2b3d;box-shadow:0 6px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);z-index:3}
.dpr-slot::before{content:"";position:absolute;left:14px;right:14px;top:8px;height:7px;border-radius:4px;
  background:#07070c;box-shadow:inset 0 2px 5px rgba(0,0,0,.9)}
.dpr-led{position:absolute;left:11px;top:-8px;width:6px;height:6px;border-radius:50%;background:#3a3a52;
  transition:background .2s,box-shadow .2s}
.dpr-wrap.dpr-printing .dpr-led{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dpr-clip{position:relative;overflow:hidden;margin:0 2px}

/* the receipt itself — invoice language */
.dpr-rc{position:relative;background:#fff;border-radius:15px;overflow:hidden;color:#0f172a;
  box-shadow:0 18px 40px rgba(0,0,0,.55);transform:translateY(-101%) translateZ(0);will-change:transform}
.dpr-top{background:radial-gradient(230px 130px at 50% 0%,rgba(139,92,246,.5),transparent 70%),
  linear-gradient(160deg,#3b2263,#261745 55%,#150c28);padding:14px 13px 12px;text-align:center}
.dpr-logo{width:50px;height:50px;border-radius:13px;margin:0 auto 8px;padding:2px;
  background:linear-gradient(135deg,#8b5cf6,#f5c518 55%,#8b5cf6);box-shadow:0 8px 22px rgba(139,92,246,.45)}
.dpr-logo img{width:100%;height:100%;border-radius:11px;display:block;object-fit:cover}
.dpr-store{font-size:9.5px;font-weight:800;letter-spacing:.2em;color:#cbb8ff;text-transform:uppercase}
.dpr-amt{font-size:27px;font-weight:900;letter-spacing:-.6px;color:#fff;margin:4px 0 8px;line-height:1.1}
.dpr-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.08em;
  color:#0b3b28;background:#39e08b;border-radius:999px;padding:4px 10px;text-transform:uppercase;
  transform:scale(.6);opacity:0}
.dpr-wrap.dpr-pilling .dpr-pill{animation:dprPill 460ms cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes dprPill{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
.dpr-orange{height:3px;background:linear-gradient(90deg,#ff8a00,#ffb703,#ff8a00)}
.dpr-tear{position:relative;height:14px;background:#fff}
.dpr-tear .dash{position:absolute;left:14px;right:14px;top:7px;border-top:2px dashed #dfe3ea}
.dpr-tear i{position:absolute;top:1px;width:18px;height:18px;border-radius:50%;background:var(--bg,#0b0b12)}
.dpr-tear i.l{left:-9px}
.dpr-tear i.r{right:-9px}
.dpr-body{padding:2px 13px 0}
.dpr-row{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:6.5px 0;
  border-bottom:1px solid #eef0f4;font-size:11.5px;color:#7b8494}
.dpr-row:last-child{border-bottom:0}
.dpr-row b{color:#0f172a;font-weight:800;text-align:right;max-width:64%;word-break:break-word}
.dpr-row b.green{color:#0f8a54}
.dpr-row b.mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:-.2px}
.dpr-good{margin:9px 13px 0;display:flex;align-items:center;gap:7px;background:#eafaf1;border:1px solid #c9f0dc;
  border-radius:10px;padding:8px 10px;font-size:11px;font-weight:800;color:#14804a}
.dpr-good span:last-child{margin-left:auto;font-size:10px;opacity:.85}
.dpr-verify{margin:8px 13px 13px;display:flex;align-items:center;gap:9px;background:#f4f1ff;border:1px solid #e4dcff;
  border-radius:12px;padding:9px 10px}
.dpr-verify .vk{min-width:0;flex:1}
.dpr-verify .vk b{display:block;font-size:11px;font-weight:900;color:#241a45;letter-spacing:.02em}
.dpr-verify .vk small{display:block;font-size:9.5px;color:#6b6285;margin:1px 0 5px}
.dpr-verify .ref{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;font-weight:800;
  color:#5b21b6;background:#e9e1ff;border-radius:6px;padding:3px 7px;letter-spacing:.02em;word-break:break-all}
.dpr-verify .shield{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#8b5cf6,#6d28d9);color:#fff;font-size:20px;box-shadow:0 8px 18px rgba(124,58,237,.35)}
.dpr-wrap.dpr-done .dpr-good,.dpr-wrap.dpr-done .dpr-verify{animation:dprFadeUp .4s ease 1 both}
@keyframes dprFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dpr-foot{display:flex;gap:8px;margin-top:12px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.dpr-wrap.dpr-done .dpr-foot{opacity:1;transform:none;transition-delay:.15s}
.dpr-foot .btn,.dpr-foot a.btn{flex:1}

@media (prefers-reduced-motion: reduce){
  .dpr-cell .dpr-leaf{display:none}
  .dpr-wrap.dpr-pilling .dpr-pill,.dpr-wrap.dpr-done .dpr-good,.dpr-wrap.dpr-done .dpr-verify{animation-name:none!important;
    opacity:1;transform:none}
  .dpr-pill{opacity:1;transform:none}
  .dpr-foot{opacity:1;transform:none;transition:none}
  .dpr-rc{transition:none}
}