/*
 * style.css — дизайн-система портала (основа: docs/design/ui-kit.css).
 * Только классы и CSS-переменные: inline-стили запрещены CSP (style-src 'self').
 * Шрифты: /static/fonts/fonts.css. Иконки: /static/icons.svg (спрайт).
 */

/* ============ 1. Токены платформы (консоль и страница входа) ============ */
:root {
  --c-bg: #0A0B0E;
  --c-dot: rgba(255, 255, 255, .045);
  --c-sidebar: rgba(12, 13, 17, .78);
  --c-glass: rgba(20, 23, 29, .62);
  --c-glass-strong: rgba(18, 20, 26, .62);
  --c-line: rgba(255, 255, 255, .075);
  --c-line-soft: rgba(255, 255, 255, .06);
  --c-line-strong: rgba(255, 255, 255, .1);
  --c-fill: rgba(255, 255, 255, .05);
  --c-fill-hover: rgba(255, 255, 255, .09);
  --c-fill-press: rgba(255, 255, 255, .035);
  --c-field: rgba(0, 0, 0, .28);
  --c-field-focus: rgba(0, 0, 0, .4);

  --c-text: #ECEDEF;      /* основной */
  --c-text-2: #A4AAB3;    /* вторичный, подписи полей */
  --c-text-3: #8A919C;    /* описания карточек */
  --c-text-4: #7D848F;    /* подсказки, плейсхолдеры; 5.2:1 на фоне, 4.8:1 на карточке — темнее не делать */
  --c-label: #C9CDD3;

  --c-brand-1: #FF8A3D;
  --c-brand-2: #FF5A3D;
  --c-brand-3: #FF3D5E;
  --c-on-brand: #170B07;
  --c-focus: #FF7A3D;
  --c-link: #FF8A5C;
  --c-link-hover: #FFB08F;
  --g-brand: linear-gradient(110deg, var(--c-brand-1) 0%, var(--c-brand-2) 50%, var(--c-brand-3) 100%);

  --c-live: #FF5A4E;
  --c-live-text: #FF8178;
  --c-live-bg: rgba(255, 90, 78, .14);
  --c-info-text: #AFC6FF;
  --c-info-bg: rgba(126, 166, 255, .13);
  --c-ok: #3BD69B;
  --c-ok-text: #7FE3B8;
  --c-ok-bg: rgba(59, 214, 155, .14);
  --c-warn-text: #F3D88C;
  --c-warn-bg: rgba(245, 197, 66, .08);
  --c-warn-line: rgba(245, 197, 66, .28);
  --c-err-text: #FFB3AC;
  --c-err-bg: rgba(255, 90, 78, .1);
  --c-err-line: rgba(255, 90, 78, .28);
  --c-danger: #FF9389;

  --f-sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --blur: blur(18px) saturate(140%);
  --shadow-pop: 0 40px 100px -40px rgba(0, 0, 0, .9);
  --ease-spring: cubic-bezier(.3, .7, .4, 1.3);
}

/* ============ 2. База ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--c-bg);
  background-image: radial-gradient(var(--c-dot) 1px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--c-text);
  font: 13px/1.45 var(--f-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-link-hover); }
h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h2 { margin: 0; font-size: 14px; font-weight: 600; }
.mono { font-family: var(--f-mono); }
.kicker { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-4); }
.muted { color: var(--c-text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ============ 3. Кнопки ============ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 13px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background-color: var(--c-fill); color: var(--c-text);
  font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color .18s, border-color .18s, box-shadow .2s, transform .12s, background-position .35s ease, filter .15s;
}
.btn:hover { background-color: var(--c-fill-hover); border-color: rgba(255, 255, 255, .2); color: #fff; }
.btn:active { transform: translateY(1px) scale(.98); background-color: var(--c-fill-press); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn--sm { height: 28px; padding: 0 9px; font-size: 12px; border-radius: var(--r-sm); gap: 6px; }
.btn--lg { height: 42px; padding: 0 16px; border-radius: 10px; }
.btn--block { width: 100%; }
.btn--icon { width: 34px; padding: 0; }
.btn--sm.btn--icon { width: 28px; }
.btn--ghost { background-color: transparent; border-color: transparent; color: var(--c-text-2); }
.btn--ghost:hover { background-color: rgba(255, 255, 255, .07); border-color: transparent; }
.btn--danger { color: var(--c-danger); border-color: rgba(255, 90, 78, .3); background-color: rgba(255, 90, 78, .06); }
.btn--danger:hover { color: var(--c-err-text); border-color: rgba(255, 90, 78, .5); background-color: rgba(255, 90, 78, .12); }
/* Главная кнопка: градиент сдвигается при наведении, свечение усиливается, при нажатии темнеет. */
.btn--primary {
  border-color: transparent; color: var(--c-on-brand);
  background-image: var(--g-brand); background-size: 200% 100%; background-position: 0% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 8px 20px -10px rgba(255, 90, 61, .7);
}
.btn--primary:hover {
  color: var(--c-on-brand); border-color: transparent; background-position: 100% 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 12px 28px -10px rgba(255, 70, 80, .85);
}
.btn--primary:active { filter: brightness(.9); }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--c-text-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.link-btn:hover { color: #fff; }

/* ============ 4. Поля ============ */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 12px; font-weight: 500; color: var(--c-text-2); }
.hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--c-text-4); }
.input {
  width: 100%; height: 34px; padding: 0 11px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background: var(--c-field); color: var(--c-text);
  font: inherit; font-size: 13px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--c-text-4); }
.input:hover { border-color: rgba(255, 255, 255, .18); }
.input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(255, 106, 61, .18); background: var(--c-field-focus); }
.input[aria-invalid="true"] { border-color: var(--c-err-line); }
.input--lg { height: 42px; font-size: 14px; border-radius: 10px; }
.input--code { height: 42px; font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; }
textarea.input { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; padding-right: 30px; background-image: none; }
/* Поле только для копирования: адрес, ссылка, ключ. */
.copy-field { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 3px 0 11px; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); font: 12.5px var(--f-mono); color: var(--c-label); }
.copy-field__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 5. Поверхности ============ */
.glass { background: var(--c-glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--c-line); }
.card { border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.card__desc { margin: 3px 0 0; font-size: 12px; color: var(--c-text-3); }
.row-toggle { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--c-line-soft); }
.row-toggle__text { flex: 1; min-width: 0; }
.row-toggle__title { font-weight: 600; font-size: 13px; }

/* ============ 6. Переключатели ============ */
/* <button type="button" class="switch" role="switch" aria-checked="true" aria-label="…"> */
.switch { position: relative; flex: none; width: 34px; height: 20px; padding: 0; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s, border-color .2s; }
.switch::before { content: ""; position: absolute; inset: -12px -6px; } /* зона нажатия 44px */
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-label); transition: transform .22s var(--ease-spring), background .2s; }
.switch:hover { border-color: rgba(255, 255, 255, .28); }
.switch[aria-checked="true"] { background: linear-gradient(110deg, var(--c-brand-1), #FF4A4A); border-color: transparent; }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: #fff; }
/* Сегментированный выбор: <div class="seg" role="group"><button aria-pressed="true">…</button>… */
.seg { display: inline-flex; width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-md); background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .07); }
.seg > button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border: 0; border-radius: 6px; background: transparent; color: var(--c-text-2); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.seg > button:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.seg > button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.seg__sub { font: 10.5px var(--f-mono); color: var(--c-text-4); }
/* Фильтры списка */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .08); background: transparent; color: var(--c-text-2); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.pill:hover { color: #fff; border-color: rgba(255, 255, 255, .18); }
.pill[aria-current="true"], .pill[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); }
.pill__n { font: 11px var(--f-mono); color: var(--c-text-4); }
/* Выбор карточкой (шаблон раскладки, пресет темы, шрифт) */
.choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); color: var(--c-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s, box-shadow .15s; }
.choice:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .045); }
.choice:active { transform: scale(.98); }
.choice[aria-pressed="true"] { border-color: #FF6A3D; background: rgba(255, 106, 61, .07); box-shadow: 0 0 0 3px rgba(255, 106, 61, .12); }

/* ============ 7. Метки и статусы ============ */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 3px 0 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--c-line-strong); font: 12.5px var(--f-mono); color: var(--c-text); }
.chip > button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--c-text-3); cursor: pointer; }
.chip > button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.code-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); font: 12px var(--f-mono); letter-spacing: .06em; color: var(--c-label); }
.tag { font: 500 10.5px var(--f-mono); padding: 2px 6px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .08); color: var(--c-text-2); }
.soon { font: 500 9.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, .07); color: var(--c-text-2); }
.status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; }
.status--live { background: var(--c-live-bg); color: var(--c-live-text); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.status--scheduled { background: var(--c-info-bg); color: var(--c-info-text); }
.status--draft { background: rgba(255, 255, 255, .07); color: #C2C7CE; }
.status--ended, .status--disabled { border: 1px solid var(--c-line-strong); color: var(--c-text-3); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-live); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 78, .6); } 70% { box-shadow: 0 0 0 6px rgba(255, 90, 78, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 78, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ============ 8. Сообщения ============ */
.alert { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.alert--error { background: var(--c-err-bg); border: 1px solid var(--c-err-line); color: var(--c-err-text); }
.alert--warn { background: var(--c-warn-bg); border: 1px solid var(--c-warn-line); color: var(--c-warn-text); }
.alert--ok { background: var(--c-ok-bg); border: 1px solid rgba(59, 214, 155, .28); color: var(--c-ok-text); }
.save-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--c-text-3); }
.save-state--dirty { color: var(--c-link-hover); }

/* ============ 9. Страница входа ============ */
.auth { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.auth__main { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 12px 16px 40px; }
.auth__card { width: 100%; max-width: 420px; border-radius: var(--r-xl); padding: 28px; display: flex; flex-direction: column; gap: 22px; background: var(--c-glass-strong); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--shadow-pop); }
.auth__title { font-size: 26px; line-height: 1.15; }
.auth__lead { margin: 0; color: var(--c-text-2); font-size: 13.5px; }
.step-label { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--c-label); }
.step-label__n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: var(--r-xs); background: rgba(255, 255, 255, .08); color: var(--c-text); font: 500 11px var(--f-mono); }
.step[aria-disabled="true"] { opacity: .38; pointer-events: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--c-text-4); font: 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .08); }
.event-chip { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); }
.auth__note { display: flex; gap: 10px; align-items: flex-start; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); color: var(--c-text-3); font-size: 12px; line-height: 1.45; }
/* Кольца на фоне — inline SVG с этими классами, aria-hidden. */
.rings { position: absolute; left: 50%; top: 52%; width: 1180px; height: 1180px; transform: translate(-50%, -50%); pointer-events: none; }
.rings circle { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.rings path { fill: none; stroke: #FF6A3D; stroke-width: 1.6; stroke-linecap: round; opacity: .75; }
.rings path + path { opacity: .4; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 35%, var(--c-bg) 88%); pointer-events: none; }

/* ============ 10. Каркас консоли ============ */
.shell { min-height: 100vh; display: flex; flex-wrap: wrap; }
.shell__nav { flex: 1 1 220px; display: flex; flex-direction: column; gap: 18px; padding: 16px 12px; background: var(--c-sidebar); border-right: 1px solid var(--c-line-soft); }
.shell__main { flex: 999 1 560px; min-width: 0; padding: 20px 28px 40px; }
.shell__content { max-width: 1320px; display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px; color: var(--c-text); }
.brand:hover { color: var(--c-text); }
.brand__mark { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-brand-1), var(--c-brand-3)); }
.brand__name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.nav-head { padding: 12px 10px 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--c-text-2); font-weight: 500; transition: background .15s, color .15s; }
.nav-link:hover { background: rgba(255, 255, 255, .05); color: var(--c-text); }
.nav-link[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; }
.nav-link[aria-current="page"] .icon { color: var(--c-focus); }
.nav-link__count { margin-left: auto; font: 11px var(--f-mono); color: var(--c-text-4); }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head__spacer { flex: 1; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-4); }
.crumbs a { color: var(--c-text-3); }
.crumbs a:hover { color: var(--c-text); }
.tabs { display: flex; gap: 22px; flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; color: var(--c-text-2); font-weight: 500; }
.tab:hover { color: #fff; }
.tab[aria-current="page"] { color: #fff; }
.tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c-brand-1), var(--c-brand-3)); }
.tab[aria-disabled="true"] { color: #6A717B; cursor: default; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cols > * { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cols > .cols__wide { flex: 1.5 1 560px; }

/* Таблица: настоящая <table> внутри прокручиваемой обёртки. */
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 960px; border-collapse: collapse; }
.table th { padding: 10px 16px; text-align: left; font: 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-4); border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 400; }
.table td { padding: 11px 16px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--c-label); vertical-align: middle; }
.table tr:hover td { background: rgba(255, 255, 255, .03); }
.table__num { text-align: right; font-family: var(--f-mono); }

/* Загрузка файлов */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 16px; border-radius: 11px; border: 1.5px dashed rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .015); color: var(--c-text-3); font: inherit; font-size: 12.5px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.dropzone:hover, .dropzone[data-over] { border-color: var(--c-focus); background: rgba(255, 106, 61, .05); color: var(--c-text); }
.checker { background-color: #1A1D22; background-image: linear-gradient(45deg, #262A31 25%, transparent 25%, transparent 75%, #262A31 75%), linear-gradient(45deg, #262A31 25%, transparent 25%, transparent 75%, #262A31 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.color-input { -webkit-appearance: none; appearance: none; flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-md); background: none; cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-input::-webkit-color-swatch { border: none; border-radius: 8px; }
.color-input::-moz-color-swatch { border: none; border-radius: 8px; }
.range { width: 100%; accent-color: #FF6A3D; cursor: pointer; }

/* ============ 11. Страница зрителя: тема события ============ */
/*
 * Значения по умолчанию = пресет Graphite. Сервер отдаёт /e/{slug}/theme.css
 * с переопределением этих переменных для события (см. DESIGN.md, «Тема события»).
 * В админке живое превью меняет их через CSSOM: el.style.setProperty('--t-accent', v).
 */
.theme {
  --t-bg: #0C0E12;
  --t-surface: #171B21;
  --t-text: #EEF0F2;
  --t-accent: #3BD69B;
  --t-on-accent: #0B0C0E;   /* сервер считает по контрасту: тёмный или белый */
  --t-font: var(--f-sans);
  --t-radius: 10px;
  --t-text-2: color-mix(in srgb, var(--t-text) 68%, var(--t-bg));
  --t-text-3: color-mix(in srgb, var(--t-text) 55%, var(--t-bg));
  --t-line: color-mix(in srgb, var(--t-text) 9%, transparent);
  --t-glow: color-mix(in srgb, var(--t-accent) 22%, transparent);
  background: var(--t-bg);
  color: var(--t-text);
  font: 14px/1.45 var(--t-font);
}
.theme--glow { background: radial-gradient(55% 65% at 32% 38%, var(--t-glow), transparent 72%), var(--t-bg); }
.theme .t-surface { background: var(--t-surface); border: 1px solid var(--t-line); }
.theme--frost .t-surface { background: color-mix(in srgb, var(--t-surface) 60%, transparent); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); }

.viewer { min-height: 100vh; }
.viewer__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 24px; border-width: 0 0 1px; }
.viewer__body { max-width: 1480px; margin: 0 auto; padding: 20px 24px 32px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.viewer__stage { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.viewer__panel { flex: 1 1 320px; min-width: 0; min-height: 540px; border-radius: var(--t-radius); display: flex; flex-direction: column; overflow: hidden; }
/* Раскладки (Layout → Template). Класс на .viewer__body. */
.layout--stacked { flex-direction: column; align-items: center; }
.layout--stacked > * { width: min(100%, 960px); flex: none; }
.layout--minimal .viewer__panel { display: none; }
.layout--immersive { max-width: none; padding: 0; position: relative; }
.layout--immersive .viewer__stage { flex: 1 1 100%; }
.layout--immersive .player { border-radius: 0; border: 0; }
.layout--immersive .viewer__panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: 340px; min-height: 0; }
@media (max-width: 760px) {
  .viewer__body { padding: 0 0 24px; gap: 0; }
  .layout--immersive .viewer__panel { position: static; width: auto; }
  .player { border-radius: 0; border-width: 0 0 1px; }
}

/* Плеер */
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--t-radius); overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .08); }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.player__logo { position: absolute; top: 16px; left: 18px; width: 26px; height: 26px; opacity: var(--t-logo-opacity, .6); pointer-events: none; }
.player__chip { position: absolute; top: 14px; right: 14px; height: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 7px; background: rgba(8, 10, 13, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); font: 11.5px var(--f-mono); color: #D5D9DE; }
.player__controls { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 8px; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .75) 100%); display: flex; flex-direction: column; gap: 6px; transition: opacity .25s; }
.player[data-idle] .player__controls { opacity: 0; }
.player__progress { position: relative; height: 4px; margin: 0 6px; border-radius: 4px; background: rgba(255, 255, 255, .18); }
.player__progress-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--t-accent); }
.player__row { display: flex; align-items: center; gap: 2px; }
.ctl { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; transition: background .15s, transform .1s; }
.ctl:hover { background: rgba(255, 255, 255, .14); }
.ctl:active { transform: scale(.9); }
.ctl .icon { width: 18px; height: 18px; }
.ctl--text { width: auto; padding: 0 9px; font: 500 12px var(--f-mono); display: inline-flex; align-items: center; gap: 7px; }
@media (pointer: coarse) { .ctl { width: 44px; height: 44px; } }
/* Сообщение поверх плеера: подключение, ещё не началось, завершено, другое устройство, ошибка. */
.player__message { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr); place-items: center; padding: 24px; background: rgba(0, 0, 0, .55); text-align: center; }
.player__message[hidden] { display: none; }
/* max-height и прокрутка: карточка не выходит за низкий плеер (телефон, узкое окно). */
.player__message-card { max-width: 420px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 24px; border-radius: 14px; background: rgba(12, 14, 18, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .1); color: #EEF0F2; }
.watermark { position: absolute; left: 16px; top: 12px; z-index: 3; color: rgba(255, 255, 255, .55); font: 13px var(--f-mono); pointer-events: none; user-select: none; text-shadow: 0 0 4px rgba(0, 0, 0, .8); transition: all .6s ease; }
.watermark[hidden] { display: none; }

/* Вкладки боковой панели и агенда */
.ptabs { display: flex; gap: 20px; padding: 0 16px; border-bottom: 1px solid var(--t-line); }
.ptab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0; border: 0; background: none; color: var(--t-text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.ptab:hover { color: var(--t-text); }
.ptab[aria-selected="true"] { color: var(--t-text); }
.ptab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--t-accent); }
.ptab:disabled { color: var(--t-text-3); cursor: not-allowed; }
.agenda { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.agenda__item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: calc(var(--t-radius) * .8); }
.agenda__item[aria-current="true"] { background: color-mix(in srgb, var(--t-text) 6%, transparent); }
.agenda__time { width: 42px; flex: none; font: 12px var(--f-mono); color: var(--t-text-3); padding-top: 1px; }
.agenda__item[data-done] .agenda__title { color: var(--t-text-3); }
.now-badge { height: 20px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 5px; font: 600 10.5px var(--f-mono); letter-spacing: .08em; background: var(--t-accent); color: var(--t-on-accent); }

/* ============ 12. Дополнения портала ============ */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline { display: inline; }
.row--nowrap { flex-wrap: nowrap; }
.row--between { justify-content: space-between; }
.input--otp { text-align: center; letter-spacing: .5em; font-size: 20px; height: 56px; }
.link-btn.mono { font: 12px var(--f-mono); text-decoration: none; color: var(--c-text-3); }
.link-btn:disabled { cursor: default; color: var(--c-text-4); }
.row--nowrap > .input { flex: 1; min-width: 0; }
.step { gap: 10px; }
.auth__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 28px; }
.auth__links { display: flex; align-items: center; gap: 16px; }
.auth__links > a:not(.btn) { color: var(--c-text-2); font-weight: 500; }
.auth__links > a:not(.btn):hover { color: var(--c-text); }
.auth__card--wide { max-width: 720px; }
.auth__card h2 { font-size: 15px; }
.auth__card p { margin: 0; }
.auth__card ol, .auth__card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
/* Юридический текст (Privacy): разделы с заголовками, читаемый размер. */
.legal { display: flex; flex-direction: column; gap: 22px; font-size: 14px; line-height: 1.6; color: var(--c-text-2); }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal h2 { margin: 0; color: var(--c-text); }
.legal strong { color: var(--c-text); font-weight: 600; }
.legal a { color: var(--c-text); text-decoration: underline; text-underline-offset: 2px; }
.auth__card code, .shell code { font: 12px var(--f-mono); padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .07); }
.auth__foot { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 28px; color: var(--c-text-4); font-size: 12px; }
.auth__foot nav { display: flex; gap: 16px; }
.auth__foot a { color: var(--c-text-4); }
.auth__foot a:hover { color: var(--c-text); }
.auth__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--c-line-strong); color: var(--c-text); }
.auth__icon .icon { width: 20px; height: 20px; }
.event-chip__mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid var(--c-line-strong); }
.event-chip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.event-chip__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; }
.event-chip__meta { font: 12px var(--f-mono); color: var(--c-text-3); }
.alert .icon { margin-top: 1px; }
.alert > span { flex: 1; }
.btn .icon { width: 16px; height: 16px; }
.shell__user { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px 4px; border-top: 1px solid var(--c-line-soft); font-size: 12px; color: var(--c-text-2); overflow-wrap: anywhere; }
.viewer__title { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__logo { display: block; height: 28px; width: auto; max-width: 180px; object-fit: contain; flex: none; }
.viewer__user { font-size: 12px; color: var(--t-text-2); }
.viewer__meta { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.viewer__h1 { font-size: 18px; }
@media (max-width: 760px) { .viewer__meta { padding: 12px 16px; } }
@media (max-width: 480px) { .auth__card { padding: 22px 18px; } .auth__head, .auth__foot { padding: 14px 16px; } }

/* Плеер: собственные контролы поверх <video>. */
.player--embed .player__controls { display: none; }
.player iframe.embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player:fullscreen { border-radius: 0; aspect-ratio: auto; border: 0; }
.player:fullscreen video { object-fit: contain; }
.player[data-ended] video { opacity: .25; }
.player[data-ended] .player__controls { display: none; }
.player__time { font: 500 12px var(--f-mono); color: #D5D9DE; padding: 0 6px; min-width: 70px; }
.player__controls { z-index: 2; }
.player[data-idle] { cursor: none; }
.player__message { z-index: 3; }
.player__message-card h2 { margin: 0; font-size: 16px; font-weight: 600; }
.player__message-card .hint { color: #B9BFC7; font-size: 13px; }
.player__message-card .icon--lg { width: 28px; height: 28px; color: var(--t-accent); }
.player__message-card .btn { margin-top: 4px; }
.player__message--busy .icon--lg { animation: spin 1.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player__message--busy .icon--lg { animation: none; } }
.watermark { z-index: 4; }
.watermark.tr { left: auto; right: 16px; top: 12px; }
.watermark.br { left: auto; right: 16px; top: auto; bottom: 56px; }
.watermark.bl { left: 16px; top: auto; bottom: 56px; }
/* Пока показано сообщение плеера, видео нет: водяной знак не перекрывает текст карточки.
   Анимируется только положение знака, видимость меняется сразу. */
.watermark { transition-property: left, right, top, bottom; }
.player__message:not([hidden]) ~ .watermark { visibility: hidden; }
.ctl[data-ctl="cc"][aria-pressed="true"] { background: rgba(255, 255, 255, .14); }
.ctl[hidden] { display: none; }
/* Шапка и подпись зрителя */
.viewer__avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--t-accent); color: var(--t-on-accent); font: 600 11px var(--f-mono); letter-spacing: .04em; flex: none; }
.viewer__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; color: var(--t-text-2); font-size: 13px; }
.viewer__sub .icon { width: 14px; height: 14px; color: var(--t-text-3); }
.viewer__dot { color: var(--t-text-3); padding: 0 2px; }
@media (max-width: 760px) {
  .viewer__bar { padding: 10px 16px; gap: 10px; }
  .viewer__title, .viewer__user { display: none; }
  /* В ui-kit это правило стоит раньше базового .player и проигрывает ему по порядку. */
  .player { border-radius: 0; border-width: 0 0 1px; }
  /* Плеер 16:9 на телефоне ниже 220 px: компактная карточка сообщения помещается целиком. */
  .player__message { padding: 12px; }
  .player__message-card { padding: 14px 16px; gap: 6px; border-radius: 12px; }
  .player__message-card .icon--lg { width: 22px; height: 22px; }
  .player__message-card h2 { font-size: 15px; }
  .player__message-card .hint { font-size: 12.5px; line-height: 1.4; }
  .player__message-card .btn { margin-top: 2px; }
}

/* ============ 14. Консоль: дополнения ============ */
.card--row { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 16px; }
.card--table { padding: 0; gap: 0; }
.card--table .table { min-width: 860px; }
.card__grow { flex: 1; min-width: 0; }
.card__lead { margin: 2px 0 0; font-size: 14px; font-weight: 500; }
.card__foot { padding: 10px 16px; border-top: 1px solid var(--c-line-soft); }
.code-big { font: 500 26px var(--f-mono); letter-spacing: .14em; }
.table--compact th, .table--compact td { padding: 8px 10px; }
.table a { color: var(--c-text); }
.table a:hover { color: var(--c-link-hover); }
.chip .inline { display: inline; }
.chip--off { opacity: .55; text-decoration: line-through; }
.chip > form > button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--c-text-3); cursor: pointer; }
.chip > form > button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.chip > form > button .icon { width: 12px; height: 12px; }
.rule { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--c-line-soft); }
.rule__text { flex: 1; min-width: 200px; }
.alert-inline { color: var(--c-warn-text); }
.status--ok { background: var(--c-ok-bg); color: var(--c-ok-text); }
.live-dot--ok { background: var(--c-ok); animation: none; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--c-text-2); cursor: pointer; }
.check input { margin: 2px 0 0; accent-color: #FF6A3D; }
/* Сегменты и переключатели как нативные input: формы работают без JS. */
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 6px; color: var(--c-text-2); font-size: 12px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.seg__opt:hover span { color: #fff; background: rgba(255, 255, 255, .05); }
.seg__opt input:checked + span { color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
label.switch { display: inline-block; border: 0; background: none; }
label.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
label.switch .switch__track { display: block; width: 34px; height: 20px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .08); position: relative; transition: background .2s, border-color .2s; }
label.switch .switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-label); transition: transform .22s var(--ease-spring), background .2s; }
label.switch input:checked + .switch__track { background: linear-gradient(110deg, var(--c-brand-1), #FF4A4A); border-color: transparent; }
label.switch input:checked + .switch__track::after { transform: translateX(14px); background: #fff; }
label.switch input:focus-visible + .switch__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.btn.is-copied { color: var(--c-ok-text); }
.shell__content > .page-head h1 + .card__desc { margin-top: 4px; }
/* Логотип события: превью в консоли и удаление события. */
.logo-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* flex, а не grid: в grid проценты max-height у картинки считаются от строки по содержимому,
   и высокий логотип вылезал за рамку. */
.logo-preview { width: 168px; height: 84px; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 10px; border: 1px solid var(--c-line-soft); overflow: hidden; flex: none; }
.logo-preview img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-meta { gap: 8px; }
.card--narrow { max-width: 620px; }
.bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--c-text-2); font-size: 13px; }
input[type="search"].input { -webkit-appearance: none; appearance: none; min-width: 220px; }
.card__foot--top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; border-top: 0; border-bottom: 1px solid var(--c-line-soft); }