/* Личный кабинет — оформление в стиле приложения «Люси» (Системно-векторная психология).
   Дуальные поверхности: тёмный индиго на входе, светлая лаванда в кабинете; фирменный
   градиент lavender→blue на действиях; шрифт RF Dewi Extended. Всё self-hosted, CSP 'self'.
   Историческое имя класса `.serif` сохранено (JS его ставит на заголовки) — теперь это
   дисплейный стиль RF Dewi, не засечный шрифт. */

/* -- vendored display/UI type: RF Dewi Extended (Latin+Cyrillic subset) ---- */
@font-face { font-family: "RF Dewi Extended"; font-weight: 400; font-style: normal; font-display: swap;
  src: url(assets/fonts/rfdewi-ext-400.woff2) format("woff2"); }
@font-face { font-family: "RF Dewi Extended"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(assets/fonts/rfdewi-ext-600.woff2) format("woff2"); }
@font-face { font-family: "RF Dewi Extended"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(assets/fonts/rfdewi-ext-700.woff2) format("woff2"); }
@font-face { font-family: "RF Dewi Extended"; font-weight: 800; font-style: normal; font-display: swap;
  src: url(assets/fonts/rfdewi-ext-800.woff2) format("woff2"); }

:root {
  /* fixed brand ---------------------------------------------------------- */
  --navy-1: #0E1330;      /* deepest */
  --navy-2: #15172A;      /* dark app bg */
  --lav-bg: #E2E8F1;      /* light app bg */
  --ink: #212E4C;         /* primary navy text (on light) */
  --ink-dim: #59687A;
  --ink-mute: #98ADBF;
  --on-dark: #EDF0FA;
  --grad-a: #B68FFF;      /* lavender — left of the signature gradient */
  --grad-b: #6395F8;      /* sky-blue — right */
  --grad: linear-gradient(96deg, var(--grad-a) 0%, var(--grad-b) 100%);
  /* The bright brand gradient is decorative. Interactive surfaces use a deeper pair so
     white labels keep WCAG contrast across the entire gradient, not only at one endpoint. */
  --grad-action: linear-gradient(96deg, #8056DB 0%, #3567D3 100%);
  --accent: #6395F8;      /* solid accent: links, active */
  --accent-2: #7CAEF5;
  --accent-soft: rgba(99,149,248,0.16);
  --danger: #E8877E;
  --font: "RF Dewi Extended", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Shared type scale: deliberately a little generous for an older audience while keeping
     controls and dense metadata compact enough for 280px phones. */
  --type-icon: 10px;
  --type-micro: 12px;
  --type-small: 13.5px;
  --type-body: 15px;
  --type-control: 16px;
  --type-lead: 17px;
  --type-title: clamp(19px, 1.2vw + 13px, 22px);
  --type-heading: 26px;
  --pill: 999px;
  --r-card: 24px;
  --r-lg: 26px;
  --r-sm: 16px;

  /* default (boot + dark surfaces) semantic set */
  --bg: var(--navy-2);
  --card: #20243F;
  --card-2: #282D49;
  --text: var(--on-dark);
  --text-2: #C3CBE0;
  --text-dim: #98ADBF;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.15);
  --input: #191D38;
  --shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* dark surfaces (auth) */
.gate {
  --bg: var(--navy-2); --card: #20243F; --card-2: #282D49;
  --text: var(--on-dark); --text-2: #C6CDE1; --text-dim: #98ADBF;
  --line: rgba(255,255,255,0.08); --line-2: rgba(255,255,255,0.15);
  --input: #191D38; --shadow: 0 24px 60px rgba(0,0,0,0.42);
}
/* light surfaces (cabinet shell + modal over it) */
.shell, .modal-back {
  --bg: var(--lav-bg); --card: #FFFFFF; --card-2: #F4F7FE;
  --text: var(--ink); --text-2: #3E4B6E; --text-dim: #516073;
  --line: rgba(33,46,76,0.10); --line-2: rgba(33,46,76,0.18);
  --input: #FFFFFF; --shadow: 0 14px 40px rgba(33,46,76,0.10);
  --accent: #3F66C8; --accent-2: #3459B7; --accent-soft: rgba(63,102,200,0.14);
  --danger: #B9403A;
  color: var(--text);
}

* { box-sizing: border-box; }
html, body, a, button, input, textarea, select, [role="button"] { touch-action: manipulation; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--navy-2); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
body:has(.shell) { background: var(--lav-bg); }
body.has-shell { background: var(--lav-bg); }
/* Solid navy base for the auth screens (also the color iOS samples for the status-bar tint). */
body:has(.gate) { background: var(--navy-2); }
body.has-gate { background: var(--navy-2); }
/* The twilight glows live on a FIXED full-screen layer, NOT the body background: a viewport-sized
   gradient painted on <body> goes stale/clipped on iOS when the keyboard resizes the viewport
   (leaving solid navy where the gradient should be). A fixed layer is anchored to the layout
   viewport, so it always covers the whole screen — full width and height — through keyboard
   show/hide. It sits behind #app (z-index:1) and is purely decorative. */
body:has(.gate)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72vw 62vh at 12% -8%, rgba(182,143,255,0.22), transparent 62%),
    radial-gradient(74vw 68vh at 92% 108%, rgba(99,149,248,0.22), transparent 60%),
    var(--navy-2);
  background-repeat: no-repeat;
}
body.has-gate::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72vw 62vh at 12% -8%, rgba(182,143,255,0.22), transparent 62%),
    radial-gradient(74vw 68vh at 92% 108%, rgba(99,149,248,0.22), transparent 60%),
    var(--navy-2);
  background-repeat: no-repeat;
}
a { color: var(--accent); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

#app { position: relative; z-index: 1; min-height: 100%; }

/* boot */
.boot { min-height: 100vh; min-height: 100svh; display: grid; place-items: center;
  background: radial-gradient(600px 480px at 50% 34%, rgba(99,149,248,0.14), transparent 70%), var(--navy-2); }
.boot-dot { width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 40px 6px rgba(123,120,247,0.5);
  animation: orbpulse 1.5s ease-in-out infinite; }
@keyframes orbpulse { 0%,100%{opacity:.55;transform:scale(.9)} 50%{opacity:1;transform:scale(1.05)} }

/* -- typography -------------------------------------------------------- */
.serif, h1, h2, h3 { margin: 0; font-family: var(--font); font-weight: 800; letter-spacing: -0.015em;
  line-height: 1.08; color: var(--text); overflow-wrap: anywhere; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent);
  text-transform: none; }
.muted { color: var(--text-dim); }

/* brand mark — the YBURLAN cube, painted in the signature gradient via an alpha mask
   (resolution-independent up to 8K, reads on both dark and light surfaces). */
.mark { display: inline-block; width: 40px; height: 38px; flex: none;
  background: url(assets/img/logo-cube.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 10px rgba(123,120,247,0.35)); }
@supports (-webkit-mask: url(assets/img/logo-cube.png)) or (mask: url(assets/img/logo-cube.png)) {
  .mark { background: var(--grad);
    -webkit-mask: url(assets/img/logo-cube.png) center / contain no-repeat;
            mask: url(assets/img/logo-cube.png) center / contain no-repeat; }
}

/* -- buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  max-width: 100%; min-width: 0; min-height: 54px; height: auto; padding: 12px 26px; border-radius: var(--pill); border: none;
  font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em;
  line-height: 1.2; text-align: center; overflow-wrap: anywhere;
  transition: transform .14s ease, filter .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-action); color: #fff; box-shadow: 0 12px 26px rgba(53,103,211,0.28); }
.btn-primary:hover { filter: saturate(1.08); transform: translateY(-1px); box-shadow: 0 16px 30px rgba(53,103,211,0.36); }
.btn-primary:disabled { background: #A6AEC8; color: #EFF2FA; box-shadow: none; cursor: not-allowed; transform: none; filter: none; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line-2); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-block { width: 100%; }

/* Cabinet-owned entry point for Bitrix24 support. Vendor code runs only in a cross-origin,
   sandboxed frame after an explicit click on our branded control. */
.cabinet-support-launcher {
  position: fixed; z-index: 35; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); display: inline-flex; align-items: center;
  gap: 10px; min-height: 58px; padding: 7px 18px 7px 7px; border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--pill); background: rgba(14,19,48,.94); color: #F5F7FF;
  box-shadow: 0 16px 42px rgba(4,8,28,.34), inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: var(--type-body); line-height: 1; font-weight: 700; letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cabinet-support-launcher[hidden], body.has-shell .cabinet-support-launcher,
body.player-active .cabinet-support-launcher { display: none !important; }
.cabinet-support-launcher:hover, .cabinet-support-launcher:focus-visible {
  transform: translateY(-2px); border-color: rgba(142,169,255,.52);
  box-shadow: 0 20px 48px rgba(4,8,28,.42), 0 0 0 4px rgba(99,149,248,.12);
}
.cabinet-support-launcher:active { transform: translateY(0); }
.cabinet-support-launcher:disabled { cursor: wait; opacity: .82; transform: none; }
.cabinet-support-launcher-icon { width: 44px; height: 44px; display: grid; place-items: center;
  flex: none; border-radius: 50%; background: var(--grad-action); color: #fff;
  box-shadow: 0 8px 20px rgba(53,103,211,.35); }
.cabinet-support-launcher-icon svg { width: 23px; height: 23px; }
.cabinet-support-launcher[aria-busy="true"] .cabinet-support-launcher-icon {
  animation: support-opening 1.05s ease-in-out infinite alternate; }
@keyframes support-opening { to { transform: scale(.9); opacity: .72; } }
.cabinet-support-frame-shell { position: fixed; z-index: 120; right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom)); width: min(435px, calc(100vw - 40px));
  height: min(640px, calc(100dvh - 40px)); overflow: hidden; border: 1px solid rgba(255,255,255,.15);
  border-radius: 22px; background: #15172A; box-shadow: 0 24px 72px rgba(4,8,28,.48);
  visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(10px) scale(.985);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
.cabinet-support-frame-shell.is-open { visibility: visible; opacity: 1; pointer-events: auto;
  transform: none; transition-delay: 0s; }
.cabinet-support-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }

/* -- fields ------------------------------------------------------------ */
.field { width: 100%; min-height: 54px; height: auto; padding: 14px 18px; border-radius: var(--r-sm);
  background: var(--input); border: 1.5px solid var(--line-2); color: var(--text);
  font-size: 16px; line-height: 1.25; font-weight: 500; transition: border-color .16s ease, box-shadow .16s ease; }
.field::placeholder { color: var(--text-dim); font-weight: 400; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(232,135,126,.14); }
.field-error { margin: -5px 2px 2px; color: #FFD0CC; font-size: 13px; line-height: 1.35; font-weight: 600; }

/* =====================================================================
   GATE — login (dark)
   ===================================================================== */
.gate { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto;
  max-width: 1080px; margin: 0 auto; padding: 26px clamp(20px, 5vw, 40px);
  background: transparent; }
.gate-top { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gate-brand { min-width: 0; display: flex; align-items: center; gap: 12px; }
.wordmark { min-width: 0; overflow-wrap: normal; font-family: var(--font); font-size: 16px;
  font-weight: 800; letter-spacing: -0.01em; color: var(--on-dark); }
.wordmark small { display: block; font-size: 11.5px; letter-spacing: .01em; color: var(--text-dim); font-weight: 500; margin-top: 2px; }
.wordmark small span { display: block; white-space: nowrap; }
.login-language-switcher { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.055); }
.login-language-switcher button { min-height: 38px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-dim); font: inherit; font-size: 12px;
  font-weight: 750; white-space: nowrap; }
.login-language-switcher button:hover, .login-language-switcher button:focus-visible {
  background: rgba(255,255,255,.08); color: var(--on-dark); outline: 0; }
.login-language-switcher button:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.login-language-switcher button.is-active { background: var(--accent); color: #fff; }
.login-language-flag { width: 23px; height: 16px; display: inline-block; flex: 0 0 auto;
  overflow: hidden; border: 1px solid rgba(255,255,255,.28); border-radius: 4px;
  background: #202641; box-shadow: 0 1px 3px rgba(4,8,28,.22); }
.login-language-flag svg { display: block; width: 100%; height: 100%; }
.login-language-code { display: grid; place-items: center; color: #F4F5FA;
  font-size: 8px; font-weight: 850; letter-spacing: .04em; }
.login-language-switcher button:not(.is-active) .login-language-flag { opacity: .78;
  filter: saturate(.78); }
.login-language-switcher button.is-active .login-language-flag {
  border-color: rgba(255,255,255,.58); opacity: 1; filter: none; }

.gate-center { min-width: 0; display: grid; place-items: center; padding: 24px 0; }
.card { min-width: 0; width: 100%; max-width: 460px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 4vw, 34px); box-shadow: var(--shadow); }
.gate h1 { font-size: clamp(28px, 6vw, 38px); }
.gate .lead { color: var(--text-2); font-size: 16px; line-height: 1.45; margin: 14px 0 24px; }
.gate form { display: grid; gap: 12px; }
.gate .fineprint { color: var(--text-dim); font-size: 13px; margin-top: 18px; line-height: 1.5; }
.gate-foot { color: var(--text-dim); font-size: 12.5px; text-align: center; }

/* "check your email" */
.sent { display: grid; gap: 15px; }
.sent-badge { width: 54px; height: 54px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: rgba(99,149,248,0.16); color: var(--accent-2); }
.sent .lead b { color: var(--on-dark); }
.login-code h1 { font-size: clamp(28px, 6vw, 34px); }
.login-code .lead { margin-block: 0 4px; overflow-wrap: anywhere; }
.login-code-field { width: 100%; min-height: 76px; padding: 12px 14px 12px 22px;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--input);
  color: var(--on-dark); outline: 0; font: 750 clamp(30px, 8vw, 42px)/1 var(--font);
  font-variant-numeric: tabular-nums; letter-spacing: clamp(.16em, 1.2vw, .28em);
  text-align: center; caret-color: var(--accent-2); transition: border-color .16s ease,
  box-shadow .16s ease; }
.login-code-field:focus { border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.login-code-field[aria-invalid="true"] { border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(232,135,126,.14); }
.login-code-status { min-height: 2.7em; margin: -2px 2px 0; color: var(--text-dim);
  font-size: 13px; line-height: 1.35; font-weight: 600; text-align: center; }
.login-code-status[data-kind="error"] { color: #FFD0CC; }
.login-code-resend { min-height: 32px; margin-top: 0 !important; text-align: center; }
.linkbtn { display: inline-flex; align-items: center; min-height: 32px; margin-block: -5px;
  background: none; border: none; padding: 4px; color: var(--accent); font-weight: 700; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn:disabled { color: var(--text-dim); cursor: default; text-decoration: none; }

/* =====================================================================
   SHELL — cabinet (light); dark rail on desktop, dark header on mobile
   ===================================================================== */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; min-height: 100svh; background: var(--bg); }
.rail { min-width: 0; overflow-x: hidden; overflow-y: auto; background: var(--navy-1);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh;
  --text: var(--on-dark); --text-2: #C6CDE1; --text-dim: #8B96B4; --line-2: rgba(255,255,255,0.12); }
.rail-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 22px; }
.rail-brand .wordmark { min-width: 0; font-size: var(--type-body); line-height: 1.08; }
.rail-brand .wordmark small { display: block; max-width: 170px; margin-top: 4px;
  color: #929DB8; font-size: var(--type-micro); line-height: 1.25; font-weight: 600; }
.nav { min-width: 0; width: 100%; display: grid; gap: 4px; }
.nav-item { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 13px;
  padding: 12px 13px; border-radius: 14px; overflow: hidden;
  color: var(--text-2); background: transparent; border: none; text-align: left; width: 100%;
  font-weight: 600; font-size: 14.5px; transition: background .14s ease, color .14s ease; }
.nav-item > span:not(.nav-soon) { min-width: 0; flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: var(--grad-action); color: #fff; box-shadow: 0 10px 22px rgba(53,103,211,0.30); }
.nav-item.active .nav-ic { color: #fff; }
.nav-item[disabled] { color: #5A6485; cursor: default; }
.nav-item[disabled]:hover { background: transparent; color: #5A6485; }
.nav-ic { width: 20px; height: 20px; flex: none; color: currentColor; }
.icon-settings { transform: scale(.9); transform-origin: center; }
.nav-soon { flex: none; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8B96B4; border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; padding: 2px 4px; }
.rail-spacer { flex: 1; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 22px clamp(20px, 4vw, 44px);
  position: sticky; top: 0; z-index: 5; width: 100%; max-width: 1160px; margin-inline: auto;
  background: rgba(226,232,241,.90);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
/* Greeting pushes everything after it (search stub + profile chip) to the right — works whether
   or not the search stub is shown. */
.hello { min-width: 0; margin-right: auto; overflow-wrap: break-word; hyphens: auto; }
.hello { font-family: var(--font); font-weight: 800; font-size: 21px; letter-spacing: -0.015em; color: var(--text); }
.hello-greeting-short { display: none; hyphens: none; overflow-wrap: normal; }
.hello .name { color: var(--accent); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hello .name { background: var(--grad-action); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.search-stub { display: flex; align-items: center; gap: 9px; height: 44px;
  padding: 0 16px; border-radius: var(--pill); color: var(--text-dim); font-size: 13.5px; font-weight: 500;
  background: var(--card); border: 1px solid var(--line); white-space: nowrap; }
/* The search placeholder only fits alongside the greeting + profile chip on roomy desktops. */
@media (max-width: 1280px) { .search-stub { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; height: auto; padding: 5px 6px 5px 15px;
  border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); flex: none;
  transition: box-shadow .16s ease; }
.chip:hover { box-shadow: 0 6px 18px rgba(33,46,76,0.10); }
.chip .who { display: grid; line-height: 1.2; text-align: right; }
.chip .who b { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--text); }
.chip .who span { font-size: var(--type-micro); color: var(--accent); font-weight: 600; }
.chip .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  overflow: hidden; background: var(--grad-action); color: #fff;
  font-size: 15px; line-height: 1; font-weight: 800; }

.content { padding: clamp(18px, 2.7vw, 32px) clamp(20px, 4vw, 44px) 60px; max-width: 1160px; width: 100%; margin-inline: auto; }

.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  margin: 0 0 20px; gap: 16px; }
.sec-head h2 { font-size: 26px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* empty state */
.empty { border-radius: var(--r-card); padding: clamp(34px, 6vw, 60px); text-align: center;
  background: var(--card); box-shadow: var(--shadow); }
.empty .orb-lg { width: 84px; height: 84px; margin: 0 auto 22px; object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(123,120,247,0.4)); }
.empty h3 { font-size: 22px; margin-bottom: 12px; }
.empty p { color: var(--text-2); max-width: 46ch; margin: 0 auto; font-weight: 500; }
.empty .hint { color: var(--text-dim); font-size: 13.5px; margin-top: 18px; }

/* Help is a real cabinet destination for authenticated users, not another floating layer. */
.support-view { min-width: 0; }
.support-card { position: relative; overflow: hidden; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(18px, 3vw, 30px);
  padding: clamp(24px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--card); box-shadow: var(--shadow); }
.support-card::after { content: ""; position: absolute; width: 260px; height: 260px;
  right: -130px; top: -150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(99,149,248,.18), rgba(182,143,255,0) 70%); }
.support-card-icon { position: relative; z-index: 1; width: 72px; height: 72px;
  display: grid; place-items: center; border-radius: 22px; background: var(--grad-action);
  color: #fff; box-shadow: 0 14px 30px rgba(53,103,211,.24); }
.support-card-icon .nav-ic { width: 32px; height: 32px; }
.support-copy { position: relative; z-index: 1; min-width: 0; }
.support-copy h3 { margin-bottom: 9px; font-size: var(--type-title); }
.support-copy p { max-width: 62ch; margin: 0; color: var(--text-2);
  font-size: var(--type-body); line-height: 1.55; font-weight: 500; }
.support-open { position: relative; z-index: 1; min-width: 190px; }
.support-open[aria-busy="true"] { cursor: wait; filter: saturate(.78); }
.support-diagnostics { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 18px 24px; margin-top: 18px; padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.support-diagnostics-copy { min-width: 0; }
.support-diagnostics-copy h3 { margin-bottom: 8px; font-size: var(--type-title); }
.support-diagnostics-copy p { max-width: 74ch; margin: 0; color: var(--text-2);
  font-size: var(--type-body); line-height: 1.55; font-weight: 500; }
.support-diagnostics-run { min-width: 220px; }
.support-diagnostics-run[aria-busy="true"] { cursor: wait; opacity: .72; }
.support-diagnostics-status { grid-column: 1 / -1; min-height: 1.5em; margin: 0;
  color: var(--text-2); font-size: var(--type-small); font-weight: 650; }
.support-diagnostics-report { grid-column: 1 / -1; width: 100%; max-height: 390px; margin: 0;
  padding: 18px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--line); border-radius: 14px; background: var(--input);
  color: var(--text); font: 600 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", monospace; user-select: text; -webkit-user-select: text; }
.support-diagnostics-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.support-diagnostics-actions[hidden], .support-diagnostics-report[hidden] { display: none; }

/* schedule A+ */
.schedule-view { min-width: 0; }
.schedule-loading, .schedule-empty { min-height: 112px; display: grid; place-items: center;
  padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--text-dim); font-size: 13px; font-weight: 700; text-align: center; }
.schedule-heading { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; margin-bottom: 22px; }
.schedule-heading h2 { font-size: var(--type-heading); line-height: 1.1; }
.schedule-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  min-width: 0; }
.schedule-search { position: relative; min-width: min(290px, 30vw); }
.schedule-search input, .schedule-group-filter select { height: 46px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text);
  font: inherit; font-size: var(--type-control); font-weight: 500; outline: 0; }
.schedule-search input { width: 100%; padding: 0 14px 0 39px; }
.schedule-search input::placeholder { color: var(--text-dim); }
.schedule-search input:focus, .schedule-group-filter select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.schedule-search-icon { position: absolute; z-index: 1; left: 13px; top: 50%;
  width: 17px; height: 17px; transform: translateY(-50%); color: var(--text-dim); }
.schedule-search-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; }
.schedule-group-filter select { max-width: 220px; padding: 0 32px 0 12px; }
.schedule-search-results { position: absolute; z-index: 12; top: calc(100% + 7px); left: 0;
  width: min(420px, calc(100vw - 40px)); overflow: hidden; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); box-shadow: 0 18px 42px rgba(21,28,57,.18); }
.schedule-search-results button { width: 100%; display: grid; gap: 3px; padding: 11px 13px;
  border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text);
  text-align: left; }
.schedule-search-results button:last-child { border-bottom: 0; }
.schedule-search-results button:hover, .schedule-search-results button:focus-visible {
  background: var(--accent-soft); outline: 0; }
.schedule-search-results button span { overflow-wrap: anywhere; font-size: var(--type-body); font-weight: 600; }
.schedule-search-results button small { color: var(--text-dim); font-size: var(--type-small); font-weight: 500; }
.schedule-search-empty { padding: 15px; color: var(--text-dim); font-size: var(--type-small); }
.schedule-section-title { margin: 0 0 9px; color: var(--text-dim); font-size: var(--type-small);
  font-weight: 700; }
.schedule-next { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center; gap: 20px; min-height: 130px; margin-bottom: 24px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  box-shadow: 0 10px 28px rgba(33,46,76,.08); }
.schedule-next.is-live, .schedule-row.is-live { border-color: rgba(185,64,71,.24);
  background: linear-gradient(104deg, rgba(185,64,71,.075), rgba(185,64,71,0) 54%), var(--card);
  box-shadow: 0 12px 30px rgba(123,43,51,.1); }
.schedule-calendar { width: 94px; height: 104px; overflow: hidden; display: grid;
  grid-template-rows: 24px minmax(0, 1fr) 15px 21px; align-self: center; border: 1px solid var(--line-2);
  border-radius: 15px; background: linear-gradient(150deg, var(--card-2), var(--card));
  color: var(--text); text-align: center; text-decoration: none;
  box-shadow: inset 0 1px rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums; }
.schedule-calendar-month { min-width: 0; overflow: hidden; display: grid; place-items: center;
  padding: 1px 4px 0; background: var(--grad-action); color: #fff; font-size: 10px; line-height: 1;
  font-weight: 800; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap;
  box-shadow: inset 0 -1px rgba(255,255,255,.13); }
.schedule-calendar-day { display: grid; place-items: center; padding-top: 2px; font-size: 37px;
  line-height: 1; font-weight: 700; letter-spacing: -.045em; }
.schedule-calendar-weekday { color: var(--text-dim); font-size: 11px; line-height: 1;
  font-weight: 800; letter-spacing: .075em; }
.schedule-calendar-time { display: grid; place-items: center; border-top: 1px solid var(--line);
  background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 1;
  font-weight: 800; letter-spacing: .015em; }
.is-live .schedule-calendar { border-color: rgba(185,64,71,.32);
  box-shadow: inset 0 1px rgba(255,255,255,.08); }
.is-live .schedule-calendar-month { background: linear-gradient(96deg, #A52F3A, #CB5156); }
.is-live .schedule-calendar-time { background: rgba(185,64,71,.1); color: var(--danger); }
.schedule-event-copy { min-width: 0; display: grid; gap: 4px; align-content: center; }
.schedule-event-copy h3 { margin: 0; overflow-wrap: anywhere; font-size: var(--type-lead);
  line-height: 1.28; font-weight: 800; }
.schedule-event-copy p { margin: 0; color: var(--text-dim); font-size: var(--type-small);
  line-height: 1.35; font-weight: 600; }
.schedule-next-side, .schedule-row-side { display: grid; justify-items: end; gap: 7px; text-align: right; }
.schedule-next-side:empty { display: none; }
.schedule-agenda { display: grid; gap: 10px; }
.schedule-row { display: grid; grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center; gap: 18px; min-height: 122px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); box-shadow: 0 7px 20px rgba(33,46,76,.045);
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.schedule-row.is-highlighted { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.schedule-row-side:empty { display: none; }
.schedule-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 30px;
  max-width: 180px; padding: 4px 9px; border-radius: var(--pill); background: var(--accent-soft);
  color: var(--accent); font-size: 12px; line-height: 1.25; font-weight: 800; text-align: center; }
.schedule-badge.quiet { background: var(--card-2); color: var(--text-dim); }
.schedule-badge.makeup { background: rgba(69,183,132,.15); color: #277556; }
.schedule-badge.missed { background: rgba(232,135,126,.15); color: #A44C46; }
.schedule-live-pulse { width: 8px; height: 8px;
  flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(255,255,255,.13);
  animation: schedule-live-pulse 1.8s ease-in-out infinite; }
@keyframes schedule-live-pulse { 0%, 100% { opacity: .62; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.08); } }
.schedule-live-entry { display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; min-height: 46px; padding: 8px 14px; border-radius: var(--pill); background: var(--grad-action);
  color: #fff; font-size: 14px; line-height: 1.2; font-weight: 700; text-decoration: none;
  box-shadow: 0 7px 18px rgba(75,99,224,.2); }
.schedule-live-entry.is-live { background: linear-gradient(96deg, #A52F3A, #CB5156);
  box-shadow: 0 8px 20px rgba(165,47,58,.24); }
.schedule-live-entry:hover { filter: brightness(1.04); }
.schedule-live-entry:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.schedule-entry-label-short { display: none; }

@media (max-width: 900px) {
  .schedule-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .schedule-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .schedule-search { min-width: 0; }
}

@media (max-width: 760px) {
  .schedule-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .schedule-heading h2 { font-size: 25px; }
  .schedule-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .schedule-search { grid-column: 1 / -1; min-width: 0; }
  .schedule-group-filter select { width: 100%; max-width: none; }
  .schedule-next, .schedule-row { grid-template-columns: 78px minmax(0, 1fr);
    grid-template-areas: "date copy" "date side"; align-items: start; gap: 9px 14px;
    min-height: 0; padding: 13px; }
  .schedule-next .schedule-calendar, .schedule-row .schedule-calendar { grid-area: date; }
  .schedule-next .schedule-event-copy, .schedule-row .schedule-event-copy { grid-area: copy; }
  .schedule-next-side, .schedule-row-side { grid-area: side; width: 100%; justify-items: start;
    text-align: left; }
  .schedule-calendar { width: 78px; height: 94px; grid-template-rows: 22px minmax(0, 1fr) 13px 19px;
    border-radius: 13px; }
  .schedule-calendar-month { font-size: 9px; }
  .schedule-calendar-day { font-size: 33px; }
  .schedule-calendar-weekday { font-size: 10px; }
  .schedule-calendar-time { font-size: 10px; }
  .schedule-event-copy h3 { font-size: var(--type-lead); }
  .schedule-live-entry { width: min(100%, 240px); }
}

@media (max-width: 480px) {
  .schedule-next, .schedule-row { gap: 8px 12px; }
  .schedule-live-entry { width: 100%; }
}

@media (max-width: 360px) {
  .schedule-tools { grid-template-columns: minmax(0, 1fr) 96px; }
  .schedule-group-filter select { font-size: 16px; }
  .schedule-next, .schedule-row { grid-template-columns: 68px minmax(0, 1fr); gap: 8px 10px;
    padding: 11px; }
  .schedule-calendar { width: 68px; height: 84px; grid-template-rows: 20px minmax(0, 1fr) 12px 18px;
    border-radius: 12px; }
  .schedule-calendar-month { font-size: 8px; letter-spacing: .035em; }
  .schedule-calendar-day { font-size: 29px; }
  .schedule-calendar-weekday { font-size: 9px; }
  .schedule-calendar-time { font-size: 9px; }
  .schedule-event-copy h3 { font-size: 16px; line-height: 1.25; }
  .schedule-live-entry { padding-inline: 10px; font-size: 13px; }
  .schedule-entry-label { display: none; }
  .schedule-entry-label-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-live-pulse { animation: none; }
}

/* lessons */
.lessons-loading { background: var(--card); border-radius: var(--r-card); padding: 28px;
  box-shadow: var(--shadow); color: var(--text-dim); font-weight: 600; }
.count-pill { min-width: 34px; min-height: 30px; height: auto; display: inline-grid; place-items: center;
  padding: 5px 12px; border-radius: var(--pill); background: var(--card); color: var(--accent);
  flex: none; font-size: 13px; font-weight: 800; box-shadow: 0 6px 16px rgba(33,46,76,0.08); }
.lesson-list { display: grid; gap: 12px; }
.lesson-card { display: grid; grid-template-columns: 176px minmax(0, 1fr) minmax(230px, auto);
  grid-template-areas: "preview main state";
  align-items: center; gap: 18px; min-height: 132px; padding: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 10px 28px rgba(33,46,76,0.08); }
.lesson-preview { grid-area: preview; position: relative; width: 176px; aspect-ratio: 16 / 9;
  overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: var(--card-2);
  color: var(--accent); isolation: isolate; }
.lesson-preview img, .lesson-preview video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 180ms ease, filter 220ms ease, transform 220ms ease; }
.lesson-preview img { filter: none; transform: scale(1.01); }
.lesson-preview video { z-index: 1; opacity: 0; filter: none; transform: scale(1.01); }
.lesson-preview::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: rgba(75,78,166,0.24);
  box-shadow: inset 0 -42px 48px rgba(14,19,48,0.28), inset 0 0 0 1px rgba(255,255,255,0.12); }
.lesson-preview.is-playing img { opacity: 0; }
.lesson-preview.is-playing video { opacity: 1; }
.lesson-preview.is-preview-blurred img,
.lesson-preview.is-preview-blurred video,
.lesson-preview.is-autoplay-blocked img,
.lesson-preview.is-autoplay-blocked video { filter: blur(11px); transform: scale(1.12); }
.lesson-preview.is-autoplay-blocked { cursor: pointer; }
.lesson-preview-play { position: absolute; z-index: 3; inset: 50% auto auto 50%; width: 38px;
  height: 38px; display: none; place-items: center; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,0.88); box-shadow: 0 5px 16px rgba(14,19,48,0.18);
  transition: opacity 160ms ease, transform 160ms ease; }
.lesson-preview-play .nav-ic { width: 18px; height: 18px; margin-left: 2px; }
.lesson-preview.is-autoplay-blocked .lesson-preview-play { display: grid; }
.lesson-preview.is-playing .lesson-preview-play { display: none; }
.lesson-preview-placeholder { position: absolute; inset: 0; display: grid; place-items: center;
  z-index: 1; color: var(--text-dim); opacity: 0.34; }
.lesson-preview-placeholder .nav-ic { width: 30px; height: 30px; }
.lesson-preview.no-media { cursor: default; }
.lesson-preview.no-media .lesson-preview-play { display: none; }
.lesson-preview:focus-visible { outline: 3px solid rgba(112,134,255,0.35); outline-offset: 3px; }
.lesson-main { grid-area: main; min-width: 0; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.lesson-meta span { display: inline-flex; align-items: center; min-height: 27px; height: auto; padding: 5px 10px;
  border-radius: var(--pill); background: var(--card-2); color: var(--text-dim);
  font-size: 12.5px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.lesson-card h3 { overflow-wrap: anywhere; font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.18; letter-spacing: 0; }
.lesson-sub { margin-top: 7px; color: var(--text-dim); font-size: var(--type-small); font-weight: 600; }
.lesson-state { grid-area: state; display: grid; justify-items: stretch; gap: 10px; min-width: 0; }
.lesson-badge { display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 32px; max-width: 100%; padding: 6px 11px; border-radius: var(--pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.status-ready .lesson-badge { background: rgba(69,183,132,0.15); color: #1F7A55; }
.status-expired .lesson-badge { background: rgba(232,135,126,0.14); color: #B65A52; }
.status-processing .lesson-badge, .status-scheduled .lesson-badge {
  background: rgba(33,46,76,0.08); color: var(--text-dim); }
.lesson-badge-preparing { justify-content: center; gap: 9px;
  background: linear-gradient(110deg, rgba(112,134,255,.12), rgba(126,85,229,.1));
  border: 1px solid rgba(112,134,255,.16); color: var(--accent); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.lesson-preparing-icon { width: 19px; height: 19px; display: inline-grid; place-items: center;
  flex: none; border-radius: 50%; background: rgba(112,134,255,.11); }
.lesson-preparing-icon .nav-ic { width: 13px; height: 13px;
  animation: lesson-preparing-spin 1.15s linear infinite; }
.lesson-deadline { width: 100%; justify-self: end; display: flex; align-items: center;
  justify-content: center; flex-wrap: wrap; gap: 2px 5px; min-height: 32px; padding: 6px 11px;
  border-radius: var(--pill); background: rgba(112,134,255,0.13); color: #596392;
  font-size: 12.5px; line-height: 1.3; font-weight: 700; text-align: center; white-space: normal; overflow-wrap: anywhere; }
.deadline-icon { display: inline-flex; align-items: center; }
.deadline-icon .nav-ic { width: 15px; height: 15px; }
.deadline-icon .deadline-flame { display: none; }
.deadline-separator { color: #A5ABC3; }
.deadline-countdown { font-weight: 800; }
.lesson-deadline.deadline-warning { background: rgba(213,150,49,0.15); color: #93631C; }
.lesson-deadline.deadline-critical { background: rgba(216,87,79,0.14); color: #B9403A; }
.deadline-critical .deadline-icon .deadline-clock { display: none; }
.deadline-critical .deadline-icon .deadline-flame { display: block; animation: deadline-icon-pulse 1.5s ease-in-out infinite; }
.deadline-watch { background: rgba(69,183,132,0.15); color: #32795A; }
.deadline-recovery { background: rgba(214,123,53,0.14); color: #9A5A29; }
.recovery-balance { color: #9A5A29; }
.recovery-balance { font-weight: 800; }
.lesson-action { min-height: 44px; width: 100%; min-width: 0; padding: 10px 18px; font-size: 13.5px; }
@keyframes deadline-icon-pulse { 50% { transform: scale(1.12); } }
@keyframes lesson-preparing-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) and (min-width: 481px) {
  .lesson-card { grid-template-columns: 156px minmax(0, 1fr);
    grid-template-areas: "preview main" "preview state"; align-items: start; }
  .lesson-preview { width: 156px; align-self: start; }
  .lesson-state { justify-items: stretch; grid-template-columns: 1fr; }
  .lesson-deadline { justify-content: center; }
  .recovery-settings { grid-template-columns: 1fr 1fr; }
  .recovery-settings-copy { grid-column: 1 / -1; }
}

/* Compact desktop: keep the rail, but let lesson state use the roomy second row instead of
   crushing titles into a narrow third column. */
@media (min-width: 1025px) and (max-width: 1180px) {
  .shell { grid-template-columns: 220px 1fr; }
  .rail { padding-inline: 12px; }
  .rail-brand .wordmark small { font-size: 11px; }
  .nav-item { gap: 10px; padding-inline: 10px; }
  .nav-soon { display: none; }
  .lesson-card { grid-template-columns: 156px minmax(0, 1fr);
    grid-template-areas: "preview main" "preview state"; align-items: start; }
  .lesson-preview { width: 156px; align-self: start; }
  .lesson-state { grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr); align-items: center; }
  .lesson-state > :only-child { grid-column: 1 / -1; }
}

@media (min-width: 1025px) and (max-width: 1120px) {
  .schedule-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .schedule-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .schedule-search { min-width: 0; }
}

@supports not (aspect-ratio: 16 / 9) {
  .lesson-preview { height: 99px; }
  @media (max-width: 480px) {
    .lesson-preview { height: 0; padding-top: 56.25%; }
  }
}

/* Short viewports keep the login action in reach. */
@media (max-height: 700px) {
  .gate { padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .gate-center { padding-block: 16px; }
  .gate .card { padding: 22px; }
  .gate h1 { font-size: clamp(27px, 5vw, 34px); }
  .gate .lead { font-size: 14.5px; margin: 10px 0 16px; }
  .gate .fineprint { margin-top: 13px; font-size: 12px; }
}

@media (min-width: 520px) and (max-height: 520px) {
  .gate { grid-template-columns: minmax(168px, 220px) minmax(0, 1fr); grid-template-rows: 1fr;
    align-items: center; gap: clamp(16px, 4vw, 40px); padding-block: calc(14px + env(safe-area-inset-top))
      calc(14px + env(safe-area-inset-bottom)); }
  .gate-top { grid-column: 1; align-self: center; flex-direction: column; align-items: stretch;
    justify-content: center; gap: 16px; }
  .gate-brand { gap: 10px; }
  .login-language-switcher { width: 100%; min-width: 0; }
  .login-language-switcher button { flex: 1 1 0; min-width: 0; gap: 4px;
    padding-inline: 4px; font-size: 10.5px; }
  .login-language-flag { width: 20px; height: 14px; }
  .gate-center { grid-column: 2; min-height: 0; padding: 0; }
  .gate-foot { display: none; }
  .gate .card { max-width: 460px; padding: 18px 22px; }
  .gate h1 { font-size: 29px; line-height: 1.04; }
  .gate .lead { font-size: 13.5px; line-height: 1.38; margin: 8px 0 12px; }
  .gate form { gap: 9px; }
  .gate .field, .gate .btn { min-height: 46px; }
  .gate .fineprint { margin-top: 10px; font-size: 11.5px; line-height: 1.35; }
  .gate .login-code { gap: 8px; }
  .gate .login-code .sent-badge { display: none; }
  .gate .login-code .lead { margin-block: 0 2px; }
  .gate .login-code-field { min-height: 54px; padding-block: 8px;
    font-size: 30px; letter-spacing: .2em; }
  .gate .login-code-status { min-height: 1.35em; font-size: 11.5px; }
  .gate .login-code-resend { min-height: 26px; margin-top: 0; }
  .gate .lang-card { max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .gate .lang-card { padding: 12px 14px; }
  .gate .lang-card .eyebrow { font-size: 10px; }
  .gate .lang-card h1 { font-size: 24px; }
  .gate .lang-card .lead { margin: 4px 0 6px; font-size: 12.5px; line-height: 1.3; }
  .gate .lang-card .lang-search { margin: 2px 0 6px; }
  .gate .lang-card .field { min-height: 42px; padding-block: 9px; }
  .gate .lang-card .lang-list { min-height: 40px; gap: 4px; }
  .gate .lang-card .lang-opt { min-height: 38px; padding-block: 6px; }
  .gate .lang-card > .btn { min-height: 42px; margin-top: 6px !important; }
  .cabinet-support-launcher { left: max(18px, env(safe-area-inset-left)); right: auto;
    bottom: max(16px, env(safe-area-inset-bottom)); }
}

@media (min-width: 520px) and (max-width: 599px) and (max-height: 520px) {
  .gate { grid-template-columns: 168px minmax(0, 1fr); gap: 14px;
    padding-inline: calc(14px + env(safe-area-inset-left))
      calc(14px + env(safe-area-inset-right)); }
  .gate-top .wordmark { display: none; }
  .gate-brand { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lesson-preview img, .lesson-preview video, .lesson-preview-play { transition: none; }
  .lesson-preparing-icon .nav-ic { animation: none; }
}

/* player */
body.player-active { overflow: hidden; background: #080B18; }
.player-pip-retained { position: fixed; left: -10000px; top: 0; width: 1px; height: 1px;
  overflow: hidden; pointer-events: none; }
.player-pip-retained .player-page { width: 1px; height: 1px; }
.shell.player-mode { grid-template-columns: 1fr; min-height: 100vh; background: #080B18; }
.player-mode .rail, .player-mode .topbar, .player-mode .tabbar { display: none; }
.player-mode .main { position: fixed; z-index: 1; left: 0; top: 0; top: var(--player-viewport-top, 0);
  width: 100%; min-height: 0; height: 100vh; height: var(--player-viewport-height, 100vh); overflow: hidden; }
.player-mode .content { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  min-height: 0; margin: 0; padding: 0; overflow: hidden; background: #080B18; border-radius: 0; }
.player-page { width: 100%; height: 100%; min-height: 0; background: #080B18; color: #fff; }
.player-loading { display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: 13px;
  font-weight: 700; }
.player-error-page { width: min(100% - 40px, 520px); height: 100%; margin: auto; display: grid;
  place-content: center; justify-items: center; gap: 14px; text-align: center; }
.player-error-page h3 { font-size: 22px; letter-spacing: 0; }
.player-error-page p { margin: 0; color: rgba(255,255,255,.68); line-height: 1.5; }
.player-error-code { color: rgba(255,255,255,.52); font-size: 13px; letter-spacing: .04em; }
.player-layout { --cabinet-discussion-width: clamp(340px, 26vw, 420px); position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--cabinet-discussion-width); width: 100%; height: 100%;
  transition: grid-template-columns 180ms ease; }
.player-layout.cabinet-discussion-collapsed { --cabinet-discussion-width: 0px; }
.player-stage { min-width: 0; display: grid; place-items: center; overflow: hidden; background: #080B18; }
.video-shell { position: relative; isolation: isolate; width: 100%; height: 100%; max-width: none;
  --video-fit-left: 0px; --video-fit-right: 100%; --video-fit-top: 0px; --video-fit-bottom: 100%;
  --video-edge-left: #11152A; --video-edge-right: #11152A;
  --video-edge-top: #11152A; --video-edge-bottom: #11152A;
  max-height: none; overflow: hidden; background: #080B18; color: #fff; }
@supports (aspect-ratio: 4 / 3) {
  .video-shell { width: min(100%, calc(100vh * 4 / 3));
    width: min(100%, calc(100dvh * 4 / 3));
    height: auto; max-height: none; aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  /* The blurred poster fills the stage behind the fitted 4:3 image and the chat's corner overlap. */
  .video-shell { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
  .player-layout:not(.cabinet-discussion-collapsed) .player-top { padding-right: 28px; }
  .player-layout:not(.cabinet-discussion-collapsed) .player-bottom { padding-right: 28px; }
  .player-layout:not(.cabinet-discussion-collapsed) .player-settings-menu { right: 28px; }
}
.video-backdrop { position: absolute; z-index: 0; inset: -32px; background-color: #11152A;
  background-image: var(--player-poster); background-position: center; background-size: cover;
  filter: blur(26px); transform: scale(1.08); opacity: .54; }
.video-edge-fill { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 220ms ease; }
.video-edge-ready .video-edge-fill { opacity: 1; }
.video-edge { position: absolute; display: block; background: var(--edge-gradient); }
.video-edge-left { --edge-gradient: var(--video-edge-left); inset: 0 auto 0 0;
  width: var(--video-fit-left); -webkit-mask-image: linear-gradient(to right, transparent, #000);
  mask-image: linear-gradient(to right, transparent, #000); }
.video-edge-right { --edge-gradient: var(--video-edge-right); inset: 0 0 0 auto;
  width: calc(100% - var(--video-fit-right)); -webkit-mask-image: linear-gradient(to left, transparent, #000);
  mask-image: linear-gradient(to left, transparent, #000); }
.video-edge-top { --edge-gradient: var(--video-edge-top);
  inset: 0 calc(100% - var(--video-fit-right)) auto var(--video-fit-left);
  height: var(--video-fit-top); -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
  mask-image: linear-gradient(to bottom, transparent, #000); }
.video-edge-bottom { --edge-gradient: var(--video-edge-bottom);
  inset: auto calc(100% - var(--video-fit-right)) 0 var(--video-fit-left);
  height: calc(100% - var(--video-fit-bottom));
  -webkit-mask-image: linear-gradient(to top, transparent, #000);
  mask-image: linear-gradient(to top, transparent, #000); }
.video-shell video { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block;
  object-fit: contain; background: transparent; }
.audio-only-screen { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 14px; background: #0E1224; color: rgba(255,255,255,.82); opacity: 0;
  pointer-events: none; transition: opacity 180ms ease; }
.audio-only-screen .nav-ic { width: 44px; height: 44px; }
.audio-only-screen span { font-size: 13px; font-weight: 700; }
.video-shell.is-audio-only .audio-only-screen { opacity: 1; }
.dub-caption { position: absolute; z-index: 4; left: 50%; bottom: 88px; width: max-content;
  max-width: 88%; max-width: min(88%, 860px);
  max-width: var(--subtitle-max-width, 88%);
  padding: .24em .5em .3em; border-radius: 5px;
  background: rgba(4,6,16,.78); color: #fff; opacity: 0; visibility: hidden;
  transform: translateX(-50%); pointer-events: none; white-space: pre-line;
  text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 24px;
  font-size: var(--subtitle-font-size, 24px);
  font-weight: 600; line-height: 1.2; letter-spacing: 0;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  transition: opacity 80ms linear, visibility 80ms linear; }
.dub-caption.is-visible { opacity: 1; visibility: visible; }
.video-interaction { position: absolute; z-index: 3; inset: 0; touch-action: manipulation; cursor: pointer; }
.player-chrome { z-index: 5; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease; }
.video-shell.controls-visible .player-chrome {
  opacity: 1; visibility: visible; pointer-events: auto; }
.player-top { position: absolute; inset: 0 0 auto; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center; gap: 8px; min-height: 68px; padding: 10px 12px;
  background: linear-gradient(to bottom, rgba(4,6,16,.84), transparent); }
.player-now { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 700; text-shadow: 0 1px 3px #000; }
.player-center { position: absolute; inset: 50% auto auto 50%; display: flex; align-items: center;
  gap: 24px; transform: translate(-50%, -50%); }
.player-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 50%; background: rgba(8,11,24,.58); color: #fff;
  backdrop-filter: blur(8px); }
.player-icon:hover, .player-icon:focus-visible { background: rgba(112,134,255,.78); }
.player-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.player-icon .nav-ic { width: 22px; height: 22px; }
.player-icon.is-active { background: rgba(112,134,255,.84); }
.player-play { width: 66px; height: 66px; background: rgba(255,255,255,.94); color: #11152A; }
.player-play:hover, .player-play:focus-visible { background: #fff; color: #536EED; }
.player-play .nav-ic { width: 30px; height: 30px; }
.player-skip { position: relative; width: 56px; height: 56px; }
.player-skip .nav-ic { width: 34px; height: 34px; }
.player-skip span { position: absolute; inset: 20px 0 auto; font-size: var(--type-icon); font-weight: 800; text-align: center; }
.player-bottom { position: absolute; inset: auto 0 0; display: grid; gap: 8px; padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(4,6,16,.9), transparent); }
.player-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.seek, .volume { width: 100%; accent-color: #8698FF; }
.seek { --seek-progress: 0%; appearance: none; -webkit-appearance: none; height: 28px; margin: 0;
  border: 0; border-radius: 999px; outline: 0; cursor: pointer;
  background: linear-gradient(to right, #8698FF 0 var(--seek-progress),
    rgba(255,255,255,.32) var(--seek-progress) 100%) center / 100% 4px no-repeat; }
.seek:disabled { cursor: default; opacity: .65; }
.seek::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: transparent; }
.seek::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; appearance: none;
  -webkit-appearance: none; border: 2px solid #fff; border-radius: 50%; background: #8698FF;
  box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.seek::-moz-range-track { height: 4px; border-radius: 999px; background: transparent; }
.seek::-moz-range-progress { height: 4px; border-radius: 999px; background: transparent; }
.seek::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%;
  background: #8698FF; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.seek:focus-visible::-webkit-slider-thumb { outline: 3px solid rgba(255,255,255,.72); outline-offset: 3px; }
.seek:focus-visible::-moz-range-thumb { outline: 3px solid rgba(255,255,255,.72); outline-offset: 3px; }
.time-readout { color: rgba(255,255,255,.9); font-size: var(--type-micro); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.player-actions { display: flex; align-items: center; gap: 7px; min-width: 0; }
.player-actions .player-icon { width: 42px; height: 42px; background: transparent; backdrop-filter: none; }
.player-actions .player-icon:hover, .player-actions .player-icon:focus-visible { background: rgba(255,255,255,.16); }
.player-actions .player-icon.is-active { color: #A9B6FF; background: rgba(112,134,255,.2); }
.player-actions-spacer { flex: 1; }
.volume { width: 90px; }
.player-settings-backdrop { position: absolute; z-index: 7; inset: 0; padding: 0; border: 0;
  background: rgba(3,5,14,.5); backdrop-filter: blur(2px); }
.player-settings-menu { position: absolute; z-index: 8; right: 12px; bottom: 62px; width: 240px; display: grid; gap: 14px;
  padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
  background: rgba(9,12,27,.96); color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.34); }
.player-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.14); }
.player-settings-head strong { font-size: 16px; }
.player-settings-close { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff;
  font: inherit; font-size: 26px; line-height: 1; }
.player-settings-close:hover, .player-settings-close:focus-visible { background: rgba(112,134,255,.5); outline: 0; }
.player-settings-menu label { display: grid; grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center; gap: 12px; font-size: 12px; font-weight: 700; }
.player-select { width: 108px; min-height: 44px; height: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  padding: 8px; background: #181D36; color: #fff; font: inherit; font-size: 16px; }
.player-select:disabled { opacity: .52; }
.player-setting-range { width: 108px; accent-color: #8698FF; }
.player-toggle input { width: 20px; height: 20px; justify-self: end; accent-color: #8698FF; }
.gesture-feedback { position: absolute; z-index: 6; top: 50%; width: 88px; height: 88px; display: grid;
  place-items: center; border-radius: 50%; background: rgba(8,11,24,.68); color: #fff;
  font-size: 17px; font-weight: 800; opacity: 0; transform: translateY(-50%) scale(.82); pointer-events: none; }
.gesture-left { left: 8%; }
.gesture-right { right: 8%; }
.gesture-feedback.is-visible { animation: player-gesture 520ms ease; }
@keyframes player-gesture { 35% { opacity: 1; transform: translateY(-50%) scale(1); } }
.video-unlock { position: absolute; z-index: 8; inset: auto 18px 18px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; padding: 0 16px;
  background: rgba(14,19,48,.9); color: #fff; font-size: 13px; font-weight: 700; }
.video-error { position: absolute; z-index: 8; inset: 64px 20px 20px; display: grid; place-items: center;
  white-space: pre-line;
  max-width: 640px; margin: auto; padding: 24px; color: #FFD6D1; text-align: center;
  font-size: clamp(16px, 2.3vw, 22px); font-weight: 750; line-height: 1.4; }
.video-shell.has-playback-error video,
.video-shell.has-playback-error .video-backdrop,
.video-shell.has-playback-error .video-edge-fill,
.video-shell.has-playback-error .audio-only-screen,
.video-shell.has-playback-error .dub-caption,
.video-shell.has-playback-error .video-interaction,
.video-shell.has-playback-error .player-center,
.video-shell.has-playback-error .gesture-feedback,
.video-shell.has-playback-error .player-bottom,
.video-shell.has-playback-error .player-settings-backdrop,
.video-shell.has-playback-error .player-settings-menu,
.video-shell.has-playback-error .video-unlock { display: none !important; }
.video-shell.has-playback-error .player-top { opacity: 1; visibility: visible; pointer-events: auto; }
.video-shell.has-playback-error #pipBtn { visibility: hidden; pointer-events: none; }
.playback-session-block { position: absolute; z-index: 9; inset: 64px 20px 20px; width: min(520px, calc(100% - 40px));
  margin: auto; place-self: center; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; padding: 24px; color: #fff; text-align: center; }
.playback-session-block strong { font-size: clamp(18px, 2.4vw, 24px); line-height: 1.25; }
.playback-session-block span { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.5; }
.playback-session-block .btn { min-width: 190px; margin-top: 4px; }
.video-shell.has-playback-session-block video,
.video-shell.has-playback-session-block .video-backdrop,
.video-shell.has-playback-session-block .video-edge-fill,
.video-shell.has-playback-session-block .audio-only-screen,
.video-shell.has-playback-session-block .dub-caption,
.video-shell.has-playback-session-block .video-interaction,
.video-shell.has-playback-session-block .player-center,
.video-shell.has-playback-session-block .gesture-feedback,
.video-shell.has-playback-session-block .player-bottom,
.video-shell.has-playback-session-block .player-settings-backdrop,
.video-shell.has-playback-session-block .player-settings-menu,
.video-shell.has-playback-session-block .video-unlock,
.video-shell.has-playback-session-block .video-error { display: none !important; }
.video-shell.has-playback-session-block .player-top { opacity: 1; visibility: visible; pointer-events: auto; }
.video-shell.has-playback-session-block #pipBtn { visibility: hidden; pointer-events: none; }
.legacy-player .video-interaction, .legacy-player .player-center, .legacy-player .player-bottom { display: none; }
.legacy-player .player-top { opacity: 1; visibility: visible; pointer-events: auto; }
.cabinet-discussion-collapse { position: absolute; z-index: 12; top: 50%; right: calc(var(--cabinet-discussion-width) + 14px); width: 44px; height: 52px;
  display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 8px 0 0 8px;
  transform: translateY(-50%); background: rgba(12,15,29,.88); color: #E7EAF4; box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.cabinet-discussion-collapse:hover, .cabinet-discussion-collapse:focus-visible { background: #272C43; }
.cabinet-discussion-collapse .nav-ic { width: 22px; height: 22px; }
.cabinet-discussion-collapsed .cabinet-discussion-collapse { right: 12px; border-radius: 8px; }
.cabinet-discussion-panel { position: relative; z-index: 8; min-width: 0; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto; margin: 0 0 0 -14px;
  overflow: hidden; border: 1px solid var(--line); border-right: 0;
  border-radius: 24px 0 0 24px; background: #F2F4FA;
  color: var(--text); box-shadow: 0 18px 42px rgba(0,0,0,.18);
  transform: translate3d(0, var(--cabinet-discussion-swipe-offset, 0px), 0); backface-visibility: hidden;
  opacity: 1; visibility: visible; transition: opacity 140ms ease, visibility 140ms ease, transform 220ms ease; }
.cabinet-discussion-panel.is-cabinet-discussion-swiping { transition: none; }
.cabinet-discussion-panel.is-cabinet-discussion-swipe-settling { transition: transform 220ms ease; }
.cabinet-discussion-collapsed .cabinet-discussion-panel { opacity: 0; visibility: hidden; pointer-events: none; }
.cabinet-discussion-head { position: relative; min-height: 62px; display: flex; align-items: stretch; justify-content: space-between; gap: 8px;
  grid-row: 1; padding: 0 10px 0 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.cabinet-discussion-swipe-handle { display: none; }
.cabinet-discussion-tabs { display: flex; align-items: stretch; min-width: 0; gap: 18px; }
.cabinet-discussion-tab { position: relative; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--text-dim); font-size: 13px; font-weight: 700; white-space: nowrap; }
.cabinet-discussion-tab::after { content: ""; position: absolute; inset: auto 0 -1px; height: 3px;
  background: var(--accent); opacity: 0; }
.cabinet-discussion-tab.active { color: var(--text); }
.cabinet-discussion-tab.active::after { opacity: 1; }
.cabinet-discussion-tab span { color: inherit; font-variant-numeric: tabular-nums; }
.cabinet-discussion-head-actions { align-self: center; display: flex; align-items: center; gap: 3px; }
.cabinet-discussion-font-controls { display: inline-flex; align-items: center; gap: 2px; }
.cabinet-discussion-font-control { width: 38px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-dim);
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: -.04em; }
.cabinet-discussion-font-control:hover, .cabinet-discussion-font-control:focus-visible { background: var(--accent-soft); color: var(--accent); }
.cabinet-discussion-font-control:disabled { opacity: .38; cursor: default; }
.cabinet-discussion-font-control:disabled:hover { background: transparent; color: var(--text-dim); }
.cabinet-discussion-admin-toggle { align-self: center; width: 40px; height: 40px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); }
.cabinet-discussion-admin-toggle:hover, .cabinet-discussion-admin-toggle:focus-visible, .cabinet-discussion-admin-toggle.is-active {
  background: var(--accent-soft); color: var(--accent); }
.cabinet-discussion-admin-toggle .nav-ic { width: 19px; height: 19px; }
.cabinet-discussion-notice { grid-row: 2; padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(216,87,79,.1);
  color: var(--danger); font-size: 12px; font-weight: 700; }
.cabinet-discussion-notice.cabinet-discussion-notice-orientation { background: var(--accent-soft); color: var(--accent); }
.cabinet-discussion-messages { grid-row: 3; min-height: 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; padding: 10px;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cabinet-discussion-messages.is-loading-history::before { content: ""; justify-self: center; width: 18px; height: 18px;
  border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%;
  animation: cabinet-discussion-history-spin .7s linear infinite; }
@keyframes cabinet-discussion-history-spin { to { transform: rotate(360deg); } }
.cabinet-discussion-message { position: relative; padding: 9px 11px 10px; border: 1px solid var(--line); border-radius: 15px;
  background: var(--card); }
.cabinet-discussion-message.is-mentioned { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.cabinet-discussion-meta { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 6px; row-gap: 2px; margin-bottom: 3px;
  color: var(--text-dim); font-size: var(--type-micro); font-weight: 600; }
.cabinet-discussion-author { min-width: 0; max-width: 100%; overflow: visible; overflow-wrap: anywhere; white-space: normal;
  padding: 0; border: 0; background: transparent; color: var(--text); font-size: var(--cabinet-discussion-author-size, 13px); font-weight: 700;
  text-align: left; }
.cabinet-discussion-author:hover, .cabinet-discussion-author:focus-visible { color: var(--accent); }
.cabinet-discussion-time { justify-self: end; color: var(--text-dim); white-space: nowrap;
  font-size: var(--cabinet-discussion-meta-size, 12px); font-variant-numeric: tabular-nums; }
.cabinet-discussion-panel[data-cabinet-discussion-font-scale="140"] .cabinet-discussion-meta,
.cabinet-discussion-panel[data-cabinet-discussion-font-scale="160"] .cabinet-discussion-meta { grid-template-columns: minmax(0, 1fr); }
.cabinet-discussion-panel[data-cabinet-discussion-font-scale="140"] .cabinet-discussion-time,
.cabinet-discussion-panel[data-cabinet-discussion-font-scale="160"] .cabinet-discussion-time { justify-self: start; }
.cabinet-discussion-edited { font-size: 10.5px; }
.cabinet-discussion-message-actions { position: absolute; right: 7px; bottom: 5px; display: inline-flex;
  align-items: center; gap: 2px; opacity: 0; }
.cabinet-discussion-message:hover .cabinet-discussion-message-actions, .cabinet-discussion-message:focus-within .cabinet-discussion-message-actions { opacity: 1; }
.cabinet-discussion-message-actions button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); }
.cabinet-discussion-message-actions button:hover, .cabinet-discussion-message-actions button:focus-visible { background: var(--accent-soft); color: var(--accent); }
.cabinet-discussion-message-actions .nav-ic { width: 14px; height: 14px; }
.cabinet-discussion-text { color: var(--text-2); font-size: var(--cabinet-discussion-text-size, 14px); font-weight: 500; overflow-wrap: anywhere; line-height: 1.42; }
.cabinet-discussion-message.has-actions .cabinet-discussion-text { padding-right: 66px; }
.cabinet-discussion-reactions { min-height: 34px; margin-top: 5px; display: flex; align-items: center; }
.cabinet-discussion-heart { min-width: 44px; min-height: 34px; display: inline-flex; align-items: center;
  justify-content: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: transparent; color: var(--text-dim); font-size: 17px; }
.cabinet-discussion-heart:hover, .cabinet-discussion-heart:focus-visible, .cabinet-discussion-heart.is-active {
  border-color: rgba(216,87,79,.45); background: rgba(216,87,79,.1); color: var(--danger); }
.cabinet-discussion-heart:disabled { opacity: .55; cursor: wait; }
.cabinet-discussion-heart-count { min-width: 1ch; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cabinet-discussion-empty { color: var(--text-dim); font-size: var(--cabinet-discussion-text-size, 13px); font-weight: 600; text-align: center; padding: 22px 12px; }
.viewer-list { grid-row: 3; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 10px 14px; }
.viewer-row { min-height: 52px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center;
  gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--text-2);
  font-size: var(--cabinet-discussion-text-size, 13px); font-weight: 600; }
.viewer-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 800; }
.viewer-section-title { margin: 16px 0 4px; color: var(--text-dim); font-size: var(--type-micro); font-weight: 800; }
.viewer-row-blocked { grid-template-columns: 34px minmax(0, 1fr) auto; }
.viewer-row-blocked button { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px;
  background: transparent; color: var(--text-2); font-size: var(--type-micro); font-weight: 700; }
.viewer-row-blocked button:hover, .viewer-row-blocked button:focus-visible { border-color: var(--accent); color: var(--accent); }
.cabinet-discussion-form { position: relative; grid-row: 4; min-height: 69px; display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 7px;
  padding: 12px; border-top: 1px solid var(--line); background: var(--card); }
.cabinet-discussion-form .field { font-size: var(--cabinet-discussion-input-size, 16px); }
.cabinet-discussion-composer-head { display: none; }
.cabinet-discussion-composer-backdrop { position: fixed; z-index: 1199; inset: 0; padding: 0; border: 0;
  background: rgba(5,8,20,.68); backdrop-filter: blur(3px); }
.cabinet-discussion-composer-anchor { display: none !important; }
body.cabinet-discussion-composer-open { overflow: hidden; }
.cabinet-discussion-form.is-mobile-composer { position: fixed; z-index: 1200;
  top: auto; bottom: var(--cabinet-discussion-composer-bottom, 12px);
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  width: auto; max-width: 520px; max-height: calc(100vh - var(--cabinet-discussion-composer-top, 12px) - var(--cabinet-discussion-composer-bottom, 12px));
  max-height: calc(100dvh - var(--cabinet-discussion-composer-top, 12px) - var(--cabinet-discussion-composer-bottom, 12px));
  margin-inline: auto; padding: 14px; overflow: visible; border: 1px solid var(--line-2);
  border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.46); }
.cabinet-discussion-form.is-mobile-composer .cabinet-discussion-composer-head { grid-column: 1 / -1; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 2px; }
.cabinet-discussion-composer-head strong { color: var(--text); font-size: 16px; }
.cabinet-discussion-composer-close { width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%; background: var(--card-2); color: var(--text);
  font-size: 27px; line-height: 1; }
.cabinet-discussion-form.is-mobile-composer .field { max-height: min(160px, 32dvh); }
.mobile-cabinet-discussion-compose { display: none; }
.cabinet-discussion-form .field { min-height: 44px; height: 44px; max-height: 96px; padding-block: 10px;
  resize: none; overflow-x: hidden; overflow-y: auto; line-height: 1.35; }
.cabinet-discussion-emoji-toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); }
.cabinet-discussion-emoji-toggle:hover, .cabinet-discussion-emoji-toggle:focus-visible, .cabinet-discussion-emoji-toggle.is-active {
  background: var(--accent-soft); color: var(--accent); }
.cabinet-discussion-emoji-toggle:disabled { opacity: .5; cursor: not-allowed; }
.cabinet-discussion-emoji-toggle .nav-ic { width: 21px; height: 21px; }
.cabinet-discussion-send.is-sending .nav-ic { animation: cabinet-discussion-send-pulse .72s ease-in-out infinite alternate; }
@keyframes cabinet-discussion-send-pulse { to { opacity: .42; transform: translate(2px, -2px); } }
.cabinet-discussion-emoji-picker { position: absolute; z-index: 12; left: 8px; bottom: calc(100% - 3px);
  width: min(310px, calc(100vw - 16px)); display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 3px; padding: 8px; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--card); box-shadow: 0 16px 38px rgba(10,14,34,.22); }
.cabinet-discussion-emoji-picker button { width: 100%; min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1; }
.cabinet-discussion-emoji-picker button:hover, .cabinet-discussion-emoji-picker button:focus-visible { background: var(--accent-soft); }
.cabinet-discussion-send { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; }
.cabinet-discussion-send .nav-ic { width: 20px; height: 20px; }
.cabinet-discussion-send:disabled { background: var(--text-dim); cursor: not-allowed; opacity: .6; }

@media (max-width: 310px) {
  .cabinet-discussion-emoji-picker { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 1023px), (orientation: portrait) {
  body.player-active { overflow: hidden; }
  .player-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  body.player-settings-open .player-stage { position: relative; z-index: 20; overflow: visible; }
  .cabinet-discussion-collapse { display: none; }
  .player-stage { display: block; flex: 0 0 auto; }
  .video-shell { width: 100%; max-width: none; height: 75vw;
    max-height: var(--player-video-max-height, 46vh); aspect-ratio: auto; }
  .player-top { padding-top: max(10px, env(safe-area-inset-top)); }
  .player-now { font-size: 13px; }
  .player-center { gap: 18px; }
  .player-play { width: 60px; height: 60px; }
  .player-skip { width: 52px; height: 52px; }
  .player-bottom { padding-bottom: 29px; }
  .player-settings-backdrop { position: fixed; z-index: 998; inset: 0; }
  .player-settings-menu { position: fixed; z-index: 999; inset: auto 0 0; width: 100%;
    max-height: min(78vh, calc(100vh - env(safe-area-inset-top) - 24px));
    max-height: min(78dvh, calc(100dvh - env(safe-area-inset-top) - 24px));
    gap: 16px; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto;
    border-width: 1px 0 0; border-radius: 22px 22px 0 0; background: #11162C;
    box-shadow: 0 -18px 48px rgba(0,0,0,.48); }
  .player-settings-head { position: sticky; z-index: 1; top: -16px; margin: -16px -18px 0;
    padding: 16px 18px 12px; background: #11162C; }
  .player-settings-menu label { gap: 12px; font-size: 16px; }
  .player-settings-menu .player-select { min-height: 44px; padding: 8px; font-size: 16px; }
  .player-settings-menu .player-setting-range { min-height: 44px; }
  .dub-caption { bottom: 104px; max-width: 92%;
    max-width: var(--subtitle-max-width, 92%); font-size: 18px;
    font-size: var(--subtitle-font-size, 18px); }
  .volume { display: none; }
  .cabinet-discussion-panel { z-index: 8; flex: 1 1 0; min-height: 0; height: auto; margin: -20px 0 0;
    border: 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -14px 32px rgba(0,0,0,.2); }
  .cabinet-discussion-head { padding-top: 14px; }
  .cabinet-discussion-swipe-handle { position: absolute; z-index: 2; top: 3px; left: 50%; width: 68px; height: 20px;
    display: grid; place-items: center; transform: translateX(-50%); padding: 0; border: 0;
    background: transparent; touch-action: none; }
  .cabinet-discussion-swipe-handle span { width: 38px; height: 4px; border-radius: 999px; background: var(--text-dim); opacity: .55; }
  .cabinet-discussion-swipe-handle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
  .cabinet-discussion-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 340px) {
  .dub-caption { max-width: 94%; max-width: var(--subtitle-max-width, 94%);
    font-size: 15px; font-size: var(--subtitle-font-size, 15px); }
}

@media (max-width: 1023px) and (orientation: landscape) {
  body.player-active { overflow: hidden; }
  .player-mode .content, .player-page, .player-layout { position: absolute; inset: 0;
    width: 100%; height: 100%; min-height: 0; overflow: hidden; }
  .player-stage { position: absolute; inset: 0; }
  .video-shell { width: 100vw; height: 100%;
    max-width: none; max-height: none; aspect-ratio: auto; }
  .cabinet-discussion-panel, .cabinet-discussion-collapse { display: none; }
  .mobile-cabinet-discussion-compose { display: none !important; }
  .player-top { padding-top: calc(8px + env(safe-area-inset-top));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right)); }
  .player-bottom { padding-bottom: calc(8px + env(safe-area-inset-bottom));
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right)); }
  .dub-caption { bottom: calc(82px + env(safe-area-inset-bottom)); max-width: 88%;
    max-width: var(--subtitle-max-width, 88%); font-size: 22px;
    font-size: var(--subtitle-font-size, 22px); }
}

@media (max-width: 480px) and (max-height: 520px) and (orientation: portrait) {
  .player-top { min-height: 54px; padding-block: 6px; }
  .player-now { font-size: var(--type-micro); }
  .player-center { top: 46%; gap: 10px; }
  .player-skip { display: none; }
  .player-play { width: 50px; height: 50px; }
  .player-bottom { gap: 3px; padding: 22px 10px 7px; }
  .player-actions .player-icon { width: 36px; height: 36px; }
  .cabinet-discussion-panel { margin-top: 0; }
}

@media (min-width: 2000px) and (min-height: 1100px) {
  .player-top { grid-template-columns: 48px minmax(0, 1fr) 48px; min-height: 76px;
    padding: 14px 18px; }
  .player-now { font-size: 15px; }
  .player-icon { width: 46px; height: 46px; }
  .player-play { width: 76px; height: 76px; }
  .player-skip { width: 62px; height: 62px; }
  .player-center { gap: 30px; }
  .player-bottom { gap: 10px; padding: 46px 18px 16px; }
  .player-actions .player-icon { width: 46px; height: 46px; }
  .time-readout { font-size: 12.5px; }
  .cabinet-discussion-head { min-height: 66px; }
  .cabinet-discussion-tab { font-size: 14px; }
  .cabinet-discussion-message { padding: 11px 13px; }
  .cabinet-discussion-author { font-size: var(--cabinet-discussion-author-size, 13px); }
  .cabinet-discussion-time { font-size: var(--cabinet-discussion-meta-size, 12px); }
  .cabinet-discussion-text { font-size: var(--cabinet-discussion-text-size, 14.5px); }
  .cabinet-discussion-form { min-height: 75px; padding: 14px; }
}

.video-shell:fullscreen { width: 100%; height: 100%; max-width: none;
  max-height: none; aspect-ratio: auto; }
.video-shell:-webkit-full-screen { width: 100%; height: 100%; max-width: none;
  max-height: none; aspect-ratio: auto; }
.video-shell.player-immersive-fallback { position: fixed; z-index: 1000; inset: 0; width: 100vw;
  height: 100vh; height: 100dvh; max-width: none; max-height: none; aspect-ratio: auto; }
.video-shell > .modal-back { z-index: 40; }
body.player-immersive-active { overflow: hidden; }
.video-shell:fullscreen .player-top, .video-shell:-webkit-full-screen .player-top {
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right)); }
.video-shell:fullscreen .player-bottom, .video-shell:-webkit-full-screen .player-bottom {
  padding-left: calc(14px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.video-shell:fullscreen .player-settings-menu, .video-shell:-webkit-full-screen .player-settings-menu {
  right: calc(12px + env(safe-area-inset-right)); }

/* profile */
.panel { max-width: 580px; background: var(--card); border-radius: var(--r-card); padding: clamp(22px, 4vw, 32px);
  box-shadow: var(--shadow); }
.panel .sec-head { margin-bottom: 8px; }
.p-row { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; border-bottom: 1px solid var(--line); }
.p-row:last-of-type { border-bottom: none; }
.p-row .k { flex: 0 0 auto; color: var(--text-dim); font-size: 13.5px; font-weight: 500; }
.p-row .v { min-width: 0; max-width: 100%; color: var(--text); font-weight: 600;
  text-align: right; overflow-wrap: anywhere; }
.p-row .v .policy-note { display: block; max-width: 32ch; margin-top: 5px;
  color: var(--text-dim); font-size: var(--type-micro); line-height: 1.35; font-weight: 500; }
.badge { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%;
  padding: 6px 13px; border-radius: var(--pill); text-align: center; overflow-wrap: anywhere;
  font-size: 12.5px; font-weight: 700; color: #fff; background: var(--grad-action); }
.p-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.panel-note { margin: 0 0 18px; color: var(--text-2); font-size: 13.5px; font-weight: 500;
  line-height: 1.5; }
.settings-stack { display: grid; gap: 18px; max-width: 860px; }
.settings-panel { min-width: 0; max-width: 820px; }
.settings-label { display: block; margin: 18px 0 8px; color: var(--text-dim);
  font-size: 13px; font-weight: 700; }
.country-route-input { max-width: 520px; text-transform: uppercase; letter-spacing: .045em; }
.field-hint { max-width: 68ch; margin: 10px 0 0; color: var(--text-dim);
  font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.settings-field { min-height: 92px; height: auto; padding: 14px 16px; resize: vertical;
  line-height: 1.45; }
.settings-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; }
.manifest-link-grid { grid-template-columns: minmax(240px, .9fr) minmax(300px, 1.5fr); }
.manifest-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.manifest-source-state { min-height: 18px; margin-top: 9px; color: var(--text-dim);
  font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.recovery-settings { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px;
  align-items: end; gap: 14px; margin-top: 22px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--card-2); }
.recovery-settings-copy { display: grid; gap: 5px; align-self: center; }
.recovery-settings-copy strong { font-size: 14px; }
.recovery-settings-copy span { color: var(--text-dim); font-size: 12px; line-height: 1.4; }
.recovery-settings label { display: grid; gap: 7px; color: var(--text-dim); font-size: 12px; font-weight: 700; }
.recovery-limit { min-height: 44px; height: auto; }
.audit-list { display: grid; border-top: 1px solid var(--line); }
.audit-event { padding: 16px 0; border-bottom: 1px solid var(--line); }
.audit-event-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px;
  align-items: start; }
.audit-event-head > div { min-width: 0; display: grid; gap: 4px; }
.audit-event-head strong { color: var(--text); font-size: 14px; }
.audit-event-head span { color: var(--text-2); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.audit-event-head time { color: var(--text-dim); font-size: var(--type-micro); font-weight: 600;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.audit-actor { margin-top: 7px; color: var(--text-dim); font-size: var(--type-micro); overflow-wrap: anywhere; }
.audit-details { margin-top: 10px; }
.audit-details summary { width: fit-content; color: var(--accent); font-size: 12px; font-weight: 700;
  cursor: pointer; }
.audit-details dl { display: grid; gap: 0; margin: 10px 0 0; border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; }
.audit-details dl > div { display: grid; grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr);
  gap: 12px; padding: 9px 11px; background: var(--card-2); border-bottom: 1px solid var(--line); }
.audit-details dl > div:last-child { border-bottom: 0; }
.audit-details dt { color: var(--text-dim); font-size: var(--type-micro); font-weight: 700; overflow-wrap: anywhere; }
.audit-details dd { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.audit-empty { padding: 22px 0; color: var(--text-dim); font-size: 13px; text-align: center; }
.group-multi { display: grid; gap: 10px; }
.group-filter { max-width: 420px; }
.group-choice-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; padding: 4px;
  border-radius: var(--r-sm); position: relative; }
.group-choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center;
  gap: 12px; min-height: 58px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--card-2); border: 1.5px solid transparent; cursor: pointer;
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.group-choice:hover { border-color: var(--line-2); }
.group-choice:focus-within { border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.group-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.group-choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent);
  box-shadow: 0 8px 18px rgba(33,46,76,0.08); }
.group-choice input { position: absolute; opacity: 0; pointer-events: none; }
.group-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2);
  background: var(--card); display: grid; place-items: center; }
.group-check::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff;
  border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0; }
.group-choice:has(input:checked) .group-check { background: var(--accent); border-color: var(--accent); }
.group-choice:has(input:checked) .group-check::after { opacity: 1; }
/* Legacy-safe checked state: the input and visual checkbox are adjacent in every row. */
.group-choice input:checked + .group-check { background: var(--accent); border-color: var(--accent); }
.group-choice input:checked + .group-check::after { opacity: 1; }
.group-copy { min-width: 0; display: grid; gap: 3px; }
.group-title { color: var(--text); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.group-meta { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.group-empty { padding: 16px; border-radius: var(--r-sm); background: var(--card-2);
  color: var(--text-dim); font-size: 13px; font-weight: 600; }
.segmented { display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 420px); padding: 4px; border-radius: var(--pill);
  border: 1.5px solid var(--line-2); background: var(--card-2); }
.seg { min-width: 0; min-height: 44px; height: auto; padding: 8px 10px; border: 0;
  border-radius: var(--pill); background: transparent; overflow-wrap: anywhere;
  color: var(--text-dim); font-size: 13px; line-height: 1.2; font-weight: 800; }
.seg.active { background: var(--card); color: var(--accent); box-shadow: 0 8px 18px rgba(33,46,76,0.08); }
.seg:disabled { color: var(--ink-mute); cursor: not-allowed; }
.is-hidden { display: none !important; }

/* Narrow phones: a space-between row squeezes long values (the subscription badge, the
   "Выйти на всех устройствах" button) into 2–3 lines. Stack key over value and let the
   action buttons go full-width so every value keeps its natural single line. */
@media (max-width: 560px) {
  .viewer-row-blocked { grid-template-columns: 34px minmax(0, 1fr); }
  .viewer-row-blocked button { grid-column: 2; justify-self: start; }
  .p-row { flex-direction: column; align-items: flex-start; gap: 5px; }
  .p-row .v { width: 100%; text-align: left; }
  .panel .p-actions { flex-direction: column; align-items: stretch; }
  .panel .p-actions .btn { width: 100%; }
  .settings-inline-grid { grid-template-columns: 1fr; gap: 0; }
  .manifest-link-grid { grid-template-columns: 1fr; }
  .recovery-settings { grid-template-columns: 1fr; }
  .recovery-settings-copy { grid-column: auto; }
  .audit-event-head { grid-template-columns: 1fr; gap: 6px; }
  .audit-event-head time { white-space: normal; }
  .audit-details dl > div { grid-template-columns: 1fr; gap: 4px; }
  .gate .lang-card { display: flex; flex-direction: column;
    max-height: none; padding: 18px; overflow: visible; }
  .gate .lang-card h1 { font-size: 26px; }
  .gate .lang-card .lead { margin: 7px 0 11px; font-size: 13.5px; line-height: 1.35; }
  .gate .lang-card .lang-search { flex: 0 0 auto; margin: 2px 0 8px; }
  .gate .lang-card .field { min-height: 46px; padding-block: 11px; }
  .gate .lang-card .lang-list { flex: 0 1 auto; min-height: 72px; max-height: 154px;
    max-height: clamp(72px, 27vh, 180px); gap: 6px; }
  .gate .lang-card .lang-opt { min-height: 42px; padding-block: 8px; }
  .gate .lang-card > .btn { flex: 0 0 auto; min-height: 46px; margin-top: 8px !important; }
}

/* Short landscape phones still have a narrow CSS viewport even when their long side is near
   600px. Collapse the admin form grids before their field minimums can widen the page. */
@media (max-width: 600px) {
  .settings-stack { min-width: 0; }
  .settings-inline-grid, .manifest-link-grid, .recovery-settings {
    grid-template-columns: minmax(0, 1fr);
  }
  .recovery-settings-copy { grid-column: auto; }
}

/* On narrow, short landscape phones there is not enough height for a fixed card. Keep the
   picker compact and let the page itself scroll so the primary action can never be clipped. */
@media (max-width: 519px) and (max-height: 520px) {
  .gate { display: grid; grid-template-rows: 1fr; padding-top: 12px; padding-bottom: 12px; }
  .gate-top { display: none; }
  .gate-center { padding: 0; }
  .gate-foot { display: none; }
  .gate .lang-card { max-height: none; padding: 12px 14px; overflow: visible; }
  .gate .lang-card .eyebrow { font-size: 10px; }
  .gate .lang-card h1 { font-size: 24px; }
  .gate .lang-card .lead { margin-block: 4px 6px; font-size: 12px; line-height: 1.3; }
  .gate .lang-card .lang-search { margin-block: 2px 6px; }
  .gate .lang-card .field { min-height: 42px; padding-block: 9px; }
  .gate .lang-card .lang-list { min-height: 40px; max-height: 52px; gap: 4px; }
  .gate .lang-card .lang-opt { min-height: 38px; padding-block: 6px; }
  .gate .lang-card > .btn { min-height: 42px; margin-top: 6px !important; }
}

@media (max-width: 480px) {
  .lesson-card { grid-template-columns: 1fr; grid-template-areas: "preview" "main" "state";
    align-items: stretch; padding: 18px; }
  .lesson-preview { width: 100%; }
  .lesson-state { justify-items: stretch; }
  .lesson-badge, .lesson-action { width: 100%; }
  .lesson-deadline { justify-content: center; font-size: 11.5px; padding-inline: 8px; }
}
/* On 320px-class phones the longest action label ("Выйти на всех устройствах") needs a
   slightly smaller face to hold one line; ≥360px it already fits at full size. */
@media (max-width: 380px) {
  /* On the tightest phones two buttons no longer fit side by side — stack every action row. */
  .p-actions { flex-direction: column; align-items: stretch; }
  .p-actions .btn { width: 100%; }
  .panel .p-actions .btn { font-size: 12.5px; letter-spacing: 0; padding: 0 12px; }
}

@media (max-width: 720px) {
  body.has-gate .gate-top { padding-right: 62px; }
  .gate-top { align-items: flex-start; flex-wrap: wrap; }
  .login-language-switcher { order: 2; }
  .login-language-switcher button { min-height: 36px; padding-inline: 10px; }
  .cabinet-support-launcher { right: max(14px, env(safe-area-inset-right));
    top: max(18px, env(safe-area-inset-top)); bottom: auto; width: 56px; min-height: 56px;
    padding: 0; gap: 0; border-color: rgba(255,255,255,.22); background: var(--grad-action);
    box-shadow: 0 12px 30px rgba(47,83,202,.34), inset 0 1px rgba(255,255,255,.2); }
  .cabinet-support-launcher > span:last-child { position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0; }
  .cabinet-support-launcher-icon { width: 100%; height: 100%; background: transparent; box-shadow: none; }
  .cabinet-support-launcher-icon svg { width: 27px; height: 27px; }
  .cabinet-support-frame-shell { inset: 0; width: 100vw; height: 100dvh; max-width: none;
    max-height: none; border: 0; border-radius: 0; }
  .support-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .support-card-icon { width: 60px; height: 60px; border-radius: 19px; }
  .support-card-icon .nav-ic { width: 28px; height: 28px; }
  .support-open { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .support-diagnostics { grid-template-columns: 1fr; }
  .support-diagnostics-run, .support-diagnostics-actions .btn { width: 100%; min-width: 0; }
  .support-diagnostics-status, .support-diagnostics-report,
  .support-diagnostics-actions { grid-column: 1; }
  .support-diagnostics-actions { flex-direction: column; }
}

@media (min-width: 520px) and (max-width: 720px) and (max-height: 520px) {
  .gate-top { align-items: stretch; flex-wrap: nowrap; }
  body.has-gate .gate-top { padding-right: 0; }
  .cabinet-support-launcher { left: max(18px, env(safe-area-inset-left)); right: auto;
    top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* modal (change language) */
.modal-back { position: fixed; inset: 0; z-index: 30; background: rgba(14,19,48,0.55);
  display: flex; align-items: center; justify-content: center; overflow-x: hidden; overflow-y: auto;
  padding: 16px;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card { width: 100%; max-width: 440px; background: var(--card); border-radius: var(--r-lg);
  margin: auto; padding: 24px; box-shadow: 0 30px 70px rgba(14,19,48,0.45); }
.modal-language { display: flex; flex-direction: column;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.modal-language .lang-search { flex: 0 0 auto; }
.modal-language .lang-list {
  flex: 1 1 auto; min-height: 84px; max-height: none !important; }
.modal-language .p-actions { flex: 0 0 auto; }
.modal-card h3 { font-size: 21px; margin-bottom: 6px; }
.modal-card .muted { font-size: 13.5px; margin: 0 0 14px; line-height: 1.45; }
.recovery-confirm { max-width: 480px; }
.recovery-actions { display: grid; grid-template-columns: minmax(112px, .7fr) minmax(0, 1.3fr);
  align-items: stretch; gap: 10px; margin-top: 22px; }
.recovery-actions .btn { width: 100%; min-width: 0; padding-inline: 16px;
  white-space: normal; overflow-wrap: anywhere; }
.cabinet-discussion-confirm { max-width: 410px; }
.cabinet-discussion-confirm-check { min-height: 48px; display: flex; align-items: center; gap: 11px; padding: 10px 0;
  color: var(--text-2); font-size: 13px; font-weight: 600; }
.cabinet-discussion-confirm-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.cabinet-discussion-edit { max-width: 480px; }
.cabinet-discussion-edit-input { width: 100%; min-height: 112px; resize: vertical; margin: 8px 0 2px; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: 12px; outline: 0; background: var(--card-2);
  color: var(--text); font: inherit; font-size: 14px; line-height: 1.45; }
.cabinet-discussion-edit-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.playback-decision { max-width: 480px; }
.playback-decision .p-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; }
.playback-decision .btn { width: 100%; min-width: 0; }

@media (max-height: 420px) {
  .modal-card { padding: 14px 16px; border-radius: 20px; }
  .modal-card h3 { margin-bottom: 3px; font-size: 18px; }
  .modal-card .muted { margin-bottom: 7px; font-size: 11.5px; line-height: 1.28; }
  .modal-language .lang-search { margin: 2px 0 6px; }
  .modal-language .field { min-height: 42px; padding-block: 9px; }
  .modal-language .lang-list { min-height: 42px; gap: 4px; }
  .modal-language .lang-opt { min-height: 38px; padding-block: 6px; }
  .modal-language .p-actions { gap: 8px; margin-top: 7px !important; }
  .modal-language .btn { min-height: 42px; padding: 8px 16px; }
}

@media (max-width: 520px) {
  .recovery-confirm { padding-inline: 16px; }
  .recovery-actions { grid-template-columns: 1fr; gap: 8px; }
  .recovery-actions .btn { min-height: 46px; padding-inline: 12px; font-size: 13px;
    white-space: normal; overflow-wrap: anywhere; }
  .playback-decision .p-actions { grid-template-columns: 1fr; }
}

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px;
  bottom: calc(26px + env(safe-area-inset-bottom));
  width: max-content; max-width: calc(100vw - 32px);
  max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  transform: translateX(-50%) translateY(8px); z-index: 40;
  background: var(--navy-1); color: var(--on-dark); padding: 13px 20px; border-radius: 22px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.4); font-size: 14px; font-weight: 600;
  line-height: 1.35; text-align: center; overflow-wrap: anywhere;
  opacity: 0; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: #7A2B2B; }

/* mobile bottom tabs */
.tabbar { display: none; }

@media (max-width: 1024px) {
  /* Phones: the top safe-area (status bar) must match the dark cabinet header, not the light
     content. iOS Safari tints that inset from the <body> background-color — so on mobile the
     cabinet body is the header navy, seaming perfectly with the #0E1330 header; the light
     content panel keeps its own background below. (Desktop keeps the lavender app background.) */
  body:has(.shell) { background: var(--navy-1); }
  body.has-shell { background: var(--navy-1); }
  .shell { grid-template-columns: 1fr; background: var(--navy-1); }
  .rail { display: none; }
  .topbar { position: static; background: transparent; backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
      18px calc(20px + env(safe-area-inset-left)); }
  .topbar .hello { color: #fff; }
  .topbar .hello .name {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: inherit;
    -webkit-text-fill-color: inherit;
  }
  .search-stub { display: none; }
  .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); padding: 4px; }
  .chip .who { display: none; }
  .main { min-height: 100vh; min-height: 100svh; }
  .content { flex: 1; background: var(--bg); border-radius: 28px 28px 0 0;
    padding: clamp(22px, 6vw, 30px) calc(20px + env(safe-area-inset-right))
      calc(96px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
  .tabbar { display: flex; align-items: flex-end; position: fixed; inset: auto 0 -1px 0; z-index: 20;
    background: rgba(255,255,255,.94);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    transform: translate3d(0,0,0); backface-visibility: hidden; isolation: isolate;
    border-top: 1px solid var(--line);
    padding: 9px calc(10px + env(safe-area-inset-right))
      calc(9px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); }
  /* Mail/Telegram WebViews can expose a visual area below their CSS fixed-position floor.
     Continue the opaque navigation surface into that browser-owned inset so lesson content never
     shines through beneath the tabs. */
  .tabbar::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; right: 0;
    height: max(128px, env(safe-area-inset-bottom)); background: var(--card); pointer-events: none; }
  .tab { position: relative; z-index: 1; min-width: 0; flex: 1 1 0; display: grid; justify-items: center; gap: 4px;
    overflow: hidden; padding: 6px 1px; border: none; background: none; color: var(--text-dim);
    font-size: clamp(9px, 2.62vw, 11.5px); line-height: 1.2; font-weight: 600; }
  .tab span { display: flex; align-items: flex-start; justify-content: center;
    min-height: 2.4em; max-width: 100%; white-space: normal; overflow-wrap: anywhere;
    text-align: center; }
  .tab.active { color: var(--accent); }
  .tab.active .nav-ic { color: var(--accent); }
  .tab[disabled] { opacity: .4; }
  .tab .nav-ic { width: 20px; height: 20px; }
  .toast { bottom: 82px; bottom: calc(82px + env(safe-area-inset-bottom)); }
  body.player-active .toast { bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  body.player-active.has-shell { background: #080B18; }
}

@media (max-width: 380px) {
  .topbar { gap: 12px; }
  .hello { font-size: 19px; line-height: 1.22; }
}

/* At 320px-class widths, five full Russian labels cannot remain legible without colliding.
   The icons stay visible and the text remains in the accessibility tree. */
@media (max-width: 340px) {
  .hello-greeting, .hello-separator, .hello .name { display: none; }
  .hello-greeting-short { display: block; max-width: 100%; white-space: normal;
    overflow-wrap: anywhere; hyphens: auto; }
  .tabbar { align-items: center; }
  .tab { min-height: 44px; gap: 0; padding-block: 8px; }
  .tab span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .tab .nav-ic { width: 22px; height: 22px; }
}

@media (max-width: 300px) {
  .gate { padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right)); }
  .topbar { padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right)); }
  .content { padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right)); }
  .panel { padding: 18px; }
  .modal-back { padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right)); }
  .recovery-actions { grid-template-columns: 1fr; gap: 7px; }
  .recovery-actions .btn { padding-inline: 10px; font-size: 12px; }
}

@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  .topbar { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
  .hello { font-size: 18px; }
  .content { border-radius: 22px 22px 0 0; padding-top: 18px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { padding-top: 5px; padding-bottom: calc(5px + env(safe-area-inset-bottom)); }
  .tab { gap: 2px; padding-block: 4px; font-size: var(--type-icon); }
  .tab .nav-ic { width: 18px; height: 18px; }
}

@media (hover: none) {
  .linkbtn { min-height: 44px; margin-block: -11px; }
  .cabinet-discussion-message-actions { opacity: 1; }
  .cabinet-discussion-message-actions button { width: 40px; height: 40px; }
  .cabinet-discussion-message.has-actions .cabinet-discussion-text { min-height: 30px; padding-right: 82px; }
}

@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
  .shell, .modal-back {
    --bg: #151725; --card: #1D2030; --card-2: #25293B;
    --text: #ECEEFA; --text-2: #CCD1E3; --text-dim: #A5ADC2;
    --line: rgba(175,192,255,.11); --line-2: rgba(175,192,255,.2);
    --input: #121522; --shadow: 0 16px 38px rgba(4,6,18,.34);
    --accent: #8EA9FF; --accent-2: #AFC0FF; --accent-soft: rgba(142,169,255,.15);
    --danger: #FFAAA2;
  }
  body:has(.shell) { background: #11142B; }
  body.has-shell { background: #11142B; }
  .shell { background: var(--bg); }
  .topbar { background: rgba(21,23,37,.88); }
  .cabinet-discussion-panel { background: #141725; border-color: rgba(175,192,255,.11); }
  .cabinet-discussion-head, .cabinet-discussion-form { background: #1D2030; }
  .cabinet-discussion-message { background: #202436; }
  .status-ready .lesson-badge, .deadline-watch { color: #78D7A7; }
  .status-expired .lesson-badge { color: #FFAAA2; }
  .lesson-badge-preparing { color: #AFC0FF; border-color: rgba(175,192,255,.16);
    background: linear-gradient(110deg, rgba(142,169,255,.14), rgba(126,85,229,.12)); }
  .lesson-deadline { color: #B8C4F7; }
  .lesson-deadline.deadline-warning { color: #F4C978; }
  .lesson-deadline.deadline-critical { color: #FF9D96; }
  .deadline-recovery, .recovery-balance { color: #F2B37C; }
  .schedule-badge.makeup { background: rgba(69,183,132,.16); color: #78D7A7; }
  .schedule-badge.missed { background: rgba(232,135,126,.15); color: #FFAAA2; }
  .schedule-calendar {
    box-shadow: 0 8px 20px rgba(21,28,57,.12), inset 0 1px rgba(255,255,255,.08); }
  .is-live .schedule-calendar {
    box-shadow: 0 9px 22px rgba(123,43,51,.14), inset 0 1px rgba(255,255,255,.08); }
  .schedule-next.is-live, .schedule-row.is-live { border-color: rgba(255,143,150,.25); }
}

@media (min-width: 1025px) and (prefers-color-scheme: dark) {
  .hello .name { background: var(--grad); -webkit-background-clip: text;
    background-clip: text; color: transparent; }
}

@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  body:has(.shell), .shell { background: #11142B; }
  body.has-shell { background: #11142B; }
  .topbar { background: transparent; }
  .content { background: var(--bg); border-top: 1px solid rgba(175,192,255,.12);
    box-shadow: 0 -14px 32px rgba(4,6,20,.2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important; }
}