/* ══════════════════════════════════════════════════════
   STARS SHOP — ADMIN PANEL  style.css
   Liquid Glass / Atmospheric — DNA: mini-app & franchise-panel
   ══════════════════════════════════════════════════════ */

/* ── Tokens: Dark ── */
:root, [data-theme="dark"] {
  --void:    #050810;
  --base:    #080c18;
  --floor:   #0c1020;
  --surface: #111828;

  --g1: rgba(255,255,255,.035);
  --g2: rgba(255,255,255,.055);
  --g3: rgba(255,255,255,.08);

  --gb:     rgba(255,255,255,.08);
  --gb-hi:  rgba(255,255,255,.13);
  --shine:  rgba(255,255,255,.06);
  --shine-hi: rgba(255,255,255,.11);

  --t1: #f0f4ff;
  --t2: #6b7a9a;
  --t3: #3a4460;

  --cyan:       #00d4c8;
  --cyan-deep:  #00b8ae;
  --cyan-dim:   rgba(0,212,200,.12);
  --cyan-glow:  rgba(0,212,200,.22);
  --cyan-glow2: rgba(0,212,200,.38);
  --coral:      #ff6b7a;
  --coral-dim:  rgba(255,107,122,.13);
  --coral-glow: rgba(255,107,122,.24);
  --amber:      #ffb347;
  --amber-dim:  rgba(255,179,71,.13);
  --amber-glow: rgba(255,179,71,.22);
  --violet:     #9b7fff;
  --violet-dim: rgba(155,127,255,.13);
  --violet-glow:rgba(155,127,255,.22);
  --green:      #34dba0;
  --green-dim:  rgba(52,219,160,.12);
  --green-glow: rgba(52,219,160,.22);
  --red:        #ff5370;
  --red-dim:    rgba(255,83,112,.12);

  /* Legacy aliases — preserve JS compatibility */
  --bg: var(--base); --bg-base: var(--base);
  --bg-surface: var(--surface); --bg-raised: var(--floor);
  --bg-overlay: rgba(255,255,255,.06);
  --card: var(--surface); --card-2: var(--floor);
  --border: var(--gb); --border-md: var(--gb-hi); --border-2: var(--gb-hi);
  --border-3: rgba(255,255,255,.20);
  --text: var(--t1); --text-1: var(--t1); --text-2: var(--t2); --text-3: var(--t3);
  --text-muted: var(--t2);
  --accent: var(--cyan); --accent-dim: var(--cyan-dim); --accent-glow: var(--cyan-glow);
  --primary: var(--cyan);
  --blue: var(--cyan); --blue-2: var(--cyan-dim); --blue-3: rgba(0,212,200,.08);
  --green-2: var(--green-dim); --green-3: rgba(52,219,160,.08);
  --amber-2: var(--amber-dim); --amber-3: rgba(255,179,71,.08);
  --red-2: var(--red-dim); --red-3: rgba(255,83,112,.08);
  --purple: var(--violet); --purple-dim: var(--violet-dim); --purple-2: var(--violet-dim);
  --purple-3: rgba(155,127,255,.08);
  --cyan-2: var(--cyan-dim); --cyan-3: rgba(0,212,200,.08);
  --orange: #ff9a3c; --orange-2: rgba(255,154,60,.12);
  --surface-2: var(--floor);

  --hdr: rgba(8,12,24,.82);
  --sb:  244px;
  --topbar-h: 54px;
  --r:    12px;
  --r-sm: 8px;
  --r-lg: 16px;
  --rxs:  6px;
  --sidebar-w: var(--sb);

  --font: 'Syne', system-ui, sans-serif;
  --mono: 'DM Mono', 'JetBrains Mono', monospace;
}

/* ── Tokens: Light ── */
[data-theme="light"] {
  --void:    #e8eaf2;
  --base:    #eef0f8;
  --floor:   #f4f5fc;
  --surface: #ffffff;

  --g1: rgba(0,0,0,.025);
  --g2: rgba(0,0,0,.04);
  --g3: rgba(0,0,0,.06);

  --gb:    rgba(0,0,0,.09);
  --gb-hi: rgba(0,0,0,.14);
  --shine:    rgba(255,255,255,.7);
  --shine-hi: rgba(255,255,255,.9);

  --t1: #0d1120;
  --t2: #5a6480;
  --t3: #9aa0b8;

  --cyan:       #00a89e;
  --cyan-deep:  #008880;
  --cyan-dim:   rgba(0,168,158,.10);
  --cyan-glow:  rgba(0,168,158,.18);
  --cyan-glow2: rgba(0,168,158,.30);
  --coral:      #e8556a;
  --coral-dim:  rgba(232,85,106,.10);
  --coral-glow: rgba(232,85,106,.18);
  --amber:      #e09020;
  --amber-dim:  rgba(224,144,32,.10);
  --amber-glow: rgba(224,144,32,.18);
  --violet:     #7c5fd4;
  --violet-dim: rgba(124,95,212,.10);
  --violet-glow:rgba(124,95,212,.18);
  --green:      #1fb87a;
  --green-dim:  rgba(31,184,122,.10);
  --green-glow: rgba(31,184,122,.18);
  --red:        #e03050;
  --red-dim:    rgba(224,48,80,.10);

  --bg: var(--base); --bg-base: var(--base);
  --bg-surface: var(--surface); --bg-raised: var(--floor);
  --bg-overlay: rgba(0,0,0,.05);
  --card: var(--surface); --card-2: var(--floor);
  --border: var(--gb); --border-md: var(--gb-hi); --border-2: var(--gb-hi);
  --border-3: rgba(0,0,0,.22);
  --text: var(--t1); --text-1: var(--t1); --text-2: var(--t2); --text-3: var(--t3);
  --text-muted: var(--t2);
  --accent: var(--cyan); --accent-dim: var(--cyan-dim); --accent-glow: var(--cyan-glow);
  --primary: var(--cyan);
  --blue: var(--cyan); --blue-2: var(--cyan-dim); --blue-3: rgba(0,168,158,.07);
  --green-2: var(--green-dim); --green-3: rgba(31,184,122,.07);
  --amber-2: var(--amber-dim); --amber-3: rgba(224,144,32,.07);
  --red-2: var(--red-dim); --red-3: rgba(224,48,80,.07);
  --purple: var(--violet); --purple-dim: var(--violet-dim); --purple-2: var(--violet-dim);
  --purple-3: rgba(124,95,212,.07);
  --cyan-2: var(--cyan-dim);
  --orange: #d4740a; --orange-2: rgba(212,116,10,.10);
  --surface-2: var(--floor);

  --hdr: rgba(238,240,248,.88);
  --sb:  244px;
  --sidebar-w: var(--sb);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html, body { height: 100%; overflow: hidden }
body {
  font-family: var(--font);
  background: var(--base);
  color: var(--t1);
  display: flex;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Atmospheric background ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 5% 10%,  rgba(0,212,200,.10) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 95% 5%,  rgba(255,107,122,.09) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 92%, rgba(155,127,255,.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(0,212,200,.06)  0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,127,255,.04) 0%, transparent 70%);
}
[data-theme="light"] body::before { opacity: .45 }

body > * { position: relative; z-index: 1 }

/* ── Starfield ── */
#star-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .6;
}
[data-theme="light"] #star-canvas { display: none }

/* ── Sidebar ── */
.sidebar {
  width: var(--sb); flex-shrink: 0;
  background: var(--hdr);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border-right: 1px solid var(--gb);
  display: flex; flex-direction: column;
  height: 100vh; overflow: hidden;
  position: relative; z-index: 100;
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo {
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--gb);
  display: flex; align-items: center; gap: 10px;
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan) 55%, var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  box-shadow: 0 4px 14px var(--cyan-glow);
}
.logo-name { font-size: 14px; font-weight: 800; letter-spacing: -.02em }
.logo-sub  { font-size: 10px; color: var(--t2); margin-top: 1px }
.logo-admin-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 100px;
  background: var(--cyan-dim); border: 1px solid rgba(0,212,200,.25);
  font-size: 9px; font-weight: 800; color: var(--cyan);
  letter-spacing: .07em; flex-shrink: 0;
}

.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 8px 0;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none }

.nav-section-label {
  padding: 12px 14px 4px;
  font-size: 9px; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: .1em;
}
.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px; cursor: pointer;
  text-decoration: none; color: var(--t2);
  font-size: 13px; font-weight: 600;
  transition: background .12s, color .12s;
  position: relative; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.nav-link:hover { background: var(--g1); color: var(--t1) }
.nav-link.active {
  background: var(--cyan-dim); color: var(--cyan); font-weight: 700;
}
.nav-link.active::before {
  content: ''; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}
.nav-link-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex-shrink: 0;
  background: var(--g1);
}
.nav-link.active .nav-link-icon { background: var(--cyan-dim) }
.icon-green  { background: var(--green-dim)  !important }
.icon-amber  { background: var(--amber-dim)  !important }
.icon-blue   { background: var(--cyan-dim)   !important }
.icon-red    { background: var(--coral-dim)  !important }
.icon-purple { background: var(--violet-dim) !important }
.icon-cyan   { background: var(--cyan-dim)   !important }
.icon-orange { background: var(--orange-2)   !important }

.sidebar-footer {
  padding: 11px 14px; border-top: 1px solid var(--gb);
  display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-deep), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px var(--cyan-glow);
}
.sidebar-user-name { font-size: 12px; font-weight: 700 }
.sidebar-user-role { font-size: 10px; color: var(--t2) }

/* ── Main wrap ── */
.main-wrap {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  background: var(--hdr);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--gb);
  display: flex; align-items: center;
  padding: 0 20px; gap: 12px; flex-shrink: 0;
}
.topbar-title { font-size: 15px; font-weight: 800; letter-spacing: -.02em; flex: 1 }
.topbar-sub   { font-size: 11px; color: var(--t2); margin-top: 1px }
.topbar-search {
  display: flex; align-items: center; gap: 7px;
  background: var(--g1); border: 1px solid var(--gb);
  border-radius: var(--r-sm); padding: 6px 11px; min-width: 180px;
  transition: border-color .15s;
}
.topbar-search:focus-within { border-color: var(--cyan) }
.topbar-search input {
  background: transparent; border: none; outline: none;
  color: var(--t1); font-family: inherit; font-size: 13px; width: 100%;
}
.topbar-search input::placeholder { color: var(--t3) }

.topbar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan) 55%, var(--violet));
  border: none; border-radius: var(--r-sm);
  color: #fff; font-family: var(--font); font-size: 12px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 12px var(--cyan-glow);
  transition: opacity .12s;
  position: relative; overflow: hidden;
}
.topbar-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,.15) 0%, transparent 55%);
  pointer-events: none;
}
.topbar-btn:hover { opacity: .88 }

.topbar-icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--g1); border: 1px solid var(--gb);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; transition: background .12s; flex-shrink: 0;
}
.topbar-icon-btn:hover { background: var(--g2) }

/* ── Main content ── */
.main-content {
  flex: 1; overflow-y: auto; padding: 20px;
  scrollbar-width: thin; scrollbar-color: var(--gb) transparent;
}
.main-content::-webkit-scrollbar { width: 4px }
.main-content::-webkit-scrollbar-thumb { background: var(--gb); border-radius: 2px }
.panel { display: none }
.panel.active { display: block; animation: pg-in .2s ease }
@keyframes pg-in { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* ── Page header ── */
.page-title    { font-size: 22px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 3px }
.page-subtitle { font-size: 12px; color: var(--t2); margin-bottom: 20px }

/* ── Stat cards ── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.stat-card {
  background: var(--g1);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--gb); border-top-color: var(--shine);
  border-radius: var(--r); padding: 16px;
  position: relative; overflow: hidden;
  transition: border-color .15s, box-shadow .2s;
}
.stat-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 55%);
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
}
.stat-card.green::before  { background: var(--green);  box-shadow: 0 0 12px var(--green-glow) }
.stat-card.blue::before   { background: var(--cyan);   box-shadow: 0 0 12px var(--cyan-glow) }
.stat-card.amber::before  { background: var(--amber);  box-shadow: 0 0 12px var(--amber-glow) }
.stat-card.purple::before { background: var(--violet); box-shadow: 0 0 12px var(--violet-glow) }
.stat-card:hover { border-color: var(--gb-hi); box-shadow: 0 4px 24px rgba(0,0,0,.15) }

.stat-card-label { font-size: 10px; color: var(--t2); font-weight: 700; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; position: relative; z-index: 1 }
.stat-card-value { font-size: 26px; font-weight: 800; letter-spacing: -.04em; margin-bottom: 4px; position: relative; z-index: 1 }
.stat-card-delta { font-size: 11px; color: var(--t2); position: relative; z-index: 1 }
.stat-card-delta.up   { color: var(--green) }
.stat-card-delta.down { color: var(--coral) }

/* ── KPI cards ── */
.stats-kpi-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px;
}
.kpi-card {
  background: var(--g1);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--gb); border-top-color: var(--shine);
  border-radius: var(--r); padding: 14px; text-align: center;
  position: relative; overflow: hidden;
  transition: border-color .15s;
}
.kpi-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 60%);
}
.kpi-card:hover { border-color: var(--gb-hi) }
.kpi-icon  { font-size: 20px; margin-bottom: 7px; position: relative; z-index: 1 }
.kpi-value { font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 3px; position: relative; z-index: 1 }
.kpi-label { font-size: 9px; color: var(--t2); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; position: relative; z-index: 1 }
.kpi-delta { font-size: 10px; color: var(--t3); position: relative; z-index: 1 }

/* ── Section group ── */
.section-group {
  background: var(--g1);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--gb); border-top-color: var(--shine);
  border-radius: var(--r); overflow: hidden; margin-bottom: 14px;
  position: relative;
}
.section-group::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 45%);
}
.section-group-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--gb);
  position: relative; z-index: 1;
}
.section-group-icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.section-group-title { font-size: 13px; font-weight: 800 }
.section-group-sub   { font-size: 11px; color: var(--t2); margin-top: 1px }

/* ── Table ── */
.table-wrap {
  background: var(--g1);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--gb); border-top-color: var(--shine);
  border-radius: var(--r); overflow: hidden; margin-bottom: 14px;
  position: relative;
}
.table-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 45%);
}
.table-hdr-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--gb);
  position: relative; z-index: 1;
}
.table-hdr-title   { font-size: 13px; font-weight: 800 }
.table-hdr-actions { display: flex; gap: 7px; align-items: center }
table  { width: 100%; border-collapse: collapse; position: relative; z-index: 1 }
thead th {
  padding: 8px 14px; text-align: left;
  font-size: 9px; font-weight: 800; color: var(--t3);
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--gb); white-space: nowrap;
  font-family: var(--mono);
}
tbody tr { border-bottom: 1px solid var(--gb); transition: background .08s }
tbody tr:last-child { border-bottom: none }
tbody tr:hover { background: var(--g2) }
tbody td { padding: 10px 14px; font-size: 13px; vertical-align: middle }
.td-mono { font-family: var(--mono); font-size: 11px; color: var(--t2) }
.td-bold { font-weight: 700 }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; position: relative; z-index: 1 }
.admin-table th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gb); color: var(--t2); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .06em }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--gb) }

/* ── Badges / Pills ── */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-size: 10px; font-weight: 800; letter-spacing: .03em;
}
.pill-green  { background: var(--green-dim);  color: var(--green) }
.pill-amber  { background: var(--amber-dim);  color: var(--amber) }
.pill-blue   { background: var(--cyan-dim);   color: var(--cyan)  }
.pill-red    { background: var(--red-dim);    color: var(--red)   }
.pill-purple { background: var(--violet-dim); color: var(--violet) }
.pill-cyan   { background: var(--cyan-dim);   color: var(--cyan)  }
.pill-dim    { background: var(--g2);         color: var(--t2)   }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 13px; border-radius: var(--r-sm);
  font-family: var(--font); font-size: 12px; font-weight: 700;
  cursor: pointer; transition: opacity .12s, box-shadow .15s;
  border: 1px solid transparent; position: relative; overflow: hidden;
}
.btn:hover { opacity: .88 }
.btn::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, transparent 60%);
}
.btn-primary {
  background: linear-gradient(135deg, var(--cyan-deep), var(--cyan) 55%, var(--violet));
  color: #fff; border-color: rgba(0,212,200,.25);
  box-shadow: 0 2px 14px var(--cyan-glow);
}
.btn-success {
  background: var(--green-dim); color: var(--green);
  border-color: rgba(52,219,160,.2);
}
.btn-danger {
  background: var(--red-dim); color: var(--red);
  border-color: rgba(255,83,112,.2);
}
.btn-ghost {
  background: var(--g1); color: var(--t2);
  border-color: var(--gb);
}
.btn-ghost:hover { background: var(--g2); color: var(--t1) }
.btn-sm { padding: 4px 10px; font-size: 11px }

/* ── Forms ── */
.form-group { margin-bottom: 14px }
.form-label {
  font-size: 9px; font-weight: 800; color: var(--t2);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 6px; display: block;
  font-family: var(--mono);
}
.form-input, .form-select, .form-textarea, .inp {
  width: 100%; padding: 9px 12px;
  background: var(--g1); border: 1px solid var(--gb);
  border-radius: var(--r-sm); color: var(--t1);
  font-family: var(--font); font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus, .inp:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}
.form-select { appearance: none; cursor: pointer }
.form-textarea, .inp[rows] { resize: vertical; min-height: 80px }

/* ── Toggle ── */
.toggle-sw {
  width: 38px; height: 20px; border-radius: 10px;
  background: var(--g3); border: 1px solid var(--gb);
  position: relative; cursor: pointer; transition: background .18s; flex-shrink: 0;
}
.toggle-sw.on {
  background: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
}
.toggle-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--t3); transition: transform .18s, background .18s;
}
.toggle-sw.on::after { transform: translateX(18px); background: #fff }

/* ── User cell ── */
.user-cell { display: flex; align-items: center; gap: 8px }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan-deep), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.user-name   { font-size: 13px; font-weight: 700 }
.user-handle { font-size: 11px; color: var(--t2) }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center;
  z-index: 200; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.modal-overlay.open { display: flex }
.modal {
  background: var(--floor);
  backdrop-filter: blur(40px) saturate(200%); -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid var(--gb-hi); border-top-color: var(--shine-hi);
  border-radius: 20px; padding: 24px;
  min-width: 340px; max-width: 480px; width: 90%;
  box-shadow: 0 24px 72px rgba(0,0,0,.45);
  animation: modal-in .2s ease; position: relative; overflow: hidden;
}
.modal::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 45%);
}
@keyframes modal-in { from { opacity: 0; transform: scale(.95) translateY(-8px) } to { opacity: 1; transform: none } }
.modal-title { font-size: 16px; font-weight: 800; margin-bottom: 16px; letter-spacing: -.02em; position: relative; z-index: 1 }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; position: relative; z-index: 1 }

/* ── Empty state ── */
.empty-state       { padding: 44px 20px; text-align: center }
.empty-state-icon  { font-size: 32px; margin-bottom: 10px; opacity: .4 }
.empty-state-title { font-size: 14px; font-weight: 700; margin-bottom: 4px }
.empty-state-sub   { font-size: 12px; color: var(--t2) }

/* ── Skeleton ── */
.sk {
  background: linear-gradient(90deg, var(--g1) 25%, var(--g3) 50%, var(--g1) 75%);
  background-size: 200% 100%; border-radius: 5px;
  animation: shimmer 1.4s ease-in-out infinite; display: inline-block;
}
@keyframes shimmer { 0% { background-position: 200% } 100% { background-position: -200% } }

/* ── Progress ── */
.prog-track { height: 4px; background: var(--g2); border-radius: 2px; overflow: hidden }
.prog-fill  { height: 100%; border-radius: 2px; transition: width .5s ease }

/* ── Chart wrapper ── */
.chart-wrap {
  background: var(--g1);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--gb); border-top-color: var(--shine);
  border-radius: var(--r); padding: 18px; margin-bottom: 14px;
  position: relative; overflow: hidden;
}
.chart-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, var(--shine-hi) 0%, transparent 45%);
}
.chart-ttl {
  font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 12px; color: var(--t2);
  font-family: var(--mono); position: relative; z-index: 1;
}

/* ── Stats section ── */
.stats-section { margin-bottom: 20px }
.stats-section h3 { margin-bottom: 10px; font-size: 14px; font-weight: 800; letter-spacing: -.01em }

/* ── Top product row ── */
.top-product-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--gb);
}
.top-rank  { font-weight: 800; width: 18px; color: var(--t2); font-size: 12px; font-family: var(--mono) }
.top-name  { flex: 1; font-size: 13px; font-weight: 600 }
.top-count { color: var(--t2); font-size: 12px; font-family: var(--mono) }

/* ── Toast ── */
#adminToast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--floor); border: 1px solid var(--gb-hi);
  border-top-color: var(--shine-hi);
  color: var(--t1); padding: 8px 18px; border-radius: 100px;
  font-size: 12px; font-weight: 600; pointer-events: none;
  opacity: 0; transition: opacity .18s; z-index: 500; white-space: nowrap;
  backdrop-filter: blur(20px); box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
#adminToast.show { opacity: 1 }

/* ── Group cards ── */
.group-cards { display: grid }
.group-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--gb);
  cursor: pointer; transition: background .1s;
  text-decoration: none; color: inherit;
  position: relative; z-index: 1;
}
.group-card:last-child { border-bottom: none }
.group-card:hover { background: var(--g2) }
.group-card-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.group-card-content { flex: 1; min-width: 0 }
.group-card-title   { font-size: 13px; font-weight: 700; margin-bottom: 2px }
.group-card-sub     { font-size: 11px; color: var(--t2) }
.group-card-chev    { color: var(--t3); font-size: 15px; flex-shrink: 0 }
.group-2col { display: grid; grid-template-columns: 1fr 1fr }
.group-2col .group-card:nth-child(odd) { border-right: 1px solid var(--gb) }

/* ── Spacer ── */
.spacer { height: 8px }

/* ── Sidebar overlay (mobile) ── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 99;
  backdrop-filter: blur(4px);
}
.sidebar-overlay.open { display: block }

/* ── Hamburger ── */
.hamburger { display: none; padding: 6px; cursor: pointer; color: var(--t1) }

/* ── Login modal overlay ── */
#loginModal {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(5,8,16,.82);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
}
#loginModal .modal {
  max-width: 360px; min-width: 300px;
}

/* ── Ticket / message bubbles ── */
.msg-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px }
.msg-row.mine { align-items: flex-end }
.msg-row.theirs { align-items: flex-start }
.msg-bubble {
  background: var(--g2); border: 1px solid var(--gb);
  border-radius: 12px; padding: 9px 13px;
  font-size: 13px; line-height: 1.5; max-width: 80%;
}
.msg-row.mine .msg-bubble {
  background: var(--cyan-dim); border-color: rgba(0,212,200,.2);
}
.msg-who  { font-size: 9px; font-weight: 800; color: var(--t2); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em }
.msg-time { font-size: 10px; color: var(--t3); font-family: var(--mono) }

/* ── Franchise ticket list ── */
.ticket-item {
  background: var(--g1); border: 1px solid var(--gb);
  border-radius: var(--r-sm); padding: 13px 15px;
  margin-bottom: 8px; cursor: pointer; transition: background .12s, border-color .12s;
}
.ticket-item:hover { background: var(--g2); border-color: var(--gb-hi) }

/* ── Broadcast history card ── */
.bc-card {
  background: var(--g1); border: 1px solid var(--gb);
  border-radius: var(--r-sm); padding: 14px 16px;
  margin: 0 0 8px;
}
.bc-preview {
  font-size: 12px; color: var(--t2); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  max-height: 60px; overflow: hidden;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr }
  .stats-kpi-grid { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 768px) {
  .sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; z-index: 200;
    transform: translateX(-100%);
  }
  .sidebar.open { transform: translateX(0) }
  .hamburger { display: flex }
  .topbar-search { min-width: 120px }
}
@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr }
  .stats-kpi-grid { grid-template-columns: 1fr 1fr }
}