/* ═══════════════════════════════════════════════════
   ShopRazz AI v4 — Dark Neon Design System
   Violet/Magenta + Cyan neon on near-black · gold glow for money
   Hind Siliguri + Manrope · mobile enforced two ways (CSS + JS)
═══════════════════════════════════════════════════ */

:root {
  --bg:        #050508;
  --surface:   #0e0e15;
  --surface2:  #13131c;
  --surface3:  #1a1a25;
  --surface4:  #2a2a38;

  --border:      rgba(176,38,255,.14);
  --border2:     rgba(176,38,255,.28);

  /* Neon violet — primary / AI brand */
  --neon:        #b026ff;
  --neon-l:      #c96bff;
  --neon-d:      #7c1fb0;
  --neon-glow1:  rgba(176,38,255,.55);
  --neon-glow2:  rgba(176,38,255,.28);

  /* Neon cyan — secondary / info / links */
  --cyan:        #00e5ff;
  --cyan-l:      #6cf2ff;
  --cyan-glow:   rgba(0,229,255,.45);

  /* Neon gold — money / commission / price only */
  --gold:        #ffc400;
  --gold-l:      #ffdd55;
  --gold-glow:   rgba(255,196,0,.5);

  /* Neon green / red — status */
  --green:       #39ff8f;
  --green-glow:  rgba(57,255,143,.45);
  --red:         #ff3b6e;
  --red-glow:    rgba(255,59,110,.45);
  --yellow:      #ffcc00;
  --blue:        var(--cyan);

  --text:      #f5f3ff;
  --text2:     #b3aecb;
  --text3:     #6f6a89;

  --grad:      linear-gradient(135deg, var(--neon) 0%, #7c1fb0 100%);
  --grad-gold: linear-gradient(135deg, #ffdd55 0%, var(--gold) 100%);
  --grad-card: linear-gradient(160deg, #14141f 0%, #0c0c13 100%);
  --shadow:    0 8px 28px rgba(0,0,0,.6);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.75);

  --r-sm:   8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    all .18s var(--ease);

  --header-h: 56px; --tab-h: 48px;

  --font-body: 'Hind Siliguri','Inter',system-ui,sans-serif;
  --font-display: 'Manrope','Hind Siliguri',system-ui,sans-serif;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  min-height:100dvh;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cyan);text-decoration:none;transition:var(--t)}
a:hover{color:var(--cyan-l)}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;border:none;outline:none;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:1rem;outline:none;border:none;max-width:100%}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--neon-d);border-radius:var(--r-full)}
::selection{background:var(--neon-glow2);color:#fff}
:focus-visible{outline:2px solid var(--neon-l);outline-offset:2px}

/* Neon glow utilities — layered shadows = authentic bloom, not a flat drop-shadow */
.glow-violet{ box-shadow: 0 0 6px var(--neon-glow1), 0 0 18px var(--neon-glow2), 0 0 36px rgba(176,38,255,.14); }
.glow-cyan{ box-shadow: 0 0 6px var(--cyan-glow), 0 0 18px rgba(0,229,255,.22); }
.text-glow{ text-shadow: 0 0 10px var(--neon-glow2), 0 0 24px rgba(176,38,255,.18); }

/* ── Icon system — replaces every emoji. currentColor means an icon
   automatically matches whatever color its container already has (an
   active nav item, an error toast, a gold price line) with zero extra
   rules per instance. Default size is 1em so icons sitting inline with
   text scale with that text; fixed-size standalone containers (logo,
   welcome mark, login mark, etc.) get an explicit override below. ── */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;flex-shrink:0;color:currentColor}
.icon-inline{width:.95em;height:.95em;vertical-align:-0.12em;margin-right:3px;color:currentColor}
.logo-icon .icon,.btn-icon .icon{width:18px;height:18px}
.welcome-icon .icon{width:52px;height:52px}
.nav-icon .icon{width:17px;height:17px}
.stat-icon .icon{width:22px;height:22px}
.sidebar-toggle .icon{width:19px;height:19px}
.modal-close .icon{width:15px;height:15px}
.login-logo .icon{width:48px;height:48px}
.storage-banner-icon .icon{width:22px;height:22px}
.input-eye-btn .icon{width:16px;height:16px}
.empty-state-icon .icon{width:44px;height:44px}
.tab-icon .icon{width:16px;height:16px}
.chip-link .icon,.btn-buy .icon,.btn-join .icon{width:.85em;height:.85em}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translateX(110%)}to{opacity:1;transform:none}}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-7px);opacity:1}}
@keyframes neonPulse{
  0%,100%{ box-shadow:0 0 6px var(--neon-glow1),0 0 18px var(--neon-glow2); }
  50%{ box-shadow:0 0 10px var(--neon-glow1),0 0 30px rgba(176,38,255,.4); }
}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(57,255,143,.5)}70%{box-shadow:0 0 0 8px rgba(57,255,143,0)}100%{box-shadow:0 0 0 0 rgba(57,255,143,0)}}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important;transition-duration:0.01ms !important} }

/* ════════════════════════════════
   MAIN APP LAYOUT
════════════════════════════════ */
.app-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:860px;margin:0 auto;position:relative;overflow-x:hidden;width:100%}

.app-header{
  height:var(--header-h);
  background:rgba(8,8,13,.94);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 16px;
  position:sticky;top:0;z-index:100;flex-shrink:0;gap:8px;
}
.app-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:1.02rem;min-width:0;overflow:hidden}
.logo-icon{width:34px;height:34px;background:var(--grad);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex-shrink:0;box-shadow:0 0 10px var(--neon-glow1),0 0 22px var(--neon-glow2)}
.gradient-text{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.gradient-badge{background:rgba(255,196,0,.1);border:1px solid rgba(255,196,0,.4);border-radius:var(--r-full);padding:2px 9px;font-size:.6rem;color:var(--gold-l);font-weight:800;letter-spacing:.06em;flex-shrink:0;box-shadow:0 0 8px rgba(255,196,0,.25)}
.header-actions{display:flex;gap:8px;flex-shrink:0}
.btn-icon{width:34px;height:34px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.95rem;transition:var(--t);text-decoration:none;flex-shrink:0}
.btn-icon:hover{background:var(--surface3);color:var(--neon-l);border-color:var(--border2);box-shadow:0 0 10px var(--neon-glow2)}

.tab-bar{height:var(--tab-h);background:rgba(8,8,13,.96);border-bottom:1px solid var(--border);display:flex;flex-shrink:0}
.tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.79rem;font-weight:600;color:var(--text3);background:transparent;border-bottom:2px solid transparent;transition:var(--t);padding:0 4px;min-width:0}
.tab-btn:hover{color:var(--text2)}
.tab-btn.active{color:var(--neon-l);border-bottom-color:var(--neon);text-shadow:0 0 12px var(--neon-glow2)}
.tab-icon{font-size:.92rem;flex-shrink:0}
.tab-content{display:none;flex:1;overflow:hidden;flex-direction:column;min-width:0}
.tab-content.active{display:flex;animation:fadeIn .2s var(--ease)}

/* ════════════════════════════════
   CHAT
════════════════════════════════ */
.chat-area{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:14px}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text3);display:flex;flex-direction:column;align-items:center;gap:14px}
.empty-state-icon{opacity:.7}
.chat-welcome{text-align:center;padding:34px 16px 20px;animation:fadeUp .4s var(--ease);max-width:100%}
.welcome-icon{font-size:2.6rem;margin-bottom:14px;display:inline-block;filter:drop-shadow(0 0 14px var(--neon-glow2))}
.chat-welcome h2{font-family:var(--font-display);font-size:clamp(1.05rem,5.5vw,1.3rem);font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;line-height:1.3;overflow-wrap:break-word;word-break:break-word}
.chat-welcome p{color:var(--text2);font-size:.85rem;max-width:320px;margin:0 auto;overflow-wrap:break-word;padding:0 4px}
.quick-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;max-width:100%}
.quick-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-full);padding:8px 15px;font-size:.75rem;color:var(--text2);transition:var(--t);font-weight:500;max-width:100%;overflow-wrap:break-word}
.quick-btn:hover{background:var(--neon-glow2);border-color:var(--neon);color:var(--neon-l);box-shadow:0 0 12px var(--neon-glow2)}

.message{display:flex;gap:9px;align-items:flex-end;max-width:87%;animation:fadeUp .2s var(--ease)}
.message.user{flex-direction:row-reverse;align-self:flex-end}
.message.bot{align-self:flex-start}
.msg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0}
.bot .msg-avatar{background:var(--grad);box-shadow:0 0 8px var(--neon-glow2)}
.user .msg-avatar{background:var(--surface3);border:1px solid var(--border2)}
.msg-bubble{border-radius:var(--r-lg);padding:11px 15px;font-size:.87rem;line-height:1.6;max-width:100%;word-break:break-word;overflow-wrap:break-word}
.bot .msg-bubble{background:var(--surface2);border:1px solid var(--border);border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg)}
.user .msg-bubble{background:var(--grad);color:#fff;border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg);box-shadow:0 2px 16px var(--neon-glow2)}
.msg-bubble a{color:var(--cyan);text-decoration:underline;word-break:break-all}
.msg-bubble code{background:rgba(0,0,0,.4);border-radius:4px;padding:1px 6px;font-size:.82em;color:var(--cyan-l)}
.msg-bubble pre{background:rgba(0,0,0,.5);border-radius:var(--r-sm);padding:10px;overflow-x:auto;margin:8px 0;font-size:.8em}

.typing-indicator{display:flex;gap:9px;align-items:center;align-self:flex-start}
.typing-dots{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);padding:11px 15px;display:flex;gap:5px}
.typing-dots span{width:6px;height:6px;background:var(--neon);border-radius:50%;animation:dotBounce 1.2s infinite;box-shadow:0 0 6px var(--neon-glow1)}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}

.product-chips{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;max-width:100%}
.product-chips::-webkit-scrollbar{display:none}
.product-chip{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:10px 13px;min-width:155px;max-width:185px;flex-shrink:0;transition:var(--t)}
.product-chip:hover{border-color:var(--gold);background:rgba(255,196,0,.06);box-shadow:0 0 12px var(--gold-glow)}
.chip-name{font-size:.77rem;font-weight:700;color:var(--text);margin-bottom:3px;overflow-wrap:break-word}
.chip-price{font-size:.76rem;color:var(--gold-l);font-weight:700}
.chip-link{display:inline-block;margin-top:6px;font-size:.7rem;color:var(--gold-l);border:1px solid rgba(255,196,0,.4);border-radius:var(--r-full);padding:2px 9px;transition:var(--t)}
.chip-link:hover{background:var(--gold);color:#1a1200;border-color:var(--gold);box-shadow:0 0 10px var(--gold-glow)}

.chat-input-bar{padding:11px 14px;background:rgba(8,8,13,.96);border-top:1px solid var(--border);display:flex;gap:9px;align-items:flex-end;flex-shrink:0}
.chat-input-wrap{flex:1;min-width:0;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-xl);display:flex;align-items:center;padding:9px 15px;transition:var(--t)}
.chat-input-wrap:focus-within{border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-glow2),0 0 16px var(--neon-glow2)}
.chat-input{flex:1;min-width:0;background:transparent;color:var(--text);font-size:.9rem;resize:none;max-height:110px;min-height:22px;line-height:1.5}
.chat-input::placeholder{color:var(--text3)}
.btn-send{width:42px;height:42px;background:var(--grad);border-radius:var(--r-lg);color:#fff;font-size:1.05rem;display:flex;align-items:center;justify-content:center;transition:var(--t);flex-shrink:0;box-shadow:0 0 10px var(--neon-glow1),0 0 24px var(--neon-glow2)}
.btn-send:hover{filter:brightness(1.15);box-shadow:0 0 14px var(--neon-glow1),0 0 34px rgba(176,38,255,.4)}
.btn-send:active{transform:scale(.95)}
.btn-send:disabled{opacity:.4;box-shadow:none}

/* ════════════════════════════════
   PRODUCTS
════════════════════════════════ */
.products-page{display:flex;flex-direction:column;height:100%;overflow:hidden}
.products-filter{padding:12px 14px;background:rgba(8,8,13,.94);border-bottom:1px solid var(--border);display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.search-input{flex:1;min-width:130px;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-full);padding:8px 15px;color:var(--text);font-size:.84rem;transition:var(--t)}
.search-input:focus{border-color:var(--neon);box-shadow:0 0 10px var(--neon-glow2)}
.search-input::placeholder{color:var(--text3)}
.cat-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.cat-chips::-webkit-scrollbar{display:none}
.cat-chip{background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-full);padding:5px 13px;font-size:.73rem;white-space:nowrap;color:var(--text3);cursor:pointer;transition:var(--t);font-weight:600}
.cat-chip.active,.cat-chip:hover{background:var(--neon-glow2);border-color:var(--neon);color:var(--neon-l);box-shadow:0 0 10px var(--neon-glow2)}

.products-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;padding:14px;align-content:start}
.product-card{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:var(--t);display:flex;flex-direction:column;animation:fadeUp .25s var(--ease);min-width:0}
.product-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 16px var(--gold-glow)}
.product-card-img{width:100%;aspect-ratio:4/3;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:2rem;overflow:hidden}
.product-card-img img{width:100%;height:100%;object-fit:cover}
.product-card-body{padding:11px;flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.product-card-cat{font-size:.64rem;color:var(--cyan-l);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.product-card-name{font-size:.81rem;font-weight:700;color:var(--text);line-height:1.35;overflow-wrap:break-word}
.product-card-price{font-family:var(--font-display);font-size:.92rem;color:var(--gold-l);font-weight:800;margin-top:2px;text-shadow:0 0 10px var(--gold-glow)}
.product-card-commission{font-size:.67rem;color:var(--green);margin-top:1px;font-weight:600}
.product-card-footer{padding:9px 11px;border-top:1px solid var(--border)}
.btn-buy{display:block;width:100%;background:var(--grad-gold);color:#1a1200;border-radius:var(--r-sm);padding:8px;font-size:.75rem;font-weight:800;text-align:center;transition:var(--t);box-shadow:0 0 10px var(--gold-glow)}
.btn-buy:hover{filter:brightness(1.08);color:#1a1200;box-shadow:0 0 16px var(--gold-glow)}
.btn-no-link{background:var(--surface3);color:var(--text3);font-weight:600;box-shadow:none}

/* ════════════════════════════════
   AFFILIATES
════════════════════════════════ */
.affiliates-page{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:22px}
.aff-section-title{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:.9rem;font-weight:800;margin-bottom:12px}
.aff-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.aff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px}
.aff-card{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px;transition:var(--t);display:flex;flex-direction:column;gap:8px;min-width:0}
.aff-card:hover{border-color:var(--neon);box-shadow:0 0 16px var(--neon-glow2)}
.aff-card-header{display:flex;align-items:center;gap:10px}
.aff-logo{width:38px;height:38px;background:var(--surface3);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;border:1px solid var(--border)}
.aff-name{font-size:.87rem;font-weight:700;overflow-wrap:break-word}
.aff-cat{font-size:.64rem;color:var(--cyan-l);background:rgba(0,229,255,.08);border-radius:var(--r-full);padding:2px 8px;display:inline-block;font-weight:600}
.aff-desc{font-size:.76rem;color:var(--text2);line-height:1.5}
.aff-meta{display:flex;gap:6px;flex-wrap:wrap}
.aff-meta-item{font-size:.7rem;color:var(--text3);background:var(--surface3);border-radius:var(--r-full);padding:3px 9px}
.aff-meta-item .meta-val{color:var(--text);font-weight:700}
.aff-commission{font-family:var(--font-display);font-size:.83rem;font-weight:800;color:var(--gold-l);text-shadow:0 0 8px var(--gold-glow)}
.btn-join{display:inline-flex;align-items:center;gap:4px;background:var(--neon-glow2);border:1px solid var(--neon);color:var(--neon-l);border-radius:var(--r-sm);padding:7px 13px;font-size:.74rem;font-weight:700;transition:var(--t);align-self:flex-start;margin-top:4px}
.btn-join:hover{background:var(--neon);color:#fff;box-shadow:0 0 14px var(--neon-glow1)}

/* ════════════════════════════════
   BUTTONS
════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 18px;border-radius:var(--r);font-size:.85rem;font-weight:700;transition:var(--t);cursor:pointer;max-width:100%;overflow-wrap:break-word}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 0 10px var(--neon-glow1),0 0 22px var(--neon-glow2)}
.btn-primary:hover{filter:brightness(1.12);color:#fff;box-shadow:0 0 14px var(--neon-glow1),0 0 32px rgba(176,38,255,.4)}
.btn-secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text)}
.btn-secondary:hover{background:var(--surface3);border-color:var(--neon);box-shadow:0 0 10px var(--neon-glow2)}
.btn-success{background:var(--green);color:#042}
.btn-danger{background:var(--red);color:#fff;box-shadow:0 0 10px var(--red-glow)}
.btn-sm{padding:6px 13px;font-size:.76rem}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;box-shadow:none !important}

/* ════════════════════════════════
   ADMIN
   Architecture note: this used to be height:100dvh + overflow:hidden on
   the wrapper/main, with an internal overflow-y:auto region for content.
   That traps everything with NO escape the moment dvh is measured even
   slightly larger than what's actually visible (a real, common quirk on
   Android WebViews) — content past that miscalculated boundary becomes
   permanently unreachable, which is exactly the "can't scroll at all"
   bug reported. Fixed by using the one scroll mechanism that is always
   reliable regardless of dvh: natural document/body scroll. The sidebar
   is viewport-fixed (independent of any container's height), the topbar
   is sticky, and admin-content has no height cap or overflow of its own
   — whatever height the content needs, the page simply becomes that
   tall, and the browser's native scrollbar handles the rest. This can
   never trap content again, on any device.
════════════════════════════════ */
.admin-wrapper{min-height:100vh;min-height:100dvh;background:var(--bg);width:100%}

.admin-sidebar{
  width:220px;position:fixed;top:0;left:0;bottom:0;height:100vh;height:100dvh;
  background:rgba(8,8,13,.98);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;
  transition:left .25s var(--ease);z-index:150;
}
.admin-brand{padding:20px 16px 16px;border-bottom:1px solid var(--border)}
.admin-brand h1{font-family:var(--font-display);font-size:1rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.admin-brand span{font-size:.7rem;color:var(--text3);display:block;margin-top:2px}
.sidebar-nav{flex:1;padding:8px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text3);font-size:.82rem;font-weight:600;cursor:pointer;transition:var(--t);border-left:3px solid transparent;background:transparent;width:100%;text-align:left}
.nav-item:hover{color:var(--text);background:rgba(176,38,255,.05)}
.nav-item.active{color:var(--neon-l);background:var(--neon-glow2);border-left-color:var(--neon);text-shadow:0 0 10px var(--neon-glow2)}
.nav-icon{font-size:.9rem;width:18px;text-align:center;flex-shrink:0}
.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.back-to-site{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text3);font-size:.78rem;transition:var(--t)}
.back-to-site:hover{background:var(--surface3);color:var(--neon-l)}

.admin-main{margin-left:220px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;min-width:0}
.admin-topbar{height:56px;background:rgba(8,8,13,.94);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px;flex-shrink:0;gap:8px;position:sticky;top:0;z-index:80}
.admin-topbar h2{font-family:var(--font-display);font-size:.88rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-content{padding:18px;display:flex;flex-direction:column;gap:18px;width:100%;min-width:0}
.admin-section{display:none}
.admin-section.active{display:contents}

.storage-banner{
  margin:14px 18px 0;padding:14px 16px;
  background:linear-gradient(135deg,rgba(255,59,110,.14),rgba(255,59,110,.05));
  border:1px solid rgba(255,59,110,.4);border-radius:var(--r-lg);
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
  box-shadow:0 0 20px rgba(255,59,110,.12);
}
.storage-banner.hidden{display:none}
.storage-banner-icon{font-size:1.3rem;flex-shrink:0}
.storage-banner-body{flex:1;min-width:180px}
.storage-banner-title{font-size:.84rem;font-weight:800;color:#ff8fac;margin-bottom:3px}
.storage-banner-msg{font-size:.76rem;color:var(--text2);line-height:1.6}

.card{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;animation:fadeUp .25s var(--ease);min-width:0}
.card-header{padding:15px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.card-title{font-family:var(--font-display);font-size:.87rem;font-weight:800;display:flex;align-items:center;gap:8px}
.card-body{padding:18px;min-width:0}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.stat-card{background:var(--grad-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:6px;transition:var(--t);animation:fadeUp .25s var(--ease);min-width:0}
.stat-card:hover{border-color:var(--neon);box-shadow:0 0 16px var(--neon-glow2)}
.stat-label{font-size:.67rem;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.stat-value{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:1;overflow-wrap:break-word}
.stat-icon{font-size:1.4rem}
.stat-sub{font-size:.7rem;color:var(--text3)}

.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);font-size:.67rem;font-weight:700;white-space:nowrap}
.badge-success{background:rgba(57,255,143,.12);color:var(--green)}
.badge-warning{background:rgba(255,204,0,.12);color:var(--yellow)}
.badge-error{background:rgba(255,59,110,.12);color:var(--red)}
.badge-info{background:rgba(0,229,255,.12);color:var(--cyan-l)}
.badge-muted{background:var(--surface3);color:var(--text3)}
.badge-live{background:rgba(57,255,143,.12);color:var(--green)}
.badge-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:2px;animation:livePulse 2s infinite}

.form-group{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-label{font-size:.78rem;font-weight:700;color:var(--text2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.label-badge{font-size:.6rem;background:var(--neon-glow2);color:var(--neon-l);border-radius:var(--r-full);padding:1px 7px;font-weight:600}
.form-input,.form-select,.form-textarea{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:10px 13px;color:var(--text);font-size:.86rem;transition:var(--t);width:100%;min-width:0}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-glow2),0 0 16px var(--neon-glow2)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text3)}
.form-select option{background:var(--surface2);color:var(--text)}
.form-textarea{resize:vertical;min-height:76px;line-height:1.6}
.form-hint{font-size:.72rem;color:var(--text3);line-height:1.55;overflow-wrap:break-word}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-actions{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.input-eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;color:var(--text3);font-size:.95rem;padding:6px;display:flex;align-items:center;justify-content:center}

/* Token-limit slider — styled to match the neon theme in both
   WebKit/Blink (thumb/track pseudo-elements) and Firefox. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--r-full);background:var(--surface3);margin:8px 0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px var(--neon-glow1),0 0 18px var(--neon-glow2);border:2px solid var(--bg);margin-top:-6px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-full);background:linear-gradient(90deg,var(--neon) 0%,var(--neon) var(--range-fill,50%),var(--surface3) var(--range-fill,50%),var(--surface3) 100%)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px var(--neon-glow1);border:2px solid var(--bg);cursor:pointer}
input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-full);background:var(--surface3)}
input[type=range]::-moz-range-progress{height:6px;border-radius:var(--r-full);background:var(--neon)}

.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.provider-option{background:var(--surface);border:2px solid var(--border);border-radius:var(--r-lg);padding:13px 6px;text-align:center;cursor:pointer;transition:var(--t);min-width:0}
.provider-option:hover{border-color:var(--neon-d)}
.provider-option.selected{border-color:var(--neon);background:var(--neon-glow2);box-shadow:0 0 16px var(--neon-glow2)}
.prov-logo{font-size:1.5rem;margin-bottom:5px}
.prov-name{font-size:.68rem;font-weight:700;color:var(--text2);overflow-wrap:break-word}
.provider-option.selected .prov-name{color:var(--neon-l)}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.admin-table{width:100%;border-collapse:collapse;font-size:.8rem}
.admin-table th{padding:9px 13px;background:rgba(176,38,255,.05);color:var(--text3);font-weight:700;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em}
.admin-table td{padding:11px 13px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}

/* Below ~640px a wide multi-column table reads as "cut off" even with
   overflow-x:auto, because sideways-scrolling a table isn't obvious/
   discoverable on a phone. Restructure into stacked cards instead —
   each row becomes a card, each cell becomes a labeled line. Requires
   a data-label attribute on each <td> (added where these tables are
   rendered); cells without one just show blank instead of a label,
   which only affects the two purely-visual columns (image/actions). */
@media(max-width:640px){
  .admin-table thead{display:none}
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{display:block;width:100%}
  .admin-table tr{margin-bottom:10px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;padding:4px 0;background:rgba(255,255,255,.01)}
  .admin-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;border-bottom:1px solid var(--border);padding:9px 13px}
  .admin-table tr td:last-child{border-bottom:none}
  .admin-table td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--text3);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex-shrink:0}
  .admin-table td:not([data-label]){justify-content:center}
  .table-img{margin:0 auto}
  .table-actions{justify-content:flex-end;width:100%}
}
html.is-mobile .admin-table thead{display:none !important}
html.is-mobile .admin-table,
html.is-mobile .admin-table tbody,
html.is-mobile .admin-table tr,
html.is-mobile .admin-table td{display:block !important;width:100% !important}
html.is-mobile .admin-table tr{margin-bottom:10px !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;overflow:hidden !important}
html.is-mobile .admin-table td{display:flex !important;justify-content:space-between !important;align-items:center !important;gap:12px !important;text-align:right !important}
html.is-mobile .admin-table td[data-label]::before{content:attr(data-label) !important;font-weight:700 !important;color:var(--text3) !important;font-size:.68rem !important;text-align:left !important}
.table-img{width:38px;height:38px;object-fit:cover;border-radius:var(--r-sm);background:var(--surface3)}
.table-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn-table{padding:5px 9px;border-radius:var(--r-sm);font-size:.71rem;font-weight:700;transition:var(--t);white-space:nowrap}
.btn-edit{background:rgba(0,229,255,.1);color:var(--cyan-l)}
.btn-edit:hover{background:var(--cyan);color:#002}
.btn-del{background:rgba(255,59,110,.1);color:var(--red)}
.btn-del:hover{background:var(--red);color:#fff}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:14px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-xl);width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow-y:auto;overflow-x:hidden;transform:scale(.95);transition:transform .2s var(--ease);box-shadow:var(--shadow-lg),0 0 40px rgba(176,38,255,.1)}
.modal-overlay.open .modal{transform:scale(1)}
.modal-header{padding:16px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:2}
.modal-title{font-family:var(--font-display);font-size:.9rem;font-weight:800}
.modal-close{width:28px;height:28px;background:var(--surface3);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.95rem;transition:var(--t)}
.modal-close:hover{background:var(--red);color:#fff}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:13px}

.toast-container{position:fixed;top:68px;right:12px;left:12px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.toast{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r-lg);padding:11px 15px;display:flex;align-items:flex-start;gap:9px;min-width:220px;max-width:360px;animation:toastIn .25s var(--ease);box-shadow:var(--shadow);pointer-events:all}
.toast.success{border-left:3px solid var(--green);box-shadow:var(--shadow),0 0 16px var(--green-glow)}
.toast.error{border-left:3px solid var(--red);box-shadow:var(--shadow),0 0 16px var(--red-glow)}
.toast.warning{border-left:3px solid var(--yellow)}
.toast.info{border-left:3px solid var(--cyan)}
.toast-msg{font-size:.8rem;color:var(--text);flex:1;line-height:1.5;overflow-wrap:break-word}

.login-screen{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:5000;padding:20px}
.login-screen::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 50% 38%,rgba(176,38,255,.16) 0%,transparent 70%);pointer-events:none}
.login-box{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r-xl);padding:38px 30px;width:100%;max-width:370px;text-align:center;box-shadow:var(--shadow-lg),0 0 50px rgba(176,38,255,.12);animation:scaleIn .3s var(--ease);position:relative;z-index:1}
.login-logo{font-size:2.5rem;margin-bottom:14px;display:inline-block;filter:drop-shadow(0 0 16px var(--neon-glow1))}
.login-title{font-family:var(--font-display);font-size:1.4rem;font-weight:800;margin-bottom:6px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.login-subtitle{font-size:.82rem;color:var(--text3);margin-bottom:26px}
.login-form{display:flex;flex-direction:column;gap:11px}

.webhook-box{background:var(--surface3);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px;display:flex;flex-direction:column;gap:8px}
.webhook-url{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 13px;font-family:'Courier New',monospace;font-size:.72rem;color:var(--cyan-l);word-break:break-all;user-select:all;overflow-wrap:break-word}

.setup-steps{display:flex;flex-direction:column;gap:13px}
.setup-step{display:flex;gap:11px;align-items:flex-start}
.step-num{width:24px;height:24px;background:var(--neon-glow2);border:1px solid var(--neon-d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;color:var(--neon-l);flex-shrink:0}
.step-text{font-size:.8rem;color:var(--text2);line-height:1.6;padding-top:2px;overflow-wrap:break-word;min-width:0}
.step-text strong{color:var(--text)}
.step-text code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:4px;font-size:.85em;color:var(--gold-l)}

.spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--neon);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle}

.sidebar-toggle{display:none;width:34px;height:34px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);align-items:center;justify-content:center;color:var(--text3);font-size:1.05rem;cursor:pointer;flex-shrink:0}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:120}
.sidebar-overlay.show{display:block}

/* ════════════════════════════════
   RESPONSIVE — two independent enforcement layers.
   Layer 1: standard @media query (primary mechanism).
   Layer 2: html.is-mobile rules driven by an inline JS check that runs
   before paint — a deliberate backup in case a cached/older stylesheet
   or an unusual viewport-reporting browser ever fails to match the
   media query. Both layers describe the exact same layout so they
   never disagree; the JS layer just can't be defeated by CSS caching.
════════════════════════════════ */
@media(max-width:900px), (pointer:coarse) and (max-width:1024px){
  :root{--header-h:52px;--tab-h:46px}
  .admin-sidebar{left:-220px;box-shadow:var(--shadow-lg),0 0 40px rgba(176,38,255,.08)}
  .admin-sidebar.open{left:0}
  .admin-main{margin-left:0}
  .sidebar-toggle{display:flex}
  .admin-content{padding:14px}
  .storage-banner{margin:12px 14px 0}
  .form-row{grid-template-columns:1fr}
  .products-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:11px}
  .aff-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .provider-grid{grid-template-columns:repeat(3,1fr)}
  .message{max-width:92%}
  .tab-btn{font-size:.72rem;gap:3px}
  .admin-topbar{padding:0 12px}
  .card-header{padding:13px 14px}
  .card-body{padding:14px}
  .btn-block-mobile{width:100%}
  .form-actions:has(.btn-block-mobile){flex-direction:column;align-items:stretch}
}

html.is-mobile .admin-sidebar{left:-220px !important;box-shadow:var(--shadow-lg)}
html.is-mobile .admin-sidebar.open{left:0 !important}
html.is-mobile .admin-main{margin-left:0 !important}
html.is-mobile .sidebar-toggle{display:flex !important}
html.is-mobile .admin-content{padding:14px !important}
html.is-mobile .storage-banner{margin:12px 14px 0 !important}
html.is-mobile .form-row{grid-template-columns:1fr !important}
html.is-mobile .products-grid{grid-template-columns:repeat(2,1fr) !important;gap:9px !important;padding:11px !important}
html.is-mobile .aff-grid{grid-template-columns:1fr !important}
html.is-mobile .stats-grid{grid-template-columns:repeat(2,1fr) !important}
html.is-mobile .message{max-width:92% !important}
html.is-mobile .admin-topbar{padding:0 12px !important}
html.is-mobile .btn-block-mobile{width:100% !important;display:block !important}
html.is-mobile .form-actions{flex-direction:column !important;align-items:stretch !important}

@media(max-width:420px){
  .products-grid{grid-template-columns:repeat(2,1fr);gap:8px;padding:9px}
  .provider-grid{grid-template-columns:repeat(2,1fr)}
  .login-box{padding:28px 20px}
  .stats-grid{grid-template-columns:1fr 1fr}
}
html.is-mobile-xs .products-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;padding:9px !important}
html.is-mobile-xs .provider-grid{grid-template-columns:repeat(2,1fr) !important}

/* ── Utilities ── */
.hidden{display:none !important}
.text-muted{color:var(--text3)}
.text-success{color:var(--green)}
.text-error{color:var(--red)}
.text-sm{font-size:.78rem}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}
.w-full{width:100%}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}