/* Контраст сцени: темніший фон, біла картка.
   Лежить останнім, щоб перекрити токени style.css і clay-*.css.
   День: короткий сірий край і щільна тінь на білому, свій колір — на рольовій картці.
   Ніч: світлі смужки лишаються, текст на них темний.
   Ключі тем і рубіновий SOS не змінюються. */

:root,
[data-theme="light"],
[data-theme="notion-minimal"],
[data-theme="clinical-calm"],
[data-theme="lavender-clay"] {
  --bg-primary: #CDB8F2;
  --bg-secondary: #C3ACEC;
  --bg-card: #FFFFFF;
  --bg-card-subtle: #F6F1FF;
  --bg-elev: #FFFFFF;
  --text-main: #3B2F66;
  --text-muted: #5C5478;
  --text-dim: #6E6588;
  --accent-primary: #7C6AED;
  --accent-secondary: #9B8CF8;
  --accent-soft: rgba(124, 106, 237, 0.18);
  --gradient-brand: linear-gradient(180deg, #9A8BFF 0%, #7C6AED 46%, #5B46C9 100%);
  --body-bg-image:
    radial-gradient(760px 520px at 0% 0%, rgba(108, 72, 210, 0.42), transparent 60%),
    radial-gradient(680px 460px at 100% 0%, rgba(150, 96, 220, 0.32), transparent 56%),
    radial-gradient(560px 400px at 50% 100%, rgba(92, 58, 176, 0.26), transparent 62%);
  --border-color: rgba(124, 106, 237, 0.42);
  --border-subtle: rgba(124, 106, 237, 0.28);
  --shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 4px 0 rgba(72, 62, 96, 0.22),
    0 8px 12px rgba(48, 40, 72, 0.18);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 5px 0 rgba(72, 62, 96, 0.28),
    0 10px 14px rgba(48, 40, 72, 0.22);
  --shadow-clay:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 5px 0 rgba(72, 62, 96, 0.28),
    0 10px 14px rgba(48, 40, 72, 0.22);
  --shadow-clay-lg:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 6px 0 rgba(72, 62, 96, 0.3),
    0 12px 16px rgba(48, 40, 72, 0.24);
  --clay-plaque-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 5px 0 rgba(72, 62, 96, 0.28),
    0 10px 14px rgba(48, 40, 72, 0.22);
  --clay-plaque-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 6px 0 rgba(72, 62, 96, 0.34),
    0 12px 16px rgba(48, 40, 72, 0.28);
  --surface-nav: #FFFFFF;
  --surface-panel: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-edu: #FFF4D6;
  --surface-edu-border: rgba(180, 83, 9, 0.55);
  --surface-edu-text: #7C2D12;
  --surface-goal: #E9D8FF;
  --surface-goal-border: rgba(109, 70, 200, 0.55);
  --surface-goal-text: #4C1D95;
  --surface-quota: #D7EEFF;
  --surface-quota-border: rgba(2, 132, 199, 0.55);
  --surface-quota-text: #0C4A6E;
  --surface-hero: linear-gradient(135deg, #E4D4FF 0%, #D4C2FF 48%, #F3D9FF 100%);
  --surface-metric-rose: linear-gradient(165deg, #FFD0E2 0%, #FFB0CB 100%);
  --surface-metric-lilac: linear-gradient(165deg, #E4D4FF 0%, #CDB4FC 100%);
  --surface-metric-mint: linear-gradient(165deg, #C8F6E2 0%, #8EE8C0 100%);
  --surface-metric-butter: linear-gradient(165deg, #FFE9A8 0%, #FFD56A 100%);
  --surface-metric-sky: linear-gradient(165deg, #D4EEFF 0%, #A9DCFF 100%);
}

[data-theme="dark"],
[data-theme="dark-neon"],
[data-theme="soft-neon-night"],
[data-theme="deep-purple-clay"] {
  --bg-primary: #140E28;
  --bg-secondary: #1C1436;
  --bg-card: #3C3268;
  --bg-card-subtle: #463A74;
  --bg-elev: #4A3E78;
  --text-main: #F4EEFF;
  --text-muted: #D2C6F0;
  --text-dim: #B7A8DC;
  --accent-primary: #C4B5FD;
  --gradient-brand: linear-gradient(180deg, #DDD6FE 0%, #A78BFA 48%, #7C6AED 100%);
  --body-bg-image:
    radial-gradient(820px 520px at 8% -8%, rgba(124, 92, 220, 0.35), transparent 58%),
    radial-gradient(640px 420px at 100% 0%, rgba(80, 50, 150, 0.28), transparent 52%);
  --border-color: rgba(196, 181, 253, 0.45);
  --border-subtle: rgba(196, 181, 253, 0.28);
  --shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 16px 36px rgba(0, 0, 0, 0.5);
  --shadow-clay:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 18px 42px rgba(0, 0, 0, 0.55),
    0 5px 0 rgba(8, 4, 20, 0.7);
  --shadow-clay-lg:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 22px 48px rgba(0, 0, 0, 0.58),
    0 6px 0 rgba(8, 4, 20, 0.72);
  --clay-plaque-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 16px 36px rgba(0, 0, 0, 0.5),
    0 5px 0 rgba(8, 4, 20, 0.65);
  --clay-plaque-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 20px 42px rgba(0, 0, 0, 0.58),
    0 6px 0 rgba(8, 4, 20, 0.7);
  --surface-nav: #3C3268;
  --surface-panel: #3C3268;
  --surface-card: #463A74;
  --surface-edu: #FFF4D6;
  --surface-edu-border: rgba(180, 83, 9, 0.55);
  --surface-edu-text: #7C2D12;
  --surface-goal: #E9D8FF;
  --surface-goal-border: rgba(109, 70, 200, 0.55);
  --surface-goal-text: #3B2468;
  --surface-quota: #D7EEFF;
  --surface-quota-border: rgba(2, 132, 199, 0.55);
  --surface-quota-text: #0C4A6E;
  --surface-hero: linear-gradient(135deg, #4C3E86 0%, #3A3068 55%, #533E86 100%);
  --surface-metric-rose: linear-gradient(165deg, #6A3A52 0%, #4E2C40 100%);
  --surface-metric-lilac: linear-gradient(165deg, #53408A 0%, #3C2E68 100%);
  --surface-metric-mint: linear-gradient(165deg, #2F6A52 0%, #234838 100%);
  --surface-metric-butter: linear-gradient(165deg, #6A5A30 0%, #4A3E22 100%);
  --surface-metric-sky: linear-gradient(165deg, #35527A 0%, #263A58 100%);
}

.glass-panel,
.page-header,
.chat-header.page-header,
.navbar,
.passport-card,
.perspectives-box {
  border-color: color-mix(in srgb, var(--accent-primary) 42%, #fff) !important;
}

.child-tab-pill:not(.is-active) {
  background: #fff !important;
  color: var(--text-main) !important;
  border: 1.5px solid color-mix(in srgb, var(--accent-primary) 40%, #fff) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 4px 0 rgba(72, 62, 96, 0.22),
    0 8px 12px rgba(48, 40, 72, 0.18) !important;
}

.chat-input {
  border-color: color-mix(in srgb, var(--accent-primary) 42%, #fff) !important;
}

.message-bubble.bot .msg-content {
  background: #F4EEFF !important;
  border-color: color-mix(in srgb, var(--accent-primary) 36%, #fff) !important;
}

.clay-stat-card {
  border: 1.5px solid rgba(90, 60, 160, 0.22) !important;
}

[data-theme="dark"] .glass-panel,
[data-theme="dark-neon"] .glass-panel,
[data-theme="soft-neon-night"] .glass-panel,
[data-theme="deep-purple-clay"] .glass-panel,
[data-theme="dark"] .page-header,
[data-theme="dark-neon"] .page-header,
[data-theme="soft-neon-night"] .page-header,
[data-theme="deep-purple-clay"] .page-header,
[data-theme="dark"] .navbar,
[data-theme="dark-neon"] .navbar,
[data-theme="soft-neon-night"] .navbar,
[data-theme="deep-purple-clay"] .navbar,
[data-theme="dark"] .passport-card,
[data-theme="dark-neon"] .passport-card,
[data-theme="soft-neon-night"] .passport-card,
[data-theme="deep-purple-clay"] .passport-card {
  border-color: rgba(196, 181, 253, 0.42) !important;
}

[data-theme="dark"] .child-tab-pill:not(.is-active),
[data-theme="dark-neon"] .child-tab-pill:not(.is-active),
[data-theme="soft-neon-night"] .child-tab-pill:not(.is-active),
[data-theme="deep-purple-clay"] .child-tab-pill:not(.is-active) {
  background: #4A3E78 !important;
  color: var(--text-main) !important;
  border-color: rgba(196, 181, 253, 0.45) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .message-bubble.bot .msg-content,
[data-theme="dark-neon"] .message-bubble.bot .msg-content,
[data-theme="soft-neon-night"] .message-bubble.bot .msg-content,
[data-theme="deep-purple-clay"] .message-bubble.bot .msg-content {
  background: #4A3F78 !important;
  border-color: rgba(196, 181, 253, 0.4) !important;
}

[data-theme="dark"] .clay-stat-card,
[data-theme="dark-neon"] .clay-stat-card,
[data-theme="soft-neon-night"] .clay-stat-card,
[data-theme="deep-purple-clay"] .clay-stat-card {
  border-color: rgba(196, 181, 253, 0.35) !important;
}

/* Ніч: тіло світлої смужки не бере майже білий --text-main.
   Заголовок уже на чорнилі смужки; рядок, абзац і кнопка закриття — теж. */
:is(
  [data-theme="dark"],
  [data-theme="dark-neon"],
  [data-theme="soft-neon-night"],
  [data-theme="deep-purple-clay"]
) :is(.goal-focus-text, .goal-focus-close, .dev-focus-list li) {
  color: #3B2468 !important;
}

:is(
  [data-theme="dark"],
  [data-theme="dark-neon"],
  [data-theme="soft-neon-night"],
  [data-theme="deep-purple-clay"]
) .quota-chip-text {
  color: #0C4A6E !important;
}

:is(
  [data-theme="dark"],
  [data-theme="dark-neon"],
  [data-theme="soft-neon-night"],
  [data-theme="deep-purple-clay"]
) :is(.chat-disclaimer-banner .edu-banner-close, .alert-box div) {
  color: #7C2D12 !important;
  opacity: 1;
}

/* День: тінь під колір картки. Ніч лишає темну тінь токена. */
:is(
  [data-theme="light"],
  [data-theme="notion-minimal"],
  [data-theme="clinical-calm"],
  [data-theme="lavender-clay"]
) :is(.clay-tile--rose, .clay-tile--peach) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 5px 0 rgba(176, 40, 90, 0.45),
    0 10px 14px rgba(176, 40, 90, 0.28) !important;
}

:is(
  [data-theme="light"],
  [data-theme="notion-minimal"],
  [data-theme="clinical-calm"],
  [data-theme="lavender-clay"]
) :is(.clay-tile--lilac, .goal-focus-chip, .dev-focus-list li, .kb-personal-bar) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 5px 0 rgba(98, 62, 180, 0.45),
    0 10px 14px rgba(98, 62, 180, 0.28) !important;
}

:is(
  [data-theme="light"],
  [data-theme="notion-minimal"],
  [data-theme="clinical-calm"],
  [data-theme="lavender-clay"]
) .clay-tile--mint {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 5px 0 rgba(16, 128, 84, 0.45),
    0 10px 14px rgba(16, 128, 84, 0.28) !important;
}

:is(
  [data-theme="light"],
  [data-theme="notion-minimal"],
  [data-theme="clinical-calm"],
  [data-theme="lavender-clay"]
) :is(.clay-tile--butter, .chat-disclaimer-banner, .alert-box) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 5px 0 rgba(168, 104, 12, 0.45),
    0 10px 14px rgba(168, 104, 12, 0.28) !important;
}

:is(
  [data-theme="light"],
  [data-theme="notion-minimal"],
  [data-theme="clinical-calm"],
  [data-theme="lavender-clay"]
) :is(.clay-tile--sky, .quota-chip) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 5px 0 rgba(8, 110, 176, 0.45),
    0 10px 14px rgba(8, 110, 176, 0.28) !important;
}