/* ==========================================================================
   Літерали кольору з оголошень (етап 4, docs/CSS_CONSOLIDATION_PLAN.md).
   Ім'я — сам колір. Значення однакове вдень і вночі: нічний відтінок
   лишається в своєму правилі і теж читає токен. transparent і currentColor
   тут немає — їх інвентар не рахує. Існуючі --токени компонентів не переїжджали.
   ========================================================================== */

:root {
  --lit-rgba-6-16-24-0-18: rgba(6, 16, 24, 0.18);
  --lit-061018: #061018;
  --lit-rgba-255-255-255-0-35: rgba(255, 255, 255, 0.35);
  --lit-rgba-255-255-255-0-22: rgba(255, 255, 255, 0.22);
  --lit-fff: #fff;
  --lit-rgba-255-255-255-0-55: rgba(255, 255, 255, 0.55);
  --lit-rgba-255-255-255-0-7: rgba(255, 255, 255, 0.7);
  --lit-rgba-255-255-255-0-45: rgba(255, 255, 255, 0.45);
  --lit-rgba-255-255-255-0-32: rgba(255, 255, 255, 0.32);
  --lit-0b3f3b: #0b3f3b;
  --lit-rgba-255-255-255-0-28: rgba(255, 255, 255, 0.28);
  --lit-rgba-56-189-248-0-22: rgba(56, 189, 248, 0.22);
  --lit-rgba-56-189-248-0-45: rgba(56, 189, 248, 0.45);
  --lit-e0f2fe: #E0F2FE;
  --lit-ccfbf1: #CCFBF1;
  --lit-99f6e4: #99F6E4;
  --lit-14b8a6: #14B8A6;
  --lit-rgba-15-118-110-0-12: rgba(15, 118, 110, 0.12);
  --lit-1e3a5f: #1E3A5F;
  --lit-312e81: #312E81;
  --lit-rgba-56-189-248-0-55: rgba(56, 189, 248, 0.55);
  --lit-rgba-18-28-48-0-55: rgba(18, 28, 48, 0.55);
  --lit-rgba-0-0-0-0-35: rgba(0, 0, 0, 0.35);
  --lit-rgba-255-255-255-0-04: rgba(255, 255, 255, 0.04);
  --lit-rgba-56-189-248-0-12: rgba(56, 189, 248, 0.12);
  --lit-rgba-56-189-248-0-3: rgba(56, 189, 248, 0.3);
  --lit-rgba-7-11-20-0-45: rgba(7, 11, 20, 0.45);
  --lit-rgba-180-210-255-0-16: rgba(180, 210, 255, 0.16);
  --lit-rgba-255-255-255-0-06: rgba(255, 255, 255, 0.06);
  --lit-rgba-255-255-255-0-25: rgba(255, 255, 255, 0.25);
  --lit-rgba-56-189-248-0-2: rgba(56, 189, 248, 0.2);
  --lit-ffffff: #ffffff;
  --lit-c45c4a: #c45c4a;
  --lit-000: #000;
  --lit-b24738: #b24738;
  --lit-rgba-0-0-0-08: rgba(0,0,0,.08);
  --lit-rgba-0-0-0-12: rgba(0,0,0,.12);
  --lit-5b4bc4: #5b4bc4;
  --lit-rgba-0-0-0-0: rgba(0, 0, 0, 0);
  --lit-rgba-0-0-0-0-6: rgba(0, 0, 0, 0.6);
  --lit-rgba-11-15-23-0-85: rgba(11, 15, 23, 0.85);
  --lit-rgba-80-10-10-0-28: rgba(80, 10, 10, 0.28);
  --lit-rgba-239-68-68-0-12: rgba(239, 68, 68, 0.12);
  --lit-rgba-80-10-10-0-35: rgba(80, 10, 10, 0.35);
  --lit-rgba-220-38-38-0-2: rgba(220, 38, 38, 0.2);
  --lit-rgba-255-255-255-0-5: rgba(255, 255, 255, 0.5);
  --lit-rgba-255-255-255-0-2: rgba(255, 255, 255, 0.2);
  --lit-rgba-255-255-255-0-65: rgba(255, 255, 255, 0.65);
  --lit-rgba-255-255-255-0-42: rgba(255, 255, 255, 0.42);
  --lit-rgba-255-255-255-0-38: rgba(255, 255, 255, 0.38);
  --lit-rgba-88-60-140-0-14: rgba(88, 60, 140, 0.14);
  --lit-rgba-88-60-140-0-16: rgba(88, 60, 140, 0.16);
  --lit-322a52: #322a52;
  --lit-2a2348: #2a2348;
  --lit-3a2840: #3a2840;
  --lit-rgba-196-181-253-0-22: rgba(196, 181, 253, 0.22);
  --lit-f7f2ff: #f7f2ff;
  --lit-ebe3ff: #ebe3ff;
  --lit-ffe9f2: #ffe9f2;
  --lit-rgba-255-255-255-0-8: rgba(255, 255, 255, 0.8);
  --lit-34d399: #34d399;
  --lit-6ee7b7: #6ee7b7;
  --lit-8b7cf6: #8b7cf6;
  --lit-a78bfa: #a78bfa;
  --lit-f472b6: #f472b6;
  --lit-fb7185: #fb7185;
  --lit-4a3040: #4a3040;
  --lit-3a2836: #3a2836;
  --lit-2a453c: #2a453c;
  --lit-243a34: #243a34;
  --lit-2e3a52: #2e3a52;
  --lit-263048: #263048;
  --lit-4a422e: #4a422e;
  --lit-3a3424: #3a3424;
  --lit-4a3340: #4a3340;
  --lit-3a2834: #3a2834;
  --lit-3a2f5c: #3a2f5c;
  --lit-2f274d: #2f274d;
  --lit-ffe6ef: #ffe6ef;
  --lit-ffd0e0: #ffd0e0;
  --lit-e4faf0: #e4faf0;
  --lit-c9f0df: #c9f0df;
  --lit-e5f4ff: #e5f4ff;
  --lit-cfe9ff: #cfe9ff;
  --lit-fff6d9: #fff6d9;
  --lit-ffe9a8: #ffe9a8;
  --lit-ffe9df: #ffe9df;
  --lit-ffd8c8: #ffd8c8;
  --lit-f0e9ff: #f0e9ff;
  --lit-e4d9ff: #e4d9ff;
  --lit-f3edff: #f3edff;
  --lit-1a1430: #1a1430;
  --lit-fde68a: #fde68a;
  --lit-92400e: #92400e;
  --lit-fbbf24: #fbbf24;
  --lit-c4b5fd: #c4b5fd;
  --lit-rgba-255-255-255-0-85: rgba(255, 255, 255, 0.85);
  --lit-rgba-139-124-246-0-25: rgba(139, 124, 246, 0.25);
  --lit-a39bb8: #a39bb8;
  --lit-2d2640: #2d2640;
  --lit-7c6cf0: #7c6cf0;
  --lit-rgba-109-92-231-0-4: rgba(109, 92, 231, 0.4);
  --lit-rgba-139-124-246-0-32: rgba(139, 124, 246, 0.32);
  --lit-rgba-167-139-250-0-65: rgba(167, 139, 250, 0.65);
  --lit-rgba-255-255-255-1: rgba(255, 255, 255, 1);
  --lit-rgba-139-124-246-0-4: rgba(139, 124, 246, 0.4);
  --lit-rgba-139-124-246-0-14: rgba(139, 124, 246, 0.14);
  --lit-f7f3ff: #f7f3ff;
  --lit-rgba-255-255-255-0-95: rgba(255, 255, 255, 0.95);
  --lit-rgba-196-181-253-0-38: rgba(196, 181, 253, 0.38);
  --lit-rgba-88-60-140-0-1: rgba(88, 60, 140, 0.1);
  --lit-7b7394: #7b7394;
  --lit-rgba-255-255-255-0-9: rgba(255, 255, 255, 0.9);
  --lit-rgba-139-124-246-0-12: rgba(139, 124, 246, 0.12);
  --lit-b8a4f5: #b8a4f5;
  --lit-6d5ce7: #6d5ce7;
  --lit-rgba-109-92-231-0-35: rgba(109, 92, 231, 0.35);
  --lit-rgba-139-124-246-0-28: rgba(139, 124, 246, 0.28);
  --lit-rgba-88-60-140-0-08: rgba(88, 60, 140, 0.08);
  --lit-rgba-88-60-140-0-06: rgba(88, 60, 140, 0.06);
  --lit-rgba-90-78-140-0-5: rgba(90, 78, 140, 0.5);
  --lit-rgba-42-35-72-0-55: rgba(42, 35, 72, 0.55);
  --lit-rgba-196-181-253-0-3: rgba(196, 181, 253, 0.3);
  --lit-rgba-237-228-255-0-35: rgba(237, 228, 255, 0.35);
  --lit-rgba-139-124-246-0-18: rgba(139, 124, 246, 0.18);
  --lit-0c4a6e: #0c4a6e;
  --lit-rgba-56-189-248-0-18: rgba(56, 189, 248, 0.18);
  --lit-854d0e: #854d0e;
  --lit-rgba-234-179-8-0-3: rgba(234, 179, 8, 0.3);
  --lit-rgba-234-179-8-0-16: rgba(234, 179, 8, 0.16);
  --lit-9a3412: #9a3412;
  --lit-rgba-251-146-60-0-3: rgba(251, 146, 60, 0.3);
  --lit-rgba-251-146-60-0-18: rgba(251, 146, 60, 0.18);
  --lit-efe8ff: #efe8ff;
  --lit-e0d4ff: #e0d4ff;
  --lit-5b21b6: #5b21b6;
  --lit-rgba-139-124-246-0-3: rgba(139, 124, 246, 0.3);
  --lit-rgba-139-124-246-0-2: rgba(139, 124, 246, 0.2);
  --lit-rgba-0-0-0-0-4: rgba(0, 0, 0, 0.4);
  --lit-rgba-45-38-64-0-22: rgba(45, 38, 64, 0.22);
  --lit-6b7280: #6b7280;
  --lit-4b5563: #4b5563;
  --lit-rgba-156-163-175-0-7: rgba(156, 163, 175, 0.7);
  --lit-rgba-243-244-246-0-95: rgba(243, 244, 246, 0.95);
  --lit-rgba-229-231-235-0-9: rgba(229, 231, 235, 0.9);
  --lit-rgba-156-163-175-0-25: rgba(156, 163, 175, 0.25);
  --lit-7a5fe0: #7a5fe0;
  --lit-f3e8ff: #f3e8ff;
  --lit-d7c6fb: #d7c6fb;
  --lit-c3adf6: #c3adf6;
  --lit-0369a1: #0369a1;
  --lit-e5f5ff: #e5f5ff;
  --lit-9fd4fb: #9fd4fb;
  --lit-7ec0ee: #7ec0ee;
  --lit-be185d: #be185d;
  --lit-ffe4ef: #ffe4ef;
  --lit-ffb3cf: #ffb3cf;
  --lit-f09ab8: #f09ab8;
  --lit-a16207: #a16207;
  --lit-fff6d0: #fff6d0;
  --lit-ffe08a: #ffe08a;
  --lit-e6c15a: #e6c15a;
  --lit-4d7c0f: #4d7c0f;
  --lit-f4fbc8: #f4fbc8;
  --lit-c6e86a: #c6e86a;
  --lit-a8cf3c: #a8cf3c;
  --lit-rgba-59-47-102-0-22: rgba(59, 47, 102, 0.22);
  --lit-831843: #831843;
  --lit-713f12: #713f12;
  --lit-365314: #365314;
  --lit-rgba-8-110-176-0-45: rgba(8, 110, 176, 0.45);
  --lit-rgba-8-110-176-0-28: rgba(8, 110, 176, 0.28);
  --lit-rgba-168-104-12-0-45: rgba(168, 104, 12, 0.45);
  --lit-rgba-168-104-12-0-28: rgba(168, 104, 12, 0.28);
  --lit-rgba-16-128-84-0-45: rgba(16, 128, 84, 0.45);
  --lit-rgba-16-128-84-0-28: rgba(16, 128, 84, 0.28);
  --lit-rgba-98-62-180-0-45: rgba(98, 62, 180, 0.45);
  --lit-rgba-98-62-180-0-28: rgba(98, 62, 180, 0.28);
  --lit-rgba-176-40-90-0-45: rgba(176, 40, 90, 0.45);
  --lit-rgba-176-40-90-0-28: rgba(176, 40, 90, 0.28);
  --lit-7c2d12: #7C2D12;
  --lit-3b2468: #3B2468;
  --lit-rgba-196-181-253-0-35: rgba(196, 181, 253, 0.35);
  --lit-4a3e78: #4A3E78;
  --lit-rgba-196-181-253-0-45: rgba(196, 181, 253, 0.45);
  --lit-rgba-196-181-253-0-42: rgba(196, 181, 253, 0.42);
  --lit-rgba-90-60-160-0-22: rgba(90, 60, 160, 0.22);
  --lit-rgba-72-62-96-0-22: rgba(72, 62, 96, 0.22);
  --lit-rgba-48-40-72-0-18: rgba(48, 40, 72, 0.18);
  --lit-rgba-254-202-202-0-5: rgba(254, 202, 202, 0.5);
  --lit-rgba-255-200-190-0-12: rgba(255, 200, 190, 0.12);
  --lit-rgba-60-0-0-0-35: rgba(60, 0, 0, 0.35);
  --lit-rgba-255-210-200-0-2: rgba(255, 210, 200, 0.2);
  --lit-rgba-80-10-10-0-3: rgba(80, 10, 10, 0.3);
  --lit-rgba-255-160-150-0-12: rgba(255, 160, 150, 0.12);
  --lit-rgba-220-38-38-0-25: rgba(220, 38, 38, 0.25);
  --lit-rgba-255-255-255-0-4: rgba(255, 255, 255, 0.4);
  --lit-rgba-60-0-0-0-3: rgba(60, 0, 0, 0.3);
  --lit-rgba-254-202-202-0-45: rgba(254, 202, 202, 0.45);
  --lit-rgb-255-255-255: rgb(255, 255, 255);
  --lit-rgb-246-241-255: rgb(246, 241, 255);
  --lit-rgb-235-226-255: rgb(235, 226, 255);
  --lit-rgba-122-95-224-0-2: rgba(122, 95, 224, 0.2);
  --lit-rgb-227-214-251: rgb(227, 214, 251);
  --lit-rgba-45-38-64-0-28: rgba(45, 38, 64, 0.28);
  --lit-rgba-214-198-255-0-38: rgba(214, 198, 255, 0.38);
  --lit-rgb-92-74-150: rgb(92, 74, 150);
  --lit-rgb-67-54-124: rgb(67, 54, 124);
  --lit-rgba-255-255-255-0-16: rgba(255, 255, 255, 0.16);
  --lit-rgba-0-0-0-0-38: rgba(0, 0, 0, 0.38);
  --lit-rgb-215-198-251: rgb(215, 198, 251);
  --lit-rgb-195-173-246: rgb(195, 173, 246);
  --lit-rgb-183-154-242: rgb(183, 154, 242);
  --lit-rgba-255-255-255-0-72: rgba(255, 255, 255, 0.72);
  --lit-rgba-98-68-176-0-2: rgba(98, 68, 176, 0.2);
  --lit-rgba-72-48-130-0-22: rgba(72, 48, 130, 0.22);
  --lit-60a5fa: #60a5fa;
  --lit-rgba-2-6-23-0-35: rgba(2, 6, 23, 0.35);
  --lit-4a3f78: #4A3F78;
  --lit-rgba-196-181-253-0-4: rgba(196, 181, 253, 0.4);
  --lit-f4eeff: #F4EEFF;
  --lit-342c58: #342c58;
  --lit-rgba-90-70-200-0-35: rgba(90, 70, 200, 0.35);
  --lit-rgba-88-60-140-0-18: rgba(88, 60, 140, 0.18);
  --lit-rgba-196-181-253-0-55: rgba(196, 181, 253, 0.55);
  --lit-rgba-253-186-220-0-35: rgba(253, 186, 220, 0.35);
  --lit-rgba-167-139-250-0-3: rgba(167, 139, 250, 0.3);
  --lit-rgba-45-38-64-0-42: rgba(45, 38, 64, 0.42);
  --lit-rgb-239-232-255: rgb(239, 232, 255);
  --lit-rgb-228-219-250: rgb(228, 219, 250);
  --lit-rgba-255-255-255-0-75: rgba(255, 255, 255, 0.75);
  --lit-rgba-167-139-250-0-28: rgba(167, 139, 250, 0.28);
  --lit-rgba-244-114-182-0-35: rgba(244, 114, 182, 0.35);
  --lit-rgb-251-248-255: rgb(251, 248, 255);
  --lit-rgb-243-237-255: rgb(243, 237, 255);
  --lit-rgba-255-255-255-0-98: rgba(255, 255, 255, 0.98);
  --lit-rgba-139-124-246-0-08: rgba(139, 124, 246, 0.08);
  --lit-rgba-88-60-140-0-2: rgba(88, 60, 140, 0.2);
  --lit-rgba-45-38-64-0-18: rgba(45, 38, 64, 0.18);
  --lit-rgba-88-60-140-0-28: rgba(88, 60, 140, 0.28);
  --lit-rgb-196-181-253: rgb(196, 181, 253);
  --lit-rgba-139-124-246-0-35: rgba(139, 124, 246, 0.35);
  --lit-rgba-11-15-23-0-82: rgba(11, 15, 23, 0.82);
  --lit-rgba-45-38-64-0-12: rgba(45, 38, 64, 0.12);
  --lit-a7f3d0: #a7f3d0;
  --lit-14532d: #14532d;
  --lit-166534: #166534;
  --lit-rgba-167-243-208-0-25: rgba(167, 243, 208, 0.25);
  --lit-f5f3ff: #f5f3ff;
  --lit-4338a8: #4338a8;
  --lit-3730a3: #3730a3;
  --lit-241e40: #241e40;
  --lit-rgba-255-255-255-0-08: rgba(255, 255, 255, 0.08);
  --lit-rgba-20-12-40-0-55: rgba(20, 12, 40, 0.55);
  --lit-9ca3af: #9ca3af;
  --lit-rgba-16-185-129-0-35: rgba(16, 185, 129, 0.35);
  --lit-065f46: #065f46;
  --lit-ecfdf5: #ecfdf5;
  --lit-d1fae5: #d1fae5;
  --lit-rgba-5-150-105-0-12: rgba(5, 150, 105, 0.12);
  --lit-4c3fb0: #4c3fb0;
  --lit-rgba-91-75-196-0-28: rgba(91, 75, 196, 0.28);
  --lit-6d5ef0: #6d5ef0;
  --lit-rgba-91-75-196-0-35: rgba(91, 75, 196, 0.35);
  --lit-2e1065: #2e1065;
  --lit-059669: #059669;
  --lit-047857: #047857;
  --lit-rgba-5-150-105-0-28: rgba(5, 150, 105, 0.28);
  --lit-f5f0ff: #f5f0ff;
  --lit-e4dbfa: #e4dbfa;
  --lit-fbf8ff: #fbf8ff;
  --lit-rgba-196-181-253-0-28: rgba(196, 181, 253, 0.28);
  --lit-fce7f3: #fce7f3;
  --lit-dbeafe: #dbeafe;
  --lit-1d4ed8: #1d4ed8;
  --lit-f3f4f6: #f3f4f6;
  --lit-ede9fe: #ede9fe;
  --lit-rgba-255-255-255-0-92: rgba(255, 255, 255, 0.92);
  --lit-rgba-196-181-253-0-32: rgba(196, 181, 253, 0.32);
  --lit-rgba-88-60-140-0-55: rgba(88, 60, 140, 0.55);
  --lit-rgba-124-58-237-0-28: rgba(124, 58, 237, 0.28);
  --lit-2a1838: #2a1838;
  --lit-rgba-167-139-250-0-35: rgba(167, 139, 250, 0.35);
}

/* Тема й службові змінні зі старих аркушів (етап 5, крок 7).
   Порядок той самий, що й у каскаді до переносу: пізніший блок
   перебиває раніший. Чинні кольори дня й ночі — останні блоки. */
:root,
[data-theme="clinical-calm"] {
  --bg-primary: #E8E0F5;
  --bg-secondary: #DDD4F0;
  --bg-card: #FFFBFE;
  --bg-card-subtle: #F7F2FC;
  --bg-elev: #FFFFFF;

  --text-main: #2D2640;
  --text-muted: #7B7394;
  --text-dim: #A39BB8;

  --accent-primary: #8B7CF6;
  --accent-secondary: #A78BFA;
  --accent-soft: rgba(139, 124, 246, 0.14);
  --accent-gold: #8B7CF6;
  --accent-gold-soft: rgba(139, 124, 246, 0.16);
  --accent-warm: #EF4444;
  --edu-banner-bg: rgba(255, 248, 230, 0.95);
  --edu-banner-border: rgba(251, 191, 36, 0.45);
  --edu-banner-text: #78350F;

  --gradient-brand: linear-gradient(135deg, #7C6CF0 0%, #C4B5FD 100%);
  /* SOS: solid vivid red cabochon (product invariant — red only) */
  --gradient-sos:
    radial-gradient(circle at 30% 22%, rgba(255, 200, 200, 0.55) 0 6%, transparent 18%),
    radial-gradient(ellipse 85% 70% at 48% 40%, #EF4444 0%, #DC2626 38%, #B91C1C 72%, #7F1D1D 100%);
  --body-bg-image:
    radial-gradient(720px 480px at 0% 0%, rgba(167, 139, 250, 0.35), transparent 58%),
    radial-gradient(640px 420px at 100% 8%, rgba(196, 181, 253, 0.28), transparent 52%),
    radial-gradient(520px 380px at 50% 100%, rgba(255, 255, 255, 0.55), transparent 60%);
  --glow-accent: rgba(139, 124, 246, 0.18);
  --sos-glow: rgba(220, 38, 38, 0.45);

  /* Clay surfaces (less glass, more soft plastic volume) */
  --glass-fill: #FFFBFE;
  --glass-stroke: rgba(255, 255, 255, 0.95);
  --glass-highlight: rgba(255, 255, 255, 0.98);

  --border-color: rgba(196, 181, 253, 0.45);
  --border-subtle: rgba(221, 214, 254, 0.7);
  --shadow-soft:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 28px rgba(88, 60, 140, 0.10),
    0 2px 6px rgba(88, 60, 140, 0.06);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 12px 32px rgba(88, 60, 140, 0.12),
    0 4px 10px rgba(88, 60, 140, 0.06);
  --shadow-clay:
    0 14px 34px rgba(88, 60, 140, 0.14),
    0 4px 0 rgba(196, 181, 253, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.95) inset;

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --panel-backdrop: none;
  --clay-depth: 4px;

  /* Surface roles (reference dashboard palette — day) */
  --surface-nav: #FFFFFF;
  --surface-panel: #FFFBFE;
  --surface-card: #FFFFFF;
  --surface-edu: #FFF8E7;
  --surface-edu-border: rgba(251, 191, 36, 0.45);
  --surface-edu-text: #78350F;
  --surface-goal: #F3E8FF;
  --surface-goal-border: rgba(167, 139, 250, 0.4);
  --surface-goal-text: #5B21B6;
  --surface-quota: #E8F4FF;
  --surface-quota-border: rgba(56, 189, 248, 0.35);
  --surface-quota-text: #0C4A6E;
  --surface-hero: linear-gradient(135deg, #EDE4FF 0%, #E0D4FF 45%, #F5E6FF 100%);
  --surface-metric-rose: linear-gradient(165deg, #FFE8F0 0%, #FFD6E4 100%);
  --surface-metric-lilac: linear-gradient(165deg, #EFE8FF 0%, #E0D4FF 100%);
  --surface-metric-mint: linear-gradient(165deg, #E4FAF0 0%, #C9F0DF 100%);
  --surface-metric-butter: linear-gradient(165deg, #FFF6D9 0%, #FFE9A8 100%);
  --surface-metric-sky: linear-gradient(165deg, #E5F4FF 0%, #CFE9FF 100%);
}

[data-theme="soft-neon-night"] {
  --bg-primary: #1A1430;
  --bg-secondary: #221A3C;
  --bg-card: #2A2348;
  --bg-card-subtle: #322A52;
  --bg-elev: #3A3160;

  --text-main: #F0EAFB;
  --text-muted: #B0A5D0;
  --text-dim: #7E739E;

  --accent-primary: #C4B5FD;
  --accent-secondary: #A78BFA;
  --accent-soft: rgba(196, 181, 253, 0.16);
  --accent-gold: #C4B5FD;
  --accent-gold-soft: rgba(196, 181, 253, 0.2);
  --accent-warm: #F87171;
  --edu-banner-bg: rgba(251, 191, 36, 0.12);
  --edu-banner-border: rgba(251, 191, 36, 0.3);
  --edu-banner-text: #FDE68A;

  --gradient-brand: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 55%, #DDD6FE 100%);
  --gradient-sos:
    radial-gradient(circle at 30% 22%, rgba(255, 200, 200, 0.45) 0 6%, transparent 18%),
    radial-gradient(ellipse 85% 70% at 48% 40%, #F87171 0%, #EF4444 28%, #DC2626 58%, #991B1B 100%);
  --body-bg-image:
    radial-gradient(900px 520px at 10% -10%, rgba(167, 139, 250, 0.28), transparent 55%),
    radial-gradient(700px 420px at 90% 0%, rgba(196, 181, 253, 0.16), transparent 50%),
    radial-gradient(500px 360px at 50% 100%, rgba(42, 35, 72, 0.9), transparent 60%);
  --glow-accent: rgba(196, 181, 253, 0.22);
  --sos-glow: rgba(239, 68, 68, 0.5);

  /* Surface roles — night: cards lighter than page */
  --surface-nav: #2F2750;
  --surface-panel: #2A2348;
  --surface-card: #342C58;
  --surface-edu: rgba(251, 191, 36, 0.12);
  --surface-edu-border: rgba(251, 191, 36, 0.32);
  --surface-edu-text: #FDE68A;
  --surface-goal: rgba(167, 139, 250, 0.18);
  --surface-goal-border: rgba(196, 181, 253, 0.35);
  --surface-goal-text: #E9D5FF;
  --surface-quota: rgba(56, 189, 248, 0.12);
  --surface-quota-border: rgba(56, 189, 248, 0.3);
  --surface-quota-text: #BAE6FD;
  --surface-hero: linear-gradient(135deg, #3A3160 0%, #322A54 50%, #3D2F5C 100%);
  --surface-metric-rose: linear-gradient(165deg, #4A3040 0%, #3A2836 100%);
  --surface-metric-lilac: linear-gradient(165deg, #3A2F5C 0%, #2F274D 100%);
  --surface-metric-mint: linear-gradient(165deg, #2A453C 0%, #243A34 100%);
  --surface-metric-butter: linear-gradient(165deg, #4A422E 0%, #3A3424 100%);
  --surface-metric-sky: linear-gradient(165deg, #2E3A52 0%, #263048 100%);

  --glass-fill: #2A2348;
  --glass-stroke: rgba(196, 181, 253, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.1);

  --border-color: rgba(167, 139, 250, 0.28);
  --border-subtle: rgba(167, 139, 250, 0.18);
  --shadow-soft:
    0 12px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-card:
    0 14px 36px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-clay:
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 4px 0 rgba(20, 12, 40, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --panel-backdrop: none;
  --clay-depth: 4px;
}

@media (max-width: 768px) {
/* Shell = visual viewport (MDN visualViewport). 100svh on iOS is still taller
   than the area above Safari chrome, so the composer sat under SOS.
   Stack heights: dock (nav+SOS) + composer + gap — keep in sync with JS/CSS. */
:root {
    --mobile-dock-h: 96px;
    /* SOS circle sits above the nav clouds and covers ~40px of panel content */
    --mobile-sos-protrude: 44px;
    --mobile-composer-h: 54px;
    --mobile-composer-gap: 8px;
    --mobile-bottom-clearance: calc(
      var(--mobile-dock-h) + var(--mobile-composer-h) + var(--mobile-composer-gap) + env(safe-area-inset-bottom, 0px)
    );
    /* All tabs: dock + SOS lift so last lines are not under the ruby */
    --mobile-tab-clearance: calc(
      var(--mobile-dock-h) + var(--mobile-sos-protrude) + env(safe-area-inset-bottom, 0px)
    );
  }
}

@media (max-width: 380px) {
:root {
    --mobile-dock-h: 84px;
    --mobile-sos-protrude: 40px;
    --mobile-composer-h: 50px;
  }
}

@media (max-width: 768px) and (max-height: 500px) {
:root {
    --mobile-dock-h: 68px;
    --mobile-composer-h: 48px;
  }
}

:root {
  --clay-cta-top: #6855f2;
  --clay-cta-upper: #604ceb;
  --clay-cta-lower: #5743e3;
  --clay-cta-bottom: #4c39d9;
  --clay-cta-lip: #3e2cbd;
  --clay-cta-glow: rgba(87, 67, 227, 0.38);
  --clay-cta-ink: #ffffff;
  --clay-cta-ink-shadow: 0 1px 0 rgba(30, 18, 110, 0.35);
  /* Підпис доку вдень: світло-бузковий док, тож текст темний (≥ 5:1). */
  --dock-label: #3b2f66;
  /* Активна пігулка доку світла в ОБОХ темах, тож цей токен уночі не
     перемикається. Підпис сидить унизу пігулки, де градієнт і внутрішня
     тінь дають ≈ #DCCFF9: старий #7a5fe0 мав там ≈ 3.2:1, цей — ≈ 4.95:1. */
  --dock-label-active: #4c39d9;
}

[data-theme="soft-neon-night"] {
  --clay-cta-top: #c2bafc;
  --clay-cta-upper: #a99efa;
  --clay-cta-lower: #998cf8;
  --clay-cta-bottom: #897af5;
  --clay-cta-lip: #6d5ce7;
  --clay-cta-glow: rgba(137, 122, 245, 0.35);
  --clay-cta-ink: #1a1430;
  --clay-cta-ink-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  /* Уночі док темний — підпис лишається білим. */
  --dock-label: #ffffff;
}

:root {
  --shadow-clay-lg:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 16px 36px rgba(88, 60, 140, 0.14),
    0 6px 0 rgba(196, 181, 253, 0.28);
  --shadow-clay-press:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 4px 12px rgba(88, 60, 140, 0.12),
    0 2px 0 rgba(196, 181, 253, 0.2);
}

[data-theme="soft-neon-night"] {
  --shadow-clay-lg:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 5px 0 rgba(20, 12, 40, 0.55);
  --shadow-clay-press:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 6px 14px rgba(0, 0, 0, 0.35);
}

:root {
  --clay-plaque-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 10px 26px rgba(88, 60, 140, 0.1),
    0 3px 0 rgba(196, 181, 253, 0.2);
  --clay-plaque-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 14px 30px rgba(88, 60, 140, 0.14),
    0 4px 0 rgba(196, 181, 253, 0.28);
}

[data-theme="soft-neon-night"] {
  --clay-plaque-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 12px 28px rgba(0, 0, 0, 0.35),
    0 3px 0 rgba(15, 10, 30, 0.4);
  --clay-plaque-shadow-hover:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 16px 32px rgba(0, 0, 0, 0.42),
    0 4px 0 rgba(15, 10, 30, 0.5);
}

:root {
  --onboard-sos-red: #DC2626;
  --onboard-sos-glow: rgba(220, 38, 38, 0.45);
}

:root,
[data-theme="clinical-calm"] {
  --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="soft-neon-night"] {
  --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%);
}

:root {
  --tier-ok: #047857;
  --tier-price: var(--clay-cta-lower);
}

[data-theme="soft-neon-night"] {
  --tier-ok: #6ee7b7;
  /* Нічна картка тарифу — #463a74: нижчий стоп давав 3.5:1. */
  --tier-price: var(--clay-cta-top);
}