/* ============================================================
   TECH THEME OVERLAY — modernizes both index & admin
   Dark surface · neon accent · glassmorphism · grid · precision
   Loaded AFTER styles.css/admin.css, so cascade wins.
   ============================================================ */

[data-theme="dark"]{
  /* Re-tune the design tokens — kept names so existing rules adopt new values */
  --bg:#0a0e1a;            /* Deep navy-black */
  --paper:#0f1524;         /* Surface 1 */
  --ink:#e8ecf5;           /* Light text on dark */
  --muted:#7a85a3;         /* Cool gray */
  --accent:#00e5ff;        /* Cyan neon */
  --accent-2:#7c3aed;      /* Violet */
  --line:rgba(255,255,255,0.08);

  /* New tokens (additive) */
  --surface-2:#151c30;
  --surface-3:#1c2540;
  --accent-glow:0 0 24px rgba(0,229,255,0.45);
  --accent-grad:linear-gradient(135deg,#00e5ff 0%,#7c3aed 100%);
  --grid-line:rgba(0,229,255,0.06);
  --success:#00ffa3;
  --danger:#ff3860;

  /* Sans -> Inter (cleaner for tech), keep mono, retire serif from chrome */
  --sans:'Inter','Manrope',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono','SF Mono',monospace;
  --display:'Inter',var(--sans);
}

/* Subtle scan-grid background on body */
[data-theme="dark"] body{
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0,229,255,0.12), transparent 60%),
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/48px 48px,
    var(--bg) !important;
  color:var(--ink);
}

/* Selection */
[data-theme="dark"] ::selection{background:var(--accent);color:#0a0e1a}

/* Scrollbar */
[data-theme="dark"] *::-webkit-scrollbar{width:10px;height:10px}
[data-theme="dark"] *::-webkit-scrollbar-track{background:transparent}
[data-theme="dark"] *::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:10px}
[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ===== NAV ===== */
[data-theme="dark"] .nav{
  background:rgba(10,14,26,0.72)!important;
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,229,255,0.04), 0 8px 32px -8px rgba(0,0,0,0.6);
}
[data-theme="dark"] .logo{font-weight:700;letter-spacing:-0.04em}
[data-theme="dark"] .logo-mark{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(0,229,255,0.5));
}
[data-theme="dark"] .dot{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .nav-links a{font-weight:500;font-size:13px;letter-spacing:0.01em}
[data-theme="dark"] .nav-links a:hover{color:var(--accent)}
[data-theme="dark"] .icon-btn{color:var(--muted)}
[data-theme="dark"] .icon-btn:hover{background:rgba(0,229,255,0.1);color:var(--accent);box-shadow:var(--accent-glow)}

/* ===== ANNOUNCE BAR ===== */
[data-theme="dark"] .announce{
  background:linear-gradient(90deg,#0a0e1a,#151c30 50%,#0a0e1a)!important;
  border-bottom:1px solid var(--line)!important;
  color:var(--accent);
  position:relative;
}
[data-theme="dark"] .announce::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--accent-grad);opacity:0.4}
[data-theme="dark"] .marquee{color:var(--muted)}
[data-theme="dark"] .marquee span{color:var(--ink)}

/* ===== BUTTONS ===== */
[data-theme="dark"] .btn{font-weight:600;letter-spacing:0.01em;border-radius:10px;transition:all .2s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"] .btn-primary{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  box-shadow:var(--accent-glow), 0 4px 24px -4px rgba(124,58,237,0.4);
  border:none;
}
[data-theme="dark"] .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(0,229,255,0.7),0 8px 32px -4px rgba(124,58,237,0.6)}
[data-theme="dark"] .btn-ghost{border:1px solid var(--line)!important;color:var(--ink);background:rgba(255,255,255,0.02)}
[data-theme="dark"] .btn-ghost:hover{border-color:var(--accent)!important;background:rgba(0,229,255,0.05);color:var(--accent)}
[data-theme="dark"] .cart-btn{
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3))!important;
  color:var(--ink)!important;
  border:1px solid var(--line);
  border-radius:10px;
}
[data-theme="dark"] .cart-btn:hover{border-color:var(--accent);box-shadow:var(--accent-glow)}
[data-theme="dark"] .cart-count{background:var(--accent)!important;color:#0a0e1a!important;font-weight:700}

/* ===== HERO ===== */
[data-theme="dark"] .kicker{color:var(--accent);font-family:var(--mono);font-size:11px}
[data-theme="dark"] .kicker::before{background:var(--accent);box-shadow:var(--accent-glow)}
[data-theme="dark"] .hero-title{
  font-family:var(--display)!important;font-weight:800;letter-spacing:-0.05em;
  background:linear-gradient(180deg,var(--ink) 30%,rgba(232,236,245,0.5));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .hero-title em{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-style:italic;
}
[data-theme="dark"] .hero-sub{color:var(--muted)}
[data-theme="dark"] .hero-stats{border-top:1px solid var(--line)}
[data-theme="dark"] .hero-stats strong{
  font-family:var(--display)!important;font-weight:700;font-size:38px;
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .hero-stats span{color:var(--muted)}

/* Hero card -> dark glass */
[data-theme="dark"] .hero-card{
  background:linear-gradient(135deg,rgba(21,28,48,0.9),rgba(15,21,36,0.9))!important;
  border:1px solid var(--line);
  backdrop-filter:blur(20px);
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.6),0 0 0 1px rgba(0,229,255,0.05) inset;
  border-radius:20px!important;
}
[data-theme="dark"] .hero-card-tag{background:var(--accent-grad)!important;color:#0a0e1a!important;font-weight:700}
[data-theme="dark"] .hero-card-art{background:#000!important;border:1px solid var(--line)}

/* ===== PRODUCT CARDS ===== */
[data-theme="dark"] .product-card,
[data-theme="dark"] .card,
[data-theme="dark"] [class*="product-grid"] > a,
[data-theme="dark"] [class*="product-grid"] > div{
  background:linear-gradient(135deg,var(--paper),var(--surface-2))!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  transition:transform .25s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .25s;
  position:relative;overflow:hidden;
}
[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .card:hover{
  border-color:rgba(0,229,255,0.4)!important;
  box-shadow:0 20px 60px -20px rgba(0,229,255,0.25),0 0 0 1px rgba(0,229,255,0.2) inset;
  transform:translateY(-4px);
}
[data-theme="dark"] .product-card::before,
[data-theme="dark"] .card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at top,rgba(0,229,255,0.08),transparent 50%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
[data-theme="dark"] .product-card:hover::before,
[data-theme="dark"] .card:hover::before{opacity:1}

/* Category chips */
[data-theme="dark"] .cat-chip,
[data-theme="dark"] .chip,
[data-theme="dark"] [class*="chip"]{
  background:rgba(255,255,255,0.04)!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  border-radius:8px;font-family:var(--mono);font-size:11px;letter-spacing:0.05em;
  transition:all .2s;
}
[data-theme="dark"] .cat-chip:hover,
[data-theme="dark"] .chip:hover,
[data-theme="dark"] .cat-chip.active,
[data-theme="dark"] .chip.active,
[data-theme="dark"] [class*="chip"].active{
  background:var(--accent)!important;color:#0a0e1a!important;
  border-color:var(--accent)!important;
  box-shadow:var(--accent-glow);
}

/* ===== BAND / DEVELOPER PROGRAM ===== */
[data-theme="dark"] .band,
[data-theme="dark"] [class*="band"]{
  background:linear-gradient(135deg,var(--surface-2),var(--surface-3))!important;
  border:1px solid var(--line);border-radius:24px;
  position:relative;overflow:hidden;
}
[data-theme="dark"] .band::after,
[data-theme="dark"] [class*="band"]::after{
  content:"";position:absolute;top:0;right:0;width:50%;height:100%;
  background:radial-gradient(ellipse at right,rgba(124,58,237,0.25),transparent 70%);
  pointer-events:none;
}

/* ===== FOOTER ===== */
[data-theme="dark"] .foot,
[data-theme="dark"] footer,
[data-theme="dark"] [class*="foot"]{
  background:var(--paper)!important;border-top:1px solid var(--line);
  color:var(--muted);
}

/* ===== CART DRAWER / MODALS ===== */
[data-theme="dark"] .drawer,
[data-theme="dark"] .account-modal,
[data-theme="dark"] [id*="Modal"],
[data-theme="dark"] [id*="Drawer"]{
  background:rgba(15,21,36,0.95)!important;
  backdrop-filter:blur(24px);
  border:1px solid var(--line)!important;
  color:var(--ink);
}
[data-theme="dark"] .drawer-empty{color:var(--muted)}

/* ===== ACCOUNT MENU / DROPDOWNS ===== */
[data-theme="dark"] .account-menu,
[data-theme="dark"] .lang-menu,
[data-theme="dark"] [class*="menu"]{
  background:rgba(15,21,36,0.96)!important;
  backdrop-filter:blur(20px);
  border:1px solid var(--line)!important;
  border-radius:14px!important;
  box-shadow:0 20px 60px -10px rgba(0,0,0,0.6),0 0 0 1px rgba(0,229,255,0.05) inset;
}
[data-theme="dark"] .account-link,
[data-theme="dark"] .lang-option{color:var(--ink);transition:all .15s}
[data-theme="dark"] .account-link:hover,
[data-theme="dark"] .lang-option:hover{background:rgba(0,229,255,0.08)!important;color:var(--accent)}
[data-theme="dark"] .account-cta{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  font-weight:700;border-radius:10px;
}
[data-theme="dark"] .account-avatar{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  font-weight:800;box-shadow:var(--accent-glow);
}
[data-theme="dark"] .account-divider{background:var(--line)}
[data-theme="dark"] .lang-tag{background:rgba(0,229,255,0.1)!important;color:var(--accent)!important}
[data-theme="dark"] .lang-option.active .lang-tag{background:var(--accent)!important;color:#0a0e1a!important}
[data-theme="dark"] .check{color:var(--accent)!important}

/* ===== FORMS / INPUTS ===== */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:rgba(255,255,255,0.03)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
  border-radius:10px;padding:12px 14px;font-family:var(--sans);
  transition:border-color .15s,box-shadow .15s;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus{
  outline:none;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(0,229,255,0.15);
}
[data-theme="dark"] input::placeholder{color:var(--muted)}
[data-theme="dark"] label{color:var(--muted);font-size:12px;font-family:var(--mono);letter-spacing:0.05em;text-transform:uppercase}

/* ===== FAQ / HELP ===== */
[data-theme="dark"] .faq-section-title{color:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase}
[data-theme="dark"] .faq-item{
  background:rgba(255,255,255,0.02);border:1px solid var(--line);
  border-radius:12px;margin-bottom:8px;padding:14px 18px;
  transition:border-color .15s;
}
[data-theme="dark"] .faq-item:hover{border-color:rgba(0,229,255,0.3)}
[data-theme="dark"] .faq-item[open]{border-color:var(--accent);background:rgba(0,229,255,0.04)}
[data-theme="dark"] .faq-q{color:var(--ink);font-weight:600}
[data-theme="dark"] .faq-a{color:var(--muted);line-height:1.6}
[data-theme="dark"] mark{background:var(--accent);color:#0a0e1a;padding:0 4px;border-radius:3px}

/* ===== STORE TAGS / BADGES ===== */
[data-theme="dark"] .store-tag,
[data-theme="dark"] .official,
[data-theme="dark"] .verified,
[data-theme="dark"] .official-big,
[data-theme="dark"] .verified-big{
  font-family:var(--mono)!important;font-size:10px!important;
  letter-spacing:0.1em;text-transform:uppercase;
}
[data-theme="dark"] .official,
[data-theme="dark"] .official-big{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  padding:3px 8px;border-radius:5px;font-weight:700;
  box-shadow:var(--accent-glow);
}
[data-theme="dark"] .verified,
[data-theme="dark"] .verified-big{color:var(--success)!important}

/* ===== PDP ===== */
[data-theme="dark"] .pdp-section-title{font-family:var(--display)!important;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
[data-theme="dark"] .pdp-add-btn{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  font-weight:700;border-radius:12px;padding:18px 28px;
  box-shadow:var(--accent-glow), 0 8px 32px -8px rgba(124,58,237,0.4);
  transition:transform .15s, box-shadow .2s;
}
[data-theme="dark"] .pdp-add-btn:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(0,229,255,0.6),0 12px 40px -8px rgba(124,58,237,0.6)}

/* ===== ADMIN — DASHBOARD ===== */
[data-theme="dark"] .admin-body{background:var(--bg)!important}
[data-theme="dark"] .login-gate{
  background:
    radial-gradient(circle at 20% 30%,rgba(0,229,255,0.15),transparent 50%),
    radial-gradient(circle at 80% 70%,rgba(124,58,237,0.15),transparent 50%),
    var(--bg)!important;
}
[data-theme="dark"] .login-box{
  background:rgba(15,21,36,0.85)!important;
  backdrop-filter:blur(24px);
  border:1px solid var(--line)!important;
  border-radius:20px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,0.8),0 0 0 1px rgba(0,229,255,0.1) inset;
}
[data-theme="dark"] .login-title{
  font-family:var(--display)!important;font-weight:700;
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
[data-theme="dark"] .login-sub{color:var(--accent)}
[data-theme="dark"] .login-err{background:rgba(255,56,96,0.1)!important;color:var(--danger)!important;border:1px solid rgba(255,56,96,0.2)}

/* Sidebar */
[data-theme="dark"] #adminApp{background:var(--bg)}
[data-theme="dark"] .admin-side{
  background:linear-gradient(180deg,var(--paper),var(--bg))!important;
  border-right:1px solid var(--line);
}
[data-theme="dark"] .side-label{color:rgba(255,255,255,0.3)}
[data-theme="dark"] .side-nav a{color:var(--muted);border-radius:10px;font-weight:500}
[data-theme="dark"] .side-nav a:hover{background:rgba(0,229,255,0.06)!important;color:var(--accent)}
[data-theme="dark"] .side-nav a.active{
  background:var(--accent-grad)!important;color:#0a0e1a!important;
  font-weight:700;box-shadow:var(--accent-glow);
}
[data-theme="dark"] .side-foot{border-top:1px solid var(--line)}

[data-theme="dark"] .admin-top{border-bottom:1px solid var(--line)}
[data-theme="dark"] .admin-top h1{
  font-family:var(--display)!important;font-weight:800;letter-spacing:-0.03em;
  background:linear-gradient(180deg,var(--ink),rgba(232,236,245,0.6));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Stat tiles */
[data-theme="dark"] .stat{
  background:linear-gradient(135deg,var(--paper),var(--surface-2))!important;
  border:1px solid var(--line)!important;
  border-radius:16px;position:relative;overflow:hidden;
  transition:border-color .2s, transform .2s;
}
[data-theme="dark"] .stat:hover{border-color:rgba(0,229,255,0.3);transform:translateY(-2px)}
[data-theme="dark"] .stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--accent-grad);opacity:0.5;
}
[data-theme="dark"] .stat-label{color:var(--muted)}
[data-theme="dark"] .stat-value{
  font-family:var(--display)!important;font-weight:700;letter-spacing:-0.02em;
  color:var(--ink);
}
[data-theme="dark"] .stat-trend{color:var(--success)!important;font-family:var(--mono);font-size:11px;letter-spacing:0.05em}
[data-theme="dark"] .stat-trend.down{color:var(--danger)!important}

/* Admin table */
[data-theme="dark"] .admin-table{
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:14px;
}
[data-theme="dark"] .admin-table th{
  background:var(--surface-2)!important;color:var(--accent)!important;
  border-bottom:1px solid var(--line)!important;
  font-family:var(--mono);font-size:10px;letter-spacing:0.1em;
}
[data-theme="dark"] .admin-table td{border-bottom:1px solid var(--line)!important;color:var(--ink)}
[data-theme="dark"] .admin-table tr:hover{background:rgba(0,229,255,0.04)!important}
[data-theme="dark"] .admin-table tr:hover td{color:var(--ink)}

/* Search & filter inputs in admin */
[data-theme="dark"] .admin-search,
[data-theme="dark"] .search-input,
[data-theme="dark"] input[type="search"]{
  background:rgba(255,255,255,0.03)!important;
  border:1px solid var(--line)!important;
  color:var(--ink)!important;
}

/* Status pills */
[data-theme="dark"] .pill,
[data-theme="dark"] .status,
[data-theme="dark"] .badge{
  background:rgba(0,229,255,0.1)!important;color:var(--accent)!important;
  border:1px solid rgba(0,229,255,0.2);
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;
  text-transform:uppercase;border-radius:6px;padding:3px 8px;
}

/* Generic surface fixes for any nested boxes */
[data-theme="dark"] .card-store,
[data-theme="dark"] .review-line,
[data-theme="dark"] .pdp-store-row,
[data-theme="dark"] .empty-state{
  background:rgba(255,255,255,0.02)!important;
  border:1px solid var(--line);border-radius:12px;
  color:var(--ink);
}
[data-theme="dark"] .empty-state-icon{
  background:var(--accent-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Reduce serif usage in chrome but keep for hero (handled above with clip) */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4{font-family:var(--display)}

/* RTL preserve — accent shadow looks fine in both directions */
[data-theme="dark"] html[dir="rtl"] body{background:var(--bg)}

/* ============================================================
   THEME TOGGLE BUTTON — works in BOTH light & dark themes
   ============================================================ */
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:transparent;
  color:var(--ink);cursor:pointer;
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  transition:all .2s;
}
.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}
.theme-toggle .theme-icon{font-size:14px;line-height:1}
[data-theme="dark"] .theme-toggle:hover{box-shadow:0 0 16px rgba(0,229,255,0.3)}

/* Sidebar variant (admin) */
.admin-side .theme-toggle{
  width:100%;justify-content:center;
  background:rgba(255,255,255,0.04);
  color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.1);
}
.admin-side .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}