* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #16181d;
  color: #e8e8e8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: #1f232b;
  border-bottom: 1px solid #2e333d;
  flex-wrap: wrap;
}

#toolbar h1 { font-size: 18px; }

/* сегменты шапки: тонкий разделитель между группами + подсветка группы на ховере */
.tb-sep { align-self: stretch; width: 1px; background: #2e333d; }
.tb-group { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; position: relative; }
.tb-group:hover { background: #262b34; }

/* опенер видео: кнопка с попапом ниже */
#video-open-btn { display: inline-flex; align-items: center; gap: 4px; }
.tb-caret { font-size: 11px; opacity: .8; }
#video-open-popup {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  width: 260px; padding: 12px;
  background: #20242d; border: 1px solid #343a45; border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
#video-open-popup .file-btn { text-align: center; }
.tb-or { display: flex; align-items: center; gap: 8px; color: #5b6474; font-size: 11px; }
.tb-or span { flex: 1; height: 1px; background: #343a45; }

button, .file-btn {
  background: #2e6fd8;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
}

button:hover:not(:disabled), .file-btn:hover { background: #3d7ee6; }
button:disabled { background: #3a3f4a; color: #888; cursor: default; }

#video-url {
  background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a;
  border-radius: 6px; padding: 6px 10px; font-size: 13px; width: 100%; box-sizing: border-box;
}

#theme-switch, #layout-mode {
  background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a;
  border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%; box-sizing: border-box;
}

#status { color: #8fa3bf; font-size: 13px; margin-left: auto; }

/* кнопка голосовой разметки: горит красным, пока слушает */
#voice-btn.on {
  background: #b3261e;
  animation: pulse 1s infinite alternate;
}

/* переключатель экранов «Видео» / «Статистика» */
#screen-nav { display: flex; gap: 4px; background: #16181d; border-radius: 8px; padding: 3px; }
#screen-nav button { background: none; color: #8fa3bf; padding: 6px 12px; font-size: 14px; }
#screen-nav button:hover:not(:disabled) { background: #262b34; color: #e8e8e8; }
#screen-nav button.active { background: #2e6fd8; color: #fff; }

/* значок «скачать» — стрелка в лоток (узнаваемая иконка), отличается от стрелок ↑/↓ и перемотки */
.dl-ic {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

/* значки-иконки (редактировать, рисовать) — тот же стиль и размер, что у «скачать» */
.ic {
  width: 15px;
  height: 15px;
  vertical-align: -3px;
}

/* Замена эмодзи на SVG-линии (дизайн-хендофф, концепт «Тонкая линия»):
   логотип/видео/статистика/открыть/показ/цель. Тот же бокс и вертикальное
   выравнивание, что у .ic/.dl-ic — БЕЗ фиксированного color: у svg внутри
   stroke="currentColor", как и у .ic/.dl-ic, цвет наследуется от кнопки
   (иначе, например, лого на светлом хабе — #hub-logo{color:#3a2b1c} —
   оказалось бы серо-синим из хендоффа, нечитаемым на светлом фоне; а у
   активной вкладки/rail-кнопки иконка теряла бы подсветку currentColor). */
.ic-video, .ic-stats, .ic-open, .ic-play, .ic-target {
  width: 15px; height: 15px; vertical-align: -3px;
}
.ic-logo { width: 20px; height: 20px; vertical-align: -5px; }

main {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  flex: 1;
}

#player-pane { flex: 1 1 65%; min-width: 0; }

#video-wrap { position: relative; background: #000; border-radius: 8px; overflow: hidden; min-height: 240px; }

#video { width: 100%; max-height: 60vh; display: block; }

/* автонарезка по протоколу игры (редизайн 1a — форма общая, цвета тёмной темы;
   светлые переопределения — в блоке body.theme-1c) */
#import-pane { padding: 24px 26px 26px; border-top: 1px solid #262b34; }
#import-pane h2 { font-size: 21px; font-weight: 800; color: #e8e8e8; margin: 0 8px 6px 0; display: inline; }
#import-pane h2 .muted { color: #7a8699; font-weight: 400; font-size: 14px; }
.import-desc { font-size: 13px; line-height: 1.55; color: #8fa0b5; max-width: 640px; margin: 4px 0 20px; }
.slabel { font: 700 11px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #7a8699; margin-bottom: 10px; }
.import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 22px; }
#import-url, #import-video-url { flex: 1 1 320px; min-width: 0; background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 11px; padding: 12px 14px; font-size: 13.5px; }
#import-load, #import-video-open { background: #2e6fd8; color: #fff; border: none; border-radius: 11px; padding: 0 20px; height: 43px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#import-load:hover, #import-video-open:hover { background: #3f7ce0; }
#import-pre, #import-post { width: 52px; text-align: center; background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 9px; padding: 7px 8px; font-size: 13.5px; }
.import-row label { color: #aab6c8; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.import-div { width: 1px; height: 22px; background: #3a3f4a; }

/* статус-плашка */
#import-status .msg { display: flex; align-items: center; gap: 9px; border-radius: 10px; padding: 11px 14px; margin: 0 0 22px; font-size: 13px; }
#import-status .msg.info { background: #1f232b; border: 1px solid #2e333d; border-left: 3px solid #2e7d46; color: #8fa0b5; }
#import-status .msg.err { background: #2b1c1c; border: 1px solid #4a2c2c; border-left: 3px solid #a24b3f; color: #e5a9a0; }
#import-status .msg b { color: #e8e8e8; }

/* чипы категорий (на существующей разметке label>input+.cat-n) */
#import-cats { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; }
#import-cats label { display: inline-flex; align-items: center; gap: 9px; border-radius: 999px; padding: 7px 13px 7px 9px; font-size: 13.5px; cursor: pointer; user-select: none; background: #262b34; border: 1.5px solid #3a3f4a; color: #8fa0b5; }
#import-cats label:hover { border-color: #556; }
#import-cats input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 19px; height: 19px; flex: none; border-radius: 6px; background: #1a1e25; border: 1.5px solid #4a5160; position: relative; cursor: pointer; }
#import-cats input[type="checkbox"]:checked { background: #2e6fd8; border-color: #2e6fd8; }
#import-cats input[type="checkbox"]:checked::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; }
#import-cats label:has(input:checked) { background: #2f3947; border-color: #2e6fd8; color: #e8e8e8; }
#import-cats .cat-n { background: #1a1e25; color: #7a8699; font-weight: 700; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
#import-cats label:has(input:checked) .cat-n { background: #223049; color: #6ea8ff; }

/* тумблеры режима */
.import-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #8fa0b5; cursor: pointer; }
.import-toggle:has(input:checked) { color: #e8e8e8; }
.import-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; width: 38px; height: 22px; flex: none; border-radius: 999px; background: #3a3f4a; position: relative; cursor: pointer; transition: background .15s; }
.import-toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: left .15s; }
.import-toggle input[type="checkbox"]:checked { background: #2e6fd8; }
.import-toggle input[type="checkbox"]:checked::after { left: 18px; }

/* плашка «первое событие» */
#import-anchor { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; padding: 15px 17px; background: #1f232b; border: 1px solid #2e333d; border-radius: 12px; font-size: 13px; color: #8fa0b5; }
.anchor-ic { flex: none; color: #2e6fd8; }
.anchor-body { flex: 1; min-width: 0; line-height: 1.5; }
.anchor-body b { color: #e8e8e8; }
.anchor-body .hint { display: inline-block; margin-top: 3px; }
#import-anchor .anchor-set { color: #7fd694; }
#import-anchor button { flex: none; margin-left: auto; border: 1.5px solid #4a5160; background: transparent; color: #e8e8e8; border-radius: 10px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#import-anchor button:hover { background: #2a2f39; }

/* подвал действий */
#import-actions { border-top: 1px solid #2e333d; padding-top: 20px; margin-bottom: 0; }
#import-create { background: #1f7a3d; color: #fff; border: none; border-radius: 11px; padding: 13px 26px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(31, 122, 61, .3); }
#import-create:hover { background: #248a45; }
#import-clear, #import-fixclock, #import-autolearn, #import-checkclock { border: 1px solid #3a3f4a; background: #262b34; color: #aab6c8; border-radius: 11px; padding: 12px 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
#import-clear:hover, #import-fixclock:hover, #import-autolearn:hover, #import-checkclock:hover { background: #2e333d; }
#import-count { margin-left: auto; font-size: 13px; color: #8fa0b5; }
#import-count b { color: #e8e8e8; font-size: 15px; }

/* затемнение с подсветкой поля ссылки на видео (игра без трансляции) */
#import-video-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 12, 16, .72); animation: ivoFade .18s ease-out; }
@keyframes ivoFade { from { opacity: 0; } to { opacity: 1; } }
.ivo-card { background: #1f232b; border: 1px solid #2e333d; border-radius: 14px; padding: 26px; max-width: 460px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.ivo-ic { font-size: 34px; }
.ivo-card h3 { font-size: 19px; font-weight: 800; margin: 8px 0; color: #e8e8e8; }
.ivo-card p { font-size: 14px; line-height: 1.5; color: #8fa0b5; margin: 0 0 16px; }
.ivo-row { display: flex; gap: 10px; }
#ivo-url { flex: 1; min-width: 0; background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 10px; padding: 11px 13px; font-size: 14px; }
#ivo-open { background: #2e6fd8; color: #fff; border: none; border-radius: 10px; padding: 0 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#ivo-open:hover { background: #3f7ce0; }
.ivo-later { margin-top: 14px; background: none; border: none; color: #8fa0b5; cursor: pointer; font-size: 13px; text-decoration: underline; }
body.theme-1c #import-video-overlay { background: rgba(58, 43, 28, .55); }
body.theme-1c .ivo-card { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c .ivo-card h3 { color: #3a2b1c; }
body.theme-1c .ivo-card p, body.theme-1c .ivo-later { color: #8a7457; }
body.theme-1c #ivo-url { background: #fff; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c #ivo-open { background: #3a2b1c; color: #fbf6ee; }
body.theme-1c #ivo-open:hover { background: #4d3a26; }

/* оверлей экспорта: прикрывает плеер, показывает прогресс (проигрывание не смотрим) */
#export-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(10, 12, 16, 0.9);
  display: flex; align-items: center; justify-content: center;
}
.export-box {
  background: #1f232b; border: 1px solid #2e333d; border-radius: 12px;
  padding: 24px 28px; width: min(420px, 90vw); text-align: center; color: #e8e8e8;
}
.export-title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
#export-bar { height: 10px; background: #2a2f39; border-radius: 6px; overflow: hidden; }
#export-bar-fill { height: 100%; width: 0; background: #2e6fd8; transition: width .2s; }
#export-count { margin: 10px 0 4px; color: #aab6c8; font-size: 14px; }
.export-hint { color: #7a8699; font-size: 12px; margin-bottom: 14px; }
#export-cancel { background: #3d211d; color: #ff9d8f; }

/* встроенный плеер YouTube/ВК — та же область, что и <video> */
#embed-player { width: 100%; height: 60vh; background: #000; }
#embed-player iframe, #embed-player > div { width: 100%; height: 100%; border: 0; }

/* панель с командами yt-dlp (режим YouTube/ВК) */
#ytdlp-out-wrap { margin: 8px 0; }
#ytdlp-out {
  width: 100%; box-sizing: border-box; font: 12px/1.4 monospace;
  background: #1f232b; color: #e8e8e8; border: 1px solid #3a3f4a;
  border-radius: 6px; padding: 8px; white-space: pre; overflow-x: auto;
}

#video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa3bf;
  font-size: 18px;
  text-align: center;
  padding: 10px;
  background: #0d0f13;
}

#overlay-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 600;
  border-left: 5px solid #e74c3c;
}

.overlay-note {
  font-size: 13px;
  font-weight: 400;
  color: #d6dde6;
  margin-top: 3px;
  max-width: 40vw;
}

#block-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0f13;
  color: #fff; /* текст всегда белый — цвет кнопки только акцентом снизу, border-bottom */
  font-size: 34px;
  font-weight: 700;
  z-index: 2;
  border-bottom: 6px solid transparent;
  box-sizing: border-box;
}

/* ---------- Телестрация ---------- */

#telestration-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  cursor: crosshair;
}

#clip-modal-tele {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}

/* ---------- Экран редактора видео (раскладка 1b): слева вертикальный рельс
   инструментов, по центру стоп-кадр + дорожка наложений, справа список
   нарезок, снизу тонкий пульт с кнопкой-героем «Экспортировать видео».
   Экран следует теме сайта: тёмная (синий акцент) и паркетная (кирпичный). ---------- */

/* Тёмная тема сайта (базовая) */
#editor-screen {
  --fr-bg: #16181d;
  --fr-panel: #1f232b;
  --fr-raised: #2a2f39;
  --fr-raised-hi: #343a45;
  --fr-line: #2e333d;
  --fr-ink: #e8e8e8;
  --fr-ink-dim: #8fa3bf;
  --fr-amber: #2e6fd8;       /* акцент: активный инструмент, фокус, экспорт */
  --fr-amber-hi: #3d7ee6;
  --fr-on-accent: #fff;      /* текст на акценте */
  --fr-rec: #e5484d;         /* семантика записи */
  --fr-r-panel: 12px;        /* скругления: панели/рельс */
  --fr-r-ctl: 9px;           /* кнопки/чипы */
  padding: 16px 20px 22px;
  background: var(--fr-bg);
  color: var(--fr-ink);
  min-height: 100vh;
}
/* Паркетная (светлая) тема сайта */
body.theme-1c #editor-screen {
  --fr-bg: #f4ece0;
  --fr-panel: #fbf6ee;
  --fr-raised: #ffffff;
  --fr-raised-hi: #f0e6d6;
  --fr-line: #e7d9c2;
  --fr-ink: #3a2b1c;
  --fr-ink-dim: #8a7457;
  --fr-amber: #c65c2e;
  --fr-amber-hi: #d56b3b;
  --fr-on-accent: #fff;
  --fr-rec: #c0392b;
  --fr-r-panel: 18px;
  --fr-r-ctl: 999px;
}

/* Верхний «пульт»: назад · заголовок · клип-табло · показ/запись справа */
#editor-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  max-width: 1450px;
  padding: 9px 12px;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-panel);
  flex-wrap: wrap;
}
#editor-bar h2 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#editor-bar h2 .ic { color: var(--fr-amber); width: 20px; height: 20px; }
#editor-back {
  background: transparent;
  color: var(--fr-ink-dim);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-ctl);
  padding: 6px 12px;
  font-size: 13px;
}
#editor-back:hover:not(:disabled) { background: var(--fr-raised); color: var(--fr-ink); }
/* имя нарезки — как строка табло: моно-цифры, тонкая рамка */
#editor-bar #editor-clip {
  color: var(--fr-ink-dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border: 1px solid var(--fr-line);
  border-radius: 999px;
  white-space: nowrap;
}
#editor-bar #editor-clip:empty { display: none; }
#editor-bar .deck-actions { margin-left: auto; display: flex; gap: 8px; }
#editor-preview {
  background: var(--fr-raised);
  color: var(--fr-ink);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-ctl);
  padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
#editor-preview:hover:not(:disabled) { background: var(--fr-raised-hi); }
#editor-review {
  background: var(--fr-raised);
  color: var(--fr-ink);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-ctl);
  padding: 7px 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
#editor-review .ic { color: var(--fr-rec); width: 14px; height: 14px; }
#editor-review:hover:not(:disabled) { background: var(--fr-raised-hi); }

#editor-body {
  display: flex;
  gap: 14px;
  align-items: stretch;
  max-width: 1450px;
  margin: 0 auto;
}
#editor-stage {
  flex: 1;
  min-width: 0;
  position: relative; /* якорь для инлайн-поля текста/выноски */
}
/* поле ввода текста/выноски — появляется прямо на кадре у точки подписи */
.tele-inline-input {
  position: absolute;
  z-index: 6;
  transform: translateY(-50%);
  width: 170px;
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fr-ink);
  background: var(--fr-panel);
  border: 1.5px solid var(--fr-amber);
  border-radius: 8px;
  outline: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.tele-inline-input::placeholder { color: var(--fr-ink-dim); }
/* Плеер в раме: hairline-контур (в паркете — толстая кремовая рамка) + мягкая тень */
#editor-stage #video-wrap {
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-panel);
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
}
body.theme-1c #editor-stage #video-wrap {
  border: 3px solid #fbf6ee;
  box-shadow: 0 14px 34px -18px rgba(58, 43, 28, 0.4);
}
/* в редакторе плеер крупнее — разметочные ограничения высоты не нужны */
#editor-stage #video { max-height: 68vh; display: block; }

/* ---- Левый рельс инструментов (1b) ---- */
#editor-rail {
  flex: 0 0 184px;
  width: 184px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 9px;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-panel);
}
.rail-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fr-ink-dim);
  padding: 7px 8px 3px;
}
.rail-sep { height: 1px; background: var(--fr-line); margin: 7px 4px; }
/* кнопка рельса: иконка + подпись, во всю ширину, слева */
#editor-rail .tool,
#editor-rail #zoomlive-btn,
#editor-rail .tele-file,
#editor-rail #voice-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  color: var(--fr-ink);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
body.theme-1c #editor-rail .tool,
body.theme-1c #editor-rail #zoomlive-btn,
body.theme-1c #editor-rail .tele-file,
body.theme-1c #editor-rail #voice-btn { border-radius: 13px; }
#editor-rail .tool .ic,
#editor-rail #zoomlive-btn .ic,
#editor-rail .tele-file .ic,
#editor-rail #voice-btn .ic { width: 16px; height: 16px; flex: none; }
.rail-glyph { width: 16px; text-align: center; font-weight: 700; flex: none; }
#editor-rail .tool:hover:not(:disabled),
#editor-rail #zoomlive-btn:hover:not(:disabled),
#editor-rail .tele-file:hover,
#editor-rail #voice-btn:hover:not(:disabled) { background: var(--fr-raised); }
#editor-rail .tool.active,
#editor-rail #zoomlive-btn.active {
  background: var(--fr-amber);
  color: var(--fr-on-accent);
  font-weight: 600;
}
#editor-rail #voice-btn:disabled { color: var(--fr-ink-dim); opacity: 0.6; cursor: default; }
#editor-rail #voice-btn.on { background: var(--fr-rec); color: #fff; }

/* Панель «Нарезки», переехавшая сюда из #video-screen (см. openEditorScreen) —
   всегда видна, без переключателя (решение пользователя): id-селектор
   перебивает базовый .drawer{display:none} без !important. */
#editor-body #clips-pane {
  display: block;
  flex: 0 0 244px;
  width: 244px;
  align-self: flex-start;
  max-height: 78vh;
  overflow: auto;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-panel);
  padding: 12px 13px;
}
@media (max-width: 900px) {
  #editor-body { flex-direction: column; }
  #editor-rail { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; }
  #editor-rail .rail-label, #editor-rail .rail-sep { display: none; }
  #editor-rail .tool, #editor-rail #zoomlive-btn,
  #editor-rail .tele-file, #editor-rail #voice-btn { width: auto; }
  #editor-body #clips-pane { width: 100%; flex: none; max-height: 40vh; }
}
/* ---- Выбор нарезки в редакторе: чистый список-пикер ----
   В редакторе список нужен только чтобы ВЫБРАТЬ нарезку для разметки. Всё
   остальное (правка границ, заметка, воспроизведение, скачивание, действия
   над блоком) живёт во вкладке «Видео» — здесь прячем, чтобы не отвлекало. */
#editor-body .clip-row .edge,
#editor-body .clip-row .note,
#editor-body .clip-row .play,
#editor-body .clip-row .dl,
#editor-body .clip-row .del,
#editor-body #clips-pane > .hint,
#editor-body .clip-group-header .play-block,
#editor-body .clip-group-header .dl-block,
#editor-body .clip-group-header .move { display: none; }

#editor-body #clips-pane { padding: 8px 8px 12px; }

/* заголовок блока-кнопки: липкая тихая метка с цветной риской кнопки слева
   (риску-border задаёт inline-стиль из app.js — border-left: 5px button.color) */
#editor-body .clip-group-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fr-panel);
  padding: 8px 10px 7px 12px;
  margin: 8px 0 2px;
  border-radius: 0;
  font-size: 13px;
  color: var(--fr-ink);
}
#editor-body .clip-group-header:first-child { margin-top: 0; }
#editor-body .clip-group-header .count { color: var(--fr-ink-dim); font-size: 12px; }
#editor-body .clip-group-header .blk-caret { color: var(--fr-ink-dim); }

/* строка нарезки: время крупно, длительность тише, справа — метки наложений.
   Выбранная — плашка + акцентная риска слева (в обеих темах). */
#editor-body .clip-row {
  padding: 9px 11px;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--fr-ink);
}
#editor-body .clip-row:hover { background: var(--fr-raised); }
#editor-body .clip-row.selected,
#editor-body .clip-row.active-clip {
  background: var(--fr-raised);
  outline: none;
  border-left-color: var(--fr-amber);
}
#editor-body .clip-row .t { font-size: 14px; }
#editor-body .clip-row .dur { color: var(--fr-ink-dim); font-size: 12px; }

/* Кнопка «Запись разбора» в состоянии записи — красная */
#editor-review.rec { background: #b3261e; color: #fff; }

/* Окно просмотра записанного разбора */
#review-modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(8, 10, 14, 0.88);
  display: flex; align-items: center; justify-content: center;
}
#review-modal[hidden] { display: none; }
.review-modal-box {
  background: #1a1e26; border: 1px solid #2e333d; border-radius: 12px;
  padding: 12px; max-width: 92vw; max-height: 92vh;
}
.review-modal-head { display: flex; align-items: center; justify-content: space-between; color: #e8e8e8; margin-bottom: 8px; font-weight: 600; }
#review-modal-close { background: none; border: none; color: #8fa3bf; font-size: 18px; cursor: pointer; padding: 2px 8px; }
#review-modal-close:hover { color: #e74c3c; }
#review-modal-video { display: block; max-width: 88vw; max-height: 80vh; border-radius: 6px; background: #000; }

/* Дорожка наложений под видео: видно, что/где/на сколько появится */
#editor-track { margin-top: 12px; }
#editor-track[hidden] { display: none; }
#editor-track-label { color: var(--fr-ink-dim); font-size: 12px; margin-bottom: 6px; }
#editor-track-lane {
  position: relative;
  height: 44px;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: 10px;
  overflow: hidden;
  /* тонкая «линейка» монтажной — вертикальные насечки времени */
  background-image: repeating-linear-gradient(90deg,
    transparent 0, transparent 47px,
    rgba(255, 255, 255, 0.05) 47px, rgba(255, 255, 255, 0.05) 48px);
}
.etrack-block {
  position: absolute;
  top: 4px;
  height: 32px;
  min-width: 20px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 7px;
  font-size: 13px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.etrack-block.etrack-draw { background: #b8791a; }   /* рисунок/прожектор/выноска — тёплый */
.etrack-block.etrack-zoom { background: #2e6fd8; }   /* наезд по ходу видео — синий */
.etrack-block.etrack-vo {
  background: #2a6b45; top: auto; bottom: 2px; height: 6px; left: 0; right: 0;
  width: auto; border-radius: 3px; padding: 0; cursor: default;
}
.etrack-block .etb-icon { pointer-events: none; }
.etrack-block .etb-x {
  margin-left: auto; background: none; border: none; color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 3px; opacity: 0.85;
}
.etrack-block .etb-x:hover { opacity: 1; background: rgba(0,0,0,0.25); border-radius: 3px; }
.etrack-block .etb-grip {
  position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
  background: rgba(255,255,255,0.35);
}
.etrack-block.etrack-vo .etb-grip { display: none; }
#etrack-cursor {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--fr-amber);
  pointer-events: none; z-index: 3;
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--fr-amber) 60%, transparent);
}

/* ---- Нижний пульт: цвет наложений · текст выноски · отмена/сохранить · герой ---- */
#telestration-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  max-width: 1450px;
  margin: 14px auto 0;
  background: var(--fr-panel);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-panel);
  padding: 11px 14px;
}
.deck-label { font-size: 12px; color: var(--fr-ink-dim); }
.deck-spacer { margin-left: auto; }

/* цвет наложений — круглая проба текущего цвета (обёртка над input[type=color]) */
.tele-swatch {
  display: inline-flex;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--fr-line);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  flex: none;
}
.tele-swatch:hover { border-color: var(--fr-ink-dim); }
#telestration-toolbar input[type="color"] {
  width: 200%; height: 200%;
  margin: -25%;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

#telestration-text {
  background: var(--fr-bg);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-ctl);
  color: var(--fr-ink);
  padding: 8px 12px;
  font-size: 13px;
  width: 190px;
}
#telestration-text::placeholder { color: var(--fr-ink-dim); }

#telestration-toolbar #telestration-undo,
#telestration-toolbar #telestration-save {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--fr-raised);
  color: var(--fr-ink);
  border: 1px solid var(--fr-line);
  border-radius: var(--fr-r-ctl);
  padding: 8px 13px;
  font-size: 13px;
}
#telestration-toolbar #telestration-undo .ic,
#telestration-toolbar #telestration-save .ic { width: 15px; height: 15px; }
#telestration-toolbar #telestration-undo:hover:not(:disabled),
#telestration-toolbar #telestration-save:hover:not(:disabled) { background: var(--fr-raised-hi); }

/* кнопка-герой: сюда стекается весь экран */
#telestration-export {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fr-amber);
  color: var(--fr-on-accent);
  border: 1px solid var(--fr-amber);
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 650;
  box-shadow: 0 10px 24px -10px var(--fr-amber);
}
#telestration-export .ic { width: 17px; height: 17px; }
#telestration-export:hover:not(:disabled) { background: var(--fr-amber-hi); border-color: var(--fr-amber-hi); }

#editor-hint { max-width: 1450px; margin: 10px auto 0; text-align: center; color: var(--fr-ink-dim); }

/* видимый фокус клавиатуры на всех контролах редактора */
#editor-screen button:focus-visible,
#editor-screen input:focus-visible,
#editor-screen .tele-file:focus-within,
#editor-screen .tele-swatch:focus-within {
  outline: 2px solid var(--fr-amber);
  outline-offset: 2px;
}

.draw-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 10px;
  padding: 1px 4px 1px 8px;
  font-size: 11px;
  color: #16181d;
  background: #f0c674;
  cursor: pointer;
  white-space: nowrap;
}

.draw-badge .draw-del { background: none; padding: 0 3px; color: #7a5b00; font-size: 11px; }
.draw-badge .draw-del:hover { color: #c0392b; background: none; }

#timeline-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 8px;
}

#timeline {
  position: relative;
  height: 26px;
  flex: 1;
  background: #23272f;
  border-radius: 6px;
  overflow: hidden;
}

#timeline-toggle {
  flex: 0 0 26px;
  border: none;
  background: #23272f;
  color: #ccc;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}

#timeline-toggle:hover {
  background: #2c313b;
}

#timeline-toggle .arw {
  display: inline-block;
  transition: transform 0.25s ease;
}

#timeline-toggle.open .arw {
  transform: rotate(180deg);
}

#timeline-tracks {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

#timeline-tracks.open {
  opacity: 1;
}

.tl-track {
  display: flex;
  align-items: center;
  height: 22px;
  margin-top: 4px;
}

.tl-track-label {
  flex: 0 0 92px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 6px;
  padding-left: 6px;
  /* цвет кнопки — акцентом слева, не текстом: цвет может оказаться тёмным,
     а дорожки и так на тёмном фоне — текст стал бы невидимым */
  border-left: 3px solid transparent;
  box-sizing: border-box;
}

.tl-lane {
  position: relative;
  flex: 1;
  height: 20px;
  background: #23272f;
  border-radius: 4px;
}

.tl-block {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 16px;
  border-radius: 3px;
  opacity: 0.9;
  cursor: pointer;
}

.tl-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background: rgba(255, 255, 255, 0.25);
  cursor: ew-resize;
  touch-action: none;
}

.tl-handle.left {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.tl-handle.right {
  right: 0;
  border-radius: 0 3px 3px 0;
}

.tl-handle:hover {
  background: rgba(255, 255, 255, 0.7);
}

#tl-tooltip {
  position: fixed;
  z-index: 50;
  padding: 2px 6px;
  background: #000;
  color: #fff;
  font-size: 11px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -150%);
}

/* ---------- Карта бросков ---------- */

#shot-chart { margin-top: 8px; position: relative; }

/* «прожектор»: ждём точку броска — затемняем всё и подсвечиваем карту */
body.awaiting-shot::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 40;
  pointer-events: none;
}

/* крестик выхода в углу карты (виден при подсветке) */
#shot-exit { display: none; }
body.awaiting-shot #shot-exit {
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 46;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 16px;
  background: #3d211d;
  color: #ff9d8f;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* кнопка «Готово» — только в фазе подтверждения */
#shot-confirm { display: none; }
body.shot-confirm #shot-confirm {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 5;
  background: #1f7a3d;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* вопрос «Удалить нарезку?» — по крестику */
#shot-delask { display: none; }
body.shot-delask #shot-delask {
  display: flex;
  gap: 10px;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  background: #1f232b;
  border: 1px solid #3a3f4a;
  border-radius: 10px;
  padding: 14px 16px;
  color: #e8e8e8;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}
#shot-delask button { padding: 6px 16px; border: none; border-radius: 6px; cursor: pointer; }
#shot-del-yes { background: #b3261e; color: #fff; }
#shot-del-no { background: #2a2f39; color: #e8e8e8; }
body.awaiting-shot.shot-delask #shot-prompt { display: none; }
body.awaiting-shot #shot-chart {
  position: relative;
  z-index: 45;
  box-shadow: 0 0 0 3px #2e6fd8, 0 0 40px 8px rgba(46, 111, 216, 0.55);
  border-radius: 10px;
}
#shot-prompt { display: none; }
body.awaiting-shot #shot-prompt {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  max-width: 92%;
  text-align: center;
  background: #2e6fd8;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  animation: shotPromptPulse 0.9s ease-in-out infinite alternate;
}
@keyframes shotPromptPulse {
  from { opacity: .82; }
  to { opacity: 1; box-shadow: 0 0 0 4px rgba(46, 111, 216, 0.35), 0 2px 10px rgba(0, 0, 0, 0.5); }
}

#shot-chart-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* кнопки видов переносятся, а не срезаются на узкой панели */
  gap: 6px 8px;
  font-size: 13px;
  color: #b9c2d0;
}

#shot-chart-head .sc-title { white-space: nowrap; }

/* кнопки карты — в левой колонке, двумя группами (пометка / вид), тянутся по ширине */
#shot-controls { display: flex; flex-direction: column; gap: 8px; }
#shot-controls .sc-group { display: flex; flex-wrap: wrap; gap: 6px; }
/* color тут обязателен: фон фиксирован через id (побеждает над body.theme-1c
   button), а без своего color паркетная тема красит текст в тёмный поверх
   тёмного — не видно */
#shot-controls button { flex: 1 1 auto; background: #2a2f39; color: #fff; padding: 6px 10px; font-size: 12px; }
#shot-controls #shot-all.on { background: #2e6fd8; }
#shot-controls #shot-made.on { background: #1f7a3d; }
#shot-controls #shot-missed.on { background: #a33327; }
#shot-controls #view-points.on,
#shot-controls #view-heat.on,
#shot-controls #view-zones.on { background: #2e6fd8; }

/* чья карта: обе команды или одна — рядом с видами, тем же размером */
#shot-teams { display: flex; flex-wrap: wrap; gap: 6px; }
#shot-teams button { flex: 1 1 auto; background: #2a2f39; color: #fff; padding: 5px 10px; font-size: 12px; }
#shot-teams button.on { background: #7d3fbf; }

/* зоны на схеме: заливка по проценту, подпись в центре зоны */
.zone-shape { stroke: #c9d6cd; stroke-width: 0.4; stroke-opacity: 0.5; }
.zone-label {
  fill: #fff;
  font-size: 5.5px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: #000;
  stroke-width: 0.35px;
}
.zone-label.small { font-size: 4px; }

#shot-chart-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* выбор разметки/карты — плавная выпадашка вместо <select> */
.chart-picker { position: relative; }
#chart-select-btn { background: #2a2f39; color: #fff; padding: 5px 12px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; max-width: 200px; }
#chart-select-btn #chart-select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chart-select-pop {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  min-width: 220px; max-height: 260px; overflow: auto;
  display: flex; flex-direction: column; gap: 3px; padding: 6px;
  background: #20242d; border: 1px solid #343a45; border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45); animation: chartPopIn .16s ease-out;
}
@keyframes chartPopIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.chart-opt { text-align: left; background: none; color: #cdd6e4; padding: 7px 10px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.chart-opt:hover { background: #2e343f; }
.chart-opt.on { background: #2e6fd8; color: #fff; }
body.theme-1c #chart-select-pop { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c .chart-opt { color: #3a2b1c; }
body.theme-1c .chart-opt:hover { background: #e7d9c2; }
body.theme-1c .chart-opt.on { background: #c65c2e; color: #fff; }

#chart-comment {
  flex: 1;
  min-width: 120px;
  background: #23272f;
  border: 1px solid #33465e;
  border-radius: 6px;
  color: #dfe4ea;
  padding: 4px 8px;
  font-size: 12px;
}

#shot-chart-foot button { background: #2a2f39; color: #fff; padding: 4px 10px; font-size: 12px; }
#shot-chart-foot #chart-save { background: #2e6fd8; }
#shot-chart-foot #chart-delete { background: #3d211d; color: #ff9d8f; }

/* зоны бросков: проценты по областям площадки */
#zone-stats { margin-top: 0; }

#zone-title {
  width: 100%; text-align: left;
  background: #232830; color: #cdd6e4;
  border-radius: 8px; padding: 7px 11px; font-size: 12px; font-weight: 600;
}

/* таблица зон всегда развёрнута */
#zone-table-wrap { overflow: visible; }

/* таблица зон — строки с цветной полоской процента (цвет как раскраска зон на карте) */
#zone-table { margin: 8px 0 0; font-size: 12px; }
.zt-row { display: flex; align-items: center; gap: 8px; padding: 6px 2px; border-bottom: 1px solid #262b34; }
.zt-row:last-child { border-bottom: none; }
.zt-zone { flex: 1 1 auto; min-width: 0; color: #cdd6e4; line-height: 1.25; }
.zt-made { flex: none; color: #8fa3bf; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zt-bar { flex: none; width: 44px; height: 6px; border-radius: 4px; background: #262b34; overflow: hidden; }
.zt-fill { display: block; height: 100%; border-radius: 4px; }
.zt-pct { flex: none; width: 34px; text-align: right; color: #e8e8e8; font-weight: 700; font-variant-numeric: tabular-nums; }
.zone-empty { color: #7a8699; text-align: center; padding: 8px; }
body.theme-1c .zt-row { border-bottom-color: #eaddc9; }
body.theme-1c .zt-zone { color: #3a2b1c; }
body.theme-1c .zt-made { color: #8a7457; }
body.theme-1c .zt-bar { background: #efe6d6; }
body.theme-1c .zt-pct { color: #3a2b1c; }
body.theme-1c .zone-empty { color: #a1876a; }

/* броски по игрокам (в «Сводке») */
#player-shots-table, #play-types-table {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 4px;
}
#player-shots-table td, #player-shots-table th, #play-types-table td, #play-types-table th {
  padding: 4px 12px;
  border-bottom: 1px solid #2a2f39;
  text-align: left;
}
#player-shots-table tr[data-desc], #play-types-table tr[data-desc] { cursor: pointer; }
#player-shots-table tr[data-desc]:hover, #play-types-table tr[data-desc]:hover { background: #232833; }
#player-shots-table .swatch, #play-types-table .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 4px;
}

/* индикатор незакрытых нарезок */
#recording-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: #3a2a1a;
  border: 1px solid #6b4a1f;
  border-left: 4px solid #ffab40;
  border-radius: 8px;
  font-size: 13px;
}
#recording-bar .rec-row { display: flex; align-items: center; gap: 8px; }
#recording-bar .rec-dot { color: #ff5252; animation: pulse 1s infinite alternate; }
#recording-bar .rec-name { font-weight: 600; }
#recording-bar .rec-time { color: #ffcc80; margin-left: auto; }
#recording-bar .rec-close { background: #6b4a1f; padding: 3px 10px; font-size: 12px; }

/* метрики карты — сбоку от площадки, не под ней; на узких панелях
   переносится вниз сам (flex-wrap), без отдельного медиа-запроса */
/* Карта в 3 колонки: слева кнопки/команды/статистика, посередине площадка,
   справа таблица зон (раскрывается вбок от площадки, не загораживая её).
   max-width убирает пустое поле на широком экране; на узком колонки уезжают
   вниз сами (flex-wrap). */
#shot-chart-main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; max-width: 1080px; }
#sc-left {
  flex: 0 0 208px;
  display: flex; flex-direction: column; gap: 12px;
  background: #1b1f27;
  border: 1px solid #2a2f39;
  border-radius: 12px;
  padding: 13px;
}
#sc-left #shot-stats-line { margin: 0; text-align: left; }

#court-wrap { position: relative; flex: 0 1 480px; min-width: 240px; margin-top: 0; }

#sc-right {
  flex: 1 1 240px; min-width: 190px; max-width: 340px;
  display: flex; flex-direction: column;
}
#sc-right #zone-stats {
  margin: 0;
  background: #1b1f27; border: 1px solid #2a2f39; border-radius: 12px; padding: 12px;
}

#court {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  cursor: crosshair;
  border-radius: 8px;
}

/* .combo-mini-court — мини-превью площадки в галерее/ленте шагов (app.js
   comboMiniSvg): те же классы .court-bg/.court-line, но БЕЗ id #combo-court —
   без него превью раньше рисовались сплошным чёрным прямоугольником
   (SVG-дефолт fill:black), лежала грабля до этого момента, не найденная
   прошлым CSS-аудитом — тот проверял только background-color/color у
   HTML-элементов, а тут нужен fill/stroke у SVG-фигур. */
#court .court-bg, #combo-court .court-bg, .combo-mini-court .court-bg { fill: #1d2b22; }
#court .court-line, #combo-court .court-line, .combo-mini-court .court-line { fill: none; stroke: #7fa88b; stroke-width: 0.8; }

/* Паркетная тема: площадка молочного цвета сайта (не зелёная) — только под
   theme-1c; в тёмной теме площадка остаётся зелёной (правило выше). */
body.theme-1c #court .court-bg,
body.theme-1c #combo-court .court-bg,
body.theme-1c .combo-mini-court .court-bg { fill: #fbf6ee; }
body.theme-1c #court .court-line,
body.theme-1c #combo-court .court-line,
body.theme-1c .combo-mini-court .court-line { stroke: #8a7457; }

.shot-pt { cursor: pointer; }
.shot-pt.made { fill: #35c04f; stroke: #0c3517; stroke-width: 0.4; }
.shot-pt.miss { stroke: #ff5544; stroke-width: 1; fill: none; }
.shot-pt.sel { filter: drop-shadow(0 0 2px #fff); }

#shot-heat {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: 420px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 8px;
}

#shot-stats-line { text-align: center; color: #8fa3bf; font-size: 12px; margin-top: 4px; }

/* значок «бросковая кнопка» в строке кнопки */
.tag-btn .shot-flag { background: none; padding: 2px 4px; filter: grayscale(1); opacity: 0.4; }
.tag-btn .shot-flag.on { filter: none; opacity: 1; }
.tag-btn .shot-flag:hover { opacity: 1; background: none; }

/* бейдж точки броска в строке нарезки */
.shot-badge { font-size: 11px; padding: 1px 5px; border-radius: 8px; }
.shot-badge.made { background: #1d3d26; color: #7fd694; }
.shot-badge.miss { background: #3d211d; color: #ff9d8f; }
.shot-badge .shot-del { background: none; padding: 0 3px; font-size: 11px; color: inherit; }
.shot-badge .shot-del:hover { color: #ff5544; background: none; }

.vo-badge { font-size: 11px; padding: 1px 5px; border-radius: 8px; background: #2a2140; color: #c9b6ff; }
.vo-badge .vo-play, .vo-badge .vo-del { background: none; padding: 0 3px; font-size: 11px; color: inherit; }
.vo-badge .vo-del:hover { color: #ff5544; background: none; }
.vo-badge .vo-play:hover { color: #fff; background: none; }

.timeline-clip {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  opacity: 0.9;
  cursor: pointer;
  min-width: 3px;
}

.timeline-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  pointer-events: none;
}

#buttons-pane {
  flex: 0 0 300px;
  background: #1f232b;
  border-radius: 8px;
  padding: 14px;
}

#buttons-pane h2, #clips-pane h2 { font-size: 15px; margin-bottom: 8px; color: #aab6c8; }

.hint { font-size: 12px; color: #7a8699; margin-bottom: 12px; }

#tag-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.tag-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 10px 12px;
  background: #2a2f39;
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
}

.tag-btn.recording {
  border-color: #fff;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }

.tag-btn .swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; }
.tag-btn .name { flex: 1; font-size: 15px; }
.tag-btn .key {
  background: #16181d;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 12px;
  color: #8fa3bf;
}
.tag-btn .del { background: none; padding: 2px 6px; color: #7a8699; font-size: 14px; }
.tag-btn .del:hover { color: #e74c3c; background: none; }
.tag-btn .del[data-confirm] { color: #e74c3c; font-weight: 700; }

.rename-input {
  flex: 1;
  background: #16181d;
  border: 1px solid #2e6fd8;
  border-radius: 4px;
  color: #e8e8e8;
  padding: 3px 8px;
  font-size: 15px;
  min-width: 0;
}
.tag-btn.disabled { opacity: 0.55; }

#add-button-form { display: flex; gap: 6px; }
#add-button-form input[type="text"] {
  flex: 1;
  background: #16181d;
  border: 1px solid #2e333d;
  border-radius: 6px;
  color: #e8e8e8;
  padding: 7px 10px;
  min-width: 0;
}
#add-button-form input[type="color"] {
  width: 38px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
}

/* ---------- Дескрипторы ---------- */

.pane-section { margin-top: 16px; }

#descriptors { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.desc-group-name {
  font-size: 11px;
  color: #7a8699;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.desc-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.desc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #2a2f39;
  border-radius: 14px;
  padding: 4px 9px;
  font-size: 13px;
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
}

.desc-chip.idle { opacity: 0.55; }
.desc-chip.active { border-color: #fff; }
.desc-chip .swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.desc-chip .del { background: none; padding: 0 2px; color: #7a8699; font-size: 12px; }
.desc-chip .del:hover { color: #e74c3c; background: none; }
.desc-chip .del[data-confirm] { color: #e74c3c; font-weight: 700; }

#add-descriptor-form { display: flex; gap: 6px; }
#add-descriptor-form input[type="text"] {
  flex: 1;
  background: #16181d;
  border: 1px solid #2e333d;
  border-radius: 6px;
  color: #e8e8e8;
  padding: 7px 10px;
  min-width: 0;
}
#add-descriptor-form input[type="color"] {
  width: 38px;
  height: 34px;
  border: none;
  background: none;
  cursor: pointer;
}
#add-descriptor-form button { padding: 7px 12px; }

.clip-row .badges { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.desc-badge {
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.desc-badge:hover { text-decoration: line-through; }

.clip-row.active-clip { background: #232a35; outline: 1px solid #2e6fd8; border-radius: 4px; }

.clip-row.selected { background: #26313f; outline: 1px solid #8fa3bf; border-radius: 4px; }
.clip-row { cursor: pointer; }

.clip-row .note.has-note { color: #f0c674; }
.clip-row .note:not(.has-note) { opacity: 0.45; }
.clip-row .note:hover { opacity: 1; background: none; }

.note-editor { padding: 2px 10px 8px 44px; }
.note-editor textarea {
  width: 100%;
  max-width: 560px;
  background: #16181d;
  border: 1px solid #2e6fd8;
  border-radius: 6px;
  color: #e8e8e8;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}
body.theme-1c .note-editor textarea { background: #fff; border-color: #c65c2e; color: #3a2b1c; }

.clip-row .edge { display: inline-flex; gap: 2px; }
.clip-row .nudge {
  background: #23272f;
  color: #7a8699;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  border-radius: 4px;
}
.clip-row .nudge:hover { color: #fff; background: #2e6fd8; }

#clips-pane { padding: 0 16px 16px; }

.clip-group { margin-bottom: 12px; }

.clip-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #1f232b;
  font-weight: 600;
  cursor: pointer; /* клик по заголовку сворачивает блок */
}

.clip-group-header .blk-caret {
  display: inline-block; /* к строчным span трансформ (rotate) не применяется */
  color: #8fa3bf;
  font-size: 12px;
  transition: transform 0.2s ease;
}
.clip-group-header.collapsed .blk-caret { transform: rotate(-90deg); }

/* строки блока — плавный «выезд» при сворачивании/разворачивании */
.clip-group-rows {
  overflow: hidden;
  max-height: 4000px;
  transition: max-height 0.28s ease;
}
.clip-group-rows.collapsed { max-height: 0; }

.clip-group-header .count { color: #8fa3bf; font-weight: 400; font-size: 13px; }
.clip-group-header .move { background: none; padding: 2px 6px; color: #8fa3bf; }
.clip-group-header .move:hover { color: #fff; background: none; }
.clip-group-header .dl-block { background: none; padding: 2px 6px; color: #8fa3bf; }
.clip-group-header .dl-block:hover { color: #4fa3ff; background: none; }
.clip-group-header .play-block { background: none; padding: 2px 6px; color: #8fa3bf; }
.clip-group-header .play-block:hover { color: #4caf50; background: none; }

.clip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 24px;
  font-size: 14px;
  color: #c9d3e0;
}

.clip-row:hover { background: #1c2027; }
.clip-row .t { font-variant-numeric: tabular-nums; }
.clip-row .dur { color: #7a8699; font-size: 12px; }
.clip-row button { background: none; padding: 2px 8px; font-size: 14px; }
.clip-row .play:hover { color: #4caf50; background: none; }
.clip-row .dl:hover { color: #4fa3ff; background: none; }
.clip-row .del:hover { color: #e74c3c; background: none; }

.empty-note { color: #667; font-size: 13px; padding: 4px 24px; }

/* ---------- Фильтр нарезок ---------- */

#filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: #1f232b;
  border-radius: 6px;
}

.filter-label { font-size: 13px; color: #7a8699; }

#filter-button {
  background: #16181d;
  border: 1px solid #2e333d;
  border-radius: 6px;
  color: #e8e8e8;
  padding: 5px 8px;
  font-size: 13px;
}

#filter-buttons, #filter-descriptors { display: inline-flex; flex-wrap: wrap; gap: 6px; }
/* чипы-кнопки (одиночный выбор) чуть отличаются от меток фоном */
.filter-chip.is-button { background: #33383f; }
.filter-chip.is-button.on { border-color: #2e6fd8; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #2a2f39;
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 12px;
  cursor: pointer;
  border: 2px solid transparent;
  user-select: none;
  opacity: 0.7;
}

.filter-chip:hover { opacity: 1; }
.filter-chip.on { border-color: #2e6fd8; opacity: 1; }
.filter-chip .swatch { width: 9px; height: 9px; border-radius: 50%; }

/* плавный выезд чипов при появлении (смена проекта / добавление меток) */
.filter-chip.chip-in { animation: filterChipIn 0.25s ease backwards; }
@keyframes filterChipIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 0.7; transform: none; } }
.filter-chip.chip-in.on { animation-name: filterChipInOn; }
@keyframes filterChipInOn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* разделитель групп дескрипторов — перенос на новую строку, метки одной группы рядом */
.filter-gap { flex-basis: 100%; height: 2px; }

#filter-reset { background: #3a3f4a; padding: 5px 10px; font-size: 13px; }
#filter-reset:hover { background: #4a5160; }

#filter-info { font-size: 12px; color: #8fa3bf; }

/* легенда цветов дескрипторов — что каким цветом помечено у нарезок */
.desc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; padding: 8px 11px; background: #1f232b; border-radius: 8px; font-size: 12px; color: #cdd6e4; }
.dl-item { display: inline-flex; align-items: center; gap: 6px; }
.dl-sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dl-mean { color: #7a8699; }
body.theme-1c .desc-legend { background: #fbf6ee; border: 1px solid #e7d9c2; color: #3a2b1c; }
body.theme-1c .dl-mean { color: #8a7457; }

/* ---------- Статистика ---------- */

#stats-pane { padding: 0 16px 16px; }

/* сводка бывает шире панели (много кнопок × дескрипторов) — свой горизонтальный скролл,
   чтобы таблица не ломала верстку и не тянула всю панель вбок */
#stats-table-wrap, #player-shots-wrap, #play-types-wrap { overflow-x: auto; }

/* подсказка после «+ типы атаки»: куда делись метки */
.preset-note {
  margin: 6px 0 2px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  color: #d7e0ee;
  background: #21303f;
  border-left: 3px solid #4a90d9;
  border-radius: 6px;
  animation: presetNoteIn 0.2s ease;
}
@keyframes presetNoteIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

#stats-details summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #aab6c8;
  user-select: none;
  padding: 6px 0;
}

.stats-table {
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 14px;
}

.stats-table th, .stats-table td {
  padding: 6px 12px;
  border: 1px solid #2e333d;
  text-align: center;
}

.stats-table tr:first-child th { background: #1f232b; font-weight: 600; }

.stats-table tr:not(:first-child) th {
  background: #1f232b;
  text-align: left;
  font-weight: 600;
}

.stats-table .swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}

.stats-table td.clickable { cursor: pointer; }
.stats-table td.clickable:hover { background: #2a3240; }

#export-csv { margin-top: 10px; font-size: 13px; padding: 6px 12px; }

.stats-table .stat-num { font-variant-numeric: tabular-nums; }
.stats-table .stat-zero { color: #4a5160; }
.stats-table .total-col { background: #1c2027; font-weight: 600; }

/* ---------- Экран «Статистика»: PPP по игрокам ---------- */

#stats-screen { padding: 22px 20px; max-width: 980px; }
#stats-screen h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: #f0f2f5; margin-bottom: 14px; }
#stats-screen h2 .muted { color: #7a8699; font-weight: 400; font-size: 16px; }
#stats-screen .hint { font-size: 12.5px; line-height: 1.5; color: #7e8b9e; max-width: 760px; }

/* переключатель режима — сегментированный контрол */
.stats-mode-switch {
  display: inline-flex; gap: 3px; margin-bottom: 18px;
  padding: 4px; background: #1a1d23; border: 1px solid #262b34; border-radius: 11px;
}
.mode-btn {
  padding: 7px 16px; border: none; background: transparent; color: #97a3b6;
  border-radius: 8px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px;
  transition: background .12s, color .12s;
}
.mode-btn:hover:not(.active) { color: #e8e8e8; background: #242932; }
.mode-btn.active { background: #2e6fd8; color: #fff; }
#season-links { width:100%; box-sizing:border-box; font:inherit; padding:10px 12px; background:#16181d; border:1px solid #2b3038; border-radius:10px; color:#e8e8e8; }
#season-links:focus, #ppp-url:focus { outline: none; border-color: #2e6fd8; box-shadow: 0 0 0 3px rgba(46,111,216,.16); }
.season-actions { margin:10px 0; }

#ppp-bar { display: flex; gap: 8px; margin: 4px 0 16px; max-width: 640px; }
#ppp-url {
  flex: 1;
  background: #16181d;
  border: 1px solid #2b3038;
  border-radius: 10px;
  color: #e8e8e8;
  padding: 11px 14px;
  font-size: 15px;
  min-width: 0;
}
#ppp-go { padding: 11px 20px; font-size: 15px; font-weight: 600; background: #2e6fd8; color: #fff; border: none; border-radius: 10px; cursor: pointer; }
#ppp-go:hover { background: #2a63c0; }

.msg { padding: 11px 14px; border-radius: 9px; margin: 12px 0; font-size: 14px; }
.msg.err { background: #3a1d1d; color: #f2a5a5; }
.msg.info { background: #1f2733; color: #9cb2cc; }

.ppp-meta { color: #8b98ab; margin: 8px 0 22px; font-size: 15px; font-weight: 500; }

/* таблицы вписываются по ширину экрана — без отдельной прокрутки на каждую */
.ppp-table-scroll { margin: 0 0 30px; }
.ppp-table-scroll .ppp-table { width: 100%; min-width: 0; margin: 0; }

.ppp-table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 30px;
}
.ppp-table caption {
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #f0f2f5;
  padding: 0 0 12px;
}
.ppp-table th, .ppp-table td {
  padding: 6px 6px;
  text-align: right;
  border: none;
  border-bottom: 1px solid #1f232b;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* числа не рвём (например «6/10»), а колонку имени переносим */
.ppp-table td, .ppp-table th { white-space: nowrap; }
.ppp-table th.pl, .ppp-table td.pl { white-space: normal; }
.ppp-table thead th {
  color: #7d8aa0;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid #303845;
}
.ppp-table th.pl, .ppp-table td.pl { text-align: left; font-variant-numeric: normal; }
.ppp-table:not(.season-table) tbody tr:nth-child(even) td { background: rgba(255,255,255,.017); }
.ppp-table tbody tr:hover td { background: #1c212b; }
.ppp-table td.ppp-val { font-weight: 700; color: #eef1f5; }
.ppp-table tr.low td { color: #5f6b7a; }
.ppp-table tbody tr:last-child td { border-bottom: none; }

/* продвинутая командная аналитика на вкладке «Статистика» */
.adv-h {
  margin: 34px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #eef1f5;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding-left: 12px;
  border-left: 3px solid #2e6fd8;
}

/* сводка-расшифровка под блоком статистики */
.stat-sum {
  margin: 12px 0 4px;
  padding: 11px 14px;
  background: #191d26;
  border: 1px solid #232a35;
  border-left: 3px solid #4fa3ff;
  border-radius: 9px;
  color: #c4cfdd;
  font-size: 13px;
  line-height: 1.5;
  max-width: 760px;
}

.ff-table td.ff-win { color: #35c04f; font-weight: 700; }

.atk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.atk-team { flex: 0 0 150px; text-align: right; color: #9aa7ba; font-size: 13.5px; }
.atk-bar {
  flex: 1;
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  background: #1b1f27;
}
.atk-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #101216;
  min-width: 18px;
}
.atk-seg.two { background: #4caf50; }
.atk-seg.three { background: #b17be0; }
.atk-seg.ft { background: #f0c674; }

.atk-legend .atk-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  vertical-align: -1px;
}
.atk-key.two { background: #4caf50; }
.atk-key.three { background: #b17be0; }
.atk-key.ft { background: #f0c674; }

/* ---------- Всплывающий плеер нарезки ---------- */

#clip-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 20px;
}

.clip-modal-box {
  background: #1f232b;
  border: 1px solid #2e333d;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 88vw;
  max-height: 90vh;
}

.clip-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e8e8e8;
  font-size: 15px;
  font-weight: 600;
}

#clip-modal-title { flex: 1; }

#clip-modal-close {
  background: none;
  color: #8fa3bf;
  padding: 2px 8px;
  font-size: 18px;
  line-height: 1;
}
#clip-modal-close:hover { color: #e74c3c; background: none; }

.clip-modal-video-wrap { position: relative; display: inline-block; overflow: hidden; }
/* Плашка «стоп-кадр — нажмите ▶»: снизу по центру поверх видео, поверх канваса телестрации */
#clip-modal-hold {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(13, 15, 19, 0.9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #3a4150;
  white-space: nowrap;
  pointer-events: none;
}
#clip-modal-hold[hidden] { display: none; }
#clip-modal-video {
  display: block;
  max-width: 84vw;
  max-height: 74vh;
  border-radius: 6px;
  background: #000;
  cursor: pointer;
}
/* чёрная заставка с названием нарезки поверх видео */
#clip-modal-card {
  position: absolute;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  font-size: 30px;
  font-weight: 700;
  border-radius: 6px;
}
#clip-modal-card[hidden] { display: none; }

/* YouTube/ВК в окне нарезок: свежий плеер #clip-modal-embed на всю область окна */
.clip-modal-video-wrap.cm-embed { width: 78vw; height: 68vh; max-width: 84vw; max-height: 74vh; }
#clip-modal-embed { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; }
#clip-modal-embed iframe { width: 100%; height: 100%; border: 0; }

#clip-modal-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 2px 4px;
}

#clip-modal-play {
  background: none;
  color: #e8e8e8;
  font-size: 15px;
  padding: 2px 8px;
}
#clip-modal-play:hover { background: none; color: #4caf50; }

#clip-modal-prev, #clip-modal-next {
  background: none;
  color: #e8e8e8;
  font-size: 20px;
  line-height: 1;
  padding: 0 8px;
}
#clip-modal-prev:hover, #clip-modal-next:hover { background: none; color: #4fa3ff; }
#clip-modal-prev:disabled, #clip-modal-next:disabled { background: none; color: #555; }

/* дескрипторы и заметка текущей нарезки в окне */
#clip-modal-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 2px 2px;
  font-size: 12px;
}
#clip-modal-info .mi-desc {
  padding: 1px 8px;
  border-radius: 9px;
  color: #101216;
  font-weight: 600;
}
#clip-modal-info .mi-note { color: #f0c674; }

/* вырез табло в диагностике: крупно и без сглаживания — видно каждый пиксель */
.clock-peek {
  width: 360px;
  max-width: 100%;
  image-rendering: pixelated;
  border: 1px solid #3a414d;
  border-radius: 4px;
  margin-top: 4px;
}

/* шкала вокруг нарезки: серое — контекст до/после, синее — сама нарезка */
#clip-modal-bar {
  position: relative;      /* ручки позиционируются от неё */
  flex: 1;
  min-width: 140px;
  height: 14px;
  background: #2a2f39;
  border-radius: 4px;
  cursor: pointer;
  overflow: visible;       /* ручки выше полосы — обрезать нельзя */
}
#clip-modal-scrub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 12px;
}
#clip-modal-scrub .cm-hint { font-size: 11px; color: #8b95a5; white-space: nowrap; }
/* на узком экране подсказка съедала бы половину шкалы — прячем, тултип остаётся */
@media (max-width: 700px) { #clip-modal-scrub .cm-hint { display: none; } }
#clip-modal-sel {
  position: absolute;
  top: 0;
  height: 100%;
  background: #2e6fd8;
  border-radius: 4px;
  pointer-events: none;
}
#clip-modal-bar .cm-handle {
  position: absolute;
  top: -3px;
  width: 9px;
  height: 20px;
  margin-left: -4px;
  background: #eaeaea;
  border: 1px solid #1b1f27;
  border-radius: 3px;
  cursor: ew-resize;
}
#clip-modal-bar .cm-handle:hover { background: #fff; }
#clip-modal-cursor {
  position: absolute;
  top: -2px;
  width: 2px;
  height: 18px;
  margin-left: -1px;
  background: #f5c518;
  pointer-events: none;
}

/* составы игр — режим «Игрок за период» */
.roster-game { margin:10px 0; }
.rg-head { font-weight:600; margin-bottom:4px; color:#aab6c8; }
.roster-pl { display:inline-flex; gap:6px; align-items:center; margin:2px; padding:4px 8px; border:1px solid #2e333d; background:#2a2f39; color:#e8e8e8; border-radius:6px; cursor:pointer; }
.roster-pl:hover:not(.sel) { background:#343a45; }
.roster-pl.sel { background:#2e6fd8; color:#fff; border-color:#2e6fd8; }
.roster-pl .rp-num { opacity:.6; }

/* итоговая карточка игрока — режим «Игрок за период» */
.pl-card { margin:14px 0; padding:10px; border:1px solid #2e333d; border-radius:8px; background:#1f232b; }
.pl-card-head { font-size:1.05em; margin-bottom:6px; }
.season-table { font-size:11px; }
/* 23 колонки должны влезать в страницу без горизонтальной прокрутки —
   перебиваем крупный padding .ppp-table узким */
.season-table th, .season-table td { padding:3px 4px; }
.season-table .sum-row { font-weight:600; background:#232a34; }
.season-games, .season-groups { margin-top:8px; }
.season-games summary, .season-groups summary { cursor:pointer; color:#8fa3bf; }
.lg-block { margin:8px 0; }
.season-export { margin:12px 0; display:flex; gap:8px; }

@media print {
  /* иначе Chrome по умолчанию не печатает фоновые цвета (economy) — из-за этого
     полоса «Структура атаки» уходила в печать без цвета */
  #season-result, #ppp-result, #season-result *, #ppp-result * {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
  body * { visibility: hidden; }
  #season-result, #season-result *, #ppp-result, #ppp-result * { visibility: visible; }
  #season-result, #ppp-result {
    position: absolute; left: 0; top: 0; width: 100%;
    color: #000; background: #fff;
  }
  /* своя прокрутка на экране — на печати не нужна, иначе колонки за краем обрежутся */
  .ppp-table-scroll { overflow: visible; }
  /* тёмная тема → на бумаге всё чёрным по белому */
  #season-result .pl-card { background: #fff; border-color: #999; }
  #season-result .season-table .sum-row { background: #eee; }
  #season-result .pl-card-head, #season-result .rg-head, #season-result td, #season-result th { color: #000; }
  #ppp-result td, #ppp-result th, #ppp-result caption, #ppp-result .adv-h, #ppp-result .atk-team, #ppp-result .ppp-meta { color: #000; }
  #ppp-result tr.low td { color: #666; }
  #ppp-result .stat-sum { background: #eee; color: #000; }
  #ppp-result .atk-bar { background: #eee; }
  /* раскрытые details печатаем целиком, свёрнутые заголовки прячем */
  .season-games summary, .season-groups summary { display: none; }
  .season-games[open] > *, .season-groups[open] > * { display: revert; }
  /* сами кнопки на бумагу не идут */
  .card-pdf, .card-csv, .season-export { display: none; }
  /* «PDF по одному»: печатаем только помеченную карточку, остальное убираем */
  body.print-solo #season-result > :not(.pl-card) { display: none; }
  body.print-solo #season-result .pl-card:not(.print-solo) { display: none; }
}

.card-pdf, .card-csv {
  margin-left: 8px; padding: 2px 8px; font-size: 12px;
  background: #2a2f39; border: 1px solid #3a3f4a; border-radius: 5px; cursor: pointer;
}
.card-pdf:hover, .card-csv:hover { background: #343a45; }

#clip-modal-time {
  color: #8fa3bf;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 86px;
  text-align: right;
}

#season-year-bar { margin:8px 0; }
#season-year { background:#16181d; border:1px solid #2e333d; color:#e8e8e8; border-radius:6px; padding:4px 8px; font:inherit; }

.lg-opps { color:#8fa3bf; font-size:12px; margin:2px 0 6px; }

/* ---------- Раскладка C: полосы иконок + выезжающие ящики ---------- */
#video-screen { position: relative; display: flex; align-items: flex-start; }
#vs-content { flex: 1; min-width: 0; }
.rail-btn {
  width: 100%; padding: 9px 12px; font-size: 13px; text-align: left;
  background: #2a2f39; border: 1px solid #2e333d; border-radius: 8px;
  color: #cdd6e4; cursor: pointer; white-space: normal; line-height: 1.3;
}
.rail-btn:hover:not(.active) { background: #343a45; }
.rail-btn.active { background: #2e6fd8; border-color: #2e6fd8; color: #fff; }

/* разделитель между основными кнопками рейла и вторичными (рисовать/пауза/раскладка/тема) */
.rail-sep { height: 1px; background: #2e333d; margin: 4px 2px; }
/* флайаут-попап у иконки рейла (раскладка/тема) — открывается вбок, в сторону видео */
.rail-flyout-wrap { position: relative; }
.rail-flyout {
  position: absolute; left: calc(100% + 8px); top: 0; z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px; padding: 12px;
  background: #20242d; border: 1px solid #343a45; border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
  transform-origin: left top;
  animation: railFlyoutIn .26s cubic-bezier(.16, .8, .3, 1); /* заметно выезжает при открытии (display none→flex запускает анимацию) */
}
@keyframes railFlyoutIn {
  from { opacity: 0; transform: translateX(-22px) scale(.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
/* варианты внутри флайаута (тема/раскладка) — кнопки вместо <select> */
.flyout-opts { display: flex; flex-direction: column; gap: 6px; }
.flyout-opt { text-align: left; padding: 8px 11px; border-radius: 7px; border: 1px solid #343a45; background: #262b34; color: #cdd6e4; cursor: pointer; font-size: 13px; }
.flyout-opt:hover { background: #2e343f; }
.flyout-opt.active { background: #c65c2e; border-color: #c65c2e; color: #fff; }
body.theme-1c .flyout-opt { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; border-radius: 7px; }
body.theme-1c .flyout-opt.active { background: #c65c2e; border-color: #c65c2e; color: #fff; }
/* ящики в потоке ПОД видео — при открытии не наезжают на плеер */
.drawer { display: none; }
.drawer.open { display: block; max-height: 46vh; overflow: auto; margin-top: 10px; background: #1f232b; border: 1px solid #2e333d; border-radius: 12px; padding: 14px 16px; animation: drawerUp .2s ease; }
@keyframes drawerUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* левая полоса: все переключатели панелей, кнопки с подписями */
#left-rail { flex: 0 0 190px; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; align-self: stretch; border-right: 1px solid #262b34; }

/* переключатель режимов «Ручная нарезка» ↔ «Автонарезка» */
.rail-modes { display: flex; flex-direction: column; gap: 6px; }
.rail-mode { text-align: left; padding: 9px 12px; border-radius: 8px; border: 1px solid #2e333d; background: #232830; color: #cdd6e4; cursor: pointer; font-size: 13px; font-weight: 600; }
.rail-mode.active { background: #c65c2e; border-color: #c65c2e; color: #fff; }
.rail-modegroup { display: flex; flex-direction: column; gap: 8px; overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px); transition: max-height .28s ease, opacity .2s ease, transform .28s ease; }
.rail-modegroup.open { max-height: 340px; opacity: 1; transform: none; }
body.theme-1c .rail-mode { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; border-radius: 8px; }
body.theme-1c .rail-mode.active { background: #c65c2e; border-color: #c65c2e; color: #fff; }
/* боковые варианты ящиков убраны — теперь все выезжают снизу */
/* формы настройки прячем, пока не нажали «+ Настроить» */
.setup-btn { float: right; font-size: 12px; padding: 3px 10px; background: #2a2f39; border: 1px solid #2e333d; border-radius: 6px; color: #cdd6e4; cursor: pointer; }
#buttons-pane .setup-form { display: none; }
#buttons-pane.setup-on .setup-form { display: flex; }

/* ======================================================================
   ТЕМЫ (переключатель #theme-switch, класс на <body>). Красим только
   общую «раму» приложения — цвета кнопок событий/карт остаются заданными
   пользователем (инлайн-стили из app.js), их темы не трогают.
   ====================================================================== */

/* ---------- 1c «Паркетный»: тёплый, терракотовый акцент ---------- */
body.theme-1c { background: #f4ece0; color: #3a2b1c; }
body.theme-1c #toolbar { background: #fbf6ee; border-bottom-color: #e7d9c2; }
body.theme-1c #toolbar h1 { color: #3a2b1c; font-weight: 800; }
body.theme-1c #status, body.theme-1c .hint { color: #8a7457; }
/* .tb-group не покрыт общим button:hover темы — без этого на паркете
   подсвечивался тёмным (цвет из тёмной темы) */
body.theme-1c .tb-group:hover { background: #e7d9c2; }
body.theme-1c #screen-nav { background: #f4ece0; border-radius: 999px; }
body.theme-1c #screen-nav button { color: #8a7457; border-radius: 999px; }
body.theme-1c #screen-nav button:hover:not(:disabled) { background: #e7d9c2; color: #3a2b1c; }
body.theme-1c #screen-nav button.active { background: #c65c2e; color: #fff; }
body.theme-1c button, body.theme-1c .file-btn, body.theme-1c #theme-switch, body.theme-1c #layout-mode,
body.theme-1c #video-url, body.theme-1c #chart-select, body.theme-1c #chart-comment {
  background: #fbf6ee; color: #3a2b1c; border: 1px solid #e7d9c2; border-radius: 999px;
  font-weight: 700;
}
body.theme-1c button:hover:not(:disabled) { background: #e7d9c2; }
body.theme-1c button:disabled { background: #f4ece0; color: #c2b39c; }
body.theme-1c .file-btn { background: #3a2b1c; color: #fbf6ee; border-color: #3a2b1c; }
body.theme-1c .file-btn:hover { background: #4d3a26; }
body.theme-1c .rail-btn.active,
body.theme-1c #shot-controls #shot-all.on,
body.theme-1c #shot-controls #shot-made.on,
body.theme-1c #shot-controls #view-points.on,
body.theme-1c #shot-controls #view-heat.on,
body.theme-1c #shot-controls #view-zones.on,
body.theme-1c #shot-teams button.on,
body.theme-1c #shot-chart-foot #chart-save { background: #c65c2e; color: #fff; border-color: #c65c2e; }
body.theme-1c #shot-controls #shot-missed.on { background: #a24b3f; color: #fff; border-color: #a24b3f; }
body.theme-1c .shot-pt.made { fill: #35c04f; }
body.theme-1c .shot-pt.miss { stroke: #a24b3f; }
body.theme-1c .shot-badge.made { background: #c7ebcd; color: #1e6b39; border: 1px solid #86c795; }
body.theme-1c .shot-badge.miss { background: #f6cfc7; color: #9c3324; border: 1px solid #e2a294; }
body.theme-1c #video-wrap { border-radius: 21px; border: 3px solid #fbf6ee; box-shadow: 0 10px 30px rgba(58, 43, 28, .15); }
body.theme-1c #timeline, body.theme-1c #timeline-toggle, body.theme-1c .tl-lane { background: #fbf6ee; border: 1px solid #e7d9c2; border-radius: 999px; }
body.theme-1c #buttons-pane, body.theme-1c .drawer.open { background: #fbf6ee; border-color: #e7d9c2; border-radius: 21px; }
body.theme-1c .tag-btn, body.theme-1c .clip-group-header { background: #fbf6ee; border: 1px solid #e7d9c2; border-radius: 999px; }
body.theme-1c .clip-row:hover { background: #f0e6d6; }
/* выбранная/активная нарезка в паркете — светлая плашка + кирпичный контур
   (без этого горела тёмным, как в тёмной теме) */
body.theme-1c .clip-row.active-clip { background: #f0e6d6; outline-color: #c65c2e; }
body.theme-1c .clip-row.selected { background: #f0e6d6; outline-color: #c65c2e; }
body.theme-1c .rail-btn { background: #fbf6ee; border-color: #e7d9c2; color: #8a7457; border-radius: 16px; }
/* эти :hover заданы через id/более специфичный класс — общее body.theme-1c
   button:hover их не перебивает, без своей темы оставались тёмными */
body.theme-1c #filter-reset:hover { background: #e7d9c2; }
body.theme-1c .stats-table td.clickable:hover { background: #f0e6d6; }
body.theme-1c #player-shots-table tr[data-desc]:hover, body.theme-1c #play-types-table tr[data-desc]:hover { background: #f0e6d6; }

/* Аудит контраста (паркетная тема): фон у этих компонентов никогда не был
   темизирован — оставался тёмным, а текст наследовал паркетный тёмно-
   коричневый от body → тёмное на тёмном, почти не видно. */
body.theme-1c .desc-chip, body.theme-1c .filter-chip { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c .desc-chip.active { border-color: #c65c2e; }
/* фильтр-бар нарезок целиком — фон был тёмным #1f232b без светлого варианта */
body.theme-1c #filter-bar { background: #fbf6ee; border: 1px solid #e7d9c2; }
body.theme-1c .filter-label { color: #8a7457; }
body.theme-1c .filter-chip.is-button { background: #f0e6d2; }
body.theme-1c .filter-chip { color: #3a2b1c; }
body.theme-1c .filter-chip.on { border-color: #c65c2e; }
body.theme-1c #filter-reset { background: #efe6d6; color: #6b5943; }
body.theme-1c #filter-info { color: #8a7457; }
body.theme-1c #buttons-pane h2, body.theme-1c #clips-pane h2 { color: #3a2b1c; }
/* ── светлая тема «Паркетная»: панель автонарезки (редизайн 1a) ── */
body.theme-1c #import-pane h2 { color: #3a2b1c; }
body.theme-1c #import-pane h2 .muted { color: #8a7457; }
body.theme-1c .import-desc { color: #8a7457; }
body.theme-1c .slabel { color: #a1876a; }
body.theme-1c #import-url, body.theme-1c #import-video-url, body.theme-1c #import-pre, body.theme-1c #import-post { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }
body.theme-1c #import-load, body.theme-1c #import-video-open { background: #3a2b1c; color: #fbf6ee; }
body.theme-1c #import-load:hover, body.theme-1c #import-video-open:hover { background: #4d3a26; }
body.theme-1c .import-row label { color: #6b5943; }
body.theme-1c .import-div { background: #e7d9c2; }
/* статус */
body.theme-1c #import-status .msg.info { background: #fbf1e4; border-color: #f0e0cc; border-left-color: #2e7d46; color: #6b5943; }
body.theme-1c #import-status .msg.err { background: #f5ddd8; border-color: #ecc9c1; border-left-color: #a24b3f; color: #a24b3f; }
body.theme-1c #import-status .msg b { color: #3a2b1c; }
/* чипы */
body.theme-1c #import-cats label { background: #fdf9f2; border-color: #e7d9c2; color: #8a7457; }
body.theme-1c #import-cats label:hover { border-color: #d8c8ad; }
body.theme-1c #import-cats input[type="checkbox"] { background: #fff; border-color: #d8c8ad; }
body.theme-1c #import-cats input[type="checkbox"]:checked { background: #c65c2e; border-color: #c65c2e; }
body.theme-1c #import-cats label:has(input:checked) { background: #fff; border-color: #c65c2e; color: #3a2b1c; }
body.theme-1c #import-cats .cat-n { background: #f0e6d6; color: #8a7457; }
body.theme-1c #import-cats label:has(input:checked) .cat-n { background: #fbeee6; color: #c65c2e; }
/* тумблеры */
body.theme-1c .import-toggle { color: #8a7457; }
body.theme-1c .import-toggle:has(input:checked) { color: #3a2b1c; }
body.theme-1c .import-toggle input[type="checkbox"] { background: #e2d4bd; }
body.theme-1c .import-toggle input[type="checkbox"]:checked { background: #c65c2e; }
/* плашка первого события */
body.theme-1c #import-anchor { background: #fbf1e4; border-color: #f0e0cc; color: #6b5943; }
body.theme-1c .anchor-ic { color: #c65c2e; }
body.theme-1c .anchor-body b { color: #3a2b1c; }
body.theme-1c #import-anchor .anchor-set { color: #2e7d46; }
body.theme-1c #import-anchor button { border-color: #3a2b1c; color: #3a2b1c; }
body.theme-1c #import-anchor button:hover { background: #f0e0cc; }
/* подвал */
body.theme-1c #import-actions { border-top-color: #eaddc9; }
body.theme-1c #import-create { background: #2e7d46; box-shadow: 0 4px 12px rgba(46, 125, 70, .3); }
body.theme-1c #import-create:hover { background: #34924f; }
body.theme-1c #import-clear, body.theme-1c #import-fixclock, body.theme-1c #import-autolearn, body.theme-1c #import-checkclock { background: #fdf9f2; border-color: #e7d9c2; color: #6b5943; }
body.theme-1c #import-clear:hover, body.theme-1c #import-fixclock:hover, body.theme-1c #import-autolearn:hover, body.theme-1c #import-checkclock:hover { background: #e7d9c2; }
body.theme-1c #import-count { color: #8a7457; }
body.theme-1c #import-count b { color: #3a2b1c; }
body.theme-1c .clip-row { color: #5a4a38; }
body.theme-1c .clip-row .dur { color: #8a7457; }
body.theme-1c .clip-group-header .count { color: #8a7457; }
body.theme-1c #shot-chart-head { color: #8a7457; }
body.theme-1c #sc-left, body.theme-1c #sc-right #zone-stats { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c #shot-stats-line { color: #8a7457; }
body.theme-1c #zone-title { background: #efe6d6; color: #6b5943; }
body.theme-1c #zone-table { color: #5a4a38; }
body.theme-1c #zone-table .zone-empty { color: #a1876a; }
body.theme-1c #stats-details summary { color: #3a2b1c; }
body.theme-1c .stats-table tr:first-child th,
body.theme-1c .stats-table tr:not(:first-child) th,
body.theme-1c .stats-table .total-col { background: #f0e6d6; }
/* Редактор видео (#editor-screen) следует теме сайта — токены заданы на самом
   #editor-screen (тёмная, синий акцент) и в ветке body.theme-1c (паркет). */
/* окно нарезок (клик по ▶) целиком не было темизировано — тёмный бокс всегда */
body.theme-1c .clip-modal-box { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c .clip-modal-head { color: #3a2b1c; }
body.theme-1c #clip-modal-close { color: #8a7457; }
body.theme-1c #clip-modal-close:hover { color: #a24b3f; }
body.theme-1c #clip-modal-play, body.theme-1c #clip-modal-prev, body.theme-1c #clip-modal-next { color: #3a2b1c; }
body.theme-1c #clip-modal-time { color: #8a7457; }
body.theme-1c #clip-modal-scrub .cm-hint { color: #a1876a; }
body.theme-1c #clip-modal-bar { background: #e7d9c2; }

/* ======================================================================
   СВОБОДНЫЕ ОКНА (экран «Видео», широкий экран). На узком экране (см. порог
   DESKTOP_MODE в app.js) .win остаётся "невидимым" (display:contents) —
   работает старое поведение доков/.drawer без единой новой строки CSS.
   ====================================================================== */

.win, .win-body { display: contents; }
.win-head, .win-resize, .win-close, .win-order { display: none; }

#reset-layout, #remember-layout { display: none; }

/* ---------- Обычная раскладка: несколько открытых панелей стопкой под
   видео, порядок переставляют кнопки ▲/▼ (перетаскивание оказалось
   неудобным — легко промахнуться мимо заголовка) ---------- */
body:not(.windows-mode) .win:has(.drawer.open) .win-head {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  margin-top: 10px;
  background: #1f232b;
  border: 1px solid #2e333d;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  font-size: 12px;
  color: #aab6c8;
  user-select: none;
}
body:not(.windows-mode) .win:has(.win-head) .drawer.open {
  margin-top: 0;
  border-top: none;
  border-radius: 0 0 12px 12px;
}
body:not(.windows-mode) .win:has(.drawer.open) .win-order { display: inline-flex; gap: 2px; margin-left: auto; }
body:not(.windows-mode) .win:has(.drawer.open) .win-order button {
  background: #2a2f39; border: 1px solid #2e333d; border-radius: 4px;
  padding: 2px 6px; font-size: 11px; color: #cdd6e4; line-height: 1.3;
}
body:not(.windows-mode) .win:has(.drawer.open) .win-order button:hover:not(:disabled) { background: #343a45; }
body:not(.windows-mode) .win:has(.drawer.open) .win-order button:disabled { opacity: 0.35; cursor: default; }
body:not(.windows-mode) .win:has(.drawer.open) .win-close {
  display: inline-block;
  background: none;
  padding: 2px 6px;
  margin-left: 6px;
  color: #aab6c8;
  font-size: 13px;
}
body:not(.windows-mode) .win:has(.drawer.open) .win-close:hover { color: #fff; background: none; }
/* без своего скролла — панель просто растёт по содержимому, прокручивается
   вместе со всей страницей (см. и #video-screen: тот же приём для окон) */
body:not(.windows-mode) .drawer.open { max-height: none; overflow: visible; }

/* высоту #video-screen (min-height) держит app.js: fitDesktopHeight() —
   растёт/сжимается по факту, под открытые окна, без лишнего запаса.
   По ширине layout не резиновый (иначе уехала бы левая полоса) — вместо
   этого у #vs-content свой overflow-x, окна за краем докручиваются им. */
body.windows-mode #video-screen { flex: 1; min-height: 0; }
body.windows-mode #vs-content { position: relative; align-self: stretch; overflow-x: auto; overflow-y: visible; }

body.windows-mode #reset-layout, body.windows-mode #remember-layout { display: inline-block; }

body.windows-mode .win {
  display: none;
  flex-direction: column;
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.windows-mode .win.win-open { display: flex; }

body.windows-mode .win-head {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 5px 8px;
  background: #1f232b;
  border-bottom: 1px solid #2e333d;
  font-size: 12px;
  color: #aab6c8;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.win-drag { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.windows-mode .win-close {
  display: inline-block;
  background: none;
  padding: 2px 6px;
  color: #aab6c8;
  font-size: 13px;
  flex: 0 0 auto;
}
body.windows-mode .win-close:hover { color: #fff; background: none; }

body.windows-mode .win-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  position: relative;
}
/* внутри окна панель заполняет тело окна, а если содержимое не помещается —
   растёт выше него (min-height, не height): окно само подрастёт следом
   (см. growWinToFit в app.js), внутреннего скролла тут больше нет. */
body.windows-mode .win-body .drawer {
  display: block;
  width: 100%;
  min-height: 100%;
  max-height: none;
  margin-top: 0;
  border-radius: 0;
  animation: none;
  box-sizing: border-box;
}
body.windows-mode .win-video .win-body { padding: 10px; box-sizing: border-box; }
body.windows-mode .win-video main { height: 100%; }
body.windows-mode .win-video #video { max-height: none; height: auto; }

/* 8 ручек ресайза (создаются в app.js): 4 края + 4 угла — тянуть можно
   с любой стороны, не только за правый нижний угол */
body.windows-mode .win-resize { display: block; position: absolute; touch-action: none; }
body.windows-mode .win-resize[data-dir="n"] { top: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
body.windows-mode .win-resize[data-dir="s"] { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: ns-resize; }
body.windows-mode .win-resize[data-dir="e"] { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
body.windows-mode .win-resize[data-dir="w"] { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: ew-resize; }
body.windows-mode .win-resize[data-dir="ne"] { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
body.windows-mode .win-resize[data-dir="sw"] { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
body.windows-mode .win-resize[data-dir="nw"] { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
body.windows-mode .win-resize[data-dir="se"] {
  bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, #4a5060 50%);
}
body.windows-mode .win-resize[data-dir="se"]:hover { background: linear-gradient(135deg, transparent 50%, #7a8699 50%); }

/* ======================================================================
   СТАРТОВЫЙ ХАБ И СТАТИСТИКА — ПАРКЕТНЫЙ СТИЛЬ (направление 1a)
   Всегда паркетные, независимо от #theme-switch (тот переключатель
   относится только к экрану «Видео» — его вообще не трогаем).
   ====================================================================== */

/* Главный экран (хаб). БАЗА = тёмная тема, в одном стиле с остальным приложением
   (синий акцент #2e6fd8). Кремовый вид — только под body.theme-1c (ниже). */
#hub-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16181d;
  min-height: 100vh;
  padding: 40px 20px;
}
.hub-inner { display:flex; flex-direction:column; align-items:center; gap:28px; width:100%; max-width:820px; }
.hub-brand { text-align:center; }
.hub-logo { font-size:26px; font-weight:800; color:#e8edf3; letter-spacing:-.01em; }
.hub-tag { font-size:13px; color:#8b97a8; margin-top:6px; }

/* Две колонки: слева место под будущий рейтинг, справа — новый проект и
   прошлые проекты. На узком экране складываются в одну (см. медиазапрос). */
.hub-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; width:100%; align-items:stretch; }
.hub-col-right { display:flex; flex-direction:column; gap:14px; min-width:0; }

/* Карточка рейтинга — интерактивная (button). Пунктир и скругление защищены id-префиксом
   от body.theme-1c button{border-radius:999px}, как #hub-screen .hub-new. */
.hub-rating-ph {
  height:100%; min-height:180px; border-radius:22px;
  border:2px dashed #2a313b; background:#171b21;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:22px;
}
.hrp-ic { font-size:34px; opacity:.85; }
.hrp-title { font-size:16px; font-weight:700; color:#cdd6e2; }
.hrp-sub { font-size:12px; color:#8b97a8; }

/* Большая кнопка «Новый проект». #hub-screen в селекторе — не косметика:
   у body.theme-1c button своё правило (border-radius:999px, пилюля), без
   id-префикса оно переиграло бы скругления. */
#hub-screen .hub-new {
  display:flex; align-items:center; gap:16px; text-align:left;
  padding:24px 26px; border-radius:22px; box-sizing:border-box; width:100%;
  background:linear-gradient(135deg,#3b82f6,#2457c0); border:none;
  cursor:pointer; font-family:inherit; color:#fff;
  box-shadow:0 8px 20px rgba(46,111,216,.30); transition:transform .12s, box-shadow .12s;
}
#hub-screen .hub-new:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(46,111,216,.42); }
#hub-screen .hub-new:active { transform:translateY(0); }

/* Карточка рейтинга кликабельна (button) — скругление и пунктир защищены id-префиксом
   от body.theme-1c button{border-radius:999px}, как #hub-screen .hub-new. */
#hub-screen .hub-rating-ph { border-radius:22px; border:2px dashed #2a313b; }

.hub-new-ic { font-size:34px; font-weight:700; line-height:1; opacity:.95; }
.hub-new-text { display:flex; flex-direction:column; gap:3px; }
.hub-new-title { font-size:19px; font-weight:800; letter-spacing:-.01em; }
.hub-new-sub { font-size:12.5px; opacity:.9; }

.hub-recent {}
.hub-recent-label { font-size:11px; font-weight:700; color:#8b97a8; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.hub-recent-list { display:flex; flex-direction:column; gap:6px; }
.hub-recent-item {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:12px; background:#171b21; border:1px solid #20262f;
  font-size:12.5px; color:#cdd6e2; cursor:pointer;
}
.hub-recent-item:hover { border-color:#2e6fd8; background:#1e2129; }
.hub-recent-item .hri-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-recent-item .hri-time { color:#8b97a8; font-size:11px; white-space:nowrap; }

/* Меню «⋮» у черновика: переименовать / удалить */
.hri-menu-wrap { position:relative; }
#hub-screen .hri-menu-btn {
  background:transparent; border:none; padding:2px 6px; border-radius:6px;
  color:#8b97a8; font-size:16px; line-height:1;
}
#hub-screen .hri-menu-btn:hover { background:#20262f; color:#e8edf3; }
.hri-menu-pop {
  position:absolute; right:0; top:calc(100% + 4px); z-index:5;
  display:flex; flex-direction:column; gap:2px; min-width:150px; padding:5px;
  background:#1b1f27; border:1px solid #2a313b; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.42);
}
#hub-screen .hri-menu-pop button {
  background:transparent; border:none; text-align:left; padding:7px 9px; border-radius:6px;
  font-size:12.5px; color:#cdd6e2; font-weight:400;
}
#hub-screen .hri-menu-pop button:hover { background:#22262e; }
#hub-screen .hri-menu-pop .hri-delete { color:#ff9d8f; }
#hub-screen .hri-menu-pop .hri-delete:hover { background:#3d211d; }

/* Светлая тема (theme-1c): возвращаем хабу кремово-терракотовый вид. */
body.theme-1c #hub-screen { background:#f4ece0; }
body.theme-1c .hub-logo { color:#3a2b1c; }
body.theme-1c .hub-tag { color:#8a6f52; }
body.theme-1c .hub-rating-ph,
body.theme-1c #hub-screen .hub-rating-ph { border-color:#d8c6ab; background:#faf4ea; }
body.theme-1c .hrp-title { color:#7a6247; }
body.theme-1c .hrp-sub { color:#a1876a; }
body.theme-1c #hub-screen .hub-new { background:linear-gradient(135deg,#e8722f,#c65221); box-shadow:0 8px 20px rgba(198,82,33,.28); }
body.theme-1c #hub-screen .hub-new:hover { box-shadow:0 12px 26px rgba(198,82,33,.36); }
body.theme-1c .hub-recent-label { color:#a1876a; }
body.theme-1c .hub-recent-item { background:#fbf6ee; border-color:#e7d9c2; color:#5a4a38; }
body.theme-1c .hub-recent-item:hover { border-color:#c65c2e; background:#fdf9f2; }
body.theme-1c .hub-recent-item .hri-time { color:#a1876a; }
body.theme-1c #hub-screen .hri-menu-btn { color:#a1876a; }
body.theme-1c #hub-screen .hri-menu-btn:hover { background:#e7d9c2; color:#5a4a38; }
body.theme-1c .hri-menu-pop { background:#fff; border-color:#e7d9c2; box-shadow:0 8px 20px rgba(58,43,28,.18); }
body.theme-1c #hub-screen .hri-menu-pop button { color:#5a4a38; }
body.theme-1c #hub-screen .hri-menu-pop button:hover { background:#f4ece0; }
body.theme-1c #hub-screen .hri-menu-pop .hri-delete { color:#a24b3f; }
body.theme-1c #hub-screen .hri-menu-pop .hri-delete:hover { background:#f5ddd8; }

@media (max-width:640px) {
  .hub-grid { grid-template-columns:1fr; }
  .hub-col-left { order:2; }   /* на телефоне рейтинг-заглушку — под проект */
  .hub-rating-ph { min-height:120px; }
}
#brand-home { cursor:pointer; }

/* ниже — паркетная тема для экрана статистики; без префикса эти правила
   раньше действовали и в тёмной теме тоже (баг: статистика была светлой
   всегда) */
body.theme-1c #stats-screen {
  background:#f4ece0;
  border-radius:22px;
  margin:16px;
  padding:24px 28px;
}
body.theme-1c #stats-screen h2 { color:#3a2b1c; }
body.theme-1c #stats-screen h2 .muted { color:#8a6f52; }
body.theme-1c #stats-screen .hint { color:#8a6f52; }
body.theme-1c .stats-mode-switch { background:transparent; border-color:transparent; padding:0; gap:8px; }
body.theme-1c .mode-btn { background:#fbf6ee; color:#8a6f52; border:2px solid #e7d9c2; border-radius:999px; font-weight:600; }
body.theme-1c .mode-btn:hover:not(.active) { background:#f0e6d6; color:#3a2b1c; }
body.theme-1c .mode-btn.active { background:#c65c2e; color:#fff; border-color:#c65c2e; }
body.theme-1c #ppp-url, body.theme-1c #season-links, body.theme-1c #season-year {
  background:#fbf6ee; color:#3a2b1c; border:2px solid #e7d9c2; border-radius:10px;
}
body.theme-1c #ppp-go { background:#c65c2e; color:#fff; border-radius:999px; }
body.theme-1c #ppp-go:hover { background:#a94e26; }
body.theme-1c .msg.err { background:#f5ddd8; color:#a24b3f; }
body.theme-1c .msg.info { background:#fbf1e4; color:#8a6f52; }
body.theme-1c .ppp-meta { color:#8a6f52; }
body.theme-1c .ppp-table caption { color:#3a2b1c; }
body.theme-1c .ppp-table th, body.theme-1c .ppp-table td { border-bottom-color:#ece0cd; }
body.theme-1c .ppp-table thead th { color:#8a6f52; border-bottom-color:#d9c7a8; }
body.theme-1c .ppp-table td.ppp-val { color:#3a2b1c; }
body.theme-1c .ppp-table tr.low td { color:#b5a189; }
body.theme-1c .ppp-table:not(.season-table) tbody tr:nth-child(even) td { background:rgba(58,43,28,.035); }
body.theme-1c .ppp-table tbody tr:hover td { background:#f0e6d6; }
body.theme-1c .adv-h { color:#3a2b1c; border-left-color:#c65c2e; }
body.theme-1c .stat-sum { background:#fbf1e4; border-color:#ecd9bf; border-left-color:#c65c2e; color:#5a4a38; }
body.theme-1c .ff-table td.ff-win { color:#2f6f4f; }
body.theme-1c .atk-team { color:#8a6f52; }
body.theme-1c .atk-bar { background:#efe3d2; }
body.theme-1c .roster-pl { background:#fbf6ee; border-color:#e7d9c2; color:#3a2b1c; }
body.theme-1c .roster-pl:hover:not(.sel) { background:#f0e6d6; }
body.theme-1c .roster-pl.sel { background:#c65c2e; color:#fff; border-color:#c65c2e; }
body.theme-1c .pl-card { background:#fbf6ee; border-color:#e7d9c2; }
body.theme-1c .season-table .sum-row { background:#f0e6d6; }
body.theme-1c .season-games summary, body.theme-1c .season-groups summary { color:#8a6f52; }
body.theme-1c .lg-opps { color:#8a6f52; }
body.theme-1c .card-pdf, body.theme-1c .card-csv { background:#fbf6ee; border:1px solid #e7d9c2; color:#3a2b1c; }
body.theme-1c .card-pdf:hover, body.theme-1c .card-csv:hover { background:#f0e6d6; }

/* автонарезка — тот же нижний ящик (шире не нужно, шторка на всю середину) */

/* Комбинации: доска, фишки */
#combos-screen { padding: 16px; max-width: 760px; margin: 0 auto; }
#combo-court { width: 100%; display: block; border-radius: 8px; }
.combo-token circle { stroke-width: 1.1; }
.combo-token-own circle { fill: #2e6fd8; stroke: #ffffff; }
.combo-token-def circle { fill: #e74c3c; stroke: #ffffff; stroke-width: 1.1; }
.combo-token text { font-size: 5.5px; fill: #ffffff; pointer-events: none; user-select: none; }
.combo-token-ball circle { fill: #e67e22; stroke: none; }
.combo-token-ball text { font-size: 8px; }
.combo-token { cursor: grab; }
.combo-path { fill: none; stroke: #000000; stroke-width: 0.8; }
/* нотация: пас и хендофф — пунктиром, перемещение/проход/заслон — сплошной.
   стрелка/поперечная «Т» на конце — через marker-end (задаётся в app.js) */
.combo-path-pass, .combo-path-handoff { stroke-dasharray: 2.5 1.8; }
.combo-path-shot { stroke: #e67e22; } /* бросок — цвет мяча, чтобы отличать от жёлтого перемещения */
.combo-path-live { stroke: #ffffff; stroke-dasharray: 2 1.5; }

/* ---- Галерея сохранённых комбинаций — сворачиваемая; кнопки открытия/
   создания теперь в палитре слева (#combo-palette), это только сама сетка ---- */
#combo-gallery-row { margin: 8px 0 14px; }
#combo-gallery { display: flex; gap: 10px; flex-wrap: wrap; }
.combo-card { position: relative; }
.combo-card-open {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100px; padding: 6px; border: 1px solid #2e333d; border-radius: 10px;
  background: #1f232b; cursor: pointer;
}
.combo-card-open:hover { background: #262b34; }
.combo-card.active .combo-card-open { border-color: #f0c419; box-shadow: 0 0 0 2px rgba(240, 196, 25, 0.3); }
.combo-card-name {
  font-size: 11px; color: #d7e2db; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.combo-card-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; padding: 0;
  line-height: 1; font-size: 12px; border-radius: 50%;
  background: #3d211d; color: #ff9d8f; border: 1px solid #1f232b;
}
.combo-mini-court { width: 100%; border-radius: 4px; display: block; }

/* ---- Рабочая область: вертикальная палитра слева (иконка + название
   действия в строку) + доска. Первыми в палитре — «Сохранённые» (тумблер
   галереи) и «Новая», тем же рядным стилем, что и инструменты рисования. ---- */
#combo-workspace { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; }
#combo-palette { display: flex; flex-direction: column; gap: 6px; flex: 0 0 190px; }
.combo-tool, #combo-undo, #combo-court-toggle, #combo-gallery-toggle, #combo-new {
  width: 100%; box-sizing: border-box; padding: 8px 10px; display: flex; align-items: center; gap: 10px;
  border: 1px solid #3a4a41; background: #223029; color: #d7e2db; border-radius: 8px; cursor: pointer;
  font-size: 13px; text-align: left;
}
.combo-tool svg, #combo-undo svg, #combo-court-toggle svg, #combo-gallery-toggle svg, #combo-new svg,
#combo-defs-toggle svg {
  width: 19px; height: 19px; flex: 0 0 auto; display: block;
}
.combo-tool span, #combo-undo span, #combo-court-toggle span, #combo-new span, #combo-gallery-toggle-label,
#combo-defs-toggle span { flex: 1; }
.combo-tool:hover, #combo-undo:hover, #combo-court-toggle:hover, #combo-gallery-toggle:hover, #combo-new:hover,
#combo-defs-toggle:hover { background: #2b3c33; }
.combo-tool.active { background: #f0c419; color: #1a241e; border-color: #f0c419; font-weight: 600; }
.combo-defs-toggle-on { background: #3d211d; border-color: #5a2a24; color: #ff9d8f; }
.combo-palette-sep { height: 1px; background: #3a4a41; margin: 4px 2px; }
#combo-gallery-toggle .arw { display: inline-block; flex: 0 0 auto; transition: transform 0.25s ease; }
#combo-gallery-toggle.open .arw { transform: rotate(180deg); }

/* колонка «площадка + лента шагов под ней», рядом с палитрой */
#combo-board-col { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; max-width: 480px; }
#combo-board-wrap { position: relative; }
/* «Показать шаг» — поверх площадки, не в отдельной панели */
#combo-board-wrap #combo-play-step {
  position: absolute; bottom: 8px; right: 8px; z-index: 5;
  background: rgba(20, 26, 20, 0.78); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 12px; font-size: 12px; border-radius: 999px;
}
#combo-board-wrap #combo-play-step:hover { background: rgba(20, 26, 20, 0.92); }

/* ---- Плёночная лента шагов (снизу площадки) ---- */
#combo-filmstrip { display: flex; gap: 8px; overflow-x: auto; padding: 6px 2px; }
#combo-filmstrip.combo-disabled { pointer-events: none; opacity: 0.5; }
.combo-film-tab { position: relative; flex: 0 0 auto; }
.combo-film-thumb {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 76px; padding: 4px; border: 1px solid #3a4a41; border-radius: 8px;
  background: #1a2019; cursor: pointer;
}
.combo-film-thumb:hover { background: #223029; }
.combo-film-thumb span { font-size: 10px; color: #9fb0a6; }
.combo-film-tab.active .combo-film-thumb { border-color: #f0c419; box-shadow: 0 0 0 2px rgba(240, 196, 25, 0.3); }
.combo-film-tab .combo-step-close {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; padding: 0;
  line-height: 1; font-size: 11px; border-radius: 50%;
  background: #3d211d; color: #ff9d8f; border: 1px solid #1a2019;
}
#combo-step-add {
  flex: 0 0 auto; width: 76px; height: 76px; font-size: 22px; font-weight: bold;
  border: 1px dashed #3a4a41; border-radius: 8px; background: transparent; color: #9fb0a6;
}
#combo-step-add:hover { background: #223029; }

/* Опции (альтернативные продолжения) шага — маленькие пронумерованные чипы
   под миниатюрой шага в ленте, плюс кнопка добавить новую опцию. Показаны
   только на главной линии — у шагов внутри опции своих опций не бывает. */
.combo-opt-row { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 3px; justify-content: center; }
.combo-opt-chip {
  width: 16px; height: 16px; padding: 0; font-size: 9px; line-height: 1;
  border: 1px solid #3a4a41; border-radius: 4px; background: #223029; color: #9fb0a6;
}
.combo-opt-chip:hover { background: #2b3c33; }
.combo-opt-chip.active { background: #f0c419; border-color: #f0c419; color: #1a241e; }
.combo-opt-add {
  width: 16px; height: 16px; padding: 0; font-size: 11px; line-height: 1; font-weight: bold;
  border: 1px dashed #3a4a41; border-radius: 4px; background: transparent; color: #9fb0a6;
}
.combo-opt-add:hover { background: #223029; }

/* Хлебная крошка «редактируете опцию N шага M» — над лентой, видна только
   когда comboEditContext активен (внутри опции). */
#combo-option-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 4px;
  background: #2a2410; border: 1px solid #4a3f1a; border-radius: 8px; font-size: 13px; color: #e8d68a;
}
#combo-option-delete { background: #3d211d; color: #ff9d8f; padding: 3px 10px; font-size: 12px; margin-left: auto; }
#combo-option-delete:hover { background: #4a2622; }
#combo-option-back { background: #3a2f14; color: #e8d68a; padding: 3px 10px; font-size: 12px; }
#combo-option-back:hover { background: #4a3f1a; }

/* ---- Нижняя панель: имя/сохранить/показать целиком ---- */
#combo-bottom-bar { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
#combo-name {
  flex: 1; min-width: 140px; background: #23272f; border: 1px solid #33465e;
  border-radius: 6px; color: #dfe4ea; padding: 6px 10px; font-size: 13px; box-sizing: border-box;
}

/* ---- Паркетная тема: карточки/палитра/лента ----
   ГРАБЛЯ: body.theme-1c button {border-radius:999px} (общее правило форм)
   специфичнее одного класса (0,1,2 против 0,1,0) и рисует наши прямоугольные
   карточки/строки кругами/пилюлями — поэтому здесь скруглению нужен СВОЙ
   селектор с ДВУМЯ классами (body.theme-1c .foo — 0,2,1), а не просто цвет. */
body.theme-1c .combo-card-open, body.theme-1c .combo-film-thumb {
  background: #fbf6ee; border-color: #e7d9c2;
}
body.theme-1c .combo-card-open { border-radius: 10px; }
body.theme-1c .combo-film-thumb, body.theme-1c #combo-step-add { border-radius: 8px; }
/* #combo-step-add — id-селектор в базовом CSS уже держит border/background
   (сильнее общего body.theme-1c button), но НЕ ЦВЕТ ТЕКСТА — тот наследуется
   из тёмной темы (#9fb0a6) и без явного переопределения остаётся
   зелёно-серым поверх паркета. Тот же класс бага, что был с радиусом —
   только на свойстве color. */
body.theme-1c #combo-step-add { color: #8a7457; }
body.theme-1c .combo-card-open:hover, body.theme-1c .combo-film-thumb:hover, body.theme-1c #combo-step-add:hover { background: #f0e6d6; }
body.theme-1c .combo-card-name { color: #3a2b1c; }
body.theme-1c .combo-film-thumb span { color: #8a7457; }
body.theme-1c .combo-card.active .combo-card-open,
body.theme-1c .combo-film-tab.active .combo-film-thumb { border-color: #c65c2e; box-shadow: 0 0 0 2px rgba(198, 92, 46, 0.25); }
body.theme-1c .combo-tool, body.theme-1c #combo-undo, body.theme-1c #combo-court-toggle,
body.theme-1c #combo-gallery-toggle, body.theme-1c #combo-new, body.theme-1c #combo-defs-toggle {
  background: #fbf6ee; border-color: #e7d9c2; color: #8a7457; border-radius: 8px; font-weight: 600;
}
body.theme-1c .combo-tool:hover, body.theme-1c #combo-undo:hover, body.theme-1c #combo-court-toggle:hover,
body.theme-1c #combo-gallery-toggle:hover, body.theme-1c #combo-new:hover,
body.theme-1c #combo-defs-toggle:hover { background: #f0e6d6; }
body.theme-1c .combo-tool.active { background: #c65c2e; color: #fff; border-color: #c65c2e; }
body.theme-1c .combo-defs-toggle-on { background: #f5ddd8; border-color: #e0a99e; color: #a24b3f; }
body.theme-1c .combo-palette-sep { background: #e7d9c2; }
body.theme-1c .combo-opt-chip, body.theme-1c .combo-opt-add { background: #fbf6ee; border-color: #e7d9c2; color: #8a7457; }
body.theme-1c .combo-opt-chip:hover, body.theme-1c .combo-opt-add:hover { background: #f0e6d6; }
body.theme-1c .combo-opt-chip.active { background: #c65c2e; border-color: #c65c2e; color: #fff; }
body.theme-1c #combo-option-bar { background: #fbf1e0; border-color: #e3cf9a; color: #7a5f1c; }
body.theme-1c #combo-option-back { background: #f0e6d6; color: #7a5f1c; }
body.theme-1c #combo-option-back:hover { background: #e7d9c2; }
body.theme-1c #combo-name { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c #combo-save { background: #c65c2e; color: #fff; border-color: #c65c2e; }
body.theme-1c #combo-save:hover { background: #a94e26; }
/* #combo-board-wrap #combo-play-step (два id, специфичность 2,0,0) в базовом
   CSS сильнее, чем один id в этом правиле (тут — 1,1,1) и раньше побеждал
   ДАЖЕ под паркетом, оставляя кнопку тёмной поверх площадки — тот же класс
   бага, что и со скруглением/цветом текста выше, просто на другом свойстве
   и другой паре селекторов. Уравниваем специфичность тем же приёмом. */
body.theme-1c #combo-board-wrap #combo-play-step { background: rgba(251, 246, 238, 0.92); color: #3a2b1c; border-color: #e7d9c2; }
body.theme-1c #combo-board-wrap #combo-play-step:hover { background: rgba(251, 246, 238, 1); }

/* ---------- Экран «Рейтинг игроков» ---------- */
#rating-screen { padding: 14px 16px; }
#rating-body { display: flex; gap: 16px; align-items: flex-start; max-width: 1200px; margin: 0 auto; }
#rating-list-col { flex: 0 0 360px; }
#rating-player { flex: 1; min-width: 0; }
#rating-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#rating-list-head h2 { font-size: 18px; }
.rating-head-actions { display: flex; gap: 6px; }
#rating-list { display: flex; flex-direction: column; gap: 8px; }
.rating-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #1f232b; border: 1px solid #2e333d; border-radius: 10px; cursor: pointer;
}
.rating-row.selected { border-color: #4fa3ff; }
.rating-row .rr-rank { font-weight: 700; color: #8fa3bf; width: 22px; text-align: center; }
.rating-row.top1 .rr-rank { color: #f5c451; }
.rating-row.top2 .rr-rank { color: #c7cfdb; }
.rating-row.top3 .rr-rank { color: #cd7f32; }
.rating-row .rr-main { flex: 1; min-width: 0; }
.rating-row .rr-name { font-weight: 600; }
.rating-row .rr-sub { font-size: 12px; color: #8fa3bf; }
.rating-row .rr-score { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-row .rr-delta { font-size: 12px; width: 44px; text-align: right; }
.rr-delta.up { color: #6ac48a; }
.rr-delta.down { color: #e0736a; }
.rr-delta.flat { color: #8fa3bf; }
@media (max-width: 820px) {
  #rating-body { flex-direction: column; }
  #rating-list-col { flex: none; width: 100%; }
}
/* паркетная тема: скругление и цвета (одиночного класса мало — см. грабли темы) */
body.theme-1c #rating-screen { background: #f3ece0; }
body.theme-1c .rating-row { background: #fbf6ee; border-color: #e7d9c2; border-radius: 10px; color: #3a2b1c; }
body.theme-1c .rating-row .rr-sub, body.theme-1c .rating-row .rr-rank { color: #8a7457; }
body.theme-1c .rating-row.selected { border-color: #c65c2e; }

/* ---- Экран «Заявки» (очередь верификации) ---- */
#queue-screen { padding: 14px 16px; max-width: 800px; margin: 0 auto; }
#queue-list h2 { font-size: 20px; margin-bottom: 12px; }
.q-row { display: flex; gap: 10px; align-items: center; background: #1f232b; border: 1px solid #2e333d; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.q-main { flex: 1; min-width: 0; }
.q-reason { font-size: 13px; margin-top: 4px; color: #cfd8e6; }
.q-match { font-size: 12px; }
.q-match.ok-match { color: #6ac48a; }
body.theme-1c #queue-screen { background: #f3ece0; }
body.theme-1c .q-row { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c .q-reason { color: #5c4a36; }

/* ---- Экран «Проспекты» (платформа) — спортивный рейтинг ---- */
#platform-screen { padding: 18px 20px 40px; max-width: 1180px; margin: 0 auto; }

/* Шапка страницы: бренд · поиск/год · вход */
.pf-header {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; margin-bottom: 20px;
  background: #12151a; border: 1px solid #1f242c; border-radius: 14px;
}
.pf-brand { display: flex; align-items: center; gap: 9px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: #f0f3f7; }
.pf-brand-ic { font-size: 22px; line-height: 1; }
.pf-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.pf-search { position: relative; display: flex; align-items: center; }
.pf-search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: #7b8798; pointer-events: none; }
#pf-search {
  background: #1c2129; border: 1px solid #2a313b; border-radius: 10px; color: #e8edf3;
  padding: 9px 12px 9px 33px; font-size: 14px; width: 210px;
}
#pf-search::placeholder { color: #6b7688; }
#pf-year {
  background: #1c2129; border: 1px solid #2a313b; border-radius: 10px; color: #e8edf3;
  padding: 9px 10px; font-size: 14px; cursor: pointer;
}
#pf-search:focus, #pf-year:focus { outline: none; border-color: #2e6fd8; box-shadow: 0 0 0 3px rgba(46,111,216,.16); }

/* Кнопки и авторизация в шапке */
#pf-authbar { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.pf-btn {
  border-radius: 10px; padding: 9px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent; font-family: inherit; transition: background .12s, border-color .12s;
}
.pf-btn.primary { background: #2e6fd8; color: #ffffff; border-color: #2e6fd8; }
.pf-btn.primary:hover { background: #4581e8; }
.pf-btn.ghost { background: transparent; color: #cdd6e2; border-color: #2f3742; }
.pf-btn.ghost:hover { background: #1c2129; border-color: #3a4552; }
.pf-btn:focus-visible { outline: 2px solid #2e6fd8; outline-offset: 2px; }
.pf-user { color: #e8edf3; font-weight: 600; }
.pf-guest { color: #8b97a8; font-size: 13px; }
.pf-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: #262d37; color: #aeb9c7; }
.pf-badge.ok { background: #1c3d2c; color: #63c48a; }

/* Тело: лидерборд + профиль */
#pf-body { display: flex; gap: 20px; align-items: flex-start; }
#pf-list-col { flex: 0 0 400px; }
#pf-detail { flex: 1; min-width: 0; }
#pf-list { display: flex; flex-direction: column; gap: 6px; }
.pf-row {
  display: flex; align-items: center; gap: 13px; padding: 11px 15px;
  background: #171b21; border: 1px solid #20262f; border-radius: 12px; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pf-row:hover { background: #1b2028; }
.pf-row.selected { border-color: #2e6fd8; background: #1e2129; }
.pf-row .pf-rank { flex: 0 0 30px; font-size: 17px; font-weight: 800; color: #5f6b7a; text-align: center; font-variant-numeric: tabular-nums; }
/* топ-3 — медальные оттенки (строки уже в порядке рейтинга) */
#pf-list .pf-row:nth-child(1) .pf-rank { color: #f5c451; }
#pf-list .pf-row:nth-child(2) .pf-rank { color: #c9d2dc; }
#pf-list .pf-row:nth-child(3) .pf-rank { color: #d9915a; }
.pf-row .pf-main { flex: 1; min-width: 0; }
.pf-row .pf-name { font-weight: 600; font-size: 14.5px; color: #e8edf3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-row .pf-sub { font-size: 12px; color: #8b97a8; margin-top: 1px; }
.pf-row .pf-score { flex: 0 0 auto; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; color: #f0f3f7; }
.pf-row .pf-stars { flex: 0 0 auto; color: #f5c451; font-size: 12px; letter-spacing: 1px; }
.pf-row .pf-count { flex: 0 0 44px; font-size: 11px; color: #7b8798; text-align: right; }

/* Карточка профиля игрока */
.pf-card { background: #171b21; border: 1px solid #20262f; border-radius: 16px; padding: 22px; }
.pf-card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #f0f3f7; margin-bottom: 3px; }
.pf-card .pf-sub { font-size: 13px; color: #8b97a8; }
.pf-photo { width: 104px; height: 104px; object-fit: cover; border-radius: 12px; float: right; margin: 0 0 10px 14px; border: 1px solid #262d37; }
.pf-agg { margin: 16px 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: #8b97a8; }
.pf-agg b { font-size: 34px; font-weight: 800; color: #2e6fd8; font-variant-numeric: tabular-nums; line-height: 1; }
.pf-prof-meta { font-size: 13px; color: #c3ccd8; margin-top: 4px; }
.pf-teams { margin: 8px 0; }
.pf-teams-h { font-size: 12px; color: #8b97a8; margin-bottom: 3px; }
.pf-team { font-size: 13px; padding: 2px 0; }
.pf-allr, .pf-comments { margin-top: 16px; border-top: 1px solid #20262f; padding-top: 12px; }
.pf-allr h4, .pf-comments h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: #dfe6ee; }
.pf-all-rating { font-size: 13px; padding: 3px 0; }
.pf-all-rating .pf-stars, .pf-all-rating b { color: inherit; }
.pf-comment { border-top: 1px solid #20262f; padding: 8px 0; font-size: 13px; }
.pf-cadd { display: flex; gap: 6px; margin-bottom: 10px; }
.pf-cadd textarea { flex: 1; background: #1c2129; color: #e8edf3; border: 1px solid #2a313b; border-radius: 8px; padding: 8px; font-family: inherit; }
.pf-cdel { font-size: 11px; padding: 1px 6px; }

@media (max-width: 820px) {
  #pf-body { flex-direction: column; }
  #pf-list-col { flex: none; width: 100%; }
  .pf-tools { width: 100%; margin-left: 0; }
  #pf-search { flex: 1; width: auto; }
}

/* Гейт оценки: звёзды заблюрены, поверх — призыв войти */
.pf-my-head { font-weight: 700; font-size: 14px; margin: 8px 0 8px; color: #dfe6ee; }
.pf-gate { position: relative; margin-top: 6px; }
.pf-my-locked { filter: blur(3px); opacity: .45; pointer-events: none; user-select: none; }
.pf-gate-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; padding: 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(23,27,33,.55), rgba(23,27,33,.85)); }
.pf-gate-title { font-size: 16px; font-weight: 700; color: #f0f3f7; }
.pf-gate-body { font-size: 13px; max-width: 340px; color: #aeb9c7; }
.pf-gate-btns { display: flex; gap: 8px; margin-top: 4px; }

/* --- Светлая (паркетная) тема --- */
body.theme-1c #platform-screen { background: #f3ece0; }
body.theme-1c .pf-header { background: #fbf6ee; border-color: #e7d9c2; }
body.theme-1c .pf-brand { color: #3a2b1c; }
body.theme-1c #pf-search, body.theme-1c #pf-year { background: #fff; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c #pf-search::placeholder { color: #b0a088; }
body.theme-1c .pf-search svg { color: #b0a088; }
body.theme-1c #pf-search:focus, body.theme-1c #pf-year:focus { border-color: #c65c2e; box-shadow: 0 0 0 3px rgba(198,92,46,.15); }
body.theme-1c .pf-btn.primary { background: #c65c2e; color: #fff; border-color: #c65c2e; }
body.theme-1c .pf-btn.primary:hover { background: #a94e26; }
body.theme-1c .pf-btn.ghost { color: #5c4a36; border-color: #e7d9c2; }
body.theme-1c .pf-btn.ghost:hover { background: #f0e6d6; }
body.theme-1c .pf-user { color: #3a2b1c; }
body.theme-1c .pf-guest { color: #8a7457; }
body.theme-1c .pf-badge { background: #e7d9c2; color: #8a7457; }
body.theme-1c .pf-badge.ok { background: #d8ecdd; color: #2c7a4b; }
body.theme-1c .pf-row, body.theme-1c .pf-card { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c .pf-row:hover { background: #f5eddf; }
body.theme-1c .pf-row.selected { border-color: #c65c2e; background: #f7ebda; }
body.theme-1c .pf-row .pf-name, body.theme-1c .pf-card h3, body.theme-1c .pf-row .pf-score { color: #3a2b1c; }
body.theme-1c .pf-row .pf-sub, body.theme-1c .pf-row .pf-count, body.theme-1c .pf-card .pf-sub, body.theme-1c .pf-teams-h { color: #8a7457; }
body.theme-1c .pf-row .pf-rank { color: #a1876a; }
body.theme-1c .pf-agg b { color: #c65c2e; }
body.theme-1c .pf-prof-meta { color: #5c4a36; }
body.theme-1c .pf-allr, body.theme-1c .pf-comments, body.theme-1c .pf-comment { border-color: #e7d9c2; }
body.theme-1c .pf-allr h4, body.theme-1c .pf-comments h4 { color: #3a2b1c; }
body.theme-1c .pf-cadd textarea { background: #fff; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c .pf-gate-over { background: linear-gradient(180deg, rgba(251,246,238,.55), rgba(251,246,238,.9)); }
body.theme-1c .pf-gate-title { color: #3a2b1c; }
body.theme-1c .pf-gate-body { color: #6b5943; }

/* ---- Отдельный экран входа/регистрации ---- */
#auth-screen { padding: 48px 16px; max-width: 440px; margin: 0 auto; }
.auth-card { background: #171b21; border: 1px solid #20262f; border-radius: 18px; padding: 30px 28px; }
.auth-back { background: none; border: none; color: #8b97a8; font-size: 13px; padding: 0 0 14px; cursor: pointer; }
.auth-back:hover { color: #cdd6e2; }
.auth-head { text-align: center; margin-bottom: 20px; }
.auth-logo { font-size: 40px; line-height: 1; }
#auth-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: #f0f3f7; margin: 10px 0 6px; }
.auth-lead { font-size: 13px; color: #8b97a8; line-height: 1.55; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: #12151a; border: 1px solid #20262f; border-radius: 11px; padding: 4px; }
.auth-tab { flex: 1; background: none; border: none; color: #9aa6b6; padding: 9px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; transition: background .12s, color .12s; }
.auth-tab:hover:not(.active) { color: #e8edf3; }
.auth-tab.active { background: #2e6fd8; color: #ffffff; }
.auth-form { display: flex; flex-direction: column; gap: 13px; }
.auth-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #8b97a8; }
.auth-form input, .auth-form select, .auth-form textarea { background: #1c2129; color: #e8edf3; border: 1px solid #2a313b; border-radius: 9px; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: #2e6fd8; box-shadow: 0 0 0 3px rgba(46,111,216,.16); }
.auth-submit { background: #2e6fd8; border: 1px solid #2e6fd8; color: #ffffff; padding: 12px; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; font-family: inherit; transition: background .12s; }
.auth-submit:hover { background: #4581e8; }
.auth-note { font-size: 12px; color: #8b97a8; margin-top: 14px; line-height: 1.55; }
.auth-alt { font-size: 13px; color: #8b97a8; text-align: center; margin-top: 16px; }
.auth-link { background: none; border: none; color: #2e6fd8; cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; font-family: inherit; }
.auth-msg { color: #e07a5f; font-size: 13px; text-align: center; margin-top: 10px; min-height: 18px; }

/* Один запоминающийся акцент — тонкая дуга трёхочковой над карточкой (мир баскетбола, без «SaaS-карточки»). */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ""; position: absolute; top: -84px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 168px; border: 1.5px solid rgba(46, 111, 216, .22);
  border-radius: 50%; border-bottom: none; pointer-events: none;
}
.auth-logo { position: relative; }

/* «Запомнить меня» — строка-флажок, не колонка как обычные поля формы. */
.auth-check { flex-direction: row !important; align-items: center; gap: 9px !important; cursor: pointer; user-select: none; color: #cdd6e2 !important; font-size: 13px !important; }
.auth-check input { width: 17px; height: 17px; accent-color: #2e6fd8; margin: 0; cursor: pointer; }
/* согласие: чекбокс сверху (текст многострочный), ссылки акцентом */
.auth-consent { align-items: flex-start !important; line-height: 1.45; }
.auth-consent input { margin-top: 1px !important; flex: none; }
.auth-consent a { color: #6ea8ff; }
.auth-legal { margin-top: 18px; text-align: center; font-size: 12px; color: #8b97a8; }
.auth-legal a { color: #8b97a8; text-decoration: none; }
.auth-legal a:hover { color: #cdd6e2; text-decoration: underline; }
body.theme-1c .auth-consent a { color: #c65c2e; }
body.theme-1c .auth-legal, body.theme-1c .auth-legal a { color: #8a7457; }

/* Развилка регистрации: код от тренера ↔ подать заявку. */
.auth-seg { display: flex; gap: 4px; background: #12151a; border: 1px solid #20262f; border-radius: 10px; padding: 4px; margin-top: 2px; }
.auth-seg-btn { flex: 1; background: none; border: none; color: #9aa6b6; padding: 8px 6px; border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: background .12s, color .12s; }
.auth-seg-btn:hover:not(.active) { color: #e8edf3; }
.auth-seg-btn.active { background: #22303b; color: #2e6fd8; }
body.theme-1c #auth-screen { background: #f3ece0; }
body.theme-1c .auth-card { background: #fbf6ee; border-color: #e7d9c2; color: #3a2b1c; border-radius: 16px; }
body.theme-1c #auth-title { color: #3a2b1c; }
body.theme-1c .auth-lead, body.theme-1c .auth-note, body.theme-1c .auth-alt, body.theme-1c .auth-back, body.theme-1c .auth-form label { color: #8a7457; }
body.theme-1c .auth-tabs { background: #efe6d6; border-color: #e7d9c2; }
body.theme-1c .auth-tab { color: #8a7457; }
body.theme-1c .auth-tab.active { background: #c65c2e; color: #fff; }
body.theme-1c .auth-form input, body.theme-1c .auth-form select, body.theme-1c .auth-form textarea { background: #fff; border-color: #e7d9c2; color: #3a2b1c; }
body.theme-1c .auth-form input:focus, body.theme-1c .auth-form select:focus, body.theme-1c .auth-form textarea:focus { border-color: #c65c2e; box-shadow: 0 0 0 3px rgba(198,92,46,.15); }
body.theme-1c .auth-submit { background: #c65c2e; border-color: #c65c2e; color: #fff; }
body.theme-1c .auth-submit:hover { background: #a94e26; }
body.theme-1c .auth-link { color: #c65c2e; }
body.theme-1c .auth-card::before { border-color: rgba(198, 92, 46, .22); }
body.theme-1c .auth-check { color: #5a4630 !important; }
body.theme-1c .auth-check input { accent-color: #c65c2e; }
body.theme-1c .auth-seg { background: #efe6d6; border-color: #e7d9c2; }
body.theme-1c .auth-seg-btn { color: #8a7457; }
body.theme-1c .auth-seg-btn:hover:not(.active) { color: #3a2b1c; }
body.theme-1c .auth-seg-btn.active { background: #fff; color: #c65c2e; }

#rating-player:empty::before { content: "Клик по строке — открыть карточку игрока и поставить оценки"; color: #8fa3bf; font-size: 13px; }
.rp-card { background: #1f232b; border: 1px solid #2e333d; border-radius: 12px; padding: 16px; }
.rp-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rp-fields input { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 6px 9px; }
.rp-fields .rp-name { flex: 1 1 200px; font-weight: 600; }
.rp-fields .rp-num { width: 64px; }
.rp-fields .rp-pos { flex: 1 1 160px; }
.rp-qual { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.rp-qual label { flex: 0 0 150px; }
.rp-qual input[type=range] { flex: 1; }
.rp-qual .rp-qval { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.star-input { display: inline-flex; gap: 2px; font-size: 22px; line-height: 1; user-select: none; }
.star-input .star { cursor: pointer; color: #b9b9b9; transition: color .1s; }
.star-input .star.on { color: #f5b301; }
.star-input .star:hover { color: #f5b301; }
.rp-overall { font-size: 15px; margin: 12px 0; }
.rp-overall b { font-size: 26px; }
.rp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.rp-hist { margin-top: 14px; }
.rp-hist h3 { font-size: 14px; color: #aab6c8; margin-bottom: 6px; }
.rp-hist-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid #262b34; font-variant-numeric: tabular-nums; }
.rp-hist-row .rh-date { color: #8fa3bf; width: 96px; }
.rp-hist-row .rh-score { font-weight: 600; width: 44px; }
.rp-hist-row .rh-del { margin-left: auto; background: none; border: none; color: #8fa3bf; cursor: pointer; }
.rp-hist-row .rh-del:hover { color: #e0736a; }
#rating-spark { display: block; margin-top: 8px; }
body.theme-1c .rp-card { background: #fbf6ee; border-color: #e7d9c2; border-radius: 12px; color: #3a2b1c; }
body.theme-1c .rp-fields input { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }
#rating-qualities { background: #1f232b; border: 1px solid #2e333d; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
#rating-qualities[hidden] { display: none; }
.rq-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.rq-row input { flex: 1; background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 5px 8px; }
.rq-row .rq-del { background: none; border: none; color: #8fa3bf; cursor: pointer; }
.rq-row .rq-del:hover { color: #e0736a; }
.rq-add { display: flex; gap: 8px; margin-top: 8px; }
.rq-add input { flex: 1; background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 5px 8px; }
body.theme-1c #rating-qualities { background: #fbf6ee; border-color: #e7d9c2; border-radius: 10px; }
body.theme-1c .rq-row input, body.theme-1c .rq-add input { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }

/* Скаут-карточка: блоки, балл, звёзды */
.rp-grade { display: flex; align-items: baseline; gap: 12px; margin: 10px 0; }
.rp-grade .rp-grade-num { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rp-grade .rp-stars { font-size: 22px; color: #f5c451; letter-spacing: 2px; }
.rp-grade .rp-grade-cap { color: #8fa3bf; font-size: 12px; }
.rp-block { border: 1px solid #2e333d; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.rp-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rp-block-head .rp-block-name { font-weight: 600; }
.rp-block-head .rp-block-score { font-variant-numeric: tabular-nums; color: #cbd5e4; font-weight: 700; }
.rp-proj { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.rp-proj label { color: #aab6c8; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.rp-proj input[type=range] { vertical-align: middle; }
.rp-proj select, .rp-fields select { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 6px 9px; }
body.theme-1c .rp-block { border-color: #e7d9c2; border-radius: 10px; }
body.theme-1c .rp-proj select, body.theme-1c .rp-fields select { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }

/* Список рейтинга: вид «Общий / По позиции», звёзды и проекция в строке */
#rating-view-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.rv-btn { background: #2a2f39; color: #cbd5e4; border: 1px solid #3a3f4a; border-radius: 8px; padding: 4px 10px; cursor: pointer; }
.rv-btn.active { background: #2e6fd8; color: #fff; border-color: #2e6fd8; }
#rating-view-position { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 8px; padding: 4px 8px; }
.rating-row .rr-stars { color: #f5c451; font-size: 12px; letter-spacing: 1px; }
.rating-row .rr-proj { color: #8fa3bf; font-size: 11px; }
body.theme-1c .rv-btn { background: #fbf6ee; color: #3a2b1c; border-color: #e7d9c2; border-radius: 8px; }
body.theme-1c .rv-btn.active { background: #c65c2e; color: #fff; border-color: #c65c2e; }
body.theme-1c #rating-view-position { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }

/* Настройка качеств: заголовки блоков и выбор блока при добавлении */
.rq-group-head { color: #aab6c8; font-size: 12px; font-weight: 700; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .5px; }
.rq-add select { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 5px 8px; }
body.theme-1c .rq-add select { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }

/* ---------- Рейтинг: таблица-ранкинг во всю ширину (по образцу ESPN, но современнее) ---------- */
#rating-body { display: block; max-width: 1240px; }
#rating-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rlh-title { display: flex; align-items: baseline; gap: 10px; }
#rating-list-head h2 { font-size: 26px; letter-spacing: -.5px; }
.rlh-count { color: #8fa3bf; font-size: 13px; }
.rating-head-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
#rating-view-year { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 8px; padding: 4px 8px; }

/* таблица */
#rating-list { background: #1b1f27; border: 1px solid #2a2f39; border-radius: 14px; overflow: hidden; }
.rk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rk-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #232833; color: #8fa3bf;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  text-align: left; padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid #2e333d;
}
.rk-table td { padding: 10px 12px; border-top: 1px solid #232833; vertical-align: middle; }
.rk-table tbody tr { cursor: pointer; }
.rk-table tbody tr:hover { background: #212734; }
.rk-table tbody tr.selected { background: #1e2a3d; box-shadow: inset 3px 0 0 #4fa3ff; }
.rk-rank { font-variant-numeric: tabular-nums; font-weight: 700; color: #8fa3bf; width: 46px; text-align: center; font-size: 15px; }
tr.top1 .rk-rank { color: #f5c451; }
tr.top2 .rk-rank { color: #c7cfdb; }
tr.top3 .rk-rank { color: #cd7f32; }
.rk-name { font-weight: 600; font-size: 15px; color: #eef2f8; }
.rk-sub { color: #7d8ca3; font-size: 12px; margin-top: 2px; }
.rk-pos { display: inline-block; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 999px; background: #2b3444; color: #a8c0e0; font-size: 12px; font-weight: 700; }
.rk-num { font-variant-numeric: tabular-nums; color: #cbd5e4; white-space: nowrap; }
.rk-stars { color: #f5c451; letter-spacing: 1px; white-space: nowrap; }
.rk-grade { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 19px; }
.rk-grade.g5 { color: #f5c451; }
.rk-grade.g4 { color: #6fb1ff; }
.rk-grade.g3 { color: #8fd6a3; }
.rk-grade.g2 { color: #cbd5e4; }
.rk-grade.g1 { color: #8fa3bf; }
.rk-grade.gnone { color: #55617a; font-size: 15px; }
.rk-proj { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #263042; color: #9db4d4; font-size: 12px; white-space: nowrap; }
.rk-pot { color: #7d8ca3; font-size: 12px; font-variant-numeric: tabular-nums; }
.rk-delta { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.rk-delta.up { color: #6ac48a; }
.rk-delta.down { color: #e0736a; }
.rk-delta.flat { color: #55617a; }
.rk-empty { padding: 22px; color: #8fa3bf; text-align: center; }
#rating-player:not(:empty) { margin-top: 18px; }

/* паркетная тема */
body.theme-1c #rating-list { background: #fbf6ee; border-color: #e7d9c2; border-radius: 14px; }
body.theme-1c .rk-table thead th { background: #f2e7d5; color: #8a7457; border-bottom-color: #e7d9c2; }
body.theme-1c .rk-table td { border-top-color: #efe4d3; }
body.theme-1c .rk-table tbody tr:hover { background: #f6eee1; }
body.theme-1c .rk-table tbody tr.selected { background: #f7e9dc; box-shadow: inset 3px 0 0 #c65c2e; }
body.theme-1c .rk-name { color: #3a2b1c; }
body.theme-1c .rk-sub, body.theme-1c .rk-rank, body.theme-1c .rk-pot { color: #8a7457; }
body.theme-1c .rk-pos { background: #efe0c8; color: #6b5335; }
body.theme-1c .rk-num { color: #4a3826; }
body.theme-1c .rk-proj { background: #efe0c8; color: #6b5335; }
body.theme-1c #rating-view-year { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }

@media (max-width: 900px) {
  .rk-hide-sm { display: none; }
  #rating-list-head h2 { font-size: 21px; }
}

/* Импорт состава из статистики лиги + сортировка рейтинга */
#rating-sort { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 8px; padding: 4px 8px; }
#rating-import { background: #1b1f27; border: 1px solid #2a2f39; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
#rating-import[hidden] { display: none; }
#rating-import code { background: #232833; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
#rating-import-links {
  width: 100%; box-sizing: border-box; background: #2a2f39; color: #e8e8e8;
  border: 1px solid #3a3f4a; border-radius: 8px; padding: 8px 10px; font-size: 12px; font-family: inherit;
}
.ri-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ri-row label { color: #aab6c8; font-size: 13px; }
.ri-row input { background: #2a2f39; color: #e8e8e8; border: 1px solid #3a3f4a; border-radius: 6px; padding: 5px 8px; }
.rk-ppg { font-variant-numeric: tabular-nums; font-weight: 700; color: #cbd5e4; }
.rk-gp { color: #7d8ca3; font-size: 11px; }
body.theme-1c #rating-import { background: #fbf6ee; border-color: #e7d9c2; border-radius: 12px; }
body.theme-1c #rating-import-links, body.theme-1c .ri-row input, body.theme-1c #rating-sort { background: #fff; color: #3a2b1c; border-color: #e7d9c2; }
body.theme-1c #rating-import code { background: #f2e7d5; }
body.theme-1c .rk-ppg { color: #3a2b1c; }