/* MathFilm UI theme — dark (default) + light base + dark overrides */

html[data-theme="dark"] {
  color-scheme: dark;
  --blue: #5b9dff;
  --blue-2: #7eb4ff;
  --navy: #e8f0ff;
  --text: #e8eef8;
  --muted: #9eb0cc;
  --line: #2a3f5f;
  --line-soft: #243550;
  --bg: #0f1a2e;
  --panel: #141f33;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 18px 40px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #0a1220;
  color: var(--text);
}

html[data-theme="dark"] .viewport {
  background:
    radial-gradient(circle at 12% 8%, rgba(91, 157, 255, 0.12) 0 90px, transparent 92px),
    radial-gradient(circle at 88% 14%, rgba(91, 157, 255, 0.08) 0 110px, transparent 112px),
    linear-gradient(180deg, #0c1628 0%, #0f1d34 42%, #101f38 68%, #0a1220 100%);
}

html[data-theme="dark"] .artboard {
  background: transparent;
}

html[data-theme="dark"] .topbar {
  background:
    radial-gradient(ellipse 70% 160% at 6% 50%, rgba(255, 122, 61, 0.2), transparent 58%),
    radial-gradient(ellipse 55% 180% at 88% 40%, rgba(91, 157, 255, 0.26), transparent 55%),
    linear-gradient(105deg, #0a1424 0%, #121f36 40%, #162848 72%, #0e1a2e 100%);
  border-bottom-color: rgba(91, 157, 255, 0.28);
}

html[data-theme="dark"] .account {
  background: rgba(20, 34, 58, 0.92);
  border-color: #2a3f5f;
  color: var(--muted);
}

html[data-theme="dark"] .overview-stat {
  background: linear-gradient(180deg, #1a3d6e 0%, #152d57 52%, #122648 100%);
  border-color: rgba(42, 63, 95, 0.9);
}

html[data-theme="dark"] .overview-stat strong,
html[data-theme="dark"] .overview-stat-label {
  color: inherit;
}

html[data-theme="dark"] .overview-stat--total strong {
  color: #f8fafc;
}

html[data-theme="dark"] .overview-stat--fav strong {
  color: #7dd3fc;
}

html[data-theme="dark"] .overview-stat--paid strong {
  color: #fff;
}

html[data-theme="dark"] .overview-stat--month strong {
  color: #fcd34d;
}

html[data-theme="dark"] .overview-stat-label {
  color: rgba(255, 255, 255, 0.94);
}

html[data-theme="dark"] .overview-stat-note {
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .mascot-deco-card {
  background: #141f33;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .mascot-deco-scene {
  background: linear-gradient(180deg, #141f33 0%, #0f1a2e 100%);
}

html[data-theme="dark"] .config-rail {
  background: linear-gradient(128deg, #1a3d6e 0%, #152d57 42%, #122648 100%);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .config-rail h2 {
  color: #fff;
}

html[data-theme="dark"] .config-rail .lead,
html[data-theme="dark"] .config-block > span,
html[data-theme="dark"] .config-block > label > span:first-child {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .config-block select,
html[data-theme="dark"] .config-block textarea,
html[data-theme="dark"] .theme-current-card {
  background: rgba(20, 34, 58, 0.92);
  border-color: rgba(42, 63, 95, 0.9);
  color: var(--text);
}

html[data-theme="dark"] .balance-side-card {
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .main-row-top {
  background: linear-gradient(128deg, #1a3a6e 0%, #152d57 42%, #122648 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 32px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .hero-card {
  background: rgba(20, 34, 58, 0.92);
  border-color: rgba(42, 63, 95, 0.9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .stat-card {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .main-row-top .stat-card .label,
html[data-theme="dark"] .main-row-top .stat-card .note {
  color: #5a7194;
}

html[data-theme="dark"] .main-row-top .stat-card strong {
  color: #2a3f5f;
}

html[data-theme="dark"] .stat-card.stat-blue { border-color: rgba(77, 155, 255, 0.65); }
html[data-theme="dark"] .stat-card.stat-pink { border-color: rgba(236, 72, 153, 0.65); }
html[data-theme="dark"] .stat-card.stat-green { border-color: rgba(34, 197, 94, 0.65); }
html[data-theme="dark"] .stat-card.stat-purple { border-color: rgba(167, 139, 250, 0.65); }

html[data-theme="dark"] .hero-badge {
  background: rgba(15, 26, 46, 0.88);
  border-color: #2a3f5f;
}

html[data-theme="dark"] .library-card {
  background: linear-gradient(180deg, rgba(20, 31, 51, 0.92) 0%, rgba(15, 26, 46, 0.96) 100%);
  border-color: #2a3f5f;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .chat-box,
html[data-theme="dark"] .progress-card {
  background: #141f33;
  border-color: #2a3f5f;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .lesson-list-container {
  background: linear-gradient(180deg, rgba(26, 40, 64, 0.55) 0%, rgba(20, 31, 51, 0.72) 100%);
  border-color: #2a3f5f;
}

html[data-theme="dark"] .lesson-list-header {
  background: rgba(26, 40, 64, 0.72);
  border-bottom-color: #2a3f5f;
}

html[data-theme="dark"] .lesson-list-row {
  background: rgba(20, 31, 51, 0.55);
  border-bottom-color: #1e2d45;
}

html[data-theme="dark"] .lesson-list-row:hover {
  background: rgba(26, 40, 64, 0.78);
}

html[data-theme="dark"] .tabs {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .tabs button {
  background: var(--panel, #141f33);
  border-color: var(--blue);
  color: var(--text);
}

html[data-theme="dark"] .tabs button.is-active {
  background: linear-gradient(180deg, #4d9bff 0%, #2563eb 100%);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

html[data-theme="dark"] .footer {
  background: rgba(15, 26, 46, 0.92);
  border-top-color: #243550;
}

html[data-theme="dark"] .input-panel textarea,
html[data-theme="dark"] .config-block select,
html[data-theme="dark"] .config-block textarea {
  background: #0f1a2e;
  border-color: #2a3f5f;
  color: var(--text);
}

html[data-theme="dark"] .model-picker-trigger,
html[data-theme="dark"] .btn-ghost {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98));
  border-color: rgba(147, 197, 253, 0.42);
  color: #f0f6ff;
  -webkit-text-fill-color: #f0f6ff;
}

html[data-theme="dark"] .lesson-detail-card {
  background: #141f33;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .lesson-detail-head {
  background: #1a2840;
  border-bottom-color: #2a3f5f;
}

html[data-theme="dark"] .account-panel-card {
  background: #141f33;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .account-panel-head {
  background: #1a2840;
  border-bottom-color: #2a3f5f;
}

html[data-theme="dark"] .account-field input {
  background: #0f1a2e;
  border-color: #2a3f5f;
  color: var(--text);
}

html[data-theme="dark"] .account-field input:disabled {
  background: #1a2840;
  color: var(--muted);
}

html[data-theme="dark"] .billing-plan-detail {
  background: #0f1a2e;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .billing-amount-card,
html[data-theme="dark"] .billing-confirm-card,
html[data-theme="dark"] .billing-orders {
  background: #141f33;
  border-color: #2a3f5f;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .billing-history-btn {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98));
  border-color: rgba(147, 197, 253, 0.42);
  color: #f0f6ff;
  -webkit-text-fill-color: #f0f6ff;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .billing-quick-btn {
  background: linear-gradient(180deg, rgba(42, 62, 98, 0.95), rgba(22, 36, 60, 0.98));
  border-color: rgba(147, 197, 253, 0.42);
  color: #f0f6ff;
  -webkit-text-fill-color: #f0f6ff;
}

html[data-theme="dark"] .billing-quick-btn.is-active {
  background: rgba(77, 182, 172, 0.16);
  border-color: rgba(77, 182, 172, 0.55);
  color: #8fe0d8;
}

html[data-theme="dark"] .billing-amount-input-wrap {
  background: #0f1a2e;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .billing-info-notice {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

html[data-theme="dark"] .billing-orders li {
  border-bottom-color: #1e2d45;
}

html[data-theme="dark"] .qr-card {
  background: #141f33;
  border: 1px solid #2a3f5f;
}

html[data-theme="dark"] .qr-close,
html[data-theme="dark"] .qr-copy-btn {
  background: #1a2840;
  border-color: #2a3f5f;
  color: var(--text);
}

html[data-theme="dark"] .qr-transfer {
  background: #0f1a2e;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .qr-payment-code {
  background: #0f1a2e;
  border-color: #2a3f5f;
}

html[data-theme="dark"] .qr-code {
  border-color: #2a3f5f;
}