@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&family=Roboto+Mono:wght@400;700&display=swap');

/* ══ THEMES ══════════════════════════════════════════════ */
:root, [data-theme="white"] {
  --accent: #1a56db; --accent2: #7c3aed;
  --dark: #f8faff; --darker: #eef2fb;
  --panel: #ffffff; --panel2: #f0f4ff;
  --border: rgba(26,86,219,0.15); --border2: rgba(124,58,237,0.15);
  --text: #0f172a; --muted: #64748b;
  --red: #dc2626; --yellow: #d97706; --green: #059669;
  --bn-font: 'Noto Serif Bengali', serif;
  --en-font: 'Roboto', sans-serif;
  --mono: 'Roboto Mono', monospace;
  --sans: 'Roboto', sans-serif;
  --btn-shadow: 0 4px 15px rgba(26,86,219,0.35), 0 2px 4px rgba(0,0,0,0.1);
  --btn-shadow-h: 0 6px 22px rgba(26,86,219,0.55), 0 2px 8px rgba(0,0,0,0.15);
  --btn-grad: linear-gradient(135deg, #1a56db 0%, #1347c0 60%, #0f3ba8 100%);
  --hero-overlay: rgba(248,250,255,0.85);
}
[data-theme="dark"] {
  --accent: #60a5fa; --accent2: #a78bfa;
  --dark: #050d1a; --darker: #030810;
  --panel: #0a1525; --panel2: #0d1e35;
  --border: rgba(96,165,250,0.2); --border2: rgba(167,139,250,0.2);
  --text: #e8f0ff; --muted: #7a9cc2;
  --red: #f87171; --yellow: #fbbf24; --green: #34d399;
  --btn-shadow: 0 4px 15px rgba(96,165,250,0.35), 0 2px 4px rgba(0,0,0,0.4);
  --btn-shadow-h: 0 6px 22px rgba(96,165,250,0.55), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%);
  --hero-overlay: rgba(5,13,26,0.8);
}
[data-theme="purple"] {
  --accent: #c084fc; --accent2: #f472b6;
  --dark: #0c0514; --darker: #060210;
  --panel: #130a24; --panel2: #1a0f30;
  --border: rgba(192,132,252,0.2); --border2: rgba(244,114,182,0.2);
  --text: #f0e8ff; --muted: #9e7ac2;
  --red: #ff4466; --yellow: #fbbf24; --green: #34d399;
  --btn-shadow: 0 4px 15px rgba(192,132,252,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(192,132,252,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #c084fc 0%, #9d4edd 60%, #7b2fbe 100%);
  --hero-overlay: rgba(12,5,20,0.8);
}
[data-theme="ocean"] {
  --accent: #38bdf8; --accent2: #34d399;
  --dark: #030d1a; --darker: #010810;
  --panel: #041525; --panel2: #071e35;
  --border: rgba(56,189,248,0.2); --border2: rgba(52,211,153,0.2);
  --text: #e0f4ff; --muted: #5a9fcc;
  --red: #f87171; --yellow: #fbbf24; --green: #34d399;
  --btn-shadow: 0 4px 15px rgba(56,189,248,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(56,189,248,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 60%, #0284c7 100%);
  --hero-overlay: rgba(3,13,26,0.8);
}
[data-theme="red"] {
  --accent: #f97316; --accent2: #ef4444;
  --dark: #0f0502; --darker: #080200;
  --panel: #1a0a05; --panel2: #220e07;
  --border: rgba(249,115,22,0.2); --border2: rgba(239,68,68,0.2);
  --text: #fff0e8; --muted: #c27a5a;
  --red: #ef4444; --yellow: #fbbf24; --green: #34d399;
  --btn-shadow: 0 4px 15px rgba(249,115,22,0.4), 0 2px 4px rgba(0,0,0,0.5);
  --btn-shadow-h: 0 6px 22px rgba(249,115,22,0.65), 0 2px 8px rgba(0,0,0,0.5);
  --btn-grad: linear-gradient(135deg, #f97316 0%, #ea580c 60%, #c2410c 100%);
  --hero-overlay: rgba(15,5,2,0.8);
}

/* ══ BASE ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--dark); color:var(--text);
  font-family:var(--sans); font-size:15px;
  min-height:100vh; line-height:1.65;
  transition:background 0.3s,color 0.3s;
  overflow-x:hidden;
}
/* Bangla text gets serif treatment */
[lang="bn"] body, body.lang-bn,
.bn { font-family:var(--bn-font); }
a { text-decoration:none; color:inherit; }

::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--darker); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:4px; }

/* ══ LANGUAGE SWITCHER ═══════════════════════════════════ */
.lang-switcher {
  display:flex; align-items:center; gap:4px;
  background:var(--panel2); border:1.5px solid var(--border);
  border-radius:50px; padding:3px; margin-left:8px;
}
.lang-btn {
  padding:4px 12px; border-radius:50px; border:none;
  font-family:var(--sans); font-size:11px; font-weight:700;
  letter-spacing:0.5px; cursor:pointer;
  transition:all 0.2s; background:none; color:var(--muted);
}
.lang-btn.active {
  background:var(--btn-grad); color:#fff;
  box-shadow:0 2px 8px rgba(26,86,219,0.3);
}

/* ══ NAVBAR ══════════════════════════════════════════════ */
.navbar {
  background:var(--panel); border-bottom:1px solid var(--border);
  padding:0 24px; display:flex; align-items:center;
  justify-content:space-between; height:64px; gap:8px;
  position:sticky; top:0; z-index:200; backdrop-filter:blur(12px);
}
/* On mobile: lang pill sits between logo and hamburger, always visible */
/* On desktop: it's inside nav-links as first item */
.navbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent2) 70%,transparent);
  opacity:0.5;
}
.nav-logo { display:flex; align-items:center; gap:10px; }
.nav-logo-icon {
  width:38px; height:38px; background:var(--btn-grad); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--btn-shadow); overflow:hidden;
}
.nav-logo-icon svg { width:22px; height:22px; fill:#fff; }
.nav-logo-text { font-size:18px; font-weight:800; letter-spacing:0.5px; color:var(--text); font-family:var(--en-font); }
.nav-logo-text span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  color:var(--muted); padding:7px 14px; font-size:13px; font-weight:600;
  letter-spacing:0.3px; border:1px solid transparent; border-radius:9px;
  transition:all 0.2s; font-family:var(--sans);
}
.nav-link:hover, .nav-link.active { color:var(--accent); border-color:var(--border); background:rgba(26,86,219,0.06); }
.nav-balance {
  font-family:var(--mono); font-size:13px; color:var(--accent);
  padding:7px 13px; border:1px solid var(--border); border-radius:9px;
  background:rgba(26,86,219,0.06);
}
.btn-logout {
  background:none; border:1px solid var(--border2); border-radius:9px;
  color:var(--muted); padding:7px 14px; font-family:var(--sans);
  font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-logout:hover { color:var(--red); border-color:var(--red); }
.nav-hamburger { display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; padding:6px; }

/* ── Navbar inline lang switcher ── */
.nav-lang-switch {
  display:flex; align-items:center; gap:2px;
  background:var(--darker); border:1px solid var(--border);
  border-radius:50px; padding:3px 4px;
}
.nav-lang-switch .lang-btn {
  padding:5px 13px; border-radius:50px; font-size:12px; font-weight:700;
  letter-spacing:0.5px; cursor:pointer; border:none;
  transition:all 0.18s; background:none; color:var(--muted);
  font-family:var(--sans);
}
.nav-lang-switch .lang-btn.active {
  background:var(--btn-grad); color:#fff;
  box-shadow:0 2px 8px rgba(26,86,219,0.3);
}

/* ══ HERO ════════════════════════════════════════════════ */
.hero {
  min-height:86vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:60px 24px; position:relative; overflow:hidden;
}
.hero-bg { position:absolute; inset:0; background:linear-gradient(135deg, rgba(26,86,219,0.08) 0%, rgba(124,58,237,0.06) 100%); }
.hero-eyebrow { font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:5px; text-transform:uppercase; margin-bottom:16px; }
.hero-title {
  font-size:clamp(32px,6vw,72px); font-weight:800; line-height:1.05;
  margin-bottom:12px; color:var(--text);
  font-family:var(--bn-font);
}
.hero-title span { background:linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-title.en { font-family:var(--en-font); }
.hero-sub { font-size:17px; color:var(--muted); max-width:500px; margin:16px auto 36px; line-height:1.75; font-weight:400; }
.hero-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:50px;
  padding:8px 18px; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:20px;
}
.hero-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.4)} }

/* ══ TICKER ══════════════════════════════════════════════ */
.ticker-bar {
  background:var(--darker); border-top:1px solid var(--border);
  border-bottom:1px solid var(--border); padding:9px 0;
  overflow:hidden; white-space:nowrap; font-family:var(--mono);
  font-size:11px; color:var(--muted);
}
.ticker-inner { display:inline-block; animation:tickerScroll 40s linear infinite; }
.ticker-inner .hi { color:var(--accent); margin:0 4px; }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══ LAYOUT ══════════════════════════════════════════════ */
.container { max-width:1160px; margin:0 auto; padding:32px 24px; }
.section { padding:60px 0; }
.sec-label { font-family:var(--mono); font-size:9px; color:var(--accent); letter-spacing:4px; text-transform:uppercase; margin-bottom:8px; }
.sec-heading { font-size:28px; font-weight:800; letter-spacing:-0.5px; margin-bottom:8px; }
.page-title { font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:4px; text-transform:uppercase; margin-bottom:6px; }
.page-heading { font-size:26px; font-weight:800; letter-spacing:-0.5px; margin-bottom:24px; }

/* ══ CARDS ═══════════════════════════════════════════════ */
.card { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:24px; margin-bottom:20px; }
.card-header { font-family:var(--mono); font-size:10px; color:var(--accent); letter-spacing:3px; text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid var(--border); margin-bottom:18px; }

/* ══ PRODUCT CARDS ═══════════════════════════════════════ */
.phones-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-top:20px; }
.phone-card {
  background:var(--panel); border:1px solid var(--border); border-radius:18px;
  overflow:hidden; transition:transform 0.25s,box-shadow 0.25s; cursor:pointer;
}
.phone-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(26,86,219,0.15); }
.phone-img-wrap {
  position:relative; padding:20px; background:var(--panel2);
  text-align:center; min-height:180px; display:flex; align-items:center; justify-content:center;
}
.phone-img-wrap img { max-height:150px; max-width:100%; object-fit:contain; transition:transform 0.3s; }
.phone-card:hover .phone-img-wrap img { transform:scale(1.06); }
.phone-img-placeholder { font-size:64px; opacity:0.2; }
.phone-discount-badge {
  position:absolute; top:10px; right:10px; background:var(--red);
  color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:6px;
  font-family:var(--mono);
}
.phone-info { padding:14px 16px; }
.phone-brand { font-size:10px; font-weight:700; color:var(--accent); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; font-family:var(--en-font); }
.phone-name { font-size:15px; font-weight:700; margin-bottom:8px; color:var(--text); line-height:1.3; }
.phone-price-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.phone-price { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--accent); }
.phone-orig { font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:line-through; }
.phone-specs { font-size:11px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.phone-card .btn { width:100%; text-align:center; font-size:12px; padding:9px; }

/* Category badge on accessories */
.cat-badge {
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; padding:2px 8px; border-radius:4px;
  background:rgba(26,86,219,0.1); color:var(--accent);
  margin-bottom:4px; font-family:var(--en-font);
}

/* ══ STATS ═══════════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:24px; }
.stat-box {
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:18px 16px; position:relative; overflow:hidden;
}
.stat-box::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--btn-grad); }
.stat-num { font-family:var(--mono); font-size:24px; color:var(--accent); display:block; font-weight:700; }
.stat-label { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-top:4px; display:block; }

/* ══ FORMS ═══════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; background:var(--darker); border:1.5px solid var(--border); border-radius:11px;
  color:var(--text); padding:11px 14px; font-family:var(--sans); font-size:14px; outline:none;
  transition:border-color 0.2s,box-shadow 0.2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,86,219,0.1);
}
.form-group select option { background:var(--darker); }
.form-group input::placeholder { color:var(--muted); }
.form-hint { font-size:11px; color:var(--muted); margin-top:5px; }

/* ══ BUTTONS ═════════════════════════════════════════════ */
.btn {
  padding:11px 24px; font-family:var(--sans); font-weight:700;
  font-size:13px; letter-spacing:0.5px; cursor:pointer;
  border:none; border-radius:11px; transition:all 0.2s;
  display:inline-block; text-align:center;
}
.btn-primary { background:var(--btn-grad); color:#fff; box-shadow:var(--btn-shadow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:var(--btn-shadow-h); filter:brightness(1.06); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.btn-outline:hover { background:rgba(26,86,219,0.08); transform:translateY(-1px); }
.btn-danger { background:transparent; color:var(--red); border:1.5px solid var(--red); }
.btn-danger:hover { background:rgba(220,38,38,0.08); }
.btn-sm { padding:7px 14px; font-size:12px; border-radius:8px; }
.btn-full { width:100%; }
.btn-icon { display:inline-flex; align-items:center; gap:8px; }

/* ══ TABLE ═══════════════════════════════════════════════ */
.vcc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vcc-table { width:100%; border-collapse:collapse; font-size:13px; }
.vcc-table th { padding:11px 14px; text-align:left; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--border); font-weight:700; }
.vcc-table td { padding:12px 14px; border-bottom:1px solid var(--border); border-bottom-color:rgba(128,128,128,0.08); vertical-align:middle; }
.vcc-table tr:hover td { background:rgba(26,86,219,0.03); }

/* ══ BADGES ══════════════════════════════════════════════ */
.badge { display:inline-block; padding:3px 10px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; border-radius:6px; font-family:var(--mono); }
.badge-pending    { background:rgba(217,119,6,0.12);  color:var(--yellow); border:1px solid rgba(217,119,6,0.3); }
.badge-processing { background:rgba(26,86,219,0.12);  color:var(--accent);  border:1px solid rgba(26,86,219,0.3); }
.badge-completed  { background:rgba(5,150,105,0.12);  color:var(--green);   border:1px solid rgba(5,150,105,0.3); }
.badge-cancelled  { background:rgba(220,38,38,0.12);  color:var(--red);     border:1px solid rgba(220,38,38,0.3); }
.badge-active     { background:rgba(5,150,105,0.12);  color:var(--green);   border:1px solid rgba(5,150,105,0.3); }

/* ══ ALERTS ══════════════════════════════════════════════ */
.alert { padding:13px 16px; font-size:13px; border-left:3px solid; border-radius:0 10px 10px 0; margin-bottom:16px; line-height:1.5; }
.alert-success { background:rgba(5,150,105,0.08);  border-color:var(--green);  color:var(--green); }
.alert-info    { background:rgba(26,86,219,0.08);  border-color:var(--accent); color:var(--accent); }
.alert-warn    { background:rgba(217,119,6,0.08);  border-color:var(--yellow); color:var(--yellow); }
.alert-error   { background:rgba(220,38,38,0.08);  border-color:var(--red);    color:var(--red); }

/* ══ AUTH ════════════════════════════════════════════════ */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--dark); }
.auth-box { background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:36px 32px; width:100%; max-width:420px; }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo-icon { width:54px; height:54px; background:var(--btn-grad); border-radius:16px; display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--btn-shadow); margin-bottom:12px; }
.auth-logo-icon svg { width:30px; height:30px; fill:#fff; }
.auth-title { font-size:22px; font-weight:800; margin-bottom:4px; }
.auth-sub { font-size:13px; color:var(--muted); }
.auth-link { color:var(--accent); font-weight:600; }

/* ══ DEPOSIT ═════════════════════════════════════════════ */
.deposit-method { background:var(--darker); border:1.5px solid var(--border); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:16px 18px; margin-bottom:12px; }
.deposit-method .method-name { font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.deposit-method .method-num { font-family:var(--mono); font-size:22px; color:var(--accent); letter-spacing:3px; }
.deposit-method .method-type { font-size:11px; color:var(--muted); margin-top:4px; }

/* ══ HOW CARDS ═══════════════════════════════════════════ */
.how-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px; }
.how-card { background:var(--panel); border:1px solid var(--border); padding:26px 22px; border-radius:16px; position:relative; overflow:hidden; }
.how-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--btn-grad); }
.how-num { font-family:var(--mono); font-size:32px; color:var(--accent); opacity:0.4; font-weight:700; margin-bottom:10px; }
.how-title { font-size:15px; font-weight:700; color:var(--text); margin-bottom:8px; }
.how-desc { font-size:13px; color:var(--muted); line-height:1.65; }

/* ══ PROFILE ═════════════════════════════════════════════ */
.profile-avatar { width:54px; height:54px; border-radius:14px; background:var(--btn-grad); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#fff; box-shadow:var(--btn-shadow); flex-shrink:0; font-family:var(--en-font); }
.profile-info { display:flex; align-items:center; gap:16px; }

/* ══ ADMIN SIDEBAR ═══════════════════════════════════════ */
.admin-wrap { display:flex; min-height:calc(100vh - 64px); }
.sidebar { width:220px; background:var(--panel); border-right:1px solid var(--border); padding:16px 0; flex-shrink:0; position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto; }
.s-section { font-size:9px; color:var(--muted); letter-spacing:3px; text-transform:uppercase; padding:14px 18px 6px; font-weight:700; font-family:var(--mono); }
.s-nav-item { display:flex; align-items:center; gap:10px; padding:10px 18px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border-left:3px solid transparent; transition:all 0.18s; width:100%; background:none; border-top:none; border-right:none; border-bottom:none; font-family:var(--sans); text-align:left; }
.s-nav-item:hover { color:var(--text); background:var(--panel2); }
.s-nav-item.active { color:var(--accent); border-left-color:var(--accent); background:var(--panel2); }
.s-nav-item .s-icon { width:18px; text-align:center; font-size:16px; }
.main { flex:1; padding:24px; overflow-x:hidden; }

/* ══ MODAL ═══════════════════════════════════════════════ */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:500; display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px); }
.modal-bg.open { display:flex; }
.modal-box { background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:28px; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; position:relative; }
.modal-title { font-size:18px; font-weight:800; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.modal-close { position:absolute; top:16px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); transition:color 0.2s; }
.modal-close:hover { color:var(--red); }

/* ══ SECTION TABS ════════════════════════════════════════ */
.section-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
.section-tab {
  padding:10px 24px; border-radius:50px;
  border:2px solid var(--border); font-family:var(--sans);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:all 0.2s; background:none; color:var(--muted);
  display:flex; align-items:center; gap:8px;
}
.section-tab:hover { border-color:var(--accent); color:var(--accent); }
.section-tab.active { background:var(--btn-grad); color:#fff; border-color:transparent; box-shadow:var(--btn-shadow); }
.section-tab .tab-icon { width:18px; height:18px; }

/* ══ ACCESSORIES SECTION ═════════════════════════════════ */
.acc-cat-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.acc-cat-pill { padding:6px 16px; border-radius:50px; border:1.5px solid var(--border); font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; transition:all 0.2s; background:none; font-family:var(--en-font); }
.acc-cat-pill:hover, .acc-cat-pill.active { color:var(--accent); border-color:var(--accent); background:rgba(26,86,219,0.07); }

/* ══ GRID ════════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

/* ══ MISC ════════════════════════════════════════════════ */
.divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
.loader { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.mono { font-family:var(--mono); }
.text-accent { color:var(--accent); }
.text-muted { color:var(--muted); }
.text-red { color:var(--red); }
.text-green { color:var(--green); }
.text-yellow { color:var(--yellow); }
.mb-0 { margin-bottom:0 !important; }
.mt-auto { margin-top:auto; }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }

/* ══ FAB CONTROLS (Theme + Language) ═══════════════════ */
.fab-controls {
  position:fixed; bottom:20px; right:16px;
  z-index:999; display:flex; flex-direction:row;
  align-items:flex-end; gap:10px;
}
/* Each switcher inside fab-controls is positioned relative to itself */
.fab-controls .theme-switcher {
  position:relative; bottom:auto; right:auto;
}
/* The panel pops upward from each button */
.fab-controls .theme-panel {
  bottom:58px; right:0; left:auto;
  min-width:160px;
}

/* ══ THEME SWITCHER ══════════════════════════════════════ */
.theme-switcher { position:fixed; bottom:24px; right:24px; z-index:999; }
.theme-toggle-btn { width:50px; height:50px; border-radius:50%; background:var(--btn-grad); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--btn-shadow); transition:transform 0.2s,box-shadow 0.2s; }
.theme-toggle-btn svg { width:22px; height:22px; fill:#fff; }
.theme-toggle-btn:hover { transform:scale(1.12) rotate(20deg); box-shadow:var(--btn-shadow-h); }
.theme-panel { display:none; position:absolute; bottom:62px; right:0; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:10px; flex-direction:column; gap:4px; min-width:170px; box-shadow:0 8px 32px rgba(0,0,0,0.2); }
.theme-panel.open { display:flex; }
.theme-panel-title { font-size:9px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; padding:2px 8px 8px; border-bottom:1px solid var(--border); margin-bottom:2px; font-family:var(--mono); }
.theme-opt { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:all 0.15s; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--text); background:none; text-align:left; width:100%; }
.theme-opt:hover { background:var(--panel2); border-color:var(--border); }
.theme-opt.active { border-color:var(--accent); background:rgba(26,86,219,0.06); color:var(--accent); }
.theme-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; border:2px solid rgba(255,255,255,0.2); }

/* ══ SHOP LAYOUT ═════════════════════════════════════════ */
.shop-layout { display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
.filter-sidebar { background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; position:sticky; top:84px; }
.filter-title { font-size:11px; font-weight:700; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; font-family:var(--mono); }
.filter-opt { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); transition:all 0.15s; }
.filter-opt:hover, .filter-opt.active { color:var(--accent); background:rgba(26,86,219,0.07); }
.sort-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.sort-row select { background:var(--panel); border:1.5px solid var(--border); border-radius:9px; color:var(--text); padding:8px 12px; font-family:var(--sans); font-size:13px; font-weight:600; outline:none; cursor:pointer; }
.search-bar { flex:1; min-width:200px; }
.search-bar input { width:100%; background:var(--panel); border:1.5px solid var(--border); border-radius:9px; color:var(--text); padding:9px 14px; font-family:var(--sans); font-size:14px; outline:none; }
.search-bar input:focus { border-color:var(--accent); }
.phone-count { font-size:12px; color:var(--muted); font-family:var(--mono); }

/* Order modal specific */
.phone-modal-img { text-align:center; background:var(--panel2); border-radius:12px; padding:20px; margin-bottom:16px; }
.phone-modal-img img { max-height:200px; max-width:100%; object-fit:contain; }
.price-big { font-family:var(--mono); font-size:28px; font-weight:700; color:var(--accent); }
.balance-check { background:var(--darker); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin:12px 0; font-size:13px; }
.bonus-note { background:rgba(5,150,105,0.08); border:1px solid rgba(5,150,105,0.2); border-radius:10px; padding:10px 14px; font-size:12px; color:var(--green); margin-bottom:12px; }

/* ══ FOOTER ══════════════════════════════════════════════ */
.footer { border-top:1px solid var(--border); padding:28px 24px; text-align:center; font-size:12px; color:var(--muted); }
.footer a { color:var(--accent); font-weight:600; }
.footer-links { display:flex; justify-content:center; gap:24px; margin-top:10px; flex-wrap:wrap; }

/* ══ WAKE BAR ════════════════════════════════════════════ */
#ahmd-wake-bar { transition: opacity 0.3s; }

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width:768px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .container { padding:16px 14px; }

  /* ── Navbar ── */
  .navbar {
    padding:0 14px; height:auto; min-height:58px;
    flex-wrap:wrap; padding-top:8px; padding-bottom:8px;
    position:sticky; top:0; z-index:200;
  }
  /* First row: logo | [lang pill auto-pushed right] | hamburger */
  .navbar > .nav-logo { flex:0 0 auto; }
  /* Lang switcher injected between logo and hamburger on mobile */
  .navbar > #nav-lang-sw {
    margin-left:auto;
    margin-right:6px;
  }
  .nav-logo-text { font-size:15px; }
  .nav-hamburger { display:block; flex:0 0 auto; }

  /* Mobile nav dropdown */
  .nav-links {
    display:none; flex-direction:column; width:100%;
    padding:8px 0 12px; gap:2px;
    border-top:1px solid var(--border); margin-top:6px;
  }
  .nav-links.open { display:flex; }
  .nav-link {
    padding:12px 14px; border-radius:10px;
    font-size:14px; width:100%;
  }
  .nav-link:hover { background:var(--panel2); }

  /* Language switcher in mobile nav */
  .lang-switcher {
    margin:8px 14px 4px; align-self:flex-start;
  }
  .lang-btn { padding:6px 16px; font-size:12px; }

  /* Sign Up / logout button in mobile nav */
  .nav-links .btn {
    margin:4px 14px 0; width:calc(100% - 28px);
    text-align:center; font-size:14px; padding:12px;
  }
  .nav-links .btn-logout {
    margin:4px 14px 0; width:calc(100% - 28px);
    text-align:center; font-size:14px; padding:12px;
  }
  .nav-balance {
    margin:4px 14px 0; text-align:center;
    font-size:14px;
  }

  /* ── Shop layout ── */
  .shop-layout { grid-template-columns:1fr; }
  .filter-sidebar { position:static; display:none; }
  .filter-sidebar.open { display:block; }

  /* ── Cards ── */
  .phone-card .btn { padding:9px; }
  .auth-box { padding:24px 18px; }

  /* ── Admin sidebar → sticky horizontal tab bar on mobile ── */
  .admin-wrap { flex-direction:column; }
  .sidebar {
    width:100%; height:auto;
    border-right:none; border-bottom:2px solid var(--border);
    padding:0;
    /* Sticky below navbar */
    position:sticky;
    top:0;
    z-index:150;
    background:var(--panel);
    display:flex; flex-direction:row;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar { display:none; }
  .s-section { display:none; }
  .sidebar > .s-nav-item,
  .sidebar-nav-row .s-nav-item {
    width:auto; padding:12px 16px; font-size:12px;
    border-left:none; border-radius:0;
    border-bottom:3px solid transparent;
    white-space:nowrap; flex-shrink:0;
    border-top:none; border-right:none;
  }
  .sidebar > .s-nav-item.active,
  .sidebar-nav-row .s-nav-item.active {
    border-bottom-color:var(--accent); border-left:none;
    background:var(--panel2); color:var(--accent);
  }
  .sidebar > * { flex-shrink:0; }
  /* Push main content down so heading is visible below sticky sidebar */
  .main { padding:16px 14px; padding-top:20px; }

  /* ── Admin navbar on mobile: hide username, keep lang+logout ── */
  #adm-name-nav { display:none; }
  .nav-lang-switch { flex-shrink:0; }

  /* ── page-title + page-heading: ensure never hidden under sticky sidebar ── */
  .section-content .page-title { padding-top:4px; }

  /* ── nav-lang-switch: keep compact on mobile ── */
  .nav-lang-switch .lang-btn { padding:5px 10px; font-size:11px; }

  /* ── Grids ── */
  .phones-grid { grid-template-columns:repeat(2,1fr); gap:12px; }

  /* ── Hero ── */
  .hero { padding:40px 16px; min-height:70vh; }
  .hero-title { font-size:28px; }

  /* ── Tables ── */
  .vcc-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; }
  .vcc-table { min-width:560px; font-size:12px; }

  /* ── Modals ── */
  .modal-box { padding:20px 16px; margin:10px; max-height:85vh; }

  /* ── Section tabs ── */
  .section-tabs { gap:6px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .section-tab { padding:8px 16px; font-size:12px; white-space:nowrap; flex-shrink:0; }

  /* ── Theme panel → always open upward, full width on small screens ── */
  .theme-panel { right:0; left:auto; min-width:160px; }
  .theme-switcher { bottom:16px; right:16px; }
}

@media (max-width:480px) {
  .phones-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .hero-title { font-size:24px; }
  .stat-num { font-size:20px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .how-grid { grid-template-columns:1fr; }
  /* Trust bar on very small screens */
  .trust-bar { gap:16px; }
  .acc-showcase { grid-template-columns:repeat(2,1fr); gap:10px; }
}

/* Prevent horizontal overflow on all pages */
body { overflow-x:hidden; }
img { max-width:100%; height:auto; }