/* STOMMEET — «Клиническая практика. Из первых рук».
   Тёмная клиническая академия: чернильно-синий фон, крупные кадры работы врача, сдержанный синий акцент.
   Красный — только прямой эфир. Светлые контрастные разделы включаются классом .theme-light. */

/* ---------- Шрифты (локально, без внешних CDN) ---------- */
@font-face { font-family: 'Geologica'; src: url(../fonts/geologica-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Geologica'; src: url(../fonts/geologica-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Geologica'; src: url(../fonts/geologica-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2'); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Токены: тёмная основа ---------- */
:root {
  color-scheme: dark;
  --bg: #08111D;
  --bg-2: #0D1926;
  --surface: #0D1926;
  --surface-2: #132338;
  --ink: #F5F7FA;
  --ink-2: #AAB6C5;
  --ink-3: #8592A3;
  --line: rgba(255, 255, 255, .15);
  --line-2: rgba(255, 255, 255, .08);
  --accent: #2F5BFF;
  --accent-hover: #3E63F0;
  --accent-text: #7D97FF;
  --accent-tint: rgba(47, 91, 255, .16);
  --live: #FF6767;
  --live-btn: #D9363E;
  --ok: #5AD19A;
  --focus: #8EA6FF;
  --outline: rgba(255, 255, 255, .85);

  /* Схемы-обложки на тёмном: «чертёж» */
  --art-tooth: #14233A;
  --art-stroke: #A9BBFF;
  --art-fis: rgba(169, 187, 255, .42);
  --art-blue: #5B7CFF;
  --art-red: #FF6767;
  --art-grid: rgba(169, 187, 255, .16);
  --art-num: #8EA0C8;
  --art-bone: #16243A;
  --art-dot: #2B3B57;
  --art-cortex: #3A4D6E;
  --art-gum: #3A2534;
  --art-gum-line: #6E4357;
  --art-metal: #7F8CA3;
  --art-metal-line: #D1D9E6;
  --art-pulp: #48303D;
  --art-pulp-line: #8C5A6A;
  --art-handle: #55627A;
  /* Свой глубокий оттенок у каждого из 10 направлений */
  --cv-default: #101D2E;
  --cv-therapy: #2E1B2D;
  --cv-orthopedics: #13254D;
  --cv-orthodontics: #221F4B;
  --cv-surgery: #0D2F31;
  --cv-pediatric: #30241A;
  --cv-implantology: #0B2B42;
  --cv-gnathology: #2A2140;
  --cv-periodontology: #1B2E23;
  --cv-photo: #2B2919;
  --cv-technicians: #23262E;

  --f-sans: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-hero: clamp(44px, 5vw, 76px);
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(30px, 2.8vw, 42px);

  --wrap: 1400px;
  --gutter: 64px;
  --section: 112px;
  --r: 8px;
  --r-card: 12px;
  --header-h: 64px;
}

/* ---------- Токены: светлые контрастные разделы ---------- */
.theme-light {
  color-scheme: light;
  --bg: #F5F6F7;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #ECEEF1;
  --ink: #101722;
  --ink-2: #4A5462;
  --ink-3: #636D7A;
  --line: rgba(16, 23, 34, .14);
  --line-2: rgba(16, 23, 34, .08);
  --accent-text: #2F5BFF;
  --accent-tint: rgba(47, 91, 255, .09);
  --live: #D2353D;
  --ok: #1F7A55;
  --focus: #2F5BFF;
  --outline: rgba(16, 23, 34, .45);

  --art-tooth: #FFFFFF;
  --art-stroke: #121722;
  --art-fis: #9AA2AC;
  --art-blue: #2B47DA;
  --art-red: #E2412F;
  --art-grid: rgba(18, 23, 34, .13);
  --art-num: #4A5260;
  --art-bone: #E6DFCE;
  --art-dot: #C9BB99;
  --art-cortex: #BCAF92;
  --art-gum: #ECD7D2;
  --art-gum-line: #CFADA5;
  --art-metal: #C9CFD8;
  --art-metal-line: #121722;
  --art-pulp: #F2DAD4;
  --art-pulp-line: #CFA096;
  --art-handle: #B7BEC8;
  --cv-default: #E6EAE8;
  --cv-therapy: #EAE5D9;
  --cv-orthopedics: #E2E8EC;
  --cv-orthodontics: #E5E3EE;
  --cv-surgery: #DDE8E2;
  --cv-pediatric: #EEE8DE;
  --cv-implantology: #DCE3F2;
  --cv-gnathology: #E8E2EE;
  --cv-periodontology: #E0EAE2;
  --cv-photo: #ECEADA;
  --cv-technicians: #E4E6EA;

  background: var(--bg);
  color: var(--ink);
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 14px; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 12px; }
#main { outline: none; min-height: 60vh; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 18px; height: 18px; flex: none; }
.muted { color: var(--ink-2); font-size: 15px; }
.note { color: var(--ink-2); font-size: 15px; margin: -20px 0 32px; }
.eyebrow { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }

/* ---------- Кнопки и ссылки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent; font: 500 16px/1 var(--f-sans); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn .ico { width: 18px; height: 18px; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost, .btn--outline-light { border-color: var(--outline); color: var(--ink); background: transparent; }
.btn--ghost:hover, .btn--outline-light:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--live { background: var(--live-btn); color: #fff; }
.btn--live:hover { background: #C42C33; }
.btn--light { background: #F5F7FA; color: #101722; }
.btn--light:hover { background: #fff; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px; transition: color .15s, border-color .15s; }
.link-arrow:hover { color: var(--accent-text); border-color: var(--accent-text); }
.link-arrow .ico { width: 16px; height: 16px; transition: transform .2s; }
.link-arrow:hover .ico { transform: translateX(3px); }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-text); font-weight: 500; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Метки, статусы, монограммы ---------- */
.tag { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 6px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; background: rgba(8, 17, 29, .82); color: #F5F7FA; border: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; }
.tag--live { color: #9FB2FF; }
.tag--onair { color: #FF8080; }
.tag--onair i, .status--live i, .live-strip__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; flex: none; }
.tag--muted { background: var(--surface-2); color: var(--ink-2); border-color: transparent; }
.tag--ok { background: rgba(90, 209, 154, .14); color: var(--ok); border-color: transparent; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.status--live, .status--dark { color: var(--live); }
.status--ok { color: var(--ok); }
@keyframes pulse { 50% { opacity: .35; } }

.who { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); text-decoration: none; min-width: 0; }
.who > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.who--lg { margin-top: 28px; color: var(--ink); }
.who--lg strong { display: block; font-weight: 600; }
.who--lg small { display: block; color: var(--ink-2); font-size: 14px; }
.who--lg .mono { width: 48px; height: 48px; font-size: 15px; }
a.who:hover strong { color: var(--accent-text); }
.who--dark { color: var(--ink-2); }

.mono { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r); background: var(--cv-default); color: var(--ink); font: 600 13px/1 var(--f-sans); letter-spacing: .03em; flex: none; border: 1px solid var(--line-2); }
.mono--therapy { background-color: var(--cv-therapy); }
.mono--orthopedics { background-color: var(--cv-orthopedics); }
.mono--orthodontics { background-color: var(--cv-orthodontics); }
.mono--surgery { background-color: var(--cv-surgery); }
.mono--pediatric { background-color: var(--cv-pediatric); }
.mono--implantology { background-color: var(--cv-implantology); }
.mono--gnathology { background-color: var(--cv-gnathology); }
.mono--periodontology { background-color: var(--cv-periodontology); }
.mono--photo { background-color: var(--cv-photo); }
.mono--technicians { background-color: var(--cv-technicians); }
.mono--lg, .mono--xl { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--r-card); font-size: clamp(30px, 4vw, 46px); font-weight: 600; background-image: radial-gradient(circle, var(--art-grid) 1px, transparent 1.3px); background-size: 16px 16px; background-position: 8px 8px; }
.mono--xl { font-size: clamp(40px, 5vw, 64px); }

/* ---------- Шапка ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: #08111D; border-bottom: 1px solid var(--line-2); }
.site-header__in { display: flex; align-items: center; gap: 44px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 10px; color: #F5F7FA; text-decoration: none; flex: none; }
.logo__mark { width: 39px; height: 36px; }
.logo__word { width: 103px; height: 17px; margin-top: 2px; }
.logo:hover { color: #fff; }
.main-nav { display: flex; gap: 38px; }
.main-nav a { position: relative; white-space: nowrap; padding: 8px 0; text-decoration: none; font-weight: 400; font-size: 16px; color: #E8EDF3; transition: color .15s; }
.main-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }
.main-nav a[aria-current] { color: #fff; }
.site-header__actions { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.site-header__actions .btn { height: 42px; padding: 0 16px; font-size: 14px; font-weight: 400; }
.site-header__actions a[aria-current].btn--ghost { background: #F5F7FA; color: #08111D; border-color: #F5F7FA; }
.demo-label { margin-right: 16px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.demo-label:hover { color: var(--ink); }
.header-link { font-size: 14px; color: #E8EDF3; text-decoration: none; white-space: nowrap; }
.header-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.demo-label b { color: var(--ink-2); font-weight: 500; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r); background: transparent; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: #F5F7FA; border-radius: 2px; transition: transform .2s; }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.mobile-menu { border-top: 1px solid var(--line-2); background: #08111D; }
.mobile-menu nav { display: flex; flex-direction: column; padding-top: 8px; padding-bottom: 24px; }
.mobile-menu a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line-2); font-weight: 600; font-size: 20px; text-decoration: none; }
.mobile-menu .btn { margin-top: 20px; }
.mobile-menu a.demo-label { margin: 20px 0 0; padding: 4px 0; border: 0; font-size: 12px; font-weight: 500; white-space: normal; }
@media (min-width: 1101px) { .mobile-menu { display: none; } }

/* ---------- Секции ---------- */
.section { padding: var(--section) 0; }
/* Заметно светлее основного фона, чтобы соседние тёмные секции не сливались */
.section--alt { background: #0F1E31; border-block: 1px solid var(--line-2); }
.section-gap { height: var(--section); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.section-head h2, .sec-title { font-size: var(--fs-h2); letter-spacing: -0.03em; max-width: 24ch; }
.section-head .eyebrow { margin-bottom: 14px; }
.page-head { padding: 56px 0 48px; }
.page-head h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; margin-top: 20px; }
.page-head__lead { margin-top: 18px; font-size: 19px; color: var(--ink-2); max-width: 44em; }
.page-head--slim { padding: 28px 0 20px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 13px/1.4 var(--f-mono); color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }
.crumbs [aria-current] { color: var(--ink-2); }

/* ---------- Первый экран ---------- */
/* Пропорции по макету: на 1440×900 первый экран ~560px, ниже уже видно начало «Выберите направление» */
.hero { position: relative; display: flex; flex-direction: column; min-height: clamp(560px, 39vw, 800px); background: #08111D; color: #F5F7FA; overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; }
.hero__media picture { display: contents; }
.hero__photo { position: absolute; top: 0; right: 0; width: min(80%, 1500px); height: 100%; object-fit: cover; object-position: 50% 12%; mask-image: linear-gradient(90deg, transparent, #000 30%); }
.hero__shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #08111D 0%, #08111D 21%, rgba(8, 17, 29, .82) 34%, rgba(8, 17, 29, .22) 50%, rgba(8, 17, 29, 0) 59%),
  linear-gradient(0deg, #08111D 0%, rgba(8, 17, 29, .8) 16%, rgba(8, 17, 29, 0) 30%),
  linear-gradient(180deg, rgba(8, 17, 29, .45) 0%, rgba(8, 17, 29, 0) 12%); }
.hero__caption { position: absolute; right: calc(var(--gutter) - 8px); bottom: 122px; padding: 6px 8px; border-radius: 4px; background: rgba(8, 17, 29, .66); font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: rgba(245, 247, 250, .82); }
.hero__inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; padding-top: 58px; padding-bottom: 30px; }
.hero__text { max-width: 640px; }
.hero__eyebrow { font: 500 13px/1.4 var(--f-mono); letter-spacing: .17em; text-transform: uppercase; color: #DCE3EC; }
.hero__title { margin: 19px 0 15px; font-size: var(--fs-hero); font-weight: 700; line-height: .94; letter-spacing: -0.04em; text-wrap: initial; }
.hero__title span { display: block; }
.hero__title .hl { color: #D9EAFA; }
.hero__lead { font-size: 21px; line-height: 1.5; color: #DCE3EC; max-width: 34em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 30px; }
.hero__cta .btn { padding: 0 36px; font-size: 16px; gap: 8px; }
.hero__cta .btn .ico { width: 16px; height: 16px; }
.hero__live { position: relative; width: 100%; padding-bottom: 16px; }
.live-strip { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 52px; min-height: 82px; margin: 0 -8px; padding: 16px 40px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; background: rgba(8, 17, 29, .74); }
.live-strip__label { display: inline-flex; align-items: center; gap: 22px; font: 600 15px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: #FF6767; }
/* Точка эфира всегда яркая, как в макете: пульсирует кольцо, а не прозрачность */
.live-strip__dot { width: 14px; height: 14px; color: #FF6767; animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 103, 103, .5); } to { box-shadow: 0 0 0 9px rgba(255, 103, 103, 0); } }
.live-strip__sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .26); }
.live-strip__title { font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: #F5F7FA; }
.live-strip__link { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 400; color: #5C80FF; text-decoration: none; white-space: nowrap; }
.live-strip__link::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.live-strip__link .ico { transition: transform .2s; }
.live-strip:hover { border-color: rgba(255, 255, 255, .32); }
.live-strip:hover .live-strip__link { color: #9FB2FF; }
.live-strip:hover .live-strip__link .ico { transform: translateX(4px); }
.live-strip:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.live-strip__link:focus-visible { outline: none; }

/* ---------- Выберите направление ---------- */
.dirs { padding: 26px 0 var(--section); }
.dirs .sec-title { margin-bottom: 18px; }
/* Поля 5px внутри прокрутки — чтобы рамка фокуса вкладки не обрезалась */
/* 10 направлений: на компьютере вкладки переносятся на вторую строку, на телефоне прокручиваются */
.dir-tabs { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 5px; margin: -5px -5px 17px; overflow-x: auto; scrollbar-width: none; }
.dir-tabs::-webkit-scrollbar { display: none; }
.dir-tab { position: relative; padding: 0 3px 11px; border: 0; background: none; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color .15s; }
.dir-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.dir-tab:hover { color: var(--ink); }
.dir-tab[aria-selected="true"] { color: var(--accent-text); }
.dir-tab[aria-selected="true"]::after { transform: scaleX(1); }
.dir-tab:focus-visible { outline-offset: 2px; }
.dir-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; transition: opacity .25s; }
.dir-cards.is-switching { opacity: .25; }
.dir-card { position: relative; display: block; height: clamp(340px, 32vw, 470px); border-radius: var(--r-card); overflow: hidden; background: #0D1926; color: #F5F7FA; text-decoration: none; isolation: isolate; }
.dir-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.dir-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 17, 29, .62) 0%, rgba(8, 17, 29, 0) 26%, rgba(8, 17, 29, 0) 40%, rgba(8, 17, 29, .62) 68%, rgba(8, 17, 29, .92) 100%); }
.dir-card:hover .dir-card__img { transform: scale(1.035); }
.dir-card__label { position: absolute; left: 24px; top: 21px; font: 600 13px/1 var(--f-sans); letter-spacing: .11em; text-transform: uppercase; }
.dir-card__body { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.dir-card__title, .dir-card__meta { display: block; }
.dir-card__title { font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; max-width: 24ch; }
.dir-card__meta { margin-top: 10px; font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; color: rgba(245, 247, 250, .78); }
.dir-card__go { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r); border: 1px solid rgba(255, 255, 255, .45); flex: none; transition: background .2s, border-color .2s; }
.dir-card:hover .dir-card__go { background: var(--accent); border-color: var(--accent); }
.dir-card:focus-visible { outline-offset: 4px; }
.dir-card--empty { background: #102033; }
.dir-card--empty::before { display: none; }
.dir-card__ico { position: absolute; left: 24px; top: 58px; color: #A9BBFF; }
.dir-card__ico .ico { width: 64px; height: 64px; }
.dir-card--empty .dir-card__title { font-size: 22px; }

/* ---------- Схемы-обложки ---------- */
.art path, .art circle, .art rect, .art line { vector-effect: non-scaling-stroke; }
.art--cover { width: 100%; height: 100%; }
.a-out { fill: var(--art-tooth); stroke: var(--art-stroke); stroke-width: 1.15px; stroke-linejoin: round; }
.a-fis { fill: none; stroke: var(--art-fis); stroke-width: .9px; stroke-linecap: round; stroke-linejoin: round; }
.a-blue { fill: var(--art-blue); opacity: .9; }
.a-red { fill: var(--art-red); opacity: .95; }
.a-num { font-family: var(--f-mono); font-size: 2.15px; fill: var(--art-num); text-anchor: middle; dominant-baseline: central; }
.a-num--cv { font-size: 5.4px; }
.a-cap { font: 500 5px var(--f-mono); fill: var(--art-num); dominant-baseline: central; }
.a-cap--mid { text-anchor: middle; }
.a-cap--end { text-anchor: end; }
.a-grid { fill: var(--art-grid); }
.a-prep { fill: none; stroke: var(--art-blue); stroke-width: 1.4px; stroke-dasharray: 5 3; }
.a-plan { fill: var(--accent-tint); stroke: var(--art-blue); stroke-width: 1.3px; stroke-dasharray: 4 3; }
.a-incision { fill: none; stroke: var(--art-blue); stroke-width: 2.4px; stroke-linecap: round; }
.a-guide { fill: var(--accent-tint); stroke: var(--art-blue); stroke-width: 1px; }
.a-axis { fill: none; stroke: var(--art-blue); stroke-width: 1.2px; stroke-dasharray: 4 3; }
.a-metal { fill: var(--art-metal); stroke: var(--art-metal-line); stroke-width: 1px; stroke-linejoin: round; }
.a-thread { fill: none; stroke: var(--art-metal-line); stroke-width: .9px; stroke-linejoin: round; }
.a-bone { fill: var(--art-bone); }
.a-cortex { stroke: var(--art-cortex); stroke-width: 2.2px; }
.a-dot { fill: var(--art-dot); opacity: .85; }
.a-gum { fill: var(--art-gum); stroke: var(--art-gum-line); stroke-width: .7px; }
.a-pulp { fill: var(--art-pulp); stroke: var(--art-pulp-line); stroke-width: .8px; }
.a-canal { fill: none; stroke: var(--art-blue); stroke-width: 2.4px; stroke-linecap: round; }
.a-nerve { fill: none; stroke: var(--art-red); stroke-width: 1.4px; stroke-dasharray: 3 2.5; }
.a-tick { fill: none; stroke: var(--art-num); stroke-width: 1px; }
.a-mesh { fill: none; stroke: var(--art-blue); stroke-width: .6px; opacity: .5; }
.a-pt { fill: var(--art-blue); opacity: .8; }
.a-scan { stroke: var(--art-blue); stroke-width: 22px; opacity: .1; }
.a-scan-edge { stroke: var(--art-blue); stroke-width: 1.4px; stroke-dasharray: 2 3; }
.a-ghost { fill: transparent; stroke-dasharray: 3 2.5; stroke: var(--art-num); }
.a-wire { fill: none; stroke: var(--art-blue); stroke-width: 1.6px; }
.a-bracket { fill: var(--art-metal); stroke: var(--art-metal-line); stroke-width: .8px; }
.a-handle { fill: var(--art-handle); }
.a-file { fill: none; stroke: var(--art-num); stroke-width: 1.5px; }
.a-stop { fill: var(--art-stroke); }
.a-tab { stroke: rgba(0, 0, 0, .25); stroke-width: .8px; }
.a-tab--sel { stroke: var(--art-blue); stroke-width: 2.2px; }
.a-red-line { fill: none; stroke: var(--art-red); stroke-width: 2.4px; stroke-linecap: round; }
.cv-bg { fill: var(--cv-default); }
.cv--therapy .cv-bg { fill: var(--cv-therapy); }
.cv--orthopedics .cv-bg { fill: var(--cv-orthopedics); }
.cv--orthodontics .cv-bg { fill: var(--cv-orthodontics); }
.cv--surgery .cv-bg { fill: var(--cv-surgery); }
.cv--pediatric .cv-bg { fill: var(--cv-pediatric); }
.cv--implantology .cv-bg { fill: var(--cv-implantology); }
.cv--gnathology .cv-bg { fill: var(--cv-gnathology); }
.cv--periodontology .cv-bg { fill: var(--cv-periodontology); }
.cv--photo .cv-bg { fill: var(--cv-photo); }
.cv--technicians .cv-bg { fill: var(--cv-technicians); }

/* ---------- Карточки программ ---------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; transition: border-color .2s, transform .2s; }
.card:hover { border-color: var(--line); }
.card__cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line-2); }
.card__tags { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.card__dir { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.card__title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ''; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--accent-text); }
.card__meta { font: 400 13px/1.55 var(--f-mono); color: var(--ink-2); }
.card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card__foot--act { position: relative; z-index: 1; }
.price { font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap; }
.price--lg { font-size: 28px; letter-spacing: -0.02em; }

.card--row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; padding: 14px; align-items: stretch; }
/* Обложка во всю высоту карточки: в «С чего начать» карточки тянутся по высоте главной, без пустоты внутри */
.card--row .card__cover { aspect-ratio: auto; min-height: 131px; align-self: stretch; border-radius: var(--r); border: 0; }
.card--row .card__tags { display: none; }
.card--row .card__body { padding: 2px 6px 2px 0; gap: 6px; }
.card--row .card__title { font-size: 18px; }
.card--row .card__foot { padding-top: 12px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Главная: курсы ближайшего потока ---------- */
.start__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
.start__list { display: grid; gap: 16px; }
.feature { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; }
.feature__cover { position: relative; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line-2); }
.feature__body { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 30px; flex: 1; }
.feature__title { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.feature__title a { text-decoration: none; }
.feature__title a:hover { color: var(--accent-text); }
.feature__lead { color: var(--ink-2); font-size: 16px; }
.feature__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.feature__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* ---------- Расписание ---------- */
.sched__list { border-bottom: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.srow__date { display: flex; flex-direction: column; gap: 4px; }
.srow__day { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.srow__day--now { font-size: 26px; color: var(--live); line-height: 1.15; }
.srow__mon, .srow__time { font: 400 13px/1.3 var(--f-mono); color: var(--ink-2); }
.srow__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.srow__dir { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.srow__title { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.srow__title a { text-decoration: none; }
.srow__title a:hover { color: var(--accent-text); }
.srow__act { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
/* Ближайший эфир: рамка и метка, чтобы его было видно в длинном расписании */
.srow--next { margin: 0 -20px; padding-left: 20px; padding-right: 20px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-tint); }
.srow--next + .srow { border-top-color: transparent; }
.srow__badge { display: inline-block; margin: 0 10px 4px 0; padding: 3px 8px; border-radius: 5px; background: var(--accent); color: #fff; letter-spacing: .08em; }

/* ---------- Об академии ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.statement { font-size: clamp(26px, 2.5vw, 36px); font-weight: 500; line-height: 1.28; letter-spacing: -0.02em; text-wrap: pretty; }
.principles { margin: 52px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.principles div { border-top: 2px solid var(--ink); padding-top: 18px; }
.principles dt { font-size: 17px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.principles dd { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
.about__photo { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 5; background: #0D1926; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; }

/* ---------- Преподаватели (полоса) ---------- */
.tgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.tcard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.tcard .mono { margin-bottom: 10px; transition: border-color .25s, transform .25s; }
.tcard:hover .mono { border-color: var(--line); transform: translateY(-3px); }
.tcard__name { font-size: 17px; font-weight: 600; line-height: 1.25; }
.tcard:hover .tcard__name { color: var(--accent-text); }
.tcard__spec { font-size: 14px; color: var(--ink-2); line-height: 1.4; }

/* ---------- Как проходит обучение ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.how__photo { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 5 / 6; background: #0D1926; }
.how__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.how__text h2 { font-size: var(--fs-h2); letter-spacing: -0.03em; max-width: 16ch; }
.steps { margin-top: 44px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 60px minmax(0, 1fr); padding: 22px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font: 500 14px/1.7 var(--f-mono); color: var(--accent-text); grid-row: span 2; }
.steps h3 { font-size: 20px; }
.steps p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }

/* ---------- Финальный блок ---------- */
.cta-final { position: relative; background: #08111D; color: #F5F7FA; overflow: hidden; padding: 128px 0; isolation: isolate; }
.cta-final__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: grayscale(1) contrast(1.1); z-index: -1; }
.cta-final::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #08111D 0%, rgba(8, 17, 29, .6) 60%, rgba(8, 17, 29, .3) 100%); }
.cta-final__in { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.cta-final h2 { font-size: clamp(34px, 4.4vw, 60px); letter-spacing: -0.035em; max-width: 14ch; }
.cta-final p { margin-top: 18px; color: var(--ink-2); font-size: 19px; }
.cta-final .chips { margin: 36px 0 40px; }

/* ---------- Фишки и сегменты ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 42px; padding: 0 16px; border-radius: var(--r); border: 1px solid var(--line); background: transparent; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: all .15s; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.chips--dark .chip { border-color: rgba(255, 255, 255, .3); color: #DDE3EB; }
.chips--dark .chip[aria-pressed="true"] { background: #F5F7FA; color: #08111D; border-color: #F5F7FA; }
.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button { height: 40px; padding: 0 18px; border: 0; border-radius: 7px; background: none; font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg button span { font: 400 12px var(--f-mono); color: var(--ink-3); margin-left: 4px; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); }
.seg button[aria-pressed="true"] span { color: var(--ink-2); }
/* Внутри прокрутки и обрезки рамка фокуса рисуется внутри кнопки */
.seg button:focus-visible, .room__tabs button:focus-visible, .cab-tabs a:focus-visible { outline-offset: -3px; }
.seg--dark { background: var(--surface); }

/* ---------- Каталог ---------- */
.catalog__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.catalog__tools { display: flex; gap: 10px; flex-wrap: wrap; }
.search { position: relative; display: block; }
.search input { width: 320px; height: 48px; padding: 0 16px 0 44px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 15.5px; }
.search input::placeholder { color: var(--ink-3); }
.search__ico { position: absolute; left: 15px; top: 15px; color: var(--ink-3); }
.select { position: relative; display: block; }
.select::after { content: ''; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); pointer-events: none; }
.select select { height: 48px; padding: 0 44px 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 15px; appearance: none; }
.select select option { background: #0D1926; color: #F5F7FA; }
.search input:focus, .select select:focus, .field input:focus, .field select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47, 91, 255, .25); }
.catalog > .chips { margin-bottom: 32px; }
.catalog__count { font: 400 13.5px var(--f-mono); color: var(--ink-2); margin: 8px 0 20px; }
.empty { grid-column: 1 / -1; padding: 60px 32px; border: 1px dashed var(--line); border-radius: var(--r-card); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty h2 { font-size: 22px; }
.empty p { color: var(--ink-2); }
.empty .btn { margin-top: 8px; }
.empty-line { padding: 32px 0; color: var(--ink-2); border-top: 1px solid var(--line); }

/* Рабочие разделы сохраняют композицию до публикации следующих программ. */
.study-formats { display: flex; flex-direction: column; height: 100%; }
.study-formats a { display: block; padding: 30px 0; border-top: 1px solid var(--line); text-decoration: none; flex: 1; }
.study-formats a:last-child { border-bottom: 1px solid var(--line); }
.study-formats h3 { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 24px; line-height: 1.3; }
.study-formats p { max-width: 42ch; margin-top: 12px; color: var(--ink-2); }
.study-formats a:hover h3 { color: var(--accent-text); }
.schedule-pending { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.schedule-pending h2, .schedule-pending h3 { font-size: 24px; line-height: 1.3; }
.schedule-pending p { max-width: 65ch; margin-top: 12px; color: var(--ink-2); }
.schedule-pending .btn { flex: none; }
.teacher-announcement { grid-column: span 3; align-self: center; padding: 28px; }
.teacher-announcement h3 { font-size: 24px; line-height: 1.3; }
.teacher-announcement p { max-width: 50ch; margin: 14px 0 20px; color: var(--ink-2); }
@media (max-width: 760px) {
  .schedule-pending { flex-direction: column; align-items: flex-start; gap: 24px; }
  .teacher-announcement { grid-column: 1 / -1; padding: 16px 0; }
  .study-formats h3 { font-size: 22px; }
}
.spotlight { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); overflow: hidden; margin-bottom: 40px; }
.spotlight img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.spotlight__text { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; }
.spotlight h2 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.025em; }
.spotlight__text > p:not(.eyebrow) { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.spotlight__topics { width: 100%; margin: 24px 0 28px; border-top: 1px solid var(--line-2); }
.spotlight__topics li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; }
.spotlight__topics a { font-weight: 500; text-decoration: none; }
.spotlight__topics a:hover { color: var(--accent-text); }
.spotlight__topics span { font: 400 12.5px/1.7 var(--f-mono); color: var(--ink-3); white-space: nowrap; }

/* ---------- Страница программы ---------- */
.prog-hero { padding: 40px 0 72px; }
.prog-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; margin-top: 32px; }
.prog-hero__tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.prog-hero h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.035em; }
.prog-hero__lead { margin-top: 22px; font-size: 19px; color: var(--ink-2); max-width: 36em; }
.prog-hero .card__meta { margin-top: 20px; font-size: 13.5px; }
.prog-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.prog-hero__price strong { display: block; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.prog-hero__price small { font: 400 12px var(--f-mono); color: var(--ink-3); }
.prog-hero__art { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line-2); }
.prog-light { padding-bottom: 72px; }
.prog-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 72px; padding-top: 24px; }
.prog-sec { padding-top: 52px; }
.prog-sec h2 { font-size: 28px; letter-spacing: -0.02em; margin-bottom: 22px; }
.prog-sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.prog-sec__lead { font-size: 18.5px; line-height: 1.6; max-width: 40em; }
.prog-two { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.dash li { position: relative; padding: 11px 0 11px 26px; border-bottom: 1px solid var(--line-2); font-size: 16px; }
.dash li::before { content: ''; position: absolute; left: 0; top: 23px; width: 12px; height: 2px; background: var(--ink); }
.dash--blue li::before { background: var(--accent); }
.lessons { border-top: 1px solid var(--line); }
.lesson { border-bottom: 1px solid var(--line); }
.lesson summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 24px; gap: 12px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; }
.lesson summary::-webkit-details-marker { display: none; }
.lesson summary:hover .lesson__t { color: var(--accent-text); }
.lesson__n { font: 500 13px var(--f-mono); color: var(--accent-text); }
.lesson__t { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.lesson__d { font: 400 13px var(--f-mono); color: var(--ink-2); white-space: nowrap; }
.lesson__chev { transition: transform .2s; color: var(--ink-2); }
.lesson[open] .lesson__chev { transform: rotate(180deg); }
.lesson ul { padding: 0 0 22px 60px; }
.lesson li { position: relative; padding: 5px 0 5px 18px; color: var(--ink-2); font-size: 16px; }
.lesson li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.agenda { border-top: 1px solid var(--line); }
.agenda li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line-2); font-size: 17px; }
.agenda__t { font: 500 13.5px/1.75 var(--f-mono); color: var(--accent-text); }
.teacher-box { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 28px; background: var(--surface); border-radius: var(--r-card); padding: 26px; border: 1px solid var(--line-2); }
.teacher-box__name { font-size: 22px; font-weight: 600; line-height: 1.2; }
.teacher-box__spec { margin: 6px 0 14px; color: var(--ink-2); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.teacher-box p + p { margin-top: 10px; }
.teacher-box .link-arrow { margin-top: 18px; }
.format { margin: 0; border-top: 1px solid var(--line); }
.format div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line-2); }
.format dt { font-weight: 600; font-size: 16px; }
.format dd { margin: 0; color: var(--ink-2); font-size: 16px; }
.prog-aside { padding-top: 52px; }
.price-card { position: sticky; top: calc(var(--header-h) + 24px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.price-card__label { font-size: 14px; color: var(--ink-2); }
.price-card__label small, .form__total small { font: 400 12px var(--f-mono); color: var(--ink-3); }
.price-card__price { font-size: 42px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; margin: 6px 0 22px; }
.price-card__facts { margin: 24px 0 0; border-top: 1px solid var(--line-2); }
.price-card__facts div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.price-card__facts dt { color: var(--ink-2); }
.price-card__facts dd { margin: 0; text-align: right; font-weight: 500; }
.price-card__note { margin-top: 16px; font: 400 12.5px/1.5 var(--f-mono); color: var(--ink-3); }
.related { padding-top: 96px; }
.buybar { display: none; }

/* ---------- Вебинары ---------- */
.web-top { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-bottom: 56px; }
.onair-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.onair-panel__text { padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.onair-panel h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; }
.onair-panel h2 a { text-decoration: none; }
.onair-panel h2 a:hover { color: var(--accent-text); }
.onair-panel p:not(.who) { color: var(--ink-2); font-size: 16px; }
.onair-panel__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 12px; }
.onair-panel__art { min-height: 280px; border-left: 1px solid var(--line-2); }
.onair-panel__art svg { height: 100%; }
.next-panel { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.next-panel .eyebrow { margin: 0; }
.next-panel h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; }
.next-panel h2 a { text-decoration: none; }
.next-panel h2 a:hover { color: var(--accent-text); }
.next-panel__label { margin-top: auto; padding-top: 16px; font-size: 14px; color: var(--ink-2); }
.next-panel__count { font: 500 32px/1.1 var(--f-mono); letter-spacing: -0.02em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.web-bar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; scroll-margin-top: calc(var(--header-h) + 16px); }
.web-bar__dir { font: 500 13px/1.4 var(--f-mono); letter-spacing: .04em; color: var(--ink-2); }
.web-list { margin-top: 32px; }

/* ---------- Направления на странице «Вебинары» ---------- */
.ico--dir { stroke-width: 1.6; }
.wdirs { margin: 56px 0 40px; }
.wdirs__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.wdirs__head h2 { font-size: 26px; letter-spacing: -0.02em; }
.wdirs__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.wdir { width: 100%; height: 100%; min-height: 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s, background .15s; }
.wdir:hover { border-color: var(--line); }
.wdir__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 10px; background: var(--surface-2); color: var(--accent-text); }
.wdir__ico .ico { width: 26px; height: 26px; }
.wdir__name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.wdir__meta { margin-top: auto; font: 400 12.5px/1.4 var(--f-mono); color: var(--ink-3); }
.wdir[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.wdir[aria-pressed="true"] .wdir__ico { background: var(--accent); color: #fff; }
/* Separate photos and captions only in the ten webinar direction filters. */
.wdir.wdir--photo { position: relative; isolation: isolate; overflow: hidden; padding: 0; gap: 0; align-items: stretch; }
.wdir--photo .wdir__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; flex: none; pointer-events: none; }
.wdir--photo .wdir__ico { display: none; }
.wdir--photo .wdir__name { display: flex; align-items: center; flex: 1; min-height: 64px; padding: 12px 8px; background: #0D1926; color: #F5F7FA; overflow-wrap: anywhere; }
.wdir--photo[aria-pressed="true"]::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: inherit; pointer-events: none; }

.empty-dir { display: flex; gap: 20px; align-items: flex-start; padding: 28px; border: 1px dashed var(--line); border-radius: var(--r-card); }
.empty-dir__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); flex: none; }
.empty-dir__ico .ico { width: 30px; height: 30px; }
.empty-dir__title { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.empty-dir p { color: var(--ink-2); max-width: 44em; }
.empty-dir__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- Лекторы: список и профиль ---------- */
.lgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lcard { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 20px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-decoration: none; transition: border-color .2s; }
.lcard:hover { border-color: var(--line); }
.lcard:hover .lcard__name { color: var(--accent-text); }
.lcard__photo { margin-bottom: 12px; aspect-ratio: 4 / 3 !important; }
.lcard__spec, .lect__spec { font: 500 12.5px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.lcard__name { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.lcard__meta { font-size: 15px; color: var(--ink-2); }
.lcard__foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 13px var(--f-mono); color: var(--ink-3); }
.lect { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; margin-top: 28px; align-items: start; }
.lect__photo { margin: 0; }
.lect__photo .mono { aspect-ratio: 4 / 5; }
.lect__photo figcaption { margin-top: 10px; font: 400 12.5px var(--f-mono); color: var(--ink-3); }
.lect__name { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 0; }
.lect__main > p { color: var(--ink-2); max-width: 44em; margin-top: 14px; }
.lect__main .tags { margin: 18px 0 6px; }
.lect__facts { margin: 28px 0 0; border-top: 1px solid var(--line); }
.lect__facts div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.lect__facts dt { font-weight: 600; }
.lect__facts dd { margin: 0; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lect__facts small { font-size: 14px; color: var(--ink-3); }
.lect-progs { display: grid; gap: 48px; }
.lect-progs__h { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 8px; }

/* ---------- Регистрация, «О нас», кабинет ---------- */
.reg { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 380px); gap: 56px; align-items: start; }
.reg__form { padding: 28px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.reg__side { display: grid; gap: 16px; }
.reg__side p { color: var(--ink-2); font-size: 15px; }
.reg__done { display: grid; gap: 12px; justify-items: start; }
.reg__done-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; }
.reg__done-title .ico { color: var(--ok); }
.reg__done p { color: var(--ink-2); }
.cab-reg { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(47, 91, 255, .35); background: var(--accent-tint); }
.cab-reg p { color: var(--ink-2); }
.cab-reg strong { color: var(--ink); }
.about-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; margin-top: var(--section); align-items: start; }
.about-more p { color: var(--ink-2); margin-bottom: 14px; }
.about-more .doc-list { margin-bottom: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tags li { font-size: 14px; padding: 7px 12px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); }

/* ---------- Кабинет ---------- */
.cab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.cab { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.cab-pane { min-width: 0; }
.cab-tabs { display: flex; flex-direction: column; position: sticky; top: calc(var(--header-h) + 24px); border-top: 1px solid var(--line); }
.cab-tabs a { display: flex; justify-content: space-between; align-items: center; padding: 15px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; color: var(--ink-2); }
.cab-tabs a span { font: 400 12.5px var(--f-mono); color: var(--ink-3); }
.cab-tabs a:hover { color: var(--ink); }
.cab-tabs a[aria-current] { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); padding-left: 16px; }
.cab-list { display: grid; gap: 16px; }
.cab-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 26px; align-items: center; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); padding: 16px 26px 16px 16px; }
.cab-item__art { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.cab-item h3 { font-size: 20px; line-height: 1.25; margin: 6px 0 6px; }
.cab-item h3 a { text-decoration: none; }
.cab-item h3 a:hover { color: var(--accent-text); }
.cab-item__progress { display: flex; align-items: center; gap: 12px; margin-top: 12px; font: 400 12.5px var(--f-mono); color: var(--ink-2); }
/* Прогресс — как градуировка пародонтального зонда */
.probe { display: inline-flex; gap: 3px; align-items: center; }
.probe i { width: 22px; height: 6px; background: var(--surface-2); border-radius: 1px; }
.probe i:nth-child(3n) { height: 10px; }
.probe i.on { background: var(--accent); }
[data-learning-content] .cab-item__progress, [data-learning-content] .probe { flex-wrap: wrap; }
[data-lesson-progress] .btn { max-width: 100%; height: auto; min-height: 48px; padding-top: 14px; padding-bottom: 14px; white-space: normal; line-height: 1.4; text-align: center; }
[data-lesson-progress] .btn:disabled { cursor: wait; opacity: .65; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-card); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 500 12px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding: 15px 20px; border-bottom: 1px solid var(--line); }
.table td { padding: 15px 20px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td:first-child { white-space: nowrap; font: 400 13.5px/1.6 var(--f-mono); color: var(--ink-2); }
.table a { text-decoration: none; font-weight: 500; }
.table a:hover { color: var(--accent-text); }
.table td:last-child { white-space: nowrap; font-size: 13.5px; color: var(--ink-2); }
.cab-reset { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; color: var(--ink-2); font-size: 15px; flex-wrap: wrap; }

/* ---------- Урок ---------- */
.learn { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.learn__main .eyebrow { margin-top: 34px; margin-bottom: 8px; }
.learn__title { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.learn__sub { font-size: 19px; margin: 34px 0 12px; }
.learn__chapters { border-top: 1px solid var(--line); margin-bottom: 20px; }
.learn__chapters button, .room__agenda button { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; font-size: 16px; }
.learn__chapters button:hover span:last-child { color: var(--accent-text); }
.learn__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.learn__side { position: sticky; top: calc(var(--header-h) + 24px); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; }
.learn__side h2 { font-size: 19px; line-height: 1.25; margin: 8px 0 4px; }
.learn__side h2 a { text-decoration: none; }
.learn__lessons { margin-top: 18px; border-top: 1px solid var(--line-2); }
.learn__lessons a { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line-2); text-decoration: none; font-size: 15px; line-height: 1.35; border-radius: 6px; }
.learn__lessons a:hover { background: var(--surface-2); }
.learn__lessons small { display: block; margin-top: 3px; font: 400 12px var(--f-mono); color: var(--ink-3); }
.learn__lessons .is-cur a { background: var(--accent-tint); font-weight: 600; }
.learn__mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); font: 500 11.5px var(--f-mono); color: var(--ink-2); }
.is-done .learn__mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.is-done .learn__mark .ico { width: 15px; height: 15px; }

/* ---------- Комната эфира ---------- */
.room { padding: 24px 0 80px; }
.room__wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.room__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.room__back { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; font-size: 15px; }
.room__back:hover { color: var(--ink); }
.room__state { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.room__state-label { font: 400 12.5px var(--f-mono); color: var(--ink-2); }
.room__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; align-items: start; }
.room__notice { margin-top: 14px; padding: 13px 16px; border: 1px dashed var(--line); border-radius: 10px; font-size: 14px; color: var(--ink-2); }
.room__notice strong { color: var(--ink); }
.room__notice--light { border-color: var(--line); }
.room__head { margin-top: 30px; }
.room__kicker { font: 500 12.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.room__head h1 { font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.025em; margin: 10px 0 16px; }
.room__agenda { margin-top: 38px; }
.room__agenda h2 { font-size: 20px; margin-bottom: 12px; }
.room__agenda ol { border-top: 1px solid var(--line); }
.room__agenda li > div, .room__agenda button { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 16px; color: var(--ink); }
.room__agenda button:hover span:nth-child(2) { color: var(--accent-text); }
.room__agenda .is-cur > * { font-weight: 600; }
.agenda__now { font: 500 11.5px var(--f-mono); color: var(--live); text-transform: uppercase; letter-spacing: .08em; }
.room__side { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; height: min(720px, calc(100vh - var(--header-h) - 32px)); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.room__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-2); }
.room__tabs button { height: 52px; border: 0; background: none; color: var(--ink-2); font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent; }
.room__tabs button span { font: 400 12px var(--f-mono); }
.room__tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.room__feed { flex: 1; overflow-y: auto; padding: 14px 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.feed { display: grid; gap: 10px; }
.feed-note { font-size: 14px; color: var(--ink-2); padding: 11px 13px; border-radius: var(--r); background: var(--surface-2); margin-bottom: 12px; }
.feed-note--light { margin: 12px 0 0; border: 1px solid var(--line-2); }
.msg { padding: 11px 13px; border-radius: 10px; background: var(--surface-2); }
.msg__who { font: 500 12px/1.4 var(--f-mono); color: var(--ink-2); margin-bottom: 4px; }
.msg__text { font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.msg--mod { background: var(--accent-tint); }
.msg--mod .msg__who { color: var(--accent-text); }
.msg--mine { box-shadow: inset 2px 0 0 var(--accent); }
.msg__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.vote { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--ink-2); font: 500 12.5px var(--f-mono); }
.vote .ico { width: 14px; height: 14px; }
.vote[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.link-btn--light { color: var(--accent-text); font-size: 13px; }
.room__form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line-2); }
.room__form[hidden] { display: none; }
.room__form textarea { flex: 1; min-width: 0; min-height: 72px; max-height: 140px; resize: vertical; padding: 11px 13px; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.4; }
.room__form textarea::placeholder { color: var(--ink-3); }
.room .who--dark { text-decoration: none; }
.room a.who--dark:hover span { color: var(--ink); }

/* ---------- Плеер ---------- */
.player { border-radius: 14px; overflow: hidden; background: #000; color: #fff; border: 1px solid var(--line-2); }
.player__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0D1926; }
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player--before .player__poster { filter: brightness(.36) saturate(.8); }
.player__slide { position: absolute; inset: 0; display: none; }
.player--live .player__slide, .player--recording .player__slide { display: block; }
.slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.slide__text { display: flex; flex-direction: column; padding: 6% 5%; }
.slide__n { font: 500 clamp(9px, 1.1vw, 13px)/1.4 var(--f-mono); color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; }
.slide__title { margin-top: 4%; font-size: clamp(15px, 2.4vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; }
.slide__next { margin-top: 5%; padding-top: 4%; border-top: 1px solid var(--line); font-size: clamp(9px, 1.05vw, 14px); line-height: 1.4; color: var(--ink-2); }
.slide__who { margin-top: auto; font: 400 clamp(8px, 1vw, 12.5px)/1.4 var(--f-mono); color: var(--ink-2); }
.slide__art { position: relative; }
.slide__art svg { position: absolute; inset: 0; height: 100%; }
.player__pip { position: absolute; right: 2%; bottom: 3%; width: 21%; aspect-ratio: 4 / 3; border-radius: var(--r); background: #132338; border: 1px solid rgba(255, 255, 255, .14); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6%; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.player--live .player__pip, .player--recording .player__pip { display: flex; }
.player__pip .mono { width: 34%; height: auto; aspect-ratio: 1; font-size: clamp(10px, 1.3vw, 18px); color: #F5F7FA; }
.player__pip > span:nth-child(2) { font: 400 clamp(7px, .8vw, 11px) var(--f-mono); color: #AAB6C5; }
.eq { display: inline-flex; gap: 2px; height: 10%; align-items: flex-end; }
.eq i { width: 3px; height: 40%; background: #7D97FF; border-radius: 1px; }
.is-playing .eq i { animation: eq .9s ease-in-out infinite; }
.is-playing .eq i:nth-child(2) { animation-delay: .2s; }
.is-playing .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 50% { height: 100%; } }
.player__badge { position: absolute; right: 2.5%; top: 4%; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px; border-radius: 6px; background: var(--live-btn); font: 600 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.player__badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.6s infinite; }
.player__big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: opacity .2s, transform .2s; }
.player__big .ico { width: 30px; height: 30px; margin-left: 4px; }
.player__big:hover { transform: scale(1.05); }
.is-playing .player__big, .player--live .player__big { opacity: 0; pointer-events: none; }
.player__before { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 8px; }
.player__before-label { font: 400 13px var(--f-mono); color: #C3CCD8; text-transform: uppercase; letter-spacing: .12em; }
.player__count { font: 500 clamp(32px, 5.4vw, 64px)/1.1 var(--f-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.player__before-sub { color: #C3CCD8; font-size: 15px; margin-bottom: 18px; }
.player__ok { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r); background: rgba(255, 255, 255, .1); font-size: 15px; }
.player__controls { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #08111D; }
.pbtn { width: 40px; height: 40px; border-radius: var(--r); border: 0; background: none; color: #fff; display: grid; place-items: center; flex: none; }
.pbtn:hover { background: #132338; }
.pbtn--text { font: 600 13px var(--f-mono); width: 48px; }
.player__time { font: 400 13px var(--f-mono); color: #C3CCD8; margin: 0 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.player__bar { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.player__bar::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: #1E3150; }
.player__bar--live { cursor: default; }
.player__fill { position: absolute; left: 0; top: 12px; height: 4px; border-radius: 2px; background: #7D97FF; }
.player--live .player__fill { background: #FF6767; }
.player__tick { position: absolute; top: 10px; width: 2px; height: 8px; background: #5C6B82; margin-left: -1px; }
.player__thumb { position: absolute; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; }
.player__bar--live .player__thumb { display: none; }
.player__live { font: 600 11.5px var(--f-mono); letter-spacing: .1em; color: #FF8080; padding: 0 8px; }
.player:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; }
.player:fullscreen .player__screen { aspect-ratio: auto; flex: 1; }

/* ---------- Формы и модальное окно ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(4, 9, 16, .72); }
.modal__dialog { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface); color: var(--ink); border-radius: 16px; padding: 34px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: var(--r); background: none; display: grid; place-items: center; color: var(--ink-2); }
.modal__close:hover { background: var(--surface-2); color: var(--ink); }
.modal__title { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; padding-right: 36px; }
.modal__title:focus { outline: none; }
.modal__sub { margin: 8px 0 24px; font: 400 13.5px/1.5 var(--f-mono); color: var(--ink-2); }
.modal__dialog > p:not(.eyebrow):not(.modal__sub) { margin-bottom: 12px; color: var(--ink-2); }
.modal__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.done-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.done-mark .ico { width: 26px; height: 26px; }
body.has-modal { overflow: hidden; }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 500; font-size: 15px; }
.field input:not([type="checkbox"]), .field select { height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: 16px; }
.field select { appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101722' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px; }
.field [aria-invalid="true"] { border-color: var(--live) !important; }
.field__err { color: var(--live); font-size: 14px; }
.field__err:empty { display: none; }
.field--check { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); }
.field--check label { font-weight: 400; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.field--check .field__err { grid-column: 2; }
.form__total { display: flex; justify-content: space-between; align-items: baseline; padding: 15px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.form__total strong { font-size: 22px; font-weight: 600; }
.form__note { font: 400 12.5px/1.5 var(--f-mono); color: var(--ink-3); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translate(-50%, 140%); max-width: calc(100% - 32px); background: #F5F7FA; color: #101722; padding: 14px 20px; border-radius: 10px; font-size: 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s, visibility .3s; pointer-events: none; opacity: 0; visibility: hidden; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Инструкция для заказчика ---------- */
.guide { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
.guide__steps { counter-reset: g; border-top: 1px solid var(--line); }
.guide-step { counter-increment: g; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.guide-step::before { content: counter(g, decimal-leading-zero); font: 500 14px/1.9 var(--f-mono); color: var(--accent-text); }
.guide-step h2 { font-size: 22px; letter-spacing: -0.015em; margin-bottom: 8px; }
.guide-step p { color: var(--ink-2); max-width: 40em; }
.guide-step__note { margin-top: 8px; font-size: 15px; padding-left: 14px; border-left: 2px solid var(--line); }
.guide__side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.guide-box { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; }
.guide-box h2 { font-size: 18px; margin-bottom: 14px; }
.guide-box .dash li { font-size: 15px; padding-top: 9px; padding-bottom: 9px; }
.guide-box .dash li::before { top: 20px; }
.guide-box--dark { background: var(--accent-tint); border-color: rgba(47, 91, 255, .35); }
.guide-box--dark p { color: var(--ink-2); font-size: 15px; }
.guide-box__small { margin-top: 12px; font: 400 12.5px/1.5 var(--f-mono); color: var(--ink-3) !important; }
.legend-list { margin: 0; display: grid; gap: 14px; }
.legend-list div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.legend-list dt { display: flex; justify-content: center; }
.legend-list dd { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.swatch { display: block; width: 40px; height: 24px; border-radius: 6px; }
.swatch--blue { background: var(--accent); }
.swatch--red { background: var(--live); }
.legend-art { display: block; width: 72px; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; }

/* ---------- Документы ---------- */
.doc > * { max-width: 780px; }
.doc h2 { font-size: 22px; margin: 34px 0 12px; }
.doc p { color: var(--ink-2); margin-bottom: 14px; }
.doc-note { padding: 15px 18px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.doc-list { counter-reset: d; border-top: 1px solid var(--line); margin-bottom: 20px; }
.doc-list li { counter-increment: d; display: grid; grid-template-columns: 44px minmax(0, 1fr); padding: 13px 0; border-bottom: 1px solid var(--line-2); }
.doc-list li::before { content: counter(d, decimal-leading-zero); font: 500 13px/1.7 var(--f-mono); color: var(--accent-text); }

/* ---------- Подвал ---------- */
.site-footer { background: #050B14; color: #AAB6C5; padding: 72px 0 44px; border-top: 1px solid var(--line-2); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.site-footer__brand .logo__mark { width: 44px; height: 40px; }
.site-footer__brand .logo__word { width: 116px; height: 19px; }
.site-footer__brand p { margin-top: 18px; max-width: 26em; font-size: 15px; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer h2 { font: 500 12px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #F5F7FA; margin-bottom: 6px; }
.site-footer nav a { text-decoration: none; font-size: 15px; }
.site-footer nav a:hover { color: #F5F7FA; }
.site-footer__note { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-2); font: 400 12.5px/1.6 var(--f-mono); color: #8592A3; }

/* ---------- Адаптив ---------- */
/* Уже 1360px подзаголовок героя в две строки, чтобы не заходить на перчатку на фото */
@media (max-width: 1360px) {
  .hero__lead { max-width: 22em; text-wrap: balance; }
  .main-nav { gap: 24px; }
  .site-header__in { gap: 28px; }
}

@media (max-width: 1240px) {
  :root { --gutter: 40px; }
  .site-header__actions .demo-label { margin-right: 8px; }
  .site-header__actions .demo-label b { display: none; }
  .main-nav { gap: 20px; }
  .site-header__in { gap: 24px; }
  .site-header__actions { gap: 10px; }
  .hero__caption { display: none; }
  .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wdirs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lect { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
  .reg { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 32px; }
  .room__grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .web-top { grid-template-columns: minmax(0, 1fr); }
}

/* Шапка с 4 пунктами меню и двумя кнопками не помещается уже на планшете: меню уходит в «бургер» */
@media (max-width: 1100px) {
  .main-nav { display: none; }
  .burger { display: block; }
}

@media (max-width: 1024px) {
  :root { --section: 88px; }
  .main-nav { gap: 22px; }
  .site-header__in { gap: 28px; }
  .hide-sm { display: none; }
  .live-strip { padding: 18px 28px; gap: 22px; }
  .live-strip__title { font-size: 20px; }
  .about__grid, .how__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__photo { aspect-ratio: 16 / 10; }
  .how__photo { aspect-ratio: 16 / 10; order: 2; }
  .start__grid { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .prog-body { grid-template-columns: 1fr; gap: 0; }
  .prog-aside, .prog-hero__cta { display: none; }
  .buybar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; justify-content: space-between; align-items: center; gap: 16px; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: #0D1926; border-top: 1px solid var(--line); }
  .buybar__price { display: block; font-size: 21px; font-weight: 600; line-height: 1.1; }
  .buybar__note { font: 400 11.5px var(--f-mono); color: var(--ink-3); }
  body[data-page="program"] .site-footer { padding-bottom: 110px; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight img { aspect-ratio: 16 / 7; min-height: 0; }
  /* На узких экранах чат идёт сразу после плеера, описание — ниже */
  .room__grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .room__main { display: contents; }
  .room [data-player] { order: 1; }
  .room__notice { order: 2; }
  .room__side { order: 3; position: static; height: 480px; margin-top: 16px; }
  .room__head { order: 4; }
  .room__agenda { order: 5; }
  .learn, .guide { grid-template-columns: 1fr; }
  .learn__side, .guide__side { position: static; }
  .cab { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cab-tabs { position: static; flex-direction: row; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .cab-tabs a { border-bottom: 2px solid transparent; padding: 13px 14px; gap: 8px; white-space: nowrap; }
  .cab-tabs a[aria-current] { box-shadow: none; border-bottom-color: var(--accent); padding-left: 14px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* Планшет и телефон: первый экран столбиком — текст, затем фото целиком (руки, инструмент и модель не под текстом), затем эфир */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { order: 1; padding-top: 44px; padding-bottom: 32px; }
  .hero__media { position: relative; inset: auto; order: 2; z-index: 0; }
  .hero__photo { position: relative; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-position: 50% 50%; mask-image: none; }
  .hero__shade { background: linear-gradient(180deg, #08111D 0%, rgba(8, 17, 29, 0) 22%), linear-gradient(0deg, #08111D 0%, rgba(8, 17, 29, 0) 25%); }
  .hero__caption { display: block; bottom: 22px; }
  .hero__title { font-size: clamp(44px, 7vw, 60px); }
  .hero__live { order: 3; padding-bottom: 28px; }
  .live-strip { margin: 0; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 64px; --section: 72px; }
  body { font-size: 16px; }
  .site-header__actions .btn { display: none; }
  .logo__mark { width: 33px; height: 30px; }
  .logo__word { width: 86px; height: 14px; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
  .page-head h1 { font-size: clamp(30px, 8vw, 40px); overflow-wrap: break-word; }

  /* Телефон: отдельная обрезка фото, кадр 5:4 (~300px), плотные отступы — эфир и начало каталога видны быстрее */
  .hero__inner { padding-top: 28px; padding-bottom: 20px; }
  .hero__photo { aspect-ratio: 5 / 4; object-position: 50% 45%; }
  .hero__title { font-size: clamp(38px, 11vw, 48px); margin: 14px 0; }
  .hero__lead { font-size: 17px; }
  .hero__cta { margin-top: 22px; gap: 10px; }
  .hero__cta .btn { flex: 1 1 100%; height: 52px; }
  .hero__live { padding-bottom: 20px; }
  .live-strip { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; min-height: 0; }
  .live-strip__sep { display: none; }
  .live-strip__title { font-size: 19px; }
  .live-strip__link { font-size: 16px; margin-top: 4px; }

  .dirs { padding: 44px 0 var(--section); }
  .dir-tabs { flex-wrap: nowrap; gap: 28px; margin: -5px calc(var(--gutter) * -1) 23px; padding: 5px var(--gutter); }
  .dir-tab { font-size: 16px; padding-bottom: 14px; }
  .dir-cards { grid-template-columns: 1fr; gap: 16px; }
  .dir-card { height: 300px; }
  .dir-card__label { left: 20px; top: 20px; }
  .dir-card__body { left: 20px; right: 20px; bottom: 20px; }
  .dir-card__title { font-size: 20px; }
  .dir-card__go { width: 44px; height: 44px; }

  .principles { grid-template-columns: 1fr; gap: 22px; margin-top: 38px; }
  .card--row { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .card--row .card__meta, .card--row .card__foot .who { display: none; }
  .grid, .grid--3 { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; padding: 22px 0; }
  .srow__day { font-size: 34px; }
  .srow__day--now { font-size: 20px; }
  .srow__title { font-size: 18px; }
  .srow__act { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .catalog__bar { flex-direction: column; align-items: stretch; }
  .catalog__tools { display: grid; grid-template-columns: 1fr; }
  .search input { width: 100%; }
  .catalog > .chips, .wrap > .chips { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); margin-top: -5px; padding: 5px var(--gutter); scrollbar-width: none; }
  .chip { flex: none; }
  .spotlight__text { padding: 26px 20px; }
  .spotlight__topics li { flex-direction: column; gap: 2px; }
  .prog-two { grid-template-columns: 1fr; gap: 0; }
  .lesson summary { grid-template-columns: 36px minmax(0, 1fr) 20px; }
  .lesson__d { grid-column: 2; grid-row: 2; }
  .lesson__chev { grid-row: 1; grid-column: 3; }
  .lesson ul { padding-left: 48px; }
  .teacher-box { grid-template-columns: 1fr; }
  .teacher-box .mono--lg { width: 96px; }
  .format div { grid-template-columns: 1fr; gap: 4px; }
  .onair-panel { grid-template-columns: 1fr; }
  .onair-panel__art { min-height: 0; aspect-ratio: 16 / 9; order: -1; border-left: 0; border-bottom: 1px solid var(--line-2); }
  .onair-panel__text, .next-panel { padding: 24px 20px; }
  .next-panel .btn { width: 100%; padding: 0 14px; }
  .wdirs { margin: 40px 0 28px; }
  .srow--next { margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
  .wdirs__head { flex-wrap: wrap; gap: 10px; }
  .wdirs__head h2 { font-size: 22px; }
  .wdirs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wdir { min-height: 0; padding: 14px; }
  .wdir__ico { width: 38px; height: 38px; margin-bottom: 4px; }
  .wdir__name { font-size: 15px; }
  .empty-dir { flex-direction: column; padding: 20px; }
  .lgrid { grid-template-columns: 1fr; gap: 16px; }
  .lect { grid-template-columns: 1fr; gap: 24px; }
  .lect__photo .mono { width: 160px; }
  .lect__facts div { grid-template-columns: 1fr; gap: 4px; }
  .reg { grid-template-columns: 1fr; }
  .reg__form { padding: 20px; }
  .about-more { grid-template-columns: 1fr; }
  .cab-item { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .cab-item .btn { justify-self: start; }
  .room { padding-top: 16px; }
  .room__wrap { padding: 0 12px; }
  .room__state { width: 100%; }
  .slide { grid-template-columns: 1fr 1fr; }
  .player__pip { width: 26%; }
  .player__time { display: none; }
  .pbtn { width: 36px; height: 36px; }
  .room__agenda li > div, .room__agenda button, .learn__chapters button { grid-template-columns: 72px minmax(0, 1fr); }
  .agenda__now { grid-column: 2; }
  .guide-step { grid-template-columns: 36px minmax(0, 1fr); }
  .guide-step .btn { grid-column: 2; justify-self: start; }
  .modal { padding: 0; align-items: end; }
  .modal__dialog { max-width: none; border-radius: 16px 16px 0 0; padding: 28px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 92vh; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .table td:last-child, .table td:first-child { white-space: normal; }
}

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

/* Hidden registration actions must stay hidden when a local test user is signed in. */
[data-register][hidden] { display: none !important; }

/* Uploaded lecturer portraits use the same sizes as the original monograms. */
img.mono--photo-image { object-fit: cover; background-image: none; }

/* Keep the public header inside narrow phone viewports without clipping controls. */
@media (max-width: 380px) {
  .site-header__in { gap: 12px; }
  .site-header__actions { min-width: 0; }
  .site-header__actions .demo-label { min-width: 0; margin-right: 0; white-space: normal; overflow-wrap: anywhere; text-align: right; }
  .site-header__actions .burger { flex: none; }
}
@media (max-width: 350px) {
  .site-header__in { gap: 4px; }
  .site-header__actions { gap: 6px; }
  .site-header__actions .demo-label { letter-spacing: .04em; }
  .wdir--photo .wdir__name { font-size: 13px; padding-inline: 6px; }
}