:root {
  --bg: #1b252b;
  --panel: #22303a;
  --panel-2: #2a3a45;
  --line: #364954;
  --line-strong: #4b626e;
  --paper: #e9e3d2;
  --muted: #9eaaa6;
  --amber: #d9a441;
  --amber-hover: #e6b457;
  --amber-ink: #2b1f06;
  --red: #e07a63;
  --olive: #9bb06a;
  --font: "PT Sans", "Segoe UI", system-ui, sans-serif;
  --narrow: "PT Sans Narrow", "Arial Narrow", "Roboto Condensed", sans-serif;
  color-scheme: dark;
  --footer-h: 30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  color: var(--paper);
  font: 16px/1.5 var(--font);
  background-color: var(--bg);
  /* Сетка квадратов, как на полётной карте */
  background-image:
    linear-gradient(rgba(233, 227, 210, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233, 227, 210, .035) 1px, transparent 1px);
  background-size: 96px 96px;
}
h1, h2, h3 { font-family: var(--narrow); font-weight: 700; line-height: 1.15; margin: 0; }
a { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { min-height: calc(100% - var(--footer-h)); display: flex; flex-direction: column; }
#app.view-room { height: calc(100vh - var(--footer-h)); height: calc(100dvh - var(--footer-h)); min-height: 0; }
.screen-msg { padding: 48px 24px; text-align: center; color: var(--muted); }

/* Кнопки */
.btn {
  font: 700 15px/1 var(--narrow);
  letter-spacing: .02em;
  color: var(--paper);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: .65em 1.05em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
}
.btn:hover { border-color: var(--paper); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.btn.primary:hover { background: var(--amber-hover); border-color: var(--amber-hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--paper); border-color: var(--line-strong); }
.btn.small { font-size: 13px; padding: .45em .7em; }
.btn.danger:hover { color: var(--red); border-color: var(--red); }
.btn:disabled { opacity: .6; cursor: progress; }

/* Формы */
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font: 700 14px var(--narrow); color: var(--muted); letter-spacing: .02em; }
input, textarea, select {
  font: inherit;
  color: var(--paper);
  background: rgba(10, 16, 20, .35);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: .55em .7em;
  width: 100%;
}
textarea { resize: vertical; min-height: 2.6em; }
/* Выпадающие списки: непрозрачный тёмный фон, иначе в Windows список раскрывается светлым и светлый текст не виден */
select { background-color: #172127; }
select option, select optgroup { background-color: #172127; color: var(--paper); }
select option:checked { background-color: #3a4f5b; color: #fff; }
select option:disabled { color: #6f7f86; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
::placeholder { color: #6f7f86; }
.form-error { color: var(--red); margin: 0; }
.form-error:empty { display: none; }

/* Бортовой код тренировки: главный опознавательный знак интерфейса */
.plate {
  font: 700 20px/1 var(--narrow);
  letter-spacing: .18em;
  color: var(--amber-ink);
  background: var(--amber);
  border: 0;
  border-radius: 2px;
  padding: .38em .5em .38em .75em;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px);
  white-space: nowrap;
  cursor: pointer;
}
.plate.static { cursor: default; }
.code-input { font: 700 22px var(--narrow); letter-spacing: .2em; text-transform: uppercase; }

/* Вход */
.login {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
  gap: 56px;
  align-items: center;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 24px;
}
.login-mark { font: 700 clamp(96px, 16vw, 184px)/.82 var(--narrow); color: var(--amber); letter-spacing: -.02em; }
.login-intro h1 { font-size: 34px; margin-top: 18px; }
.login-intro p { color: var(--muted); max-width: 40ch; font-size: 18px; margin: 10px 0 0; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 22px;
}
.segmented button {
  font: 700 15px var(--narrow);
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: .6em;
  cursor: pointer;
}
.segmented button[aria-selected="true"] { background: var(--panel-2); color: var(--paper); }

/* Верхняя панель */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; flex: none; }
.brand-mark { font: 700 22px var(--narrow); color: var(--amber); }
.brand-sub { color: var(--muted); font-size: 14px; }
.topbar-mid { flex: 1; min-width: 0; }
.who { display: flex; align-items: center; gap: 10px; flex: none; }
.who-name { font-weight: 700; }
.who-role { color: var(--muted); font-size: 14px; }

/* Список тренировок */
.lobby {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px;
  align-items: start;
}
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.section-title { font-size: 21px; margin-bottom: 12px; }
.training-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.training-list > p { margin: 0; padding: 18px; }
.training-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.training-row:last-child { border-bottom: 0; }
.training-row:hover { background: var(--panel-2); }
.training-topic { font-weight: 700; overflow-wrap: anywhere; }
.training-meta { color: var(--muted); font-size: 14px; }
.training-row .plate { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 16px; cursor: inherit; }
.training-row.finished .plate { background: var(--line-strong); color: var(--paper); }

/* Комната тренировки */
.room-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.back { color: var(--muted); text-decoration: none; font-size: 22px; line-height: 1; padding: 0 4px; }
.back:hover { color: var(--paper); }
.room-title { font: 700 20px var(--narrow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tag { font: 700 13px var(--narrow); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: .2em .5em; white-space: nowrap; }
.conn-status { margin: 0; padding: 8px 20px; background: #4a2a22; color: #f6d3c8; font-size: 14px; }

.room {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  padding: 16px 20px;
}
.room-main {
  min-height: 0;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 28px 28px;
}
.room-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin: 0 -28px 28px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
  flex-wrap: wrap; /* в узком окне кнопки справа переносятся, а не дают горизонтальную прокрутку */
}
.tab {
  font: 700 16px var(--narrow);
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 10px 12px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
}
.tab:hover { color: var(--paper); }
.tab[aria-current="page"] { color: var(--paper); border-bottom-color: var(--amber); }
.tab.soon { cursor: default; opacity: .55; }
.live-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  padding: 1px 7px 1px 6px;
  border-radius: 10px;
  background: rgba(224, 122, 99, .16);
  color: var(--red);
  font: 700 13px/1.3 var(--narrow);
  align-self: center;
}
.live-count::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(224, 122, 99, .7);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 122, 99, .7); }
  70% { box-shadow: 0 0 0 6px rgba(224, 122, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 122, 99, 0); }
}
.tab.soon:hover { color: var(--muted); }
.tab small { font: 400 12px var(--font); }

.lesson-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.lesson-topic { font-size: 36px; max-width: 26ch; overflow-wrap: anywhere; }
.lesson-desc { white-space: pre-wrap; max-width: 76ch; margin: 0; }
.lesson-desc:has(.rich) { white-space: normal; }
.lesson-by { color: var(--muted); font-size: 14px; margin: 0; }
/* Время и продолжительность тренировки */
.lesson-when { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--paper); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.start-phase { font-size: 12px; font-weight: 700; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.start-phase.soon { color: var(--amber); border-color: var(--amber); }
.start-phase.now { color: var(--olive); border-color: var(--olive); }
.training-meta .start-phase { margin: 0 2px 0 8px; font-size: 11px; padding: 1px 6px; }
.training-when { color: var(--paper); }
.room-when { font-size: 13px; color: var(--muted); white-space: nowrap; border: 1px solid var(--line); padding: 3px 8px; }
.schedule-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.training-state.planned { color: var(--amber); border-color: var(--amber); }

.materials { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 840px; }
.material { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; background: rgba(10, 16, 20, .25); }
.material-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.material-type { font: 700 13px var(--narrow); color: var(--amber); min-width: 52px; }
.material-title { font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.material-note { margin: 8px 0 0; color: var(--muted); white-space: pre-wrap; max-width: 75ch; font-size: 14px; line-height: 1.45; }
.material-edit-title { margin: 0; font-size: 16px; }
.material-body { white-space: pre-wrap; margin: 12px 0 0; max-width: 70ch; }
.material-embed { display: block; margin-top: 12px; aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: 4px; background: #000; }
.material-form { max-width: 840px; border-top: 1px solid var(--line); padding-top: 20px; }
.material-form .grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; }

/* Участники и чат */
.panel-title { font-size: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.count { font: 400 13px var(--font); color: var(--muted); }
.people { max-height: 42%; overflow: auto; flex: none; }
.people-list { list-style: none; margin: 0 0 6px; padding: 0; }
.people-list + .people-list { border-top: 1px solid var(--line); padding-top: 6px; }
.person { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--muted); min-height: 36px; }
.person.online { color: var(--paper); }
.dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; }
.online .dot { background: var(--olive); border-color: var(--olive); }
.person-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person-role { font-size: 13px; color: var(--amber); }

/* Управление пилотами */
.icon-btn { padding: .35em .45em; }
.icon-btn svg { display: block; }
.pilot-menu {
  position: fixed;
  z-index: 50;
  width: 260px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-title { margin: 2px 6px 6px; font: 700 16px var(--narrow); overflow-wrap: anywhere; }
.menu-item {
  font: 700 14px var(--narrow);
  color: var(--paper);
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 8px 8px;
  text-align: left;
  cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: rgba(233, 227, 210, .08); }
.menu-item.danger { color: var(--red); }
.menu-hint { margin: 0 8px 6px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.menu-sub { margin: 8px 8px 2px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-row .menu-item { font-size: 13px; }
.bans { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.bans:empty { display: none; }
.ban-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ban-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: center; font-size: 14px; }
.ban-name { font-weight: 700; overflow-wrap: anywhere; }
.ban-meta { grid-column: 1; color: var(--muted); font-size: 12px; }
.ban-list .btn { grid-row: 1 / 3; grid-column: 2; }
.login-flash { margin: 0 0 16px; padding: 10px 12px; border-left: 3px solid var(--red); background: rgba(224, 122, 99, .1); color: var(--paper); }

.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-list { flex: 1; min-height: 120px; overflow: auto; list-style: none; margin: 0 -18px; padding: 0 18px; }
.msg { padding: 8px 0; border-bottom: 1px solid rgba(233, 227, 210, .05); }
.msg-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.msg-author { font-weight: 700; color: var(--paper); overflow-wrap: anywhere; }
.msg.cmd .msg-author { color: var(--amber); }
.msg-role { color: var(--amber); font-size: 12px; }
.msg-role.guest, .person-role.guest { color: #8fb3c9; }
.people-list.guests { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 6px; }
.msg time { color: var(--muted); margin-left: auto; flex: none; }
.msg-del {
  flex: none; width: 22px; height: 22px; padding: 0; border: 1px solid transparent; border-radius: 3px; background: transparent;
  color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.msg:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
.msg-del:hover, .msg-del:focus-visible { color: #fff; background: #c0392b; border-color: #c0392b; }
@media (hover: none) { .msg-del { opacity: .6; } }
.msg-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-empty { padding: 12px 0; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.chat-form textarea { min-height: 44px; max-height: 140px; }
/* Поле ввода с картинками: миниатюры над текстом, внутри одной рамки */
.chat-compose { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-compose.drop textarea { outline: 2px dashed var(--amber); outline-offset: -2px; }
.chat-compose:has(.chat-attach:not([hidden])) textarea { border-top-left-radius: 0; border-top-right-radius: 0; border-top-color: transparent; }
.chat-attach {
  list-style: none; margin: 0; padding: 8px 8px 0; display: flex; flex-wrap: wrap; gap: 8px;
  border: 1px solid var(--line); border-bottom: 0; background: rgba(10, 16, 20, .35);
}
.chat-attach[hidden] { display: none; }
.chat-thumb { position: relative; width: 56px; height: 56px; border: 1px solid var(--line); background: #0c1216; }
.chat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-thumb.loading img { opacity: .45; }
.chat-thumb.loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--paper); border-right-color: transparent; border-radius: 50%; animation: chat-spin .8s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }
.chat-thumb.failed { border-color: #c0392b; }
.chat-thumb.failed img { opacity: .35; }
.chat-thumb-err { position: absolute; inset: 0; display: grid; place-items: center; color: #ff6b5b; font-weight: 800; font-size: 22px; pointer-events: none; }
.chat-thumb-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--paper); font-size: 14px; line-height: 1; cursor: pointer;
}
.chat-thumb-x:hover, .chat-thumb-x:focus-visible { background: #c0392b; color: #fff; }
.chat-compose-row { position: relative; display: flex; }
.chat-compose-row textarea { flex: 1; min-width: 0; padding-left: 38px; }
.chat-attach-btn {
  position: absolute; left: 3px; bottom: 3px; width: 32px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--muted); z-index: 1;
}
.chat-attach-btn:hover:not(:disabled), .chat-attach-btn:focus-visible { color: var(--amber); background: transparent; }
.chat-attach-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Картинки в сообщениях */
.msg-images { display: grid; gap: 4px; margin-top: 6px; max-width: 320px; grid-template-columns: 1fr 1fr; }
.msg-images.n1 { grid-template-columns: 1fr; }
.msg-img { padding: 0; border: 1px solid var(--line); background: #0c1216; cursor: zoom-in; display: block; overflow: hidden; }
.msg-images.n1 .msg-img img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.msg-images:not(.n1) .msg-img { aspect-ratio: 1; }
.msg-images:not(.n1) .msg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-img:hover, .msg-img:focus-visible { border-color: var(--amber); }
.image-dialog { padding: 0; background: transparent; border: 0; max-width: 96vw; max-height: 96vh; overflow: visible; }
.image-dialog img { display: block; max-width: 96vw; max-height: calc(96vh - 52px); object-fit: contain; cursor: zoom-out; margin: 0 auto; }
.image-dialog-bar { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }

/* Заметки */
.notes-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.notes form { max-width: 720px; margin-bottom: 28px; }
.notes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.note { border-left: 3px solid var(--amber); border-radius: 0; padding: 8px 14px; background: rgba(10, 16, 20, .25); }
.note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 6px; }
.note-meta { margin: 0; color: var(--muted); font-size: 13px; }

/* Планшет */
.room-main.wide { padding-bottom: 20px; }
.board-view { display: flex; flex-direction: column; gap: 24px; }
.board { display: flex; flex-direction: column; gap: 8px; }
.board-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; }
.tool-group { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tool-group.end { gap: 8px; }
.tool {
  font: 700 14px/1 var(--narrow);
  color: var(--paper);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0 .7em;
  height: 34px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool:hover { border-color: var(--paper); }
.tool[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); background: #3a3a2c; }
.tool.icon { padding: 0; }
.tool[data-tool="move"] { padding: 0; width: 38px; }
.tool.width { padding: 0 3px; color: var(--paper); }
.tool:disabled, .swatch:disabled { opacity: .4; cursor: not-allowed; }
.swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--swatch);
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--line-strong);
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--paper); }
.tool-group.colors { gap: 6px; }
.palette { display: inline-flex; gap: 4px; align-items: center; padding-left: 4px; border-left: 1px solid var(--line); margin-left: 2px; }
.color-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px 0 5px;
  font: 700 13px/1 var(--narrow);
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  cursor: pointer;
}
.color-slot:hover { border-color: var(--paper); }
.color-slot[aria-pressed="true"] { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); color: var(--paper); }
.slot-chip { width: 22px; height: 22px; border-radius: 3px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
/* Цвет, которым будет нарисован следующий элемент */
.color-slot.live .slot-chip { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--swatch); }
.color-slot.live .slot-label { color: var(--paper); }
.tool.swap { padding: 0 .55em; font-size: 16px; }
.tool.icon { width: 38px; }
.board-notice { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--amber); }
.board-area { display: flex; gap: 8px; align-items: flex-start; justify-content: center; min-height: 0; }
.board-area .board-stage { flex: 1 1 auto; min-width: 0; margin: 0; }
.board-icons { display: flex; flex-direction: column; gap: 4px; flex: none; }
.board-icons .tool.icon { height: 36px; }
.board:fullscreen .board-area { flex: 1; min-height: 0; width: 100%; }
.board-stage {
  position: relative;
  width: 100%;
  max-width: max(560px, calc((100dvh - 290px) * 1.6));
  margin: 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
}
.board-split { position: absolute; top: 4px; left: 4px; z-index: 2; display: flex; gap: 3px; opacity: .45; transition: opacity .15s; }
.board-split:hover, .board-split:focus-within { opacity: 1; }
.split-field { display: flex; align-items: center; gap: 1px; padding: 0 2px 0 4px; background: rgba(21, 26, 20, .6); border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-size: 11px; line-height: 1; }
.split-field input { width: 2.6em; padding: 1px; font-size: 11px; background: transparent; border: 0; color: var(--paper); text-align: center; }
.split-field input:focus { outline: 1px solid var(--amber); border-radius: 2px; }
.board-svg.split-col, .board-svg.split-col * { cursor: col-resize !important; }
.board-svg.split-row, .board-svg.split-row * { cursor: row-resize !important; }
.board-svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; touch-action: none; user-select: none; cursor: crosshair; }
.board-svg[data-tool="erase"] { cursor: pointer; }
.board-svg[data-tool="text"] { cursor: text; }
.board-svg.readonly { cursor: default; }
.board-svg .el, .board-svg .cursor { pointer-events: none; }
.board-svg.picking:not(.readonly) .el { pointer-events: visiblePainted; }
.board-svg.erasing:not(.readonly) .el:hover { opacity: .55; }
.board-svg[data-tool="move"] { cursor: default; }
.board-svg[data-tool="move"]:not(.readonly) .el { cursor: grab; }
.board-svg[data-tool="move"]:not(.readonly) .el:hover { filter: drop-shadow(0 0 4px rgba(217, 164, 65, .9)); }
.board-svg.dragging, .board-svg.dragging .el { cursor: grabbing !important; }
.board-text {
  position: absolute;
  transform: translateY(-50%);
  width: 18em;
  max-width: 60%;
  font-family: var(--narrow);
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 6px;
  background: rgba(15, 22, 26, .9);
  border: 1px solid var(--amber);
}

.drawings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.drawing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; }
.drawing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2px 14px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.drawing:last-child { border-bottom: 0; }
.drawing-title { font-weight: 700; overflow-wrap: anywhere; }
.drawing-mode { font: 700 13px var(--narrow); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 3px; padding: .15em .5em; }
.drawing-mode.anim { color: var(--amber); border-color: rgba(217, 164, 65, .5); }
.drawing-meta { grid-column: 1; color: var(--muted); font-size: 13px; }
.drawing .btn { grid-row: 1 / 3; grid-column: 3; }

.segmented.compact { display: inline-grid; grid-auto-flow: column; grid-template-columns: none; margin: 0; }
.segmented.compact button { padding: .4em .8em; font-size: 14px; }

/* Вкладки планшетов урока */
.board-with-tabs { display: flex; flex-direction: column; gap: 10px; }
.board-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--line-strong); padding: 0 2px; }
.board-tab {
  display: inline-flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}
.board-tab.active { background: var(--panel); border-color: var(--amber); box-shadow: inset 0 2px 0 var(--amber); }
.board-tab-btn {
  font: 700 15px/1 var(--narrow);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 10px 14px 9px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-tab.active .board-tab-btn { color: var(--paper); }
.board-tab-btn:hover { color: var(--paper); }
.board-tab-edit { background: none; border: 0; color: var(--muted); padding: 6px 10px 6px 0; cursor: pointer; display: inline-flex; }
.board-tab-edit:hover { color: var(--amber); }
.board-tab-del { font-size: 20px; line-height: 1; padding: 2px 10px 4px 2px; }
.board-tab-del:hover { color: var(--red); }
.board-tab-add {
  font: 700 14px/1 var(--narrow);
  color: var(--amber);
  background: none;
  border: 1px dashed rgba(217, 164, 65, .55);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 9px 12px 8px;
  cursor: pointer;
  margin-left: 4px;
}
.board-tab-add:hover { background: rgba(217, 164, 65, .08); }

/* Фон планшета */
.tool-label { font: 700 14px var(--narrow); color: var(--muted); margin-right: 2px; }
.bg-opacity-wrap { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 4px; }
.bg-opacity { width: 110px; padding: 0; border: 0; background: none; accent-color: var(--amber); }
.bg-opacity-value { font: 700 13px var(--narrow); color: var(--muted); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.map-dialog { width: min(1100px, 96vw); max-height: 96vh; overflow: auto; }
.map-controls { margin-bottom: 10px; align-items: flex-end; }
.field.inline { flex-direction: column; min-width: 220px; }
.field.grow { flex: 1; }
.map-zoom { padding: 0; border: 0; background: none; accent-color: var(--amber); }
.map-picker { border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: #0f161a; line-height: 0; }
.map-picker-svg { display: block; width: 100%; height: min(66vh, 720px); touch-action: none; cursor: crosshair; }
.map-frame-hit { cursor: move; }
.small-note { font-size: 13px; margin: 8px 0 0; }
.cockpit-svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 66vh; touch-action: none; cursor: grab; user-select: none; }
.cockpit-svg.dragging { cursor: grabbing; }
.cockpit-presets { gap: 6px; }
.cockpit-readout { margin: 8px 0 0; font: 700 15px var(--narrow); color: var(--paper); }

/* Описание урока: оформленный текст */
.lesson-desc .rich, .rich { white-space: normal; max-width: 76ch; }
.rich > * { margin: 0 0 .75em; }
.rich > *:last-child { margin-bottom: 0; }
.rich h2 { font-size: 26px; margin-top: 1.1em; }
.rich h3 { font-size: 21px; margin-top: 1em; }
.rich > h2:first-child, .rich > h3:first-child { margin-top: 0; }
.rich ul, .rich ol { padding-left: 1.4em; }
.rich li { margin: .2em 0; }
.rich li::marker { color: var(--amber); }
.rich blockquote { border-left: 3px solid var(--amber); padding: .4em 0 .4em 14px; color: var(--paper); background: rgba(217, 164, 65, .06); }
.rich code { font: .92em/1.3 ui-monospace, Consolas, "Cascadia Mono", monospace; background: rgba(10, 16, 20, .55); border: 1px solid var(--line); border-radius: 3px; padding: .05em .35em; }
.rich pre { font: 14px/1.5 ui-monospace, Consolas, "Cascadia Mono", monospace; background: rgba(10, 16, 20, .55); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.rich hr { border: 0; border-top: 1px solid var(--line-strong); margin: 1.2em 0; }
.rich a { overflow-wrap: anywhere; }
.rt-figure { position: relative; margin: 0 0 .9em; max-width: 100%; }
.rt-figure img { display: block; max-width: 100%; max-height: 70vh; height: auto; border-radius: 4px; border: 1px solid var(--line); }
.rt-drawing-view { border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; line-height: 0; max-width: 820px; }
.rt-drawing-view p { line-height: 1.5; padding: 24px; margin: 0; }
.rt-drawing-svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.rt-figure-tools { display: flex; gap: 6px; margin-top: 6px; }
.rt-figure-tools .btn { font-size: 13px; }

.lesson-edit { max-width: 980px; }
.rt-wrap { display: flex; flex-direction: column; gap: 0; }
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  position: sticky;
  top: 50px;
  z-index: 2;
}
.rt-toolbar .tool { height: 30px; font-size: 13px; padding: 0 .6em; }
.rt-toolbar .tool b, .rt-toolbar .tool i, .rt-toolbar .tool u, .rt-toolbar .tool s { font-size: 15px; font-family: var(--font); }
.rt-toolbar .tool code { font: 12px ui-monospace, Consolas, monospace; }
.rich-editor {
  max-width: none;
  min-height: 280px;
  padding: 14px 16px;
  background: rgba(10, 16, 20, .35);
  border: 1px solid var(--line-strong);
  border-radius: 0 0 4px 4px;
  outline: none;
  cursor: text;
}
.rich-editor:focus { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.rich-editor .rt-figure { cursor: default; user-select: none; }
.rich-editor .rt-figure img, .rich-editor .rt-drawing-view { outline: 1px dashed transparent; }
.rich-editor .rt-figure:hover img, .rich-editor .rt-figure:hover .rt-drawing-view { outline-color: var(--amber); }
.rt-status { margin: 6px 0 0; font-size: 14px; color: var(--amber); }
.rt-status:empty { display: none; }

.sketch-dialog { width: min(1180px, 96vw); max-height: 96vh; overflow: auto; }
.sketch-dialog .board-stage { max-width: max(520px, calc((96vh - 300px) * 1.6)); }

/* Трансляции */
.streams { display: flex; flex-direction: column; gap: 12px; }
.streams-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.stream-budget { color: var(--muted); font-size: 14px; flex: 1; min-width: 220px; }
.streams-notice { margin: 0; color: var(--amber); font-size: 14px; }
.streams-notice:empty { display: none; }
.watch-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; }
.watch-toggle input { width: 18px; height: 18px; padding: 0; accent-color: var(--amber); }

.stream-stage {
  display: grid;
  gap: 8px;
  background: #0f161a;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px;
  min-height: 240px;
}
.stream-stage:fullscreen { border: 0; border-radius: 0; padding: 6px; align-content: center; }
.stream-main, .stream-side { display: grid; gap: 8px; min-width: 0; align-content: start; }
.stream-empty { margin: 0; padding: 60px 16px; text-align: center; grid-column: 1 / -1; }
.layout-one { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.layout-one .stream-side { max-height: 100%; overflow: auto; }
.layout-two .stream-main { grid-template-columns: 1fr 1fr; }
.layout-two .stream-side, .layout-grid .stream-side { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.layout-two .stream-side { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.layout-grid .stream-side { grid-column: 1 / -1; }
.layout-grid.count-1 .stream-side { grid-template-columns: 1fr; }
.layout-grid.count-2 .stream-side, .layout-grid.count-3 .stream-side, .layout-grid.count-4 .stream-side { grid-template-columns: 1fr 1fr; }
.layout-grid.count-5 .stream-side, .layout-grid.count-6 .stream-side,
.layout-grid.count-7 .stream-side, .layout-grid.count-8 .stream-side, .layout-grid.count-9 .stream-side { grid-template-columns: repeat(3, 1fr); }
.layout-one .stream-main:only-child, .stream-main:has(+ .stream-side[hidden]) { grid-column: 1 / -1; }

.tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
.tile.is-main { border-color: var(--amber); }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tile:fullscreen { border: 0; border-radius: 0; }
.tile-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 14px; }
.tile-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  flex-wrap: wrap;
}
.tile-name {
  font: 700 15px/1 var(--narrow);
  letter-spacing: .03em;
  color: var(--amber-ink);
  background: var(--amber);
  padding: .3em .5em .3em .65em;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
.tile:not(.is-main) .tile-name { background: rgba(233, 227, 210, .92); }
.tile-info { font-size: 12px; color: #e9e3d2; background: rgba(15, 22, 26, .75); padding: 2px 6px; border-radius: 3px; }
.tile-info:empty { display: none; }
/* На маленьких экранах цифры только при наведении, чтобы не закрывать картинку */
.tile:not(.is-main):not(:hover) .tile-info { display: none; }
.layout-grid .tile .tile-info { display: inline; }
.layout-grid .tile .tile-info:empty { display: none; }
.tile-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity .15s;
}
.tile:hover .tile-controls, .tile:focus-within .tile-controls { opacity: 1; }
.tile-controls .btn { background: rgba(15, 22, 26, .85); }
.tile-controls .btn[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.stream-hidden { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stream-hidden:empty { display: none; }

.self-stream { border: 1px solid var(--line); border-radius: 6px; padding: 16px; background: rgba(10, 16, 20, .25); }
.self-intro { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 62ch; }
.self-intro p { margin: 0; }
.self-live { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.self-side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.self-side p { margin: 0; }
.self-tile.off { background: rgba(10, 16, 20, .6); border-style: dashed; }
.self-live.no-preview { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.self-live.no-preview .self-tile { aspect-ratio: auto; min-height: 90px; }
.self-tile.off .tile-wait { text-align: center; padding: 10px; line-height: 1.4; }
.watch-toggle.small { font-size: 14px; }
.live-badge { font: 700 15px var(--narrow); color: var(--red); display: inline-flex; align-items: center; gap: 8px; }
.live-badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }

/* Диалоги */
dialog {
  color: var(--paper);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 20px;
}
dialog::backdrop { background: rgba(8, 12, 14, .72); }
dialog h2 { font-size: 22px; }
.save-dialog { width: min(480px, 94vw); }
.choice { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.choice legend { padding: 0; margin-bottom: 6px; }
.choice label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.choice label:has(input:checked) { border-color: var(--amber); }
.choice input { width: 16px; height: 16px; padding: 0; margin: 4px 0 0; accent-color: var(--amber); }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice small { color: var(--muted); font-size: 14px; }

.player { width: min(1180px, 96vw); max-height: 96vh; }
.player-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 12px; }
.player-head p { margin: 4px 0 0; font-size: 14px; }
.player-stage { background: #162026; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; line-height: 0; }
.player-svg { display: block; width: 100%; height: auto; max-height: calc(96vh - 230px); aspect-ratio: 16 / 10; }
.player-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.player-controls .btn { min-width: 88px; }
.player-range { flex: 1; min-width: 160px; padding: 0; accent-color: var(--amber); border: 0; background: none; }
.player-time { font: 700 15px var(--narrow); color: var(--muted); min-width: 84px; font-variant-numeric: tabular-nums; }
.player-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.player-actions .btn:last-child.danger { margin-left: auto; }

@media (max-width: 900px) {
  #app.view-room { height: auto; min-height: calc(100% - var(--footer-h)); }
  .room { grid-template-columns: 1fr; padding: 12px; }
  .room-main { overflow: visible; padding: 0 18px 22px; }
  .tabs { margin: 0 -18px 22px; padding: 0 8px; }
  .people { max-height: none; }
  .chat-list { max-height: 55vh; }
  .lesson-topic { font-size: 28px; }
}
@media (max-width: 800px) {
  .lobby { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px; }
  .login-mark { font-size: 104px; }
}
@media (max-width: 640px) {
  .brand-sub, .who-role { display: none; }
  .topbar { gap: 12px; padding: 10px 12px; }
  .material-form .grid { grid-template-columns: 1fr; }
  .plate { font-size: 17px; }
  .drawing { grid-template-columns: minmax(0, 1fr) auto; }
  .self-live, .layout-one { grid-template-columns: 1fr; }
  .layout-two .stream-main { grid-template-columns: 1fr; }
  .drawing-mode { grid-row: 2; grid-column: 1; justify-self: start; }
  .drawing-meta { grid-row: 3; }
  .drawing .btn { grid-row: 1 / 4; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.attitude-row { align-items: center; gap: 14px; }
.attitude-title { font: 700 15px var(--narrow); color: var(--paper); text-transform: uppercase; letter-spacing: .04em; }
.attitude .map-zoom { min-width: 140px; }
.attitude-value { font: 700 14px var(--narrow); color: var(--paper); min-width: 9ch; font-variant-numeric: tabular-nums; }

/* ---------- Практика: вылеты и расстановка */
.practice { --ally: #6fa8dc; --enemy: #e07a63; display: flex; flex-direction: column; gap: 14px; }
.pr-help p { margin: 0; font-size: 14px; }
.pr-help b { color: var(--paper); }
.pr-error:empty { display: none; }
.pr-body { display: flex; flex-direction: column; gap: 14px; }
.pr-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .pr-sides { grid-template-columns: 1fr; } }
.pr-col { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 12px; min-height: 180px; transition: border-color .12s, background .12s; }
.pr-col.allies { border-top: 3px solid var(--ally); }
.pr-col.enemies { border-top: 3px solid var(--enemy); }
.pr-col.observers { min-height: 110px; border-style: dashed; }
.pr-col-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 18px var(--narrow); text-transform: uppercase; letter-spacing: .04em; }
.allies .pr-col-title { color: var(--ally); }
.enemies .pr-col-title { color: var(--enemy); }
.observers .pr-col-title { color: var(--muted); }
.pr-col-count { font: 700 13px var(--narrow); color: var(--muted); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 7px; }
.pr-col-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.pr-obs-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.pr-empty { margin: 6px 2px; font-size: 14px; }
.practice.dragging .pr-col { background: rgba(233, 227, 210, .025); }
.pr-col.drop-over { border-color: var(--amber); background: rgba(217, 164, 65, .07); }

.pr-group { --side: var(--muted); border: 1px solid var(--line-strong); border-left: 3px solid var(--side); border-radius: 6px; background: var(--panel); padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.allies .pr-group { --side: var(--ally); }
.enemies .pr-group { --side: var(--enemy); }
.pr-group.solo { border-style: dashed; border-left-style: solid; }
.pr-group.drop-over { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.pr-group-head { display: flex; align-items: center; gap: 6px; padding: 0 2px; min-height: 24px; }
.practice:not(.ctrl) .pr-group-head[draggable] { cursor: grab; }
.pr-group-title { font: 700 14px var(--narrow); color: var(--side); text-transform: uppercase; letter-spacing: .03em; }
.pr-count { min-width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--side); color: #10181c; font: 700 13px var(--narrow); padding: 0 5px; }
.pr-edit { margin-left: auto; background: none; border: 0; color: var(--muted); padding: 2px 4px; cursor: pointer; display: inline-flex; border-radius: 4px; }
.pr-edit:hover { color: var(--amber); background: rgba(233, 227, 210, .06); }
.pr-members { display: flex; flex-direction: column; gap: 4px; }

/* Пилот: все плашки одного размера, ник читается целиком или с многоточием и подсказкой */
.pr-chip {
  --side: var(--line-strong);
  position: relative;
  display: flex; align-items: center; gap: 7px;
  width: 224px; height: 38px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 5px;
  background: var(--panel-2); color: var(--paper);
  font: 700 16px var(--narrow);
  user-select: none;
}
.allies .pr-chip { --side: var(--ally); }
.enemies .pr-chip { --side: var(--enemy); }
.pr-chip[draggable] { cursor: grab; }
.practice.ctrl .pr-chip[draggable] { cursor: copy; }
.pr-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pr-chip.online .dot { background: var(--olive); }
.pr-chip.offline .pr-nick { opacity: .55; }
.pr-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Ведущий — плашка залита цветом стороны и отмечена звёздой; ведомые — обведены тем же цветом */
.pr-chip.leader { background: var(--side); border-color: var(--side); color: #10181c; }
.pr-chip.leader .dot { box-shadow: 0 0 0 1.5px #10181c; }
.pr-chip.leader.offline .pr-nick { opacity: .7; }
.pr-chip.wing { border-color: var(--side); margin-left: 14px; width: 210px; }
.pr-chip.wing::before { content: ''; position: absolute; left: -10px; top: -6px; width: 8px; height: 24px; border-left: 1.5px solid var(--side); border-bottom: 1.5px solid var(--side); border-bottom-left-radius: 4px; opacity: .7; }
.pr-chip.solo { border-color: var(--side); border-style: dashed; }
.observers .pr-group .pr-chip.leader { --side: var(--paper); }
.pr-star { flex: none; font-size: 14px; }
.pr-chip.me { box-shadow: 0 0 0 2px var(--amber); }
.pr-chip.selected { outline: 2px solid var(--amber); outline-offset: 2px; }
.pr-chip.drop-over { box-shadow: 0 0 0 2px var(--amber); }
.pr-order { position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font: 700 13px var(--narrow); display: grid; place-items: center; }
.pr-actions { justify-content: flex-end; }
.menu-item.current { color: var(--amber); cursor: default; }
.pr-chip.long { font-size: 14px; letter-spacing: -.01em; }

/* Практика: смена сторон, завершение вылета, реплеи */
.pr-sides { grid-template-columns: 1fr auto 1fr; gap: 10px; }
@media (max-width: 760px) { .pr-sides { grid-template-columns: 1fr; } .pr-swap-wrap { justify-content: center; } }
.pr-swap-wrap { display: flex; align-items: center; }
.pr-swap {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--panel-2); color: var(--paper); border: 1px solid var(--line-strong);
}
.pr-swap:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.pr-swap:disabled { opacity: .4; cursor: default; }
.pr-help svg { vertical-align: -2px; }
.practice.finished .pr-help { display: none; }
.pr-finished { margin: 0; padding: 10px 12px; border: 1px solid var(--olive); border-radius: 6px; color: var(--olive); font: 700 15px var(--narrow); }
.pr-finish { justify-content: flex-end; gap: 8px; }
.pr-actions + .pr-replays { margin-top: -6px; }
.pr-replays { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pr-replays-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-replays-head .pr-col-title { margin: 0; color: var(--paper); margin-right: auto; }
.pr-replays-hint { margin: 0; font-size: 14px; }
.pr-replay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-replay { display: grid; grid-template-columns: 28px minmax(110px, 180px) minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid var(--line); }
.pr-replay:first-child { border-top: 0; }
.pr-replay.on { background: rgba(155, 176, 106, .08); }
.pr-replay-pick { display: grid; place-items: center; cursor: pointer; }
.pr-replay-pick input { width: 18px; height: 18px; accent-color: var(--olive); cursor: pointer; }
.pr-replay-mark { color: var(--olive); font-weight: 700; text-align: center; }
.pr-replay-who { display: flex; align-items: center; gap: 7px; font: 700 16px var(--narrow); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pr-replay-who .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pr-replay-who .dot.on { background: var(--olive); }
.pr-replay-file { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 14px; }
.pr-replay-meta { color: var(--muted); font-size: 13px; white-space: nowrap; }
.pr-replay-tag { color: var(--olive); border-color: var(--olive); }
.pr-replay:not(.on) .pr-replay-tag { visibility: hidden; }
.pr-replay-actions { display: flex; gap: 4px; }
@media (max-width: 760px) { .pr-replay { grid-template-columns: 28px 1fr auto; } .pr-replay-file, .pr-replay-meta, .pr-replay-tag { display: none; } }
.pr-upload { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pr-upload progress { flex: 1; accent-color: var(--amber); }
.room-notice { margin: 0; padding: 6px 12px 6px 20px; background: #3a3420; color: #f1e2b8; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.room-notice .btn { margin-left: auto; }
.pr-head-tools { margin-left: auto; display: inline-flex; gap: 2px; }
.pr-head-tools .pr-edit { margin-left: 0; }
.pr-group-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-item { position: relative; border-bottom: 1px solid var(--line); }
.training-item:last-child { border-bottom: 0; }
.training-item .training-row { border-bottom: 0; padding-right: 64px; }
.training-del {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 6px; border: 1px solid transparent; background: none;
  color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.training-del:hover, .training-del:focus-visible { color: var(--red); border-color: var(--red); }

/* Практика: оценка, избранное, заметки к вылету */
.pr-rate { display: inline-flex; gap: 4px; margin-right: 8px; }
.pr-rate-btn {
  width: 40px; height: 36px; display: grid; place-items: center; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--muted);
}
.pr-rate-btn:hover { color: var(--paper); border-color: var(--paper); }
.pr-rate-btn.like[aria-pressed="true"] { background: var(--olive); border-color: var(--olive); color: #10181c; }
.pr-rate-btn.dislike[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #10181c; }
.pr-finish { align-items: center; }
.practice .board-tab-btn { display: inline-flex; align-items: center; gap: 5px; }
.pr-tab-fav { color: var(--amber); display: inline-flex; }
.pr-tab-rate { display: inline-flex; }
.pr-tab-rate.like { color: var(--olive); }
.pr-tab-rate.dislike { color: var(--red); }
.pr-fav-btn.on { color: var(--amber); }

.pr-notes { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pr-notes .pr-col-title { margin: 0; color: var(--paper); }
.pr-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pr-note { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.pr-note.mentions-me { border-color: var(--amber); }
.pr-note-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pr-note-head .btn { margin-left: auto; padding: 0 8px; }
.pr-note-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.pr-mention { color: var(--amber); font-weight: 700; background: rgba(217, 164, 65, .12); border-radius: 3px; padding: 0 3px; }
.pr-mention.me { background: var(--amber); color: var(--amber-ink); }
.pr-note-form { display: flex; flex-direction: column; gap: 6px; }
.pr-note-field { position: relative; }
.pr-note-input { width: 100%; resize: vertical; min-height: 70px; }
.pr-note-actions { justify-content: flex-end; align-items: center; gap: 10px; }
.pr-suggest {
  position: absolute; left: 8px; top: 100%; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; min-width: 220px; max-width: 320px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.pr-suggest li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; font: 700 15px var(--narrow); }
.pr-suggest li.active, .pr-suggest li:hover { background: rgba(217, 164, 65, .15); }
.pr-suggest small { color: var(--muted); font-weight: 400; }
.pr-suggest .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pr-suggest .dot.on { background: var(--olive); }
.pr-hint { font-size: 13px; }
/* Вкладки вылетов закреплены под полосой разделов и не уезжают при прокрутке */
.pr-tabs {
  position: sticky;
  top: var(--tabs-h, 49px);
  z-index: 2;
  background: var(--panel);
  margin: -28px -28px 0;
  padding: 14px 30px 0;
}
@media (max-width: 900px) { .pr-tabs { margin: -22px -18px 0; padding: 10px 20px 0; } }
.msg.system { padding: 6px 10px; margin: 4px 0; border: 0; border-left: 2px solid var(--olive); background: rgba(155, 176, 106, .08); border-radius: 0 4px 4px 0; }
.msg.system .msg-text { color: #c7d3a6; font-size: 14px; margin: 0; }
.msg.system { display: flex; align-items: flex-end; gap: 8px; }
.msg.system .msg-text { flex: 1; min-width: 0; }
.msg.system time { flex: none; color: var(--muted); font-size: 12px; margin-left: 0; }

/* Подвал на всех страницах */
.site-footer {
  height: var(--footer-h); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px; border-top: 1px solid var(--line); background: var(--bg);
  font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
.footer-left, .footer-right { flex: none; }
.footer-right { display: flex; gap: 16px; align-items: center; }
/* Совет по центру подвала: плавно появляется и гаснет */
.footer-tip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; color: var(--muted); opacity: 0; transform: translateY(3px); transition: opacity .9s ease, transform .9s ease; }
.footer-tip.on { opacity: .85; transform: none; }
.footer-tip.no-anim { transition: none; }
.tips-dialog textarea { width: min(640px, 80vw); min-height: 300px; font: inherit; line-height: 1.5; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--amber); }
@media (max-width: 560px) { .footer-tip { order: 3; flex-basis: 100%; } .site-footer { height: auto; min-height: var(--footer-h); flex-wrap: wrap; justify-content: center; padding: 6px 12px; white-space: normal; text-align: center; gap: 4px 12px; } }

/* Статус пилота в шапке: его задача в текущем вылете */
.pilot-status {
  --side: var(--muted);
  display: inline-flex; align-items: center; gap: 0; min-width: 0; max-width: 46vw; overflow: hidden;
  border: 1.5px solid var(--side); border-radius: 6px; background: rgba(0, 0, 0, .25); color: var(--paper);
  font: 700 14px var(--narrow); padding: 0; cursor: pointer; white-space: nowrap;
}
.pilot-status.allies { --side: #6fa8dc; }
.pilot-status.enemies { --side: #e07a63; }
.pilot-status.finished { --side: var(--olive); }
.pilot-status > span { padding: 4px 9px; border-left: 1px solid rgba(233, 227, 210, .12); overflow: hidden; text-overflow: ellipsis; }
.pilot-status > span:first-child { border-left: 0; }
.pilot-status .ps-side { background: var(--side); color: #10181c; text-transform: uppercase; letter-spacing: .04em; border-left: 0; }
.pilot-status.finished .ps-task { color: var(--olive); }
.pilot-status.leader .ps-task::before { content: '★ '; color: var(--amber); }
.pilot-status:hover { box-shadow: 0 0 0 1px var(--side); }
.ps-task { min-width: 0; }
@media (max-width: 900px) { .pilot-status { max-width: 100%; } .pilot-status .ps-group { display: none; } }
.link-btn { background: none; border: 0; padding: 0; color: var(--amber); font: inherit; text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--amber-hover); }
.room-head .pilot-status { margin: 0 auto; }
.chat-system-toggle { display: inline-flex; align-items: center; gap: 6px; font: 400 13px var(--font); color: var(--muted); cursor: pointer; user-select: none; }
.chat-system-toggle input { accent-color: var(--olive); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.chat-list.hide-system .msg.system { display: none; }

/* ---------- Аккаунты: вход, регистрация, пароль, админ-панель */
.login-ok { margin: 0; padding: 10px 12px; border-left: 3px solid var(--olive); background: rgba(155, 176, 106, .12); color: var(--paper); }
.lobby.single { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
.training-row .training-state { grid-row: 1 / 3; grid-column: 2; align-self: center; }
.training-state.live { color: var(--olive); border-color: var(--olive); }
.narrow-page { width: 100%; max-width: 460px; margin: 0 auto; padding: 40px 20px; }
.who .btn { position: relative; }

@media (max-width: 760px) { .who { flex-wrap: wrap; justify-content: flex-end; gap: 6px; } }

.admin-page { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.admin-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-head .section-title { margin: 0; font-size: 26px; }
.admin-head input[type=search] { margin-left: auto; width: 260px; max-width: 100%; }
.admin-body { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.admin-body > p { margin: 0; padding: 18px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font: 700 13px var(--narrow); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tr.pending { background: rgba(217, 164, 65, .07); }
.admin-table tr.blocked td:first-child b { color: var(--red); }
.admin-table b { font: 700 16px var(--narrow); }
.admin-email { font-size: 13px; overflow-wrap: anywhere; }
.admin-dates { font-size: 13px; }
.admin-blocked { color: var(--red); }
.admin-flag { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.admin-flag input { accent-color: var(--amber); width: 16px; height: 16px; }
.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.admin-table select { padding: 5px 8px; font-size: 14px; }
.admin-block { max-width: 160px; }
.count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: var(--amber-ink); font: 700 12px var(--narrow); }

/* ---------- Ники и профили */
.nick { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; vertical-align: baseline; }
.nick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nick-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.nick-link:hover .nick-text { text-decoration: underline; text-underline-offset: 2px; }
.tail-badge {
  display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px;
  border: 1.5px solid var(--amber); border-radius: 3px; color: var(--amber);
  font: 700 11px/1 var(--narrow); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.pr-chip .tail-badge, .pilot-status .tail-badge { border-color: currentColor; color: inherit; }
.pr-chip .nick { flex: 1; }
.who-name { display: inline-flex; align-items: center; gap: 6px; color: var(--paper); text-decoration: none; }
.who-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.admin-nick { font: 700 16px var(--narrow); }
.admin-newnick { color: var(--amber); }
.narrow-page.wide { max-width: 640px; }
.section-title.small { font-size: 17px; margin: 0; }
.pf-grid { display: grid; gap: 12px; grid-template-columns: 140px 1fr 1fr; }
.pf-grid > :last-child { grid-column: 2 / 4; }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } .pf-grid > :last-child { grid-column: auto; } }
.pf-tail-input { font: 700 20px var(--narrow); text-align: center; letter-spacing: .08em; }
.pf-nick-now { font-size: 17px; }
.pf-nick-form { gap: 8px; }
.pf-nick-form input { flex: 1; min-width: 0; }
.pf-request { margin: 0; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(217, 164, 65, .1); font-size: 14px; }

.profile-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 20px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel); color: var(--paper); box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.profile-dialog::backdrop { background: rgba(8, 12, 14, .6); }
.pf-head { display: flex; align-items: flex-start; gap: 12px; }
.pf-title { flex: 1; min-width: 0; }
.pf-title h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; overflow-wrap: anywhere; }
.pf-title h2 .tail-badge { min-width: 26px; height: 26px; font-size: 15px; }
.pf-title p { margin: 4px 0 0; font-size: 14px; }
.pf-list { margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pf-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.pf-row dt { color: var(--muted); font-size: 14px; }
.pf-row dd { margin: 0; overflow-wrap: anywhere; }
.pf-gear { white-space: pre-wrap; }
.pf-copy { user-select: all; }
.pf-actions { margin-top: 18px; gap: 8px; }
.pr-folder { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 6px; }
.pr-folder-head { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pr-folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pr-folder-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 14px; }
.pr-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-folder-now { margin: 0; }

/* ---------- Tacview: просмотр реплеев */
.tv-badge[hidden] { display: none; }
.tv-badge { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--red); vertical-align: middle; animation: tv-pulse 1.6s ease-in-out infinite; }
@keyframes tv-pulse { 50% { opacity: .35; } }
.tv { display: flex; flex-direction: column; gap: 10px; }
.tv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tv-select { max-width: 360px; }
.tv-title { font: 700 15px var(--narrow); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tv-live { font: 700 13px var(--narrow); color: var(--red); text-transform: uppercase; letter-spacing: .05em; }
.tv-live::before { content: '● '; }
.tv-banner { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(217, 164, 65, .1); border-radius: 0 6px 6px 0; }
.tv-banner span { flex: 1; }
.tv-stage { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; height: max(420px, calc(100vh - 390px)); height: max(420px, calc(100dvh - 390px)); }
.tv-canvas { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #2b3f4c; }
.tv-canvas canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.tv-canvas canvas:active { cursor: grabbing; }
.tv-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tv-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 12px var(--narrow); color: #f1ead8;
  text-shadow: 0 0 3px #000, 0 0 2px #000; will-change: transform;
}
.tv-label.sel { color: var(--amber); font-size: 14px; }
.tv-overlay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tv-msg { pointer-events: auto; max-width: 460px; padding: 14px 18px; border-radius: 8px; background: rgba(16, 24, 28, .85); border: 1px solid var(--line-strong); text-align: center; }
.tv-side { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.tv-h { margin: 6px 0 0; font: 700 13px var(--narrow); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.tv-telemetry { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-height: 262px; flex: none; }
.tv-telemetry p { margin: 0; font-size: 14px; }
.tv-tel-head { font-size: 16px; margin-bottom: 6px; overflow-wrap: anywhere; }
.tv-tel { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 14px; }
.tv-tel dt { color: var(--muted); }
.tv-tel dd { margin: 0; font: 700 15px var(--narrow); font-variant-numeric: tabular-nums; text-align: right; }
.tv-tel-actions { margin-top: 8px; gap: 6px; }
.tv-group { display: flex; flex-direction: column; gap: 2px; }
.tv-group-title { font: 700 13px var(--narrow); color: var(--paper); margin: 4px 0 2px; cursor: default; }
details.tv-group > summary { cursor: pointer; }
.tv-obj { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 5px 8px; border-radius: 5px; border: 1px solid transparent; background: none; color: var(--paper); text-align: left; cursor: pointer; font: 400 14px var(--font); }
.tv-obj:hover { background: rgba(233, 227, 210, .06); }
.tv-obj.sel { border-color: var(--amber); background: rgba(217, 164, 65, .1); }
.tv-obj-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-obj-type { grid-column: 2; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-follow { grid-column: 3; grid-row: 1; font: 700 11px var(--narrow); color: var(--amber); text-transform: uppercase; }
.tv-dot { width: 10px; height: 10px; border-radius: 50%; background: #b8c2c6; }
.tv-dot[data-c="blue"], .tv-dot[data-c="allies"] { background: #6fa8dc; }
.tv-dot[data-c="red"], .tv-dot[data-c="axis"] { background: #e07a63; }
.tv-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.tv-ev { display: grid; grid-template-columns: 44px 1fr; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 4px; background: none; color: var(--paper); text-align: left; cursor: pointer; font: inherit; }
.tv-ev:hover { background: rgba(233, 227, 210, .06); }
.tv-ev.Destroyed { color: #f0a08c; }
.tv-ev-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.tv-timeline { display: flex; flex-direction: column; gap: 6px; }
.tv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tv-play { min-width: 44px; font-size: 15px; }
.tv-speed, .tv-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.tv-speed select { padding: 4px 6px; font-size: 13px; }
.tv-scale { width: 90px; accent-color: var(--amber); }
.tv-check input { accent-color: var(--amber); }
.tv-clock { margin-left: auto; font: 700 15px var(--narrow); font-variant-numeric: tabular-nums; color: var(--paper); }
.tv-track { position: relative; padding-top: 10px; }
.tv-range { width: 100%; accent-color: var(--amber); }
.tv-markers { position: absolute; left: 8px; right: 8px; top: 0; height: 10px; }
.tv-mark { position: absolute; top: 0; width: 4px; height: 10px; margin-left: -2px; border: 0; padding: 0; border-radius: 1px; background: var(--muted); cursor: pointer; }
.tv-mark.Destroyed { background: var(--red); }
.tv-mark.Message, .tv-mark.Bookmark { background: var(--amber); }
@media (max-width: 900px) {
  .tv-stage { grid-template-columns: 1fr; height: auto; }
  .tv-canvas { height: 60vh; }
  .tv-side { max-height: none; }
}
.tv-hint { position: absolute; left: 8px; bottom: 6px; right: 8px; font-size: 11px; color: rgba(233, 227, 210, .55); pointer-events: none; text-shadow: 0 0 3px #000; }

/* Планшет: вид линии под Shift/Ctrl и полный экран */
.tool.width.live { border-color: var(--paper); box-shadow: 0 0 0 2px var(--amber); }
.board.is-full, .board:fullscreen { background: var(--bg); padding: 12px 16px; gap: 8px; height: 100vh; overflow: hidden; }
.board:fullscreen .board-stage { flex: 1; min-height: 0; max-width: min(100%, calc((100vh - 140px) * 1.6)); display: flex; align-items: center; }
.board:fullscreen .board-svg { width: 100%; height: auto; max-height: 100%; }
.board::backdrop { background: var(--bg); }
.swatch[aria-pressed="true"]:not(.is-main) { box-shadow: 0 0 0 1px var(--line-strong); }
.swatch.is-main { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--paper); }
.swatch.is-alt { outline: 2px dashed var(--paper); outline-offset: 3px; }
.swatch.is-main.is-alt { outline-offset: 5px; }
.board-svg.erasing:not(.readonly) { cursor: pointer; }

/* Помощники и активный планшет (2.15) */
.helper-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 20px 0; padding: 10px 14px; border: 1px solid var(--amber); background: rgba(217, 164, 65, .12);
}
.helper-invite[hidden] { display: none; }
.person-role.invited { color: var(--muted); font-style: italic; }
.board-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); margin-right: 6px; vertical-align: middle; }
.board-activate { margin-left: auto; }

/* ---------- Уведомления (2.16) */
.bell {
  position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer;
}
.bell svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell:hover, .bell:focus-visible, .bell[aria-expanded="true"] { color: var(--paper); border-color: var(--line-strong); }
.bell.ringing { color: var(--amber); animation: bell-glow 1.6s ease-in-out infinite; }
.bell.ringing svg { transform-origin: 50% 10%; animation: bell-swing 1.6s ease-in-out infinite; }
@keyframes bell-swing {
  0%, 50%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-6deg); }
}
@keyframes bell-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); background: transparent; }
  50% { box-shadow: 0 0 0 4px rgba(217, 164, 65, .25); background: rgba(217, 164, 65, .14); }
}
@media (prefers-reduced-motion: reduce) {
  .bell.ringing, .bell.ringing svg { animation: none; }
  .bell.ringing { background: rgba(217, 164, 65, .18); }
}
.bell-count {
  position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #c0392b; color: #fff; font: 700 11px/18px var(--narrow); text-align: center;
}
.bell-count[hidden] { display: none; }
.notif-panel {
  position: fixed; z-index: 60; max-height: min(70vh, 560px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.notif-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.notif-head h2 { margin: 0; font-size: 16px; }
.notif-empty { padding: 14px; margin: 0; font-size: 14px; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif { position: relative; padding: 10px 34px 10px 14px; border-bottom: 1px solid var(--line); }
.notif:last-child { border-bottom: 0; }
.notif.unread { background: rgba(217, 164, 65, .09); box-shadow: inset 3px 0 0 var(--amber); }
.notif.gone { opacity: .55; }
.notif-main { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 0; border: 0; background: none; color: var(--paper); text-align: left; font: inherit; font-size: 14px; cursor: pointer; }
.notif-main:disabled { cursor: default; }
.notif-main:hover:not(:disabled) .notif-title { text-decoration: underline; text-underline-offset: 3px; }
.notif-text { margin: 0; color: var(--muted); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.notif-when { margin: 0; font-size: 13px; color: var(--amber); }
.notif-meta { color: var(--muted); font-size: 12px; }
.notif-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notif-state { margin: 6px 0 0; font-size: 13px; }
.notif-x { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.notif-x:hover, .notif-x:focus-visible { background: var(--panel-2); color: var(--paper); }

/* Сбор на тренировку */
.rsvp { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 16, 20, .25); display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.rsvp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.rsvp-total b { font-size: 20px; color: var(--olive); }
.rsvp-me { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rsvp-btn.on.rsvp-yes { background: var(--olive); border-color: var(--olive); color: #1b252b; }
.rsvp-btn.on.rsvp-maybe { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.rsvp-btn.on.rsvp-no { background: #c0392b; border-color: #c0392b; color: #fff; }
.rsvp-groups { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.rsvp-group { margin: 0; }
.rsvp-label { color: var(--muted); }
.rsvp-cancel { margin-left: 2px; color: var(--muted); }
.notif-actions .rsvp-yes { background: var(--olive); border-color: var(--olive); color: #1b252b; }
.notif-actions .rsvp-no { background: #c0392b; border-color: #c0392b; color: #fff; }
.start-phase.rsvp-yes { color: var(--olive); border-color: var(--olive); }
.start-phase.rsvp-no { color: #e07a63; border-color: #e07a63; }
.start-phase.rsvp-maybe { color: var(--amber); border-color: var(--amber); }
.room-going { font-size: 13px; color: var(--olive); white-space: nowrap; border: 1px solid var(--olive); background: transparent; padding: 3px 8px; cursor: pointer; font-family: inherit; }
.room-going:hover { background: rgba(155, 176, 106, .12); }
.invite-dialog { width: min(520px, 94vw); }
.invite-dialog input[type="search"] { flex: 1; min-width: 160px; width: auto; }
.invite-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.invite-list li label { display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; }
.invite-list li label:hover { background: var(--panel-2); }
.invite-list input[type="checkbox"] { width: auto; }
.invite-state { margin-left: auto; font-size: 12px; color: var(--muted); }
.invite-state.rsvp-yes { color: var(--olive); }
.invite-state.rsvp-maybe { color: var(--amber); }
.invite-state.rsvp-no { color: #e07a63; }
.msg.mention-me { background: rgba(217, 164, 65, .1); box-shadow: inset 3px 0 0 var(--amber); margin: 0 -18px; padding-left: 18px; padding-right: 18px; }

/* Подсказка ников в чате: над полем ввода */
.chat-suggest { top: auto; bottom: 100%; left: 0; margin: 0 0 6px; width: min(300px, 100%); max-width: none; }
.chat-suggest .tail-badge, .chat-suggest .tail { margin-left: 2px; }

/* ---------- Разделы главной и турниры (2.17) */
.main-nav { display: flex; gap: 4px; }
.main-nav-link {
  font: 700 15px var(--narrow); letter-spacing: .02em; color: var(--muted); text-decoration: none;
  padding: 6px 12px; border-radius: 4px; border: 1px solid transparent;
}
.main-nav-link:hover { color: var(--paper); }
.main-nav-link.active { color: var(--amber); border-color: var(--line-strong); background: rgba(217, 164, 65, .08); }
.admin-flag + .admin-flag { margin-left: 12px; }
.small-note { font-size: 13px; margin: 0; }
.tour-type { margin-left: 8px; font: 700 11px var(--narrow); padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--muted); vertical-align: middle; }
.tour-announced { color: var(--muted); }
.tour-registration { color: var(--amber); border-color: var(--amber); }
.tour-running { color: var(--olive); border-color: var(--olive); }
.tour-finished { color: var(--muted); }
.tour-page { width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 20px; }
.tour-head { display: flex; flex-direction: column; gap: 8px; }
.tour-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tour-title-row .lesson-topic { margin: 0; }
.tour-facts, .tour-dates { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 15px; }
.tour-dates b { color: var(--paper); font-weight: 600; }
.tour-champion { margin: 0; font-size: 18px; color: var(--olive); }
.tour-champion b { color: var(--paper); }
.tour-setup { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tour-setup > .tour-reg { grid-column: 1; }
.tour-setup > section:last-child { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) { .tour-setup { grid-template-columns: 1fr; } .tour-setup > section:last-child { grid-column: auto; grid-row: auto; } }
.tour-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-entrants { list-style: none; margin: 0; padding: 0; }
.tour-entrants li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tour-entrants li:last-child { border-bottom: 0; }
.tour-seed { flex: none; width: 28px; text-align: right; font: 700 15px var(--narrow); color: var(--muted); }
.tour-ename { flex: 1; min-width: 0; }
.tour-members { font-size: 14px; }
.tour-eactions { display: flex; gap: 4px; flex: none; }
.tour-invited { margin: 0; color: var(--amber); }
.tour-invites { margin: 0; font-size: 14px; }
.tour-generate { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.tour-generate .field { width: 90px; }
.tour-team-selects { display: grid; gap: 8px; }
.tour-tools { justify-content: space-between; }
.tour-bracket { display: flex; flex-direction: column; gap: 14px; }

/* Сетка на выбывание: колонки раундов, матчи распределены по высоте */
.bracket-scroll { overflow-x: auto; padding-bottom: 6px; }
.bracket-cols { display: flex; gap: 28px; min-width: min-content; }
.bracket-col { display: flex; flex-direction: column; width: 220px; flex: none; }
.bracket-round { margin: 0 0 8px; font: 700 13px var(--narrow); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.bracket-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 12px; }
.bm { position: relative; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); overflow: hidden; }
.bm.final { border-color: var(--amber); }
.bm.bye { opacity: .45; }
.bm.clickable { cursor: pointer; }
.bm.clickable:hover, .bm.clickable:focus-visible { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); outline: none; }
.bm-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; min-height: 34px; }
.bm-side + .bm-side { border-top: 1px solid var(--line); }
.bm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-side.empty .bm-name { color: var(--muted); font-style: italic; }
.bm-side.win { background: rgba(155, 176, 106, .16); font-weight: 700; }
.bm-side.win .bm-score { color: var(--olive); }
.bm-side.lose { color: var(--muted); }
.bm-score { flex: none; font: 700 16px var(--narrow); min-width: 18px; text-align: right; }
.bm-foot { display: flex; justify-content: space-between; gap: 8px; padding: 3px 10px; font-size: 12px; color: var(--muted); background: rgba(10, 16, 20, .3); border-top: 1px solid var(--line); }
.bm-time { color: var(--amber); }
.bm-select { padding: 3px 6px; font-size: 14px; min-width: 0; }
.match-dialog { width: min(440px, 94vw); }
.bm-dialog-score { display: flex; align-items: flex-end; gap: 12px; }
.bm-dialog-score label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-weight: 700; min-width: 0; }
.bm-dialog-score label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-input { font: 700 24px var(--narrow); text-align: center; }
.bm-colon { font: 700 28px var(--narrow); padding-bottom: 8px; }
.bm-presets { gap: 6px; }

/* Швейцарская система */
.swiss { display: flex; flex-direction: column; gap: 18px; }
.swiss-table { width: 100%; max-width: 760px; }
.swiss-table tr.leader td { color: var(--olive); font-weight: 700; }
.swiss-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }

/* Итоги */
.tour-results { display: flex; flex-direction: column; gap: 14px; }
.tour-results-bar { justify-content: space-between; }
.tour-results-kicker { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.tour-results .lesson-topic { margin: 0; }
.podium { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.podium-place { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); }
.podium-place.gold { border-color: #d9a441; background: linear-gradient(160deg, rgba(217, 164, 65, .22), var(--panel) 70%); }
.podium-place.silver { border-color: #aeb8bd; background: linear-gradient(160deg, rgba(174, 184, 189, .16), var(--panel) 70%); }
.podium-place.bronze { border-color: #b8794a; background: linear-gradient(160deg, rgba(184, 121, 74, .18), var(--panel) 70%); }
.podium-num { font: 700 30px var(--narrow); color: var(--muted); }
.gold .podium-num { color: #d9a441; }
.podium-name { font-size: 22px; font-weight: 700; }
.podium-members { font-size: 14px; color: var(--muted); }
.tour-stats { margin: 0; display: flex; gap: 22px; color: var(--muted); }
.tour-stats b { color: var(--paper); font-size: 20px; }
.tour-places { width: 100%; max-width: 900px; }
.tour-places tr.gold td:first-child { color: #d9a441; font-weight: 700; }
@media print {
  .topbar, .site-footer, .tour-results-bar { display: none !important; }
  body { background: #fff; color: #000; }
}

/* SW + DE (2.18) */
.tour-stage { color: var(--amber); }
.tour-stage-title { margin: 0; }
.swiss-table tr.qualify td:first-child { box-shadow: inset 3px 0 0 var(--olive); }
.swiss-table tr.cut td { border-bottom: 2px dashed var(--olive); }
.tour-swiss-done { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; background: rgba(10, 16, 20, .2); }
.tour-swiss-done > summary { cursor: pointer; font-weight: 700; margin-bottom: 4px; }
.tour-swiss-done[open] > summary { margin-bottom: 12px; }
.tour-swiss-done > .btn { margin-bottom: 12px; }
.tour-form .field[hidden], .schedule-fields[hidden] { display: none; }
.tour-elim { display: flex; flex-direction: column; gap: 14px; }

/* Двойное выбывание: верхняя и нижняя сетка — разный фон, между ними черта (2.18.1) */
.tour-elim.de { gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bracket-section { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.bracket-section + .bracket-section { border-top: 2px solid var(--line-strong); }
.bracket-section .section-title { margin: 0; }
.bracket-section.upper { background: rgba(155, 176, 106, .07); }
.bracket-section.upper > .section-title { color: var(--olive); }
.bracket-section.lower { background: rgba(224, 122, 99, .07); }
.bracket-section.lower > .section-title { color: var(--red); }
.bracket-section.grand { background: rgba(217, 164, 65, .08); }
.bracket-section.grand > .section-title { color: var(--amber); }

/* Гранд-финал справа от верхней и нижней сетки (2.18.2) */
.tour-elim.de { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.tour-elim.de > .upper { grid-column: 1; grid-row: 1; }
.tour-elim.de > .lower { grid-column: 1; grid-row: 2; }
.tour-elim.de > .grand { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 2px solid var(--line-strong); justify-content: center; max-width: 280px; }
.tour-elim.de > .grand .bracket-cols { flex-direction: column; gap: 18px; }
.tour-elim.de > .grand .bracket-scroll { overflow: visible; }
@media (max-width: 1000px) {
  .tour-elim.de { display: flex; flex-direction: column; }
  .tour-elim.de > .grand { border-left: 0; border-top: 2px solid var(--line-strong); max-width: none; }
  .tour-elim.de > .grand .bracket-cols { flex-direction: row; }
}

/* Линии между матчами сетки (2.18.3) */
.bracket-cols { position: relative; gap: 40px; }
.tour-elim { position: relative; }
svg.bracket-lines { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: visible; }
.bracket-col, .tour-elim > section { position: relative; z-index: 1; }
.tour-elim > svg.bracket-lines { z-index: 2; }
svg.bracket-lines path { fill: none; stroke-width: 2; stroke-linejoin: round; }
svg.bracket-lines path.done { stroke: #7fbf4d; filter: drop-shadow(0 0 3px rgba(127, 191, 77, .45)); }
svg.bracket-lines path.pending { stroke: var(--line-strong); }
svg.bracket-lines path.bye { stroke: var(--line); stroke-dasharray: 4 4; }
.tour-bots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 6px; }
.tour-bots input { width: 80px; padding: 4px 8px; }
.tour-bot { margin-left: 8px; font-size: 11px; color: #8fb3c9; border-color: #8fb3c9; }
.tour-vis.hidden { color: #e07a63; border-color: #e07a63; }
.tour-vis.pilots { color: #8fb3c9; border-color: #8fb3c9; }
.training-row.tour-row .tour-vis { margin-left: 6px; }
/* Логотип турнира в списке: слева на обе строки */
.training-row.tour-row.has-icon { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; }
.tour-row.has-icon .tour-row-icon { grid-row: 1 / 3; grid-column: 1; align-self: center; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.tour-row.has-icon .training-topic, .tour-row.has-icon .training-meta { grid-column: 2; }
.tour-row.has-icon .training-state { grid-column: 3; grid-row: 1; }

/* ---------- Иконка, название турнира и картинка сетки (2.21) */
@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/russo-one-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Russo One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/vendor/fonts/russo-one-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.tour-tools-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.tour-download { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.tour-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tour-board { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: center; }
.tour-board-main { min-width: 0; }
.tour-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 10px 0; }
.tour-brand-icon { width: 200px; height: 200px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(217, 164, 65, .25)); }
.tour-brand-name {
  width: 100%; font: 400 28px/1.12 'Russo One', var(--font); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fbe7a6, #d9a441); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5));
}
.tour-brand-sub { color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) {
  .tour-board { grid-template-columns: 1fr; }
  .tour-brand { order: -1; flex-direction: row; justify-content: flex-start; text-align: left; }
  .tour-brand-icon { width: 72px; height: 72px; }
  .tour-brand-name { width: auto; font-size: 22px; }
}
/* На время съёмки картинки — вся сетка без прокрутки */
.tour-board.exporting { width: max-content; grid-template-columns: max-content 240px; }
.tour-board.exporting .swiss-table { width: auto; min-width: 560px; }
.tour-board.exporting .bracket-scroll { overflow: visible; }
.tour-board.exporting .tour-elim.de { grid-template-columns: max-content auto; }
@media (max-width: 1100px) {
  .tour-board.exporting .tour-brand { order: 0; flex-direction: column; text-align: center; }
  .tour-board.exporting .tour-brand-icon { width: 200px; height: 200px; }
}
/* Картинка всегда в широкой раскладке: гранд-финал справа, даже на узком экране */
.tour-board.exporting .tour-elim.de { display: grid; grid-template-columns: max-content auto; }
.tour-board.exporting .tour-elim.de > .grand { grid-column: 2; grid-row: 1 / span 2; border-top: 0; border-left: 2px solid var(--line-strong); max-width: 280px; }
.tour-board.exporting .tour-elim.de > .grand .bracket-cols { flex-direction: column; }

/* «Шахматка» — таблица результатов швейцарской системы (2.22) */
.swiss-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.cross { display: flex; flex-direction: column; gap: 10px; width: max-content; max-width: 100%; }
.cross-head { display: flex; flex-direction: column; gap: 6px; }
.cross-title { text-align: center; font: 700 20px var(--font); }
.cross-meta, .cross-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; color: var(--muted); }
.cross-meta b, .cross-foot b { color: var(--paper); font-weight: 600; }
.cross-scroll { overflow-x: auto; }
.swiss-cross { border-collapse: collapse; font-size: 14px; }
.swiss-cross th, .swiss-cross td { border: 1px solid var(--line-strong); padding: 6px 6px; text-align: center; white-space: nowrap; }
.swiss-cross th { font: 700 13px var(--narrow); color: var(--muted); background: rgba(10, 16, 20, .35); }
.swiss-cross .c-name { text-align: left; min-width: 150px; padding-left: 10px; font-weight: 600; }
.swiss-cross .c-num { width: 34px; color: var(--muted); }
.swiss-cross .c-tail { width: 54px; color: var(--muted); }
.swiss-cross .c-res { width: 44px; min-width: 44px; }
.swiss-cross td.diag { background: rgba(233, 227, 210, .22); }
.swiss-cross td.win { color: #7fe36f; font-weight: 700; background: rgba(95, 211, 90, .10); }
.swiss-cross td.loss { color: #e07a63; }
.swiss-cross td.pending { color: var(--muted); }
.swiss-cross .c-sum { width: 52px; }
.swiss-cross .c-points { font-weight: 700; color: var(--paper); }
.swiss-cross .c-place { font-weight: 700; color: var(--amber); }
.swiss-cross th.c-res + th.c-sum, .swiss-cross td.c-res + td.c-sum,
.swiss-cross th.c-tail, .swiss-cross td.c-tail { border-right-width: 2px; }
.swiss-cross th.c-res:first-of-type { border-left-width: 2px; }
.swiss-cross tr.qualify td.c-num { box-shadow: inset 3px 0 0 var(--olive); }
.swiss-cross tr.leader td.c-name { color: #9bd36a; }
.tour-board.exporting .cross-scroll { overflow: visible; }

/* Иконка и название — поверх сетки в правом верхнем углу (2.22.1) */
.tour-board { display: block; position: relative; }
.tour-board.brand-pad { padding-right: 236px; }
.tour-brand { position: absolute; top: 0; right: 0; width: 220px; z-index: 3; pointer-events: none; padding: 0; gap: 6px; }
.tour-brand-icon { width: 120px; height: 120px; }
.tour-brand-name { font-size: 20px; }
.tour-brand-sub { font-size: 12px; }
.tour-board.exporting { width: max-content; display: block; }
@media (max-width: 1100px) {
  .tour-board:not(.exporting) .tour-brand { position: static; width: auto; margin-bottom: 12px; }
  .tour-board:not(.exporting) .tour-brand-icon { width: 56px; height: 56px; }
}
@media (max-width: 1100px) {
  .tour-board.exporting .tour-brand-icon { width: 120px; height: 120px; }
}

.tour-brand-name { text-wrap: balance; }
.swiss-table-head { justify-content: flex-start; }

/* Сетку можно тянуть мышью (2.22.2) */
.tour-bracket .bracket-scroll, .tour-bracket .cross-scroll, .tour-bracket .swiss { cursor: grab; }
.tour-bracket .bm.clickable { cursor: pointer; }
body.panning, body.panning * { cursor: grabbing !important; user-select: none !important; }
/* Над гранд-финалом, по центру его карточки (2.22.3) */
.tour-brand.over-gf { right: auto; }

/* Дисквалификация обоих за неявку (2.23) */
.bm.dq { border-color: rgba(224, 122, 99, .6); }
.bm-side.dq { background: rgba(224, 122, 99, .12); box-shadow: inset 3px 0 0 #e07a63; }
.bm-side.dq .bm-name { text-decoration: line-through; text-decoration-color: rgba(224, 122, 99, .7); color: var(--muted); }
.bm-side.dq .bm-score { color: #e07a63; font-size: 13px; }
.bm-dq { color: #e07a63; }
.bm-dq-note { margin: 0; color: #e07a63; font-size: 14px; }
.bm-dq-btn { margin-left: auto; }
.tour-champion.dq { color: #e07a63; }
.tour-dq-tag { margin-left: 8px; font-size: 11px; color: #e07a63; border-color: #e07a63; }
.swiss-table tr.dq td { color: var(--muted); }
.swiss-cross td.dq { color: #e07a63; font-size: 12px; background: rgba(224, 122, 99, .08); }
.swiss-cross tr.dq td.c-name { text-decoration: line-through; color: var(--muted); }
.tour-places tr.dq td { color: #e07a63; }

/* Табы туров швейцарки (2.23) */
.swiss-rounds { display: flex; flex-direction: column; gap: 10px; }
.swiss-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line-strong); position: static; }
.swiss-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0; background: transparent; color: var(--muted); font: 700 15px var(--narrow); cursor: pointer; margin-bottom: -1px;
}
.swiss-tab:hover { color: var(--paper); }
.swiss-tab.active { color: var(--amber); border-color: var(--line-strong); background: var(--panel); }
.swiss-tab-count { font: 600 12px var(--font); color: var(--muted); padding: 1px 6px; border-radius: 8px; background: rgba(10, 16, 20, .4); }
.swiss-tab-count.done { color: var(--olive); }
.swiss-actions { align-items: center; }
.swiss-waiting { margin: 0 0 4px; }

/* Знак вопроса с подсказкой в заголовках таблицы (2.23.1) */
.help-tip {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 5px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--line-strong); color: var(--muted); font: 700 11px/1 var(--font); cursor: help;
  text-transform: none; letter-spacing: 0;
}
.help-tip:hover, .help-tip:focus-visible { color: var(--amber); border-color: var(--amber); outline: none; }
.help-tip::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 8px); right: -10px; z-index: 20; width: 300px;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: #121b20; color: var(--paper);
  font: 400 13px/1.45 var(--font); text-align: left; white-space: normal; box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s; pointer-events: none;
}
.help-tip:hover::after, .help-tip:focus-visible::after { opacity: 1; visibility: visible; transform: none; }
.swiss-cross th { overflow: visible; }
.cross-scroll { padding-bottom: 4px; }

/* ---------- Во весь экран [Tab] — общий для всех вкладок урока (2.24) */
.focus-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.focus-btn.on { color: var(--paper); border-color: var(--line-strong); }
.tabs .tab-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 12px; flex: none; }
.focus-btn svg, .focus-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.focus-btn kbd, .focus-exit kbd {
  font: 700 11px var(--font); padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; color: var(--muted); background: rgba(10, 16, 20, .4);
}
.focus-exit {
  position: fixed; top: 10px; right: 12px; z-index: 50; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(18, 27, 32, .85); color: var(--muted);
  font: 700 13px var(--narrow); cursor: pointer; opacity: .55; transition: opacity .15s;
}
.focus-exit:hover, .focus-exit:focus-visible { opacity: 1; color: var(--paper); }
.focus-exit[hidden] { display: none; }
.focus-hint {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 51; padding: 8px 14px; border-radius: 6px; pointer-events: none;
  background: rgba(217, 164, 65, .95); color: var(--amber-ink); font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.focus-hint[hidden] { display: none; }
body.room-focus .topbar, body.room-focus .site-footer, body.room-focus .room-side,
body.room-focus .room-notice, body.room-focus .helper-invite, body.room-focus .board-view .drawings { display: none !important; }
body.room-focus #app.view-room { height: 100vh; height: 100dvh; }
body.room-focus .room { grid-template-columns: minmax(0, 1fr); padding: 8px; }
body.room-focus .board-stage { max-width: min(100%, calc((100dvh - 270px) * 1.6)); }
body.room-focus .streams > :not(.stream-stage) { display: none !important; }
body.room-focus .stream-stage { min-height: calc(100dvh - 130px); border: 0; padding: 4px; align-content: center; }

/* Режим «Веду группу» / «За ведущим» */
.follow-btn { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.follow-btn .sw {
  position: relative; width: 28px; height: 16px; border-radius: 8px; background: rgba(10, 16, 20, .55); border: 1px solid var(--line-strong);
  transition: background .15s, border-color .15s; flex: none;
}
.follow-btn .sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s;
}
.follow-btn.on { color: var(--paper); border-color: rgba(127, 176, 105, .6); }
.follow-btn.on .sw { background: rgba(127, 176, 105, .35); border-color: #7fb069; }
.follow-btn.on .sw::after { transform: translateX(12px); background: #a6d38b; }
.follow-hint { bottom: 72px; background: rgba(32, 46, 54, .96); color: var(--paper); border: 1px solid var(--line-strong); }
.follow-tag { font-size: 12px; color: var(--muted); white-space: nowrap; }
.follow-tag.on { color: #9fd08a; }
/* Узкое окно: в шапке комнаты оставляем у кнопок значок и клавишу */
@media (max-width: 1200px) { .room-head .room-when { display: none; } }

/* Tacview, открытый из вылета: список по расстановке */
.tv-ctx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 700 14px var(--narrow); color: var(--amber); margin: 2px 0 4px; }
.tv-ctx-note { font-size: 12px; margin: 0 0 4px; }
.tv-side { display: flex; flex-direction: column; gap: 2px; padding: 4px 0 6px 8px; border-left: 2px solid var(--line-strong); margin-bottom: 6px; }
.tv-side.allies { border-left-color: #6fa8dc; }
.tv-side.enemies { border-left-color: #e07a63; }
.tv-side-title { font: 700 13px var(--narrow); text-transform: uppercase; letter-spacing: .05em; }
.tv-side.allies .tv-side-title { color: #8dbbe6; }
.tv-side.enemies .tv-side-title { color: #ec9a87; }
.tv-side .tv-group-title { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.tv-obj-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 2px; }
.tv-obj-row .tv-obj { min-width: 0; }
.tv-eye { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; margin: 0; background: none; border: 0; border-radius: 4px; color: var(--muted); cursor: pointer; }
.tv-eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-eye:hover { color: var(--amber); background: rgba(255, 255, 255, .05); }
.tv-eye.off { color: var(--line-strong); }
.tv-obj-row.off .tv-obj { opacity: .45; }
.tv-group-title .tv-eye { width: 18px; height: 18px; margin-right: 4px; vertical-align: middle; }
summary.tv-group-title .tv-eye { margin: 0 0 0 6px; }
.tv-obj.absent { cursor: default; opacity: .55; grid-template-columns: minmax(0, 1fr) auto; }
.tv-obj.absent:hover { background: none; }
.tv-star { color: var(--amber); font-size: 12px; }
.tv-rest-actions { gap: 6px; margin: 4px 0; }

/* Полоса статуса пилота над подвалом (только у участников вылета) */
.pilot-bar { flex: none; display: flex; justify-content: center; padding: 6px 20px; border-top: 1px solid var(--line); background: var(--bg); }
.pilot-bar[hidden] { display: none; }
.pilot-bar .pilot-status { max-width: 100%; font-size: 15px; }
.pilot-bar .pilot-status > span { padding: 5px 12px; }

/* Комментарии к треку */
.tv-comments { display: flex; flex-direction: column; gap: 8px; }
.tv-comment-form { display: flex; flex-direction: column; gap: 6px; }
.tv-comment-form textarea { width: 100%; resize: vertical; min-height: 52px; font: 400 14px var(--font); padding: 6px 8px; }
.tv-comment-form-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tv-comment-form-row .tv-check { margin-right: auto; font-size: 13px; }
.tv-comment-form.reply { margin: 4px 0 2px 14px; }
.tv-comment-list, .tv-replies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tv-replies { margin: 6px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--line-strong); gap: 6px; }
.tv-comment { font-size: 14px; }
.tv-comment-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.tv-comment-head .muted { font-size: 12px; }
.tv-comment-time { border: 1px solid rgba(155, 176, 106, .6); background: rgba(155, 176, 106, .12); color: #c7d3a6; border-radius: 4px; padding: 0 5px; font: 700 12px var(--narrow); cursor: pointer; }
.tv-comment-time:hover { background: rgba(155, 176, 106, .25); }
.tv-comment-del { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.tv-comment-del:hover { color: var(--red); }
.tv-comment-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tv-reply-btn { font-size: 12px; margin-top: 2px; }
.tv-mark.comment { background: var(--olive); height: 14px; top: -2px; width: 6px; margin-left: -3px; border-radius: 3px; }
.tv-subs { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: min(80%, 760px); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.tv-sub { padding: 5px 12px; border-radius: 5px; background: rgba(10, 16, 20, .78); color: #f1ead8; font-size: 16px; text-align: center; max-width: 100%; }
.tv-sub b { color: var(--amber); }
.tv-comment-form-row .tv-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* Tacview у пилота в режиме «За ведущим»: только смотреть (комментарии писать можно) */
.tv-locked .tv-canvas canvas, .tv-locked .tv-bar, .tv-locked .tv-timeline, .tv-locked .tv-objects, .tv-locked .tv-telemetry button, .tv-locked .tv-cambar,
.tv-locked .tv-events, .tv-locked .tv-comment-time { pointer-events: none; }
.tv-locked .tv-bar, .tv-locked .tv-timeline { opacity: .6; }
.tv-locked .tv-canvas canvas { cursor: default; }

/* Tacview занимает всю высоту окна: сцена растягивается, а шкала времени под ней всегда видна (и в «Во весь экран») */
@media (min-width: 901px) {
  .room-main.tv-mode { display: flex; flex-direction: column; }
  .room-main.tv-mode > .tv { flex: 1 1 auto; min-height: 0; }
  .room-main.tv-mode .tv-stage { flex: 1 1 auto; min-height: 260px; height: auto; }
}

/* ---------- Библиотека треков Tacview (#/tacview) */
#app.view-library { height: calc(100vh - var(--footer-h)); height: calc(100dvh - var(--footer-h)); min-height: 0; }
.library { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; padding: 16px 20px; }
.lib-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: hidden; }
.lib-list .section-title { margin: 0; }
.lib-filters { display: flex; flex-direction: column; gap: 8px; }
.lib-filters input, .lib-filters select { min-width: 0; }
.lib-row { display: flex; align-items: center; gap: 8px; }
.lib-row > select, .lib-row > input { flex: 1; }
.lib-row > input[type=date] { flex: 1 1 0; }
.lib-count { margin: 0; font-size: 13px; }
.lib-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.lib-card { border: 1px solid var(--line); border-radius: 8px; background: rgba(10, 16, 20, .25); }
.lib-card:hover { border-color: var(--line-strong); }
.lib-card.sel { border-color: var(--amber); background: rgba(217, 164, 65, .08); }
.lib-open { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; background: none; border: 0; color: var(--paper); padding: 10px 12px 4px; cursor: pointer; font: inherit; }
.lib-title { font: 700 15px var(--narrow); overflow-wrap: anywhere; }
.lib-meta { font-size: 12px; }
.lib-foot { display: flex; align-items: center; gap: 14px; padding: 2px 12px 9px; font-size: 13px; }
.lib-foot svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lib-pilots, .lib-comments { display: inline-flex; align-items: center; gap: 5px; }
.lib-pilots { position: relative; cursor: default; color: var(--paper); border-radius: 4px; padding: 1px 4px; margin-left: -4px; }
.lib-pilots:hover, .lib-pilots:focus-visible { background: rgba(233, 227, 210, .08); outline: none; }
.lib-pop { display: none; position: fixed; z-index: 60; min-width: 180px; max-width: 280px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #17222a; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-size: 13px; }
.lib-pop ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.lib-pilots:hover .lib-pop, .lib-pilots:focus .lib-pop { display: block; }
.lib-view { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.lib-view-head { font-size: 14px; display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.lib-view-head .lib-link { margin-left: 6px; }
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lib-head .section-title { margin: 0; }
.lib-own { margin-right: 6px; font-size: 11px; padding: 0 5px; }
.lib-link { position: relative; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 1px 4px; color: var(--muted); cursor: pointer; border-radius: 4px; font: inherit; }
.lib-link:hover { color: var(--amber); }
.lib-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lib-link.copied { color: var(--olive); }
.lib-link[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; padding: 3px 7px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-strong); color: var(--paper); font-size: 12px; z-index: 5; }
.lib-dialog form { width: min(480px, 86vw); }
.lib-dialog input[type=text], .lib-dialog input[type=datetime-local], .lib-dialog input[type=file] { width: 100%; }
.lib-empty { margin: auto; text-align: center; max-width: 380px; }
@media (min-width: 901px) {
  .lib-view > .tv { flex: 1 1 auto; min-height: 0; }
  .lib-view .tv-stage { flex: 1 1 auto; min-height: 300px; height: auto; }
}
@media (max-width: 900px) {
  #app.view-library { height: auto; }
  .library { grid-template-columns: 1fr; }
  .lib-cards { max-height: 50vh; }
}

/* Оценка и избранное у треков */
.mark-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mark-btns { display: inline-flex; gap: 2px; }
.mark-btn { display: inline-grid; place-items: center; width: 26px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.mark-btn:hover { border-color: var(--line-strong); color: var(--paper); }
.mark-btn.like.on { color: var(--olive); }
.mark-btn.dislike.on { color: var(--red); }
.mark-btn.star.on { color: var(--amber); }
.mark-btn.on .mark-icon { fill: currentColor; fill-opacity: .25; }
.mark-btn.star.on .mark-icon { fill-opacity: 1; }
.mark-badge { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.mark-badge.like { color: var(--olive); }
.mark-badge.dislike { color: var(--red); }
.mark-badge.star { color: var(--amber); }
.mark-badge.star .mark-icon { fill: currentColor; }
.pr-replay-marks, .tv-marks, .lib-marks { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin-left: 6px; }
.lib-marks { margin-left: auto; }
.lib-star { color: var(--amber); }
.lib-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-right: auto; cursor: pointer; }
.lesson-tracks { margin: -6px 0 16px; font-size: 14px; }
/* Турнир: матч не состоялся из-за неявки одного */
.bm-side.absent { background: rgba(224, 122, 99, .08); }
.bm-side.absent .bm-name { color: var(--muted); }
.bm-side.absent .bm-score, .bm-side.noshow-ok .bm-score { color: #e07a63; font-size: 13px; }
.bm-noshow { align-items: center; gap: 6px; flex-wrap: wrap; }
.bm-noshow .btn.on { border-color: var(--red); color: var(--red); }
.c-res.noshow { color: var(--muted); }

/* Tacview: дистанция между двумя (Ctrl+выбор) и «Следить за ближайшим» */
.tv-obj.paired { border: 1px dashed #f1ead8; }
.tv-obj.paired.sel { border-style: dashed; border-color: var(--amber); }
.tv-label.tv-dist { color: #f1ead8; font-weight: 700; padding: 1px 6px; border: 1px dashed rgba(241, 234, 216, .7); border-radius: 4px; background: rgba(10, 16, 20, .55); text-shadow: none; }
.tv-pair { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 5px 8px; border: 1px dashed var(--line-strong); border-radius: 5px; font-size: 13px; }
.tv-pair > span:first-child { flex: 1; min-width: 0; }
.tv-nearest { margin: 6px 0 0; font-size: 13px; }
.tv-tel-actions .btn.on { border-color: var(--amber); color: var(--amber); }
/* Планшет с картой Ил-2: Ctrl — можно двигать карту */
svg.map-pannable { cursor: grab; }
svg.map-panning { cursor: grabbing; }

/* Турнир: таблица «Каждый с каждым» */
.rr-wrap { overflow-x: auto; cursor: grab; }
.rr-wrap.dragging { cursor: grabbing; user-select: none; }
.rr-wrap.dragging .rr-cell { cursor: grabbing; }
.rr-table { border-collapse: collapse; font: 700 14px var(--narrow); }
.rr-table th, .rr-table td { border: 1px solid var(--line-strong); text-align: center; vertical-align: middle; }
.rr-table thead th { padding: 10px 8px; min-width: 70px; color: var(--paper); background: rgba(10, 16, 20, .35); }
.rr-col span { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-corner { background: #d8c43c !important; min-width: 120px; }
.rr-row { padding: 0 12px; text-align: left !important; white-space: nowrap; color: var(--paper); background: rgba(10, 16, 20, .35); min-width: 120px; }
.rr-total { background: rgba(111, 168, 220, .22) !important; text-transform: uppercase; letter-spacing: .03em; }
.rr-cell { width: 72px; height: 52px; font-size: 16px; }
.rr-cell.diag { background: #d8c43c; }
.rr-cell.up { background: rgba(155, 176, 106, .14); color: var(--muted); }
.rr-cell.up.win { color: #8fd17a; }
.rr-cell.up.loss { color: #ef8a72; }
.rr-cell.up.dq { color: #ef8a72; font-size: 13px; }
.rr-cell.up.noshow { color: var(--muted); }
.rr-cell.up.empty { background: rgba(155, 176, 106, .06); }
.rr-cell.clickable { cursor: pointer; }
.rr-cell.clickable:hover, .rr-cell.clickable:focus-visible { background: rgba(155, 176, 106, .3); outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.rr-cell.low { background: transparent; }
.rr-cell.rr-sum { background: rgba(111, 168, 220, .18); color: var(--paper); font-size: 18px; }
.rr-table tr.leader .rr-row { color: var(--amber); }
.rr-table tr.qualify .rr-row { box-shadow: inset 3px 0 0 var(--olive); }
.rr-table tr.dq .rr-row { color: var(--muted); text-decoration: line-through; }

/* Видимость тренировок и треков */
.vis-tag { margin-left: 6px; font-size: 11px; vertical-align: middle; white-space: nowrap; }
.vis-tag.pilots { color: #8fb3c9; border-color: #8fb3c9; }
.vis-tag.selected { color: var(--amber); border-color: var(--amber); }
.vis-tag.private { color: #e07a63; border-color: #e07a63; }
.vis-dialog form { width: min(520px, 88vw); }
.vis-options { gap: 8px; }
/* Вариант видимости — карточка: свой кружок вместо системной радиокнопки, выбранная подсвечена */
.vis-option { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(10, 16, 20, .25); cursor: pointer; transition: border-color .15s, background .15s; }
.vis-option:hover { border-color: var(--muted); }
.vis-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.vis-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; box-shadow: inset 0 0 0 3px var(--panel); transition: background .15s, border-color .15s; }
.vis-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.vis-text b { color: var(--paper); }
.vis-text .muted { font-size: 13px; }
.vis-option:has(input:checked) { border-color: var(--amber); background: rgba(217, 164, 65, .08); }
.vis-option:has(input:checked) .vis-dot { border-color: var(--amber); background: var(--amber); }
.vis-option:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--amber); }
.vis-list { list-style: none; margin: 0; padding: 4px 8px; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.vis-list li { padding: 2px 0; }
.vis-user { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.vis-user:hover { background: rgba(255, 255, 255, .04); }
.vis-user input { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--amber); }
.vis-pick[hidden] { display: none; }

/* DEBUG-тренировка закреплена наверху списка */
.training-row.tour-row.pinned, .training-item.pinned .training-row { border-color: rgba(217, 164, 65, .55); background: rgba(217, 164, 65, .06); }
.debug-tag { color: var(--amber); border-color: var(--amber); margin-right: 8px; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

/* Раздел «Tacview» во весь экран (Tab): без шапки и подвала, список треков уезжает влево */
.lib-focus-btn { margin-left: auto; }
.lib-handle { display: none; }
body.lib-focus .topbar, body.lib-focus .site-footer { display: none !important; }
body.lib-focus #app.view-library { height: 100vh; height: 100dvh; }
body.lib-focus .library { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 8px 30px; position: relative; }
body.lib-focus .lib-list {
  position: fixed; z-index: 30; top: 8px; bottom: 8px; left: 0; width: min(400px, 86vw);
  transform: translateX(-102%); transition: transform .25s ease; box-shadow: 8px 0 24px rgba(0, 0, 0, .45);
}
body.lib-focus .library.peek .lib-list { transform: none; }
body.lib-focus .lib-handle {
  position: fixed; z-index: 31; left: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; width: 24px;
  background: var(--panel-2); border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 6px 6px 0;
  color: var(--muted); font: 700 12px var(--narrow); cursor: pointer; transition: left .25s ease, color .15s;
}
body.lib-focus .lib-handle span:last-child { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .06em; }
body.lib-focus .lib-handle:hover { color: var(--amber); }
body.lib-focus .library.peek .lib-handle { left: min(400px, 86vw); }

/* Админка: автоматическое одобрение регистрации */
.admin-auto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(10, 16, 20, .25); }
.admin-auto-role { display: inline-flex; align-items: center; gap: 8px; }
.admin-auto-role select { width: auto; padding: .3em .6em; }
.admin-auto-note { font-size: 13px; }

/* Описание турнира */
.tour-desc { margin: 12px 0; padding: 16px 20px; }
.tour-desc .section-title { margin: 0 0 8px; }
.tour-form .rich-editor { min-height: 140px; }

/* Чат турнира: свёрнутая плашка в правом нижнем углу, по щелчку — панель */
.tour-chat { position: fixed; right: 16px; bottom: calc(var(--footer-h) + 10px); z-index: 40; width: min(380px, calc(100vw - 32px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; }
.tc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; background: var(--panel-2); border: 0; color: var(--paper); font: 700 15px var(--narrow); cursor: pointer; text-align: left; }
.tc-head:hover { color: var(--amber); }
.tc-title { flex: 1; }
.tc-arrow { transition: transform .2s; }
.tour-chat.open .tc-arrow { transform: rotate(180deg); }
.tc-badge { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--amber); color: #1a1408; font-size: 12px; text-align: center; }
.tc-body { display: none; flex-direction: column; height: min(460px, calc(100dvh - 180px)); }
.tour-chat.open .tc-body { display: flex; }
.tc-tools { padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.tc-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.tc-empty { margin: auto; }
.tc-msg { padding: 6px 8px; border-radius: 6px; background: rgba(10, 16, 20, .25); }
.tc-msg.mine { background: rgba(111, 168, 220, .08); }
.tc-msg.result { background: rgba(217, 164, 65, .16); border: 1px solid var(--amber); box-shadow: inset 4px 0 0 var(--amber); }
.tc-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tc-meta time { color: var(--muted); font-size: 12px; }
.tc-result-label { padding: 0 6px; border-radius: 4px; background: var(--amber); color: #1a1408; font: 700 11px var(--narrow); text-transform: uppercase; letter-spacing: .04em; }
.tc-msg.result.done { background: rgba(127, 191, 77, .16); border-color: #7fbf4d; box-shadow: inset 4px 0 0 #7fbf4d; }
.tc-msg.done .tc-result-label, .tc-msg.done .tc-tag { background: #7fbf4d; }
.tc-done { margin-left: auto; display: inline-flex; align-items: center; cursor: pointer; }
.tc-done input { width: 18px; height: 18px; margin: 0; accent-color: #7fbf4d; cursor: pointer; }
.tc-done + .tc-del { margin-left: 4px; }
.tc-del { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.tc-del:hover { color: #e07a63; }
.tc-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; font-size: 14px; }
.tc-tag { background: var(--amber); color: #1a1408; border-radius: 3px; padding: 0 3px; font-weight: 700; }
.tc-form { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px; border-top: 1px solid var(--line); }
.tc-form textarea { flex: 1; min-height: 2.4em; resize: none; font-size: 14px; padding: .4em .6em; }
.tc-error { margin: 0 12px 8px; }
.tc-error:empty { display: none; }
.tc-note { margin: 0; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
@media print { .tour-chat { display: none !important; } }

/* Tacview: заголовок «Объекты» с ползунком дистанции */
.tv-objects-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.tv-objects-head .tv-h { margin: 0; }
.tv-range { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.tv-range input[type=range] { width: 110px; padding: 0; accent-color: var(--amber); }
.tv-range-val { min-width: 48px; text-align: right; font-weight: 700; color: var(--paper); }

/* Стрелки: растёт — зелёная вверх, падает — красная вниз */
.tv-trend { display: inline-block; margin-left: 3px; font-size: .78em; line-height: 1; vertical-align: .08em; }
.tv-trend.up { color: #7ccf6a; }
.tv-trend.down { color: #e86a55; }
.tv-tel dd .tv-trend { margin: 0 5px 0 0; }

/* Tacview: подсказка о скорости воспроизведения */
.tv-toast { position: absolute; top: 14px; left: 50%; transform: translate(-50%, -6px); z-index: 6; padding: 6px 16px; border-radius: 6px; background: rgba(15, 22, 26, .82); border: 1px solid var(--line-strong); color: var(--paper); font: 700 18px var(--narrow); letter-spacing: .02em; pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s; }
.tv-toast.on { opacity: 1; transform: translate(-50%, 0); }
.tv-pair-list { display: flex; flex-direction: column; gap: 2px; }

/* Tacview: вид из кабины — силуэт кабины и прицел поверх сцены, под подписями */
.tv-cockpit { position: absolute; inset: 0; pointer-events: none; }
.tv-cockpit[hidden] { display: none; }
.tv-cockpit svg { position: absolute; }
.tv-cockpit-frame { inset: 0; width: 100%; height: 100%; }
.tv-cockpit-sight { left: 0; top: 0; width: min(26vh, 220px); height: min(26vh, 220px); }
.tv-cockpit-lock { left: 0; top: 0; width: 120px; height: 72px; display: none; }
.ck-lock { fill: none; stroke: rgba(120, 230, 140, .85); stroke-width: 4; stroke-linejoin: round; }
.ck-frame { fill: rgba(16, 20, 18, .62); }
.ck-panel { fill: rgba(20, 24, 22, .72); }
.ck-edge { fill: none; stroke: rgba(233, 227, 210, .18); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ck-sight { fill: none; stroke: rgba(255, 176, 60, .78); stroke-width: 2.2; }
.ck-sight-tick { stroke: rgba(255, 176, 60, .7); stroke-width: 2; }
.ck-sight-dot { fill: rgba(255, 176, 60, .9); }
.tv-in-cockpit .tv-hint { display: none; }

/* Tacview: окно «Энергия» (графики выбранных по Ctrl самолётов), перетаскивается и растягивается */
.tv-energy { position: absolute; z-index: 7; display: flex; flex-direction: column; padding: 8px 12px 10px; border-radius: 9px; background: rgba(14, 20, 24, .86); border: 1px solid rgba(233, 227, 210, .16); box-shadow: 0 6px 22px rgba(0, 0, 0, .4); font: 12px var(--narrow); color: var(--paper); overflow: hidden; user-select: none; }
.tv-energy[hidden] { display: none; }
.tv-en-head { display: flex; justify-content: space-between; align-items: baseline; margin: -8px -12px 6px; padding: 8px 12px 4px; cursor: move; }
.tv-en-head b { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: #bfb9a8; }
.tv-en-head span { color: var(--muted); font-size: 11px; }
.tv-en-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.tv-en-table th { font-weight: 400; color: var(--muted); text-align: right; padding: 0 4px; font-size: 11px; }
.tv-en-table th.n { text-align: left; }
.tv-en-table td { padding: 1px 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-en-table td.n { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tv-en-table td.v { text-align: right; }
.tv-en-sw { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.tv-en-charts { display: flex; flex-direction: column; gap: 3px; min-height: 0; }
.tv-en-legend[hidden] { display: none; }
.tv-en-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0 0 5px; font-size: 12px; }
.tv-en-who { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tv-en-who.ref { font-weight: 700; }
.tv-en-sec-h { display: flex; align-items: baseline; gap: 6px; width: 100%; min-height: 18px; padding: 1px 2px; border: 0; border-radius: 4px; background: none; color: #bfb9a8; font: 11px var(--narrow); text-align: left; cursor: pointer; }
.tv-en-sec-h:hover { background: rgba(255, 255, 255, .05); color: var(--paper); }
.tv-en-caret { width: 9px; flex: none; color: var(--muted); }
.tv-en-sec-t { flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.tv-en-sec.closed .tv-en-sec-t { max-width: 45%; }
.tv-en-vals { display: flex; gap: 8px; margin-left: auto; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.tv-en-sec-b[hidden] { display: none; }
.tv-en-table td.up { color: #7ccf6a; }
.tv-en-table td.down { color: #e86a5f; }
.tv-en-chart { display: block; }
.tv-en-bg { fill: rgba(255, 255, 255, .035); }
.tv-en-grid { stroke: rgba(233, 227, 210, .07); }
.tv-en-ref { stroke: rgba(233, 227, 210, .55); stroke-dasharray: 4 3; }
.tv-en-title { fill: #bfb9a8; font-size: 10px; }
.tv-en-tick { fill: var(--muted); font-size: 9px; }
.tv-en-grip { position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 0 55%, rgba(233, 227, 210, .45) 55% 62%, transparent 62% 72%, rgba(233, 227, 210, .45) 72% 79%, transparent 79%); }

/* Tacview: подложка «Сетка | Карта» */
.tv-ground { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tv-segs { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.tv-seg { border: 0; background: none; color: var(--muted); font: 12px var(--narrow); padding: 3px 9px; cursor: pointer; }
.tv-seg + .tv-seg { border-left: 1px solid var(--line-strong); }
.tv-seg.on { background: var(--amber); color: #1b1f22; font-weight: 700; }
.tv-map-select { width: auto; max-width: 190px; padding: 2px 6px; font-size: 12px; }
.tv-map-hint { font-size: 11px; color: var(--amber); }
.tv-map-note { font-size: 11px; color: var(--muted); max-width: 320px; }
.tv-coords { position: absolute; top: 8px; right: 8px; z-index: 6; padding: 5px 9px; border-radius: 6px; background: rgba(14, 20, 24, .62); color: var(--paper); font: 11px/1.45 var(--mono, ui-monospace, monospace); text-align: right; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-coords[hidden] { display: none; }
.tv-coords-t { color: var(--muted); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

/* Личная тренировка пилота */
.tag.personal-tag { margin-right: 6px; background: rgba(212, 162, 64, .16); color: var(--amber); border-color: rgba(212, 162, 64, .4); }
.tag.personal-tag.other { background: none; color: var(--muted); border-color: var(--line-strong); }
.personal-group { margin-top: 12px; }
.personal-group > summary { cursor: pointer; padding: 6px 2px; color: var(--muted); font-size: 13px; }
.personal-group > summary:hover { color: var(--paper); }
.invite-row { margin: 6px 0 10px; }

/* Авторы моделей самолётов */
table.credits { width: 100%; border-collapse: collapse; font-size: 14px; }
table.credits th, table.credits td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
table.credits th { color: var(--muted, #9aa4ad); font-weight: 600; }
.tv-relief { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font: 12px var(--narrow); color: var(--muted); cursor: pointer; user-select: none; }
.tv-relief input { margin: 0; accent-color: var(--accent, #d9a441); }
.tv-label.tv-hmark { color: #f1ead8; font-weight: 700; font-size: 13px; padding: 2px 7px; border: 1px solid rgba(241, 234, 216, .8); border-radius: 4px; background: rgba(10, 16, 20, .7); text-shadow: none; margin-top: -4px; white-space: nowrap; }

/* Курсор показывающего в Tacview (у смотрящих показ и «За ведущим») */
.tv-lead-cursor { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; will-change: transform; }
.tv-lead-cursor svg { display: block; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.tv-lead-cursor path { fill: var(--amber); stroke: #10171b; stroke-width: 1.5; stroke-linejoin: round; }
.tv-lead-cursor-name { position: absolute; left: 18px; top: 24px; white-space: nowrap; font-weight: 700; font-size: 13px; color: #10171b; background: var(--amber); border-radius: 4px; padding: 1px 6px; }
.tv-lead-cursor.flip .tv-lead-cursor-name { left: auto; right: 4px; }

/* ---------- Ролики Tacview: редактор и проигрыватель (tveditor.js, tvclip.js) */
.tvc-dialog { width: 98vw; height: 96vh; height: 96dvh; max-width: none; max-height: none; padding: 10px 12px; overflow: hidden; }
.tvc-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.tvc-dialog:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.tvc-head { display: flex; align-items: center; gap: 10px; }
.tvc-head h2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvc-stage, .ed-main { flex: 1; min-height: 0; display: flex; }
.tvc-stage > .tv, .ed-main > .tv { flex: 1; min-width: 0; min-height: 0; }
.tv-embedded .tv-stage { height: auto; flex: 1; min-height: 0; }
.tv-embedded .tv-bar, .tv-embedded .tv-banner, .tv-embedded .tv-play, .tv-embedded .tv-skip, .tv-embedded .tv-speed-play,
.tv-embedded .tv-track, .tv-embedded .tv-clock, .tv-embedded .to-board, .tv-embedded .tv-h-comments, .tv-embedded .tv-comments,
.tv-embedded .tv-h-events, .tv-embedded .tv-events { display: none !important; }
.tvc-player .tv-stage { grid-template-columns: minmax(0, 1fr); }
.tvc-player .tv-side, .tvc-player .tv-timeline, .tvc-player .tv-hint, .tvc-player .tv-coords { display: none !important; }
.tvc-player .tv-canvas canvas { pointer-events: none; cursor: default; }
.tvc-controls { display: flex; align-items: center; gap: 10px; }
.tvc-range { flex: 1; accent-color: var(--amber); }
.tvc-clock { font: 700 15px var(--narrow); font-variant-numeric: tabular-nums; }
.tvc-play { min-width: 44px; }
.tvc-status { margin: 0; }

/* Слой поверх сцены: подписи к траектории, переговоры, картинки */
.tvc-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.tvc-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tvc-lines line { stroke: #f1ead8; stroke-width: 1.2; }
.tvc-lines circle { fill: #f1ead8; stroke: rgba(10, 16, 20, .8); stroke-width: 1; }
.tvc-note, .tvc-radio, .tvc-image { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.tvc-note { max-width: 260px; padding: 5px 10px; border: 1px solid rgba(241, 234, 216, .8); border-radius: 5px; background: rgba(12, 18, 22, .84); color: #f1ead8; font: 600 14px/1.3 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.tvc-radio { --c: #e9e3d2; max-width: 280px; padding: 6px 12px; border: 2px solid var(--c); border-radius: 14px; background: #f6f1e3; color: #17212a; font: 600 14px/1.3 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tvc-radio::after { content: ''; position: absolute; left: 10px; bottom: -9px; width: 14px; height: 14px; background: #f6f1e3; border: 2px solid var(--c); border-top: 0; border-left: 0; transform: skewX(30deg) rotate(45deg); transform-origin: center; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.tvc-image img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.tvc-layer.editable .tvc-note, .tvc-layer.editable .tvc-image { pointer-events: auto; cursor: move; }
.tvc-layer.editable .tvc-radio { pointer-events: auto; cursor: pointer; }
.tvc-layer.editable .sel { outline: 2px solid var(--amber); outline-offset: 2px; }
.tvc-resize { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 2px; background: var(--amber); cursor: nwse-resize; }

/* Редактор: верхняя панель, дорожки, свойства */
.ed-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-head > * { flex: none; }
.ed-title { width: 240px; min-width: 120px; flex: 0 1 240px !important; font-weight: 700; }
.ed-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.ed-field select { padding: 4px 6px; font-size: 13px; }
.ed-sep { width: 1px; height: 22px; background: var(--line); }
.ed-grow { flex: 1; }
.ed-play { min-width: 40px; }
.ed-time { font: 700 15px var(--narrow); font-variant-numeric: tabular-nums; min-width: 110px; }
.ed-cam { display: inline-flex; align-items: center; gap: 4px; font: 700 13px var(--narrow); }
.ed-cam-auto { color: var(--olive); }
.ed-cam-manual { color: var(--amber); }
.ed-status { flex: 1 1 0 !important; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvc-editor .tv-stage { grid-template-columns: minmax(0, 1fr) 260px; }
.ed-bottom { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 10px; height: 204px; }
.ed-tl { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.ed-tl-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
.ed-name { height: 27px; display: flex; align-items: center; font: 700 12px var(--narrow); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ed-name-ruler { height: 21px; }
.ed-lanes { position: relative; overflow: hidden; user-select: none; cursor: crosshair; }
.ed-ruler { position: relative; height: 21px; border-bottom: 1px solid var(--line-strong); cursor: pointer; }
.ed-tick { position: absolute; top: 0; height: 20px; padding: 1px 0 0 4px; border-left: 1px solid var(--line-strong); font: 11px var(--narrow); color: var(--muted); white-space: nowrap; pointer-events: none; }
.ed-lane { position: relative; height: 27px; border-bottom: 1px solid rgba(54, 73, 84, .55); }
.ed-range { position: absolute; top: 4px; height: 18px; border: 1px solid var(--amber); border-radius: 4px; background: rgba(217, 164, 65, .28); font: 700 11px var(--narrow); color: var(--paper); cursor: grab; display: flex; align-items: center; }
.ed-bar { position: absolute; top: 3px; height: 21px; display: flex; align-items: center; border-radius: 4px; font: 12px var(--narrow); cursor: grab; overflow: hidden; }
.ed-bar.notes { background: rgba(241, 234, 216, .2); border: 1px solid rgba(241, 234, 216, .7); color: var(--paper); }
.ed-bar.radio { background: rgba(111, 168, 220, .25); border: 1px solid #6fa8dc; color: #d7e7f6; }
.ed-bar.images { background: rgba(155, 176, 106, .25); border: 1px solid var(--olive); color: #dfe8c8; }
.ed-bar.sel, .ed-range.sel { box-shadow: 0 0 0 2px var(--amber); }
.ed-bar-text { padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ed-h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 1; }
.ed-h-l { left: 0; }
.ed-h-r { right: 0; }
.ed-h:hover { background: rgba(233, 227, 210, .25); }
.ed-key { position: absolute; top: 5px; width: 17px; height: 17px; margin-left: -8.5px; transform: rotate(45deg); border: 2px solid var(--paper); border-radius: 3px; background: var(--panel-2); cursor: grab; display: grid; place-items: center; }
.ed-key span { transform: rotate(-45deg); font: 700 10px var(--narrow); color: var(--paper); pointer-events: none; }
.ed-key.follow { border-color: #6fa8dc; }
.ed-key.nearest { border-color: var(--red); }
.ed-key.cockpit { border-color: var(--olive); }
.ed-key.cut { border-radius: 0; box-shadow: -4px 0 0 -2px var(--paper); }
.ed-key.sel { background: var(--amber); }
.ed-key.sel span { color: var(--amber-ink); }
.ed-shade { position: absolute; top: 21px; bottom: 0; background: rgba(8, 12, 14, .5); pointer-events: none; }
.ed-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--red); pointer-events: none; z-index: 2; }
.ed-playhead::before { content: ''; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--red); }
.ed-tl-tools { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 12px; }
.ed-insp { min-height: 0; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; }
.ed-insp-h { font-size: 15px; margin: 0 0 6px; }
.ed-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.ed-row-label { flex: none; width: 92px; color: var(--muted); }
.ed-val { font: 700 14px var(--narrow); }
.ed-row input[type=number] { width: 80px; padding: 3px 6px; }
.ed-row select { max-width: 180px; padding: 3px 6px; font-size: 13px; }
.ed-insp textarea { width: 100%; margin-top: 4px; font-size: 14px; }
.ed-help { margin: 6px 0; font-size: 12px; line-height: 1.4; }
.ed-actions { margin-top: 6px; gap: 6px; flex-wrap: wrap; }
.ed-compose { position: absolute; z-index: 6; width: 260px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.ed-compose textarea { width: 100%; font-size: 14px; }
.ed-compose-head { font: 700 13px var(--narrow); color: var(--muted); }
@media (max-width: 1100px) {
  .ed-bottom { grid-template-columns: 1fr; height: auto; }
  .ed-insp { max-height: 160px; }
}
@media (max-width: 1350px) { .ed-head { flex-wrap: wrap; } .ed-status { flex-basis: 100% !important; order: 10; } }
.tvc-editor .tv-hint { display: none; }

/* Турнир: переименование ботов и команд после создания сетки */
.tour-rename-dialog { width: min(520px, 94vw); }
.tour-rename-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; max-height: 55vh; overflow-y: auto; padding-right: 4px; }
.tour-rename-list .field-label { font-size: 12px; }

/* «Каждый с каждым»: подсветка встреч по щелчку на ник (строка и столбец; два ника — их встреча ярче) */
.rr-name { cursor: pointer; user-select: none; }
.rr-name:hover { color: var(--amber); }
.rr-name.hl { color: var(--amber-ink) !important; background: var(--amber) !important; }
.rr-cell.hl { box-shadow: inset 0 0 0 999px rgba(217, 164, 65, .14); }
.rr-cell.hl-low2 { box-shadow: inset 0 0 0 999px rgba(217, 164, 65, .22); }
.rr-cell.hl2 { box-shadow: inset 0 0 0 999px rgba(217, 164, 65, .38), inset 0 0 0 2px var(--amber); color: var(--paper); }

/* Чат турнира: объявление арбитра (/info) */
.tc-msg.info { background: rgba(111, 168, 220, .16); border: 1px solid #6fa8dc; box-shadow: inset 4px 0 0 #6fa8dc; }
.tc-msg.info .tc-text { font-size: 15px; font-weight: 600; }
.tc-info-label { padding: 0 6px; border-radius: 4px; background: #6fa8dc; color: #0f1a22; font: 700 11px var(--narrow); text-transform: uppercase; letter-spacing: .04em; }

/* Чат турнира: галочка «результат» над кнопкой «Отправить» */
.tc-send { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.tc-result-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); cursor: pointer; user-select: none; white-space: nowrap; }
.tc-result-flag input { width: 14px; height: 14px; margin: 0; accent-color: var(--amber); }
.tc-result-flag:has(input:checked) { color: var(--amber); }

/* Редактор роликов: подсказка на пустой дорожке «Камера» и «Как записать работу камеры» */
.ed-lane-hint { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; color: var(--amber); opacity: .8; pointer-events: none; white-space: nowrap; }
.ed-howto { margin: 8px 0; padding: 6px 8px; border-left: 3px solid var(--amber); background: rgba(217, 164, 65, .08); border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.4; }
.ed-howto ol { margin: 4px 0 0; padding-left: 18px; }
.ed-howto li { margin: 2px 0; }

/* Запись ролика в MP4: ход записи над сценой */
.tvc-stage-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.tvc-prog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(440px, 90%); padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(16, 24, 28, .92); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.tvc-prog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 15px var(--narrow); }
.tvc-prog-track { height: 8px; margin: 8px 0; border-radius: 4px; background: var(--line); overflow: hidden; }
.tvc-prog-bar { width: 0; height: 100%; background: var(--amber); transition: width .2s; }
.tvc-prog p { margin: 0; font-size: 12px; }

/* Масштаб надписей на сцене Tacview (--tv-ui: 1 — как обычно; задаётся в редакторе ролика и хранится в ролике):
   подписи самолётов, дистанции, метки высоты, подписи и переговоры ролика, точки самолётов издалека */
.tv-label { font-size: calc(12px * var(--tv-ui, 1)); }
.tv-label.sel { font-size: calc(14px * var(--tv-ui, 1)); }
.tv-label.tv-dist { font-size: calc(12px * var(--tv-ui, 1)); padding: calc(1px * var(--tv-ui, 1)) calc(6px * var(--tv-ui, 1)); }
.tv-label.tv-hmark { font-size: calc(13px * var(--tv-ui, 1)); padding: calc(2px * var(--tv-ui, 1)) calc(7px * var(--tv-ui, 1)); }
.tvc-note { font-size: calc(14px * var(--tv-ui, 1)); padding: calc(5px * var(--tv-ui, 1)) calc(10px * var(--tv-ui, 1)); max-width: calc(260px * var(--tv-ui, 1)); border-radius: calc(5px * var(--tv-ui, 1)); }
.tvc-radio { font-size: calc(14px * var(--tv-ui, 1)); padding: calc(6px * var(--tv-ui, 1)) calc(12px * var(--tv-ui, 1)); max-width: calc(280px * var(--tv-ui, 1)); border-radius: calc(14px * var(--tv-ui, 1)); }
.tvc-radio::after { width: calc(14px * var(--tv-ui, 1)); height: calc(14px * var(--tv-ui, 1)); bottom: calc(-9px * var(--tv-ui, 1)); left: calc(10px * var(--tv-ui, 1)); }
.tvc-lines line { stroke-width: calc(1.2px * var(--tv-ui, 1)); }
.ed-ui select { padding: 4px 6px; font-size: 13px; }

/* Ролик: формат кадра — сцена рамкой по центру ячейки, вокруг тёмные поля (не попадут в видео) */
.tv-canvas-cell { position: relative; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.tv-canvas-cell > .tv-canvas { width: 100%; height: 100%; flex: none; }
.tv-embedded:not([data-aspect="screen"]) .tv-canvas-cell { background: repeating-linear-gradient(135deg, #10171b 0 10px, #141d22 10px 20px); }
.tv-embedded:not([data-aspect="screen"]) .tv-canvas { border-color: var(--amber); }
/* В рамке формата (16:9 и др.) от блока «Камера» остаются только кнопки камеры */


/* Турнир: «О турнире» и «Кто в TeamSpeak» рядом */
.tour-top { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tour-top.no-about { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.tour-top.no-about .ts-panel { width: min(320px, 100%); }
@media (max-width: 900px) { .tour-top { grid-template-columns: 1fr; } .tour-top.no-about { justify-items: stretch; } .tour-top.no-about .ts-panel { width: auto; } }
.ts-panel { display: flex; flex-direction: column; gap: 6px; max-height: 676px; }
.ts-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-refresh { font-size: 17px; line-height: 1; padding: 4px 8px; }
.ts-refresh.spin { animation: ts-spin 1s linear infinite; }
@keyframes ts-spin { to { transform: rotate(360deg); } }
.ts-body { overflow-y: auto; min-height: 0; font-size: 14px; }
.ts-body p { margin: 0 0 6px; }
.ts-total { font-size: 13px; color: var(--muted); }
.ts-tree, .ts-clients { list-style: none; margin: 0; padding: 0; }
.ts-ch { padding-left: calc(var(--d, 0) * 14px); margin: 3px 0; }
.ts-ch-name { font: 700 14px var(--narrow); color: var(--paper); overflow-wrap: anywhere; }
.ts-ch.empty .ts-ch-name { color: var(--muted); font-weight: 400; }
.ts-clients { padding-left: 14px; }
.ts-user { display: flex; align-items: baseline; gap: 6px; font-size: 14px; overflow-wrap: anywhere; }
.ts-ico { flex: none; width: 14px; text-align: center; font-size: 11px; color: var(--olive); }
.ts-user.talking .ts-ico { color: #7fbf4d; }
.ts-user.away { color: var(--muted); }
.ts-user.away .ts-ico { color: var(--muted); }
.ts-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.ts-empty-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ts-empty-toggle input { accent-color: var(--amber); margin: 0; }
.ts-user.mic-off .ts-ico { color: var(--red); }

/* «О турнире» и «Кто в TeamSpeak» — на одной линии сверху; каналы сворачиваются щелчком */
.tour-top { margin: 12px 0; }
.tour-top > .tour-desc { margin: 0; }
.ts-ch-name.can { display: block; width: 100%; padding: 1px 4px; margin-left: -4px; border: 0; border-radius: 4px; background: none; text-align: left; cursor: pointer; font: 700 14px var(--narrow); color: var(--paper); }
.ts-ch-name.can:hover { background: rgba(233, 227, 210, .07); }
.ts-ch.empty .ts-ch-name.can { color: var(--muted); font-weight: 400; }
.ts-arrow { display: inline-block; width: 10px; color: var(--muted); }
.ts-count { color: var(--amber); font-weight: 700; }
.ts-ch.folded .ts-count { padding: 0 5px; border-radius: 8px; background: rgba(217, 164, 65, .18); }
.tour-top > .ts-panel { padding: 16px 20px; }
.ts-head { margin-bottom: 2px; }
.ts-head .section-title { margin: 0; line-height: 1.15; }
.ts-refresh { margin: -6px -4px -6px 0; }

/* Подпись самолёта: ник, справа три строки — скорость, высота, курс (стрелка курса повёрнута по курсу) */
.tv-label.air { display: flex; align-items: flex-start; gap: .45em; }
.tv-lstats { display: flex; flex-direction: column; font-size: .86em; line-height: 1.12; }
.tv-lrow { display: flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-lrow .tv-trend, .tv-hdg { display: inline-block; width: 1em; margin-left: 3px; text-align: center; font-size: .78em; line-height: 1; vertical-align: 0; }
.tv-trend.none { visibility: hidden; }
.tv-hdg { color: #f1ead8; transform-origin: 50% 50%; }

/* Компас в блоке «Камера» */
.tv-coords:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.tv-canvas .tv-compass { display: block; width: 104px; height: 104px; margin: -6px 0 -12px; flex: none; cursor: default; touch-action: auto; }
/* Ширина текста постоянная (моноширинный шрифт, 38 знаков): блок не «дышит», когда меняется число цифр */
.tv-coords-text { width: 38ch; min-width: 0; }
.tv-coords-text > div { overflow: hidden; text-overflow: ellipsis; }
.tv-compass-col { display: flex; flex-direction: column; align-items: center; flex: none; }
.tv-compass-hdg { text-align: center; line-height: 1.3; color: var(--paper); }
.tv-compass-hdg > div:first-child { color: #d9a441; font-weight: 700; }

/* «Время на маршруте»: засечки времени на следах */
.tv-canvas .tv-ticks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; cursor: default; touch-action: auto; }
.tv-timeline .tv-check { white-space: nowrap; }
.tv-scales { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 16px; margin-top: 2px; }
.tv-rscale { display: inline-flex; align-items: center; gap: 6px; }
.tv-scales .tv-check { white-space: nowrap; }
.tv-scales-hint { color: var(--muted); font-size: 12px; }
.tv-scales-hint[hidden] { display: none; }
.tv-embedded .tv-uisel { display: none; }
/* «Энергия»: кнопка свернуть и свёрнутая плашка */
.tv-en-min { margin-left: 8px; padding: 0 6px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 700 13px/18px var(--narrow); cursor: pointer; }
.tv-en-min:hover { background: rgba(255, 255, 255, .08); color: var(--paper); }
.tv-en-head .tv-en-win { margin-left: auto; }
.tv-energy.mini { padding: 0; width: auto; height: auto; }
.tv-energy.mini > :not(.tv-en-head) { display: none !important; }
.tv-energy.mini .tv-en-head { margin: 0; padding: 5px 12px; cursor: pointer; }
.tv-energy.mini .tv-en-win, .tv-energy.mini .tv-en-min { display: none; }
.tv-energy.mini .tv-en-head b::after { content: ' ▸'; color: var(--muted); }
.tv-energy.mini:hover { border-color: rgba(233, 227, 210, .35); }
.tc-headrow { position: relative; display: flex; align-items: stretch; background: var(--panel-2); }
.tc-headrow .tc-head { flex: 1; min-width: 0; }
.tc-dl { position: absolute; top: 50%; left: 120px; transform: translateY(-50%); padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); font: 700 11px var(--narrow); text-decoration: none; white-space: nowrap; }
.tc-dl:hover { color: var(--amber); border-color: var(--amber); }
/* Турнир: «Удалить ботов» — красная */
.btn.tour-del-bots { background: var(--red); border-color: var(--red); color: #fff; }
.btn.tour-del-bots:hover { filter: brightness(1.1); color: #fff; border-color: var(--red); }
.tour-stage-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tour-de-preview { max-height: 46vh; overflow: auto; margin: 0; padding-left: 28px; columns: 2; column-gap: 24px; }
.tour-de-preview li { break-inside: avoid; padding: 1px 0; }
.tour-de-preview .de-out { opacity: .45; }
.tour-de-preview .de-add b { color: var(--green, #7ccf6a); }
.tour-de-preview .de-drop b { color: var(--red); }
.tour-de-dialog input[type=number] { width: 90px; }
.tour-de-preview label { white-space: nowrap; display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; font: inherit; color: inherit; margin: 0; }
.tour-de-preview input[type=checkbox] { width: auto; margin: 0; flex: none; accent-color: var(--amber); }
.tour-de-tools label { display: inline-flex; align-items: center; gap: 6px; }
.tour-de-tools input[type=number] { width: 70px; }
.tour-de-tools { align-items: center; gap: 8px; }
.tour-de-sum { margin: 0; font-weight: 700; }
.tour-de-preview b { font-size: 15px; }
.rr-cell.void, .c-res.void { color: var(--muted); font-style: italic; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .03) 6px 12px); }
.bm-side.void .bm-name { opacity: .6; }
/* Повторы: Alt — вместо глазиков корзины (убрать из списка) */
.tv-eye .tv-trash-i { display: none; }
.tv-alt .tv-eye .tv-eye-i { display: none; }
.tv-alt .tv-eye .tv-trash-i { display: block; }
.tv-alt .tv-eye, .tv-alt .tv-eye.off { color: var(--red); }
.tv-restore { margin: 6px 0 0; font-size: 12px; }
.tv-alt-hint { margin: 4px 0 0; font-size: 11px; display: none; }
.tv-alt .tv-alt-hint { display: block; }
/* Повторы: колонка «сцена + кнопки камеры под ней» */
.tv-viewcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.tv-viewcol > .tv-canvas { flex: 1 1 auto; }
.tv-cambar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.tv-cambar:empty { display: none; }
.tv-kbd { display: inline-block; min-width: 16px; margin-left: 2px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font: 700 10px/14px var(--mono, ui-monospace, monospace); opacity: .7; text-align: center; }
.tv-locked .tv-cambar { opacity: .6; }
/* Дистанции между выбранными по Ctrl: ники слева, дистанция справа фиксированной ширины — строки не «прыгают» */
.tv-pair-row { display: flex; align-items: baseline; gap: 6px; }
.tv-pair-row .tv-pair-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-pair-row b { flex: none; min-width: 6.2em; text-align: right; font-variant-numeric: tabular-nums; }
/* Строки под сценой: [шкалы на следе · кнопки камеры · таймер] / шкала времени / [управление … надписи] */
.tv-toprow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; }
.tv-toprow .tv-scales { margin: 0; justify-content: flex-start; }
.tv-toprow .tv-cambar { justify-content: flex-start; min-height: 0; }
.tv-toprow .tv-clock { margin-left: 0; }
.tv-controls .tv-uisel { margin-left: auto; }
/* Дистанции по Ctrl: список занимает всё место рядом с «×» и может сжиматься; ники мельче, числа всегда видны */
.tv-pair-list { flex: 1 1 auto; min-width: 0; }
.tv-pair-row .tv-pair-names { font-size: 12px; }
.tv-pair-row b { min-width: 0; white-space: nowrap; }
/* Строка управления в одну линию: подпись карты сжимается (полный текст — в подсказке), «Надписи» — справа */
.tv-controls .tv-ground { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; }
.tv-controls .tv-map-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-controls .tv-ground > * { flex-shrink: 0; }
.tv-controls .tv-ground > .tv-map-note { flex-shrink: 1; }
/* Строка таймера — те же колонки, что у сцены и боковой панели */
.tv-toprow { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px; align-items: center; }
.tv-toprow-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; min-width: 0; }
.tv-toprow .tv-clock { justify-self: end; white-space: nowrap; }
.tvc-editor .tv-toprow { grid-template-columns: minmax(0, 1fr) 260px; }
.tvc-player .tv-toprow { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .tv-toprow { grid-template-columns: minmax(0, 1fr); } .tv-toprow .tv-clock { justify-self: start; } }
/* ---- Повторы 3.0: компактная раскладка */
.tv-timeline { gap: 4px; }
.tv-controls { flex-wrap: wrap; gap: 6px 10px; }
.tv-controls .tv-clock { margin-left: 0; font-size: 14px; white-space: nowrap; text-align: left; }
.tv-ctl-gap { flex: 1 1 0; min-width: 8px; }
.tv-controls .tv-ground { flex: 0 1 auto; }
.tv-controls .tv-uisel { margin-left: 0; }
.tv-speedbar { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; }
.tv-spd-x { color: var(--muted); font: 700 11px var(--narrow); margin: 0 1px 0 3px; }
.tv-spd { min-width: 22px; padding: 1px 4px; border: 0; border-radius: 4px; background: none; color: var(--muted); font: 700 12px/18px var(--narrow); cursor: pointer; font-variant-numeric: tabular-nums; }
.tv-spd:hover { color: var(--paper); background: rgba(255, 255, 255, .06); }
.tv-spd.on { background: var(--amber); color: #1a1408; }
.tv-speedbar .tv-kbd { margin: 0 2px; }
.tv-scales { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.tv-scales-label { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tv-rscale { display: inline-flex; align-items: center; gap: 1px; }
.tv-tog { padding: 2px 9px; }
.tv-tog.on { background: var(--amber); border-color: var(--amber); color: #1a1408; }
.tv-scale-reset { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 14px; line-height: 20px; cursor: pointer; }
.tv-scale-reset:hover { color: var(--amber); background: rgba(255, 255, 255, .06); }
/* Блок «Камера»: кнопки камеры внизу справа, верхний отступ меньше */
.tv-coords { padding: 2px 8px 6px; }
.tv-coords:not([hidden]) { align-items: stretch; }
.tv-coords-t { line-height: 1.25; }
.tv-coords-right { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 4px; min-width: 0; }
.tv-coords .tv-cambar { pointer-events: auto; justify-content: flex-end; min-height: 0; gap: 4px; font: 12px var(--narrow); }
.tv-coords .tv-cambar .btn { padding: 2px 7px; font-size: 12px; }
.tv-coords .tv-compass-col { justify-content: center; }
.tv-coords.nocoords .tv-compass-col, .tv-coords.nocoords .tv-coords-text { display: none; }
.tv-coords.nocoords { padding: 6px; }
.tv-controls { flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tv-ctl-left { display: flex; align-items: center; gap: 10px; flex: none; }
.tv-ctl-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; flex: 1 1 auto; min-width: 0; }
@media (max-width: 900px) { .tv-controls { flex-wrap: wrap; } .tv-ctl-right { justify-content: flex-start; } }
.tv-ctl-right { gap: 6px 9px; }
.tv-ctl-right select { padding-top: 3px; padding-bottom: 3px; }
.tv-ctl-right .tv-uisel select { width: 74px; }
.tv-ctl-right .tv-speed select { width: auto; min-width: 0; }
.tv-ctl-left { gap: 8px; }
/* Вертикальные черты-разделители в строке управления */
.tv-sep { align-self: stretch; width: 1px; min-height: 22px; margin: 2px 2px; background: var(--line-strong); flex: none; }
/* Линейка времени над шкалой: в той же полосе, что и отметки событий (высота не растёт) */
.tv-track { padding-top: 12px; }
.tv-ruler { position: absolute; left: 8px; right: 8px; top: 0; height: 12px; pointer-events: none; }
.tv-rt { position: absolute; bottom: 0; width: 1px; height: 3px; background: rgba(233, 227, 210, .28); }
.tv-rt.big { height: 12px; background: rgba(233, 227, 210, .45); }
.tv-rl { position: absolute; top: -1px; margin-left: 3px; font: 600 9px/10px var(--narrow); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tv-markers { top: 1px; z-index: 1; }
.tv-coords-text { width: 30ch; }
.tv-ctl-right { gap: 6px 7px; }
.tv-ctl-right .tv-check { gap: 3px; }
.tv-tog { padding: 2px 7px; }
.tv-sep { margin: 2px 3px; }
.tv-scales { gap: 4px; }
/* Во весь экран: кнопка в правом нижнем углу сцены; в режиме — только сцена, без панелей поверх */
.tv-fs-btn { position: absolute; right: 8px; bottom: 8px; z-index: 9; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(233, 227, 210, .25); border-radius: 6px; background: rgba(14, 20, 24, .55); color: var(--paper); cursor: pointer; opacity: .7; }
.tv-fs-btn:hover { opacity: 1; border-color: var(--amber); color: var(--amber); }
.tv-fs-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tv-canvas.tv-fswin { position: fixed; inset: 0; z-index: 2000; width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.tv-canvas:fullscreen { border: 0; border-radius: 0; width: 100vw; height: 100vh; }
.tv-canvas:fullscreen .tv-coords, .tv-canvas:fullscreen .tv-energy, .tv-canvas:fullscreen .tv-hint,
.tv-canvas.tv-fswin .tv-coords, .tv-canvas.tv-fswin .tv-energy, .tv-canvas.tv-fswin .tv-hint { display: none !important; }
.tv-canvas:fullscreen .tv-fs-btn, .tv-canvas.tv-fswin .tv-fs-btn { opacity: .35; }
.tv-canvas:fullscreen .tv-fs-btn:hover, .tv-canvas.tv-fswin .tv-fs-btn:hover { opacity: 1; }
.tv-locked .tv-fs-btn { pointer-events: auto; }
.tv-shot-btn { right: 44px; }
.tv-shot-btn svg { stroke-width: 1.8; }
.tv-shot-btn.busy { opacity: 1; color: var(--amber); cursor: progress; }
/* Редактор: дорожка «На маршруте» — время сверху, дистанция снизу */
.ed-bar.route { background: rgba(217, 164, 65, .22); border: 1px solid var(--amber); color: #f3dfb4; height: 11px; font-size: 10px; }
.ed-bar.route.k-time { top: 2px; }
.ed-bar.route.k-dist { top: 14px; background: rgba(124, 207, 106, .2); border-color: #7ccf6a; color: #d4f0cc; }
.ed-bar.route .ed-bar-text { line-height: 11px; padding: 0 5px; }
.ed-route-ids { display: flex; flex-direction: column; gap: 2px; max-height: 160px; overflow: auto; margin: 2px 0 6px; }
.ed-route-id { display: flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
/* В редакторе и ролике шкалы «На маршруте» — только с дорожки: переключатели под сценой не нужны */
.tv-embedded .tv-scales, .tv-embedded .tv-ctl-right > .tv-sep:first-of-type { display: none !important; }
.ed-checkrow { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; cursor: pointer; }
.ed-checkrow input { width: auto; margin: 0; }
/* Свойства «На маршруте»: заголовок в одну строку, галочки и ники ровно по левому краю */
.ed-route-h { margin: 8px 0 2px; color: var(--muted); white-space: nowrap; }
.ed-route-ids { align-items: stretch; }
.ed-route-ids .ed-route-id { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; width: 100%; margin: 0; padding: 1px 0; text-align: left; }
.ed-route-ids .ed-route-id input[type=checkbox] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--amber); }
/* ---- Редактор ролика: сцена + дорожки слева, панель повтора справа на всю высоту, свойства — поверх сцены */
.ed-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 10px; }
.ed-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.ed-left > .ed-main { flex: 1 1 auto; min-height: 0; }
.ed-left > .ed-tl { flex: none; height: 214px; }
.ed-body > .tv-side { min-height: 0; height: 100%; overflow: auto; }
.tvc-editor .tv-stage { grid-template-columns: minmax(0, 1fr); }
.tvc-editor .tv-ctl-right { justify-content: flex-start; }
.tvc-editor .tv-controls { justify-content: flex-start; }
/* Окно свойств в редакторе: двигается за заголовок, размер — уголком (как «Энергия») */
.ed-insp-ov { position: absolute; right: 8px; top: 8px; z-index: 7; width: 300px; max-height: calc(100% - 16px); display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(233, 227, 210, .18); border-radius: 8px; background: rgba(14, 20, 24, .88); box-shadow: 0 6px 22px rgba(0, 0, 0, .4); overflow: hidden; cursor: default; }
.ed-insp-ov > .ed-insp { flex: 1 1 auto; min-height: 0; overflow: auto; border: 0; border-radius: 0; background: none; padding: 4px 10px 12px; user-select: text; }
.ed-insp-drag { flex: none; padding: 4px 10px 2px; font: 700 11px var(--narrow); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: move; user-select: none; }
.ed-insp-drag:hover { color: var(--paper); }
.ed-insp-grip { z-index: 1; }
.ed-howto-wrap summary { cursor: pointer; color: var(--muted); font-size: 12px; margin-top: 4px; }
@media (max-width: 1100px) { .ed-body { grid-template-columns: 1fr; } .ed-body > .tv-side { height: auto; max-height: 220px; } }
/* Редактор: верхняя строка переносится, а не вылезает за окно (иначе окно прокручивалось вбок при фокусе на правой кнопке) */
.tvc-dialog { overflow: clip; }
.tvc-editor .ed-head { flex-wrap: wrap; row-gap: 6px; }
/* Редактор: слой оверлеев («Камера», свойства) на всю рабочую область — как «По окну» в любом формате */
.tv-ovl { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.tv-ovl > * { pointer-events: auto; }
.tv-ovl > .tv-coords { pointer-events: none; }
.tv-ovl > .tv-coords .tv-cambar { pointer-events: auto; }
/* Выгрузка турнира картинкой: только таблица/сетка без туров и кнопок, плотно по ширине содержимого */
.tour-board.exporting { display: inline-block; width: max-content; max-width: none; }
.tour-board.exporting .tour-board-main { width: max-content; }
.tour-board.exporting .swiss-rounds, .tour-board.exporting .swiss-actions, .tour-board.exporting .swiss-view-switch,
.tour-board.exporting .help-tip, .tour-board.exporting .swiss .small-note { display: none !important; }
.tour-board.exporting .bracket-scroll, .tour-board.exporting .rr-wrap, .tour-board.exporting .swiss-table-wrap { overflow: visible !important; max-width: none !important; }
/* Логотип и название — в правом нижнем углу картинки */
.tour-board.brand-bottom > .tour-brand { top: auto; bottom: 0; right: 0; }

/* Справка «Как записать трек для Tacview» (3.7.0) */
.pr-replays-head .help-btn { margin-left: auto; }
.pr-replays-head .pr-col-title + .help-btn { margin-left: 0; }
.help-btn {
  display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; flex: none;
  border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--muted);
  font: 700 13px/1 var(--font); cursor: pointer;
}
.help-btn:hover, .help-btn:focus-visible { color: var(--amber); border-color: var(--amber); outline: none; }
.track-help[open] { width: min(760px, 94vw); max-height: 90vh; display: flex; flex-direction: column; gap: 12px; padding: 0; }
.track-help .th-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.track-help .th-head h2 { margin: 0; }
.track-help .th-scroll { overflow: auto; padding: 0 20px; }
.track-help .th-foot { padding: 0 20px 18px; justify-content: flex-end; }
.track-help p { margin: 0 0 8px; line-height: 1.5; }
.track-help .th-lead { color: var(--paper); }
.track-help code { padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); font: 13px/1.4 ui-monospace, Consolas, monospace; color: var(--amber); white-space: nowrap; }
.track-help .th-path code { white-space: normal; overflow-wrap: anywhere; }
.track-help kbd { padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; font: 600 12px/1.4 var(--font); }
.track-help .th-steps { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.track-help .th-step { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.track-help .th-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); color: #15130c; font: 700 14px/1 var(--font); }
.track-help .th-body h3, .track-help .th-where h3 { margin: 3px 0 6px; font-size: 16px; color: var(--paper); }
.track-help .th-shot { margin: 8px 0 4px; }
.track-help .th-shot img { display: block; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; }
.track-help .th-shot figcaption { margin-top: 4px; color: var(--muted); font-size: 12px; }
.track-help .th-where { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(217, 164, 65, .06); }

/* Профиль: «Игра установлена в Program Files» — обычное окно выбора файла (3.7.1) */
.pf-plain { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; margin-top: 4px; }
.pf-plain input[type=checkbox] { width: 16px; height: 16px; margin: 3px 0 0; padding: 0; flex: none; accent-color: var(--amber); }

/* ---------- Трансляции через VDO.Ninja (3.9.0) */
.vdo-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.vdo-box { position: fixed; background: #000; border-radius: 4px; overflow: hidden; pointer-events: auto; }
.vdo-box .vdo-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.vdo-box.interactive .vdo-frame { pointer-events: auto; }
.vdo-box .tile-label, .vdo-box .tile-controls, .vdo-box .tile-wait { z-index: 1; }
.vdo-box:hover .tile-controls, .vdo-box:focus-within .tile-controls { opacity: 1; }
.vdo-box:not(.is-main):not(:hover) .tile-info { display: none; }
.vdo-box:fullscreen { border-radius: 0; }
.tile.vdo .tile-media { position: absolute; inset: 0; }
.self-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 20px; align-items: start; }
@media (max-width: 900px) { .self-pick { grid-template-columns: 1fr; } }
.srv-panel { border: 1px solid var(--line); border-radius: 6px; padding: 12px; background: rgba(10, 16, 20, .3); display: flex; flex-direction: column; gap: 8px; }
.srv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.srv-title { margin: 0; font-size: 15px; color: var(--paper); }
.srv-list { display: flex; flex-direction: column; gap: 2px; }
.srv-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) 70px minmax(0, 1.1fr); gap: 8px; align-items: center; padding: 5px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.srv-row.srv-cols { cursor: default; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.srv-row:not(.srv-cols):hover { background: rgba(255, 255, 255, .04); }
.srv-row.on { background: rgba(217, 164, 65, .1); }
.srv-row input[type=radio] { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: var(--amber); }
.srv-name { color: var(--paper); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.srv-best { font-size: 10px; color: var(--amber); border-color: var(--amber); }
.srv-ping { font-variant-numeric: tabular-nums; }
.srv-note { font-size: 12px; }
.srv-hint { margin: 0; font-size: 12px; line-height: 1.45; }
.self-live.vdo-live { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.vdo-pub { aspect-ratio: 16 / 9; background: #000; }

/* Качество своей трансляции: разрешение, к/с, битрейт (3.10.0) */
.q-picker { display: flex; flex-direction: column; gap: 8px; align-self: stretch; }
.q-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-title { min-width: 92px; font-size: 13px; color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.seg button { font: 600 13px/1 var(--font); color: var(--muted); background: transparent; border: 0; padding: 7px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { color: var(--paper); }
.seg button.on { background: rgba(217, 164, 65, .16); color: var(--amber); }
.q-hint { margin: 0; font-size: 12px; line-height: 1.4; }

/* Меню «Качество» в плитке трансляции (3.11.0) */
.q-menu { position: fixed; z-index: 60; width: 300px; padding: 10px 12px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #121b20; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.qm-head { display: flex; align-items: center; justify-content: space-between; }
.qm-group { display: flex; flex-direction: column; gap: 5px; }
.qm-title { color: var(--muted); font-size: 12px; }
.q-menu .seg { flex-wrap: wrap; }
.q-menu .seg button { padding: 6px 9px; font-size: 12px; }
.qm-note { margin: 0; font-size: 12px; line-height: 1.4; }

/* Справка по вариантам сервера трансляции (3.11.2) */
.srv-title { display: flex; align-items: center; gap: 8px; }
.srv-title .help-btn[aria-expanded="true"] { color: var(--amber); border-color: var(--amber); }
.srv-help { border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 10px; background: rgba(217, 164, 65, .06); font-size: 12px; line-height: 1.45; }
.srv-help p { margin: 0 0 4px; }
.srv-help p:last-child { margin: 0; }
.self-live.vdo-live.no-preview { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }


/* Часы синхронизации в подписи плитки (3.11.12) */
.tile-clock { font: 600 12px/1 ui-monospace, Consolas, monospace; color: #e9e3d2; background: rgba(15, 22, 26, .75); padding: 3px 6px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.tile-clock:empty { display: none; }
.tile-clock.approx::before { content: '≈ '; opacity: .7; }
.tile-clock.stalled { color: #ff8a7a; }
.tile-clock.stalled::after { content: ' стоит'; font-family: var(--font); font-weight: 400; }
.tile-clock { pointer-events: auto; cursor: help; }

/* Анимации без бесконечных повторов (3.11.13): значок «идёт трансляция», «идёт показ реплея» и колокольчик
   пульсировали всё время — браузер перерисовывал страницу каждый кадр, в том числе под окнами видео.
   Теперь они пульсируют три раза и затихают; кольцо значка — прозрачность и масштаб, без тени */
.live-count::before { position: relative; animation: none; box-shadow: none; }
.live-count { position: relative; }
.live-count::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: rgba(224, 122, 99, .55); animation: live-ring 1.6s ease-out 3 forwards; pointer-events: none;
}
@keyframes live-ring { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(2.5); opacity: 0; } 100% { transform: scale(2.5); opacity: 0; } }
.bell.ringing { animation: none; position: relative; color: var(--amber); background: rgba(217, 164, 65, .12); }
.bell.ringing svg { animation: bell-swing 1.6s ease-in-out 3; }
.tv-badge { animation-iteration-count: 3; }

/* Трансляции в строке тренировки (3.11.15) */
.training-streams { margin-left: 8px; vertical-align: 1px; font-size: 12px; }
.training-streams[hidden] { display: none; }