/* =========================================================
   Редизайн (прототип, только localhost): мятный фон как у Сбера, яркий изумруд вместо тёмного «вечернего
   фасада», персонажи «акрилом» (SVG-фильтр #acrylic в index.html), футер с полупрозрачным логотипом.
   Файл подключается после styles.css и переопределяет токены; старые стили не трогаем.
   ========================================================= */
:root {
  --bg: #D7F1E2;            /* мятная бумага */
  --surface: #FFFFFF;
  --surface-2: #EAF8F0;
  --ink: #0F2A21;
  --ink-2: #2F4A41;
  --muted: #4A6A5E;         /* второстепенный текст: 5:1 на мятном фоне */
  --line: #C3E4D1;
  --accent: #0F7350;        /* зелёный для текста, ссылок и кнопок: 4.9:1 на мятном фоне */
  --accent-hover: #0B5E41;
  --accent-bright: #1E9E6E; /* яркий зелёный только для заливок и иконок, не для текста */
  --accent-soft: #CFEFDD;
  --accent-softer: #E6F7EE;
  --night: #0E6E54;         /* изумруд ярче прежнего #0F2E28 */
  --night-hover: #128566;
  --night-2: #117A5E;
  --night-3: #1A8F6E;
  --butter: #F6D86A;
  --butter-soft: #FBF0C4;
  --field-line: #6E9484;
  --shadow: 0 1px 2px rgba(14, 110, 84, .06), 0 12px 32px -8px rgba(14, 110, 84, .14);
  --shadow-lg: 0 2px 4px rgba(14, 110, 84, .06), 0 24px 48px -12px rgba(14, 110, 84, .22);
}
:root[data-theme="dark"] {
  /* Тёмная тема «вечер в изумруде»: не чёрная, а глубокая зелёно-синяя; текст тёплый молочный, не белый —
     меньше режет глаз; поверхности отличаются по светлоте, а не рамками. */
  --bg: #102620;
  --surface: #163129;
  --surface-2: #1C3A31;
  --line: #2A4A3F;
  --ink: #EDF3E8;
  --ink-2: #C9D8CD;
  --muted: #9DB5A8;
  --muted-2: #8FA99B;
  --accent: #6CDBAE;
  --accent-hover: #8BE5C1;
  --accent-ink: #082119;
  --accent-soft: #21503F;
  --accent-softer: #1B4234;
  --accent-bright: #4CCB9A;
  --night: #136A51;
  --night-hover: #187C5F;
  --night-2: #157257;
  --night-3: #1A8063;
  --field-line: #739A8A;
  --butter-soft: #3D3820;
  --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 12px 28px -10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .25), 0 24px 48px -14px rgba(0, 0, 0, .55);
}

.top { background: rgba(215, 241, 226, .88); border-bottom-color: rgba(14, 110, 84, .1); }
:root[data-theme="dark"] .top { background: rgba(16, 38, 32, .9); border-bottom-color: rgba(95, 214, 166, .1); }

/* Токены главной (.lp задаёт свои) */
.lp {
  --night: #0E6E54;
  --night-2: #117A5E;
  --night-3: #1A8F6E;
  --paper: #D7F1E2;
  --ink: #0F2A21;
  --ink-2: #2F4A41;
  --muted-2: #4A6A5E;
}
.lp-btn { background: var(--night); box-shadow: 0 10px 24px -10px rgba(14, 110, 84, .6); }
.lp-btn:hover { background: #128566; }
.lp-link { border-bottom-color: rgba(14, 110, 84, .3); }
.lp-section { border-top-color: rgba(14, 110, 84, .12); }
.lp-step-dot { background: var(--night); box-shadow: 0 0 0 6px var(--paper); }
.lp-step-when { background: rgba(246, 216, 106, .6); color: var(--night); }
.lp-steps::before { background: repeating-linear-gradient(90deg, var(--night) 0 8px, transparent 8px 14px); opacity: .4; }
.lp-reasons p, .lp-question { border-color: rgba(14, 110, 84, .14); }
.lp-dialog figcaption, .lp-eyebrow { color: var(--night); }

/* Заголовок как на баннере: подчёркнутое слово «мазком» */
.lp-hero h1 { font-weight: 700; font-size: clamp(42px, 5vw, 70px); letter-spacing: -.025em; }
.lp-stroke { position: relative; display: inline-block; white-space: nowrap; }
.lp-stroke svg { position: absolute; left: -2%; right: -2%; bottom: -.12em; width: 104%; height: .32em; pointer-events: none; }
.lp-stroke path { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; opacity: .85; }

/* «Живой звонок»: сцена ярким изумрудом вместо ночного */
.ls { background: radial-gradient(90% 70% at 50% -8%, #1FA273 0%, #12845E 46%, #0B5E47 100%); box-shadow: 0 30px 60px -24px rgba(14, 110, 84, .55); }
.ls-tile { background: #F4E9CF; }
.ls-tile-r { background: #D6F0E2; }
.ls-eyebrow { color: #0E6E54; }
.ls-chips i { background: #D6F0E2; color: #0E6E54; }

/* Карточки «что внутри», персонажи, сертификат */
.ft-ico { color: var(--night); background: var(--accent-soft); }
.ch-card .ch-portrait { background: var(--bg-tone, var(--accent-softer)); }

/* ---------- Персонажи «акрилом» ----------
   Фильтр #acrylic (index.html): лёгкая «дрожь» контура, как у кисти, и зерно холста поверх заливки.
   Анимации (дыхание, моргание) остаются: фильтр стоит на всём SVG. */
.ch { filter: drop-shadow(0 6px 10px rgba(14, 60, 46, .12)); }
/* Гуашь, как у кота, — на каждой движущейся части отдельно: так текстура едет вместе с головой и рукой,
   а не «плывёт» по лицу, когда персонаж качает головой. */
.ch .ch-hair-back, .ch .ch-body, .ch .ch-head, .ch .ch-hand, .ch .ch-arm > path { filter: url(#ch-gouache); }
/* Плитки с персонажами — как загрунтованный холст: мелкое зерно и широкие светлые мазки */
.ls-tile::before, .ch-portrait::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.12'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.008 .09' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .14'/></feComponentTransfer></filter><rect width='100%' height='100%' fill='white' filter='url(%23s)'/></svg>");
  mix-blend-mode: multiply;
}
.ch-portrait { position: relative; }
.ls-face, .ls-sub, .ls-name { position: relative; z-index: 2; }
.ls-face { position: absolute; bottom: 0; }
.ls-sub { position: absolute; }
.ls-name { position: absolute; }

/* ---------- Футер: изумруд и огромный полупрозрачный логотип ---------- */
.site-footer { background: #0B5A44; border-top: 0; color: rgba(236, 250, 243, .72); clip-path: inset(-140px 0 0 0); } /* кот выглядывает сверху, логотип режется снизу */
.site-footer::before { content: none !important; }
.sf-inner { padding-bottom: 8px; }
.site-footer .lp-logo { color: #FFFFFF; }
.sf-brand p { color: rgba(236, 250, 243, .72); }
.sf-cols h2 { color: #FFFFFF; }
.sf-cols a { color: rgba(236, 250, 243, .82); }
.sf-cols a:hover { color: var(--butter); }
.sf-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: rgba(236, 250, 243, .6); position: relative; }
.sf-bottom a { color: rgba(236, 250, 243, .8); }
.sf-cat .cat-whisker { stroke: #FFFFFF; opacity: .6; }


/* ---------- «Как это работает» и остальные анимированные блоки — в цвете первого баннера ---------- */
.hw-stage { background: radial-gradient(120% 80% at 15% 0%, #34C48F 0%, #169A6C 48%, #0E6E54 100%); box-shadow: 0 30px 60px -24px rgba(14, 110, 84, .55); }
.hw-house { background:
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(0, 0, 0, .08) 58px 60px),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .05) 118px 120px),
    rgba(14, 110, 84, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hw-roof, .hw-antenna, .hw-antenna::before, .hw-antenna::after, .hw-door::before { background: #0B5A44; }
.hw-facade i { background: #0E6E54; box-shadow: inset 0 0 0 3px #0B5A44; }
.hw-facade i.on { box-shadow: inset 0 0 0 3px #0B5A44, 0 0 22px rgba(246, 216, 106, .4); }
.hw-door { background: #0B5A44; }
.hw-street { background: #0A4D3B; }
.hw-stars i { opacity: .4; }

/* ---------- Тёмная тема главной: кнопки ярким изумрудом ---------- */
:root[data-theme="dark"] .lp { --paper: #102620; --night: #136A51; --ink: #EDF3E8; --ink-2: #C9D8CD; --muted-2: #9DB5A8; }
:root[data-theme="dark"] .lp .lp-btn:not(.lp-btn-light), :root[data-theme="dark"] .lp-cert-levels span.is-on { background: #3FC795; border-color: #3FC795; color: #062018; }
:root[data-theme="dark"] .lp .lp-btn:not(.lp-btn-light):hover { background: #5AD3A5; }
:root[data-theme="dark"] .lp-step-dot { color: #06211A; }
:root[data-theme="dark"] .site-footer { background: #0A3D30; }

/* =========================================================
   Первый экран как на баннере: заголовок, плашки, телефон и кот (public/phone-hero.js)
   ========================================================= */
.lp-hero-new { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding: 28px 0 80px; gap: 40px; }
.lp-kicker { display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--night); background: var(--accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; }
.lp-hero-new h1 { font-size: clamp(44px, 5.6vw, 78px); line-height: 1.02; }
.lp-hero-new .lp-lead { font-size: 20px; max-width: 28em; }
.lp-free { color: var(--night); }
.lp-pills { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 12px; }
.lp-pills li { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--surface); border: 1.5px solid rgba(14, 110, 84, .16); font-size: 15.5px; font-weight: 600; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(14, 110, 84, .35); }
.lp-pills svg { width: 22px; height: 22px; fill: none; stroke: var(--night); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-hero-new .lp-actions { margin-top: 30px; }
.lp-hero-new .lp-btn { height: 60px; padding: 0 34px; font-size: 18px; border-radius: 18px; }

/* Телефон */
.ph { position: relative; justify-self: center; width: min(400px, 100%); padding-top: 196px; }
.ph-device { position: relative; z-index: 1; transform: rotate(-5deg); border-radius: 48px; padding: 12px; background: linear-gradient(160deg, #2A302D, #121614); box-shadow: 0 40px 70px -30px rgba(14, 60, 46, .6), inset 0 0 0 2px rgba(255, 255, 255, .06); }
.ph-screen { border-radius: 38px 38px 0 0; background: #0D2A22; color: #EAF6F0; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 12px; min-height: 470px; }
.ph-bar { display: flex; align-items: center; justify-content: space-between; }
.ph-bar b { font-family: var(--display); font-size: 22px; letter-spacing: -.02em; }
.ph-round { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); font-size: 14px; color: #CFE6DA; }
.ph-eyebrow { color: #4FD3A1; font-size: 13px; font-weight: 700; }
.ph-title { font-family: var(--display); font-size: 22px; font-weight: 700; margin: -6px 0 0; color: #FFFFFF; }
.ph-text { font-size: 12.5px; line-height: 1.45; color: rgba(234, 246, 240, .72); margin: -4px 0 0; }
.ph-word { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #17795C, #0F5F49); }
.ph-word-ico { width: 44px; height: 44px; border-radius: 14px; background: #F6D86A; display: grid; place-items: center; flex: none; }
.ph-word i { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: #F6D86A; letter-spacing: .06em; text-transform: uppercase; }
.ph-word b { display: block; font-family: var(--display); font-size: 21px; line-height: 1.1; color: #fff; }
.ph-word small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
.ph-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-day { padding: 9px 8px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .12); text-align: center; transition: background .4s, border-color .4s, color .4s; }
.ph-day b { display: block; font-size: 13px; }
.ph-day small { display: block; font-size: 11px; color: rgba(234, 246, 240, .6); }
.ph-day.is-on { background: #4FD3A1; border-color: #4FD3A1; color: #06211A; }
.ph-day.is-on small { color: rgba(6, 33, 26, .7); }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-chips span { padding: 6px 11px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.ph-chips span.is-on { background: #1E9E6E; border-color: #1E9E6E; }
.ph-slots { display: grid; gap: 8px; }
.ph-slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); font-size: 13px; }
.ph-slot b { color: #F6D86A; font-size: 14px; }
.ph-slot span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ph-slot em { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(79, 211, 161, .18); color: #4FD3A1; }
.ph-nav { display: grid; grid-template-columns: repeat(5, 1fr); border-radius: 0 0 38px 38px; background: #0A231C; padding: 12px 6px 16px; font-size: 10.5px; text-align: center; color: rgba(234, 246, 240, .55); border-top: 1px solid rgba(255, 255, 255, .06); }
.ph-nav .is-on { color: #4FD3A1; font-weight: 700; }

/* Кот поверх телефона: лапы ложатся на верхний край */
.ph-cat { position: absolute; z-index: 2; left: 50%; top: 0; width: 300px; transform: translateX(-46%) rotate(-5deg); pointer-events: none; }
.kot { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px rgba(14, 60, 46, .18)); }
.kot-pupil { transform: translate(calc(var(--lx, 0) * 9px), calc(var(--ly, 0) * 6px)); transition: transform .25s ease-out; }
.kot-lid { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform .08s; }
.kot.is-blink .kot-lid { transform: scaleY(1); }
.kot-ear-l, .kot-ear-r, .kot-head, .kot-body { transform-box: view-box; }
.kot-ear-l { transform-origin: 140px 160px; transition: transform .25s; }
.kot-ear-r { transform-origin: 300px 150px; transition: transform .25s; }
.kot.is-ear-l .kot-ear-l { transform: rotate(-9deg); }
.kot.is-ear-r .kot-ear-r { transform: rotate(9deg); }
.kot-body { transform-origin: 220px 290px; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.kot.is-tilt .kot-body { transform: rotate(-4deg); }
.kot-paws { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .kot-marks { animation: kot-marks 2.4s ease-in-out infinite; transform-box: view-box; transform-origin: 380px 40px; }
  .ph-device { animation: ph-float 6s ease-in-out infinite; }
  .ph-word { animation: ph-glow 3.2s ease-in-out infinite; }
}
@keyframes kot-marks { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
@keyframes ph-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes ph-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 216, 106, 0); } 50% { box-shadow: 0 0 0 3px rgba(246, 216, 106, .35); } }

/* «Так выглядит разговор» — живой звонок под первым экраном */
.lp-live { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.lp-live-text p { color: var(--ink-2); font-size: 18px; line-height: 1.6; margin: 16px 0 22px; max-width: 26em; }

@media (max-width: 900px) {
  .lp-hero-new, .lp-live { grid-template-columns: 1fr; }
  .lp-pills { grid-template-columns: 1fr 1fr; }
  .ph { margin-top: 12px; }
}
@media (max-width: 480px) {
  .lp-pills { grid-template-columns: 1fr; }
  .ph { padding-top: 172px; }
  .ph-cat { width: 262px; }
  .ph-device { transform: rotate(-3deg); }
}

/* ===== Новый кот-ведущий в баннере звонка: лапами держится за карточку с вопросом ===== */
.ls-host { margin-top: -64px; }
.ls-cat { z-index: 3; width: 220px; margin-bottom: -30px; pointer-events: none; }
.ls-host .ls-card { padding-top: 26px; }
.ls-cat .kot-host svg.kot { filter: drop-shadow(0 8px 12px rgba(6, 50, 36, .28)); }
.kot-host .kot-marks { stroke: #F6D86A; }
.kot-host.is-blink .kot-lid { transform: scaleY(1); }
.kot-host.is-ear-l .kot-ear-l { transform: rotate(-9deg); }
.kot-host.is-ear-r .kot-ear-r { transform: rotate(9deg); }
.kot-host.is-sniff .kot-whiskers { animation: kot-whisk .3s 3; transform-box: view-box; transform-origin: 210px 240px; }
@keyframes kot-whisk { 50% { transform: translateY(-2px) scaleX(1.03); } }
.kot-host .kot-body { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.kot-host[data-state="watch"] .kot-body { transform: rotate(calc(var(--look) * 3deg)); }
.kot-host[data-state="watch"] .kot-pupil { transform: translate(calc(var(--look) * 10px), 2px); }

@media (max-width: 900px) {
  .ls-host { margin-top: -44px; }
  .ls-cat { width: 170px; margin-bottom: -23px; }
  .ls-host .ls-card { padding-top: 22px; }
}

/* Новый кот и в футере: выглядывает из-за края, лапы свисают на футер */
/* линия края в рисунке кота — 290/350 высоты, а высота — 350/440 ширины: сдвиг вверх = ширина × 290/440 */
.sf-cat { --cw: 170px; width: var(--cw); top: calc(var(--cw) * -0.6591); right: 48px; }
.sf-cat .kot-host { width: 100%; margin: 0; }
.site-footer { clip-path: inset(-160px 0 0 0); }
@media (max-width: 900px) { .sf-cat { --cw: 128px; right: 16px; } }

/* Жёлтая кнопка на изумрудных блоках: общее правило .lp .lp-btn её перекрашивало в фон блока */
.lp .lp-btn.lp-btn-light { background: var(--butter); border-color: var(--butter); color: #15201C; }
.lp .lp-btn.lp-btn-light:hover { background: #F8DE87; border-color: #F8DE87; }

/* ===== Плавные анимации персонажей (поверх styles.css) =====
   Голова и тело качаются по синусоиде (alternate + ease-in-out), волосы догоняют голову с задержкой,
   рот не мигает, а плавно открывается по амплитуде. */
.ch-mouth-open { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .ch-body { animation: ch2-breathe 2.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: var(--d, 0s); }
  .ch-head { animation: ch2-bob 3.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: var(--d, 0s); }
  .ch-hair-back { animation: ch2-sway 3.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--d, 0s) + .35s); }
  .ch-lid { animation: ch2-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 1.7); }
  .ch.is-waving .ch-hand { animation: ch2-wave .9s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .ch.is-talking .ch-mouth-shut, .ch-card:hover .ch .ch-mouth-shut { animation: none; opacity: 0; }
  .ch.is-talking .ch-mouth-open, .ch-card:hover .ch .ch-mouth-open { opacity: 1; animation: ch2-talk 1.5s ease-in-out infinite; }
}
@keyframes ch2-breathe { from { transform: scale(1, 1); } to { transform: scale(1.01, 1.018); } }
@keyframes ch2-bob { from { transform: rotate(-1.6deg); } to { transform: rotate(1.4deg) translateY(-.6px); } }
@keyframes ch2-sway { from { transform: rotate(-1deg); } to { transform: rotate(.9deg); } }
@keyframes ch2-blink { 0%, 91%, 100% { transform: scaleY(0); } 93.5% { transform: scaleY(1); } 96.5% { transform: scaleY(0); } }
@keyframes ch2-wave { from { transform: rotate(-13deg); } to { transform: rotate(10deg); } }
@keyframes ch2-talk {
  0% { transform: scaleY(.25); } 14% { transform: scaleY(.9); } 28% { transform: scaleY(.4); } 44% { transform: scaleY(1); }
  60% { transform: scaleY(.3); } 76% { transform: scaleY(.8); } 90% { transform: scaleY(.35); } 100% { transform: scaleY(.25); }
}
@media (prefers-reduced-motion: no-preference) {
  .hw-win.is-talk .hw-char .ch-mouth-shut { animation: none; opacity: 0; }
  .hw-win.is-talk .hw-char .ch-mouth-open { opacity: 1; animation: ch2-talk 1.5s ease-in-out infinite; }
}

/* ===== Новый кот везде (mascot.js): вход, регистрация, пустые экраны ===== */
.auth-card > .mascot.kot-host { width: 150px; }
.empty .mascot.kot-host { width: 124px; }
.mascot.kot-host svg { overflow: visible; }
.kot-host .kot-paw { transform-box: view-box; transition: transform .45s cubic-bezier(.3, 1.35, .5, 1); }
.kot-host .kot-paws > g:first-child { transition: opacity .2s; }
.kot-host .kot-ear-l, .kot-host .kot-ear-r { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.kot-host.is-tilt-l .kot-body { transform: rotate(-5deg); }
.kot-host.is-tilt-r .kot-body { transform: rotate(5deg); }
/* Пароль: лапы закрывают глаза, уши прижаты */
.kot-host[data-state="cover"] .kot-paw-l, .kot-host[data-state="peek"] .kot-paw-l { transform: translate(68px, -88px) rotate(-8deg); }
.kot-host[data-state="cover"] .kot-paw-r { transform: translate(-49px, -70px) rotate(8deg); }
.kot-host[data-state="cover"] .kot-paws > g:first-child, .kot-host[data-state="peek"] .kot-paws > g:first-child { opacity: 0; }
.kot-host[data-state="cover"] .kot-ear-l, .kot-host[data-state="peek"] .kot-ear-l { transform: rotate(-16deg); }
.kot-host[data-state="cover"] .kot-ear-r, .kot-host[data-state="peek"] .kot-ear-r { transform: rotate(14deg); }
/* Подглядывает: правый глаз открыт и косится на поле */
.kot-host[data-state="peek"] .kot-pupil { transform: translate(-6px, 4px); }
/* Следит за вводом: уши насторожены */
.kot-host[data-state="watch"] .kot-ear-l { transform: rotate(5deg); }
.kot-host[data-state="watch"] .kot-ear-r { transform: rotate(-5deg); }
/* Вход и регистрация: кот выглядывает из-за верхнего края карточки, лапы — на её крае */
.auth-card:has(> .kot-host) { margin-top: 112px; }
.auth-card > .mascot.kot-host { margin: calc(-28px - 99px) auto 10px; }
.kot-host .kot-paw-l { transform-origin: 88px 296px; }
.kot-host .kot-paw-r { transform-origin: 352px 296px; }

/* ===== Характеры персонажей: у каждого свой темп и свои привычки =====
   Взгляд (.ch-look) гуляет по сторонам, брови иногда приподнимаются, моргание разное.
   Аня — живая, наклоняет голову к руке; Макс — качает головой в ритм (наушники);
   Лейла — плавная, серьги качаются следом; Олег — неторопливый, поправляет очки.
   Говорит — кивает и двигает бровями. Наведение на карточку — персонаж оживляется. */
.ch-look, .ch-brows, .ch-glasses { transform-box: view-box; }
.ch-ring { transform-box: view-box; }
.ch-ring-l { transform-origin: 60px 119px; }
.ch-ring-r { transform-origin: 140px 119px; }
.ch-arm { transform-box: view-box; transform-origin: 166px 236px; }
.ch-brows { transition: transform .3s ease; }
@media (prefers-reduced-motion: no-preference) {
  .ch-look { animation: ch2-look 9s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: calc(var(--d, 0s) * 1.4); }
  .ch-brows { animation: ch2-brow 7.5s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 1.9 + 1s); }
  .ch-anya .ch-head { animation-duration: 3s; }
  .ch-max .ch-head { animation-name: ch2-groove; animation-duration: .9s; animation-direction: alternate; }
  .ch-leila .ch-head { animation-duration: 3.8s; }
  .ch-oleg .ch-head { animation-duration: 4.6s; }
  .ch-max .ch-lid, .ch-leila .ch-lid { animation-name: ch2-blink2; animation-duration: 6.6s; }
  .ch-ring-l { animation: ch2-ring 3.8s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--d, 0s) + .5s); }
  .ch-ring-r { animation: ch2-ring 3.8s cubic-bezier(.45, 0, .55, 1) infinite alternate; animation-delay: calc(var(--d, 0s) + .6s); }
  .ch-oleg .ch-glasses { animation: ch2-glasses 10s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + 2s); }
  .ch-max .ch-glasses { animation: ch2-groove-glasses .9s ease-in-out infinite alternate; }
  .ch.is-waving .ch-arm { animation: ch2-arm 1.8s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .ch-anya.is-waving .ch-head { animation-name: ch2-bob-wave; }
  /* Говорит: голова кивает чаще, брови ходят, взгляд на собеседника */
  .ch.is-talking .ch-head, .ch-card:hover .ch .ch-head { animation: ch2-talk-head 1.4s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .ch.is-talking .ch-brows, .ch-card:hover .ch .ch-brows { animation: ch2-brow-talk 1.7s ease-in-out infinite; }
  .ch.is-talking .ch-look { animation: none; transform: translate(0, 0); }
}
@keyframes ch2-look {
  0%, 16% { transform: translate(0, 0); } 22%, 38% { transform: translate(-1.8px, .5px); }
  44%, 58% { transform: translate(0, 0); } 64%, 78% { transform: translate(1.8px, -.3px); } 84%, 100% { transform: translate(0, 0); }
}
@keyframes ch2-brow { 0%, 58%, 80%, 100% { transform: translateY(0); } 63%, 74% { transform: translateY(-2.2px); } }
@keyframes ch2-brow-talk { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-2.4px); } 55% { transform: translateY(-.6px); } 75% { transform: translateY(-1.8px); } }
@keyframes ch2-blink2 { 0%, 44%, 52%, 86%, 100% { transform: scaleY(0); } 46% { transform: scaleY(1); } 48.5% { transform: scaleY(0); } 50% { transform: scaleY(1); } }
@keyframes ch2-groove { from { transform: rotate(-1.4deg) translateY(0); } to { transform: rotate(1.2deg) translateY(.8px); } }
@keyframes ch2-groove-glasses { from { transform: translateY(0); } to { transform: translateY(.4px); } }
@keyframes ch2-ring { from { transform: rotate(9deg); } to { transform: rotate(-9deg); } }
@keyframes ch2-glasses { 0%, 82%, 100% { transform: translateY(0); } 86% { transform: translateY(-2.2px); } 89% { transform: translateY(-1.6px); } 93% { transform: translateY(0); } }
@keyframes ch2-arm { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }
@keyframes ch2-bob-wave { from { transform: rotate(.4deg); } to { transform: rotate(3.4deg) translateY(-.5px); } }
@keyframes ch2-talk-head { 0% { transform: rotate(-1.2deg); } 50% { transform: rotate(.6deg) translateY(.8px); } 100% { transform: rotate(1.6deg); } }

/* ===== Пометки на полях (margin-notes.js): рукописная подпись и стрелка гуашью ===== */
.mn-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 20; pointer-events: none; }
.mn { position: absolute; white-space: pre; font: 600 22px/1.15 var(--sans); color: #0B5A44; transform: rotate(-3deg); opacity: 0; transition: opacity .5s .35s; }
.mn-b { transform: rotate(2.5deg); }
.mn.is-dark { color: #F6D86A; }
.mn-arrow { position: absolute; overflow: visible; }
.mn-arrow path { fill: none; stroke: #0B5A44; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mn-wrap.is-dark .mn-arrow path { stroke: #F6D86A; }
.mn-arrow .mn-line { transition: stroke-dashoffset .8s cubic-bezier(.5, 0, .3, 1); }
.mn-arrow .mn-head { transition: stroke-dashoffset .25s .75s ease-out; }
.mn-wrap.is-in .mn { opacity: 1; }
.mn-wrap.is-in .mn-arrow path { stroke-dashoffset: 0; }
:root[data-theme="dark"] .mn:not(.is-dark) { color: #9FE3C4; }
:root[data-theme="dark"] .mn-wrap:not(.is-dark) .mn-arrow path { stroke: #9FE3C4; }
@media (max-width: 600px) { .mn { font-size: 22px; } }

/* ===== Кот-проводник (kot-guide.js) ===== */
.kg { position: absolute; z-index: 45; pointer-events: none; width: 150px; }
.kg svg.kot { filter: drop-shadow(0 6px 10px rgba(14, 60, 46, .2)); }
.kg .kot-body { transition: transform .62s cubic-bezier(.34, 1.4, .6, 1); }
.kg .kot-paws { transition: transform .38s cubic-bezier(.3, 1.3, .5, 1), opacity .25s; transform-box: view-box; }
.kg .kot-marks { transition: opacity .3s; }
.kg.is-down .kot-body { transform: translateY(300px); transition-timing-function: cubic-bezier(.6, 0, .8, .4); transition-duration: .32s; }
.kg.is-down .kot-paws { transform: translateY(46px); opacity: 0; transition-duration: .22s; }
.kg.is-down .kot-marks { opacity: 0; }
.kg.is-looking .kot-body { transform: rotate(calc(var(--lx, 0) * 5deg)); }
.kg.is-looking .kot-pupil { transform: translate(calc(var(--lx, 0) * 10px), calc(var(--ly, 0) * 7px)); }
.kg .kot-pupil { transition: transform .25s ease-out; }

/* ===== Меню разделов: свои значки вместо эмодзи, строка для преподавателей ===== */
.site-ico { width: 42px; height: 42px; border-radius: 13px; background: var(--accent-softer); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.site-ico svg { display: block; filter: url(#ch-gouache); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.site-drop-link:hover .site-ico svg { transform: rotate(-6deg) scale(1.08); }
.site-drop-teach { display: flex; align-items: center; gap: 10px; margin: 6px 4px 2px; padding: 10px 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; text-decoration: none; }
.site-drop-teach svg { flex: none; width: 22px; height: 22px; }
.site-drop-teach b { color: var(--ink-2); font-weight: 600; }
.site-drop-teach:hover b { color: var(--accent); }

/* ===== Награда-лапка (paws.js) ===== */
.paw-badge { display: block; overflow: visible; }
.paw-badge.is-on { filter: drop-shadow(0 8px 12px rgba(14, 60, 46, .22)); }
.paw-badge.is-off { opacity: .8; }
.paw-badge .paw-print { transform-box: fill-box; transform-origin: 50% 70%; }
@media (prefers-reduced-motion: no-preference) {
  .paw-badge.is-on .paw-shine { animation: paw-shine 4.5s ease-in-out infinite; }
  .paw-badge.is-on .paw-print { animation: paw-wiggle 4.5s ease-in-out infinite; }
  .paw-item.is-on:hover .paw-badge { animation: paw-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
}
@keyframes paw-shine { 0%, 55% { transform: rotate(22deg) translateX(0); } 80%, 100% { transform: rotate(22deg) translateX(120px); } }
@keyframes paw-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-8deg); } 82% { transform: rotate(7deg); } 88% { transform: rotate(-3deg); } }
@keyframes paw-hop { 40% { transform: translateY(-8px) rotate(-4deg); } }
.paw-sub { margin: -4px 0 14px; color: var(--muted); }
.paw-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.paw-item { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 6px 10px; border-radius: 18px; background: var(--surface-2); }
.paw-item.is-on { background: var(--accent-softer); }
.paw-item figcaption b { display: block; font-size: 13.5px; }
.paw-item figcaption span { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
@media (max-width: 640px) { .paw-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Вручение: кот выглядывает из-за края, значок выпрыгивает из его лап, вокруг конфетти */
.paw-award { text-align: center; }
.paw-stage { position: relative; height: 250px; margin: 4px auto 6px; max-width: 360px; border-bottom: 3px solid var(--line); }
.paw-cat { position: absolute; left: 50%; bottom: -3px; width: 230px; margin: 0; transform: translateX(-50%); }
.paw-cat svg { overflow: visible; }
.paw-gift { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 2; }
.paw-confetti { position: absolute; left: 50%; bottom: 150px; width: 0; height: 0; z-index: 1; }
.paw-confetti i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; }
.paw-lead { max-width: 380px; margin: 14px auto 16px; font-size: 16px; }
.paw-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .paw-cat .kot-body { animation: paw-cat-in .7s cubic-bezier(.3, 1.3, .5, 1) both; }
  .paw-gift { animation: paw-gift-in .8s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  .paw-confetti i { animation: paw-burst 1.2s calc(.75s + var(--d)) cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes paw-cat-in { from { transform: translateY(300px); } }
@keyframes paw-gift-in { from { opacity: 0; transform: translate(-50%, 80px) scale(.3) rotate(-20deg); } }
@keyframes paw-burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px) rotate(260deg); }
}

/* ===== Свой персонаж (persona.js): аватарка и конструктор ===== */
.ava-persona { overflow: hidden; display: inline-grid; place-items: end center; background: color-mix(in srgb, var(--ava, #2F6E60) 18%, #FFFDF6); }
.ava-persona svg { display: block; width: 100%; height: 100%; }
.ava-persona.ava-style-gradient { background: linear-gradient(150deg, color-mix(in srgb, var(--ava) 30%, #FFFDF6), color-mix(in srgb, var(--ava) 60%, #FFFDF6)); }
.pb { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 6px; }
.pb-preview { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 10px 14px; border-radius: 22px; background: radial-gradient(120% 90% at 30% 0%, #FFFDF6, var(--accent-softer)); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.pb-preview svg { width: 100%; height: auto; }
.pb-rows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pb-row { display: flex; flex-direction: column; gap: 6px; }
.pb-row-2 { flex-direction: row; gap: 18px; flex-wrap: wrap; }
.pb-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pb-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #FFFFFF; background: var(--c); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .15s; }
.pb-sw:hover { transform: scale(1.1); }
.pb-sw.is-on { box-shadow: 0 0 0 2.5px var(--night); }
.pb-thumb { width: 52px; height: 52px; padding: 0; border-radius: 50%; overflow: hidden; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.pb-thumb svg { width: 100%; height: 100%; display: block; }
.pb-thumb.is-on { box-shadow: 0 0 0 2.5px var(--night); background: var(--accent-softer); }
.pb-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 13px var(--sans); color: var(--ink-2); cursor: pointer; }
.pb-chip.is-on { background: var(--night); border-color: var(--night); color: #FFFFFF; }
.pb-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .pb { grid-template-columns: 1fr; }
  .pb-preview { position: static; max-width: 200px; margin: 0 auto; }
}

/* Заголовки — тот же Rubik, что и весь сайт (CLAUDE.md): рисованный Balsamiq Sans и Caveat убраны 01.11. */
.lp h1 { line-height: 1.02; }
.lp h2, .page-title { line-height: 1.08; }


/* ===== Контраст (аудит 29.10): тексты, которые плохо читались ===== */
/* Жёлтая кнопка на изумрудных блоках — на всех страницах, не только на главной */
a.lp-btn.lp-btn-light, button.lp-btn.lp-btn-light { background: var(--butter) !important; border-color: var(--butter) !important; color: #15201C !important; }
a.lp-btn.lp-btn-light:hover, button.lp-btn.lp-btn-light:hover { background: #F8DE87 !important; }
/* Белый текст на изумруде: полупрозрачность не ниже .85 */
.day-tab.is-on span, .dl-banner p, .dl-banner small, .dl-banner-main span:not(.dl-banner-kicker) { color: rgba(251, 251, 247, .88) !important; }
.dl-banner-kicker { color: #FFE68F !important; }
.site-footer, .site-footer a, .site-footer span, .site-footer p, .site-footer small { color: rgba(236, 250, 243, .86); }
.site-footer a:hover { color: #FFFFFF; }
.seo-404-code { color: var(--night) !important; opacity: .85; }
.sheet-foot { color: #5E726B !important; }

/* Баннер звонка: текст лежит на тёмной части градиента; полоса «Ближайшее окно» и пауза — на затемнении */
.ls-pause { background: rgba(0, 0, 0, .22) !important; }
.ls-next, .ls-strip { background: rgba(0, 0, 0, .2) !important; }
.ls-next-label { color: rgba(251, 251, 247, .86) !important; }
.ls-live, .ls-topic, .ls-clock { text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.lp-final p { color: rgba(251, 251, 247, .9) !important; }
.lp-final .lp-en, .ls-next b { color: #FFE68F !important; }
/* Не полученные звания и достижения: серые, но подписи читаются */
.pg-ranks span { opacity: .78; }
.pg-ranks span:not(.is-on) em { color: var(--ink-2); }
.pf-badge span { opacity: .6; }
.tst-card.is-cert .tst-what dt { color: rgba(251, 251, 247, .86) !important; }
:root:not([data-theme="dark"]) .tst-badge, :root:not([data-theme="dark"]) .snd-play { color: #0B4F3C !important; }
:root:not([data-theme="dark"]) .pf-chip-fire { color: #9A4416 !important; }

/* ===== Тёмная тема: кнопки и выбранное ===== */
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .skip-link { background: #3FC795; color: #062018; box-shadow: 0 8px 20px -10px rgba(63, 199, 149, .5); }
:root[data-theme="dark"] .btn-primary:hover:not(:disabled) { background: #5AD3A5; }
:root[data-theme="dark"] .filter.is-on, :root[data-theme="dark"] .day-tab.is-on, :root[data-theme="dark"] .look-tabs button.is-on, :root[data-theme="dark"] .snd-opt.is-on, :root[data-theme="dark"] .pb-chip.is-on {
  background: var(--night); border-color: #3FC795; color: #FFFFFF; }
:root[data-theme="dark"] .site-footer { background: #0C1F1A; }
:root[data-theme="dark"] .ava-persona { background: color-mix(in srgb, var(--ava, #2F6E60) 30%, #12241E); }
:root[data-theme="dark"] .seo-404-code { color: #5FD6A6 !important; }
:root[data-theme="dark"] .paw-item { background: var(--surface-2); }
:root[data-theme="dark"] .paw-item.is-on { background: var(--accent-softer); }
:root[data-theme="dark"] .pb-preview { background: radial-gradient(120% 90% at 30% 0%, #1B3A30, #12241E); box-shadow: inset 0 0 0 1px var(--line); }
/* Тёмная тема на главной: всё, что в светлой написано изумрудом, — светлым мятным */
:root[data-theme="dark"] .lp-kicker, :root[data-theme="dark"] .lp-free, :root[data-theme="dark"] .lp-talk figcaption, :root[data-theme="dark"] .lp .eyebrow { color: #7DE0B8 !important; }
:root[data-theme="dark"] .lp-kicker { background: rgba(95, 214, 166, .12); }
:root[data-theme="dark"] .lp-step-dot { color: #FFFFFF; }
:root[data-theme="dark"] .lp-step-when { background: rgba(246, 216, 106, .92); color: #1F1A08; }
:root[data-theme="dark"] .lp-hint { color: #EACB6A; }
:root[data-theme="dark"] .lp mark, :root[data-theme="dark"] .lp-dialog mark { background: linear-gradient(transparent 58%, rgba(246, 216, 106, .38) 58%); color: inherit; }

/* ===== Старый «вечерний» тёмный зелёный → изумруд редизайна (аудит 29.10) ===== */
.ex-stage, .tw-stage { background: radial-gradient(90% 75% at 50% -8%, #1FA273 0%, #12845E 46%, #0B5E47 100%) !important; }
.tst-card.is-cert { background: radial-gradient(120% 140% at 100% 0%, #12845E 0%, #0B5E47 70%) !important; }
.dl-banner { background: radial-gradient(120% 140% at 0% 0%, #12845E 0%, #0B5E47 75%) !important; }
.ex-post { background: var(--night) !important; }
.tile-avatar.ava-color, .tile-avatar.ava-emoji { background: color-mix(in srgb, var(--ava) 45%, #0B5E47) !important; }
/* «Как это работает»: рамы и силуэты окон — глубокий изумруд вместо почти чёрного */
.hw-win { box-shadow: inset 0 0 0 6px #0A3D30 !important; }
.hw-win.is-lit { box-shadow: inset 0 0 0 6px #0A3D30, 0 0 70px rgba(246, 216, 106, .35) !important; }
.hw-win::after, .hw-bars::before, .hw-bars::after, .hw-lamp { background: #0A3D30 !important; }
.hw-sil { fill: #0A3D30 !important; }
.hw-screen { fill: #12684F !important; }
:root[data-theme="dark"] .ex-stage, :root[data-theme="dark"] .tw-stage, :root[data-theme="dark"] .dl-banner, :root[data-theme="dark"] .tst-card.is-cert {
  background: radial-gradient(90% 75% at 50% -8%, #137055 0%, #0F5C46 50%, #0A3D30 100%) !important; }
/* Обложка профиля: изумрудный вечер вместо почти чёрного; цвет участника подмешивается как раньше */
.pf-cover { background: color-mix(in srgb, var(--ava) 30%, #12845E) !important; }
.cv-sky, .cv-sky-cut { fill: color-mix(in srgb, var(--ava) 30%, #12845E) !important; }
.cv-bld { fill: color-mix(in srgb, var(--ava) 18%, #0A3D30) !important; }
.cv-bld-back { fill: color-mix(in srgb, var(--ava) 25%, #0B5E47) !important; }
:root[data-theme="dark"] .pf-cover, :root[data-theme="dark"] .cv-sky, :root[data-theme="dark"] .cv-sky-cut { background: color-mix(in srgb, var(--ava) 25%, #0F5C46) !important; fill: color-mix(in srgb, var(--ava) 25%, #0F5C46) !important; }

/* ===== Новый логотип: иконка с котом и надпись «yapp» ===== */
.lp-logo, .logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 56px !important; height: 56px !important; border-radius: 15px; flex: none; box-shadow: 0 6px 16px -8px rgba(11, 61, 48, .5); }
.logo-word { height: 36px; width: auto; display: block; }
.lp-logo, .logo { gap: 12px; }
.logo-word-light { display: none; }
:root[data-theme="dark"] .logo-word-dark { display: none; }
:root[data-theme="dark"] .logo-word-light { display: block; }
/* В футере фон всегда тёмный — надпись светлая */
.site-footer .logo-word-dark { display: none; }
.site-footer .logo-word-light { display: block; }
@media (max-width: 640px) {
  .logo-mark { width: 46px !important; height: 46px !important; border-radius: 12px; }
  .logo-word { height: 30px; }
}

/* ===== Тёмная тема, проработка (30.10): сцены — настоящий вечер, без «свечения» на тёмной странице ===== */
:root[data-theme="dark"] .ls, :root[data-theme="dark"] .hw-stage {
  background: radial-gradient(90% 75% at 50% -8%, #137055 0%, #0F5C46 48%, #0A3D30 100%) !important;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(95, 214, 166, .12) !important; }
:root[data-theme="dark"] .ls-card { background: #E6EFEA !important; }
/* Пастельные фоны героев — приглушённые */
:root[data-theme="dark"] .ch-portrait { background: color-mix(in srgb, var(--bg-tone, #D6F0E2) 28%, #12241E) !important; }
:root[data-theme="dark"] .ls-tile { filter: saturate(.9) brightness(.92); }
/* Карточки отделяются от фона тонкой мятной рамкой */
:root[data-theme="dark"] .card, :root[data-theme="dark"] .ch-card, :root[data-theme="dark"] .ft, :root[data-theme="dark"] .seo-topic,
:root[data-theme="dark"] .blog-card, :root[data-theme="dark"] .lp-faq details, :root[data-theme="dark"] .lp-dialog, :root[data-theme="dark"] .slot-row,
:root[data-theme="dark"] .day-tab, :root[data-theme="dark"] .slot-filters { border-color: rgba(95, 214, 166, .1) !important; box-shadow: inset 0 0 0 1px rgba(108, 219, 174, .06), var(--shadow); }
:root[data-theme="dark"] .lp-cert-img img, :root[data-theme="dark"] .certificate-sample { filter: brightness(.88); }
:root[data-theme="dark"] .lp-section { border-top-color: rgba(95, 214, 166, .1); }
/* Шапка приложения под крупный логотип */
.top-inner { height: 76px !important; min-height: 76px; }
@media (max-width: 640px) { .top-inner { height: 64px !important; min-height: 64px; } }

/* Футер: большой логотип */
.site-footer .lp-logo { gap: 16px; }
.site-footer .logo-mark { width: 96px !important; height: 96px !important; border-radius: 26px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55); }
.site-footer .logo-word { height: 64px; }
@media (max-width: 640px) {
  .site-footer .logo-mark { width: 72px !important; height: 72px !important; border-radius: 20px; }
  .site-footer .logo-word { height: 48px; }
}

/* Огромная полупрозрачная надпись «yapp» — отдельной строкой между ссылками и нижней строкой, ничего не перекрывает */
/* Большое слово «yapp» - в самом низу подвала, с наклоном вправо, и нижний край его срезает: подвал как будто
   уходит за экран (приём подвала near.com с unsection.com, 01.11). */
.sf-word { max-width: 1120px; margin: 24px auto 0; padding: 0 24px; overflow: hidden; aspect-ratio: 675 / 160; }
.sf-word::before { content: ""; display: block; width: 93%; aspect-ratio: 675 / 228; background: url(/brand/wordmark-light.svg?v=4) left top / contain no-repeat; opacity: .1; transform: skewX(-12deg); transform-origin: left bottom; }
.site-footer:not(.is-app) .sf-bottom { padding-bottom: 8px; }

/* ===== UX-проверка 30.10 ===== */
/* Шапка: размытие под полупрозрачным фоном — контент не просвечивает при прокрутке */
/* только на компьютере: на телефоне размытие у шапки «привязало» бы к ней нижнее меню (position: fixed) */
@media (min-width: 761px) { .top { -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } }
/* Зоны нажатия на телефоне не меньше 40px */
@media (max-width: 700px) {
  .sr-time, .sr-topic, a.back, .slot-row a.topic, .mine-row a.topic, #view a.topic { display: inline-block; padding-block: 9px; margin-block: -9px; }
  /* «← Все окна»: стрелка и текст в одну строку */
  a.back { display: inline-flex; margin-block: -9px 11px; }
}
/* Пустые состояния: коту есть за что держаться */
.empty .mascot.kot-host { position: relative; isolation: isolate; }
.empty .mascot.kot-host::after { content: ""; position: absolute; left: -18%; right: -18%; top: calc(82.86% - 1px); height: 3px; border-radius: 3px; background: var(--line); z-index: -1; }
/* «Сообщения» на телефоне: пустой список не растягивается на весь экран */
.dm-side:has(.dm-side-empty) { height: auto; min-height: 0; }
/* Профиль: подсказка собрать персонажа */
.pf-chip-cta { border: 1px dashed var(--accent); background: var(--accent-softer); color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pf-chip-cta:hover { background: var(--accent-soft); }

/* ===== Кнопка темы в шапке ===== */
.theme-toggle { flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .2s, transform .2s; }
.theme-toggle:hover { background: var(--accent-softer); color: var(--accent); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle .tt-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .tt-sun { display: block; color: #F6D86A; }
:root[data-theme="dark"] .theme-toggle .tt-moon { display: none; }
.lp-auth .theme-toggle { margin-right: 4px; }
.top-inner .theme-toggle { margin-left: auto; }

/* ===== Кабинет на компьютере: меню — боковой панелью слева ===== */
@media (min-width: 1024px) {
  body.is-signed:not(.is-landing):not(.in-room) { padding-left: 248px; }
  body.is-signed:not(.is-landing):not(.in-room) .top {
    position: fixed; inset: 0 auto 0 0; width: 248px; height: 100vh; z-index: 50;
    border-bottom: 0; border-right: 1px solid var(--line); background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.is-signed:not(.is-landing):not(.in-room) .top-inner {
    height: 100% !important; min-height: 0; max-width: none; margin: 0; padding: 22px 14px 18px;
    flex-direction: column; align-items: stretch; gap: 18px; }
  body.is-signed:not(.is-landing):not(.in-room) .top .logo { padding: 0 6px 6px; }
  body.is-signed:not(.is-landing):not(.in-room) .tabs {
    flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 0; background: none; border-radius: 0; overflow-y: auto; }
  body.is-signed:not(.is-landing):not(.in-room) .tab { justify-content: flex-start; gap: 12px; padding: 11px 12px; border-radius: 14px; font-size: 15px; }
  body.is-signed:not(.is-landing):not(.in-room) .tab-ico { display: block; }
  body.is-signed:not(.is-landing):not(.in-room) .tab.is-active { background: var(--accent-softer); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
  body.is-signed:not(.is-landing):not(.in-room) .tab-badge { margin-left: auto; }
  /* низ панели: кнопка темы и профиль */
  body.is-signed:not(.is-landing):not(.in-room) .top-inner .theme-toggle { margin: auto 0 0 6px; }
  body.is-signed:not(.is-landing):not(.in-room) .me { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; padding: 10px; border-radius: 16px; border-top: 1px solid var(--line); }
  body.is-signed:not(.is-landing):not(.in-room) .me:hover { background: var(--surface-2); }
  body.is-signed:not(.is-landing):not(.in-room) .me-name { display: block !important; text-align: left; white-space: normal; }
  body.is-signed:not(.is-landing):not(.in-room) #chat-fab { display: none; }
}

/* Тёмная: боковая панель чуть темнее страницы — меню отделено без рамки */
@media (min-width: 1024px) { :root[data-theme="dark"] body.is-signed:not(.is-landing):not(.in-room) .top { background: #0D211C; border-right-color: rgba(108, 219, 174, .08); } }
:root[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
/* Кот-проводник нырнул за край: штрихи «внимания» прячутся вместе с ним (их анимация мерцания перебивала opacity) */
.kg.is-down .kot-marks { animation: none !important; opacity: 0 !important; }

/* «Резиновая» прокрутка на Mac/iPhone: в самом низу проступал фон страницы под футером */
html { overscroll-behavior-y: none; }
html:has(.site-footer:not(:empty)) { background: #0B5A44; }
:root[data-theme="dark"]:has(.site-footer:not(:empty)) { background: #0C1F1A; }
body { background: var(--bg); }

/* Узкие телефоны: шапка публичных страниц не вылезает вбок */
@media (max-width: 480px) {
  .lp-top { gap: 8px; }
  .lp-top .logo-mark, .top .logo-mark { width: 40px !important; height: 40px !important; border-radius: 11px; }
  .lp-top .logo-word, .top .logo-word { height: 24px; }
  .lp-logo, .logo { gap: 8px; }
  .lp-auth { gap: 6px; }
  .theme-toggle { width: 38px; height: 38px; }
  .theme-toggle svg { width: 18px; height: 18px; }
}
@media (max-width: 374px) {
  .lp-top .logo-word, .top .logo-word { display: none !important; }
}
.site-register { white-space: nowrap; }
.reg-short { display: none; }
@media (max-width: 430px) { .reg-long { display: none; } .reg-short { display: inline; } }
/* Баннер cookie на узком экране: кнопки в колонку, не обрезаются */
@media (max-width: 380px) { .cookie-bar { grid-template-columns: minmax(0, 1fr) !important; } .cookie-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .cookie-actions .btn { min-width: 0; white-space: normal; height: auto; min-height: 38px; padding: 6px 8px; font-size: 13px; line-height: 1.2; } }
/* Совсем узкий экран (320px): кнопки cookie друг под другом, подпись в одну строку (01.11). */
@media (max-width: 359px) { .cookie-actions { grid-template-columns: minmax(0, 1fr); } .cookie-actions .btn { white-space: nowrap; } }
/* Кнопка «Смотреть ролик» рядом с основной: на узком экране переносится, а не вылезает */
@media (max-width: 420px) { .vid-btn { white-space: normal; text-align: left; max-width: 100%; } .vid-btn-solid { height: auto; min-height: 46px; padding-block: 8px; } }

/* ===== Адаптивность кабинета (30.10) ===== */
/* 1024–1359 с боковым меню: в строке окна места под тему мало — компактные колонки, как на планшете */
@media (min-width: 1024px) and (max-width: 1359px) {
  body.is-signed:not(.is-landing) .slot-row { grid-template-columns: 64px minmax(0, 1fr) 156px 150px; }
  body.is-signed:not(.is-landing) .sr-meta { grid-template-columns: 34px 112px; }
  body.is-signed:not(.is-landing) .sr-count { display: none; }
  body.is-signed:not(.is-landing) .sr-meta .chip-warn { grid-column: 1 / -1; }
}
/* Планшет 761–1023: вкладки не помещаются в шапку — узкая панель-«рельс» слева, только иконки */
@media (min-width: 761px) and (max-width: 1023px) {
  body.is-signed:not(.is-landing):not(.in-room) { padding-left: 84px; }
  body.is-signed:not(.is-landing):not(.in-room) .top {
    position: fixed; inset: 0 auto 0 0; width: 84px; height: 100vh; z-index: 50;
    border-bottom: 0; border-right: 1px solid var(--line); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.is-signed:not(.is-landing):not(.in-room) .top-inner {
    height: 100% !important; min-height: 0; max-width: none; margin: 0; padding: 16px 10px; flex-direction: column; align-items: center; gap: 14px; }
  body.is-signed:not(.is-landing):not(.in-room) .top .logo-word, body.is-signed:not(.is-landing):not(.in-room) .me-name { display: none !important; }
  body.is-signed:not(.is-landing):not(.in-room) .top .logo-mark { width: 50px !important; height: 50px !important; }
  body.is-signed:not(.is-landing):not(.in-room) .tabs { flex-direction: column; gap: 4px; margin: 0; padding: 0; background: none; border-radius: 0; overflow-y: auto; }
  body.is-signed:not(.is-landing):not(.in-room) .tab { position: relative; width: 56px; height: 52px; padding: 0; justify-content: center; border-radius: 14px; }
  body.is-signed:not(.is-landing):not(.in-room) .tab-ico { display: block; }
  body.is-signed:not(.is-landing):not(.in-room) .tab > span:not(.tab-ico):not(.tab-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.is-signed:not(.is-landing):not(.in-room) .tab.is-active { background: var(--accent-softer); color: var(--accent); box-shadow: none; }
  body.is-signed:not(.is-landing):not(.in-room) .tab-badge { position: absolute; top: 6px; right: 6px; }
  body.is-signed:not(.is-landing):not(.in-room) .top-inner .theme-toggle { margin: auto 0 0; }
  body.is-signed:not(.is-landing):not(.in-room) #chat-fab { display: none; }
  :root[data-theme="dark"] body.is-signed:not(.is-landing):not(.in-room) .top { background: #0D211C; }
}

/* =========================================================
   «Жидкое стекло» (liquid-glass.js). Само стекло — в ::before под содержимым (преломление + размытие + тон),
   блик и кромка — в ::after. Хост остаётся как есть: его позиционирование и дочерние панели не ломаются.
   ========================================================= */
.lg {
  --lg-tint: rgba(255, 255, 255, .26);
  --lg-rim: rgba(255, 255, 255, .75);
  --lg-rim-2: rgba(255, 255, 255, .22);
  --lg-glow: rgba(255, 255, 255, .5);
  --lg-filter: blur(16px);
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(10, 40, 30, .08), 0 12px 32px -12px rgba(10, 40, 30, .32) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.lg:not(.lg-flat) { transition: transform .5s cubic-bezier(.3, 1.7, .45, 1), box-shadow .3s; }
:where(.lg) { position: relative; }
.lg::before, .lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lg::before {
  z-index: -1;
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.05);
  backdrop-filter: var(--lg-filter) saturate(1.9) brightness(1.05);
  box-shadow:
    inset 0 1px 0 0 var(--lg-rim),
    inset 0 -1px 0 0 var(--lg-rim-2),
    inset 1px 0 0 0 var(--lg-rim-2),
    inset -1px 0 0 0 var(--lg-rim-2),
    inset 0 0 18px -6px rgba(255, 255, 255, .55);
}
.lg::after {
  z-index: -1;
  background:
    radial-gradient(120% 90% at var(--lg-x, 22%) var(--lg-y, -20%), var(--lg-glow), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 46%);
  mix-blend-mode: soft-light;
  opacity: .9;
  transition: opacity .3s;
}
.lg:active { transform: scale(.965); }
.lg.lg-flat:active { transform: none; }
:root[data-theme="dark"] .lg {
  --lg-tint: rgba(18, 44, 36, .38);
  --lg-rim: rgba(255, 255, 255, .32);
  --lg-rim-2: rgba(255, 255, 255, .08);
  --lg-glow: rgba(255, 255, 255, .22);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 34px -12px rgba(0, 0, 0, .6) !important;
}
@media (prefers-reduced-transparency: reduce) {
  .lg { --lg-tint: color-mix(in srgb, var(--surface) 94%, transparent); }
}

/* --- Где стекло на сайте --- */
/* 1. Нижнее меню на телефоне — парящая стеклянная капсула, как в iOS 26 */
@media (max-width: 760px) {
  .tabs.lg {
    left: 10px !important; right: 10px !important; bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 6px !important; border-radius: 30px !important; border-top: 0 !important;
  }
  .tabs.lg { --lg-tint: rgba(255, 255, 255, .5); }
  :root[data-theme="dark"] .tabs.lg { --lg-tint: rgba(16, 38, 32, .55); }
  .tabs.lg .tab { border-radius: 24px; }
  .tabs.lg .tab.is-active { background: rgba(255, 255, 255, .6); color: var(--accent); box-shadow: 0 1px 3px rgba(10, 40, 30, .12); }
  :root[data-theme="dark"] .tabs.lg .tab.is-active { background: rgba(108, 219, 174, .16); }
  body.is-signed { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
/* 2. Шапка публичных страниц: при прокрутке превращается в парящую стеклянную полосу */
.lp-top { position: sticky; top: 10px; z-index: 40; transition: padding .35s cubic-bezier(.3, 1.2, .5, 1), margin .35s; border-radius: 26px; }
.lp-top.lg:not(.is-stuck)::before, .lp-top.lg:not(.is-stuck)::after { opacity: 0; }
.lp-top.lg:not(.is-stuck) { box-shadow: none !important; }
.lp-top.lg::before { transition: opacity .3s; }
.lp-top.is-stuck { padding: 10px 12px 10px 14px; margin-inline: -14px; }
.lp-top.lg.lg-flat:active { transform: none; }
@media (max-width: 760px) { .lp-top.is-stuck { margin-inline: -8px; padding: 8px 10px; } }
/* 3. Плашки поверх видео в баннере звонка */
.ls-name.lg { --lg-tint: rgba(10, 40, 30, .32); --lg-rim: rgba(255, 255, 255, .5); color: #fff; border-radius: 10px; }
.ls-pause.lg { --lg-tint: rgba(255, 255, 255, .14); }
/* 4. Кнопка темы и баннер cookie */
.theme-toggle.lg { --lg-tint: rgba(255, 255, 255, .45); }
.cookie-bar.lg { --lg-tint: rgba(255, 255, 255, .62); }
:root[data-theme="dark"] .cookie-bar.lg { --lg-tint: rgba(16, 38, 32, .7); }
/* Преломление (Chromium): backdrop-filter с SVG-фильтром работает только на самом элементе, не на псевдослое */
.lg.lg-refract { -webkit-backdrop-filter: var(--lg-filter) saturate(1.9) brightness(1.05) !important; backdrop-filter: var(--lg-filter) saturate(1.9) brightness(1.05) !important; }
.lg.lg-refract::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lp-top.lg:not(.is-stuck) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Шапка кабинета на телефоне: матовое стекло в псевдослое (на самой шапке размытие «привязало» бы нижнее меню) */
@media (max-width: 760px) {
  .top { background: transparent !important; }
  .top::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(215, 241, 226, .72); -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), 0 6px 18px -12px rgba(10, 40, 30, .35); }
  :root[data-theme="dark"] .top::before { background: rgba(16, 38, 32, .72); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .06); }
}
/* Читаемость текста на стекле */
.lp-top.lg.is-stuck { --lg-tint: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .lp-top.lg.is-stuck { --lg-tint: rgba(16, 38, 32, .66); }
.ls-name.lg { --lg-tint: rgba(8, 36, 27, .5); --lg-glow: rgba(255, 255, 255, .2); --lg-rim: rgba(255, 255, 255, .4); }

/* Страница окон (.sx-*) — в public/slots.css (01.11). */

/* Стекло «как у iPhone»: прозрачнее, яркая кромка со световым бликом сверху-слева и отражением снизу-справа,
   лёгкая внутренняя глубина. */
.lg::before {
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, .85),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, .45),
    inset 0 0 0 .5px rgba(255, 255, 255, .25),
    inset 0 -10px 22px -16px rgba(10, 40, 30, .22),
    inset 0 8px 18px -14px rgba(255, 255, 255, .7) !important;
}
:root[data-theme="dark"] .lg::before {
  box-shadow:
    inset 1.5px 1.5px 0 -0.5px rgba(255, 255, 255, .42),
    inset -1px -1px 0 -0.5px rgba(255, 255, 255, .16),
    inset 0 0 0 .5px rgba(255, 255, 255, .1),
    inset 0 -10px 22px -16px rgba(0, 0, 0, .5),
    inset 0 8px 18px -14px rgba(255, 255, 255, .2) !important;
}
/* Ещё стекло: окна-модалки (как шторки iOS), уведомление в сцене «Как это работает» */
#modal-card.lg { --lg-tint: rgba(255, 255, 255, .84); }
:root[data-theme="dark"] #modal-card.lg { --lg-tint: rgba(22, 49, 41, .86); }
.hw-ov.lg { --lg-tint: rgba(255, 255, 255, .72); }
:root[data-theme="dark"] .hw-ov.lg { --lg-tint: rgba(22, 49, 41, .78); }

/* ---------- Комната звонка ---------- */
/* В звонке и в лобби подвал с котом не нужен: страница заканчивается под вопросами. */
body.in-room #footer, body.in-room .kg { display: none; }
.tile { background: radial-gradient(120% 90% at 30% 15%, #1E5C48 0%, #10382D 60%, #0B2A22 100%); }
.tile video { background: #0B2A22; }
.tile.speaking { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); }
.tile-avatar { border: 2px solid rgba(255, 255, 255, .5); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.tile-status { color: rgba(255, 255, 255, .85); }
.tiles { position: relative; }
/* Вдвоём: собеседник на всю сцену, своё видео — окошком в углу (как в FaceTime). Втроём — сетка, как была. */
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) { grid-template-columns: minmax(0, 1fr); }
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile:not(.is-me) {
  aspect-ratio: 16 / 10; max-height: max(320px, calc(100dvh - 300px)); border-radius: 28px;
}
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: clamp(120px, 24%, 230px); border-radius: 18px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .75), 0 14px 30px -12px rgba(0, 0, 0, .6);
}
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me.speaking {
  box-shadow: 0 0 0 3px var(--accent), 0 14px 30px -12px rgba(0, 0, 0, .6);
}
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-avatar { width: 46px; height: 46px; font-size: 17px; }
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-label { left: 8px; right: 8px; bottom: 8px; }
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-name { padding: 4px 8px; font-size: 12px; gap: 6px; border-radius: 8px; }
.tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-name small { display: none; }
/* Подсказка персонажа лежит на сцене, а не в маленьком своём окошке. */
.room-when { color: var(--muted); font-size: 14.5px; }
.tiles > .ch-hint { top: 14px; left: 14px; max-width: min(320px, calc(100% - 28px - 24%)); }
.ch-hint { background: rgba(255, 253, 246, .97); border-radius: 18px; }
.ctrl:not(.ctrl-exit) { background: var(--surface); }
.ctrl.off:not(.ctrl-exit) { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
:root[data-theme="dark"] .ctrl.off { background: color-mix(in srgb, var(--danger) 30%, var(--surface)); color: #FFB4A6; }
@media (max-width: 760px) {
  .tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile:not(.is-me) { aspect-ratio: 1; max-height: 52dvh; min-height: 0; border-radius: 22px; }
  .tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-name > :not(.mic-ind) { display: none; }
  .tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me .tile-name { padding: 5px 6px; }
  /* Шапка звонка в одну строку: «В эфире» и таймер; дата и формат и так известны. */
  .room-head { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; }
  .room-title { flex-wrap: nowrap; min-width: 0; }
  .room-when { display: none; }
  .room-head-side { flex-wrap: nowrap; }
  .tiles:not(.three):has(> .tile ~ .tile):not(:has(> .tile ~ .tile ~ .tile)) > .tile.is-me { top: 10px; right: 10px; width: 31%; border-radius: 14px; }
  .tiles > .ch-hint { top: 10px; left: 10px; max-width: calc(69% - 26px); }
  /* Лобби: своё превью пониже, чтобы «Войти в звонок» было видно без прокрутки. */
  .lobby-tile { aspect-ratio: auto; height: min(32dvh, 260px); }
}

/* ---------- Кот в окне: ошибки и пустые состояния (public/kot-states.js) ---------- */
/* Окно вечернего фасада с тёплым светом, кот сидит на подоконнике: лапы — на кромке, низ туловища прячет подоконник. */
.kw { --kw: 170px; position: relative; display: inline-block; flex: none; width: var(--kw); height: calc(var(--kw) * .88); vertical-align: middle; }
.kw-frame { position: absolute; left: calc(var(--kw) * .05); right: calc(var(--kw) * .05); top: 0; bottom: calc(var(--kw) * .1); padding: calc(var(--kw) * .05); border-radius: calc(var(--kw) * .46) calc(var(--kw) * .46) calc(var(--kw) * .07) calc(var(--kw) * .07); background: var(--night); box-shadow: 0 18px 34px -20px rgba(11, 94, 71, .7); }
.kw-glass { position: relative; display: block; height: 100%; overflow: hidden; border-radius: calc(var(--kw) * .41) calc(var(--kw) * .41) calc(var(--kw) * .035) calc(var(--kw) * .035); background: radial-gradient(90% 75% at 50% 30%, #FFF1BC 0%, #F6D27A 55%, #E7AE55 100%); }
.kw-glass::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: calc(var(--kw) * .035); transform: translateX(-50%); background: var(--night); }
.kw-glass::after { content: ""; position: absolute; left: 0; right: 0; top: 44%; height: calc(var(--kw) * .035); background: var(--night); }
.kw::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(var(--kw) * .13); border-radius: calc(var(--kw) * .04); background: color-mix(in srgb, var(--night) 82%, #000); box-shadow: inset 0 calc(var(--kw) * .02) 0 rgba(255, 255, 255, .14); }
.kw-cat { position: absolute; z-index: 1; left: 50%; bottom: calc(var(--kw) * .13 - var(--kw) * .78 * .1364); width: calc(var(--kw) * .78); transform: translateX(-50%); }
.kw-cat .kot { display: block; width: 100%; height: auto; }
:root[data-theme="dark"] .kw-glass { background: radial-gradient(90% 75% at 50% 30%, #FFE9A6 0%, #E9BD5F 55%, #C98F3D 100%); }

.kot-state { display: grid; justify-items: center; gap: 6px; padding: 40px 24px 44px; text-align: center; }
.kot-state .kw { margin-bottom: 14px; }
.kot-state h1, .kot-state h2 { margin: 0; font-size: 26px; line-height: 1.15; text-wrap: balance; }
.kot-state p { margin: 4px auto 0; max-width: 420px; color: var(--muted); }
.kot-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }

/* 404: «4 [окно с котом] 4» */
.seo-404-code { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: clamp(96px, 22vw, 168px); line-height: 1; }
.seo-404-code .kw { --kw: clamp(120px, 26vw, 196px); margin: 0 4px; }
.seo-404 .lp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

/* Нет интернета: плашка снизу, пока браузер офлайн. */
.net-off { position: fixed; z-index: 90; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(440px, calc(100% - 24px)); padding: 10px 16px 10px 10px; border-radius: 22px; background: var(--surface); color: var(--ink); box-shadow: 0 20px 44px -16px rgba(10, 40, 32, .45), 0 0 0 1px var(--line); animation: net-off-in .35s cubic-bezier(.2, .9, .3, 1.2); }
.net-off .kw { --kw: 64px; }
.net-off b { display: block; font-size: 15.5px; }
.net-off span { font-size: 13.5px; color: var(--muted); }
@keyframes net-off-in { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (max-width: 760px) { body.is-signed:not(.in-room) .net-off { bottom: calc(92px + env(safe-area-inset-bottom)); } }

/* Звонок оборвался: кот на сцене, пока переподключаемся. */
.room-drop { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 20px; border-radius: inherit; text-align: center; color: #fff; background: rgba(8, 34, 27, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: kw-fade .3s ease-out; }
@keyframes kw-fade { from { opacity: 0; } }
.tiles > .room-drop { border-radius: 28px; }
.room-drop .kw { --kw: 120px; margin-bottom: 8px; }
.room-drop b { font-size: 18px; }
.room-drop span { font-size: 14px; color: rgba(255, 255, 255, .8); max-width: 300px; }
@media (prefers-reduced-motion: reduce) { .net-off, .room-drop { animation: none; } }

/* ---------- 404: «4 [кот в окне] 4», вечерний фасад и жидкое стекло ---------- */
.k404 { position: relative; isolation: isolate; overflow: hidden; margin: 8px auto 0; max-width: 980px; padding: 92px 16px 64px !important; border-radius: 36px; background: radial-gradient(120% 90% at 50% 0%, #1A7A5C 0%, #0F5A45 45%, #0A3B2E 100%); }
.k404 .seo-404-code { position: relative; z-index: 1; gap: clamp(4px, 1.5vw, 14px); color: #F6D27A !important; opacity: 1; font-weight: 700; text-shadow: 0 6px 0 rgba(0, 0, 0, .18), 0 0 46px rgba(246, 210, 122, .45); }
.k404 .seo-404-code > span:not(.k404-say) { display: inline-block; animation: k404-bob 4.5s ease-in-out infinite; }
.k404 .seo-404-code > span:nth-of-type(2) { animation-delay: -2.2s; }
@keyframes k404-bob { 50% { transform: translateY(-10px) rotate(-3deg); } }
/* Окно с котом вместо «0» — кнопка: кота можно погладить. */
.k404-cat { all: unset; cursor: pointer; display: inline-block; border-radius: 40% 40% 12px 12px; -webkit-tap-highlight-color: transparent; }
.k404-cat:focus-visible { outline: 3px solid #F6D27A; outline-offset: 6px; }
.k404 .kw { --kw: clamp(118px, 27vw, 210px); margin: 0; }
.k404 .kw-frame { background: #F6D27A; }
.k404 .kw-glass::before, .k404 .kw-glass::after { background: #F6D27A; }
.k404 .kw::after { background: #D9AE4F; }
.k404 .kw-glass, :root[data-theme="dark"] .k404 .kw-glass { background: radial-gradient(90% 75% at 50% 30%, #2E9C77 0%, #13664E 60%, #0B4636 100%); }
:root[data-theme="dark"] .k404 .seo-404-code { color: #F6D27A !important; }
:root[data-theme="dark"] .k404 { background: radial-gradient(120% 90% at 50% 0%, #17694F 0%, #0D4A39 45%, #082E24 100%); box-shadow: 0 0 0 1px rgba(108, 219, 174, .1); }
.k404 .kw-glass i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF6D8; }
.k404-cat:active .kw-cat { transform: translateX(-50%) scale(.96); }
.k404 .kw-cat { transition: transform .2s; }
/* Горящие окна дома напротив — фон, который преломляет стекло. */
.k404-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.k404-sky i { position: absolute; width: var(--s, 70px); height: calc(var(--s, 70px) * 1.2); border-radius: 14px; background: linear-gradient(160deg, #FFE8A3, #F2B35B); opacity: .9; box-shadow: 0 0 40px rgba(246, 200, 110, .35); animation: k404-drift var(--d, 14s) ease-in-out infinite alternate; }
.k404-sky i:nth-child(1) { left: 5%; top: 12%; --s: 64px; --d: 13s; }
.k404-sky i:nth-child(2) { left: 18%; top: 62%; --s: 90px; --d: 17s; background: linear-gradient(160deg, #9BE8C6, #3FC795); }
.k404-sky i:nth-child(3) { left: 33%; top: 78%; --s: 54px; --d: 11s; }
.k404-sky i:nth-child(4) { right: 6%; top: 10%; --s: 76px; --d: 15s; background: linear-gradient(160deg, #F7B7A6, #E8806A); }
.k404-sky i:nth-child(5) { right: 20%; top: 66%; --s: 96px; --d: 19s; }
.k404-sky i:nth-child(6) { left: 46%; top: 70%; --s: 70px; --d: 16s; background: linear-gradient(160deg, #9BE8C6, #3FC795); }
.k404-sky i:nth-child(7) { right: 34%; top: 84%; --s: 50px; --d: 12s; background: linear-gradient(160deg, #C9B5F2, #8E72D8); }
.k404-sky i:nth-child(8) { left: 2%; top: 44%; --s: 46px; --d: 10s; background: linear-gradient(160deg, #C9B5F2, #8E72D8); }
.k404-sky i:nth-child(9) { right: 2%; top: 42%; --s: 58px; --d: 18s; }
@keyframes k404-drift { to { transform: translate(14px, -22px) rotate(6deg); } }
/* Реплика кота по-английски с переводом. */
.k404-say { position: absolute; z-index: 4; left: 50%; bottom: calc(100% - 14px); width: max-content; max-width: min(340px, 86vw); padding: 10px 16px; border-radius: 18px; background: #FFFDF6; color: #15201C; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); text-align: center; text-shadow: none; font-size: 16px; line-height: 1.3; transform: translateX(-50%); animation: k404-pop .35s cubic-bezier(.2, .9, .3, 1.4); }
.k404-say[hidden] { display: none; }
.k404-say::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.k404-say b { display: block; font-family: var(--display); font-size: 18px; font-weight: 700; }
.k404-say small { display: block; font-size: 13.5px; font-weight: 400; color: #4A5752; }
.k404 .seo-404-code > .k404-say { animation: k404-pop .35s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes k404-pop { from { opacity: 0; transform: translate(-50%, 8px) scale(.9); } }
/* Стеклянная карточка заходит на цифры — сквозь кромку видно, как они преломляются. */
.k404-card { position: relative; z-index: 3; max-width: 560px; margin: 10px auto 0; padding: 30px 28px 28px; border-radius: 32px; text-align: center; }
.k404-card:not(.lg) { background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); }
.k404-card.lg { --lg-tint: rgba(255, 255, 255, .62); }
:root[data-theme="dark"] .k404-card.lg { --lg-tint: rgba(16, 38, 32, .62); }
:root[data-theme="dark"] .k404-card:not(.lg) { background: rgba(16, 38, 32, .72); }
.k404-card h1 { margin: 0; font-size: clamp(26px, 5vw, 36px); color: var(--ink); }
.k404-card p { margin: 10px auto 0 !important; color: var(--ink-2) !important; max-width: 420px; }
.k404-card .lp-actions { margin-top: 20px; }
.k404-card .lp-btn { height: 52px; padding: 0 26px; border-radius: 16px; display: inline-flex; align-items: center; }
.k404-chip { display: inline-flex; align-items: center; height: 52px; padding: 0 20px; border-radius: 16px; font-weight: 600; color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(15, 115, 80, .18); transition: background .2s, transform .2s; }
.k404-chip:hover { background: rgba(255, 255, 255, .85); transform: translateY(-1px); }
:root[data-theme="dark"] .k404-chip { background: rgba(108, 219, 174, .12); box-shadow: inset 0 0 0 1px rgba(108, 219, 174, .25); }
:root[data-theme="dark"] .k404-chip:hover { background: rgba(108, 219, 174, .2); }
@media (max-width: 560px) {
  .k404 { border-radius: 26px; padding: 84px 12px 16px !important; margin: 0 -4px; }
  .k404-card { padding: 24px 16px 18px; border-radius: 26px; }
  .k404-card .lp-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .k404-card .lp-btn { grid-column: 1 / -1; justify-content: center; }
  .k404-chip { justify-content: center; text-align: center; height: auto; min-height: 48px; padding: 8px 10px; font-size: 14px; }
  .k404-chip:last-child { grid-column: 1 / -1; }
  .k404-sky i:nth-child(1), .k404-sky i:nth-child(4), .k404-sky i:nth-child(8), .k404-sky i:nth-child(9) { display: none; }
  .k404-sky i { width: calc(var(--s, 70px) * .7); height: calc(var(--s, 70px) * .84); }
}
@media (prefers-reduced-motion: reduce) { .k404 .seo-404-code > span, .k404-sky i, .k404-say { animation: none; } }

/* ---------- Админка: «Новое окно» от темы из библиотеки ---------- */
.tp-pick { display: flex; gap: 8px; }
.tp-pick .input { flex: 1; min-width: 0; }
.tp-pick .btn { flex: none; height: auto; }
.qt-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.qt { border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; font: 600 13.5px var(--sans); color: var(--ink-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; }
.qt:hover { background: var(--accent-softer); color: var(--accent); }
.qt.is-on { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="dark"] .qt.is-on { color: #062018; }
.qp { margin: 4px 0 14px; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.qp > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 13px 16px; }
.qp > summary::-webkit-details-marker { display: none; }
.qp > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; color: var(--muted); }
.qp[open] > summary::after { transform: rotate(-135deg); }
.qp-sum { color: var(--muted); font-size: 14px; }
.qp > .field { margin: 0 16px 14px; }

/* ---------- «Мои окна»: история разговоров лентой, с персонажами собеседников ---------- */
.hist-list { position: relative; gap: 12px; }
.hist-list::before { content: ""; position: absolute; left: 44px; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: var(--line); }
.hist { position: relative; }
.hist .row-when { position: relative; z-index: 1; }
.hist-who { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.hist-who > span:not(.hist-ava) { margin-left: 10px; }
.hist-ava { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; overflow: hidden; margin-left: -10px; border: 2px solid var(--surface); font: 700 13px var(--sans); }
.hist-ava:first-child { margin-left: 0; }
.hist-ava img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .hist-list::before { display: none; } }

/* Профиль: лапки и прогресс — первым рядом под шапкой. */
.pf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin: 20px 0; align-items: start; }
.pf-top > .card { margin: 0; }
@media (max-width: 900px) { .pf-top { grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 14px 0; } }

/* ---------- Мелкие ссылки на публичных страницах — вторичные кнопки (удобно попасть пальцем) ---------- */
.lp-link, .sl-prevnext a, .lvl-more, .cert-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 0; border-radius: 14px; background: var(--accent-softer); color: var(--accent); font: 600 15.5px var(--sans);
  text-decoration: none; line-height: 1.2; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.lp-link:hover, .sl-prevnext a:hover, .lvl-more:hover, .cert-link:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); transform: translateY(-1px); border-bottom-color: transparent; }
.lp-link:active, .sl-prevnext a:active, .lvl-more:active, .cert-link:active { transform: translateY(0) scale(.98); }
:root[data-theme="dark"] .lp-link, :root[data-theme="dark"] .sl-prevnext a, :root[data-theme="dark"] .lvl-more, :root[data-theme="dark"] .cert-link { background: rgba(108, 219, 174, .12); color: #A9EBCF; box-shadow: inset 0 0 0 1px rgba(108, 219, 174, .26); }
:root[data-theme="dark"] .lp-link:hover, :root[data-theme="dark"] .sl-prevnext a:hover, :root[data-theme="dark"] .lvl-more:hover, :root[data-theme="dark"] .cert-link:hover { background: rgba(108, 219, 174, .2); }
.lvl-more { min-height: 40px; padding: 0 14px; margin-top: 8px; font-size: 14px; border-radius: 12px; }
.sl-prevnext a { max-width: 48%; }
.sl-prevnext a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-more { margin-top: 18px; }
.tp-actions, .lp-cert-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Ссылки внутри шапки входа и в формах оставляем текстовыми. */
.auth-top .lp-link, .lt-form-actions .lp-link { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--ink); border-radius: 0; }

/* ---------- Страница окна #/slot/… — в стиле новой ленты ---------- */
.session-hero.sh { position: relative; margin-top: 64px; padding: 26px 28px 22px; border-radius: 28px; color: #fff; border: 0;
  background: radial-gradient(110% 90% at 12% 0%, #22A877, #12845E 48%, #0B5E47); box-shadow: 0 24px 50px -24px rgba(11, 94, 71, .75); }
:root[data-theme="dark"] .session-hero.sh { background: radial-gradient(110% 90% at 12% 0%, #18805E, #12684F 50%, #0A3D30); }
.sh .topic { color: #fff; margin-top: 10px; font-size: clamp(30px, 4vw, 42px); }
.sh .topic-ru { color: #DDF5E9; }
.sh .sx-faces > span:not(.sx-face) { margin-left: 10px; font-size: 14px; color: #E6F7EE; }
.sh .sx-face.ava-persona { width: 40px; height: 40px; }
.sh .jr { margin-top: 18px; border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .5); }
.session-grid > .status-card { margin-top: 64px; }
@media (max-width: 900px) {
  .session-grid > .status-card { margin-top: 0; }
  .session-hero.sh { margin-top: 70px; padding: 22px 18px 18px; }
  .sh .sx-best-cat { right: 18px; top: -74px; width: 110px; }
}

/* ---------- Путь новичка: мелкие упрощения ---------- */
/* Тост по ширине текста: раньше left:50% ужимал его до половины экрана, и «Ты идёшь: сегодня, 20:00» шло в 4 строки. */
.toast { width: max-content; }
/* Вход и регистрация на телефоне: кот поменьше — кнопка «Создать аккаунт» помещается на первый экран. */
@media (max-width: 760px) {
  .auth-card:has(> .kot-host) { margin-top: 66px; padding-top: 22px; }
  .auth-card > .mascot.kot-host { width: 104px; margin: calc(-22px - 69px) auto 4px; }
  .auth-card .page-sub { margin: 4px 0 16px; }
  .auth-card .form { gap: 12px; }
}
/* Отзыв после звонка: «Всё прошло хорошо» одним нажатием. */
.fb-quick { display: flex; align-items: center; gap: 14px; width: 100%; margin-bottom: 18px; padding: 14px 18px; border: 0; border-radius: 18px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: var(--accent-softer); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); transition: background .2s, transform .2s; }
.fb-quick:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); transform: translateY(-1px); }
.fb-quick svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--accent); color: #fff; }
.fb-quick b { display: block; font-size: 16px; }
.fb-quick small { color: var(--muted); font-size: 13.5px; }

/* Главная: преимущества — список с галочками-значками, а не белые «кнопки», на которые хочется нажать. */
.lp-pills li { padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-weight: 600; }
.lp-pills svg { box-sizing: content-box; padding: 7px; border-radius: 12px; background: var(--accent-softer); }
.lp-pills { gap: 8px 22px; }
@media (max-width: 560px) { .lp-pills { grid-template-columns: 1fr 1fr; gap: 10px 12px; } .lp-pills li { font-size: 14.5px; align-items: center; } }
/* Уведомление во вкладке на телефоне — снизу над меню, а не поверх заголовка страницы. */
@media (max-width: 760px) { .live-note { top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateY(12px); } .live-note.is-on { transform: none; } body.in-room .live-note { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Плавность: бесконечные анимации — только transform и opacity ---------- */
/* Эквалайзеры «говорит»: раньше анимировали height, и браузер каждый кадр пересчитывал раскладку. */
.bars i { height: 12px; transform: scaleY(.25); transform-origin: 50% 100%; }
.tile.speaking .bars i { animation-name: eq-s; }
@keyframes eq-s { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.hw-wave i { height: 100%; transform: scaleY(.3); animation-name: hw-wv-s; }
@keyframes hw-wv-s { 50% { transform: scaleY(1); } }
.ls-eq b { height: 10px; transform: scaleY(.3); transform-origin: 50% 100%; }
.ls-tile.is-speaking .ls-eq b { animation-name: ls-eq-s; }
@keyframes ls-eq-s { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
/* Пульсирующие кольца: вместо анимации box-shadow (перерисовка каждый кадр) — слой, который растёт и тает. */
.jr li.is-now .jr-dot, .ph-word, .room-clock.is-over, .call-offer.is-over .co-ico { animation-name: none; }
.room-clock.is-over { animation: clock-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
.ph-word, .room-clock, .co-ico { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .jr li.is-now .jr-dot::after, .room-clock.is-over::after, .call-offer.is-over .co-ico::after {
    content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 3px rgba(244, 213, 110, .75); animation: ring-out 1.8s ease-out infinite;
  }
  .room-clock.is-over::after, .call-offer.is-over .co-ico::after { inset: 0; box-shadow: 0 0 0 3px rgba(163, 74, 55, .5); animation-duration: 2s; }
  .ph-word::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 3px rgba(246, 216, 106, .35); opacity: 0; animation: glow-o 3.2s ease-in-out infinite; }
}
@keyframes ring-out { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes glow-o { 50% { opacity: 1; } }
/* Вне экрана — на паузе (public/anim-pause.js). */
.anim-off, .anim-off * { animation-play-state: paused !important; }
/* 404 на телефоне: окна позади стекла не плывут — иначе преломление в стекле пересчитывается каждый кадр. */
@media (max-width: 760px) { .k404-sky i { animation: none; } }
/* «Как это работает»: звёзды мерцают группами, курсор едет через transform (public/how.js). */
.hw-stars i { animation: none; opacity: .9; }
.hw-tw-g { position: absolute; inset: 0; opacity: .28; animation: hw-tw-g 4s ease-in-out infinite; }
@keyframes hw-tw-g { 50% { opacity: 1; } }
.hw-cursor { left: 0; top: 0; transition: transform .9s cubic-bezier(.5, 0, .2, 1), opacity .3s; }
@media (prefers-reduced-motion: reduce) { .hw-tw-g { animation: none; opacity: .6; } }

/* ---------- Телефон: шапка, стекло, персонажи (правки по скриншотам с iPhone) ---------- */
/* «Войти» в шапке на узком экране прячется в меню: правило кнопок .lp-link его вернуло и выдавило бургер за край. */
@media (max-width: 560px) { .lp-top .site-login { display: none !important; } }
/* Шапка на телефоне — ровная полоса во всю ширину, прижата к верху (без щели, в которой просвечивает страница). */
@media (max-width: 760px) {
  .lp-top, .lp-top.is-stuck {
    top: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; border-radius: 0 0 22px 22px;
  }
  .lp-top .lp-auth { margin-left: auto; }
  /* На входе и регистрации шапка не липнет: иначе наезжает на кота над карточкой. */
  .auth-top, .auth-top.is-stuck { position: relative; }
}
/* Стекло там, где нет преломления (Safari, Firefox): не «молочное», а прозрачное, как в iOS 26.
   Середина почти не размыта (фон лишь ярче и сочнее), по краю — полоса толщины стекла: там фон размыт и осветлён
   сильнее (backdrop-filter под маской-кольцом), плюс светлая кромка сверху слева и мягкая снизу справа. */
.lg.lg-matte { --lg-tint: rgba(255, 255, 255, .16); --lg-edge: 6px; }
.lg.lg-matte::before {
  -webkit-backdrop-filter: blur(3px) saturate(1.4) brightness(1.06);
  backdrop-filter: blur(3px) saturate(1.4) brightness(1.06);
  box-shadow:
    inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .95),
    inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .2),
    inset 0 0 18px rgba(255, 255, 255, .18);
}
.lg.lg-matte::after {
  padding: var(--lg-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-backdrop-filter: blur(7px) saturate(1.15) brightness(1.06);
  backdrop-filter: blur(7px) saturate(1.15) brightness(1.06);
  background: linear-gradient(150deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .22));
  mix-blend-mode: normal;
  opacity: 1;
}
:root[data-theme="dark"] .lg.lg-matte { --lg-tint: rgba(14, 34, 28, .5); }
:root[data-theme="dark"] .lg.lg-matte::before {
  -webkit-backdrop-filter: blur(3px) saturate(1.6) brightness(.92);
  backdrop-filter: blur(3px) saturate(1.6) brightness(.92);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .45), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 16px rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .lg.lg-matte::after {
  -webkit-backdrop-filter: blur(7px) saturate(1.1) brightness(1.02);
  backdrop-filter: blur(7px) saturate(1.1) brightness(1.02);
  background: linear-gradient(150deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .03) 32%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .1));
}
/* Там, где на стекле текст (шапка, меню, cookie), стекло плотнее — иначе буквы теряются на пёстром фоне. */
.lp-top.lg.lg-matte.is-stuck, .tabs.lg.lg-matte, .cookie-bar.lg.lg-matte, #modal-card.lg.lg-matte { --lg-tint: rgba(236, 248, 241, .46); }
.lp-top.lg.lg-matte.is-stuck::before, .tabs.lg.lg-matte::before, .cookie-bar.lg.lg-matte::before, #modal-card.lg.lg-matte::before { -webkit-backdrop-filter: blur(10px) saturate(1.7) brightness(1.08); backdrop-filter: blur(10px) saturate(1.7) brightness(1.08); }
:root[data-theme="dark"] .lp-top.lg.lg-matte.is-stuck, :root[data-theme="dark"] .tabs.lg.lg-matte, :root[data-theme="dark"] .cookie-bar.lg.lg-matte, :root[data-theme="dark"] #modal-card.lg.lg-matte { --lg-tint: rgba(16, 38, 32, .62); }
.lp-top.lg.lg-matte:not(.is-stuck)::after { opacity: 0; }
.ls-name.lg.lg-matte { --lg-tint: rgba(8, 36, 27, .45); --lg-edge: 4px; }
.theme-toggle.lg.lg-matte, .ls-pause.lg.lg-matte { --lg-edge: 5px; }
/* Телефоны: гуашевый SVG-фильтр на двигающихся частях пересчитывается каждый кадр (Safari — на процессоре),
   отсюда подвисания. На сенсорных экранах персонажи и кот без фильтра — анимации идут ровно. */
@media (pointer: coarse) {
  .ch .ch-hair-back, .ch .ch-body, .ch .ch-head, .ch .ch-hand, .ch .ch-arm > path, .site-ico svg { filter: none; }
  svg.kot [filter] { filter: none; }
}
/* Зоны нажатия на телефоне не меньше 40px (по проверке вёрстки 375–430px). */
@media (pointer: coarse) {
  .ls-pause { width: 40px; height: 40px; }
  .vid-text > summary { padding-block: 10px; }
}

/* ---------- Компьютер (Chromium, мышь): то же стекло + линза — кромка по-настоящему гнёт фон, блик за курсором ---------- */
.lg.lg-lens { -webkit-backdrop-filter: var(--lg-filter) saturate(1.5) brightness(1.06) !important; backdrop-filter: var(--lg-filter) saturate(1.5) brightness(1.06) !important; }
.lg.lg-lens::before, :root[data-theme="dark"] .lg.lg-lens::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lg.lg-lens::after, :root[data-theme="dark"] .lg.lg-lens::after { padding: 0; -webkit-mask: none; mask: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.lg.lg-lens::after {
  background:
    radial-gradient(160px circle at var(--lg-x, 26%) var(--lg-y, -40%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .16));
}
:root[data-theme="dark"] .lg.lg-lens { -webkit-backdrop-filter: var(--lg-filter) saturate(1.35) brightness(.95) !important; backdrop-filter: var(--lg-filter) saturate(1.35) brightness(.95) !important; }
:root[data-theme="dark"] .lg.lg-lens::after {
  background:
    radial-gradient(160px circle at var(--lg-x, 26%) var(--lg-y, -40%), rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .02) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .07));
}
/* Где на стекле текст — линза размывает сильнее, чтобы буквы читались. */
.lp-top.lg.lg-lens.is-stuck, .tabs.lg.lg-lens, .cookie-bar.lg.lg-lens, #modal-card.lg.lg-lens, .k404-card.lg.lg-lens { --lg-blur: 10px; }
/* Кнопки из стекла на наведение чуть приподнимаются, на нажатие — упруго проседают. */
.lg.lg-lens:is(button, a):not(.lg-flat):hover { transform: translateY(-1px) scale(1.02); }
.lg.lg-lens:is(button, a):not(.lg-flat):active { transform: scale(.96); }

/* ---------- Стекло везде, где что-то лежит поверх контента (31.10) ---------- */
/* Меню кабинета на компьютере — парящая стеклянная панель с отступом от края. */
@media (min-width: 1024px) {
  body.is-signed:not(.is-landing):not(.in-room) { padding-left: 272px; }
  body.is-signed:not(.is-landing):not(.in-room) .top.lg { inset: 12px auto 12px 12px; height: auto; border-radius: 28px; }
}
@media (min-width: 761px) and (max-width: 1023px) {
  body.is-signed:not(.is-landing):not(.in-room) { padding-left: 96px; }
  body.is-signed:not(.is-landing):not(.in-room) .top.lg { inset: 10px auto 10px 10px; height: auto; border-radius: 26px; }
}
.top.lg, .site-drop-panel.lg, .site-menu-panel.lg, .chat-dock.lg { --lg-tint: rgba(246, 252, 248, .66); --lg-blur: 14px; }
:root[data-theme="dark"] .top.lg, :root[data-theme="dark"] .site-drop-panel.lg, :root[data-theme="dark"] .site-menu-panel.lg, :root[data-theme="dark"] .chat-dock.lg { --lg-tint: rgba(16, 38, 32, .7); }
.top.lg.lg-matte::before, .site-drop-panel.lg.lg-matte::before, .site-menu-panel.lg.lg-matte::before, .chat-dock.lg.lg-matte::before { -webkit-backdrop-filter: blur(16px) saturate(1.7) brightness(1.06); backdrop-filter: blur(16px) saturate(1.7) brightness(1.06); }
/* Сообщения и уведомления — тёмное стекло с белым текстом в обеих темах. */
.toast.lg, .live-note.lg, :root[data-theme="dark"] .toast.lg, :root[data-theme="dark"] .live-note.lg { --lg-tint: rgba(12, 44, 34, .78); --lg-blur: 12px; color: #fff; }
.toast.lg.lg-matte::before, .live-note.lg.lg-matte::before { -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
.toast.lg.lg-flat:active { transform: translate(-50%, 0); }
.toast.lg:not(.show).lg-flat:active { transform: translate(-50%, 20px); }
/* Звонок: плашки поверх видео, подсказка персонажа, кнопки. */
.tile-name.lg, .tile-net.lg { --lg-tint: rgba(8, 30, 23, .5); --lg-edge: 4px; --lg-blur: 6px; color: #fff; }
.ch-hint.lg { --lg-tint: rgba(255, 253, 246, .82); --lg-blur: 12px; }
.ch-hint.lg.lg-matte::before { -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.ctrl.lg { --lg-tint: rgba(255, 255, 255, .5); --lg-edge: 6px; }
:root[data-theme="dark"] .ctrl.lg { --lg-tint: rgba(22, 49, 41, .6); }
.ctrl.off.lg { --lg-tint: color-mix(in srgb, var(--danger) 28%, rgba(255, 255, 255, .55)); color: var(--danger); }
:root[data-theme="dark"] .ctrl.off.lg { --lg-tint: color-mix(in srgb, var(--danger) 40%, rgba(16, 38, 32, .6)); color: #FFB4A6; }
@media (max-width: 760px) {
  .room-grid .controls.lg { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 8px 10px; border-radius: 28px; border-top: 0 !important; }
  .room-grid .controls.lg { --lg-tint: rgba(236, 248, 241, .5); }
  :root[data-theme="dark"] .room-grid .controls.lg { --lg-tint: rgba(16, 38, 32, .6); }
}
.toast.error.lg, :root[data-theme="dark"] .toast.error.lg { --lg-tint: rgba(106, 44, 31, .84); }

/* Профиль: второстепенное — в свёрнутых «Настройках профиля». */
.pf-more { margin-top: 22px; }
.pf-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary b { display: block; font-size: 17px; }
.pf-more > summary small { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; }
.pf-more > summary::after { content: ""; margin-left: auto; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.pf-more[open] > summary::after { transform: rotate(-135deg); }
.pf-more > summary:hover { background: var(--surface-2); }
.pf-more > .profile-grid { margin-top: 18px; }
.pf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }
.pf-cards > .card { margin: 0; }
@media (max-width: 900px) { .pf-cards { gap: 14px; } }
/* Профиль: полученные значки строкой, вся сетка достижений и активность — под раскрывашками. */
.pf-got { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pf-got span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--accent-softer); color: var(--ink); font-size: 14px; font-weight: 600; }
.pf-got i { font-style: normal; font-size: 17px; }
.pf-next { margin: 12px 0 0; color: var(--muted); font-size: 14.5px; }
.pf-next b { color: var(--ink); }
.pf-fold { margin-top: 14px; }
.pf-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 600; font-size: 14.5px; color: var(--accent); background: var(--accent-softer); }
.pf-fold > summary::-webkit-details-marker { display: none; }
.pf-fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.pf-fold[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.pf-fold[open] > summary { margin-bottom: 12px; }
.paw-next { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.paw-next > div { flex: 1; min-width: 0; }
.paw-next .paw-sub { margin: 0 0 8px; }
.paw-next svg, .paw-next .paw-badge { flex: none; }
/* Три главные цифры профиля — всегда в один ряд, и на телефоне. */
.pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.pf-stats div:last-child:nth-child(odd) { grid-column: auto; }
@media (max-width: 560px) { .pf-stats div { padding: 12px 12px; } .pf-stats b { font-size: 22px; } .pf-stats span { font-size: 12.5px; } }

/* ---------- Шапка — стеклянная капсула всегда; окна и чат — сплошные (31.10) ---------- */
/* Публичные страницы на телефоне: капсула с одинаковыми отступами слева и справа, как на витрине стекла. */
@media (max-width: 760px) {
  .lp-top, .lp-top.is-stuck { top: calc(8px + env(safe-area-inset-top, 0px)); width: auto; margin: 8px -6px 0; padding: 8px 10px; border-radius: 24px; }
  .auth-top, .auth-top.is-stuck { margin-top: 8px; }
  /* Кабинет на телефоне: шапка — такая же капсула. */
  .top.lg { top: calc(8px + env(safe-area-inset-top, 0px)); margin: 8px 10px 0; border-radius: 24px; border-bottom: 0 !important; }
  .top.lg::before { background: var(--lg-tint); }
  .top.lg .top-inner { padding-left: 12px; padding-right: 10px; }
  /* Узкое окно с мышью: без размытия на самой шапке — иначе нижнее меню внутри неё перестаёт быть «прибитым». */
  .top.lg.lg-lens { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .top.lg.lg-lens::before { -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
}
/* Выпадающие меню — почти сплошные: в них читают. */
.site-drop-panel.lg, .site-menu-panel.lg { --lg-tint: rgba(250, 253, 251, .94); }
:root[data-theme="dark"] .site-drop-panel.lg, :root[data-theme="dark"] .site-menu-panel.lg { --lg-tint: rgba(18, 42, 35, .95); }
/* Отступ над шапкой-капсулой не «проваливается» наружу: иначе сверху видна тёмная полоса фона html. */
.lp, .seo-page, .auth-wrap { display: flow-root; }

/* ---------- Шапка и меню: чистое стекло без линзы (31.10) ---------- */
/* Линза и сильное размытие превращали заголовок под шапкой в мутное пятно с цветными кусками. Там, где на стекле
   текст, — без изгиба фона, подложка плотнее: под ней мягко просвечивает, а не мажется. Кромка и блик остаются. */
.lp-top.lg.is-stuck, .top.lg { --lg-tint: rgba(240, 250, 244, .76); }
:root[data-theme="dark"] .lp-top.lg.is-stuck, :root[data-theme="dark"] .top.lg { --lg-tint: rgba(16, 38, 32, .82); }
.lp-top.lg.lg-lens.is-stuck { -webkit-backdrop-filter: blur(8px) saturate(1.4) !important; backdrop-filter: blur(8px) saturate(1.4) !important; }
/* У шапки кабинета размытие только шире 760px: на узком экране нижнее меню лежит внутри шапки, и backdrop-filter
   сделал бы шапку рамкой для position: fixed - меню вставало наверх поверх логотипа (01.11). Ниже размывает ::before. */
@media (min-width: 761px) { .top.lg.lg-lens { -webkit-backdrop-filter: blur(8px) saturate(1.4) !important; backdrop-filter: blur(8px) saturate(1.4) !important; } }
.lp-top.lg.lg-matte.is-stuck::before, .top.lg.lg-matte::before { -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4); }
.lp-top.lg.lg-matte.is-stuck, .top.lg.lg-matte { --lg-tint: rgba(240, 250, 244, .76); }
:root[data-theme="dark"] .lp-top.lg.lg-matte.is-stuck, :root[data-theme="dark"] .top.lg.lg-matte { --lg-tint: rgba(16, 38, 32, .82); }

/* Профиль на компьютере: карточки в ряду одной высоты — без «лесенки» и дыр между рядами. */
.pf-top, .pf-cards { align-items: stretch; }
.pf-top > .card, .pf-cards > .card { height: 100%; }
@media (max-width: 900px) { .pf-top, .pf-cards { align-items: start; } .pf-top > .card, .pf-cards > .card { height: auto; } }
.cookie-bar.lg { --lg-tint: rgba(240, 250, 244, .82); }
:root[data-theme="dark"] .cookie-bar.lg { --lg-tint: rgba(16, 38, 32, .86); }
.cookie-bar.lg.lg-lens { -webkit-backdrop-filter: blur(10px) saturate(1.4) !important; backdrop-filter: blur(10px) saturate(1.4) !important; }

/* Профиль: раскрытый блок не растягивает соседние карточки (они выравнивались по высоте ряда). */
.pf-top:has(.pf-fold[open]), .pf-cards:has(.pf-fold[open]) { align-items: start; }
.pf-top:has(.pf-fold[open]) > .card, .pf-cards:has(.pf-fold[open]) > .card { height: auto; }
/* Сетки активности и тем — строго в ширину карточки (раньше вылезали за правый край). */
.pf-fold { min-width: 0; }
.pg-cal { grid-auto-columns: minmax(0, 1fr); }
.pg-topics { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; }
@media (max-width: 560px) { .pg-topics { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
/* «Все достижения» — компактным списком: значок, название и что осталось, без огромных плиток. */
.pf-fold .pf-badges { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 6px; }
.pf-fold .pf-badge { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 9px 12px; border-radius: 14px; }
.pf-fold .pf-badge > span { grid-row: 1 / span 2; font-size: 22px; line-height: 1; }
.pf-fold .pf-badge b { font-size: 14px; }
.pf-fold .pf-badge em { font-size: 12.5px; font-style: normal; }
/* Раскрытые «Все достижения» — на всю ширину ряда, список в 2–3 колонки вместо длинного столбика. */
@media (min-width: 901px) { .pf-cards > .card:has(.pf-badges ~ .pf-fold[open], .pf-fold[open] .pf-badges) { grid-column: 1 / -1; } }