:root,
:root[data-theme="dark"],
html[data-theme="dark"] {
  color-scheme: dark;

  /* Core tokens */
  --bg: #070a14;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --container-bg: rgba(255, 255, 255, 0.04);
  --container-border: rgba(255, 255, 255, 0.12);
  --container-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-shadow: var(--shadow-soft);
  --text: #eaf0ff;
  --text-muted: rgba(234, 240, 255, 0.7);
  --border: rgba(255, 255, 255, 0.14);
  --primary: #2f7dff;
  --primary-contrast: #ffffff;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
  --ring: 0 0 0 3px rgba(47, 125, 255, 0.28);
  --link: #66a1ff;
  --focus: #2f7dff;
  --primary-soft: rgba(47, 125, 255, 0.2);
  --primary-soft-2: rgba(47, 125, 255, 0.3);
  --danger-soft: rgba(239, 68, 68, 0.18);
  --success-soft: rgba(34, 197, 94, 0.16);
  --warning-soft: rgba(245, 158, 11, 0.18);
  --danger-strong: #b3234b;
  --seller-accent-soft: rgba(255, 152, 0, 0.22);
  --sidebar-admin-bg: radial-gradient(circle at top right, var(--primary-soft), var(--sidebar-bg));
  --sidebar-seller-bg: radial-gradient(circle at top right, var(--seller-accent-soft), var(--sidebar-bg));
  --sidebar-text: #eaf0ff;
  --sidebar-text-muted: rgba(234, 240, 255, 0.8);
  --sidebar-border: rgba(255, 255, 255, 0.14);
  --sidebar-item-bg: rgba(255, 255, 255, 0.03);
  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-item-active-bg: rgba(47, 125, 255, 0.22);

  /* Component tokens */
  --bg-alt: #0a1230;
  --surface-soft: rgba(255, 255, 255, 0.03);
  --surface-input: rgba(10, 15, 35, 0.9);
  --sidebar-bg: #0d1226;
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active: rgba(47, 125, 255, 0.2);
  --table-head-bg: rgba(8, 14, 30, 0.95);
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --table-row-alt: rgba(255, 255, 255, 0.02);
  --modal-bg: #121722;
  --overlay-bg: rgba(0, 0, 0, 0.68);
  --footer-bg: rgba(3, 5, 12, 0.88);

  /* Compatibility aliases */
  --bg0: var(--bg);
  --bg1: var(--bg-alt);
  --bg2: var(--sidebar-bg);
  --panel: var(--surface-soft);
  --panel-strong: var(--surface);
  --card: var(--surface);
  --card2: var(--surface-2);
  --line: var(--border);
  --muted: var(--text-muted);
  --blue: var(--primary);
  --blue2: #00b3ff;
  --violet: #6a5cff;
  --accent: var(--primary);
  --accent-soft: rgba(47, 125, 255, 0.2);
  --ok: var(--success);
  --err: var(--danger);
  --shadow-soft: 0 12px 35px rgba(0, 0, 0, 0.35);
  --shadow-deep: 0 20px 55px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"],
html[data-theme="light"] {
  color-scheme: light;

  /* Core tokens (warmer + more depth) */
  --bg: #eef3f9;                /* page background */
  --surface: #f7f9fd;           /* main surfaces */
  --surface-2: #f1f5fb;         /* soft panels */
  --container-bg: #f6f8fd;
  --container-border: rgba(15, 23, 42, 0.1);
  --container-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.12);
  --card-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  --text: #0f172a;              /* near-black */
  --text-muted: #526079;        /* readable muted */
  --border: rgba(15, 23, 42, 0.14);

  /* Brand / actions */
  --primary: #2563eb;           /* slightly less “neon” */
  --primary-contrast: #ffffff;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;

  /* Depth + focus */
  --shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
  --link: #1d4ed8;
  --focus: #2563eb;

  /* Soft status fills */
  --primary-soft: rgba(37, 99, 235, 0.12);
  --primary-soft-2: rgba(37, 99, 235, 0.20);
  --danger-soft: rgba(220, 38, 38, 0.10);
  --success-soft: rgba(22, 163, 74, 0.10);
  --warning-soft: rgba(217, 119, 6, 0.12);

  --danger-strong: #b91c1c;
  --seller-accent-soft: rgba(217, 119, 6, 0.14);

  /* Sidebar gradients: less “blue hospital”, more subtle */
  --sidebar-admin-bg: linear-gradient(180deg, #071534 0%, #081a3f 62%, #0a1f4a 100%);
  --sidebar-seller-bg: linear-gradient(180deg, #1a2038 0%, #222741 62%, #2b3150 100%);
  --sidebar-text: #eef3ff;
  --sidebar-text-muted: rgba(238, 243, 255, 0.82);
  --sidebar-border: rgba(255, 255, 255, 0.12);
  --sidebar-item-bg: rgba(255, 255, 255, 0.05);
  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.12);
  --sidebar-item-active-bg: rgba(37, 99, 235, 0.28);

  /* Component tokens */
  --bg-alt: #e6edf8;            /* IMPORTANT: affects body gradient */
  --surface-soft: #edf2fa;
  --surface-input: #ffffff;

  --sidebar-bg: #091a3f;
  --sidebar-item-hover: rgba(255, 255, 255, 0.95);
  --sidebar-item-active: rgba(37, 99, 235, 0.17);

  --table-head-bg: #e8eef9;
  --table-row-hover: rgba(37, 99, 235, 0.1);
  --table-row-alt: #f2f6fc;

  --modal-bg: #ffffff;
  --overlay-bg: rgba(15, 23, 42, 0.38);
  --footer-bg: rgba(248, 250, 252, 0.96);

  /* Compatibility aliases (keep) */
  --bg0: var(--bg);
  --bg1: var(--bg-alt);
  --bg2: var(--sidebar-bg);
  --panel: var(--surface-soft);
  --panel-strong: var(--surface);
  --card: var(--surface);
  --card2: var(--surface-2);
  --line: var(--border);
  --muted: var(--text-muted);
  --blue: var(--primary);
  --blue2: #60a5fa;             /* softer than #66a3ff */
  --violet: #4f46e5;            /* cleaner accent */
  --accent: var(--primary);
  --accent-soft: rgba(37, 99, 235, 0.12);
  --ok: var(--success);
  --err: var(--danger);

  /* Shadows tuned for light */
  --shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.08);
  --shadow-deep: 0 14px 34px rgba(15, 23, 42, 0.12);
}

/* Special raffle theme variants */
body.theme-special {
  --bg: #140b05;
  --bg-alt: #2a1406;
  --sidebar-bg: #1b0f08;
  --surface-soft: rgba(255, 179, 71, 0.08);
  --surface: rgba(255, 179, 71, 0.1);
  --surface-2: rgba(255, 179, 71, 0.14);
  --container-bg: rgba(255, 179, 71, 0.08);
  --container-border: rgba(255, 190, 120, 0.26);
  --container-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  --card-bg: rgba(255, 179, 71, 0.12);
  --card-border: rgba(255, 190, 120, 0.28);
  --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  --border: rgba(255, 190, 120, 0.3);
  --text: #fff4e8;
  --text-muted: rgba(255, 228, 200, 0.76);
  --primary: #fb923c;
  --primary-contrast: #1b0f08;
  --link: #ffb878;
  --focus: #fb923c;
  --table-head-bg: rgba(42, 20, 6, 0.84);
  --table-row-alt: rgba(255, 179, 71, 0.06);
  --table-row-hover: rgba(255, 179, 71, 0.14);
  --surface-input: rgba(34, 18, 8, 0.84);
  --footer-bg: rgba(20, 11, 5, 0.92);
  --overlay-bg: rgba(20, 11, 5, 0.72);
  --sidebar-admin-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));
  --sidebar-seller-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));

  --bg0: var(--bg);
  --bg1: var(--bg-alt);
  --bg2: var(--sidebar-bg);
  --panel: var(--surface-soft);
  --panel-strong: var(--surface);
  --card: var(--surface);
  --card2: var(--surface-2);
  --line: var(--border);
  --muted: var(--text-muted);
  --blue: #b45309;
  --blue2: #ea580c;
  --violet: #c2410c;
  --accent: var(--primary);
  --accent-soft: rgba(251, 146, 60, 0.24);
}

body.theme-special.theme-special--green {
  --bg: #0b1110;
  --bg-alt: #121d19;
  --sidebar-bg: #0f1714;
  --surface-soft: rgba(128, 178, 154, 0.08);
  --surface: rgba(128, 178, 154, 0.1);
  --surface-2: rgba(128, 178, 154, 0.14);
  --border: rgba(165, 201, 184, 0.24);
  --text: #edf5f1;
  --text-muted: rgba(214, 230, 221, 0.72);
  --primary: #75b89a;
  --primary-contrast: #0f1714;
  --link: #9dd5ba;
  --focus: #75b89a;
  --table-head-bg: rgba(18, 29, 25, 0.86);
  --table-row-alt: rgba(117, 184, 154, 0.08);
  --table-row-hover: rgba(117, 184, 154, 0.15);
  --surface-input: rgba(16, 25, 22, 0.86);
  --footer-bg: rgba(11, 17, 16, 0.92);

  --blue: #2f6b55;
  --blue2: #3f856a;
  --violet: #355f73;
  --accent-soft: rgba(117, 184, 154, 0.2);
  --sidebar-admin-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));
  --sidebar-seller-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));
}

body.theme-special.theme-special--purple {
  --bg: #0d0a1c;
  --bg-alt: #151031;
  --sidebar-bg: #100d24;
  --surface-soft: rgba(126, 92, 255, 0.1);
  --surface: rgba(126, 92, 255, 0.12);
  --surface-2: rgba(126, 92, 255, 0.16);
  --border: rgba(178, 155, 255, 0.3);
  --text: #f1ecff;
  --text-muted: rgba(222, 212, 255, 0.74);
  --primary: #7f5cff;
  --primary-contrast: #100d24;
  --link: #b8a7ff;
  --focus: #8f72ff;
  --table-head-bg: rgba(21, 16, 49, 0.88);
  --table-row-alt: rgba(127, 92, 255, 0.08);
  --table-row-hover: rgba(127, 92, 255, 0.16);
  --surface-input: rgba(17, 13, 38, 0.86);
  --footer-bg: rgba(13, 10, 28, 0.92);

  --blue: #6f57ff;
  --blue2: #4ea0ff;
  --violet: #8a63ff;
  --accent-soft: rgba(127, 92, 255, 0.24);
  --sidebar-admin-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));
  --sidebar-seller-bg: radial-gradient(circle at top right, var(--primary-soft-2), var(--sidebar-bg));
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--bg), var(--bg-alt));
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

img,
svg {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
}

::selection {
  background: var(--accent-soft);
  color: var(--primary-contrast);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.scrollable {
  overflow: auto;
}