/* ==========================================================================
   Yoovic Seller Central – neon navy theme
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg:            #020a2b;
  --bg-2:          #04113f;
  --surface:       #0b1b4d;
  --surface-2:     #0a1a4a;
  --card-top:      rgba(var(--rgb-16-44-118), 0.62);
  --card-bottom:   rgba(var(--rgb-6-20-72), 0.78);
  --border:        rgba(70, 145, 255, 0.34);
  --border-strong: rgba(90, 170, 255, 0.7);
  --glow:          0 0 18px rgba(30, 120, 255, 0.22), inset 0 0 22px rgba(40, 120, 255, 0.08);

  /* Text */
  --text:          #eef4ff;
  --text-2:        #aabde6;
  --text-3:        #7389bb;

  /* Accents */
  --accent:        #2f8bff;
  --accent-2:      #1ec8ff;
  --good:          #34d399;
  --bad:           #fb7185;

  /* Validated categorical data palette (dark surface) – fixed order */
  --s1: #3987e5; /* blue    */
  --s2: #d95926; /* orange  */
  --s3: #199e70; /* aqua    */
  --s4: #c98500; /* yellow  */
  --s5: #d55181; /* magenta */
  --s6: #9085e9; /* violet  */
  --s7: #e66767; /* red     */

  /* Chart grid lines (read by the charts and recoloured when the theme changes) */
  --chart-grid:    rgba(120, 160, 255, 0.12);
  --chart-grid-2:  rgba(120, 160, 255, 0.16);

  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 220px;
  --rail-w: 282px;
  --gap: 10px;

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Theme colours used across all stylesheets. These are the DARK values; theme-light.css redefines them for the light theme.
   rgb tokens hold r, g, b (used as rgba(var(--rgb-…), a)); --t-* are text colours; --hx-* are solid surface fills. */
:root {
  --rgb-10-30-96: 10, 30, 96;
  --rgb-10-32-104: 10, 32, 104;
  --rgb-10-34-110: 10, 34, 110;
  --rgb-10-36-110: 10, 36, 110;
  --rgb-12-36-110: 12, 36, 110;
  --rgb-14-40-120: 14, 40, 120;
  --rgb-14-42-118: 14, 42, 118;
  --rgb-16-44-118: 16, 44, 118;
  --rgb-16-50-150: 16, 50, 150;
  --rgb-2-10-43: 2, 10, 43;
  --rgb-20-50-140: 20, 50, 140;
  --rgb-20-55-140: 20, 55, 140;
  --rgb-20-56-150: 20, 56, 150;
  --rgb-20-60-160: 20, 60, 160;
  --rgb-20-60-170: 20, 60, 170;
  --rgb-24-64-160: 24, 64, 160;
  --rgb-3-12-48: 3, 12, 48;
  --rgb-4-12-48: 4, 12, 48;
  --rgb-4-14-56: 4, 14, 56;
  --rgb-4-16-60: 4, 16, 60;
  --rgb-5-18-66: 5, 18, 66;
  --rgb-6-18-66: 6, 18, 66;
  --rgb-6-20-72: 6, 20, 72;
  --rgb-6-22-78: 6, 22, 78;
  --rgb-8-24-80: 8, 24, 80;
  --rgb-8-24-84: 8, 24, 84;
  --rgb-8-26-86: 8, 26, 86;
  --t-2fd98b: #2fd98b;
  --t-4aa3ff: #4aa3ff;
  --t-4ee0a6: #4ee0a6;
  --t-6fa8ff: #6fa8ff;
  --t-6fb4ff: #6fb4ff;
  --t-6fc1ff: #6fc1ff;
  --t-6fd0ff: #6fd0ff;
  --t-6ff0b8: #6ff0b8;
  --t-6ff0d0: #6ff0d0;
  --t-7389bb: #7389bb;
  --t-8fc4ff: #8fc4ff;
  --t-9fb3dd: #9fb3dd;
  --t-9fd4ff: #9fd4ff;
  --t-9ff0cf: #9ff0cf;
  --t-b58cff: #b58cff;
  --t-b9b1ff: #b9b1ff;
  --t-bcd6ff: #bcd6ff;
  --t-bfe6ff: #bfe6ff;
  --t-bff1ff: #bff1ff;
  --t-cfe0ff: #cfe0ff;
  --t-cfe6ff: #cfe6ff;
  --t-dbe7ff: #dbe7ff;
  --t-ff2d3f: #ff2d3f;
  --t-ff5d73: #ff5d73;
  --t-ff7d8e: #ff7d8e;
  --t-ff8a9b: #ff8a9b;
  --t-ff9aa8: #ff9aa8;
  --t-ffb347: #ffb347;
  --t-ffb4be: #ffb4be;
  --t-ffb547: #ffb547;
  --t-ffc46b: #ffc46b;
  --t-ffcf5c: #ffcf5c;
  --t-ffcf7a: #ffcf7a;
  --t-ffd08a: #ffd08a;
  --t-ffd166: #ffd166;
  --t-ffd592: #ffd592;
  --t-fff3e3: #fff3e3;
  --hx-051340: #051340;
  --hx-061446: #061446;
  --hx-06154c: #06154c;
  --hx-062048: #062048;
  --hx-0a1a4a: #0a1a4a;
  --hx-0a1f66: #0a1f66;
  --hx-0b2270: #0b2270;
  --hx-0e2a78: #0e2a78;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 55% 30%, rgba(24, 90, 230, 0.28), transparent 60%),
    radial-gradient(800px 500px at 100% 0%, rgba(40, 100, 255, 0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  background-attachment: fixed;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }

[data-lucide], svg.lucide { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--text-3); }
.accent { color: var(--accent-2); }

:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 4px; }

/* ---------- App shell ---------- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.main {
  min-width: 0;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(var(--rgb-8-26-86), 0.95), rgba(var(--rgb-3-12-48), 0.98));
  border-right: 1px solid var(--border);
  box-shadow: 6px 0 30px rgba(10, 60, 200, 0.18);
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 140, 255, 0.35) transparent;
}

.brand { display: flex; flex-direction: column; padding: 0 8px; line-height: 1.05; }
.brand__name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  background: linear-gradient(180deg, #ffffff 30%, #9cc8ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(80, 160, 255, 0.35);
}
.brand__sub { font-size: 15px; font-weight: 500; color: var(--text); }

.store {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 12px;
  border-bottom: 1px solid rgba(80, 140, 255, 0.2);
}
.store__avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #4d8dff, #173b9c);
  box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.5), 0 0 16px rgba(60, 140, 255, 0.5);
}
.store__avatar [data-lucide], .store__avatar svg { width: 20px; height: 20px; }
.store__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.store__meta strong { font-size: 13px; }
.store__meta span { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-2); white-space: nowrap; }
.store__meta img { border-radius: 2px; }
.store__caret { color: var(--text-2); }

.nav { display: flex; flex-direction: column; gap: 8px; }
.nav__group { display: flex; flex-direction: column; gap: 1px; padding-bottom: 8px; border-bottom: 1px solid rgba(80, 140, 255, 0.14); }
.nav__group:last-child { border-bottom: 0; }
.nav__title { font-size: 12px; font-weight: 600; color: var(--text); padding: 4px 6px 4px; }
.nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 11.5px;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav__link [data-lucide], .nav__link svg { width: 17px; height: 17px; color: var(--t-cfe0ff); }
.nav__link:hover { background: rgba(60, 130, 255, 0.12); color: var(--text); }
.nav__link.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(40, 120, 255, 0.55), rgba(30, 90, 220, 0.25));
  border-color: var(--border-strong);
  box-shadow: 0 0 14px rgba(40, 130, 255, 0.45), inset 0 0 12px rgba(80, 160, 255, 0.25);
}

.assistant-card {
  margin-top: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(var(--rgb-20-60-160), 0.55), rgba(var(--rgb-8-24-80), 0.8));
  box-shadow: var(--glow);
}
.assistant-card strong { font-size: 12px; }
.assistant-card p { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.assistant-card .btn { grid-column: 1 / -1; }

.bot-badge {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e9f3ff, #7fb1ff 45%, #2456d8);
  color: #0b2a7a;
  box-shadow: 0 0 18px rgba(90, 170, 255, 0.7);
}
.bot-badge [data-lucide], .bot-badge svg { width: 22px; height: 22px; }
.bot-badge--lg { width: 52px; height: 52px; }
.bot-badge--lg [data-lucide], .bot-badge--lg svg { width: 30px; height: 30px; }

.sidebar__footer { font-size: 9.5px; color: var(--text-3); padding: 0 4px; }
.sidebar-scrim { display: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  transition: filter 0.15s, box-shadow 0.15s;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #2f8bff, #1b5fe0);
  border-color: rgba(140, 200, 255, 0.6);
  box-shadow: 0 0 14px rgba(40, 130, 255, 0.55);
}
.btn--primary:hover { filter: brightness(1.12); box-shadow: 0 0 20px rgba(60, 150, 255, 0.75); }
.btn--sm { padding: 6px 12px; font-size: 11px; }
.btn--block { width: 100%; }

/* ---------- Topbar ---------- */

.topbar { display: flex; align-items: center; gap: 14px; }
.topbar .topbar__menu { display: none; }

.search {
  flex: 0 1 552px;
  display: flex; align-items: center; gap: 10px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: rgba(var(--rgb-8-26-86), 0.7);
  box-shadow: 0 0 14px rgba(40, 120, 255, 0.25);
}
.search [data-lucide], .search svg { width: 18px; height: 18px; color: var(--t-dbe7ff); }
.search input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: 0; outline: 0;
  font-size: 12.5px;
}
.search input::placeholder { color: var(--text-2); }
.search:focus-within { border-color: var(--accent-2); }

.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* Dark / light switch: sun and moon icons with a thumb that slides to the active side */
.theme-toggle {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  width: 62px; height: 30px; padding: 0 8px;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: rgba(var(--rgb-8-26-86), 0.7);
  box-shadow: 0 0 12px rgba(40, 120, 255, 0.25);
  cursor: pointer;
}
.theme-toggle:hover { box-shadow: 0 0 16px rgba(60, 150, 255, 0.5); }
.theme-toggle svg { position: relative; z-index: 1; width: 15px; height: 15px; transition: color 0.2s; }
.theme-toggle__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, #2f8bff, #1b5fe0);
  box-shadow: 0 0 10px rgba(60, 150, 255, 0.7);
  transform: translateX(32px); /* dark: over the moon */
  transition: transform 0.2s ease;
}
.theme-toggle__sun { color: var(--text-3); }
.theme-toggle__moon { color: #fff; }
:root[data-theme="light"] .theme-toggle__thumb { transform: none; }
:root[data-theme="light"] .theme-toggle__sun { color: #fff; }
:root[data-theme="light"] .theme-toggle__moon { color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .theme-toggle__thumb { transition: none; } }

.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm);
}
.icon-btn:hover { background: rgba(60, 130, 255, 0.14); }
.icon-btn [data-lucide], .icon-btn svg { width: 22px; height: 22px; }
.badge {
  position: absolute; top: 0; right: 0;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: #ef3b5a;
  font-size: 10px; font-weight: 700; line-height: 16px;
  box-shadow: 0 0 8px rgba(239, 59, 90, 0.7);
}

.user {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-weight: 600; font-size: 13px;
}
.user__avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, #d7e6ff, #88aee8);
  color: #1c3b7a;
  box-shadow: 0 0 0 2px rgba(150, 200, 255, 0.6);
}

/* ---------- Page layout ---------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail-w);
  gap: var(--gap);
  align-items: start;
}
.layout__center, .layout__rail { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

/* ---------- Cards ---------- */

.card, .panel {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: var(--glow);
}
.card { padding: 12px 14px; }

.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card__head h2 { font-size: 13.5px; font-weight: 600; }
.card__head .h-lg { font-size: 16px; }
.card__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.card__link { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--accent-2); white-space: nowrap; }
.card__link [data-lucide], .card__link svg { width: 12px; height: 12px; }
.card__link:hover { text-decoration: underline; }
.card__link--underline { text-decoration: underline; }

/* Icon tiles (UI chrome, not data colors) */
.tile {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--tile-glow, rgba(60, 140, 255, 0.45)), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background: var(--tile-bg);
}
.tile [data-lucide], .tile svg { width: 17px; height: 17px; }
.tile--xs { width: 20px; height: 20px; border-radius: 6px; }
.tile--xs [data-lucide], .tile--xs svg { width: 12px; height: 12px; }
.tile--xxs { width: 16px; height: 16px; border-radius: 4px; }
.tile--xxs [data-lucide], .tile--xxs svg { width: 10px; height: 10px; }
.tile--round { border-radius: 50%; width: 34px; height: 34px; }

.tile--blue    { --tile-bg: linear-gradient(145deg, #3d8bff, #1d4fd0); --tile-glow: rgba(61, 139, 255, 0.55); }
.tile--sky     { --tile-bg: linear-gradient(145deg, #34b6ff, #1673e0); --tile-glow: rgba(52, 182, 255, 0.55); }
.tile--indigo  { --tile-bg: linear-gradient(145deg, #5d7bff, #2e3fc8); --tile-glow: rgba(93, 123, 255, 0.55); }
.tile--green   { --tile-bg: linear-gradient(145deg, #2fd98b, #0f9d63); --tile-glow: rgba(47, 217, 139, 0.5); }
.tile--teal    { --tile-bg: linear-gradient(145deg, #25d0c2, #0e8f8a); --tile-glow: rgba(37, 208, 194, 0.5); }
.tile--violet  { --tile-bg: linear-gradient(145deg, #a970ff, #6436d6); --tile-glow: rgba(169, 112, 255, 0.55); }
.tile--magenta { --tile-bg: linear-gradient(145deg, #e45bdf, #9b2bbd); --tile-glow: rgba(228, 91, 223, 0.5); }
.tile--orange  { --tile-bg: linear-gradient(145deg, #ffae3d, #e86a12); --tile-glow: rgba(255, 174, 61, 0.5); }
.tile--yellow  { --tile-bg: linear-gradient(145deg, #ffd23d, #d99400); --tile-glow: rgba(255, 210, 61, 0.45); }
.tile--red     { --tile-bg: linear-gradient(145deg, #ff5a6e, #d0203d); --tile-glow: rgba(255, 90, 110, 0.55); }
.tile--rose    { --tile-bg: linear-gradient(145deg, #ff5d8f, #d02a5c); --tile-glow: rgba(255, 93, 143, 0.5); }

.tone--blue { color: var(--t-4aa3ff); }
.tone--green { color: var(--t-2fd98b); }
.tone--violet { color: var(--t-b58cff); }
.tone--orange { color: var(--t-ffb347); }

/* Deltas: arrow + text, never color alone */
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; font-size: 11px; white-space: nowrap; }
.delta--up { color: var(--good); }
.delta--down { color: var(--bad); }
.delta--flat { color: var(--text-3); }

/* ---------- Overview panel ---------- */

.overview { padding: 12px 14px 0; overflow: hidden; }

.overview__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.overview__title { font-size: 23px; font-weight: 600; letter-spacing: -0.3px; }
.overview__sub { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.overview__tools { display: flex; align-items: center; gap: 10px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(20, 150, 90, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.35);
  font-size: 11px; font-weight: 600; color: var(--t-6ff0b8);
}
.live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 8px #34d399;
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.45; } }

.date-range {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(var(--rgb-6-20-72), 0.7);
  font-size: 11px;
}
.date-range > span { padding-right: 8px; border-right: 1px solid var(--border); }

/* KPI cards */
.kpis {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 12px;
}
.kpi { padding: 10px 12px; border-color: rgba(90, 165, 255, 0.55); background: linear-gradient(180deg, rgba(var(--rgb-20-55-140), 0.7), rgba(var(--rgb-8-26-86), 0.85)); }
.kpi__top { display: flex; align-items: flex-start; gap: 10px; }
.kpi__label { font-size: 11px; font-weight: 500; flex: 1; padding-top: 1px; }
.kpi__spark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.kpi__value { font-size: 20px; font-weight: 600; margin: -10px 0 4px 42px; letter-spacing: -0.3px; }
.kpi__foot { display: flex; align-items: center; gap: 6px; margin-left: 42px; font-size: 10px; color: var(--text-2); }

/* Hero stage: looping background video, clipped to the section */
.hero-stage {
  position: relative;
  height: 450px;
  margin: 6px -14px 0;
  overflow: hidden;
  background: #04103a; /* shown until the first video frame loads */
}
.hero-video {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Rows ---------- */

.row { display: grid; gap: var(--gap); }
.row--3 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1fr); }
.row--4 { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, 0.9fr); }

.select {
  padding: 3px 22px 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(var(--rgb-6-20-72), 0.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aabde6' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 7px center;
  appearance: none;
  font-size: 10.5px;
  cursor: pointer;
}
.select option { background: var(--surface); }

.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-2); }

.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.swatch--bar { border-radius: 2px; }
.swatch--line { width: 14px; height: 2px; border-radius: 1px; }
.s1 { --c: var(--s1); } .s2 { --c: var(--s2); } .s3 { --c: var(--s3); } .s4 { --c: var(--s4); }
.s5 { --c: var(--s5); } .s6 { --c: var(--s6); } .s7 { --c: var(--s7); }

.chart-box { position: relative; }
.chart-box--trend { height: 136px; }
.chart-box--mini { height: 78px; margin-top: 8px; }
.mini-legend { position: absolute; top: -2px; right: 0; display: flex; gap: 8px; z-index: 1; }

/* Donuts */
.donut-split { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; }
.donut-split--tight { gap: 10px; }
.donut { position: relative; width: 96px; height: 96px; flex-shrink: 0; }
.donut--lg { width: 108px; height: 108px; }
.donut--sm { width: 84px; height: 84px; }
.donut canvas { position: relative; z-index: 1; }
.donut__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
.donut__center strong { font-size: 17px; font-weight: 700; }
.donut--lg .donut__center strong { font-size: 16px; }
.donut--sm .donut__center strong { font-size: 14px; }
.donut__center span { font-size: 9px; color: var(--text-2); max-width: 70%; line-height: 1.1; }

.legend-table { flex: 1; min-width: 128px; display: flex; flex-direction: column; gap: 5px; }
.legend-table li {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto 36px;
  align-items: center; gap: 6px;
  font-size: 10px;
}
.legend-table li > span:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; }
.legend-table--2 li { grid-template-columns: 9px minmax(0, 1fr) 44px; gap: 8px; }
.legend-table--2 { gap: 9px; }
.legend-table__label { white-space: nowrap; }

.stat-list { flex: 1; min-width: 128px; display: flex; flex-direction: column; gap: 7px; }
.stat-list li {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(40, 90, 200, 0.14);
  font-size: 10px;
  white-space: nowrap;
}
.stat-list strong { font-size: 12px; font-variant-numeric: tabular-nums; }

.mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.mini-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.mini-stats > div {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(40, 90, 200, 0.16);
  border: 1px solid rgba(80, 140, 255, 0.16);
  min-width: 0;
}
.mini-stats span:first-child { font-size: 8.5px; line-height: 1.15; color: var(--text-2); min-height: 2.3em; }
.mini-stats strong { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-stats .delta { font-size: 9.5px; }

.finance-list { display: flex; flex-direction: column; gap: 4px; }
.finance-list li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 7px; font-size: 10px; color: var(--text-2); }
.finance-list strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Right rail ---------- */

.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quick-action .tile { width: 28px; height: 28px; }
.quick-action {
  display: flex; align-items: center; gap: 8px;
  min-height: 46px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(var(--rgb-24-64-160), 0.55), rgba(var(--rgb-10-30-96), 0.75));
  font-size: 10px; line-height: 1.2;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.quick-action:hover { border-color: var(--border-strong); box-shadow: 0 0 14px rgba(60, 150, 255, 0.45); transform: translateY(-1px); }

.notifications { display: flex; flex-direction: column; gap: 8px; }
.notification {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 140, 255, 0.16);
  background: rgba(var(--rgb-20-50-140), 0.35);
}
.notification p { font-size: 11px; }
.notification time { font-size: 10px; color: var(--text-2); }
.notification.is-unread { border-color: rgba(90, 165, 255, 0.4); }
.notification.is-unread p { font-weight: 600; }

.help-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 14px; }
.help-card strong { font-size: 13.5px; }
.help-card p { font-size: 11px; color: var(--text-2); margin: 4px 0 10px; }
.help-card .btn { margin-left: auto; display: flex; width: fit-content; }

.rail-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 10px; color: var(--text-2); padding-right: 4px; }

/* ---------- Placeholder & error pages ---------- */

.placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; text-align: center; }
.placeholder h1 { font-size: 22px; }
.placeholder p { color: var(--text-2); }
.placeholder__icon {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(145deg, #3d8bff, #1d4fd0); box-shadow: 0 0 20px rgba(61, 139, 255, 0.6);
}
.placeholder__icon [data-lucide], .placeholder__icon svg { width: 28px; height: 28px; }
.error-page { display: grid; place-items: center; padding: 16px; }
.error-page .placeholder { max-width: 460px; width: 100%; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1400px) {
  .row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout__rail > .area-quick { grid-column: 1 / -1; }
  .layout__rail .quick-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rail-footer { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .row--3 > .area-trend { grid-column: 1 / -1; }
}

/* Mobile-only elements */
.topbar__brand, .overview__store, .tabbar { display: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .main { padding: 10px 12px 16px; }

  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    width: 260px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(0, 4, 20, 0.6); }

  /* Header: menu + brand + actions, search on its own row */
  .topbar { flex-wrap: wrap; gap: 8px 10px; }
  .topbar .topbar__menu { display: grid; }
  .topbar__brand { display: flex; flex-direction: column; line-height: 1.05; }
  .topbar__brand .brand__name { font-size: 24px; }
  .topbar__brand .brand__sub { font-size: 12px; font-weight: 500; }
  .topbar__actions { gap: 6px; }
  .search { order: 10; flex: 1 1 100%; height: 38px; }

  /* Overview head: store row with live/date, welcome below */
  .overview__head { align-items: center; gap: 10px; }
  .overview__store { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .overview__tools { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .overview__welcome { order: 3; flex: 1 1 100%; }
  .overview__title { font-size: 20px; }

  /* KPIs: three on the first row, two on the second */
  .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kpi:nth-child(-n + 3) { grid-column: span 2; }
  .kpi:nth-child(n + 4) { grid-column: span 3; }

  /* Hero: the video keeps its own proportions */
  .hero-stage { height: auto; aspect-ratio: 848 / 484; }

  /* All cards flow in one grid so they can follow the mobile order */
  .layout { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .layout__center, .layout__rail, .row { display: contents; }
  .layout .area-overview      { order: 1;  grid-column: 1 / -1; }
  .layout .area-quick         { order: 2;  grid-column: span 3; }
  .layout .area-notifications { order: 3;  grid-column: span 3; }
  .layout .area-trend         { order: 4;  grid-column: span 3; }
  .layout .area-status        { order: 5;  grid-column: span 3; }
  .layout .area-inventory     { order: 6;  grid-column: span 3; }
  .layout .area-revenue       { order: 7;  grid-column: span 3; }
  .layout .area-ads           { order: 8;  grid-column: span 2; }
  .layout .area-customers     { order: 9;  grid-column: span 2; }
  .layout .area-finance       { order: 10; grid-column: span 2; }
  .layout .area-help          { order: 11; grid-column: 1 / -1; }
  .layout .area-footer        { order: 12; grid-column: 1 / -1; }
  .layout__rail .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Bottom tab bar */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: rgba(var(--rgb-4-14-56), 0.96);
    border-top: 1px solid var(--border);
    backdrop-filter: blur(8px);
    box-shadow: 0 -6px 24px rgba(10, 60, 200, 0.3);
  }
  .tabbar__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 0;
    border: 0; background: none; cursor: pointer;
    font-size: 10.5px; color: var(--text-2);
  }
  .tabbar__item [data-lucide], .tabbar__item svg { width: 21px; height: 21px; }
  .tabbar__item.is-active { color: var(--t-4aa3ff); }
  .tabbar__item.is-active svg { filter: drop-shadow(0 0 6px rgba(74, 163, 255, 0.8)); }
}

@media (max-width: 640px) {
  .topbar__messages { display: none; }
  .overview__tools { margin-left: 0; justify-content: flex-start; }

  /* Every card full width on phones */
  .layout [class*="area-"] { grid-column: 1 / -1; }
  .layout__rail .quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mini-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Compact KPI cards */
  .kpi { padding: 8px; }
  .kpi__top { gap: 6px; align-items: center; }
  .kpi .tile { width: 26px; height: 26px; }
  .kpi .tile svg { width: 14px; height: 14px; }
  .kpi__label { font-size: 10px; line-height: 1.15; }
  .kpi__spark { display: none; }
  .kpi__value { font-size: 15px; margin: 6px 0 2px; }
  .kpi__foot { margin-left: 0; font-size: 9px; flex-wrap: wrap; gap: 0 4px; }
  .kpi:nth-child(n + 4) .kpi__value { font-size: 18px; }
}

@media (max-width: 380px) {
  .user__name { display: none; }
}

/* ==========================================================================
   Sidebar submenus
   ========================================================================== */

.nav__toggle { width: 100%; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 11.5px; }
.nav__toggle .nav__chevron, .nav__toggle svg.nav__chevron { margin-left: -6px; }
.nav__toggle span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__toggle .nav__chevron, .nav__toggle svg.nav__chevron { width: 14px; height: 14px; color: var(--text-2); transition: transform 0.2s; }
.nav__toggle[aria-expanded="true"] { color: var(--text); }
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }
.nav__toggle.is-parent-active { color: #fff; background: rgba(60, 130, 255, 0.12); }

.nav__sub { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px; }
.nav__sub[hidden] { display: none; }
.nav__sublink {
  position: relative;
  display: block;
  padding: 6px 10px 6px 39px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
}
.nav__sublink::before {
  content: '';
  position: absolute; left: 22px; top: 50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}
.nav__sublink:hover { background: rgba(60, 130, 255, 0.12); color: var(--text); }
.nav__sublink.is-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(40, 120, 255, 0.5), rgba(30, 90, 220, 0.2));
  box-shadow: inset 0 0 0 1px var(--border-strong), 0 0 12px rgba(40, 130, 255, 0.45), inset 0 0 10px rgba(80, 160, 255, 0.2);
}
.nav__sublink.is-active::before { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.nav__sub .nav__sublink { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav__badge {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 700; line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--badge-fg);
  background: var(--badge-bg);
  border: 1px solid var(--badge-fg);
}
.nav__badge--info { --badge-fg: #5cc8ff; --badge-bg: rgba(40, 150, 255, 0.16); }
.nav__badge--warn { --badge-fg: #ffb547; --badge-bg: rgba(255, 170, 50, 0.14); }
.nav__badge--good { --badge-fg: #4ee0a6; --badge-bg: rgba(40, 210, 140, 0.14); }
.nav__badge--bad  { --badge-fg: #ff7d8e; --badge-bg: rgba(255, 80, 110, 0.14); }

/* ---------- Account menu ---------- */
.acct { position: relative; }
.acct__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 6px; border-radius: 12px; border: 1px solid rgba(90, 170, 255, 0.5); background: linear-gradient(180deg, var(--card-top), var(--card-bottom)); box-shadow: 0 14px 36px rgba(0, 10, 50, 0.55), 0 0 18px rgba(30, 120, 255, 0.25); }
.acct__menu[hidden] { display: none; }
.acct__who { margin: 0; padding: 8px 10px 10px; border-bottom: 1px solid rgba(90, 160, 255, 0.25); display: grid; gap: 1px; } .acct__who b { font-size: 13px; } .acct__who small { font-size: 11px; color: var(--text-2); }
.acct__menu a, .acct__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; text-decoration: none; cursor: pointer; }
.acct__menu a:hover, .acct__menu button:hover { background: rgba(60, 130, 255, 0.2); }
.acct__menu [data-seller-logout] { color: #ffb3bc; }

/* Deactivated vendor notice (shown on every Seller Central page of a deactivated vendor) */
.dv-banner { position: relative; z-index: 60; padding: 10px 18px; background: #7a1d2a; color: #fff; font-size: 13px; text-align: center; line-height: 1.4; } .dv-banner b { margin-right: 4px; }

/* AED currency sign (owner-provided glyph) beside every price */
img.yv-aed { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.22em; margin-inline-end: 0.1em; object-fit: contain; background: transparent; }
.sf-price img.yv-aed, .mx-balance img.yv-aed, .pl-price img.yv-aed, .sf-line b img.yv-aed { width: 1.25em; height: 1.25em; }