/* Плеер — день как плейлист. Пара — трек с обложкой, перемена — реклама,
   до пар — Intro, после — Outro, выходной — манул на отдыхе. При открытии виден
   только плеер; очередь пар — ниже, прокруткой. Обложки рисует сервер
   (cover.go), здесь — только то, как они стоят. */
:root {
  --bg: #0A0E22; --bg-hero: transparent; --surface: rgba(255,255,255,0.07); --surface-2: rgba(255,255,255,0.14); --line: rgba(255,255,255,0.09);
  --text: #F2F0FF; --text-2: #A7AACB; --text-3: #7E82A8;
  --accent: #8C75FF; --accent-ink: #ffffff; --accent-2: #FFC83D; --ok: #6fdc8c; --warn: #ff8f6a;
  --past: rgba(255,255,255,0.12); --busy: rgba(255,143,106,0.4);
  --hero-text: var(--text); --hero-text-2: var(--text-2);
  --nav-bg: #070A1A; --nav-line: rgba(255,255,255,0.07); --nav-on: #ffffff;
  --radius: 12px; --radius-lg: 18px; --font: 'Inter', system-ui, sans-serif; --font-display: 'Unbounded', 'Inter', sans-serif;
  --tint: #231A55; --play: #ffffff; --play-ink: #0A0E22; --ad: #FFC83D; --ad-ink: #3B2A00;
}
:root[data-theme="light"] {
  --bg: #F3F1FF; --surface: #ffffff; --surface-2: #E4DFFF; --line: #DDD8F5;
  --text: #0A0E22; --text-2: #4A4E70; --text-3: #6B6F92; --accent: #5B3FD1;
  --past: #d4daf0; --busy: #ffd7c9; --nav-bg: #ffffff; --nav-line: #DDD8F5; --nav-on: #5B3FD1;
  --tint: #DDD5FF; --play: #5B3FD1; --play-ink: #ffffff;
}
/* Фон экрана окрашивается под обложку, как в музыкальных плеерах. */
.page-schedule .screen { background: linear-gradient(180deg, var(--tint) 0, var(--bg) 560px); }
body:has(.hero[data-state="now"]) { --tint: #3A2A9A; }
body:has(.hero[data-state="before"]) { --tint: #3A1F63; }
body:has(.hero[data-state="between"]) { --tint: #1E5BD8; }
body:has(.hero[data-state="after"]) { --tint: #22195A; }
body:has(.hero[data-state="none"]) { --tint: #0F5A48; }
:root[data-theme="light"] body:has(.hero[data-state="now"]) { --tint: #D6CCFF; }
:root[data-theme="light"] body:has(.hero[data-state="before"]) { --tint: #FFE1D2; }
:root[data-theme="light"] body:has(.hero[data-state="between"]) { --tint: #CFE2FF; }
:root[data-theme="light"] body:has(.hero[data-state="after"]) { --tint: #DDD5FF; }
:root[data-theme="light"] body:has(.hero[data-state="none"]) { --tint: #C8F3E2; }

/* ─── шапка: плейлист, неделя и дни ───────────────────────────────────── */
/* Дни листаются и кнопками плеера, и свайпом, но выбрать день недели
   напрямую и перелистнуть неделю нужно всё равно: без полосы дней
   попасть на пятницу из понедельника — четыре касания. */
.top-schedule { padding-bottom: 6px; gap: 8px; }
.top-schedule .top-row { align-items: center; }
.top-schedule .weeknav-btn, .top-schedule .weeknav-today { border-radius: 999px; }
.top-schedule .day { border-radius: 14px; }
.top-schedule .top-kicker { font-size: 10px; letter-spacing: 0.14em; margin-bottom: 2px; }
.top-schedule .top-title { font-size: 17px; letter-spacing: 0; }
.act { background: var(--surface); color: var(--text); }
.act.on { background: var(--play); color: var(--play-ink); }

/* ─── плеер ───────────────────────────────────────────────────────────── */
.hero { gap: 14px; padding-top: 10px; padding-bottom: 22px; }
.page-schedule .hero { min-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 72px); justify-content: center; }
.hero-date { justify-content: space-between; align-items: center; }
.hero-num, .hero-dow, .hero-month, .hero-year, .hero-week, .hero-mascot { display: none; }
.hero-date::before { content: 'Плейлист дня'; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
.hero[data-state="now"] .hero-date::before { content: 'Сейчас играет'; }
.hero[data-state="after"] .hero-date::before { content: 'Плейлист окончен'; }
.hero[data-state="between"] .hero-date::before { content: 'Реклама'; color: var(--ad-ink); background: var(--ad); padding: 3px 9px; border-radius: 6px; letter-spacing: 0.02em; text-transform: none; font-size: 12px; font-weight: 800; }
.hero-dateline { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.hero[data-state="between"] .hero-dateline { font-size: 0; }
.hero[data-state="between"] .hero-dateline::before { content: 'Спонсор вашей перемены'; font-size: 12px; font-weight: 400; color: var(--text-2); }

.hero-now { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "label" "lesson" "meta" "progress" "time" "skip" "controls"; row-gap: 4px; align-items: start; }
.hero-cover { grid-area: cover; display: block; justify-self: center; width: 100%; max-width: 360px; aspect-ratio: 1; margin-bottom: 18px; border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
:root[data-theme="light"] .hero-cover { box-shadow: 0 18px 40px rgba(40,20,120,0.22); }
.hero[data-state="now"] .hero-cover { animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .hero[data-state="now"] .hero-cover { animation: none; } }
/* Выходной: манул на мятной обложке. */
.hero[data-state="none"] .hero-cover { background: linear-gradient(160deg, #C8F3E2, #6FCFA9); }
/* Outro: манул сидит на крыше правого корпуса и смотрит на луну. Крыша
   на обложке — на высоте 214 из 300, отсюда отступ снизу. */
.hero-cover-outro { position: absolute; right: 1%; bottom: 27%; width: 30%; height: auto; }
.hero-cover-manul { position: absolute; left: 12%; bottom: 6%; width: 76%; height: 76%; object-fit: contain; }
.hero[data-state="none"] .hero-cover::before { content: 'Day off'; position: absolute; left: 7%; top: 7%; font-family: var(--font-display); font-weight: 700; font-size: 32px; color: #0A4A38; }

.hero-label { grid-area: label; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.hero-lesson { grid-area: lesson; font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.hero-meta { grid-area: meta; font-size: 14px; color: var(--text-2); }
.hero-room, .hero-timer, .hero-sentence, .hero-next, .hero-stats, .hero-mood, .hero-stops { display: none; }

.hero-progress { display: block; height: 4px; background: rgba(255,255,255,0.16); margin: 16px 0 6px; }
:root[data-theme="light"] .hero-progress { background: var(--surface-2); }
.hero-progress-bar { background: var(--play); }
.hero-progress-knob { width: 14px; height: 14px; background: var(--play); border: 0; }
.hero-progress-left { display: block; left: auto; right: 0; top: 12px; transform: none; font-size: 12px; color: var(--text-2); }
.hero:not([data-state="now"]) .hero-progress-knob, .hero:not([data-state="now"]) .hero-progress-left { display: none; }
.hero-time { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.hero-time .hero-to::before { content: none; }
.hero[data-state="now"] .hero-to { visibility: hidden; }

/* Кнопка «играть»: пара идёт — белая и «играет» (пауза, как в любом
   плеере); до пар, в выходной и на другом дне — серая, с треугольником. */
.hero-controls { display: flex; gap: 36px; margin-top: 18px; }
.ctl { width: 48px; height: 48px; color: var(--text); }
.ctl svg { width: 24px; height: 24px; }
.ctl-main { width: 76px; height: 76px; background: transparent; color: var(--text-3); border: 1.5px solid var(--surface-2); }
.ctl-main svg { width: 30px; height: 30px; }
.ctl-main .ico-pause { display: none; }
.ctl-main .ico-play { display: block; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transform: translateX(2px); }
.hero[data-state="now"] .ctl-main { background: var(--play); color: var(--play-ink); border: 0; box-shadow: 0 0 0 10px rgba(255,255,255,0.08), 0 12px 30px rgba(107,77,240,0.55); }
.hero[data-state="now"] .ctl-main .ico-pause { display: block; stroke-width: 4; stroke-linecap: round; }
.hero[data-state="now"] .ctl-main .ico-play { display: none; }
.hero[data-state="after"] .ctl-main { color: var(--text); border-color: var(--text-2); }

/* Перемена — реклама: жёлтая полоса, «пропустить» считает до пары. */
.hero[data-state="between"] .hero-label { font-size: 0; }
.hero[data-state="between"] .hero-label::before { content: 'После рекламы'; font-size: 13px; }
.hero[data-state="between"] .hero-progress-bar { background: var(--ad); }
.hero[data-state="between"] .hero-time, .hero[data-state="between"] .hero-controls { display: none; }
.hero[data-state="between"] .hero-skip { grid-area: skip; justify-self: end; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin-top: 14px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--surface-2); background: rgba(10,14,34,0.55); color: var(--text); font-size: 15px; font-weight: 500; }
:root[data-theme="light"] .hero-skip { background: #fff; }
.hero-skip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-skip::after { content: '›'; font-size: 22px; line-height: 1; margin-left: 4px; }

/* После пар — Outro: «на сегодня всё» вместо последней пары. */
.hero[data-state="after"] .hero-lesson { font-size: 0; }
.hero[data-state="after"] .hero-lesson::before { content: 'На сегодня всё'; font-size: 23px; }
.hero[data-state="after"] .hero-meta { display: none; }
.hero[data-state="after"] .hero-time { display: none; }
.hero[data-state="after"] .hero-progress-bar { background: var(--surface-2); }

/* Выходной. */
.hero[data-state="none"] .hero-progress, .hero[data-state="none"] .hero-time, .hero[data-state="none"] .hero-label { display: none; }
/* Пар нет — блок плеера раскрывается в колонку героя, чтобы между обложкой
   и кнопками встал текст «тишина в эфире». */
.hero[data-state="none"] .hero-now { display: contents; }
.hero[data-state="none"] .hero-cover { order: 1; margin-bottom: 4px; }
.hero[data-state="none"] .hero-empty { order: 2; }
.hero[data-state="none"] .hero-controls { order: 3; justify-content: center; }
.lessons:not(:has(.lesson))::before { content: none; }
.hero-empty { align-items: stretch; text-align: left; gap: 4px; }
.hero-empty-title { font-size: 0; }
.hero-empty-title::before { content: 'Тишина в эфире'; font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.hero-empty-sub { font-size: 14px; color: var(--text-2); }
.hero-empty-sub::after { content: ' · манул отдыхает — и тебе можно'; }
.hero-empty-next { margin-top: 14px; border-radius: 16px; background: var(--surface); }
.hero-empty-next-label { font-size: 0; }
.hero-empty-next-label::before { content: 'следующий плейлист'; font-size: 12px; }

/* ─── очередь: пары как треки ─────────────────────────────────────────── */
.lessons::before { content: 'Далее в плейлисте'; display: block; font-family: var(--font-display); font-size: 17px; font-weight: 600; padding: 4px 0 10px; }
.lessons-head { display: none; }
.lesson-list { gap: 4px; }
.lesson, .stack-summary { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "cover body room" "cover time status"; column-gap: 14px; row-gap: 2px; padding: 8px 10px; background: transparent; border-radius: 14px; }
.lesson.stack { padding: 0; background: transparent; box-shadow: none; }
.lesson-cover { grid-area: cover; display: block; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; }
.lesson-time { flex-direction: row; font-size: 12px; color: var(--text-3); }
.lesson-from, .lesson-to { font-size: 12px; font-weight: 500; color: var(--text-3); }
.lesson-to::before { content: '—'; margin: 0 3px; }
.lesson-discipline { font-size: 15px; font-weight: 600; }
.lesson-kind { font-size: 12px; }
.lesson-roomnum { font-size: 14px; }
.lesson-status { text-transform: none; letter-spacing: 0; font-size: 11px; }
/* В очереди статус нужен только у идущей пары; «следующая» видно по порядку. */
.lesson:not([data-status="now"]) .lesson-state { display: none; }
.lesson-changed { font-size: 0; margin: 0; }
.lesson-changed::before { content: 'кавер'; font-size: 11px; }
.lesson[data-status="now"], .lesson.stack[data-status="now"] .stack-summary { background: rgba(140,117,255,0.14); }
.lesson.stack[data-status="now"] { background: transparent; }
.lesson[data-status="now"] .lesson-state { color: var(--accent); }
.lesson[data-status="now"] .lesson-state::before { content: '▶ '; }
.lesson[data-status="past"] { opacity: 0.5; }
.lesson[data-status="past"] .lesson-discipline { text-decoration: line-through; }
.lesson-changed { color: var(--ad); }
.stack-badge { background: var(--play); color: var(--play-ink); }
.stack-list { padding-left: 76px; }
/* Окно между парами — длинный рекламный блок. */
.gap-link { border-color: var(--surface-2); border-radius: 14px; }
.gap-body b::before { content: 'Реклама · '; color: var(--ad); }
.now-card { background: var(--surface); }

/* ─── остальные экраны: библиотека, исполнители, эфир ───────────────────── */
.top-kicker { color: var(--text-3); }
.clock { background: transparent; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
:root[data-theme="light"] .clock { color: var(--text); }
.tab, .chip, .act, .weeknav-btn, .weeknav-today, .btn, .search button, .search input, .pick, .room, .setting-group, .segment, .segment-item span, .skin-card { border-radius: 999px; }
.room, .setting-group, .now-card, .pick, .skin-card, .skin-preview { border-radius: 16px; }
.tab.on, .chip.on, .act.on { background: #fff; color: #0d1330; }
:root[data-theme="light"] .tab.on, :root[data-theme="light"] .chip.on, :root[data-theme="light"] .act.on { background: var(--accent); color: #fff; }

/* Аудитории — треки эфира: номер как название, полоса как волна. */
.page-rooms .rooms::before { content: 'В эфире'; display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); padding: 4px 0 6px; }
.room { background: var(--surface); }
.room-num { font-size: 18px; font-weight: 800; }
.room-num::before { content: '♪'; color: var(--accent); margin-right: 8px; font-size: 14px; }
.room-until { color: var(--text-2); font-weight: 600; }
.rail { align-items: flex-end; gap: 4px; }
.rail-box { height: 14px; border-radius: 3px; }
.rail-cell:nth-child(2n) .rail-box { height: 20px; }
.rail-cell:nth-child(3n) .rail-box { height: 24px; }
.rail-cell:nth-child(5n) .rail-box { height: 18px; }
.rail-cell.free .rail-box { background: #fff; }
:root[data-theme="light"] .rail-cell.free .rail-box { background: var(--accent); }
.rail-cell.busy .rail-box { background: rgba(255,143,106,0.45); }
.rail-time { font-size: 9px; }
.legend-box.free { background: #fff; }
:root[data-theme="light"] .legend-box.free { background: var(--accent); }

/* Преподаватель — исполнитель: кружок с инициалом, «сейчас играет». */
.now-card { background: linear-gradient(160deg, rgba(59,123,255,0.25), rgba(255,255,255,0.04)); }
:root[data-theme="light"] .now-card { background: #fff; }
.now-head { align-items: center; }
.now-name { font-size: 20px; font-weight: 800; padding-left: 58px; position: relative; }
.now-name::before { content: attr(data-initial); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 800; }
.now-date { padding-left: 58px; }
.badge { background: #fff; color: #0d1330; }
:root[data-theme="light"] .badge { background: var(--accent); color: #fff; }
.badge::before { content: '▶ '; }
.badge.idle { background: var(--surface-2); color: var(--text-3); }
.badge.idle::before { content: '❚❚ '; }
.now-room { font-size: 30px; font-weight: 800; color: #fff; }
:root[data-theme="light"] .now-room { color: var(--accent); }
.now-timer .ring-track { stroke: rgba(255,255,255,0.1); }
.now-timer .ring-bar { stroke: #fff; }
:root[data-theme="light"] .now-timer .ring-bar { stroke: var(--accent); }
.page-lecturers .lesson-list::before { content: 'Треки сегодня'; display: block; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-3); padding: 8px 0; }
.page-lecturers .lesson { grid-template-columns: auto 1fr auto; grid-template-areas: "time body room" "time body status"; }
.page-lecturers .lesson-room { display: block; }
.page-lecturers .lesson-kind { display: block; }

/* Выбор группы — плейлисты. */
.search input { background: var(--surface); border-color: transparent; padding-left: 18px; }
.picks-count { padding-left: 4px; }
.pick { background: var(--surface); }
.pick-name::before { content: '≡'; color: var(--accent); margin-right: 10px; font-weight: 800; }
.pick-mark { color: #fff; }
:root[data-theme="light"] .pick-mark { color: var(--accent); }

.setting-group { background: var(--surface); }
.segment { background: rgba(0,0,0,0.3); }
:root[data-theme="light"] .segment { background: var(--surface-2); }
.segment-item input:checked + span { background: #fff; color: #0d1330; }
:root[data-theme="light"] .segment-item input:checked + span { background: var(--accent); color: #fff; }
.skin-card { background: rgba(0,0,0,0.25); }
:root[data-theme="light"] .skin-card { background: var(--surface-2); }
.skin-card:has(input:checked) { border-color: #fff; }
:root[data-theme="light"] .skin-card:has(input:checked) { border-color: var(--accent); }
.btn { background: #fff; color: #0d1330; border-radius: 999px; }
:root[data-theme="light"] .btn { background: var(--accent); color: #fff; }
.btn.ghost { background: var(--surface-2); color: var(--text-2); }
.setting-code { background: rgba(0,0,0,0.3); }
:root[data-theme="light"] .setting-code { background: var(--surface-2); }

/* ─── настройки: как экран плеера ─────────────────────────────────────── */
.setting-title::before { content: '♪ '; color: var(--accent); }
.skin-preview { border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.skin-current { color: #fff; }
:root[data-theme="light"] .skin-current { color: var(--accent); }
.skin-current::before { content: '▶ '; }

/* ─── аудитории: эквалайзер площадки ──────────────────────────────────── */
.rhero { gap: 10px; }
.rh-head { color: var(--text-3); }
.rh-head::before { content: 'Эфир · '; }
.rh-now { grid-template-columns: 1fr; grid-template-areas: "label" "count" "of"; }
.rh-count { font-size: 44px; }
.rh-count::after { content: ' свободно'; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-2); }
.rh-label { display: none; }
.rh-of { font-size: 12px; }
.rh-sentence { font-size: 13px; color: var(--text-2); }
.rh-bar-track { fill: rgba(255,255,255,0.06); }
:root[data-theme="light"] .rh-bar-track { fill: var(--surface-2); }
.rh-bar-fill { fill: #fff; }
:root[data-theme="light"] .rh-bar-fill { fill: var(--accent); }
.rh-bar[data-state="past"] .rh-bar-fill { fill: rgba(255,255,255,0.18); }
:root[data-theme="light"] .rh-bar[data-state="past"] .rh-bar-fill { fill: var(--past); }
.rh-bar[data-state="now"] .rh-bar-fill { fill: var(--accent); }
:root[data-theme="light"] .rh-bar[data-state="now"] .rh-bar-fill { fill: var(--accent-2); }
.rh-bar[data-state="now"] .rh-bar-track { stroke: none; }
.rh-floor { border-radius: 999px; flex-direction: row; gap: 6px; align-items: baseline; padding: 6px 12px; }
.rh-floor b::before { content: '♪ '; color: var(--accent); }
.rooms-floor { color: var(--text-3); }
.rooms-floor span::before { content: 'Плейлист · '; }

/* ─── выбор группы: обложки альбомов ──────────────────────────────────── */
.ph-pinned { border-radius: 16px; background: #fff; color: #0d1330; }
:root[data-theme="light"] .ph-pinned { background: var(--accent); color: #fff; }
.ph-pinned-label::before { content: '▶ '; }
.ph-dirs-head::before { content: '♪ '; color: var(--accent); }
.ph-dir { border-radius: 12px; aspect-ratio: 1; justify-content: flex-end; background: linear-gradient(160deg, rgba(59,123,255,0.35), rgba(255,255,255,0.05)); box-shadow: 0 6px 14px rgba(0,0,0,0.3); }
:root[data-theme="light"] .ph-dir { background: linear-gradient(160deg, #dfe6ff, #fff); box-shadow: 0 6px 14px rgba(13,19,48,0.1); }
.ph-dir:nth-child(3n) { background: linear-gradient(160deg, rgba(255,143,106,0.35), rgba(255,255,255,0.05)); }
.ph-dir:nth-child(5n) { background: linear-gradient(160deg, rgba(111,220,140,0.3), rgba(255,255,255,0.05)); }
.ph-dir.on { background: #fff; color: #0d1330; }
:root[data-theme="light"] .ph-dir.on { background: var(--accent); color: #fff; }
.ph-recent-item::before { content: '≡ '; color: var(--accent); }

/* ─── поиск преподавателя: исполнители ────────────────────────────────── */
.lh-pinned { border-radius: 16px; background: #fff; color: #0d1330; }
:root[data-theme="light"] .lh-pinned { background: var(--accent); color: #fff; }
.lh-pinned-label::before { content: '▶ '; }
.lh-mine-head::before { content: '♪ '; color: var(--accent); }
.lh-teacher { border-radius: 14px; padding-left: 58px; position: relative; min-height: 56px; }
.lh-teacher::before { content: attr(data-initial); position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 999px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.lh-teacher.today::before { background: #fff; color: #0d1330; }
:root[data-theme="light"] .lh-teacher.today::before { background: var(--accent-2); color: #fff; }
.lh-teacher.today .lh-teacher-when { color: #fff; }
:root[data-theme="light"] .lh-teacher.today .lh-teacher-when { color: var(--accent-2); }
.lh-recent-item::before { content: '≡ '; color: var(--accent); }

/* ─── онбординг: как карточка «сейчас играет» ─────────────────────────── */
.onb { border-radius: 16px; background: #fff; color: #0d1330; }
:root[data-theme="light"] .onb { background: var(--accent); color: #fff; }
.onb-kicker::before { content: '▶ '; }
.onb-num { background: var(--accent); color: #fff; }
:root[data-theme="light"] .onb-num { background: #fff; color: var(--accent); }
.onb-step { background: rgba(13,19,48,0.06); border-radius: 12px; }
:root[data-theme="light"] .onb-step { background: rgba(255,255,255,0.16); }
.onb-btn { border-radius: 999px; background: #0d1330; color: #fff; }
:root[data-theme="light"] .onb-btn { background: #fff; color: var(--accent); }
.onb-fold { background: rgba(13,19,48,0.1); }

/* Выбранный день — цветом «играет», как кнопка плеера. */
.day.on { background: var(--play); color: var(--play-ink); }