/* CSS Variables - Themes */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --page-bg: #060b11;
  --page-bg-accent: radial-gradient(circle at top left, rgba(52, 86, 120, 0.16), transparent 30%), radial-gradient(circle at top right, rgba(32, 58, 82, 0.12), transparent 28%), linear-gradient(180deg, #0b1118 0%, #060b11 52%, #05090e 100%);
  --tg-bg: #0a1016;
  --tg-bg-soft: rgba(11, 17, 24, 0.92);
  --tg-accent: #3dd6c6;
  --tg-accent-strong: #4da3ff;
  --tg-accent-soft: rgba(61, 214, 198, 0.14);
  --tg-border: rgba(151, 185, 211, 0.16);
  --tg-border-soft: rgba(151, 185, 211, 0.14);
  --tg-text: #edf6ff;
  --tg-text-soft: #8fa8bf;
  --text-primary: #edf6ff;
  --border-color: rgba(151, 185, 211, 0.16);
  --bg-soft: rgba(10, 15, 22, 0.78);
  --bg-secondary: rgba(255, 255, 255, 0.035);
  --bg-hover: rgba(255, 255, 255, 0.075);
  --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(120, 146, 170, 0.08);
  --card-shadow-hover: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 146, 170, 0.18);
  --tab-bg: rgba(10, 20, 31, 0.82);
  --tab-active-bg: linear-gradient(135deg, #3dd6c6 0%, #4da3ff 100%);
  --tab-active-text: #04121d;
  --input-bg: rgba(5, 18, 29, 0.72);
  --input-border: rgba(143, 168, 191, 0.2);
  --input-bg-focus: rgba(61, 214, 198, 0.1);
  --nav-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --roulette-bg: radial-gradient(circle at top, rgba(77, 163, 255, 0.12), rgba(0, 0, 0, 0) 38%), linear-gradient(180deg, rgba(12, 24, 36, 0.95) 0%, rgba(6, 17, 26, 0.98) 100%);
  --preview-card-bg: rgba(10, 23, 34, 0.95);
  --button-ghost-bg: rgba(255, 255, 255, 0.025);
  --button-ghost-text: #d9e8f6;
  --button-primary-text: #04121d;
}

.theme-dark {
  --page-bg: #060b11;
  --page-bg-accent: radial-gradient(circle at top left, rgba(52, 86, 120, 0.16), transparent 30%), radial-gradient(circle at top right, rgba(32, 58, 82, 0.12), transparent 28%), linear-gradient(180deg, #0b1118 0%, #060b11 52%, #05090e 100%);
  --tg-bg: #0a1016;
  --tg-bg-soft: rgba(11, 17, 24, 0.92);
  --tg-accent: #3dd6c6;
  --tg-accent-strong: #4da3ff;
  --tg-accent-soft: rgba(61, 214, 198, 0.14);
  --tg-border: rgba(151, 185, 211, 0.16);
  --tg-border-soft: rgba(151, 185, 211, 0.14);
  --tg-text: #edf6ff;
  --tg-text-soft: #8fa8bf;
  --text-primary: #edf6ff;
  --border-color: rgba(151, 185, 211, 0.16);
  --bg-soft: rgba(10, 15, 22, 0.78);
  --bg-secondary: rgba(255, 255, 255, 0.035);
  --bg-hover: rgba(255, 255, 255, 0.075);
  --card-shadow: 0 24px 60px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(120, 146, 170, 0.08);
  --card-shadow-hover: 0 28px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(120, 146, 170, 0.18);
  --tab-bg: rgba(10, 20, 31, 0.82);
  --tab-active-bg: linear-gradient(135deg, #3dd6c6 0%, #4da3ff 100%);
  --tab-active-text: #04121d;
  --input-bg: rgba(5, 18, 29, 0.72);
  --input-border: rgba(143, 168, 191, 0.2);
  --input-bg-focus: rgba(61, 214, 198, 0.1);
  --nav-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  --roulette-bg: radial-gradient(circle at top, rgba(77, 163, 255, 0.12), rgba(0, 0, 0, 0) 38%), linear-gradient(180deg, rgba(12, 24, 36, 0.95) 0%, rgba(6, 17, 26, 0.98) 100%);
  --preview-card-bg: rgba(10, 23, 34, 0.95);
  --button-ghost-bg: rgba(255, 255, 255, 0.025);
  --button-ghost-text: #d9e8f6;
  --button-primary-text: #04121d;
}

.theme-light {
  --page-bg: #eef4fa;
  --page-bg-accent: linear-gradient(180deg, #f4f8fc 0%, #e9f0f7 100%);
  --tg-bg: #eef4fa;
  --tg-bg-soft: rgba(255, 255, 255, 0.94);
  --tg-accent: #118ab2;
  --tg-accent-strong: #2563eb;
  --tg-accent-soft: rgba(17, 138, 178, 0.1);
  --tg-border: rgba(12, 34, 53, 0.1);
  --tg-border-soft: rgba(12, 34, 53, 0.1);
  --tg-text: #112132;
  --tg-text-soft: #5c7389;
  --text-primary: #112132;
  --border-color: rgba(12, 34, 53, 0.1);
  --bg-soft: rgba(255, 255, 255, 0.76);
  --bg-secondary: rgba(17, 33, 50, 0.04);
  --bg-hover: rgba(17, 33, 50, 0.06);
  --card-shadow: 0 18px 38px rgba(17, 33, 50, 0.08), 0 0 0 1px rgba(17, 33, 50, 0.04);
  --card-shadow-hover: 0 22px 44px rgba(17, 33, 50, 0.12), 0 0 0 1px rgba(17, 138, 178, 0.16);
  --tab-bg: rgba(255, 255, 255, 0.82);
  --tab-active-bg: linear-gradient(135deg, #3dd6c6 0%, #4da3ff 100%);
  --tab-active-text: #04121d;
  --input-bg: rgba(255, 255, 255, 0.96);
  --input-border: rgba(17, 33, 50, 0.1);
  --input-bg-focus: rgba(17, 138, 178, 0.08);
  --nav-shadow: 0 14px 28px rgba(17, 33, 50, 0.08);
  --roulette-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 245, 250, 0.98) 100%);
  --preview-card-bg: rgba(255, 255, 255, 0.98);
  --button-ghost-bg: rgba(255, 255, 255, 0.88);
  --button-ghost-text: #23405a;
  --button-primary-text: #04121d;
}