:root {
  --page-gradient:
    radial-gradient(circle at 20% 10%, rgba(139, 20, 49, 0.28), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(74, 14, 26, 0.22), transparent 50%),
    linear-gradient(160deg, #0a0d1c 0%, #12101e 45%, #1a1220 100%);
  --accent-grad: linear-gradient(135deg, #b0294f, #5a1220);
  --glass-blur: 20px;
  --bg-0: #0b0d12;
  --bg-1: rgba(255, 255, 255, 0.035);
  --bg-2: rgba(255, 255, 255, 0.055);
  --bg-3: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.1);
  --line-soft: rgba(255, 255, 255, 0.06);
  --text-hi: #f5f6fb;
  --text-mid: rgba(255, 255, 255, 0.6);
  --text-low: rgba(255, 255, 255, 0.38);
  --accent: #e0587a;
  --accent-soft: #e0587a26;
  --blue: #2563eb;
  --blue-soft: #2563eb1a;
  --pink: #db2777;
  --pink-soft: #db27771a;
  --green: #16a34a;
  --green-bg: #e8f8ee;
  --green-line: #a7e3bd;
  --red: #dc2626;
  --red-bg: #fdecec;
  --red-line: #f3b4b4;
  --radius: 10px;
  --scrollbar-thumb: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
  color-scheme: dark; /* keeps native controls (select popups, scrollbars...) readable on our dark background */
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  background: var(--page-gradient) fixed;
  color: var(--text-hi);
  height: 100%;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[data-theme="light"] .theme-icon-dark {
  display: none;
}

[data-theme="light"] .theme-icon-light {
  display: block;
}

[data-theme="light"] {
  --page-gradient:
    radial-gradient(circle at 20% 10%, rgba(155, 34, 66, 0.08), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(74, 14, 26, 0.06), transparent 50%),
    linear-gradient(160deg, #fbf4f1 0%, #f7ece8 50%, #f3e3de 100%);
  --accent-grad: linear-gradient(135deg, #b0294f, #7a1730);
  --bg-0: #f7f3f0;
  --bg-1: rgba(255, 255, 255, 0.55);
  --bg-2: rgba(255, 255, 255, 0.72);
  --bg-3: rgba(36, 19, 24, 0.05);
  --line: rgba(36, 19, 24, 0.1);
  --line-soft: rgba(36, 19, 24, 0.06);
  --text-hi: #241318;
  --text-mid: rgba(36, 19, 24, 0.6);
  --text-low: rgba(36, 19, 24, 0.4);
  --accent: #7a1730;
  --accent-soft: #7a17301a;
  --blue: #2563eb;
  --blue-soft: #2563eb1a;
  --pink: #b0265a;
  --pink-soft: #b0265a1a;
  --green: #16a34a;
  --green-bg: #e8f8ee;
  --green-line: #a7e3bd;
  --red: #dc2626;
  --red-bg: #fdecec;
  --red-line: #f3b4b4;
  --scrollbar-thumb: rgba(36, 19, 24, 0.18);
  --scrollbar-thumb-hover: rgba(36, 19, 24, 0.32);
  color-scheme: light;
}

[data-theme="light"] .notif-dropdown {
  background: rgba(250, 247, 245, 0.97);
}

:root:not([data-theme="light"]) .notif-dropdown {
  background: rgba(15, 12, 16, 0.97);
}

@media print {
  body {
      background: #ffffff !important;
      color: #111111 !important;
    }
}