/* Тёмная схема: переопределяет используемые на сайте утилиты Tailwind при html.dark */
html.dark { color-scheme: dark; }

/* фон и поверхности */
.dark body.bg-slate-50 { background: #0e1319; color: #e5e7eb; }
.dark .bg-white { background-color: #18202a; }
.dark .bg-slate-50 { background-color: #1f2833; }
.dark .bg-slate-100 { background-color: #243040; }
.dark .bg-slate-200 { background-color: #2c3a4d; }
.dark .bg-\[\#f3e9d2\] { background-color: #3b3524; }          /* бежевая карточка с видео */
.dark .hover\:bg-slate-50:hover { background-color: #243040; }

/* текст */
.dark .text-slate-800 { color: #e5e7eb; }
.dark .text-slate-700 { color: #cbd5e1; }
.dark .text-slate-600 { color: #b6c0cc; }
.dark .text-slate-500 { color: #9aa7b8; }
.dark .text-slate-400 { color: #7d8a9c; }
.dark .text-slate-300 { color: #566275; }
.dark .hover\:text-slate-800:hover, .dark .hover\:text-slate-700:hover, .dark .hover\:text-slate-600:hover { color: #ffffff; }
.dark .text-indigo-700 { color: #a5b4fc; }
.dark .text-indigo-800 { color: #c7d2fe; }
.dark .text-slate-900 { color: #0f172a; } /* на жёлтой кнопке */

/* рамки и разделители */
.dark .border, .dark .border-t, .dark .border-b, .dark .border-l { border-color: #2c3a4d; }
.dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #2a3646; }
.dark .border-slate-300 { border-color: #3a4a5f; }
.dark .border-indigo-300 { border-color: #4b55a8; }
.dark .border-red-300 { border-color: rgba(248, 113, 113, .55); }
.dark .ring-red-300 { --tw-ring-color: rgba(248, 113, 113, .55); }

/* цветные плашки */
.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, .16); }
.dark .bg-green-50 { background-color: rgba(34, 197, 94, .12); }
.dark .bg-green-100 { background-color: rgba(34, 197, 94, .2); }
.dark .text-green-800, .dark .text-green-700 { color: #86efac; }
.dark .text-green-600 { color: #4ade80; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, .2); }
.dark .text-red-800, .dark .text-red-700 { color: #fca5a5; }
.dark .text-red-600 { color: #f87171; }
.dark .bg-amber-100 { background-color: rgba(245, 158, 11, .2); }
.dark .text-amber-800, .dark .text-amber-700 { color: #fcd34d; }
.dark .bg-yellow-100 { background-color: rgba(250, 204, 21, .18); }
.dark .text-yellow-800 { color: #fde047; }
.dark .text-yellow-700 { color: #facc15; }

/* поля ввода */
.dark input, .dark select, .dark textarea { background-color: #111821; color: #e5e7eb; border-color: #334155; }
.dark input::placeholder, .dark textarea::placeholder { color: #6b7788; }
.dark input[type="checkbox"] { background-color: transparent; }

/* переключатель темы */
.theme-toggle { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; color: #64748b; }
.theme-toggle:hover { background: rgba(100, 116, 139, .15); color: inherit; }
.dark .theme-toggle { color: #9aa7b8; }
.dark .icon-moon, html:not(.dark) .icon-sun { display: none; }

/* просмотренная карточка (перекрывает бежевый/белый фон) */
.card-viewed { background-color: #dfeedd !important; }
.dark .card-viewed { background-color: #243629 !important; }
/* «вернуться позже»: сиреневая карточка (важнее бежевого цвета «есть видео») */
.card-later { background-color: #e6defa !important; box-shadow: inset 4px 0 0 #8b5cf6; }
.dark .card-later { background-color: #2f2748 !important; box-shadow: inset 4px 0 0 #a78bfa; }
.later-btn.on { color: #6d28d9; border-color: #8b5cf6; }
.dark .later-btn.on { color: #c4b5fd; border-color: #a78bfa; }

/* статусы карточек (после .card-viewed/.card-later: цвет статуса важнее) */
.cs-new { background-color: #e6e8eb !important; }
.cs-progress { background-color: #d9e8f5 !important; }
.cs-task { background-color: #f1e4c6 !important; }
.cs-candidate { background-color: #e4d9f4 !important; }
.cs-approved { background-color: #dcf0dc !important; }
.cs-farewell { background-color: #d8aea4 !important; }
.dark .cs-new { background-color: #394250 !important; }
.dark .cs-progress { background-color: #28425c !important; }
.dark .cs-task { background-color: #6b5a2c !important; }
.dark .cs-candidate { background-color: #57417f !important; }
.dark .cs-approved { background-color: #2c6a43 !important; }
.dark .cs-farewell { background-color: #7d3b30 !important; }
/* полоска слева: утверждённые — ярко-зелёная, претенденты — тёмно-зелёная */
[data-cs-card].cs-approved { border-left: 5px solid #22c55e; }
[data-cs-card].cs-candidate { border-left: 5px solid #166534; }
.cs-ind { position: absolute; top: -.7rem; left: -.7rem; min-width: 2rem; height: 2rem; padding: 0 .55rem; box-sizing: border-box; border-radius: 9999px; background: #ff3b30; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 5; font-variant-numeric: tabular-nums; }
.cs-ind.zero { background: #9aa1ab; }
.cs-ind[hidden], .cs-newv[hidden] { display: none; }

/* Справка */
.dark .help-note { background: #3a2f12; border-color: #8a6d1d; color: #f3e3b3; }
.dark .help-body th { background: #1f2833; }
.dark .help-body code { background: #1f2833; }
.dark .help-body h2 { color: #a5b4fc; }
.dark .help-toc a { color: #a5b4fc; }

/* Джокер и карта музыки */
.joker-badge { color: #ff6a00; font-weight: 800; letter-spacing: .08em; font-size: .8rem; text-shadow: 0 0 1px rgba(255, 106, 0, .35); }
.wait-badge { color: #d19a00; font-weight: 800; letter-spacing: .08em; font-size: .8rem; text-shadow: 0 0 1px rgba(209, 154, 0, .35); }
.wait-badge[hidden] { display: none; }
.dark .wait-badge { color: #facc15; }
.joker-badge[hidden] { display: none; }
.dark .joker-badge { color: #ff8a2a; }

/* Фото-карточка с полем для заметки: нижние 183 из 1080 пикселей фото перекрыты цветом фона, поверх — белое разлинованное поле.
   Все размеры в cqw (доля ширины фото), поэтому поле одинаково выглядит и в миниатюре, и на странице анкеты. */
.cph { position: relative; container-type: inline-size; aspect-ratio: 5 / 9; overflow: hidden; border-radius: .25rem; background: #e2e8f0; }
.cph > img, .cph > a > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cph > a { display: block; width: 100%; height: 100%; }
.cph-cover { position: absolute; left: 0; right: 0; bottom: 0; height: 30.5cqw; background: var(--cbg, #fff); pointer-events: none; }
.cph-note { --lw: max(1.5px, .33cqw); position: absolute; left: var(--bl, 2.83cqw); right: var(--br, 3.67cqw); top: 146.5cqw; height: 29cqw; box-sizing: border-box; margin: 0; padding: 0 1.67cqw; border: 0; border-radius: 0; resize: none;
  overflow-y: auto; scrollbar-width: none; color: #000; font: 700 7cqw/9.667cqw Arial, sans-serif; white-space: pre-wrap; word-break: break-word; outline: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 9cqw, #000 9cqw, #000 calc(9cqw + var(--lw)), transparent calc(9cqw + var(--lw)), transparent 9.667cqw), linear-gradient(#fff, #fff);
  background-clip: content-box, border-box; background-origin: content-box, border-box; }
.cph-note::-webkit-scrollbar { display: none; }
textarea.cph-note { cursor: text; outline: 2px solid #818cf8; outline-offset: 0; }
/* поле заметки всегда чёрным по белому, в том числе в тёмной теме (общее правило тёмной темы красит поля ввода в светлый) */
.cph .cph-note, .dark .cph textarea.cph-note { color: #000 !important; -webkit-text-fill-color: #000; caret-color: #000; background-color: #fff; border-color: transparent; }
/* чипы «Применено» в ленте */
.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .28); }
.dark .hover\:bg-indigo-200:hover { background-color: rgba(99, 102, 241, .45); }
.dark .text-indigo-800 { color: #c7d2fe; }
.dark .border-indigo-300 { border-color: #6366f1; }
.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, .15); }

/* сворачиваемые блоки карточки юнита (на телефоне закрыты): стрелка вместо стандартного маркера */
summary.sum-toggle { list-style: none; }
summary.sum-toggle::-webkit-details-marker { display: none; }
summary.sum-toggle::before { content: "▸"; display: inline-block; width: 1.1em; margin-right: .3em; font-size: 1.5em; line-height: 1; vertical-align: -.12em; }
details[open] > summary.sum-toggle::before { content: "▾"; }
@media (min-width: 1024px) { summary.add-sum { pointer-events: none; cursor: default; } summary.add-sum::before { content: none !important; } }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, .16); }

/* меню фильтров ленты: на телефоне ряды листаются вбок, подпись над рядом; на ПК плашки переносятся как обычно */
.frow { display: flex; flex-direction: column; gap: 4px; margin-bottom: .75rem; }
.fchips { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fchips::-webkit-scrollbar { display: none; }
.fchips > * { flex: none; }
.flbl { font-size: 12px; }
.ftop { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.ftop .fnonum { order: -1; align-self: flex-start; }
.fsep { display: none; }
@media (min-width: 640px) {
  .frow { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .fchips { display: contents; }
  .flbl { font-size: inherit; }
  .ftop { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; }
  .ftop .fnonum { order: 0; margin-left: auto; }
  .fpair { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
  .fpair > .frow { margin-bottom: 0; }
  .fsep { display: inline; }
}