/* Хеллоуин — праздничное оформление поверх любого дизайна и темы.
   Включается атрибутом data-holiday="halloween" на <html> (appearance.js
   и скрипт в <head>); пока доступно только админу.
   Тема всегда тёмная: ночь, луна, паутина в углу, летучие мыши над шапкой,
   тыквенный акцент. Селекторы с :not(#_) — вес id: перебивают и новый
   дизайн, и тёмную тему без !important. */

/* ─────────────────────────── Палитра ─────────────────────────── */

:root[data-holiday="halloween"]:not(#_) {
  color-scheme: dark;
  --bg: #120d18;
  --card: #1d1626;
  --card-2: #271e33;
  --text: #f3ecf8;
  --text2: #a596b3;
  --border: #33283f;
  /* Акцент — выбранный цвет на Хеллоуин (--head ставит appearance.js),
     по умолчанию тыквенный; чуть светлее, чтобы читался на ночном фоне. */
  --primary: color-mix(in srgb, var(--head) 80%, #fff);
  --mark-bg: #241b2f;
  --g2: #ff5e62;
  --g3: #ffa340;
  --g4: #c3e04f;
  --g5: #5fdc7e;
  --soft: color-mix(in srgb, var(--head) 16%, transparent);
  --soft-2: color-mix(in srgb, var(--head) 26%, transparent);
  --glass: rgba(40, 28, 52, .68);
  --glass-2: rgba(26, 18, 36, .55);
  --glass-edge: color-mix(in srgb, var(--head) 20%, transparent);
  --glass-shine: color-mix(in srgb, var(--head) 24%, transparent);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  --lens: color-mix(in srgb, var(--head) 18%, transparent);
  --lens-shine: color-mix(in srgb, var(--head) 30%, transparent);
  --lift: 0 0 0 1px color-mix(in srgb, var(--head) 9%, transparent);
  --lift-2: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 1px color-mix(in srgb, var(--head) 12%, transparent);
  --sync-color: var(--primary);
  --boot-bg: #120d18;
}

/* Небо: фиолетовая ночь, сверху — туман, снизу — отсвет тыкв. */
:root[data-holiday="halloween"]:not(#_) {
  background:
    radial-gradient(120% 60% at 50% 115%, color-mix(in srgb, var(--head) 16%, transparent), transparent 60%),
    radial-gradient(90% 50% at 20% -10%, rgba(142, 91, 214, .22), transparent 65%),
    /* Звёзды: мелкие точки плиткой 220×260, вторая плитка смещена — без явного узора. */
    radial-gradient(1px 1px at 24px 38px, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1px 1px at 132px 92px, rgba(255, 255, 255, .4), transparent),
    radial-gradient(1.5px 1.5px at 188px 20px, rgba(255, 240, 210, .6), transparent),
    radial-gradient(1px 1px at 76px 170px, rgba(255, 255, 255, .35), transparent),
    radial-gradient(1px 1px at 160px 214px, rgba(255, 255, 255, .45), transparent),
    radial-gradient(1.5px 1.5px at 40px 236px, rgba(210, 190, 255, .5), transparent),
    #120d18;
  background-size: 100% 100%, 100% 100%, 220px 260px, 220px 260px, 220px 260px, 220px 260px, 220px 260px, 220px 260px, auto;
  background-attachment: fixed;
}
:root[data-holiday="halloween"]:not(#_) body { background: transparent; }

/* ─────────────────── Луна, паутина, летучие мыши ─────────────────── */

/* Слой .hw-decor создаёт appearance.js первым ребёнком шапки. z-index -1
   внутри шапки — над её фоном, но под именем, стрелками и полосой недели:
   мышь пролетает за заголовком, паутина уходит под кнопки. Луна — слева
   в строке шапки, паутина — в правом верхнем углу, три мыши пролетают
   с разной скоростью. */
.hw-decor { display: none; }
:root[data-holiday="halloween"]:not(#_) .hw-decor {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hw-moon {
  position: absolute;
  left: 16px;
  top: calc(var(--bar-top, 0px) + 12px);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe8, #f6dc95 70%);
  box-shadow: 0 0 14px 4px rgba(247, 220, 140, .35), 0 0 40px 12px rgba(247, 220, 140, .12);
  animation: hw-moon 6s ease-in-out infinite alternate;
}
/* Луна медленно разгорается и притухает — ореол отдельным слоем, чтобы
   анимировалась только прозрачность. */
.hw-moon::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 220, 140, .3), transparent);
  animation: hw-glow 6s ease-in-out infinite alternate;
}
@keyframes hw-glow { from { opacity: .3; } to { opacity: 1; } }
@keyframes hw-moon { to { translate: 0 1px; } }
/* Тень на луне — кратеры. */
.hw-moon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 40%, rgba(180, 150, 90, .35) 0 3px, transparent 4px),
    radial-gradient(circle at 40% 68%, rgba(180, 150, 90, .3) 0 2px, transparent 3px);
}
/* В классическом дизайне по краям шапки кнопки — луну и паутину туда не вешаем. */
:root:not([data-design="new"]) :is(.hw-moon, .hw-web) { display: none; }
.hw-web {
  position: absolute;
  right: 0; top: var(--bar-top, 0px);
  /* Вся паутина помещается в строку шапки и не обрезается .hw-decor. */
  width: 52px; height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23d9c8ee' stroke-opacity='.5' stroke-width='1.4'%3E%3Cpath d='M160 0L0 40M160 0L40 120M160 0L120 160M160 0L0 95M160 0L70 160'/%3E%3Cpath d='M132 7Q136 20 139 22Q146 26 152 30'/%3E%3Cpath d='M102 15Q110 38 117 43Q130 52 145 59'/%3E%3Cpath d='M70 23Q82 55 94 66Q114 82 138 89'/%3E%3Cpath d='M36 31Q54 72 71 88Q98 110 130 119'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .55;
}
/* Маршруты задаёт bats.js (Web Animations, transform): каждый пролёт —
   слева или справа, волной, нырком, с петлёй или разворотом. Пока мышь
   ждёт вылета, она за левым краем. Крылья машут у ::before — масштаб
   самого элемента сжал бы и его сдвиг. Мелкие мыши — дальние: тусклее
   и чуть размыты, крупные — ближе и ярче. */
.hw-bat {
  position: absolute;
  left: 0;
  top: calc(var(--bar-top, 0px) + var(--y, 10px));
  width: var(--w, 26px);
  aspect-ratio: 2;
  transform: translateX(-60px);
  opacity: var(--o, .8);
  filter: var(--blur, none);
  will-change: transform;
}
.hw-bat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23b9a2d6' d='M32 9c-2 0-3 2-3 4l-2-3c0 2 0 4 1 5-4-1-7-5-9-10-3 4-8 6-14 5 4 3 6 7 6 11 4-2 8-1 11 2 1-3 4-5 7-5l3 3 3-3c3 0 6 2 7 5 3-3 7-4 11-2 0-4 2-8 6-11-6 1-11-1-14-5-2 5-5 9-9 10 1-1 1-3 1-5l-2 3c0-2-1-4-3-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hw-flap var(--f, .35s) ease-in-out infinite alternate;
}
.hw-bat:nth-child(3) { --y: 6px; --w: 26px; }
.hw-bat:nth-child(4) { --y: 22px; --w: 16px; --o: .5; --blur: blur(.4px); --f: .28s; }
.hw-bat:nth-child(5) { --y: 14px; --w: 21px; --o: .68; --f: .31s; }
/* 31 октября мышей шесть. */
.hw-bat:nth-child(6) { --y: 26px; --w: 14px; --o: .45; --blur: blur(.5px); --f: .26s; }
.hw-bat:nth-child(7) { --y: 2px; --w: 19px; --o: .62; --f: .3s; }
.hw-bat:nth-child(8) { --y: 18px; --w: 29px; --o: .9; --f: .4s; }
@keyframes hw-flap { to { scale: 1 .6; } }
/* Без анимаций мыши просто висят у шапки и не машут. */
.no-motion .hw-bat { transform: translateX(var(--x, 30vw)); }
.no-motion .hw-bat::before { animation: none; }
.no-motion .hw-bat:nth-child(3) { --x: 30vw; }
.no-motion .hw-bat:nth-child(4) { --x: 64vw; }
.no-motion .hw-bat:nth-child(5) { --x: 46vw; }
.no-motion .hw-bat:nth-child(n+6) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hw-bat { transform: translateX(var(--x, 30vw)); }
  .hw-bat::before { animation: none; }
  .hw-bat:nth-child(4) { --x: 64vw; }
  .hw-bat:nth-child(5) { --x: 46vw; }
  .hw-bat:nth-child(n+6) { display: none; }
}


/* ─────────────────── Паук, туман, большая мышь ─────────────────── */

/* Паучок спускается на паутинке из угла с паутиной и поднимается обратно —
   только в пределах строки шапки: ниже стрелки дня и вкладки «Почты».
   Нить тянется масштабом, паук едет сдвигом: если масштабировать всё
   вместе, паук сплющивается. */
.hw-spider { display: none; }
:root[data-holiday="halloween"][data-design="new"]:not(#_) .hw-spider {
  --len: calc(var(--bar-top, 0px) + 30px);
  display: block;
  position: absolute;
  right: 26px;
  top: 0;
  width: 2px;
  height: var(--len);
}
:root[data-holiday="halloween"][data-design="new"]:not(#_) .hw-spider::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(217, 200, 238, .45), rgba(217, 200, 238, .25));
  transform-origin: top center;
  animation: hw-dangle 9s ease-in-out infinite;
}
:root[data-holiday="halloween"][data-design="new"]:not(#_) .hw-spider::after {
  content: '';
  position: absolute;
  left: -10px;
  top: -6px;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9c8ee' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='9' r='2.4' fill='%23110a18'/%3E%3Cellipse cx='12' cy='14.4' rx='3.4' ry='3.8' fill='%23110a18'/%3E%3Cpath d='M9 12.6 5.6 10.4 3.5 12M8.7 14.6H5l-2 2.2M9.2 16.6 6.6 19.2v2M15 12.6l3.4-2.2 2.1 1.6M15.3 14.6H19l2 2.2M14.8 16.6l2.6 2.6v2'/%3E%3Ccircle cx='11.2' cy='8.6' r='.5' fill='%23ff8a1f' stroke='none'/%3E%3Ccircle cx='12.8' cy='8.6' r='.5' fill='%23ff8a1f' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 25%;
  translate: 0 var(--len);
  animation: hw-drop 9s ease-in-out infinite, hw-wiggle 1.6s ease-in-out infinite alternate;
}
@keyframes hw-dangle {
  0%, 100% { scale: 1 .5; }
  45%, 60% { scale: 1 1; }
}
@keyframes hw-drop {
  0%, 100% { translate: 0 calc(var(--len) * .5); }
  45%, 60% { translate: 0 var(--len); }
}
@keyframes hw-wiggle { from { rotate: -8deg; } to { rotate: 8deg; } }

/* Туман стелется над панелью вкладок. */
.hw-fog { display: none; }
:root[data-holiday="halloween"]:not(#_) .hw-fog {
  display: block;
  position: fixed;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: calc(var(--nav-h, 74px) + 70px);
  z-index: 38;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 100%, rgba(190, 170, 220, .14), transparent 70%),
    radial-gradient(35% 55% at 55% 100%, rgba(190, 170, 220, .11), transparent 70%),
    radial-gradient(45% 65% at 85% 100%, rgba(190, 170, 220, .13), transparent 70%);
  animation: hw-fog 24s ease-in-out infinite alternate;
}
@keyframes hw-fog { to { translate: 18% 0; } }

/* Большая мышь с горящими глазами пролетает через экран — каждый раз
   своим маршрутом (bats.js, swoopOnce). */
.hw-swoop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 120px;
  aspect-ratio: 2;
  pointer-events: none;
  transform: translateX(-200px);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .5));
}
.hw-swoop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23060309' d='M32 9c-2 0-3 2-3 4l-2-3c0 2 0 4 1 5-4-1-7-5-9-10-3 4-8 6-14 5 4 3 6 7 6 11 4-2 8-1 11 2 1-3 4-5 7-5l3 3 3-3c3 0 6 2 7 5 3-3 7-4 11-2 0-4 2-8 6-11-6 1-11-1-14-5-2 5-5 9-9 10 1-1 1-3 1-5l-2 3c0-2-1-4-3-4z'/%3E%3Ccircle cx='30.6' cy='13.4' r='.7' fill='%23ffb347'/%3E%3Ccircle cx='33.4' cy='13.4' r='.7' fill='%23ffb347'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hw-flap .18s ease-in-out infinite alternate;
}

/* Звёзды на небе мерцают — по одной, вразнобой. Слой за всем экраном
   (z-index -1 у корня), анимируется только прозрачность. */
.hw-stars { display: none; }
:root[data-holiday="halloween"]:not(#_) .hw-stars {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hw-stars span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6dc;
  box-shadow: 0 0 6px 1px rgba(255, 240, 200, .6);
  opacity: .15;
  animation: hw-twinkle var(--t, 5s) ease-in-out var(--d, 0s) infinite;
}
.hw-stars span:nth-child(1) { --x: 12%; --y: 22%; --t: 4.6s; }
.hw-stars span:nth-child(2) { --x: 78%; --y: 30%; --t: 6.2s; --d: -2s; }
.hw-stars span:nth-child(3) { --x: 44%; --y: 47%; --t: 5.4s; --d: -4s; }
.hw-stars span:nth-child(4) { --x: 90%; --y: 58%; --t: 7s; --d: -1s; }
.hw-stars span:nth-child(5) { --x: 25%; --y: 68%; --t: 5.8s; --d: -3s; }
.hw-stars span:nth-child(6) { --x: 62%; --y: 80%; --t: 4.2s; --d: -2.6s; }
.hw-stars span:nth-child(7) { --x: 6%; --y: 88%; --t: 6.6s; --d: -5s; }
@keyframes hw-twinkle {
  0%, 70%, 100% { opacity: .15; }
  80% { opacity: .9; }
}

/* Падающая звезда: раз в 17 с чиркает по небу из правого верха и гаснет
   (большую часть цикла её не видно). */
:root[data-holiday="halloween"]:not(#_) .hw-stars::after {
  content: '';
  position: absolute;
  right: 12%;
  top: 14%;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff6dc, rgba(255, 240, 200, 0));
  rotate: -28deg;
  transform-origin: left center;
  opacity: 0;
  animation: hw-meteor 17s ease-out 4s infinite;
}
@keyframes hw-meteor {
  0%, 88% { opacity: 0; translate: 0 0; scale: .3 1; }
  90% { opacity: 1; }
  96% { opacity: 0; translate: -46vw 26vh; scale: 1 1; }
  100% { opacity: 0; translate: -46vw 26vh; }
}

/* В тумане над вкладками изредка моргают чьи-то глаза. */
:root[data-holiday="halloween"]:not(#_) .hw-fog::before {
  content: '';
  position: absolute;
  left: 45%;
  top: 34px;
  width: 16px;
  height: 4px;
  background:
    radial-gradient(circle at 2px 2px, #ffb347 1.6px, transparent 2.4px),
    radial-gradient(circle at 14px 2px, #ffb347 1.6px, transparent 2.4px);
  filter: drop-shadow(0 0 4px #ff8a1f);
  opacity: 0;
  animation: hw-eyes 23s ease-in-out 9s infinite;
}
@keyframes hw-eyes {
  0%, 80%, 100% { opacity: 0; scale: 1 1; }
  83%, 88%, 92% { opacity: .85; scale: 1 1; }
  85.5%, 90% { opacity: .85; scale: 1 .1; }
}

/* Без анимаций паук висит, туман стоит, луна и звёзды не мерцают.
   Псевдоэлементы — отдельно: внутри :is() браузер их молча отбрасывает. */
.no-motion :is(.hw-fog, .hw-moon, .hw-stars span),
.no-motion :is(.hw-spider, .hw-moon, .hw-fog)::before,
.no-motion .hw-stars::after,
.no-motion .hw-spider::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.hw-fog, .hw-moon, .hw-stars span),
  :is(.hw-spider, .hw-moon, .hw-fog)::before,
  :is(.hw-spider, .hw-stars)::after { animation: none !important; }
}

/* ──────────────────────── Шапка и меню ──────────────────────── */

:root[data-holiday="halloween"]:not(#_) .topbar-title::after,
:root[data-holiday="halloween"]:not(#_) .topbar-title::before {
  content: '🎃';
  flex: none;
  margin-left: 4px;
  font-size: .9em;
}
/* Невидимая тыква слева — противовес: по центру шапки само имя, а не имя с тыквой. */
:root[data-holiday="halloween"]:not(#_) .topbar-title::before { visibility: hidden; margin: 0 4px 0 0; }

/* Классический дизайн: цветная шапка — тыквенный градиент в ночь,
   у экранов поверх (урок, письмо) — такая же. */
:root[data-holiday="halloween"]:not([data-design="new"]):not(#_) :is(.app-header, .screen-head) {
  background: linear-gradient(180deg, var(--head), color-mix(in srgb, var(--head) 45%, #120d18));
}

/* Панель вкладок — тёмное стекло с тыквенным отсветом. */
:root[data-holiday="halloween"]:not(#_) .bottom-nav {
  box-shadow: var(--lift-2), 0 0 24px color-mix(in srgb, var(--head) 16%, transparent), inset 0 1px 0 var(--glass-edge);
}
:root[data-holiday="halloween"]:not(#_) .nav-item.active { color: var(--primary); }

/* ─────────────────────────── Карточки ─────────────────────────── */

:root[data-holiday="halloween"]:not(#_) .card,
:root[data-holiday="halloween"]:not(#_) .lesson-card {
  box-shadow: var(--lift), 0 6px 18px rgba(0, 0, 0, .28);
}
/* Номер урока — светится, как свечка в тыкве. */
:root[data-holiday="halloween"]:not(#_) .lc-num {
  color: color-mix(in srgb, var(--head) 60%, #fff);
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--head) 34%, transparent), color-mix(in srgb, var(--head) 10%, transparent));
  text-shadow: 0 0 8px color-mix(in srgb, var(--head) 60%, transparent);
}

/* Оценки светятся каждая своим цветом, как огоньки в темноте. */
:root[data-holiday="halloween"]:not(#_) .mark:is(.m2, .m3, .m4, .m5) {
  box-shadow: 0 0 10px color-mix(in srgb, var(--glow) 40%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .mark.m5 { --glow: var(--g5); }
:root[data-holiday="halloween"]:not(#_) .mark.m4 { --glow: var(--g4); }
:root[data-holiday="halloween"]:not(#_) .mark.m3 { --glow: var(--g3); }
:root[data-holiday="halloween"]:not(#_) .mark.m2 { --glow: var(--g2); }

/* Переключатель в меню — с фиолетовой подсветкой. */
:root[data-holiday="halloween"]:not(#_) .halloween-row {
  background: linear-gradient(90deg, color-mix(in srgb, var(--head) 14%, transparent), rgba(142, 91, 214, .12));
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Кнопка помощника — шляпа ведьмы (navIcon) и тыквенное свечение; шляпа
   линейная, заливка от искорок ей не нужна. */
:root[data-holiday="halloween"][data-design="new"]:not(#_) .ai-fab .icon { fill: none; stroke-width: 1.9; }
:root[data-holiday="halloween"]:not(#_) .fab {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 22px color-mix(in srgb, var(--head) 45%, transparent);
}

/* Заставка загрузки — тоже ночная. */
:root[data-holiday="halloween"]:not(#_) .boot-spinner { border-top-color: var(--head); }

/* Экран PIN-кода (он раньше профиля — тема уже по прошлому запуску):
   клавиши — ночное стекло, акцент читается на тёмном. */
:root[data-holiday="halloween"]:not(#_) .app-lock {
  --accent: var(--primary);
  --key: rgba(255, 255, 255, .07);
  --key-press: color-mix(in srgb, var(--head) 30%, transparent);
}

/* Пустые экраны («уроков нет», «заданий нет») — с привидением. */
:root[data-holiday="halloween"]:not(#_) .empty::before {
  content: '👻';
  display: block;
  font-size: 34px;
  margin-bottom: 8px;
  animation: hw-float 3s ease-in-out infinite alternate;
}
@keyframes hw-float { to { translate: 0 -6px; } }
.no-motion .empty::before { animation: none !important; }

/* Выделение текста, курсор, флажки — в цвет акцента. */
:root[data-holiday="halloween"]:not(#_) { accent-color: var(--primary); caret-color: var(--primary); }
:root[data-holiday="halloween"]:not(#_) ::selection { background: color-mix(in srgb, var(--head) 40%, transparent); }

/* Подсказка в меню вместо выбора темы. */
:root[data-holiday="halloween"]:not(#_) .halloween-note { margin: 4px 2px 6px; }

/* ────────────────────────── Мелочи ────────────────────────── */

/* Заголовки разделов меню — тёплым светом акцента. */
:root[data-holiday="halloween"]:not(#_) .drawer-heading {
  color: var(--primary);
  text-shadow: 0 0 10px color-mix(in srgb, var(--head) 45%, transparent);
  letter-spacing: .06em;
}

/* Плитки «Возможностей» — тёмное стекло, иконка светится. */
:root[data-holiday="halloween"]:not(#_) .tool-tile {
  background: linear-gradient(160deg, var(--card-2), color-mix(in srgb, var(--head) 8%, var(--card)));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 1px color-mix(in srgb, var(--head) 10%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .tool-ico {
  color: var(--primary);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--head) 55%, transparent));
}

/* Активная вкладка — иконка горит и покачивается при выборе. */
:root[data-holiday="halloween"]:not(#_) .nav-item.active .ico svg {
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--head) 70%, transparent));
  animation: hw-boo .5s var(--ease, ease) 1;
}
@keyframes hw-boo {
  0% { rotate: 0deg; scale: 1; }
  30% { rotate: -12deg; scale: 1.18; }
  60% { rotate: 9deg; }
  100% { rotate: 0deg; scale: 1; }
}
:root[data-holiday="halloween"]:not(#_) .nav-glider {
  box-shadow: 0 0 18px color-mix(in srgb, var(--head) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--head) 18%, transparent);
}

/* Номер урока мерцает, как свеча. Мерцает ореол за цифрой — прозрачностью,
   которую телефон рисует сам: анимация text-shadow перерисовывала номера
   каждый кадр, и на 120 Гц прокрутка проседала. */
:root[data-holiday="halloween"]:not(#_) .lc-num { position: relative; isolation: isolate; }
:root[data-holiday="halloween"]:not(#_) .lc-num::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--head) 45%, transparent), transparent 70%);
  pointer-events: none;
  will-change: opacity;
  animation: hw-candle 3.4s ease-in-out infinite;
}
:root[data-holiday="halloween"]:not(#_) .lc-num:empty::after { content: none; }
:root[data-holiday="halloween"]:not(#_) .lesson-card:nth-child(2n) .lc-num::after { animation-delay: -1.3s; }
:root[data-holiday="halloween"]:not(#_) .lesson-card:nth-child(3n) .lc-num::after { animation-delay: -2.1s; }
@keyframes hw-candle {
  0%, 100% { opacity: .65; }
  47% { opacity: .3; }
  52% { opacity: 1; }
}

/* Сегодня в полосе недели — маленькая тыква. */
:root[data-holiday="halloween"]:not(#_) .week-day.today { position: relative; }
:root[data-holiday="halloween"]:not(#_) .week-day.today::after {
  content: '🎃';
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 10px;
  line-height: 1;
}

/* Скелетоны загрузки — переливаются туманом. */
:root[data-holiday="halloween"]:not(#_) .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(190, 160, 230, .14), color-mix(in srgb, var(--head) 14%, transparent), transparent);
}

/* Полоса загрузки под шапкой — как обычная бегущая полоса, только впереди
   летит тыква, а за ней тянется огненный хвост с искрами: уходит за правый
   край и снова вылетает слева. Тыква (::before) и хвост (::after) едут
   одинаковыми ключевыми кадрами left, поэтому хвост не отстаёт; конец пути —
   когда за край ушёл и хвост. Тыква — SVG, а не эмодзи: у эмодзи на iPhone
   своя высота строки, и она съезжала с полосы. По нижнему краю шапки при
   этом тлеет дорожка. Тыква висит наполовину ниже шапки: overflow у шапки
   режет только по X. */
:root[data-holiday="halloween"]:not(#_) .app-header {
  transition: background-color .3s, box-shadow .3s;
}
:root[data-holiday="halloween"].syncing:not(#_) .app-header {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--head) 30%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--head) 55%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .app-header::before {
  content: '';
  position: absolute;
  left: -22px;
  bottom: -11px;
  z-index: 1;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 9l.6-5.2c.2-1.4 2.6-1.6 2.9-.2L17.4 9z' fill='%23657d2c'/%3E%3Cellipse cx='10.5' cy='18' rx='8' ry='9.6' fill='%23d9620f'/%3E%3Cellipse cx='21.5' cy='18' rx='8' ry='9.6' fill='%23d9620f'/%3E%3Cellipse cx='16' cy='18' rx='7.2' ry='10.2' fill='%23ff8a1f'/%3E%3Cpath d='M8.6 16.2l2.9-3.6 2.2 4.2zM23.4 16.2l-2.9-3.6-2.2 4.2zM16 17.2l1.3 2.2h-2.6z' fill='%23ffe08a'/%3E%3Cpath d='M8.8 20.6q7.2 6.6 14.4 0l-2.2.9-1.3-1-1.6 1.7-2.1-1.6-2.1 1.6-1.6-1.7-1.3 1z' fill='%23ffe08a'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--head));
  opacity: 0;
  scale: .4;
  transition: opacity .3s, scale .3s var(--ease, ease);
  pointer-events: none;
}
:root[data-holiday="halloween"]:not(#_) .app-header::after {
  left: -45%;
  right: auto;
  bottom: -7px;
  width: 45%;
  height: 14px;
  background:
    radial-gradient(1.5px 1.5px at 30% 14%, rgba(255, 210, 122, .7), transparent),
    radial-gradient(1.5px 1.5px at 52% 88%, #ffb347, transparent),
    radial-gradient(2px 2px at 70% 18%, #ffd27a, transparent),
    radial-gradient(1.5px 1.5px at 84% 82%, #ff9a3c, transparent),
    radial-gradient(2px 2px at 93% 24%, #ffe2a8, transparent),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--head) 55%, transparent) 35%, var(--head) 75%, color-mix(in srgb, var(--head) 55%, #ffe2a8)) 0 50% / 100% 4px no-repeat;
  filter: drop-shadow(0 0 5px var(--head));
}
:root[data-holiday="halloween"].syncing:not(#_) .app-header::before {
  opacity: 1;
  scale: 1;
  animation: hw-pk-run 1.8s cubic-bezier(.45, .05, .55, .95) infinite, hw-pk-bob .3s ease-in-out infinite alternate;
}
:root[data-holiday="halloween"].syncing:not(#_) .app-header::after {
  opacity: 1;
  animation: hw-tr-run 1.8s cubic-bezier(.45, .05, .55, .95) infinite;
}
/* Центр тыквы — от -11px (ещё за левым краем) до 145%: там за правый край
   ушёл и хвост длиной 45%. */
@keyframes hw-pk-run {
  from { left: -22px; }
  to { left: 145%; }
}
@keyframes hw-tr-run {
  from { left: calc(-45% - 11px); }
  to { left: calc(100% + 11px); }
}
/* Наклон по ходу полёта и лёгкое подпрыгивание. */
@keyframes hw-pk-bob {
  from { translate: 0 1px; rotate: 6deg; }
  to { translate: 0 -2px; rotate: 14deg; }
}
/* Без анимаций тыква просто горит посередине, хвоста нет. */
:root[data-holiday="halloween"].no-motion:not(#_) .app-header::before { left: calc(50% - 11px); animation: none !important; }
:root[data-holiday="halloween"].no-motion:not(#_) .app-header::after { animation: none !important; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  :root[data-holiday="halloween"]:not(#_) .app-header::before { left: calc(50% - 11px); animation: none !important; }
  :root[data-holiday="halloween"]:not(#_) .app-header::after { animation: none !important; opacity: 0; }
}

/* Кружок «потяните, чтобы обновить» — тыквенный. */
:root[data-holiday="halloween"]:not(#_) .pull-ring {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--head) 35%, transparent), 0 0 18px color-mix(in srgb, var(--head) 30%, transparent);
}

/* Шторки снизу: ручка — в цвет акцента, в углу паутинка. */
:root[data-holiday="halloween"]:not(#_) .sheet-grip { background: var(--primary); opacity: .8; }
:root[data-holiday="halloween"]:not(#_) .sheet { position: relative; }
:root[data-holiday="halloween"]:not(#_) .sheet::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23d9c8ee' stroke-opacity='.5' stroke-width='1.4'%3E%3Cpath d='M160 0L0 40M160 0L40 120M160 0L120 160M160 0L0 95M160 0L70 160'/%3E%3Cpath d='M132 7Q136 20 139 22Q146 26 152 30'/%3E%3Cpath d='M102 15Q110 38 117 43Q130 52 145 59'/%3E%3Cpath d='M70 23Q82 55 94 66Q114 82 138 89'/%3E%3Cpath d='M36 31Q54 72 71 88Q98 110 130 119'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .35;
  border-top-right-radius: inherit;
}

/* Полосы прокрутки — ночные. */
:root[data-holiday="halloween"]:not(#_) { scrollbar-color: color-mix(in srgb, var(--head) 50%, #3a2d4a) transparent; }

/* Экран PIN — то же ночное небо, над карточкой парит привидение. */
:root[data-holiday="halloween"]:not(#_) .app-lock { background: transparent; }
:root[data-holiday="halloween"]:not(#_) .app-lock-card { position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 0 1px color-mix(in srgb, var(--head) 14%, transparent); }
:root[data-holiday="halloween"]:not(#_) .app-lock-card::before {
  content: '👻';
  position: absolute;
  left: 50%;
  top: -34px;
  margin-left: -20px;
  font-size: 40px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
  animation: hw-float 3s ease-in-out infinite alternate;
}

/* Без анимаций — ничего не качается и не мерцает. */
.no-motion :is(.lc-num, .nav-item .ico svg),
.no-motion .app-lock-card::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-holiday="halloween"]:not(#_) :is(.lc-num, .nav-item .ico svg),
  :root[data-holiday="halloween"]:not(#_) :is(.empty, .app-lock-card)::before { animation: none; }
}

/* ─────────────────────── Таймер урока (timer.js) ─────────────────────── */

/* Урок — зелье с привидением, перемена — тыквенная: --lt-glow красит всё
   в карточке. Вместо точки — привидение (на перемене — тыква), полоса
   горит, и по ней едет то же привидение, в углу паутинка. Когда время
   вышло, вместо галочки всплывает привидение («Урок окончен») или
   выскакивает тыква («Урок начался»), карточка вспыхивает, и из неё
   разлетаются летучие мыши. */
.lt-bats { display: none; }
:root[data-holiday="halloween"]:not(#_) .lt-card {
  --lt-glow: #8fe35a;
  --lt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 28V14a9 9 0 0118 0v14l-3-2.6-3 2.6-3-2.6-3 2.6-3-2.6z' fill='%23f3ecf8'/%3E%3Cellipse cx='12.6' cy='14' rx='1.7' ry='2.3' fill='%23120d18'/%3E%3Cellipse cx='19.4' cy='14' rx='1.7' ry='2.3' fill='%23120d18'/%3E%3Cellipse cx='16' cy='20' rx='1.6' ry='2' fill='%23120d18'/%3E%3C/svg%3E");
  background:
    radial-gradient(90% 130% at 100% 115%, color-mix(in srgb, var(--lt-glow) 24%, transparent), transparent 60%),
    linear-gradient(135deg, #2b1e3a, var(--card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lt-glow) 32%, transparent), 0 0 24px -8px color-mix(in srgb, var(--lt-glow) 55%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .lt-card.break {
  --lt-glow: var(--head);
  --lt-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M15 9l.6-5.2c.2-1.4 2.6-1.6 2.9-.2L17.4 9z' fill='%23657d2c'/%3E%3Cellipse cx='10.5' cy='18' rx='8' ry='9.6' fill='%23d9620f'/%3E%3Cellipse cx='21.5' cy='18' rx='8' ry='9.6' fill='%23d9620f'/%3E%3Cellipse cx='16' cy='18' rx='7.2' ry='10.2' fill='%23ff8a1f'/%3E%3Cpath d='M8.6 16.2l2.9-3.6 2.2 4.2zM23.4 16.2l-2.9-3.6-2.2 4.2zM16 17.2l1.3 2.2h-2.6z' fill='%23ffe08a'/%3E%3Cpath d='M8.8 20.6q7.2 6.6 14.4 0l-2.2.9-1.3-1-1.6 1.7-2.1-1.6-2.1 1.6-1.6-1.7-1.3 1z' fill='%23ffe08a'/%3E%3C/svg%3E");
}
:root[data-holiday="halloween"]:not(#_) .lt-card::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 34px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%23d9c8ee' stroke-opacity='.5' stroke-width='1.4'%3E%3Cpath d='M160 0L0 40M160 0L40 120M160 0L120 160M160 0L0 95M160 0L70 160'/%3E%3Cpath d='M132 7Q136 20 139 22Q146 26 152 30'/%3E%3Cpath d='M102 15Q110 38 117 43Q130 52 145 59'/%3E%3Cpath d='M70 23Q82 55 94 66Q114 82 138 89'/%3E%3Cpath d='M36 31Q54 72 71 88Q98 110 130 119'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .45;
}
:root[data-holiday="halloween"]:not(#_) .lt-dot {
  width: 15px;
  height: 15px;
  margin: -3px -2px -3px -3px;
  border-radius: 0;
  background: var(--lt-icon) center / contain no-repeat;
  filter: drop-shadow(0 0 4px var(--lt-glow));
  animation: hw-lt-sway 2.4s ease-in-out infinite alternate;
}
@keyframes hw-lt-sway {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg) translateY(-1px); }
}
:root[data-holiday="halloween"]:not(#_) .lt-clock {
  position: relative;
  isolation: isolate;
  color: color-mix(in srgb, var(--lt-glow) 78%, #fff);
  text-shadow: 0 0 8px color-mix(in srgb, var(--lt-glow) 45%, transparent);
}
/* Пламя дрожит ореолом за цифрами, как свеча у номера урока. */
:root[data-holiday="halloween"]:not(#_) .lt-clock::after {
  content: '';
  position: absolute;
  inset: -6px -10px;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lt-glow) 30%, transparent), transparent);
  pointer-events: none;
  will-change: opacity;
  animation: hw-lt-flame 3.2s ease-in-out infinite;
}
:root[data-holiday="halloween"]:not(#_) .lt-card.urgent .lt-clock::after { content: none; }
@keyframes hw-lt-flame {
  0%, 100% { opacity: .65; }
  46% { opacity: .3; }
  52% { opacity: 1; }
}
/* Последние секунды — кроваво-красные, значок трясётся от страха. */
:root[data-holiday="halloween"]:not(#_) .lt-card.urgent .lt-clock {
  color: #ff5e62;
  text-shadow: 0 0 12px rgba(255, 60, 70, .7);
  animation: lt-throb 1s ease-in-out infinite;
}
:root[data-holiday="halloween"]:not(#_) .lt-card.urgent:not(.break) .lt-clock {
  color: #7dff8a;
  text-shadow: 0 0 12px rgba(80, 255, 110, .6);
}
:root[data-holiday="halloween"]:not(#_) .lt-card.urgent .lt-dot { animation: hw-lt-shake .25s linear infinite; }
@keyframes hw-lt-shake {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
/* Полоса — горящая дорожка, на её конце едет привидение (на перемене — тыква). */
:root[data-holiday="halloween"]:not(#_) .lt-bar {
  margin: 12px 8px 0 0;
  background: color-mix(in srgb, var(--lt-glow) 10%, #241b2f);
  overflow: visible;
}
:root[data-holiday="halloween"]:not(#_) .lt-bar span {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--lt-glow) 35%, transparent), var(--lt-glow));
  box-shadow: 0 0 8px color-mix(in srgb, var(--lt-glow) 60%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .lt-bar span::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--lt-icon) center / contain no-repeat;
  filter: drop-shadow(0 0 5px var(--lt-glow));
  animation: hw-lt-ride .45s ease-in-out infinite alternate;
}
@keyframes hw-lt-ride {
  from { transform: translateY(1px) rotate(-6deg); }
  to { transform: translateY(-2px) rotate(6deg); }
}
:root[data-holiday="halloween"]:not(#_) .lt-next { margin-top: 9px; }

/* Время вышло: вспышка, тыква выскакивает (привидение всплывает), мыши. */
:root[data-holiday="halloween"]:not(#_) .lt-done {
  isolation: isolate;
  color: color-mix(in srgb, var(--lt-glow) 30%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--lt-glow) 70%, transparent);
}
:root[data-holiday="halloween"]:not(#_) .lt-done::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 50% 50%, color-mix(in srgb, var(--lt-glow) 45%, transparent), transparent 70%);
  opacity: 0;
}
:root[data-holiday="halloween"]:not(#_) .lt-card.done .lt-done::before { animation: hw-lt-flash 1.4s ease-out forwards; }
@keyframes hw-lt-flash {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: .35; }
}
:root[data-holiday="halloween"]:not(#_) .lt-check {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--lt-icon) center / contain no-repeat;
  font-size: 0;
  filter: drop-shadow(0 0 10px var(--lt-glow));
}
:root[data-holiday="halloween"]:not(#_) .lt-card.done .lt-check {
  animation: hw-lt-rise .9s var(--ease) .05s forwards, hw-float 1.4s ease-in-out .95s infinite alternate;
}
:root[data-holiday="halloween"]:not(#_) .lt-card.break.done .lt-check {
  animation: hw-lt-pop .7s var(--ease) .05s forwards, hw-lt-glow 1.6s ease-in-out .8s infinite alternate;
}
@keyframes hw-lt-pop {
  0% { transform: scale(0) rotate(-200deg); }
  60% { transform: scale(1.3) rotate(12deg); }
  80% { transform: scale(.92) rotate(-4deg); }
  100% { transform: scale(1); }
}
@keyframes hw-lt-rise {
  0% { transform: translateY(40px) scale(.6); opacity: 0; }
  70% { transform: translateY(-6px) scale(1.08); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes hw-lt-glow {
  from { filter: drop-shadow(0 0 6px var(--lt-glow)); }
  to { filter: drop-shadow(0 0 16px var(--lt-glow)); }
}
:root[data-holiday="halloween"]:not(#_) .lt-bats {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lt-bats i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 16px;
  margin: -8px 0 0 -16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23b9a2d6' d='M32 9c-2 0-3 2-3 4l-2-3c0 2 0 4 1 5-4-1-7-5-9-10-3 4-8 6-14 5 4 3 6 7 6 11 4-2 8-1 11 2 1-3 4-5 7-5l3 3 3-3c3 0 6 2 7 5 3-3 7-4 11-2 0-4 2-8 6-11-6 1-11-1-14-5-2 5-5 9-9 10 1-1 1-3 1-5l-2 3c0-2-1-4-3-4z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
}
.lt-bats i:nth-child(1) { --dx: -150px; --dy: -50px; --dl: .15s; }
.lt-bats i:nth-child(2) { --dx: 160px; --dy: -42px; --dl: .25s; }
.lt-bats i:nth-child(3) { --dx: -110px; --dy: 46px; --dl: .4s; }
.lt-bats i:nth-child(4) { --dx: 130px; --dy: 52px; --dl: .5s; }
:root[data-holiday="halloween"]:not(#_) .lt-card.done .lt-bats i {
  animation: hw-lt-bat 1.5s cubic-bezier(.3, .6, .4, 1) var(--dl) forwards, hw-lt-flap .14s linear var(--dl) 10 alternate;
}
@keyframes hw-lt-bat {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { translate: var(--dx) var(--dy); opacity: 0; }
}
@keyframes hw-lt-flap {
  from { scale: 1 1; }
  to { scale: .7 .5; }
}

/* Без анимаций: тыквы стоят, в конце — просто тыква или привидение без мышей.
   Бесконечные анимации выключаем явно, иначе они мерцали бы. */
.no-motion :is(.lt-dot, .lt-clock, .lt-check),
.no-motion :is(.lt-bar span, .lt-clock, .lc-num)::after { animation: none !important; }
.no-motion .lt-card.done .lt-check { transform: none; }
.no-motion .lt-bats { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-holiday="halloween"]:not(#_) :is(.lt-dot, .lt-clock, .lt-card.done .lt-check),
  :root[data-holiday="halloween"]:not(#_) .lt-bar span::after,
  :root[data-holiday="halloween"]:not(#_) .lt-clock::after,
  :root[data-holiday="halloween"]:not(#_) .lc-num::after { animation: none; }
  :root[data-holiday="halloween"]:not(#_) .lt-card.done .lt-check { transform: none; }
  :root[data-holiday="halloween"]:not(#_) .lt-bats { display: none; }
}