/* =====================================================================
   Bootcamp 2.0 · слой B2 (T-072, PR-2): вход, загрузка, опросник, стартовый тест, «маршрут готов».
   Источник — спецификация 03 (docs/design/specs/2026-10-23-bootcamp-2-stage-a.md) и макеты T-063 r3 / r2 (форма, цвет, размеры;
   имена классов не копируются — все с префиксом b2-). Подключается только в маршрутах нового слоя, старые экраны его не получают.

   Правила: ничего мельче 14 px (исключение 03 — подписи нижней панели 12 px, в PR-2 их нет); касания ≥ 44 px; текст стоит внутри
   элемента с ролью (data-role); анимации объявлены ТОЛЬКО в @media (prefers-reduced-motion: no-preference), базовое состояние
   элемента — конечное; анимируются transform, opacity, stroke-dashoffset/dasharray; без filter, box-shadow, width/height.
   ===================================================================== */

:root {
  --b2-soft: #ece6d4; --b2-edge: #d6cdb2; --b2-line: #ddd5c0; --b2-field: #80879c; --b2-node-off: #848ba1;
  --b2-mint-bg: #d6f5f0; --b2-coral-bg: #ffe3d9; --b2-coral-d: #a83c22; --b2-amber: #8f4a05; --b2-lilac: #e6e3fb; --b2-btn-off: #6b7388;
  --b2-lg: #7060e0; --b2-lg-d: #43358f; --b2-lg-bg: #ece9fd;
  --b2-al: #3b8def; --b2-al-d: #174f9e; --b2-al-bg: #dcebff;
  --b2-ge: #ea5b9c; --b2-ge-d: #9a2160; --b2-ge-bg: #fde2ef;
  --b2-s1: #ff7a5c; --b2-s2: #ffa833; --b2-s3: #ffd93d; --b2-s4: #5fd9c8; --b2-s5: #1c9b94;
  --b2-s1u: #ffc2b3; --b2-s2u: #ffd699; --b2-s3u: #fff0a0; --b2-s4u: #bdeee6; --b2-s5u: #9fd3cf;
  /* тона главной (T-091, спецификация 03 §8.4): цвет роли — только шапка карточки; лампа — «делать сегодня», небо — «понимать», коралл — «серия» (тон и кромка) */
  --b2-t-lamp: #fff1bd; --b2-e-lamp: #e8cf7e; --b2-t-sky: #e4f1ff; --b2-e-sky: #a9cbef; --b2-t-coral: #ffe7de; --b2-e-coral: #f0b7a3;
}

.b2-root { color: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 1.4; }
.b2-root *, .b2-root *::before, .b2-root *::after { box-sizing: border-box; }
.b2-root h1, .b2-root h2, .b2-root h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.b2-root p { margin: 0; }
.b2-root button { font-family: inherit; touch-action: manipulation; }
.b2-root :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.b2-night :focus-visible { outline-color: var(--lamp); }
.b2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.b2-root [hidden] { display: none !important; }
.b2-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- роли текста ---------- */
.b2-num { display: block; font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.04em; }
.b2-cap { display: block; font: 700 14px/1.2 var(--font); color: var(--ink-2); }
.b2-lbl { font: 800 14px/1.1 var(--font); }
.b2-fine { display: flex; align-items: flex-start; gap: 8px; font: 600 14px/1.4 var(--font); color: var(--ink-2); }
.b2-fine a { text-decoration: underline; text-underline-offset: 2px; }
/* ссылка внутри строки: область касания ≥ 44 px без роста строки (отступы гасятся отрицательными полями) */
.b2-fine a { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
.b2-fine > span { flex: 0 1 auto; }
.b2-fine--c { justify-content: center; text-align: center; }
.b2-fine__ico { margin-top: 1px; }
.b2-nb { white-space: nowrap; }
.b2-hint { font: 700 14px/1.3 var(--font); color: var(--ink-2); }
.b2-hint--ico { display: flex; align-items: center; justify-content: center; gap: 8px; text-align: left; }
.b2-hint--ico svg { width: 20px; height: 20px; flex: none; }
.b2-err { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: var(--b2-coral-bg); border: 2px solid var(--b2-coral-d); color: var(--b2-coral-d); font: 800 15px/1.25 var(--font); }
.b2-err svg { width: 22px; height: 22px; flex: none; }

/* ---------- карточка, чипы, уведомление, пустое состояние ---------- */
.b2-card { background: var(--card); border: 2px solid var(--b2-edge); border-radius: 24px; box-shadow: 0 4px 0 var(--b2-edge), 0 18px 22px -18px rgba(11, 23, 48, .5); padding: 14px; }
/* S2 (аудит 03): «Новое достижение» на «Прогрессе» — один стиль карточки слоя B2 (бежевая рамка), а не тёмная рамка с оранжевой тенью: тёмная рамка — только «План дня» и главная кнопка.
   Классы .unl-* общие со старыми экранами (app/globals.css; там же `.unl-s .unl-card`), поэтому правило — только внутри обёртки .b2-unl и с запасом специфичности */
.b2-unl .unl .unl-card { border: 2px solid var(--b2-edge); border-radius: 24px; box-shadow: 0 4px 0 var(--b2-edge); }
.b2-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--card); font: 800 14px/1.1 var(--font); white-space: nowrap; }
.b2-chip svg { width: 18px; height: 18px; flex: none; }
.b2-chip--soft { border-color: var(--b2-line); background: var(--b2-soft); color: var(--ink-2); }
.b2-chip--lamp { background: var(--lamp); }
.b2-chip--mint { background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); }
.b2-chip--coral { background: var(--b2-coral-bg); border-color: var(--b2-coral-d); color: var(--b2-coral-d); }
.b2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.b2-chips--c { justify-content: center; }
.b2-notice { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--b2-mint-bg); border: 2px solid var(--teal-deep); font: 800 15px/1.3 var(--font); }
.b2-notice svg { width: 26px; height: 26px; color: var(--teal-deep); flex: none; }
.b2-notice span { flex: 1; min-width: 0; }
.b2-empty { display: flex; gap: 12px; align-items: center; }
.b2-empty img { width: 60px; height: 64px; flex: none; }
.b2-empty h3 { font-size: 17px; line-height: 1.2; }
.b2-offline { display: flex; justify-content: center; padding: 8px 16px 0; }

/* ---------- кнопки ---------- */
.b2-cta, .b2-btn, .b2-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; cursor: pointer; text-decoration: none; }
.b2-cta { display: flex; width: 100%; min-height: 58px; padding: 0 18px; border-radius: 18px; border: 0; background: var(--ink); color: #fff; font: 800 18px/1.1 var(--font); box-shadow: 0 4px 0 var(--night); }
.b2-cta svg { width: 22px; height: 22px; color: var(--lamp); flex: none; }
.b2-cta:active { transform: translateY(4px); box-shadow: 0 0 0 var(--night); }
.b2-cta[aria-disabled="true"] { background: var(--b2-btn-off); box-shadow: 0 4px 0 #4f576b; cursor: not-allowed; }
.b2-cta[aria-disabled="true"]:active { transform: none; box-shadow: 0 4px 0 #4f576b; }
.b2-cta[aria-busy="true"] { cursor: progress; }
/* на ночном фоне главная кнопка — лампа с текстом ink: ink на night давал контур 1,16:1 (ux T-072, C4) */
.b2-night .b2-cta { background: var(--lamp); color: var(--ink); box-shadow: 0 4px 0 var(--lamp-d); }
.b2-night .b2-cta svg { color: var(--ink); }
.b2-night .b2-cta:active { box-shadow: 0 0 0 var(--lamp-d); }
.b2-btn { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 15px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 800 16px/1.1 var(--font); box-shadow: 0 3px 0 var(--ink); }
.b2-btn svg { width: 20px; height: 20px; flex: none; }
.b2-btn:active, .b2-go:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.b2-btn--sm { width: auto; min-height: 44px; padding: 0 14px; font-size: 15px; }
.b2-btn--lamp { background: var(--lamp); }
.b2-btn[aria-disabled="true"], .b2-btn:disabled { opacity: .6; cursor: not-allowed; }
.b2-go { min-height: 44px; padding: 0 18px; border-radius: 13px; border: 2px solid var(--ink); background: var(--lamp); box-shadow: 0 3px 0 var(--ink); font: 800 15px/1.1 var(--font); color: var(--ink); }
@media (hover: hover) {
  .b2-cta:hover:not([aria-disabled="true"]) { background: #26335a; }
  .b2-btn:hover:not(:disabled) { background: var(--lamp); }
}

/* ---------- Нур и реплика ---------- */
.b2-nur { display: flex; align-items: flex-end; gap: 10px; position: relative; }
.b2-nur { gap: 10px; }
.b2-nur .b2-nurpic { margin-left: -2px; }
.b2-say { position: relative; flex: 0 1 auto; margin-bottom: 8px; padding: 8px 12px 6px; background: var(--card); border: 2px solid var(--ink); border-radius: 20px 20px 20px 6px; font: 700 23px/1.08 var(--hand); color: var(--ink); }

/* ---------- поле ввода ---------- */
.b2-field { display: grid; gap: 6px; }
.b2-field > label, .b2-field__lab { font: 800 15px/1.2 var(--font); }
.b2-field__ctl { position: relative; }
.b2-input { width: 100%; min-height: 54px; border-radius: 15px; border: 2px solid var(--b2-field); background: #fff; padding: 0 16px; font: 700 17px/1 var(--font); color: var(--ink); }
.b2-input::placeholder { color: var(--muted); opacity: 1; }
.b2-input:focus { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-input[aria-invalid="true"] { border-color: var(--b2-coral-d); }
.b2-input--id { font: 800 20px/1 var(--display); letter-spacing: .02em; }
.b2-input--pass { padding-right: 56px; }
.b2-eye { position: absolute; right: 4px; top: 5px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.b2-eye svg { width: 22px; height: 22px; }
.b2-eye[aria-pressed="true"] { color: var(--ink); }

/* ---------- выбор: нативные radio/checkbox внутри карточки ---------- */
.b2-opts { display: grid; gap: 10px; margin-top: 16px; }
.b2-opts--g2 { grid-template-columns: 1fr 1fr; }
.b2-opt { position: relative; display: block; }
.b2-opt__in { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.b2-opt__card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 14px; border-radius: 18px; border: 2px solid var(--b2-line); background: var(--card); font: 800 17px/1.2 var(--font); }
.b2-opt__big { font: 800 24px/1 var(--display); letter-spacing: -.03em; }
.b2-opt__sub { display: block; font: 700 14px/1.2 var(--font); color: var(--ink-2); }
.b2-opt__code { margin-left: auto; padding: 4px 8px; border-radius: 8px; background: var(--b2-soft); border: 1.5px solid var(--b2-line); color: var(--ink-2); font: 800 14px/1 var(--font); }
.b2-opt__mark { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ink); flex: none; display: grid; place-items: center; background: #fff; }
.b2-opt__mark--sq { border-radius: 8px; }
.b2-opt__mark svg { width: 14px; height: 14px; stroke-width: 3.4; opacity: 0; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.b2-opt__code + .b2-opt__mark { margin-left: 0; }
.b2-opt__in:checked + .b2-opt__card { background: var(--lamp); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-opt__in:checked + .b2-opt__card .b2-opt__mark { background: var(--ink); color: var(--lamp); }
.b2-opt__in:checked + .b2-opt__card .b2-opt__mark svg { opacity: 1; }
.b2-opt__in:checked + .b2-opt__card .b2-opt__code { background: var(--card); border-color: var(--ink); color: var(--ink); }
.b2-opt__in:focus-visible + .b2-opt__card { outline: 3px solid var(--ink); outline-offset: 2px; }
.b2-opt__in:active + .b2-opt__card { transform: scale(.95); }
@media (hover: hover) { .b2-opt__in:not(:checked):hover + .b2-opt__card { border-color: var(--ink); } }
.b2-opts--g2 .b2-opt__card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 84px; }
.b2-opts--g2 .b2-opt__mark { position: absolute; right: 10px; top: 10px; margin: 0; width: 22px; height: 22px; }
.b2-opts--g2 .b2-opt--wide { grid-column: 1 / 3; }
.b2-opts--g2 .b2-opt--wide .b2-opt__card { flex-direction: row; align-items: center; min-height: 60px; }
.b2-opts--g2 .b2-opt--wide .b2-opt__mark { position: static; width: 26px; height: 26px; }
.b2-opts--tight .b2-opt__card { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
.b2-opt--chip .b2-opt__card { min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 15px; }
.b2-opt--chip .b2-opt__mark { display: none; }
.b2-opt--chip .b2-opt__in:checked + .b2-opt__card { background: var(--lamp); }

/* ---------- сегмент ---------- */
.b2-seg { display: flex; gap: 4px; padding: 4px; background: var(--b2-soft); border-radius: 16px; }
.b2-seg button, .b2-seg .b2-opt__card { flex: 1; min-height: 44px; padding: 0 4px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 15px/1 var(--font); white-space: nowrap; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.b2-seg button[aria-selected="true"], .b2-seg .b2-opt__in:checked + .b2-opt__card { background: var(--lamp); border-color: var(--ink); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--ink); }
.b2-seg .b2-opt { flex: 1; display: flex; }
.b2-seg .b2-opt__card { width: 100%; box-shadow: none; }
.b2-seg .b2-opt__mark { display: none; }
.b2-seg .b2-opt__in:focus-visible + .b2-opt__card { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- шторка (нативный <dialog>) ---------- */
.b2-sheet { padding: 0; border: 2px solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0; background: var(--card); color: var(--ink); width: 100%; max-width: 480px; margin: auto auto 0; max-height: 86dvh; overflow: auto; box-shadow: 0 -8px 0 rgba(11, 23, 48, .15); font-family: var(--font); }
.b2-sheet::backdrop { background: rgba(11, 23, 48, .5); }
.b2-sheet__in { padding: 8px 16px 20px; }
.b2-sheet__grab { width: 44px; height: 5px; border-radius: 9px; background: var(--b2-line); margin: 0 auto 4px; }
.b2-sheet__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.b2-sheet__h h2 { font-size: 19px; line-height: 1.2; }
.b2-sheet__h h2:focus { outline: none; }
.b2-sheet__x { width: 44px; height: 44px; margin-right: -8px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.b2-sheet__x:hover { background: var(--b2-soft); }
.b2-sheet__b { margin-top: 6px; display: grid; gap: 12px; }
.b2-kv { display: flex; align-items: center; gap: 12px; min-height: 52px; font: 600 16px/1.35 var(--font); }
.b2-kv__g { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); }
.b2-kv__g svg { width: 20px; height: 20px; }
.b2-sheet__act { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 900px) {
  .b2-sheet { border-bottom: 2px solid var(--ink); border-radius: 26px; margin: auto; max-width: 560px; }
  .b2-sheet__in { padding: 12px 24px 24px; }
  .b2-sheet__grab { display: none; }
}
html.b2-lock { overflow: hidden; }

/* =====================================================================
   Загрузка (splash) · 4.1
   ===================================================================== */
.b2-splash { position: fixed; inset: 0; z-index: 90; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(36px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); background: var(--night); color: #fff; text-align: center; overflow: auto; }
.b2-splash[data-hidden="true"] { visibility: hidden; }
.b2-splash__logo img { display: block; width: 210px; height: auto; }
.b2-splash__mid { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.b2-splash__stage { position: relative; width: 220px; height: 230px; display: grid; place-items: end center; }
.b2-splash__halo { position: absolute; left: 50%; top: 46%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; background: radial-gradient(circle, #ffd76a 0%, rgba(255, 215, 106, .35) 38%, rgba(255, 215, 106, 0) 70%); }
.b2-splash__stage .b2-nurpic { position: relative; }
.b2-splash__shadow { position: absolute; bottom: 2px; left: 50%; width: 120px; height: 14px; margin-left: -60px; border-radius: 50%; background: rgba(0, 0, 0, .55); }
.b2-splash__lamps { display: flex; gap: 14px; align-items: flex-end; height: 44px; }
.b2-splash__lamps i { width: 30px; height: 38px; display: block; position: relative; }
.b2-splash__lamps i img { position: absolute; inset: 0; width: 100%; height: 100%; }
.b2-splash__lamps i .on { opacity: 0; }
.b2-splash__lamps i:nth-child(-n+3) .on { opacity: 1; }
.b2-splash__lamps i:nth-child(-n+3) .off { opacity: 0; }
.b2-splash__msg { font: 800 20px/1.25 var(--font); letter-spacing: 0; color: #e6edf8; }
.b2-splash__langs { display: flex; gap: 8px; }
.b2-langbtn { min-width: 48px; min-height: 44px; border-radius: 13px; border: 2px solid #34456e; background: transparent; color: #b4c1d6; font: 800 15px/1 var(--font); cursor: pointer; }
.b2-langbtn[aria-pressed="true"] { background: #1b2a4d; border-color: var(--lamp); color: var(--lamp); }
@media (max-height: 640px) { .b2-splash { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: 20px; } .b2-splash__logo img { width: 160px; } .b2-splash__stage { width: 160px; height: 170px; }  .b2-splash__halo { width: 170px; height: 170px; margin: -85px 0 0 -85px; } .b2-splash__mid { gap: 12px; } }
@media (min-width: 900px) { .b2-splash__stage { transform: scale(1.25); margin: 24px 0; } .b2-splash__logo img { width: 260px; } }

/* =====================================================================
   Вход и регистрация · 4.2
   ===================================================================== */
.b2-auth { min-height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; background: var(--paper); }
.b2-hdr { position: relative; padding: calc(14px + env(safe-area-inset-top)) 16px 52px; border-radius: 0 0 30px 30px; background: var(--night); color: #fff; }
.b2-hdr__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b2-hdr__logo { display: grid; min-height: 44px; align-items: center; }
.b2-hdr__logo img { display: block; width: 150px; height: auto; }
.b2-langs { display: flex; gap: 6px; }
.b2-hero { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.b2-hero .b2-say { margin-bottom: 10px; font-size: 24px; }
.b2-hdr__chip { margin-top: 10px; }
.b2-side { display: none; }
.b2-formcol { display: block; }
.b2-panel { position: relative; margin: -32px 16px 0; padding: 14px 14px 18px; background: var(--card); border: 2px solid var(--b2-edge); border-radius: 26px; box-shadow: 0 4px 0 var(--b2-edge), 0 18px 22px -18px rgba(11, 23, 48, .5); }
.b2-panel h1 { font-size: 22px; line-height: 1.15; margin: 4px 0 12px; }
.b2-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--b2-soft); border-radius: 16px; }
.b2-tabs__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--lamp); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); }
.b2-tabs[data-mode="register"] .b2-tabs__pill { transform: translateX(100%); }
.b2-tabs button { position: relative; z-index: 1; min-height: 44px; border: 0; background: transparent; font: 800 16px/1 var(--font); color: var(--ink-2); cursor: pointer; border-radius: 12px; }
.b2-tabs button[aria-selected="true"] { color: var(--ink); }
.b2-form { display: grid; gap: 12px; margin-top: 14px; }
.b2-form [data-reg] { display: none; }
.b2-form[data-mode="register"] [data-reg] { display: grid; }
.b2-flow { display: none; align-items: center; justify-content: center; gap: 6px; }
.b2-form[data-mode="register"] .b2-flow { display: flex; }
.b2-flow__s { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; }
.b2-flow__c { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--b2-node-off); background: var(--b2-soft); display: grid; place-items: center; color: var(--muted); }
.b2-flow__c svg { width: 22px; height: 22px; }
.b2-flow__s[data-on="true"] .b2-flow__c { border-color: var(--ink); background: var(--lamp); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-flow__s b { font: 800 14px/1.1 var(--font); color: var(--ink-2); text-align: center; }
.b2-flow__ln { flex: 1; height: 0; border-top: 3px solid var(--b2-node-off); margin-top: -18px; min-width: 12px; }   /* сплошная линия вместо точек «···», читавшихся многоточием (аудит 03, §3) */
.b2-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font: 800 14px/1 var(--font); }
.b2-or::before, .b2-or::after { content: ""; flex: 1; border-top: 1.5px dashed var(--b2-line); }
.b2-soc { display: grid; gap: 10px; }
.b2-soc .b2-btn { font-size: 15px; min-height: 52px; }
.b2-soc .b2-btn[aria-disabled="true"] { pointer-events: none; }
.b2-tg { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 4px 8px; border-radius: 15px; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 3px 0 var(--ink); }
.b2-tg .tg-wrap { min-height: 40px; display: flex; align-items: center; justify-content: center; max-width: 100%; }
.b2-sch { display: flex; flex-direction: column; gap: 10px; }
.b2-sch__b { display: flex; align-items: center; gap: 10px; min-height: 52px; width: 100%; padding: 0 14px; border-radius: 15px; border: 2px dashed var(--ink); background: var(--b2-mint-bg); font: 800 16px/1.2 var(--font); text-align: left; cursor: pointer; color: var(--ink); }
.b2-sch__b svg { width: 24px; height: 24px; color: var(--teal-deep); flex: none; }
.b2-sch__b .b2-sch__chev { margin-left: auto; }
.b2-sch__b[aria-expanded="true"] .b2-sch__chev { transform: rotate(90deg); }
.b2-sch__f { display: none; gap: 8px; }
.b2-sch__f[data-open="true"] { display: grid; }
.b2-legal { margin: 14px 16px 20px; display: grid; gap: 8px; justify-items: center; text-align: center; }
.b2-legal .b2-fine { justify-content: center; text-align: center; }
/* центрированная оговорка в две-три строки: значок «i» стоял у левого края, далеко от текста («висит»); текст сам по себе ясен (аудит 03, «текст стоит, а не висит») */
.b2-legal .b2-fine__ico { display: none; }
.b2-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.b2-foot a { display: inline-flex; align-items: center; min-height: 44px; font: 700 14px/1.2 var(--font); text-decoration: underline; text-underline-offset: 2px; color: var(--ink-2); }
.b2-forgot { text-align: center; }
@media (min-width: 641px) { .b2-panel, .b2-legal { margin-left: 24px; margin-right: 24px; } .b2-soc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .b2-auth { max-width: none; flex-direction: row; min-height: 100dvh; }
  .b2-hdr { flex: 0 0 46%; border-radius: 0 40px 40px 0; padding: 36px 48px; display: flex; flex-direction: column; justify-content: space-between; }
  .b2-hdr__logo img { width: 210px; }
  .b2-hdr__top .b2-langs { display: none; }
  .b2-hero { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
  .b2-hero .b2-say { font-size: 30px; margin: 0; }
  .b2-side { display: block; }
  .b2-side h2 { font-size: 40px; line-height: 1.1; color: #fff; }
  .b2-side h2 em { font-style: normal; color: var(--lamp); }
  .b2-side__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .b2-side__chips .b2-chip { background: #1b2a4d; border-color: #34456e; color: var(--lamp); min-height: 40px; font-size: 15px; }
  .b2-formcol { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 40px; position: relative; }
  .b2-formcol .b2-langs { display: flex; position: absolute; top: 28px; right: 36px; }
  .b2-formcol .b2-langbtn { border-color: var(--b2-line); color: var(--ink-2); }
  .b2-formcol .b2-langbtn[aria-pressed="true"] { background: var(--lamp); border-color: var(--ink); color: var(--ink); }
  .b2-panel { margin: 0 auto; width: 460px; padding: 20px 22px 24px; }
  .b2-legal { margin-top: 20px; }
}
@media (max-width: 899px) { .b2-formcol > .b2-langs { display: none; } }

/* =====================================================================
   Опросник · 4.3
   ===================================================================== */
.b2-page { min-height: 100dvh; background: var(--paper); }
.b2-ob { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 16px 0; }
.b2-ob__head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.b2-back { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.b2-back svg { width: 22px; height: 22px; }
.b2-back[data-ghost="true"] { visibility: hidden; }
.b2-pbar { flex: 1; height: 14px; border-radius: 99px; background: var(--b2-soft); border: 2px solid var(--ink); overflow: hidden; }
.b2-pbar i { display: block; width: 100%; height: 100%; background: var(--mint); border-radius: 0 99px 99px 0; transform-origin: left center; }
.b2-stxt { font: 800 14px/1 var(--font); color: var(--ink-2); min-width: 44px; text-align: right; white-space: nowrap; }
.b2-ob__nur { margin-top: 8px; }
.b2-ob__nur .b2-ib { position: absolute; right: -4px; top: 0; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
/* .b2-root h1 { margin: 0 } тяжелее одного класса: без .b2-root отступ реплики Нура до заголовка был 0 вместо 18 (ux T-072, C5) */
.b2-root .b2-q { margin-top: 18px; font-size: 25px; line-height: 1.15; }
.b2-q:focus { outline: none; }
.b2-q:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.b2-step { flex: 1; display: flex; flex-direction: column; }
.b2-step__body { padding-bottom: 12px; }
.b2-ob__foot { position: sticky; bottom: 0; z-index: 3; margin: auto -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(244, 239, 228, 0), var(--paper) 18px); }
.b2-ob__foot > * + * { margin-top: 12px; }
.b2-ob__foot .b2-hint { text-align: center; margin-bottom: 8px; }
.b2-ob__foot .b2-err { margin-bottom: 10px; }
.b2-ob__note { margin-top: 10px; }
.b2-ses { display: grid; gap: 10px; margin-top: 16px; }
.b2-ses .b2-opt__card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
.b2-ses .b2-opt__mark { position: absolute; right: 12px; top: 12px; margin: 0; }
.b2-ses .b2-opt__big { font-size: 20px; }
.b2-ses__bell { display: none; align-items: center; gap: 6px; font: 800 14px/1 var(--font); }
.b2-ses__bell svg { width: 18px; height: 18px; }
.b2-opt__in:checked + .b2-opt__card .b2-ses__bell { display: inline-flex; }
.b2-stp { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.b2-stp button { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.b2-stp button:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.b2-stp__v { text-align: center; min-width: 140px; }
.b2-stp__v .b2-num { font-size: 60px; }
.b2-scale { position: relative; height: 16px; margin: 18px 8px 0; border-radius: 99px; background: var(--b2-soft); }
.b2-scale i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; background: var(--mint); transform-origin: left center; }
.b2-scale b { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--lamp); border: 3px solid var(--ink); }
.b2-scale-ax { display: flex; justify-content: space-between; margin: 8px 8px 0; color: var(--muted); }
.b2-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.b2-presets .b2-opt__card { min-height: 44px; padding: 0 16px; border-radius: 99px; font-size: 15px; }
.b2-presets .b2-opt__mark { display: none; }
.b2-goalrow { margin-top: 16px; }
.b2-minrow { display: flex; align-items: center; gap: 12px; }
.b2-minrow svg { flex: none; }
.b2-lamps { display: flex; justify-content: space-between; margin-top: 22px; padding: 0 2px; }
.b2-lamp { position: relative; width: 58px; height: 74px; }
.b2-lamp .b2-opt__in { border-radius: 16px; }
.b2-lamp__card { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; }
.b2-lamp__card img { width: 52px; height: 64px; }
.b2-lamp .b2-opt__in:focus-visible + .b2-lamp__card { outline: 3px solid var(--ink); outline-offset: 2px; }
.b2-lamp .b2-opt__in:active + .b2-lamp__card { transform: scale(.95); }
.b2-rd { margin-top: 14px; text-align: center; }
.b2-rd h2 { font-size: 28px; min-height: 34px; }
.b2-root .b2-grp { margin: 16px 0 8px; font: 800 14px/1.2 var(--font); color: var(--ink-2); letter-spacing: 0; }
.b2-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; position: relative; }
.b2-part { padding: 14px 12px 12px; border-radius: 20px; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 4px 0 var(--ink); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.b2-part h3 { font-size: 16px; }
.b2-parts__mid { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--lamp); border: 2.5px solid var(--ink); display: grid; place-items: center; z-index: 2; }
.b2-idrow { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.b2-idrow .b2-btn { width: auto; }
.b2-res { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.b2-rc { padding: 12px; border-radius: 18px; background: var(--card); border: 2px solid var(--b2-edge); box-shadow: 0 3px 0 var(--b2-edge); display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.b2-rc svg { width: 26px; height: 26px; color: var(--teal-deep); }
.b2-rc .b2-num { font-size: 22px; }
.b2-rc .b2-num--word { font-size: 18px; line-height: 1.1; }
.b2-schl { margin-top: 8px; }
@media (min-width: 641px) { .b2-ob { max-width: 560px; } .b2-root .b2-q { font-size: 28px; } }
@media (min-width: 900px) { .b2-ob { max-width: 600px; padding-top: 28px; } .b2-root .b2-q { font-size: 32px; }  .b2-opt__card { min-height: 68px; } .b2-ob__foot { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
@media (max-height: 640px) {  .b2-root .b2-q { margin-top: 10px; } .b2-opts { margin-top: 10px; gap: 8px; } }

/* =====================================================================
   Маршрут готов · 4.5 и дуга-спидометр
   ===================================================================== */
.b2-fc { container-type: inline-size; margin-top: 16px; padding: 12px 12px 14px; }
.b2-arc { max-width: 340px; margin: 0 auto; position: relative; }
.b2-gauge { display: block; width: 100%; height: auto; overflow: visible; }
.b2-gauge text { font-family: var(--font); font-weight: 800; font-size: 15.5px; fill: var(--ink-2); }
.b2-gauge .needle { transform: rotate(var(--rot, 0deg)); }
.b2-zn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 2px; text-align: center; }
.b2-zn .b2-chips { justify-content: center; }
.b2-num--zone { font-size: min(52px, 15cqw); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.b2-num--mut { color: var(--muted); opacity: .55; }
.b2-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; min-width: 0; }
.b2-lgd { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 11px; border-radius: 99px; background: var(--paper); border: 1.5px solid var(--b2-edge); font: 800 15px/1 var(--font); white-space: nowrap; }
.b2-lgd svg { width: 20px; height: 20px; }
.b2-fc .b2-empty { justify-content: flex-start; }
.b2-fc > .b2-cap { text-align: center; margin-top: 4px; }
.b2-fc .b2-empty--c { justify-content: center; }
.b2-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.b2-lv { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 18px; background: var(--cbg); border: 2px solid var(--c); text-align: center; min-width: 0; }
.b2-lv--al { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); }
.b2-lv--ge { --c: var(--b2-ge); --cd: var(--b2-ge-d); --cbg: var(--b2-ge-bg); }
.b2-lv__sb { width: 34px; height: 34px; border-radius: 11px; background: var(--c); color: #fff; display: grid; place-items: center; border: 2.5px solid var(--cd); }
.b2-lv__sb svg { width: 20px; height: 20px; }
.b2-lv__nm { font: 800 14px/1.1 var(--font); color: var(--cd); }
.b2-lv .b2-chip { min-height: 28px; padding: 4px 8px; line-height: 1.15; text-align: center; background: var(--card); border-color: var(--cd); color: var(--cd); white-space: normal; }
.b2-lv__ch { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
/* «предварительно» — одно слово ≈ 117 px: в плитке из трёх колонок (до 106 px на 360) оно выходит за рамку (QA T-072, D2). Узкий экран — строки, а не плитки: имя слева, чипы справа с переносом */
@media (max-width: 640px) {
  .b2-levels { grid-template-columns: 1fr; gap: 8px; }
  .b2-lv { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; }
  .b2-lv__nm { flex: 1 1 auto; min-width: 0; }
  .b2-lv__ch { flex: 0 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
}
@media (min-width: 641px) { .b2-levels { gap: 12px; } }

/* =====================================================================
   Стартовый тест · 4.4 (оболочка вокруг карточки задачи)
   ===================================================================== */
/* Липкая полоса части (ux T-072, C2): чип части · время · номер задачи ≈ 44–52 px остаётся в окне при прокрутке; цвет и значок «< 5 минут» видны, пока отвечаешь.
   Верхний отступ страницы перенесён в саму полосу, чтобы она прилипала к краю окна; на ≤ 520 px — короткие подписи (на 360 полные не помещаются в 328). */
.b2-pl { max-width: 720px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
.b2-pl__strip { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px 10px; margin: 0 -16px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px; background: var(--paper); border-bottom: 2px solid var(--b2-edge); }
.b2-pl__strip .b2-chip { flex: none; white-space: nowrap; }
.b2-pl__short { display: none; }
.b2-pl__chip-lg { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); background: var(--cbg); border-color: var(--c); color: var(--cd); }
.b2-pl__chip-math { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); background: var(--cbg); border-color: var(--c); color: var(--cd); }
.b2-timer { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--ink); background: var(--card); font: 800 18px/1 var(--display); letter-spacing: -.02em; }
.b2-timer svg { width: 20px; height: 20px; }
.b2-timer[data-low="true"] { color: var(--b2-coral-d); border-color: var(--b2-coral-d); background: var(--b2-coral-bg); }
.b2-pl__task { margin-top: 12px; }
/* карточка задачи — существующая (без изменений содержимого); внутри экрана B2 ничего мельче 14 px (спецификация 03 §3.3), касание ≥ 44 */
.b2-pl .qtag, .b2-pl .sheet-new, .b2-pl .qfig-pen, .b2-pl .qopt .ql, .b2-pl .sheet-btn, .b2-pl .qfig-hint, .b2-pl .qfig-zb { font-size: 14px; }
.b2-pl .sheet-btn { min-height: 44px; }
/* подсказка существующей кнопки «Решать на листе» на экране теста не показывается (ux T-072, C3): на ≥ 641 px она всплывала поверх условия первой задачи при идущем таймере, на телефоне скрыта старым CSS.
   О листе — строка на перерыве (starttest.pause.sheet); сама кнопка и метка «новое» (≥ 521 px) остаются. */
.b2-pl .sheet-intro { display: none; }
.b2-pl .qfig-pen, .b2-pl .qfig-zb, .b2-pl .qfig-ic { min-height: 44px; min-width: 44px; }
.b2-pl__task .qcard { margin-top: 0; }
.b2-pl__hint { margin-top: 10px; text-align: center; }
.b2-pl__nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.b2-pl__nav .b2-btn, .b2-pl__nav .b2-cta { min-height: 52px; width: 100%; padding: 0 8px; font-size: 16px; }
.b2-pl__nav .b2-cta { font-size: 16px; }
.b2-pl__nav .b2-btn[data-on="true"] { background: var(--lamp); }
.b2-pl__map { margin-top: 16px; }
.b2-pl__map ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.b2-dot { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 800 15px/1 var(--font); cursor: pointer; display: grid; place-items: center; }
.b2-dot[data-state="answered"] { background: var(--ink); color: var(--lamp); }
.b2-dot[data-state="idk"] { border-style: dashed; background: var(--b2-soft); }
.b2-dot[aria-current="step"] { box-shadow: 0 0 0 4px var(--lamp); }
.b2-pl__stat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; margin-top: 8px; }
.b2-pl__stat:empty { display: none; }
.b2-dlg { max-width: 420px; width: calc(100% - 32px); margin: auto; padding: 0; border: 2px solid var(--ink); border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 0 6px 0 var(--ink); font-family: var(--font); }
.b2-dlg::backdrop { background: rgba(11, 23, 48, .5); }
.b2-dlg__in { padding: 18px 18px 20px; display: grid; gap: 12px; }
.b2-dlg h2 { font-size: 20px; line-height: 1.2; }
.b2-dlg h2:focus { outline: none; }
.b2-dlg__act { display: grid; gap: 10px; margin-top: 4px; }
.b2-break { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.b2-break__mid { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: auto 0; text-align: center; }
.b2-break h1 { font-size: 26px; }
.b2-break__foot { display: grid; gap: 12px; margin-top: 20px; }
.b2-ring { display: block; }
@media (max-width: 400px) { .b2-pl__nav { gap: 6px; } .b2-pl__nav .b2-btn, .b2-pl__nav .b2-cta { font-size: 15px; } }
/*
 * Полоса на узком экране. Полоса (чип части · время · номер · «⋯») — одна строка с короткими подписями: полные «Часть 2 · Математика»
 * и «Задача 15 из 15» вместе с таймером дают ≈ 470 px при 328 доступных (замер handoff T-073). Ряда кнопок под полосой нет (T-087a, PN1, ниже):
 * лист — в шапке карточки задачи, «Завершить часть» и «Выйти» — в шторке «⋯». Метку «новое» старой кнопки листа здесь скрываем (решение 01, T-072).
 */
@media (max-width: 520px) {
  .b2-pl__full { display: none; }
  .b2-pl__short { display: inline; }
  .b2-pl__strip { gap: 6px 8px; }
  .b2-pl .sheet-new { display: none; }
}

/* =====================================================================
   Главная D2 (T-073, спецификация 03 §4.7) и общие элементы «Прогресса»
   Раскладка — по ширине КОНТЕЙНЕРА (.b2-wrap), а не окна: внутри Shell ширина содержимого зависит от бокового меню (§3.6).
   ===================================================================== */
.b2-wrap { container-type: inline-size; container-name: b2w; }
.b2-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding-bottom: 6px; }
.b2-span { grid-column: 1 / -1; min-width: 0; }
.b2-home > * { min-width: 0; }
.b2-home .b2-card { padding: 12px 14px 14px; }
.b2-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b2-root .b2-hello { font: 800 18px/1.2 var(--font); letter-spacing: 0; }
.b2-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--b2-line); font: 800 15px/1 var(--font); color: var(--ink); text-decoration: none; }
.b2-pill img { width: 22px; height: 22px; }
.b2-card__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: -4px 0 0; }
.b2-card__h h2 { font-size: 17px; line-height: 1.2; }
.b2-ttl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.b2-ttl .b2-cap { margin-top: 3px; color: var(--muted); }
.b2-bd { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--ink); background: var(--lamp); color: var(--ink); }
.b2-bd svg { width: 20px; height: 20px; }
.b2-bd--lilac { background: var(--b2-lilac); }
.b2-bd--mint { background: var(--mint); }
.b2-bd--coral { background: var(--coral); }
.b2-bd--sky { background: var(--sky); }
.b2-cap--c { text-align: center; }
.b2-num--m { font-size: 34px; }
.b2-num--s { font-size: 26px; }
.b2-num--mut { color: var(--muted); opacity: .55; }
.b2-hr { height: 0; border-top: 1.5px dashed var(--b2-line); }
.b2-ib { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.b2-ib svg { width: 24px; height: 24px; }
@media (hover: hover) { .b2-ib:hover { background: var(--b2-soft); color: var(--ink); } }
.b2-noticewrap { display: grid; gap: 8px; }
.b2-hunt { display: grid; gap: 14px; }
.b2-chips--tight { gap: 6px; }

/* ---- карточка «до экзамена и путь» ---- */
.b2-hx { container-type: inline-size; }
.b2-home .b2-hx { padding: 12px 14px 12px; }
.b2-sesc { min-height: 44px; padding: 0 14px; cursor: pointer; font-family: var(--font); color: var(--ink); text-align: left; }
.b2-sesc[aria-disabled="true"] { cursor: default; }
.b2-sesc--none { background: var(--lamp); }
@container (max-width: 379px) { .b2-sesc__ico { display: none; } }
.b2-hx__note { margin-bottom: 8px; }
.b2-hx__g { display: grid; grid-template-columns: minmax(0, 1fr) 124px; gap: 0 6px; align-items: start; }
.b2-hx__l { display: flex; flex-direction: column; align-items: flex-start; align-self: center; min-width: 0; }
.b2-hx__l .b2-sesc { margin-bottom: 4px; max-width: 100%; }
.b2-hx .b2-sesc:not(.b2-sesc--none) { background: var(--card); }
.b2-hx__days { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.b2-hx__days .b2-num--d { font-size: 42px; letter-spacing: -.05em; line-height: 1; }
/* подпись «дней до ориентира» — 17 знаков, 134 px при 14 px: не сужать (при max-width 130 формы «день…/дней до ориентира» переносились и поднимали кнопку на 17 px — зависит от числа дней, D1 р.2) */
.b2-hx__days .b2-cap { margin-top: 2px; }
.b2-hx__chips { margin-top: 6px; align-items: center; }
.b2-goalchip { background: var(--lamp); }
.b2-hx__dc { display: none; }
.b2-hx__r { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.b2-hx__gc { display: block; width: 100%; border-radius: 16px; color: inherit; text-decoration: none; }
@media (hover: hover) { .b2-hx__gc:hover { background: rgba(236, 230, 212, .35); } }
.b2-hx__gcol { container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.b2-arc--mini { width: 100%; max-width: none; margin: 0; }
.b2-hx__gnum { display: flex; flex-direction: column; align-items: center; margin-top: -10px; max-width: 100%; }
.b2-hx__gnum .b2-num--zone { font-size: min(22px, 15.5cqw); white-space: nowrap; }
.b2-hx__gnum .b2-num--m { font-size: 28px; }
.b2-hx__fc { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.b2-hx__fc .b2-btn--sm { white-space: nowrap; padding: 0 10px; }
.b2-hx__src { color: var(--muted); white-space: nowrap; }
.b2-fcast { min-height: 30px; border-color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
/* чип «прогноз» — белый без тени только в карточке прогноза главной; «Статистика» и /start/ready остаются как в main (жёлтый с тенью), D2 QA T-078 */
.b2-hx .b2-fcast { background: var(--card); box-shadow: none; }
.b2-hx__facts { display: none; }
.b2-hx__slot { margin-top: 10px; }
.b2-hx__slot:empty { display: none; }
.b2-slotrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.b2-slot__t { font-size: 17px; line-height: 1.2; flex: 1 1 140px; }
.b2-wait { display: grid; gap: 8px; }
.b2-lack { gap: 6px; }
.b2-lack__c { min-height: 34px; background: var(--card); }
.b2-lack__c--logic { border-color: var(--b2-lg); color: var(--b2-lg-d); background: var(--b2-lg-bg); }
.b2-lack__c--math { border-color: var(--b2-al); color: var(--b2-al-d); background: var(--b2-al-bg); }
.b2-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: end; }
.b2-nudge__tx { min-width: 0; display: grid; gap: 4px; }
.b2-nudge__t { font-size: 17px; line-height: 1.2; }
.b2-say--s { font-size: 21px; margin: 6px 0 0; padding: 6px 10px 4px; }
.b2-nudge__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b2-say--m { font-size: 22px; }

/* ---- дорога из лампочек ---- */
.b2-road { --dot: 44px; --nw: 48px; --pt: 54px; position: relative; padding-top: var(--pt); container-type: inline-size; }
.b2-road--mini { --nw: 44px; --pt: 52px; }
.b2-road__rail { position: absolute; left: calc(var(--nw) / 2); right: calc(var(--nw) / 2); top: calc(var(--pt) + var(--dot) / 2 - 6px); height: 12px; border-radius: 99px; background: var(--b2-soft); border: 2px solid var(--b2-edge); overflow: hidden; }
.b2-road__rail i { display: block; height: 100%; width: 100%; transform-origin: left center; transform: scaleX(calc(var(--p) / 5)); background: linear-gradient(90deg, var(--lamp-d), var(--lamp)); border-radius: 99px; }
.b2-road__nodes { position: relative; z-index: 1; display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.b2-road__nd { width: var(--nw); display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.b2-road--mini .b2-road__nd { gap: 4px; }
.b2-road__dot { position: relative; width: var(--dot); height: var(--dot); border-radius: 50%; border: 3px solid var(--b2-node-off); background: var(--b2-soft); display: grid; place-items: center; padding: 0; color: var(--ink); }
.b2-road--mini .b2-road__dot { border-width: 2.5px; }
.b2-road__dot img { width: 22px; height: 26px; display: block; }
.b2-road--mini .b2-road__dot img { width: 20px; height: 24px; }
.b2-road__dot svg { width: 22px; height: 22px; }
.b2-road__nd.is-done .b2-road__dot { background: var(--lamp); border-color: var(--ink); box-shadow: 0 0 0 5px #fff0b8, 0 3px 0 var(--ink); }
.b2-road--mini .b2-road__nd.is-done .b2-road__dot { box-shadow: 0 0 0 4px #fff0b8, 0 2px 0 var(--ink); }
.b2-road__nd.is-next .b2-road__dot { background: var(--card); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-road__nd.is-next .b2-road__dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #ffb83f; opacity: 0; pointer-events: none; }
.b2-road__nd.is-fin .b2-road__dot { background: var(--lamp); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-road__lb { font: 800 15px/1 var(--font); color: var(--ink-2); min-height: 15px; }
.b2-road__nd.is-next .b2-road__lb, .b2-road__nd.is-fin .b2-road__lb { color: var(--b2-amber); }
.b2-road__nd.is-done .b2-road__lb { color: var(--ink); }
.b2-road--wait .b2-road__nd.is-fut .b2-road__dot { background: var(--b2-soft); }
.b2-road--wait .b2-road__nd.is-fin .b2-road__dot { background: var(--lamp); }
.b2-road__bob { display: block; }
.b2-road__walker { position: absolute; left: calc(var(--nw) / 2); top: 0; width: 44px; margin-left: -22px; z-index: 2; pointer-events: none; transform: translateX(calc((100cqw - var(--nw)) * var(--p) / 5)); }
.b2-road--mini .b2-road__walker { width: 40px; margin-left: -20px; }
.b2-road--wait .b2-road__walker { display: none; }
.b2-road--wait { --pt: 6px; }
.b2-hx .b2-road--mini.b2-road--wait { --pt: 6px; }
.b2-sp { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #ffb83f; pointer-events: none; z-index: 5; }
.b2-roadfx { display: grid; gap: 8px; }
.b2-roadnote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 14px; background: var(--b2-mint-bg); border: 2px solid var(--teal-deep); font: 800 15px/1.25 var(--font); }
.b2-roadnote__say { font: 700 21px/1.1 var(--hand); color: var(--ink); }

/* ---- «Разделы» ---- */
.b2-sx { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); display: flex; flex-direction: column; gap: 4px; justify-content: space-between; min-height: 110px; padding: 10px 7px 10px 9px; border-radius: 18px; background: var(--cbg); border: 2px solid var(--c); box-shadow: 0 3px 0 var(--c); color: var(--cd); text-decoration: none; min-width: 0; }
.b2-sx--al { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); }
.b2-sx--ge { --c: var(--b2-ge); --cd: var(--b2-ge-d); --cbg: var(--b2-ge-bg); }
.b2-sx:active { transform: translateY(3px); box-shadow: 0 0 0 var(--c); }
.b2-sx__b { width: 36px; height: 36px; border-radius: 11px; background: var(--c); color: #fff; display: grid; place-items: center; border: 2.5px solid var(--cd); }
.b2-sx__b svg { width: 21px; height: 21px; }
.b2-sx .b2-num { color: var(--cd); }
.b2-sx__n { font: 800 14px/1.1 var(--font); color: var(--cd); overflow-wrap: normal; hyphens: none; }

/* ---- сегмент-вкладки и панели виджетов ---- */
.b2-seg { display: flex; gap: 4px; margin-top: 8px; padding: 4px; background: var(--b2-soft); border-radius: 16px; }
.b2-seg [role="tab"] { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-2); font: 700 15px/1.1 var(--font); display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.b2-seg [role="tab"] svg { width: 18px; height: 18px; flex: none; }
.b2-seg [role="tab"][aria-selected="true"] { background: var(--lamp); border-color: var(--ink); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--ink); }
@media (hover: hover) { .b2-seg [role="tab"][aria-selected="false"]:hover { background: #e2dac3; } }
.b2-tabs2 { min-width: 0; }
.b2-tabpanels { margin-top: 12px; }
.b2-tabpanel[hidden] { display: none; }
.b2-bar { display: block; height: 12px; border-radius: 99px; background: var(--b2-soft); overflow: hidden; }
.b2-bar i { display: block; height: 100%; width: 100%; background: var(--c, var(--teal-deep)); transform-origin: left center; border-radius: 99px; }
.b2-course { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.b2-course .b2-btn { grid-column: 1 / -1; width: 100%; }
.b2-course__tx h3 { font-size: 17px; line-height: 1.2; }
.b2-wq { display: grid; gap: 6px; }
.b2-wq__r { display: flex; align-items: center; gap: 12px; }
.b2-wq__r b { flex: 1; min-width: 0; font: 800 16px/1.25 var(--font); }
.b2-wq__v { font: 800 16px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.b2-sheetnote { font: 600 15px/1.35 var(--font); color: var(--ink-2); }
.b2-kv__g--mint { background: var(--b2-mint-bg); }
.b2-kv__g--lamp { background: var(--lamp); border-color: var(--ink); color: var(--ink); }
.b2-kv__g--weak { background: var(--coral); border-color: var(--ink); color: var(--ink); }
.b2-kv__g--new { background: #fff; border-color: var(--ink); color: var(--ink); }
.b2-kv__g--mistake { background: var(--ink); border-color: var(--ink); color: var(--lamp); }
.b2-opts--ses { margin-top: 0; }
.b2-ses__in { display: grid; gap: 8px; width: 100%; padding: 4px 34px 4px 0; }
.b2-ses__t { font-size: 20px; }
.b2-opts--ses .b2-opt__card { align-items: flex-start; }
.b2-opts--ses .b2-opt__mark { position: absolute; right: 12px; top: 12px; margin: 0; }

/* существующая полоса значков (components/Unlocks.tsx) внутри нового экрана: текст не мельче 14 px, касания ≥ 44 */
.b2-unl .unl .unl-txt p, .b2-unl .unl .kicker, .b2-unl .unl .chip, .b2-unl .unl .unl-chips { font-size: 14px; }
.b2-unl .unl .unl-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

/* =====================================================================
   Главная r4.2 (T-078, 06): «Домашка», «План дня», «Задачи недели», «Серия», «Быстро». Макет docs/design/prototypes/T-078-r1/r42.html.
   Раскладка по ширине контейнера .b2-wrap (b2w): < 900 — одна колонка, ≥ 900 — 12 колонок. Движение — только в блоке no-preference ниже.
   ===================================================================== */

/* ---- общее: заголовок карточки, одна тёмная кнопка и её контурная пара ---- */
.b2-ch { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -4px 0 6px; }
.b2-ch__t { flex: 1; min-width: 0; }
.b2-ch__t h2 { font-size: 17px; line-height: 1.15; }
.b2-ch__t .b2-cap { margin-top: 2px; color: var(--muted); }
.b2-cta__sub { font: 700 15px/1 var(--font); opacity: .85; margin-left: 2px; }
.b2-cta--alt { background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.b2-cta--alt svg { color: var(--ink); }
.b2-cta--alt:active { box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { .b2-cta.b2-cta--alt:hover:not([aria-disabled="true"]) { background: var(--lamp); } }
.b2-kv > div { min-width: 0; overflow-wrap: anywhere; }
.b2-kv__d { display: block; font: 600 14px/1.3 var(--font); color: var(--ink-2); }
.b2-kv__g--reinforce, .b2-kv__g--mix, .b2-kv__g--any { background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); }

/* ---- «Домашка» ---- */
.b2-home .b2-hw2 { background: #eaf5ff; border: 2px solid var(--ink); border-radius: 26px; box-shadow: 0 6px 0 var(--ink); padding: 10px 14px 14px; }
.b2-hw2.is-late { box-shadow: 0 6px 0 var(--coral); }
.b2-hw2__h { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.b2-hw2__b { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sky); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; }
.b2-hw2__b svg { width: 22px; height: 22px; }
.b2-hw2__h h2 { font-size: 22px; line-height: 1.05; letter-spacing: -.02em; flex: 1; min-width: 0; }
.b2-hw2__i { margin-right: -10px; }
.b2-hw2__d { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-top: 2px; }
.b2-hw2__t { font: 800 17px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-hw2__p { display: flex; align-items: baseline; gap: 6px; font: 600 14px/1.3 var(--font); color: var(--ink-2); }
.b2-hw2__pn { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-hw2__pm { flex: none; font: 800 14px/1.3 var(--font); color: var(--ink); }
.b2-hw2__l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; }
.b2-hw2__lw { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.b2-hw2__lab { font: 800 15px/1.2 var(--font); }
.b2-hw2__n { display: inline-flex; align-items: baseline; gap: 6px; }
.b2-hw2__n .b2-num { font-size: 22px; }
.b2-hw2__bar { background: rgba(26, 36, 64, .14); height: 12px; margin-top: 6px; }
.b2-hw2__bar i { background: var(--ink); }
.b2-hw2__m { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; min-height: 32px; }
.b2-hw2__m .b2-cap { color: var(--ink-2); line-height: 1.2; }
.b2-hw2__m .b2-chip { flex: none; }
.b2-hw2 > .b2-cta { margin-top: 10px; }
.b2-hw2__more { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 4px; border-top: 1.5px dashed rgba(26, 36, 64, .25); font: 800 15px/1.2 var(--font); color: var(--ink-2); text-decoration: none; }
.b2-hw2__more > span:first-child { flex: 1; }
.b2-hw2__more svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .b2-hw2__more:hover { color: var(--ink); } }

/* ---- «План дня» ---- */
.b2-home .b2-plan { padding: 12px 14px 14px; border-color: var(--ink); box-shadow: 0 6px 0 var(--ink); border-radius: 26px; }
.b2-plan__pt { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 2px 0 4px; flex-wrap: nowrap; }
.b2-plan__pt h2 { font-size: 21px; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; }
@container b2w (max-width: 359px) { .b2-plan__pt .b2-chip svg { display: none; } }
/* «План дня ○○○○ ≈ 56 мин» (4 точки у ученика школы) при 21 px = 291 px: помещается в контейнере от 323 (внутренняя ширина = контейнер − 32); ниже — 18 px (спецификация 03 §8.2 давала порог 317: замер показал выступ 5 px на окнах 350–354) */
@container b2w (max-width: 322px) { .b2-plan__pt h2 { font-size: 18px; } }
.b2-plan__pt .b2-chip { margin-left: auto; flex: none; }
.b2-pips { display: flex; gap: 5px; flex: none; }
.b2-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
.b2-pips i.ok { background: var(--ink); }
.b2-pips i.run { background: linear-gradient(90deg, var(--ink) 50%, var(--card) 50%); }
.b2-plan__note { display: none; align-items: center; gap: 6px; margin: 0; min-height: 18px; font: 800 14px/1.2 var(--font); color: var(--ink-2); }
.b2-plan__note svg { width: 16px; height: 16px; flex: none; }
/* ночью (Нур спит, реплики нет, T-091) подпись плана — строкой в плане при любой высоте окна; днём её несёт реплика Нура в сцене */
.b2-plan[data-asleep].is-noted .b2-plan__note { display: flex; }
.b2-plan__sh { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.b2-plan__sh h3 { font: 800 16px/1.2 var(--font); letter-spacing: 0; flex: 1; }
.b2-plan__sh .b2-chips { gap: 6px; flex-wrap: nowrap; }
.b2-plan__sh .b2-chip { min-height: 30px; padding: 0 9px; }
.b2-plan__i { flex: none; margin: -4px -8px -4px -2px; }
@container b2w (max-width: 339px) { .b2-plan__sh .b2-chip svg { display: none; } }

/* =====================================================================
   Сцена главной и тона карточек (T-091, вариант C «Сцена, как на входе»; спецификация 03 tasks/handoffs/T-091-ux.md §8, прототип docs/design/prototypes/T-091/).
   Сцена — тёмная плашка --night (как шапка входа, класс b2-night — не .b2-hdr/.b2-hero: у них раскладка входа): Нур слева, «Привет» и свет справа, ниже реплика.
   Первый блок — прогноз — заходит на сцену. Тона: цвет роли — только шапка карточки (лампа · небо · коралл), тело карточки всегда --card.
   Порядок правил: база (телефон) → контейнер ≤ 317 → окно ≤ 900 × ≤ 760 → окно ≥ 901 → контейнер ≥ 900.
   ===================================================================== */
.b2-home { --px: 14px; --py: 12px; }
.b2-home .b2-plan { --px: 14px; --py: 12px; --r: 24px; }
@container b2w (min-width: 900px) {
  .b2-home { --px: 20px; --py: 16px; }
  .b2-home .b2-plan { --px: 22px; --py: 18px; --r: 28px; }
}

/* сцена: окно ≤ 900 — на всю ширину окна (поля .main 14/16 и вырез снимаются отрицательным полем), низ скруглён как у шапки входа */
.b2-scene {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  margin: -14px calc(-1 * max(16px, env(safe-area-inset-right))) 0 calc(-1 * max(16px, env(safe-area-inset-left)));
  padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 26px max(16px, env(safe-area-inset-left));
  background: var(--night); color: #fff; border-radius: 0 0 30px 30px;
}
.b2-scene.b2-scene--flat { padding-bottom: 16px; }
.b2-offline + .b2-home > .b2-scene { margin-top: 0; }   /* плашка «нет сети» стоит над сценой: отрицательное поле не наезжает на неё */
.b2-scene .b2-top { grid-column: 2; grid-row: 1; min-width: 0; }
/* «Привет, имя»: display-кегль, не больше двух строк (иначе имя в три строки сдвигает кнопку дня — бюджет); специфичность выше `.b2-root .b2-hello` */
.b2-root .b2-scene .b2-hello {
  min-width: 0; color: #fff; font: 800 20px/1.1 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.b2-scene .b2-pill { flex: none; background: var(--card); border-color: var(--card); }   /* не сжимается от длинного имени (QA T-091 D1): лампа 22 px, касание ≥ 44, число внутри */
.b2-scene__nw { grid-column: 1; grid-row: 1 / span 2; align-self: end; position: relative; display: block; margin-left: -2px; border-radius: 12px; }
.b2-scene__nw:focus-visible { z-index: 2; }   /* рамка фокуса не уходит под прогноз, заходящий на сцену */
.b2-scene__nw .b2-nurpic { width: 74px !important; height: 80px !important; }
.b2-scene__say { grid-column: 2; grid-row: 2; align-self: end; min-width: 0; }
.b2-scene__say .b2-say { display: inline-block; margin: 0 0 6px; padding: 5px 14px 3px; font-size: 22px; line-height: 1.05; }
/* прогноз заходит на сцену на её нижнее поле (26) за вычетом зазора сетки (14): −40; ≥ 901 — 52 и −66; контейнер ≥ 900 (зазор 20) — −72 */
.b2-scene:not(.b2-scene--flat) + .b2-hx { position: relative; z-index: 1; margin-top: -40px; }

/* тона: шапка карточки — цвет роли; рамка и первая тень — кромка тона; тело — --card */
.b2-home .b2-wk2, .b2-home .b2-st2, .b2-home .b2-qk { --t: var(--b2-t-lamp); --e: var(--b2-e-lamp); border-color: var(--e); box-shadow: 0 4px 0 var(--e), 0 18px 22px -18px rgba(11, 23, 48, .5); }
.b2-home .b2-st2 { --t: var(--b2-t-coral); --e: var(--b2-e-coral); }
.b2-home .b2-qk { --t: var(--b2-t-sky); --e: var(--b2-e-sky); }
.b2-home .b2-wk2 > .b2-ch:first-child, .b2-home .b2-st2 > .b2-ch:first-child, .b2-home .b2-qk > .b2-ch:first-child {
  margin: calc(-1 * var(--py)) calc(-1 * var(--px)) 10px; padding: 6px var(--px); min-height: 58px; background: var(--t); border-bottom: 2px solid var(--e); border-radius: 22px 22px 0 0;
}
.b2-wk2 .b2-ch h2, .b2-st2 .b2-ch h2, .b2-qk .b2-ch h2 { font-size: 18px; }
/* «План дня»: заголовок с точками дня и минутами — шапка (лампа), граница тела — тушь; Нура в карточке нет, первой стоит эта строка */
.b2-home .b2-plan__pt { margin-inline: calc(-1 * var(--px)); padding: 2px var(--px) 4px; background: var(--b2-t-lamp); border-bottom: 2px solid var(--ink); }
.b2-home .b2-plan > .b2-plan__pt:first-child { margin-top: calc(-1 * var(--py)); padding-top: calc(var(--py) + 2px); min-height: 56px; border-radius: var(--r) var(--r) 0 0; }

/* узкий набор (контейнер ≤ 317, окно ≤ 349): на 22 px / Нур 74 длинная реплика уходит в три строки, а имя от 9 знаков рвётся */
@container b2w (max-width: 317px) {
  .b2-scene__nw .b2-nurpic { width: 64px !important; height: 69px !important; }
  .b2-root .b2-scene .b2-hello { font-size: 18px; }
  .b2-scene .b2-pill { gap: 4px; padding: 0 10px 0 8px; }
  .b2-scene__say .b2-say { font-size: 20px; }
  /* строка плана при 18 px = 273 px при внутренней ширине 256 (окно 320; выступ 17 px был и до T-091): точки 12 px через 4, зазор 4, чип у́же — 252 px */
  .b2-plan__pt { gap: 4px; }
  .b2-plan__pt .b2-chip { padding: 0 8px; }
  .b2-pips { gap: 4px; }
  .b2-pips i { width: 12px; height: 12px; }
}
/* окно ниже 812 (≤ 760): Нур 44×47, реплики нет, сцена ниже — бюджет кнопки дня 664 на 360×740 */
@media (max-width: 900px) and (max-height: 760px) {
  .b2-scene { padding-bottom: 18px; }
  .b2-scene.b2-scene--flat { padding-bottom: 12px; }
  .b2-scene__nw .b2-nurpic { width: 44px !important; height: 47px !important; }
  .b2-scene__say { display: none; }
  .b2-scene:not(.b2-scene--flat) + .b2-hx { margin-top: -32px; }
  .b2-home .b2-plan > .b2-plan__pt:first-child { padding-top: var(--py); min-height: calc(var(--py) + 40px); }
}
/* окно ≥ 901 (боковое меню): плашка в колонке содержимого, а не во всю ширину окна */
@media (min-width: 901px) {
  .b2-scene { margin: 0; padding: 20px 28px 52px; border-radius: 30px; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 18px; }
  .b2-scene.b2-scene--flat { padding-bottom: 24px; }
  .b2-scene .b2-top { display: contents; }
  .b2-root .b2-scene .b2-hello { grid-column: 2; grid-row: 1; align-self: end; font-size: 30px; line-height: 1.15; }
  .b2-scene .b2-pill { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .b2-scene__nw .b2-nurpic { width: 96px !important; height: 104px !important; }
  .b2-scene__say .b2-say { padding: 6px 16px 4px; font-size: 27px; }
  .b2-scene:not(.b2-scene--flat) + .b2-hx { margin-top: -66px; }
}
@container b2w (min-width: 900px) {
  .b2-scene:not(.b2-scene--flat) + .b2-hx { margin-top: -72px; }
}

.b2-tasks { list-style: none; position: relative; margin: 2px 0 0; padding: 0; }
.b2-tk { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 0 12px; align-items: center; min-height: 50px; padding: 3px 0; }
.b2-tk::before { content: ""; position: absolute; left: 17px; top: -5px; bottom: -5px; width: 2px; background: var(--b2-line); }
.b2-tk:first-child::before { top: 50%; }
.b2-tk:last-child::before { bottom: 50%; }
.b2-tasks[data-open="false"] .b2-tk:nth-child(4)::before { bottom: 50%; }
.b2-tk__nb { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #9aa1b5; background: var(--card); display: grid; place-items: center; font: 800 15px/1 var(--display); }
.b2-tk__tx { min-width: 0; position: relative; z-index: 0; pointer-events: none; }
.b2-tk__tx b { display: block; font: 800 16px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-tk__kind { display: flex; align-items: center; gap: 6px; margin-top: 1px; font: 700 14px/1.2 var(--font); color: var(--muted); }
.b2-tk__kind svg { width: 15px; height: 15px; stroke-width: 2.6; flex: none; }
.b2-tk.is-cur { margin: 2px -8px; padding: 2px 8px; background: #fff3c4; border: 2px solid var(--ink); border-radius: 16px; }
.b2-tk.is-cur::before { display: none; }
.b2-tk.is-cur + .b2-tk::before { top: -2px; }
.b2-tk.is-cur .b2-tk__nb { background: var(--lamp); border-color: var(--ink); box-shadow: 0 0 0 5px rgba(255, 215, 106, .5); }
.b2-tk.is-cur .b2-tk__kind { color: var(--ink-2); }
.b2-tk__hit { position: absolute; inset: 0; border-radius: 14px; z-index: 1; }
@media (hover: hover) {
  .b2-tk__hit:hover { background: rgba(236, 230, 212, .4); }
  .b2-tk.is-cur .b2-tk__hit:hover { background: rgba(255, 215, 106, .25); }
}
.b2-tk__hit:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; }
.b2-tk__nb, .b2-sbg, .b2-tk__now { pointer-events: none; }
.b2-plan.is-calm .b2-tk.is-cur { margin: 0; padding: 3px 0; background: none; border: 0; border-radius: 0; }
.b2-sbg { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); display: inline-flex; align-items: center; gap: 6px; color: var(--cd); font: 800 14px/1 var(--font); }
.b2-sbg--algebra { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); }
.b2-sbg--geometry { --c: var(--b2-ge); --cd: var(--b2-ge-d); --cbg: var(--b2-ge-bg); }
.b2-sbg__i { width: 28px; height: 28px; border-radius: 50%; background: var(--cbg); border: 2px solid var(--c); display: grid; place-items: center; color: var(--cd); }
.b2-sbg__i svg { width: 15px; height: 15px; stroke-width: 2.6; }
.b2-sbg__n { display: none; }
.b2-tk__now { display: none; font: 800 14px/1 var(--font); color: var(--ink-2); }
.b2-psm { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 2px; border: 0; border-top: 1.5px dashed var(--b2-line); background: transparent; font: 800 15px/1 var(--font); color: var(--ink-2); cursor: pointer; border-radius: 0 0 14px 14px; }
.b2-psm svg { width: 20px; height: 20px; }
.b2-psm__ic { display: inline-flex; }
.b2-psm__ic.is-up { transform: rotate(180deg); }
@media (hover: hover) { .b2-psm:hover { background: rgba(236, 230, 212, .45); color: var(--ink); } }
.b2-plan .b2-cta { margin-top: 8px; }
.b2-sdone { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 8px 0; min-height: 60px; }
.b2-sdone .b2-mr__nd { grid-row: span 2; }

/* ---- «Ещё на сегодня» ---- */
.b2-plan__more { margin-top: 8px; }
.b2-plan__mh { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.b2-plan__mh h3 { font: 800 16px/1.2 var(--font); letter-spacing: 0; flex: 1; }
.b2-plan__mh .b2-chip { min-height: 28px; }
.b2-mr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 8px 0; border-top: 1.5px dashed var(--b2-line); min-height: 60px; }
.b2-mr:first-child { border-top: 0; }
.b2-mr__nd { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; background: var(--b2-lilac); }
.b2-mr__nd svg { width: 22px; height: 22px; }
.b2-mr__nd img { width: 68%; height: 68%; object-fit: contain; }
.b2-mr__nd--mint { background: var(--b2-mint-bg); }
.b2-mr__nd--coral { background: var(--b2-coral-bg); }
.b2-mr__nd--soft { background: var(--b2-soft); box-shadow: none; border-color: #9aa1b5; color: var(--muted); }
.b2-mr__nd--lilac { background: var(--b2-lilac); }
/* кнопка строки (стрелка, замок) — по центру значка: без начальной линии `span 2` уходил в строки 2–3 и строка росла с 60 до 87 px (C2, приёмка 03) */
.b2-mr > .b2-go2, .b2-mr > .b2-lockbtn, .b2-mr > .b2-mr__lk { grid-row: 1 / span 2; grid-column: 3; align-self: center; }
.b2-mr__t { font: 800 16px/1.2 var(--font); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b2-mr__tp { grid-column: 2; font: 600 14px/1.25 var(--font); color: var(--ink-2); min-width: 0; }
.b2-mr--hw .b2-mr__tp, .b2-mr--ev .b2-mr__tp { white-space: normal; }
.b2-go2 { grid-row: 1 / span 2; grid-column: 3; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); box-shadow: 0 3px 0 var(--ink); font: 800 15px/1 var(--font); color: var(--ink); text-decoration: none; white-space: nowrap; }
.b2-go2 svg { width: 20px; height: 20px; flex: none; }
.b2-go2__t { display: none; }
.b2-go2:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { .b2-go2:hover { background: var(--lamp); } }
.b2-go2.is-next { background: var(--ink); color: #fff; }
.b2-go2.is-next svg { color: var(--lamp); }
.b2-mr.is-done .b2-go2 { background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); box-shadow: none; }
.b2-mr.is-lock .b2-mr__t { color: var(--muted); }
.b2-mr__lk { grid-row: 1 / span 2; grid-column: 3; width: auto; min-height: 32px; padding: 0 10px; white-space: nowrap; }
.b2-mr.is-lock .b2-mr__lk.b2-btn { min-height: 44px; }
.b2-mr__lk svg { width: 16px; height: 16px; }
/* N-17 (QA T-078 р4): чип «Открывает TR-YÖS Zone» (закрытый режим без Pro-замка) стоял в одну строку 214 px и сжимал колонку названия до 0 (320–345) и
   до 14–44 px вплоть до 390: «Охота» обрезалась. На телефоне — две строки ≤ 128 px; значок замка в чипе лишний, тот же замок уже в узле строки. */
.b2-mr > .b2-mr__lk.b2-chip svg { display: none; }   /* и на ПК: карточка 126 px, значок съедал 22 px, и «TR-YÖS Zone» (90 px) выходило за поля чипа (C1 приёмки 03) */
@container b2w (max-width: 899px) {
  .b2-mr > .b2-mr__lk.b2-chip { white-space: normal; max-width: 128px; padding: 4px 10px; line-height: 1.15; text-align: center; }
}

/* ---- «Задачи недели» ---- */
.b2-wk2 .b2-ch { margin-bottom: 2px; }
.b2-wk2__i { margin-right: -10px; }
.b2-wqs { display: grid; }
.b2-wq2 { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 68px; padding: 8px 0; border-top: 1.5px dashed var(--b2-line); color: var(--ink); border-radius: 12px; text-decoration: none; }
.b2-wq2:first-child { border-top: 0; }
@media (hover: hover) { a.b2-wq2:hover { background: rgba(236, 230, 212, .35); } }
.b2-wq2__i { width: 44px; height: 44px; border-radius: 14px; background: var(--b2-soft); border: 2px solid var(--ink); display: grid; place-items: center; }
.b2-wq2__i svg { width: 22px; height: 22px; }
.b2-wq2.is-ok .b2-wq2__i { background: var(--mint); border-color: var(--teal-deep); }
.b2-wq2.is-lock .b2-wq2__i { border-color: #9aa1b5; color: var(--muted); }
.b2-wq2.is-lock .b2-wq2__l b { color: var(--muted); }
.b2-wq2__t { min-width: 0; }
.b2-wq2__l { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b2-wq2__l b { font: 800 15px/1.2 var(--font); }
.b2-wq2__bar { height: 10px; margin-top: 7px; }
.b2-wq2__bar i { background: var(--lamp-d); }
.b2-wq2.is-ok .b2-wq2__bar i { background: var(--teal-deep); }
.b2-wq2__n { text-align: right; min-width: 50px; }
.b2-wq2__n .b2-num { font-size: 24px; }
.b2-wq2__n .b2-cap { color: var(--muted); }
.b2-wk2__c { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1.5px dashed var(--b2-line); }
.b2-wk2__c .b2-cap { color: var(--muted); }
.b2-wk2__c .b2-chip img { width: 18px; height: 18px; }

/* ---- «Серия» ---- */
.b2-st2__b { display: grid; gap: 8px; }
.b2-st2__n { display: grid; gap: 2px; }
.b2-st2__big { display: flex; align-items: center; gap: 8px; }
.b2-st2__big svg { width: 34px; height: 34px; color: var(--coral); fill: var(--coral); stroke: var(--ink); stroke-width: 2; }
.b2-st2__big .b2-num { font-size: 34px; }
.b2-st2__w { display: grid; gap: 4px; }
.b2-st2__lb, .b2-st2__wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.b2-st2__lb b { font: 800 14px/1 var(--font); color: var(--muted); text-align: center; }
.b2-st2__wk i { height: 24px; border-radius: 7px; background: var(--b2-soft); }
.b2-st2__wk i.is-on { background: var(--lamp); }
.b2-st2__wk i.is-today { box-shadow: 0 0 0 2px var(--ink) inset; }

/* ---- «Быстро» ---- */
.b2-qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.b2-qt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 8px; align-content: center; align-items: center; min-height: 76px; padding: 10px 6px 10px 9px; border-radius: 18px; background: var(--card); border: 2px solid var(--b2-edge); box-shadow: 0 3px 0 var(--b2-edge); color: var(--ink); text-decoration: none; min-width: 0; }
a.b2-qt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { a.b2-qt:hover { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); } }
.b2-qb { grid-row: span 2; width: 34px; height: 34px; border-radius: 11px; background: var(--b2-soft); border: 2px solid var(--ink); display: grid; place-items: center; }
.b2-qb svg { width: 20px; height: 20px; }
.b2-qt1 { font: 800 14px/1.15 var(--font); min-width: 0; overflow-wrap: break-word; }
.b2-qt2 { font: 700 14px/1.2 var(--font); color: var(--muted); min-width: 0; }
.b2-qt.is-lock { background: var(--paper); box-shadow: none; }
.b2-qt.is-lock .b2-qb { border-color: #9aa1b5; color: var(--muted); }
.b2-qt.is-lock .b2-qt1 { color: var(--muted); }
.b2-qt__lk { grid-column: 1 / -1; width: auto; min-height: 44px; margin-top: 4px; }
/* узкий контейнер (окно ≤ 355 px): колонка текста у плитки в строку уже слова «Коллекция» (≈ 78 px при 14 px) — значок над названием (C1, приёмка 03, вариант A); шире — значок слева, слова не рвутся */
@container b2w (max-width: 323px) {
  .b2-qt { grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; padding: 10px 12px 12px; }
  .b2-qb { grid-row: auto; }
  .b2-qt .b2-qt__lk { justify-self: stretch; min-width: 0; }   /* кнопка «Pro» не шире плитки */
}

/* ---- курс (у аккаунта без ID ученика) ---- */
.b2-course--home { padding: 12px 14px 14px; }

/* ---- раскладка: контейнер .b2-wrap. Телефон — одна колонка, обёртки колонок прозрачны; курс (у аккаунта без ID) в DOM последний — после «Быстро» (HM2, T-087a) ---- */
.b2-hm, .b2-cols { display: contents; }
.b2-home > .b2-hx { grid-column: 1 / -1; }

/* окно ниже 812: бюджет главной кнопки — 360×740 держит кнопку над нижней панелью (верх панели 664): Нур и реплика, чип цели и подпись под числом скрыты, плотнее заголовки */
@media (max-height: 760px) {
  @container b2w (max-width: 899px) {
    .b2-home .b2-hx { padding-top: 10px; padding-bottom: 10px; }
    .b2-hx__chips .b2-goalchip { display: none; }
    .b2-hx__fc .b2-cap { display: none; }
    .b2-plan__pt { min-height: 40px; padding: 0 0 2px; }
    .b2-plan.is-noted .b2-plan__note { display: flex; }
    .b2-plan.is-noted .b2-plan__pt { min-height: 34px; padding-bottom: 0; }
    .b2-plan__sh { min-height: 36px; }
    .b2-hw2__p { display: none; }
  }
}

@container b2w (min-width: 900px) {
  .b2-home { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .b2-root .b2-hello { font: 800 30px/1.15 var(--display); letter-spacing: -.01em; }
  .b2-home .b2-card { padding: 16px 20px 20px; }
  .b2-road { --nw: 64px; }
  .b2-hm { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  /* HM2 (T-087a): колонки и курс — в общей сетке .b2-cols (DOM: левая колонка, правая, курс — порядок Tab = порядок на телефоне). Строка 2 гибкая: правая колонка (span 2) тянется в ней,
     поэтому зазор «План дня → курс» остаётся 20 px при любом соотношении высот колонок (строки без курса — нулевой высоты, row-gap нет) */
  .b2-cols { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto minmax(0, 1fr); column-gap: 20px; min-width: 0; }
  .b2-hm--l { grid-column: 1 / 8; grid-row: 1; }
  .b2-hm--r { grid-column: 8 / 13; grid-row: 1 / span 2; }
  .b2-cols > .b2-course--home { grid-column: 1 / 8; grid-row: 2; align-self: start; margin: 20px 0 0; }
  .b2-hm > * { margin: 0; }
  /* полоса прогноза: дни · дуга · три числа */
  .b2-home .b2-hx { padding: 18px 24px; }
  .b2-hx__g { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr); gap: 0 24px; align-items: center; }
  .b2-hx__g--nof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .b2-hx__l { align-self: stretch; justify-content: center; }
  .b2-hx__days .b2-num--d { font-size: 60px; }
  .b2-hx__days .b2-cap { max-width: none; }
  .b2-hx__chips { margin-top: 10px; }
  .b2-hx__dc { display: inline-flex; }
  .b2-hx__r svg { max-width: 170px; }
  .b2-hx__gnum .b2-num--zone { font-size: min(30px, 15.5cqw); }
  .b2-hx__gnum .b2-num--m { font-size: 38px; }
  .b2-hx__facts { display: flex; gap: 8px; }
  .b2-fact { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; padding: 10px 12px; border-radius: 16px; background: var(--paper); border: 1.5px solid var(--b2-line); min-width: 0; }
  .b2-fact .b2-num { font-size: 20px; white-space: nowrap; }
  .b2-fact .b2-cap { color: var(--muted); white-space: nowrap; }
  /* «Домашка» и «План дня» крупнее */
  .b2-home .b2-hw2 { padding: 12px 20px 18px; }
  .b2-hw2__t { font-size: 19px; }
  .b2-hw2__p { font-size: 15px; }
  .b2-hw2__lab { font-size: 16px; }
  .b2-hw2__n .b2-num { font-size: 26px; }
  .b2-hw2__bar { height: 14px; }
  .b2-home .b2-plan { padding: 18px 22px 22px; border-radius: 30px; box-shadow: 0 7px 0 var(--ink); }
  .b2-plan__pt { min-height: 48px; padding: 4px 0 6px; }
  .b2-plan__sh { min-height: 44px; }
  .b2-plan__i { margin-top: 0; margin-bottom: 0; }
  .b2-plan .b2-cta { margin-top: 10px; }
  .b2-plan__pt h2 { font-size: 30px; }
  .b2-tk { min-height: 60px; }
  .b2-tk__now { display: none; }
  .b2-tk.is-cur .b2-tk__now { display: inline; margin-left: 12px; }
  .b2-sbg { min-width: 118px; }
  .b2-sbg__n { display: inline; }
  .b2-mrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .b2-mrs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2-mrs .b2-mr { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 2px solid var(--b2-line); border-radius: 18px; padding: 12px; min-height: 0; }
  .b2-mrs .b2-mr:first-child { border-top: 2px solid var(--b2-line); }
  .b2-mrs .b2-mr__nd { margin-bottom: 8px; width: 48px; height: 48px; }
  .b2-mrs .b2-mr__t { font-size: 17px; white-space: normal; }
  .b2-mrs .b2-go2, .b2-mrs .b2-mr__lk { width: 100%; margin-top: auto; border-radius: 13px; padding: 0 14px; }
  .b2-mrs .b2-mr__tp { margin-bottom: 10px; }
  .b2-mrs .b2-go2__t { display: inline; }
  .b2-mrs .b2-mr__lk { width: auto; max-width: 100%; white-space: normal; line-height: 1.15; padding: 4px 10px; }
  /* N-18 (QA T-078 р4): кнопка «Pro» закрытой карточки — на всю ширину, как «Начать» у соседей (макет 03 r4.css:237); с C2 она стояла по центру (align-self: center строки телефона).
     Чип-подсказка («Открывает TR-YÖS Zone») — слева под подписью, как раньше. */
  .b2-mrs .b2-mr > .b2-lockbtn { align-self: stretch; width: 100%; max-width: none; justify-content: center; padding: 0 14px; }
  .b2-mrs .b2-mr > .b2-mr__lk.b2-chip { align-self: flex-start; }
  .b2-mrs .b2-mr--hw { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; flex-direction: row; }
  .b2-mrs .b2-mr--hw .b2-mr__nd { grid-row: span 2; margin-bottom: 0; width: 44px; height: 44px; }
  .b2-mrs .b2-mr--hw .b2-go2 { width: auto; grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
  .b2-mrs .b2-mr--hw .b2-mr__tp { margin-bottom: 0; }
  .b2-mrs .b2-mr--hw .b2-mr__tp { grid-column: 2; }
  .b2-wk2 .b2-ch h2, .b2-st2 .b2-ch h2, .b2-qk .b2-ch h2 { font-size: 19px; }
  .b2-wq2 { min-height: 76px; }
  .b2-wq2__l b { font-size: 17px; }
  .b2-st2__big .b2-num { font-size: 34px; }
  .b2-course--home { grid-template-columns: auto minmax(0, 1fr) auto; }
  .b2-course--home .b2-btn { grid-column: auto; width: auto; }
}

/* =====================================================================
   «Прогресс» (T-073, спецификация 03 §4.8), «Коллекция» (§4.10)
   ===================================================================== */
.b2-prg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; padding-bottom: 6px; }
.b2-prg > * { min-width: 0; }
/* окно 320: заголовок «Прогресс» + чип сессии «Весна 2027 · ≈169 дней» (212 px) шире контейнера — чип уходил за кромку окна (горизонтальная прокрутка 3 px); перенос включается только при нехватке места */
.b2-prg > .b2-top { flex-wrap: wrap; row-gap: 6px; }
.b2-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.b2-cards > * { min-width: 0; }
.b2-cards .b2-card, .b2-prg .b2-card { padding: 12px 14px 14px; }
.b2-empty--c { justify-content: center; }
.b2-empty__tx { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.b2-lnk { display: inline-flex; align-items: center; min-height: 44px; font: 800 15px/1.2 var(--font); color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.b2-lnk--c { justify-content: center; width: 100%; }
.b2-acts { display: grid; gap: 10px; margin-top: 12px; }
.b2-errbox { display: grid; gap: 10px; justify-items: start; }
.b2-hd-r { display: flex; align-items: center; gap: 4px; }
.b2-hd-r .b2-chip { min-height: 30px; }
.b2-chiplink { min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--ink); }
.b2-chiplink svg { width: 18px; height: 18px; }

/* прогноз */
.b2-fcard .b2-arc { max-width: 420px; margin: 0 auto; }
.b2-fn { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
.b2-num--xl { font-size: 60px; }
.b2-fn .b2-num--zone { font-size: min(52px, 15cqw); }
.b2-fcard { container-type: inline-size; }
.b2-pace { min-height: 44px; padding: 0 14px; }
.b2-chip.is-fading { opacity: .65; }
.b2-fcard .b2-fine { margin-top: 10px; justify-content: center; }
.b2-mood { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 10px 8px 76px; min-height: 64px; border-radius: 20px; background: var(--paper); border: 2px solid var(--b2-edge); }
.b2-mood__nw { position: absolute; left: 8px; bottom: 2px; width: 62px; height: 70px; display: block; }
.b2-mood .b2-say { flex: 1; font-size: 22px; margin: 0 0 0 6px; }
.b2-mood__dl { flex: none; min-height: 34px; font-size: 16px; }
.b2-mood__dl svg { width: 20px; height: 20px; }
.b2-mood--down { background: #fff0ea; border-color: #f4b9a7; }

/* путь, плитки шторок */
.b2-pcard .b2-road { margin-top: 4px; }
.b2-pathrows, .b2-tls, .b2-trows { display: grid; gap: 4px; }
.b2-tl { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); display: flex; align-items: center; gap: 12px; min-height: 56px; }
.b2-tl > .b2-chip { flex: none; min-height: 28px; }
.b2-tl__t { font: 800 16px/1.2 var(--font); flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.b2-tl__v { font: 800 16px/1 var(--display); letter-spacing: -.02em; min-width: 54px; text-align: right; white-space: nowrap; }
.b2-tl__pic { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; flex: none; background: var(--b2-soft); }
.b2-tl__pic.is-on { background: var(--lamp); }
.b2-tl__pic img { width: 60%; height: 60%; }
.b2-tl__pic svg { width: 22px; height: 22px; }
.b2-tl__lamp { width: 28px; display: grid; place-items: center; flex: none; }
.b2-tl--link { color: inherit; text-decoration: none; border-radius: 12px; }
@media (hover: hover) { .b2-tl--link:hover { background: var(--b2-soft); } }
/* полоса темы не отнимает у названия место: слово переносится по словам, а не посреди (ux C7) */
.b2-bar--mini { flex: none; width: clamp(44px, 13vw, 110px); }
.b2-tls .b2-tl { gap: 10px; }
.b2-sx--lg, .b2-sx--al, .b2-sx--ge { --c: var(--b2-lg); }

/* серия */
.b2-blk { display: block; width: 100%; border: 0; background: transparent; text-align: left; border-radius: 16px; padding: 0; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) { .b2-blk:hover { background: rgba(236, 230, 212, .35); } }
.b2-st { display: flex; gap: 14px; align-items: center; }
.b2-st__big { display: flex; align-items: center; gap: 6px; flex: none; }
.b2-st__big svg { width: 40px; height: 40px; color: var(--b2-node-off); fill: none; stroke: currentColor; stroke-width: 2; }
.b2-st__big.is-on svg { color: var(--ink); fill: var(--coral); }
.b2-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; flex: 1; min-width: 0; }
.b2-cal b { font: 800 14px/1 var(--font); color: var(--muted); text-align: center; }
.b2-cal__c { height: 26px; border-radius: 7px; background: var(--b2-soft); border: 1.5px solid transparent; display: block; }
.b2-cal__c.is-l1 { background: #ffe7a1; }
.b2-cal__c.is-l2 { background: var(--lamp); }
.b2-cal__c.is-l3 { background: var(--lamp-d); }
.b2-cal__c.is-today { border-color: var(--ink); }
.b2-cal__c.is-future { background: transparent; border: 1.5px dashed var(--b2-line); }
.b2-shades { display: inline-flex; gap: 3px; }
.b2-shades i { width: 16px; height: 14px; border-radius: 4px; display: block; }
.b2-shades .is-l1 { background: #ffe7a1; } .b2-shades .is-l2 { background: var(--lamp); } .b2-shades .is-l3 { background: var(--lamp-d); }
.b2-kv__g--sky { background: var(--sky); border-color: var(--ink); color: var(--ink); }

/* пробники */
.b2-trial-w { display: block; max-width: 520px; margin: 0 auto; }
.b2-chart { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; }
.b2-chart text { font-family: var(--font); font-weight: 800; font-size: 15px; fill: var(--ink-2); }
.b2-chart text.tk2 { font-weight: 700; fill: var(--muted); }
.b2-chart text.pl { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.b2-chart text.amb { fill: var(--b2-amber); }
.b2-dotk { width: 14px; height: 14px; border-radius: 50%; background: var(--lamp); border: 3px solid var(--ink); display: inline-block; }
.b2-trows .b2-tl { padding: 0 6px; }

/* мастерство */
.b2-mast { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.b2-msec { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); padding: 10px 8px 6px 10px; border-radius: 20px; background: var(--cbg); border: 2px solid var(--c); box-shadow: 0 3px 0 var(--c); }
.b2-msec.b2-sx--al { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); }
.b2-msec.b2-sx--ge { --c: var(--b2-ge); --cd: var(--b2-ge-d); --cbg: var(--b2-ge-bg); }
.b2-msec__h { display: flex; align-items: center; gap: 10px; padding-right: 2px; }
.b2-msec__nm { font: 800 16px/1.1 var(--display); color: var(--cd); flex: 1; letter-spacing: -.01em; }
.b2-msec .b2-sx__b { flex: none; width: 38px; height: 38px; border-radius: 12px; }
.b2-msec .b2-num { color: var(--cd); }
.b2-meds { display: flex; gap: 2px; margin-top: 8px; justify-content: space-around; }
.b2-med { position: relative; flex: 1 1 0; min-width: 44px; max-width: 64px; align-items: center; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 0; background: transparent; padding: 4px 0 2px; border-radius: 14px; color: var(--cd); cursor: pointer; }
.b2-med__rg { position: relative; display: block; width: min(56px, 100%); aspect-ratio: 1; }
.b2-med__ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.b2-med__track { stroke: #fff; stroke-width: 5; }
.b2-med__v { stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.b2-med.is-none .b2-med__track { stroke-dasharray: 3 6; stroke: var(--b2-node-off); stroke-width: 3; }
.b2-med.is-thin .b2-med__track { stroke: var(--c); stroke-width: 2; }
.b2-med.is-none .b2-med__pic img { filter: grayscale(1); opacity: .6; }
.b2-med__pic { position: absolute; inset: 7px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.b2-med__pic img { width: 30px; height: 30px; }
.b2-med__bg { position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; z-index: 2; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); color: var(--ink); }
.b2-med__bg svg { width: 12px; height: 12px; stroke-width: 2.8; }
.b2-med__bg.is-w { background: var(--coral); }
.b2-med__bg.is-t { background: var(--lamp); }
.b2-med__bg--mini { position: static; width: 22px; height: 22px; }
.b2-med__pc { font: 800 14px/1.2 var(--font); color: var(--cd); min-width: 24px; text-align: center; }
.b2-med[aria-pressed="true"] .b2-med__rg { transform: scale(1.12); }
.b2-med[aria-pressed="true"] .b2-med__pc { background: var(--cd); color: #fff; border-radius: 9px; padding: 0 7px; }
.b2-read { --c: var(--b2-lg); --cd: var(--b2-lg-d); --cbg: var(--b2-lg-bg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 10px; border-radius: 18px; background: var(--cbg); border: 2px solid var(--c); box-shadow: 0 3px 0 var(--c); }
.b2-read.b2-sx--al { --c: var(--b2-al); --cd: var(--b2-al-d); --cbg: var(--b2-al-bg); }
.b2-read.b2-sx--ge { --c: var(--b2-ge); --cd: var(--b2-ge-d); --cbg: var(--b2-ge-bg); }
.b2-read__open { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; text-align: left; color: var(--cd); cursor: pointer; }
.b2-read__open img { width: 44px; height: 44px; flex: none; background: #fff; border-radius: 50%; padding: 4px; }
.b2-read__open h3 { font-size: 16px; line-height: 1.2; flex: 1; min-width: 0; color: var(--cd); }
.b2-read__open .b2-num { color: var(--cd); font-size: 22px; white-space: nowrap; }
.b2-read .b2-go { flex: 1 1 100%; background: var(--c); color: #fff; border-color: var(--cd); box-shadow: 0 3px 0 var(--cd); text-decoration: none; }
/* белый 15 px/800 на --b2-al (3,36) и --b2-ge (≈ 3,2) ниже 4,5: у Алгебры и Геометрии фон кнопки — тёмный тон раздела (7,9 / 7,6); Логика остаётся на --b2-lg (4,7); спецификация 03 §3.2 */
.b2-read.b2-sx--al .b2-go, .b2-read.b2-sx--ge .b2-go { background: var(--cd); box-shadow: 0 3px 0 var(--ink); }
.b2-read--empty { padding: 4px 0; background: transparent; border: 0; box-shadow: none; }
.b2-dash { width: 18px; height: 18px; border-radius: 50%; border: 2.5px dashed var(--muted); display: inline-block; }
.b2-mast .b2-legend { align-items: center; }
.b2-sx--lg .b2-tl__t, .b2-sx--al .b2-tl__t, .b2-sx--ge .b2-tl__t { color: var(--ink); }
.b2-tls.b2-sx--lg { --c: var(--b2-lg); } .b2-tls.b2-sx--al { --c: var(--b2-al); } .b2-tls.b2-sx--ge { --c: var(--b2-ge); }
.b2-tl.b2-sx--lg { --cd: var(--b2-lg-d); } .b2-tl.b2-sx--al { --cd: var(--b2-al-d); } .b2-tl.b2-sx--ge { --cd: var(--b2-ge-d); }

/* оценки преподавателей */
.b2-marklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.b2-mark { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1.5px dashed var(--b2-line); }
.b2-mark:first-child { border-top: 0; }
.b2-mark__tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.b2-mark__tx b { font: 800 15px/1.25 var(--font); overflow-wrap: anywhere; }
.b2-mark__tx i { font: 700 14px/1.2 var(--font); font-style: normal; color: var(--ink-2); }
.b2-mark__v { font: 800 16px/1 var(--display); white-space: nowrap; }
.b2-mark__v.is-lo { color: var(--b2-coral-d); } .b2-mark__v.is-mid { color: var(--b2-amber); } .b2-mark__v.is-hi { color: var(--teal-deep); }
.b2-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 800 15px/1.2 var(--font); color: var(--ink-2); }

/* коллекция */
.b2-coll { display: grid; gap: 14px; }
.b2-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.b2-tile { position: relative; display: flex; flex-direction: column; gap: 8px; justify-content: space-between; min-height: 132px; padding: 12px; border-radius: 22px; background: var(--card); border: 2px solid var(--b2-edge); box-shadow: 0 4px 0 var(--b2-edge); color: var(--ink); text-decoration: none; }
.b2-tile:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--b2-edge); }
.b2-tile__ico { width: 56px; height: 56px; display: block; }
.b2-tile__ico svg, .b2-tile__ico > * { width: 56px; height: 56px; }
.b2-tile__n { font: 800 15px/1.2 var(--font); color: var(--ink-2); }
.b2-tile__new { position: absolute; right: 12px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); border: 2px solid var(--ink); }
@container b2w (min-width: 640px) { .b2-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.b2-sections { margin-bottom: 14px; padding: 12px 14px 8px; }
.b2-sections h2 { font-size: 17px; line-height: 1.2; margin-bottom: 4px; }
.b2-sections__list { display: grid; }
.b2-sections__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 2px; border-top: 1.5px dashed var(--b2-line); color: var(--ink); text-decoration: none; font: 800 16px/1.2 var(--font); }
.b2-sections__row:first-child { border-top: 0; }
.b2-sections__row > span:nth-child(2) { flex: 1; min-width: 0; }
.b2-sections__ico { width: 36px; height: 36px; flex: none; display: block; }
.b2-sections__ico > * { width: 36px; height: 36px; }
.b2-sections__ico--out { opacity: .8; }
@media (hover: hover) { .b2-sections__row:hover { background: var(--b2-soft); border-radius: 12px; } }

/* раскладка «Прогресса» по контейнеру */
@container b2w (min-width: 640px) {
  .b2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .b2-fcard, .b2-pcard, .b2-mcard, .b2-marks { grid-column: 1 / -1; }
  .b2-fcard .b2-arc { max-width: 420px; }
  .b2-st { flex-direction: column; align-items: stretch; }
  .b2-st__big { justify-content: center; }
}
@container b2w (min-width: 900px) {
  .b2-prg { gap: 20px; }
  .b2-cards { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .b2-cards .b2-card, .b2-prg .b2-card { padding: 16px 20px 20px; }
  .b2-fcard { grid-column: 1 / 6; grid-row: 1; }
  .b2-tcard { grid-column: 6 / 13; grid-row: 1; }
  .b2-pcard { grid-column: 1 / 13; grid-row: 2; }
  .b2-mcard { grid-column: 1 / 9; grid-row: 3; }
  .b2-scard { grid-column: 9 / 13; grid-row: 3; align-self: start; }
  .b2-marks { grid-column: 1 / 13; grid-row: 4; }
  .b2-road { --nw: 64px; --dot: 46px; }
  .b2-med__rg { width: min(64px, 100%); }
  .b2-med__pic { inset: 8px; }
  .b2-med__pic img { width: 34px; height: 34px; }
  .b2-med { max-width: 78px; }
}
@container b2w (min-width: 640px) {
  .b2-read__open { flex: 1 1 0; }
  .b2-read .b2-go { flex: 0 0 auto; }
}

/* =====================================================================
   Движение: только при no-preference, базовое состояние — конечное
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* переходы (объявлены только здесь: при reduce их нет) */
  .b2-cta, .b2-btn, .b2-go { transition: transform .09s ease; }
  .b2-opt__card { transition: transform .09s ease; }
  .b2-lamp__card { transition: transform .09s ease; }
  .b2-dot { transition: transform .15s; }
  @keyframes b2-rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes b2-rise-back { from { opacity: 0; transform: translateY(-12px); } }
  @keyframes b2-pop { from { opacity: 0; transform: scale(.4); } 60% { transform: scale(1.14); } }
  @keyframes b2-fade { from { opacity: 0; } }
  @keyframes b2-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes b2-needle { from { transform: rotate(-90deg); } }
  @keyframes b2-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .972); } }
  @keyframes b2-hop { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.06, .94); } 80% { transform: translateY(-4px); } }
  @keyframes b2-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  @keyframes b2-halo { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
  @keyframes b2-lamp-on { 0%, 12% { opacity: 0; } 22%, 60% { opacity: 1; } 72%, 100% { opacity: 0; } }
  @keyframes b2-lamp-off { 0%, 12% { opacity: 1; } 22%, 60% { opacity: 0; } 72%, 100% { opacity: 1; } }
  @keyframes b2-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
  @keyframes b2-sheetup { from { transform: translateY(40px); opacity: 0; } }
  @keyframes b2-ring { from { stroke-dashoffset: 1; } }

  .b2-tabs__pill { transition: transform .28s cubic-bezier(.3, 1.3, .5, 1); }
  .b2-pbar i, .b2-scale i { transition: transform .25s ease; }
  .b2-sch__chev { transition: transform .2s; }
  .b2-step[data-dir="fwd"] { animation: b2-rise .25s ease both; }
  .b2-step[data-dir="back"] { animation: b2-rise-back .25s ease both; }
  .b2-form [data-reg] { animation: b2-rise .35s both; }
  .b2-err[data-shake="true"] { animation: b2-shake .4s; }
  .b2-sheet[open] { animation: b2-sheetup .3s cubic-bezier(.2, .9, .3, 1) both; }
  .b2-sheet[open]::backdrop { animation: b2-fade .25s both; }
  .b2-notice { animation: b2-rise .5s .2s both; }
  .b2-splash__logo { animation: b2-rise .6s both; }
  .b2-splash__msg { animation: b2-rise .6s .3s both; }
  .b2-splash__halo { animation: b2-halo 2.4s ease-in-out infinite; }
  .b2-splash__shadow { animation: b2-halo 2.8s ease-in-out infinite; }
  .b2-splash__lamps i .on { animation: b2-lamp-on 2.5s calc(var(--k) * .25s) infinite; }
  .b2-splash__lamps i .off { animation: b2-lamp-off 2.5s calc(var(--k) * .25s) infinite; }
  .b2-splash[data-out="true"] { animation: b2-fade .2s reverse both; }

  /* дуга и зона: проигрываются один раз за сессию вкладки (класс b2-play) */
  .b2-play .b2-gauge .seg { animation: b2-fade .4s calc(var(--i) * .08s) both; }
  .b2-play .b2-gauge .lit { stroke-dasharray: 1; animation: b2-draw 1s var(--d, .2s) cubic-bezier(.4, .1, .2, 1) both; }
  .b2-play .b2-gauge .needle { animation: b2-needle 1.1s .25s cubic-bezier(.34, 1.5, .5, 1) both; }
  .b2-play .b2-gauge .wh path:first-child { stroke-dasharray: 1; animation: b2-draw .7s 1s ease-out both; }
  .b2-play .b2-gauge .wh path:not(:first-child), .b2-play .b2-gauge text { animation: b2-fade .3s 1.5s both; }
  .b2-play .b2-gauge .flagm { animation: b2-pop .6s 1.1s both; transform-box: fill-box; transform-origin: center; }
  .b2-play .b2-fcast { animation: b2-pop .5s 1.2s both; }
  .b2-play .b2-rc { animation: b2-pop .5s calc(1.2s + var(--i, 0) * .08s) both; }
  .b2-play .b2-fc { animation: b2-rise .5s both; }
  .b2-ring circle.b2-ring__v { stroke-dasharray: 1; animation: b2-ring .6s ease-out both; }
  .b2-dot { animation: none; }

  /* ---- главная и «Прогресс» (T-073): transform и opacity; входные — один раз за сессию вкладки (.b2-play), бесконечные — только Нур, следующий узел, ходок, пламя ---- */
  @keyframes b2-spark { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
  @keyframes b2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
  @keyframes b2-pulse { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
  @keyframes b2-ignite { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
  @keyframes b2-flick { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.08); } }
  @keyframes b2-panel { from { opacity: 0; transform: translateY(8px); } }
  @keyframes b2-rise16 { from { opacity: 0; transform: translateY(16px); } }
  @keyframes b2-scaley { from { transform: scaleY(.1); } }
  @keyframes b2-scalex { from { transform: scaleX(0); } }
  @keyframes b2-jump { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-14px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.06, .94); } 80% { transform: translateY(-4px); } }

  .b2-play.b2-home > *, .b2-play.b2-home > .b2-cols > .b2-hm > *, .b2-play.b2-home > .b2-cols > .b2-course--home { animation: b2-rise16 .5s cubic-bezier(.2, .8, .2, 1) both; }
  .b2-play.b2-home > :nth-child(2) { animation-delay: .06s; }
  .b2-play.b2-home > :nth-child(3) { animation-delay: .12s; }
  .b2-play.b2-home > :nth-child(4) { animation-delay: .18s; }
  .b2-play.b2-home > :nth-child(5) { animation-delay: .24s; }
  .b2-play.b2-home > :nth-child(6) { animation-delay: .3s; }
  .b2-play.b2-home > :nth-child(n+7) { animation-delay: .36s; }
  .b2-play .b2-sx { animation: b2-pop .5s calc(.3s + var(--i, 0) * .08s) both; }
  .b2-play .b2-road__nd { animation: b2-pop .45s calc(.4s + var(--k, 0) * .12s) both; }
  .b2-play .b2-hx__gnum .b2-num { animation: b2-pop .5s 1.1s both; }
  .b2-tabs2[data-changed="true"] .b2-tabpanel:not([hidden]) { animation: b2-panel .28s both; }
  .b2-seg [role="tab"] { transition: transform .09s ease; }
  .b2-seg [role="tab"]:active { transform: scale(.95); }
  .b2-sx { transition: transform .09s ease; }
  .b2-road__rail i, .b2-road__walker { transition: transform .7s cubic-bezier(.3, 1.25, .4, 1); }
  .b2-road__nd.is-next .b2-road__dot::after { animation: b2-pulse 1.8s .6s ease-out infinite; }
  .b2-road__bob { animation: b2-bob 2.4s ease-in-out infinite; }
  .b2-road__walker.is-hop .b2-road__bob { animation: b2-jump .7s ease-in-out; }
  .b2-road__nd.is-ignite .b2-road__dot { animation: b2-ignite .6s both; }
  .b2-sp { animation: b2-spark .8s ease-out both; }
  /* Нур: дышит и моргает только в сцене главной (T-091; раньше — в «Плане дня»; не больше четырёх бесконечных анимаций на экране); ночью (02–06) и на дороге — статичен */
  .b2-home .b2-nurpic, .b2-home .b2-nurpic__wink { animation: none; }
  .b2-home .b2-scene:not([data-asleep]) .b2-nurpic { animation: b2-breathe 3.6s ease-in-out infinite; }
  .b2-home .b2-scene:not([data-asleep]) .b2-nurpic__wink { animation: b2-blink 4.2s infinite; }
  .b2-scene__say .b2-say { animation: b2-pop .5s .5s both; }
  .b2-tasks:not([data-open="false"]) .b2-tk.is-x { animation: b2-fade .22s both; }
  .b2-hw2__bar i, .b2-wq2__bar i { animation: b2-scalex .7s .2s cubic-bezier(.2, .8, .2, 1) both; }
  .b2-go2, .b2-qt, .b2-psm { transition: transform .09s ease; }
  .b2-roadnote { animation: b2-rise .5s both; }
  /* «Прогресс»: карточки, график пробников, календарь, мастерство, пламя серии; полоса Нура — после дуги */
  .b2-play .b2-cards > * { animation: b2-rise16 .5s cubic-bezier(.2, .8, .2, 1) both; }
  .b2-play .b2-cards > :nth-child(2) { animation-delay: .06s; }
  .b2-play .b2-cards > :nth-child(3) { animation-delay: .12s; }
  .b2-play .b2-cards > :nth-child(4) { animation-delay: .18s; }
  .b2-play .b2-cards > :nth-child(n+5) { animation-delay: .24s; }
  .b2-play .b2-mood { animation: b2-rise .5s 1.1s both; }
  .b2-play .b2-mood.is-hop .b2-nurpic { animation: b2-hop .8s 1.5s ease-in-out 2; }
  .b2-play .b2-cal__c { animation: b2-pop .4s calc(.3s + var(--n, 0) * .025s) both; }
  .b2-play .b2-chart .ln { stroke-dasharray: 1; animation: b2-draw 1.2s .3s cubic-bezier(.4, .1, .2, 1) both; }
  .b2-play .b2-chart .pt { animation: b2-pop .45s calc(.4s + var(--i) * .25s) both; transform-box: fill-box; transform-origin: center; }
  .b2-play .b2-chart .pl { animation: b2-fade .4s calc(.5s + var(--i) * .25s) both; }
  .b2-play .b2-chart .dash-goal, .b2-play .b2-chart .ln-goal { animation: b2-fade .5s 1.5s both; }
  .b2-play .b2-chart .flagm { animation: b2-pop .6s 1.1s both; transform-box: fill-box; transform-origin: center; }
  .b2-play .b2-med { animation: b2-pop .5s calc(.35s + var(--i) * .07s) both; }
  .b2-play .b2-med__v { animation: b2-ringgrow .9s calc(.5s + var(--i) * .07s) cubic-bezier(.3, .1, .2, 1) both; }
  .b2-med__rg { transition: transform .18s cubic-bezier(.3, 1.5, .5, 1); }
  .b2-st__big.is-on svg { animation: b2-flick 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
  .b2-tile { transition: transform .09s ease; }
  .b2-prg .b2-nurpic, .b2-coll .b2-nurpic { animation: none; }
  .b2-prg .b2-mood:not(.b2-mood--down) .b2-nurpic { animation: b2-breathe 3.6s ease-in-out infinite; }
  .b2-prg .b2-mood--down .b2-nurpic { animation: b2-breathe 4.6s ease-in-out infinite; }
  .b2-prg .b2-nurpic__wink { animation: none; }
  /* ночью (02–06 по школе) полоса Нура на «Прогрессе» не дышит и не прыгает, ходок дороги не качается (спецификация 03 §3.11, AC-G-12) */
  .b2-prg .b2-mood[data-asleep] .b2-nurpic { animation: none; }
  .b2-road[data-asleep] .b2-road__bob, .b2-road[data-asleep] .b2-road__walker.is-hop .b2-road__bob { animation: none; }
  /* карточки ниже первого экрана ждут появления (lib/b2/reveal.ts, PlayOnce reveal): скрыты, анимации внутри выключены; «go» — играют с нуля, без задержки по порядку */
  .b2-play [data-reveal="wait"] { opacity: 0; }
  .b2-play [data-reveal="wait"], .b2-play [data-reveal="wait"] *, .b2-play [data-reveal="wait"] *::before, .b2-play [data-reveal="wait"] *::after { animation: none !important; }
  .b2-play.b2-home > [data-reveal="go"], .b2-play.b2-home > .b2-cols > .b2-hm > [data-reveal="go"], .b2-play.b2-home > .b2-cols > [data-reveal="go"], .b2-play .b2-cards > [data-reveal="go"] { animation-delay: 0s; }
  @keyframes b2-ringgrow { from { stroke-dasharray: 0 100; } }
}

/* страховка: при «уменьшить движение» всё в конечном состоянии, переходов нет (AC-G-7) */
@media (prefers-reduced-motion: reduce) {
  .b2-root *, .b2-root *::before, .b2-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Нур: рисунок и моргание (второй слой) ---------- */
.b2-nurpic { position: relative; display: block; flex: none; transform-origin: 50% 100%; }
.b2-nurpic img { display: block; width: 100%; height: 100%; }
.b2-nurpic__wink { position: absolute; inset: 0; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes b2-blink { 0%, 94%, 100% { opacity: 0; } 96%, 98% { opacity: 1; } }
  .b2-nurpic { animation: b2-breathe 3.6s ease-in-out infinite; }
  .b2-nurpic__wink { animation: b2-blink 4.2s infinite; }
  .b2-splash__stage .b2-nurpic { animation: b2-float 2.8s ease-in-out infinite; }
  .b2-play[data-hop="2"] .b2-nurpic { animation: b2-hop .8s 1.4s ease-in-out 2, b2-breathe 3.6s 3.2s ease-in-out infinite; }
}

/* Нур на экранах опросника и «маршрут готов»: 78×84, на ≥ 900 — 104×112, на низком экране — меньше (спецификация 03 §4.3) */
@media (min-width: 900px) { .b2-ob__nur .b2-nurpic { width: 104px !important; height: 112px !important; } }
@media (max-height: 640px) { .b2-ob__nur .b2-nurpic { width: 60px !important; height: 65px !important; } }

/* =====================================================================
   PR-4 (T-074, спецификация 03 §4.6, §4.6а, §4.9): тарифы, замки Pro, лимит пробника, профиль с уровнем доступа
   Макеты T-063 r3 (tariffs.html, profile.html). Правила те же: ≥ 14 px, касание ≥ 44 px, текст внутри элемента с data-role.
   ===================================================================== */

/* ---------- замки Pro и карточка лимита ---------- */
.b2-lockbtn { background: var(--b2-soft); gap: 10px; }
.b2-lockbtn .b2-chip { min-height: 30px; }
.b2-lockbody { align-items: center; }
.b2-lockin { display: grid; gap: 10px; padding: 12px; border-radius: 18px; border: 2px dashed var(--b2-node-off); background: var(--b2-soft); }
.b2-lockin__h { display: flex; align-items: center; gap: 10px; min-width: 0; }
.b2-lockin__h b { flex: 1; min-width: 0; font: 800 16px/1.2 var(--font); }
.b2-lockin__h .b2-chip { margin-left: auto; }
.b2-lockin__t { font: 600 15px/1.4 var(--font); color: var(--ink); }
.b2-procard, .b2-limit { display: grid; gap: 12px; }
.b2-procard h2, .b2-limit h2 { font-size: 19px; line-height: 1.2; }
.b2-limit .b2-nur { align-items: center; }
.b2-limit .b2-cap { margin-top: 4px; }
.b2-limit .b2-btn { width: auto; justify-self: start; }

/* ---------- ID ученика: подтверждение в шторке ---------- */
.b2-idok { display: grid; gap: 14px; }
.b2-idok__top { display: flex; align-items: center; gap: 12px; }

/* ---------- тарифы r3: «что получаешь» (T-096 PR-3, C; до того r2 «План дня» — T-078 PR-3, спецификация 03 §C.2, эскиз prototypes/T-096/c-tariffs.html) ----------
   Одна разметка на все ширины: раскладка только CSS-ом; ни одному элементу с data-fn не даётся display: none (паритет 375 ↔ 1280, AC-TAR-12).
   Две карточки тарифа равны по размеру и весу (AC-TAR-2, AC-C-2): обе рамка ink, обе кнопки одной формы, без «хита», предвыбора, таймеров. */
.b2-tr { max-width: 560px; margin: 0 auto; min-height: 100dvh; padding: calc(10px + env(safe-area-inset-top)) 16px 28px; display: grid; gap: 12px; align-content: start; --t2-m: #cfc8f7; --t2-m-d: #43358f; }
.b2-tr > * { min-width: 0; }
.b2-t2__top { display: grid; gap: 10px; }
.b2-tr__h { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.b2-root .b2-tr__h h1 { flex: 1; min-width: 0; font-size: 22px; line-height: 1.15; }
.b2-tr__back { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: grid; place-items: center; color: var(--ink); }
.b2-tr__back svg { width: 22px; height: 22px; }
.b2-tr__open { display: flex; justify-content: center; }
/* N-10 (QA T-078c): слово валюты («манат», «тенге») длиннее ISO-кода — «Месяц / Год −50 %» + кнопка страны шире окна 320–344 px (выступ 6–25 px). Строка переносится: кнопка страны — справа на втором ряду;
   с 345–361 px (по стране) всё в один ряд, как раньше. Минимум полосы 182 px — её нерастяжимая ширина (две подписи и чип −50 %) */
.b2-tr__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.b2-tr__seg { flex: 1 1 182px; min-width: 182px; margin-top: 0; }
.b2-tr__seg .b2-opt__card { gap: 6px; padding: 0 6px; }
.b2-tr__save { padding: 3px 7px; border-radius: 99px; background: var(--b2-mint-bg); color: var(--teal-deep); border: 1.5px solid var(--teal-deep); font: 800 14px/1.1 var(--font); white-space: nowrap; }
.b2-tr__hint { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 12px; }
.b2-tr__hint b { flex: 1; min-width: 0; font: 800 16px/1.2 var(--font); text-wrap: balance; }
.b2-tr__hint .b2-btn { flex: none; white-space: nowrap; }
.b2-tr__fine { display: grid; gap: 8px; margin-top: 2px; }
.b2-tr__err { scroll-margin-bottom: 24px; }   /* TN1: строка ошибки при прокрутке к ней не прижата к нижней кромке окна */
.b2-tr .b2-course { padding: 12px 14px; }
.b2-tr .b2-course__tx h2 { font: 800 17px/1.15 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.b2-tr .b2-course .b2-btn { min-height: 44px; }
.b2-tr__ctry { margin-top: 0; }

/* значок страны «[UZ]» и кнопка выбора страны: инициалы + слово валюты, голых ISO-кодов нет (neatness-audit §4) */
.b2-ini { display: grid; place-items: center; flex: none; min-width: 32px; height: 32px; padding: 0 4px; border-radius: 99px; background: var(--lamp); border: 2px solid var(--ink); font: 800 14px/1 var(--font); letter-spacing: .02em; color: var(--ink); }
.b2-ini svg { width: 20px; height: 20px; }
.b2-ini--globe { padding: 0; }
.b2-opt__in:checked + .b2-opt__card .b2-ini { background: var(--card); }
.b2-t2__cc { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 10px 0 6px; border-radius: 99px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font: 800 16px/1 var(--font); box-shadow: 0 3px 0 var(--ink); cursor: pointer; }
.b2-t2__cc:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.b2-t2__cc > svg { width: 18px; height: 18px; flex: none; }
.b2-t2__cc [data-role="btn"] { white-space: nowrap; }
@media (hover: hover) { .b2-t2__cc:hover { background: var(--lamp); } }

.b2-t2__stage { display: contents; }

/* заголовок-выгода и две равные карточки: «Бесплатный — что ты получаешь» / «Pro — всё бесплатное, а ещё» */
.b2-t3__lead { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.b2-t3__lead .b2-nurpic { flex: none; }
.b2-root .b2-t3__lead h2 { font-size: 19px; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.b2-t3__lead p { margin-top: 4px; font: 600 14px/1.35 var(--font); color: var(--ink-2); max-width: 62ch; text-wrap: balance; }
.b2-t3__plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.b2-t3__pl { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 14px 16px; border: 2px solid var(--ink); border-radius: 24px; background: var(--card); box-shadow: 0 4px 0 var(--ink); }
.b2-t3__ph { display: grid; gap: 2px; min-width: 0; }
.b2-root .b2-t3__ph h3 { font: 800 17px/1.2 var(--font); letter-spacing: 0; color: var(--ink-2); }
.b2-t3__price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.b2-t3__price b { font: 800 36px/1 var(--display); letter-spacing: -.04em; }
.b2-t3__price small, .b2-t3__sub { font: 700 14px/1.2 var(--font); color: var(--ink-2); letter-spacing: 0; }
.b2-t3__sub { display: none; min-height: 17px; }
.b2-t3__plans[data-year] .b2-t3__sub { display: block; }          /* «$5 в мес» только в режиме «Год»: у обеих карточек место одинаковое */
.b2-t3__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 34px; }
.b2-t3__meta .b2-chip { min-height: 30px; }
.b2-t3__loc { font: 800 15px/1.2 var(--font); color: var(--b2-amber); }
.b2-t3__loc--free { color: var(--muted); }
.b2-t3__get { margin: 2px 0 0; font: 800 14px/1.2 var(--font); color: var(--teal-deep); }
.b2-t3__rows { display: grid; gap: 2px; align-content: start; flex: 1; margin: 0; padding: 0; list-style: none; }
.b2-t3__row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 52px; padding: 5px 0; border-top: 1.5px dashed var(--b2-line); }
.b2-t3__row:first-child { border-top: 0; }
.b2-t3__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; border: 2px solid var(--ink); background: var(--b2-soft); }
.b2-t3__ic svg { width: 21px; height: 21px; }
.b2-t3__ic--l { background: var(--lamp); } .b2-t3__ic--s { background: #bfe0ff; } .b2-t3__ic--n { background: #bdeee6; } .b2-t3__ic--w { background: #ffc2b3; } .b2-t3__ic--m { background: #d9d4fa; }
.b2-t3__row b { display: block; font: 800 15px/1.2 var(--font); }
.b2-t3__row span[data-role="cap"] { display: block; margin-top: 1px; font: 600 14px/1.3 var(--font); color: var(--ink-2); }
.b2-t3__row .b2-chip { margin-top: 3px; min-height: 28px; font-size: 14px; }
.b2-t3__pl .b2-btn { margin-top: auto; }
.b2-t3__pl .b2-btn.b2-t3__done { opacity: 1; background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); box-shadow: 0 3px 0 var(--teal-deep); cursor: default; }
.b2-t3__pl .b2-btn.b2-t3__done:active { transform: none; box-shadow: 0 3px 0 var(--teal-deep); }
.b2-tr__fine .b2-fine > span, .b2-tr__err .b2-err > span { text-wrap: balance; }   /* TN3/TN9 (приёмка 03): висячее слово на второй строке */

/* ID и курс */
.b2-t2__bottom { display: grid; gap: 12px; align-content: start; }

/* шторка «Записали»: Нур, строки «значок + строка» (.b2-kv) */
.b2-t2__shn { display: flex; justify-content: center; margin-top: 2px; }

@media (min-width: 900px) {
  .b2-tr { max-width: 1100px; padding: 36px 36px 48px; gap: 20px; }
  .b2-t2__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .b2-tr__h { flex: 1; }
  .b2-root .b2-tr__h h1 { font-size: 30px; }
  .b2-tr__ctl { flex: none; }
  .b2-tr__seg { width: 300px; flex: none; }
  .b2-tr.b2-t3 { max-width: 1120px; padding: 20px 28px 28px; gap: 14px; }
  .b2-root .b2-t3__lead h2 { font-size: 26px; }
  .b2-t3__lead p { font-size: 15px; }
  .b2-t3__plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .b2-t3__pl { padding: 16px 18px 18px; gap: 10px; }
  .b2-t3__price b { font-size: 40px; }
  .b2-t3__row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-height: 54px; }
  .b2-t3__ic { width: 40px; height: 40px; border-radius: 13px; }
  .b2-t3__ic svg { width: 22px; height: 22px; }
  .b2-t3__row b { font-size: 16px; }
  .b2-t2__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .b2-tr .b2-course__tx h2 { font-size: 19px; }
  .b2-t3__pl .b2-btn { font-size: 17px; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .b2-tr .b2-course { grid-template-columns: auto minmax(0, 1fr) auto; }
  .b2-tr .b2-course .b2-btn { grid-column: auto; width: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  /* появление карточек 0,5 с; всё — один раз за сессию вкладки (.b2-play, PlayOnce), transform и opacity */
  .b2-play .b2-t3__lead, .b2-play .b2-t3__pl { animation: b2-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
  .b2-play .b2-t3__pl:nth-child(2) { animation-delay: .06s; }
  /* цена и местная сумма при смене периода или страны: проявление 0,2 с (ключ меняется — элемент перерисован) */
  .b2-t3__price b, .b2-t3__loc, .b2-t3__sub { animation: b2-fade .2s both; }
  .b2-t3__lead[data-asleep] .b2-nurpic { animation: none; }
}

/* ---------- профиль: «Кто я», лесенка, строки настроек ---------- */
.b2-prof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.b2-prof > * { min-width: 0; }
.b2-who { padding-bottom: 16px; }
.b2-who__top { display: flex; align-items: center; gap: 12px; }
.b2-ava { position: relative; width: 72px; height: 72px; flex: none; border-radius: 50%; background: var(--lamp); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.b2-ava .b2-tile__new { right: 2px; top: 2px; }
.b2-who__tx { min-width: 0; display: grid; gap: 8px; justify-items: start; }
.b2-root .b2-who__tx h2 { font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.b2-lvl { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); font: 800 15px/1 var(--font); background: var(--b2-soft); }
.b2-lvl svg { width: 20px; height: 20px; flex: none; }
.b2-lvl--pro { background: var(--lamp); }
.b2-lvl--school { background: var(--mint); }
.b2-lad { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; }
.b2-lad__st { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.b2-lad__st:not(:last-child)::after { content: ""; position: absolute; top: 20px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 4px; border-radius: 9px; background: var(--b2-edge); }
.b2-lad__st.is-on:not(:last-child)::after, .b2-lad__st.is-past:not(:last-child)::after { background: var(--ink); }
.b2-lad__cr { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--b2-node-off); background: var(--b2-soft); display: grid; place-items: center; color: var(--muted); }
.b2-lad__cr svg { width: 22px; height: 22px; }
.b2-lad__st.is-past .b2-lad__cr { border-color: var(--ink); color: var(--ink); background: var(--card); }
.b2-lad__st.is-on .b2-lad__cr { border-color: var(--ink); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.b2-lad__st--pro.is-on .b2-lad__cr { background: var(--lamp); }
.b2-lad__st--school.is-on .b2-lad__cr { background: var(--mint); }
.b2-lad__nm { font: 800 14px/1.15 var(--font); text-align: center; color: var(--ink-2); overflow-wrap: break-word; }
.b2-lad__st.is-on .b2-lad__nm { color: var(--ink); }
.b2-who__chips { margin-top: 12px; }
.b2-set { padding-top: 6px; padding-bottom: 6px; }
.b2-prows { display: grid; }
.b2-prow { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1.5px dashed var(--b2-line); }
.b2-prow:first-child { border-top: 0; }
.b2-prow > b { flex: 1; min-width: 0; font: 800 16px/1.2 var(--font); }
.b2-prow__v { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: 800 16px/1.1 var(--font); color: var(--ink); text-align: right; }
.b2-prow__v[data-role="num"] { font-family: var(--display); letter-spacing: -.02em; }
.b2-prow__code { font-family: var(--display); letter-spacing: .02em; font-size: 15px; overflow-wrap: anywhere; }
.b2-prow__btn { padding: 0 4px 0 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.b2-prow__btn::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.b2-prow__btn svg { width: 20px; height: 20px; color: var(--muted); }
@media (hover: hover) { .b2-prow:has(.b2-prow__btn):hover { background: var(--b2-soft); border-radius: 12px; } }
.b2-prow .b2-btn { width: auto; }
.b2-prow--wrap { flex-wrap: wrap; row-gap: 2px; }   /* T-100: строка Pro с датой и «Продлить» — на 360–390 px кнопка уходит на вторую строку, а не за край */
.b2-prow--wrap .b2-btn { margin-left: auto; }
@container b2w (min-width: 640px) {
  .b2-prof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* «Кто я» и «Мой маршрут» слева, настройки справа на обе строки (спецификация 03 §4.9: 640–899 два столбца, ≥ 900 — 1–6 и 7–12) */
  .b2-prof > .b2-who { grid-column: 1; grid-row: 1; }
  .b2-prof > .b2-route { grid-column: 1; grid-row: 2; }
  .b2-prof > .b2-set { grid-column: 2; grid-row: 1 / span 2; }
}
/* ---------- профиль: «Мой маршрут» (T-076: AC-PRF-3, AC-PRF-8) и подвал с оговоркой (AC-PRF-5) ---------- */
.b2-route { padding: 12px; }
.b2-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b2-trio .b2-rc { min-width: 0; padding: 10px; gap: 4px; align-items: flex-start; text-align: left; }
.b2-trio .b2-rc .b2-num { max-width: 100%; overflow-wrap: anywhere; }
.b2-trio .b2-rc .b2-num--word { font: 800 16px/1.2 var(--font); letter-spacing: 0; overflow-wrap: break-word; }   /* «Не задано» не должно рваться по буквам: цифровой (широкий) шрифт для слов не годится */
.b2-trio .b2-cap { overflow-wrap: anywhere; }
.b2-rc--btn { font: inherit; color: var(--ink); cursor: pointer; }
@media (hover: hover) { .b2-rc--btn:hover { background: var(--b2-soft); } }
.b2-route__st { display: flex; align-items: center; gap: 8px; font: 700 14px/1.3 var(--font); color: var(--teal-deep); }
.b2-route__st:not(:empty) { margin-top: 10px; }
.b2-route__st svg { width: 20px; height: 20px; flex: none; }
.b2-pfoot { margin: 14px 0 12px; }
@container b2w (max-width: 300px) { .b2-trio { gap: 6px; } .b2-trio .b2-rc { padding: 8px 7px; } }   /* 320: «задано» не помещалось и рвалось по буквам */
/* D4 (QA T-078e): подпись «дн · Весна 2027» / «дн · 25 февраля» (glueTail — вторая часть без переноса, ≈ 80 px) шире равной плитки на 320–352 px и выходила за рамку на 1,5–7,8 px.
   На 320–374 колонка «срок» шире соседних (1,23 : 1 : 1): 320 — 94 / 77 / 77 px; «380» (57 px) и «задано» в 77 px не рвутся, высота плиток прежняя */
@container b2w (max-width: 342px) { .b2-trio { grid-template-columns: minmax(0, 1.23fr) minmax(0, 1fr) minmax(0, 1fr); } }

/* =====================================================================
   «Путь» (T-078b, спецификация 03 §9, макет T-078-r1/path/p.css): сегменты «Прогресса» и карта маршрута — город-маршрут из шести вех,
   пяти этапов, двенадцати кварталов и 78 фонарей. Одна разметка на все ширины: контейнер < 900 — вертикальная улица слева (экран листается),
   ≥ 900 — пять колонок и горизонтальная улица, карта целиком. Движение (Нур, искры, рост полосы) — в конце файла, только при no-preference.
   ===================================================================== */
.b2-pseg > .b2-seg { margin-top: 0; }
@container b2w (min-width: 900px) { .b2-pseg > .b2-seg { max-width: 360px; } }
.b2-pth { display: grid; gap: 14px; align-content: start; }
.b2-pth > * { min-width: 0; }
/* карточки-заменители «Пути» (нет цели, город не посчитался): свой класс — не b2-pcard «Статистики», у которого в сетке .b2-cards есть grid-column/grid-row (D1, QA р1) */
.b2-pth__note { min-width: 0; }

/* знак состояния темы: форма и значок, не только цвет */
.b2-pmk { --s: 32px; position: relative; display: grid; place-items: center; flex: none; width: var(--s); height: var(--s); border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); color: var(--ink); }
.b2-pmk svg { width: 58%; height: 58%; stroke-width: 2.8; }
.b2-pmk.is-done { background: var(--lamp); }
.b2-pmk.is-work { background: #ffe7a1; }
.b2-pmk.is-weak { background: var(--coral); }
.b2-pmk.is-none { border: 2px dashed var(--b2-node-off); background: var(--paper); }
.b2-pmk.is-out { border: 2px dotted var(--b2-node-off); background: transparent; color: var(--ink-2); }

/* где я → цель */
.b2-pwhere { display: grid; gap: 10px; padding: 14px 16px; }
.b2-pwhere__g { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 12px; align-items: center; }
.b2-pwhere__l, .b2-pwhere__r { display: flex; flex-direction: column; min-width: 0; }
.b2-pwhere__r { align-items: flex-end; text-align: right; }
.b2-pwhere .b2-num { font-size: 34px; white-space: nowrap; }
.b2-pwhere .b2-num--zone { font-size: clamp(22px, 8cqw, 32px); }
.b2-pwhere .b2-cap { margin-top: 4px; color: var(--ink-2); }
/* «—», когда прогноза ещё нет: класс b2-num--mut (приглушённый, opacity .55) даёт 2,31 : 1 — здесь обычный цвет вторичного текста (B2, приёмка 03) */
.b2-pwhere .b2-num--mut { color: var(--ink-2); opacity: 1; }
.b2-pwhere__t { display: flex; align-items: center; min-height: 44px; }
.b2-prail { position: relative; width: 100%; height: 10px; border-radius: 99px; background: var(--b2-soft); border: 2px solid var(--b2-edge); }
.b2-prail > i { position: absolute; inset: 0; border-radius: 99px; background: var(--lamp-d); transform-origin: left center; }
.b2-prail > span { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--card); border: 2.5px solid var(--b2-node-off); }
.b2-prail > span.is-lit { background: var(--lamp); border-color: var(--ink); }
/* телефон: диапазон зоны («230–345») широкий — полоса уходит под числа на всю ширину, иначе ей остаётся ≈ 45 px и вехи слипаются */
@container b2w (max-width: 639px) {
  .b2-pwhere--zone .b2-pwhere__g { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .b2-pwhere--zone .b2-pwhere__t { grid-column: 1 / -1; grid-row: 2; }
  /* N2 (приёмка 03 PR-1b): «≈173 дня до ориентира» стоит и в чипе сессии шапки («Весна 2027 · ≈173 дня»), на телефоне три чипа шли тремя рядами — остаются «ещё N баллов» и дата в один ряд (на ПК все три в одной строке) */
  .b2-pwhere .b2-pwhere__days { display: none; }
}
/* D2 (QA T-078e): «ещё N баллов» и дата — в один ряд на любом телефоне. Значки чипов («→⚑», календарь) на телефоне убраны — слова у чипов есть (на 375 с значками 150 + 8 + 163 = 321 > 311 px, без них 273);
   на самых узких окнах (контейнер ≤ 339 px: 320–367) ещё и отступы чипов 6 px, зазор 6 и поля карточки 10 px: на 320 — 264 px на «ещё 280 баллов» + дату + зазор */
@container b2w (max-width: 639px) { .b2-pwhere .b2-chips .b2-chip svg { display: none; } }
@container b2w (max-width: 339px) {
  .b2-prg .b2-pwhere { padding: 12px 10px; }   /* `.b2-prg .b2-card` (14 px по бокам) специфичнее одиночного `.b2-pwhere` */
  .b2-pwhere .b2-chips { gap: 6px; }
  .b2-pwhere .b2-chips .b2-chip { padding: 0 6px; }
}
@container b2w (min-width: 900px) {
  .b2-pwhere { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 24px; padding: 18px 24px; }
  .b2-pwhere .b2-num { font-size: 40px; }
  .b2-pwhere .b2-num--zone { font-size: clamp(26px, 3.4cqw, 38px); }
  .b2-pwhere .b2-chips { justify-content: flex-end; }
}

/* легенда состояний */
.b2-plg { display: flex; flex-wrap: wrap; gap: 6px; }
.b2-plg__i { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px 0 5px; border-radius: 99px; border: 1.5px solid var(--ink); background: var(--card); font: 800 14px/1 var(--font); white-space: nowrap; }
.b2-plg__i .b2-pmk { --s: 24px; border-width: 2px; }
.b2-plg__i .b2-pmk.is-none, .b2-plg__i .b2-pmk.is-out { border-width: 2px; }

/* карта: телефон — вертикальная улица слева, веха перед каждым этапом, в конце цель */
.b2-cards > [id] { scroll-margin-top: 24px; }   /* якорь «Статистики» (#forecast, #topics): карточка не прилипает к краю окна, входная анимация сдвигает её на 16 px */
.b2-pm { position: relative; }
.b2-pm__stages { list-style: none; margin: 0; padding: 0 0 0 52px; display: grid; }
.b2-pm__stage { position: relative; min-width: 0; padding-bottom: 6px; }
.b2-pm__stage:last-child { padding-bottom: 0; }
.b2-pm__stage::before, .b2-pm__stage::after { content: ""; position: absolute; left: -34px; top: 28px; width: 8px; height: 100%; border-radius: 99px; }
.b2-pm__stage::before { background: var(--b2-soft); box-shadow: inset 0 0 0 1.5px var(--b2-edge); }
.b2-pm__stage::after { background: var(--lamp-d); transform-origin: top center; transform: scaleY(var(--f, 0)); }
.b2-pm__stage:last-child::before, .b2-pm__stage:last-child::after { height: calc(100% - 56px); }
.b2-pm__gate { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; }
.b2-pm__gn { position: absolute; left: -52px; top: 6px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--card); color: var(--ink-2); }
.b2-pm__gn svg { width: 24px; height: 24px; }
.b2-pm__gate.is-lit .b2-pm__gn, .b2-pm__gate.is-goal .b2-pm__gn { background: var(--lamp); color: var(--ink); }
.b2-pm__gv { font-size: 24px; letter-spacing: -.03em; }
.b2-pm__sh { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.b2-pm__sh h2 { font-size: 17px; line-height: 1.15; }
.b2-pm__qs { display: grid; gap: 10px; padding-bottom: 6px; }
.b2-pm__stage:last-child .b2-pm__qs { padding-bottom: 0; }

/* квартал (блок мастерства) */
.b2-pq { --c: var(--b2-lg); --cd: var(--b2-lg-d); min-width: 0; padding: 8px 10px 12px; border-radius: 20px; background: var(--card); border: 2px solid var(--b2-edge); box-shadow: 0 3px 0 var(--b2-edge); }
.b2-pq--al { --c: var(--b2-al); --cd: var(--b2-al-d); }
.b2-pq--ge { --c: var(--b2-ge); --cd: var(--b2-ge-d); }
.b2-pq.is-cur { border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.b2-pq.is-out { background: var(--paper); box-shadow: none; }
.b2-pq__hh { margin: 0; }
.b2-root .b2-pq__h { font-family: var(--font); }   /* .b2-root button { font-family: inherit } брал display-шрифт заголовка h3 вокруг кнопки */
.b2-pq__h { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 20px; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font: 800 16px/1.2 var(--font); text-align: left; cursor: pointer; }
.b2-pq__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--c); color: #fff; border: 2.5px solid var(--cd); }
.b2-pq__ic svg { width: 19px; height: 19px; }
.b2-pq__t { min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.b2-pq__chev { display: grid; place-items: center; color: var(--muted); }
.b2-pq__chev svg { width: 20px; height: 20px; }
.b2-pq__ls { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); margin-top: 2px; }
.b2-plt { position: relative; display: grid; place-items: center; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.b2-plt:focus-visible { outline: none; }
.b2-plt:focus-visible .b2-pmk { outline: 3px solid var(--ink); outline-offset: 3px; }
.b2-plt.is-done .b2-pmk { box-shadow: 0 0 0 3px rgba(255, 215, 106, .5); }
.b2-plt.is-cur .b2-pmk { --s: 38px; border-width: 3px; box-shadow: 0 0 0 4px rgba(255, 184, 63, .55); }
.b2-plt.is-next .b2-pmk { outline: 2.5px dashed var(--ink); outline-offset: 2px; }
.b2-plt.is-next:focus-visible .b2-pmk { outline: 3px solid var(--ink); }
@media (hover: hover) {
  .b2-pq__h:hover { background: rgba(236, 230, 212, .35); }
  .b2-plt:hover .b2-pmk { transform: scale(1.08); }
}

/* плашка «текущая тема» */
.b2-pnow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 16px; background: #fff3c4; border: 2px solid var(--ink); }
.b2-pnow .b2-pmk { --s: 44px; border-width: 3px; }
.b2-pnow__t { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.b2-pnow__t b { font: 800 16px/1.2 var(--font); overflow-wrap: break-word; hyphens: manual; }
.b2-pnow .b2-btn { grid-column: 1 / -1; }

/* Нур: стоит на фонаре текущей темы (или у финиша); рисунок в разметке — базовое состояние конечное */
.b2-pnur { position: absolute; left: 50%; top: 50%; z-index: 5; width: 36px; height: 39px; margin: -24px 0 0 -18px; pointer-events: none; }
.b2-pnur__in { display: block; width: 100%; height: 100%; }
.b2-pm__gn .b2-pnur { margin-top: -26px; }
/* на время шага квартал с Нуром поднимается над соседними: Нур идёт от прежней темы поверх чужих карточек */
.b2-pm.is-walking .b2-pq.is-cur { position: relative; z-index: 4; }

/* «Где я» — только на телефоне; sticky, а не fixed: контейнер экрана (container-type) делает fixed-потомков своими */
.b2-pm__fab { position: sticky; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 7; display: flex; justify-content: flex-end; height: 0; pointer-events: none; }
.b2-pm__here { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 99px; border: 2px solid var(--ink); background: var(--night); color: #fff; font: 800 15px/1 var(--font); box-shadow: 0 3px 0 rgba(11, 23, 48, .5); cursor: pointer; pointer-events: auto; transform: translateY(-100%); }
.b2-pm__here svg { width: 20px; height: 20px; color: var(--lamp); }
.b2-pm__here:active { transform: translateY(calc(-100% + 3px)); box-shadow: none; }

/* шторки */
.b2-kv__pm { --s: 40px; }
.b2-tl__pm { --s: 32px; }
.b2-tl__pm + .b2-tl__t { margin-left: -2px; }

/* телефон и планшет: длинная метка («вне плана») и узкий контейнер (≤ 349 — окно ≤ 381, измерено: на 375 «Рациональные» не помещается рядом со счётчиком) — счётчик встаёт под название, иначе слово рвётся по буквам */
@container b2w (max-width: 899px) {
  .b2-pq.is-out .b2-pq__h { grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .b2-pq.is-out .b2-pq__h .b2-chip { grid-column: 2; grid-row: 2; justify-self: start; }
}
@container b2w (max-width: 349px) {
  .b2-pq__h { grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .b2-pq__h .b2-chip { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* планшет (контейнер 640–899): улица остаётся слева, кварталы — в два столбца */
@container b2w (min-width: 640px) and (max-width: 899px) {
  .b2-pm__qs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* N1 (приёмка 03 PR-1b): квартал Нура с плашкой «Тренировать» выше соседа на ≈ 280 px — под коротким кварталом слева оставалась дыра. Квартал Нура — на всю ширину ряда,
     внутри фонари слева, плашка справа; короткий квартал, оставшийся без пары перед ним, тоже на всю ширину (иначе рядом с ним пусто) */
  .b2-pq.is-cur { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  /* R-1 (review 02): `:has()` — отдельным правилом, не в списке селекторов: браузер без `:has()` (Firefox 110–120, ESR 115) отбрасывает правило со списком целиком,
     и квартал Нура остался бы в половине ряда с делением внутри — хуже прежней дыры; так выпадает только эта часть (одинокий квартал перед Нуром остаётся в половине ряда) */
  .b2-pq:nth-child(odd):has(+ .b2-pq.is-cur) { grid-column: 1 / -1; }
  .b2-pq.is-cur > .b2-pq__hh { grid-column: 1 / -1; }
  .b2-pq.is-cur > .b2-pq__ls { grid-column: 1; }
  .b2-pq.is-cur > .b2-pnow { grid-column: 2; margin-top: 2px; }
}

/* ПК (контейнер ≥ 900): карта целиком — пять колонок этапов, улица горизонтально сверху, цель в правом углу последней колонки */
@container b2w (min-width: 900px) {
  .b2-pm__stages { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 12px; align-items: start; padding: 6px 0 0; }
  .b2-pm__stage { padding-bottom: 0; }
  .b2-pm__stage::before, .b2-pm__stage::after { left: 22px; top: 20px; width: calc(100% + 12px); height: 8px; }
  .b2-pm__stage::after { transform-origin: left center; transform: scaleX(var(--f, 0)); }
  .b2-pm__stage:last-child::before, .b2-pm__stage:last-child::after { width: calc(100% - 44px); height: 8px; }
  .b2-pm__gate { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding-bottom: 10px; }
  .b2-pm__gn { position: relative; left: auto; top: auto; }
  .b2-pm__gate.is-goal { position: absolute; top: 0; right: 0; align-items: flex-end; }
  /* состояние цели на ПК — для чтения с экрана (вид — узел и число); иначе чипы двух вех последней колонки не помещаются рядом */
  .b2-pm__gate.is-goal .b2-chip { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .b2-pm__sh { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; margin-bottom: 8px; }
  .b2-pm__qs { padding-bottom: 0; }
  .b2-pq { padding: 8px 10px 10px; }
  .b2-pq__h { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 8px; min-height: 44px; }
  .b2-pq__ic { width: 30px; height: 30px; border-radius: 10px; }
  .b2-pq__ic svg { width: 17px; height: 17px; }
  .b2-pq__h .b2-chip { grid-column: 1 / -1; justify-self: start; }
  .b2-pq__chev { display: none; }
  .b2-pq__t { font-size: 15px; }
  .b2-pnow { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  .b2-pnow > .b2-pmk { display: none; }
  .b2-pm__fab { display: none; }
}
/* самый узкий ПК (контейнер 900–927, окно 1251–1278): «Рациональные» 15 px не помещается в колонку названия < 114 px (рядом со значком блока) — 14 px; замер по окнам 1251…1280 */
@container b2w (min-width: 900px) and (max-width: 927px) { .b2-pq__t { font-size: 14px; } }

@media (prefers-reduced-motion: no-preference) {
  /* знак состояния при «зажёгся»: те же 0,6 с и искры, что у веток дороги главной */
  .b2-pmk.is-ignite, .b2-pm__gn.is-ignite { animation: b2-ignite .6s both; }
  .b2-chip.is-tick { animation: b2-pop .45s both; }
  .b2-plt .b2-pmk { transition: transform .12s ease; }
  /* Нур на карте дышит (одна бесконечная анимация экрана «Путь»); ночью, когда он спит, — нет */
  .b2-pm .b2-nurpic { animation: b2-breathe 3.6s ease-in-out infinite; }
  .b2-pm[data-asleep] .b2-nurpic { animation: none; }
  /* первый показ в сессии вкладки: полоса «где я» и улица вырастают от старта */
  .b2-play .b2-prail > i { animation: b2-scalex .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
  .b2-play .b2-pm__stage::after { animation: b2-scaley .8s .2s cubic-bezier(.2, .8, .2, 1) both; }
  @container b2w (min-width: 900px) { .b2-play .b2-pm__stage::after { animation-name: b2-scalex; } }
}

/* =====================================================================================================================
   T-087a «Аккуратность 2» (PN1…PN5, HM1): дельта 03 `docs/design/prototypes/T-087/css/t087.css`, наложена на b2.css в конце файла — так, как её мерили в макете.
   Спецификация и критерии — `tasks/handoffs/T-087a-ux.md`. Блок PN1 — выше по тексту ниже этого заголовка (первым).
   ===================================================================================================================== */

/* ---------- T-087a · PN1: шапка стартового теста — одна липкая полоса [часть][время] … [N/15][⋯] (спецификация 03 T-087a-ux.md §1; макет docs/design/prototypes/T-087) ----------
   Было: полоса + ряд кнопок (лист / завершить / выйти в 2–3 ряда) + резерв 42 px под чипы сбоя = 156 px. Стало: 58 px. */
.b2-pl__strip .b2-chip--soft { margin-left: auto; }
.b2-pl__strip .b2-pl__chip-lg, .b2-pl__strip .b2-pl__chip-math { flex: 0 1 auto; min-width: 0; overflow: hidden; }   /* страховка: чип части сжимается (с многоточием), время и «⋯» — никогда */
.b2-pl__strip .b2-pl__chip-lg > span, .b2-pl__strip .b2-pl__chip-math > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b2-pl__more { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--b2-line); border-radius: 50%; background: var(--b2-soft); color: var(--ink); cursor: pointer; }
.b2-pl__more svg { width: 24px; height: 24px; }
.b2-pl__more[aria-expanded="true"] { background: var(--lamp); border-color: var(--ink); }
@media (hover: hover) { .b2-pl__more:hover { border-color: var(--ink); } }
.b2-pl__stat .b2-chip { white-space: normal; text-align: center; }   /* сбой сохранения / «нет связи» — в строке под полосой только пока он есть */
/* «Решать на листе» — в шапке карточки задачи, справа от метки раздела; на ≤ 520 px — короткая подпись (Dual) */
.b2-pl__qh { flex-wrap: nowrap; margin-bottom: 10px; }
.b2-pl__qh .qtag { min-width: 0; }
.b2-pl__qs { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 12px; border: 2px solid var(--ink); border-radius: 15px; background: var(--mint); color: var(--ink); font: 800 15px/1 var(--font); box-shadow: 0 3px 0 var(--ink); cursor: pointer; white-space: nowrap; }
.b2-pl__qs:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) { .b2-pl__qs:hover { background: #8eeadd; } }
.b2-pl__qs svg { flex: none; }
/* шторка меню — две кнопки по 52 px во всю ширину (значок слева) */
.b2-sheet .b2-sheet__act .b2-btn { justify-content: flex-start; padding: 0 18px; min-height: 52px; gap: 12px; }
/* Узкие телефоны: в полосе четыре элемента — на 320 / 360 лишнее — значки внутри чипов, не слова. Смысл несут слова и цвет; предупреждение «< 5 минут» значок сохраняет (статус не только цветом). */
@media (max-width: 399px) {
  .b2-pl__strip .b2-pl__chip-lg > svg, .b2-pl__strip .b2-pl__chip-math > svg { display: none; }
}
@media (max-width: 359px) {
  .b2-pl__strip { gap: 6px; }
  .b2-pl__strip .b2-chip { padding: 0 9px; }
  .b2-pl__strip .b2-timer { padding: 0 9px; }
}
@media (max-width: 349px) {
  .b2-pl__strip .b2-timer:not([data-low="true"]) > svg { display: none; }
}
/* 320–339: счётчик «N/15» — текст без плашки, иначе в худшем состоянии (часть 2 · < 5 мин · 15/15) полоса шире окна на 14 px */
@media (max-width: 339px) {
  .b2-pl__strip .b2-chip--soft { padding: 0 2px; background: none; border-color: transparent; }
}
/* C1 (приёмка 03, раунд 1, T-087a-ux.md): запас полосы мерили на одной строке таймера «03:57», а цифры таймера разной ширины (до +6,8 px) — в последние 5 минут части при задаче 10–15/15 чип «Часть 2» сжимался
   до «Част…» (320: 9,2 px, 340 / 360: 3,2). Три блока по порядку выше (после ≤ 359 / 349 / 339): зазор 6 на ≤ 369, счётчик уже на ≤ 359, на ≤ 339 зазор 5, таймер уже, счётчик — текст без рамки и полей. ≥ 370 не меняется. */
@media (max-width: 369px) { .b2-pl__strip { gap: 6px; } }
@media (max-width: 359px) { .b2-pl__strip .b2-chip--soft { padding: 0 6px; } }
@media (max-width: 339px) { .b2-pl__strip { gap: 5px; } .b2-pl__strip .b2-timer { padding: 0 8px; } .b2-pl__strip .b2-chip--soft { padding: 0; border: 0; } }

/* ---------- HM1 · план на главной: название темы без «…» (значок раздела — в строку вида) ----------
   Ширина < 900 (в широкой раскладке значок раздела с названием стоит справа и места хватает). `.b2-tk__tx` становится `display: contents`,
   название тянется под значок раздела (+40 px), а значок 22 px встаёт в ряд вида справа. Высота строки не растёт (min-height 50 держит обе раскладки). */
@container b2w (max-width: 899px) {
  .b2-tk { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; }
  .b2-tk__nb { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .b2-tk__tx { display: contents; }
  .b2-tk__tx > b { grid-column: 2 / -1; grid-row: 1; align-self: end; }
  .b2-tk__kind { grid-column: 2; grid-row: 2; align-self: start; min-width: 0; }
  .b2-tk > .b2-sbg { grid-column: 3; grid-row: 2; align-self: center; }
  .b2-tk .b2-sbg__i { width: 22px; height: 22px; border-width: 2px; }
  .b2-tk .b2-sbg__i svg { width: 12px; height: 12px; }
  /* −0,01 em: у самых длинных названий банка («Равнобедренный треугольник», 26 знаков) в строке «сейчас» на 360 не хватало 3 px */
  .b2-tk__tx > b { letter-spacing: -.01em; }
}
/* контейнер ≤ 319 (окно ≤ 351 при полях 16): вместо «…» — две строки; строка растёт на ≈ 19 px только у длинных названий (бюджет кнопки задан для 375×812 и 360×740, они сюда не попадают) */
@container b2w (max-width: 319px) {
  .b2-tk__tx > b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: clip; }
}

/* ---------- PN3 · «Маршрут готов»: чипы в ≤ 2 ряда, подпись плитки без висящей «·» ---------- */
/* JSX: чип «не официальный балл» — без значка «i» (как D2 T-078e); подпись «уровень · математика» режется на <span> до и после « · » */
.b2-zn .b2-chips { gap: 6px; }
@container (max-width: 279px) { .b2-zn .b2-chips .b2-chip > svg { display: none; } }
.b2-res { container-type: inline-size; }
/* ≥ 370 px (окно ≥ 402): «уровень · математика» одной строкой; уже — две строки без висящей «·»: «уровень» / «математика» */
@container (max-width: 369px) {
  .b2-res .b2-cap__a { display: block; }
  .b2-res .b2-cap__s { display: none; }
}

/* ---------- PN4 · «Коллекция» на ПК: колонка ≈ 560 px по центру, плитки 2×2, Нур с подсказкой ---------- */
.b2-coll__nur { display: none; }
@container b2w (min-width: 640px) {
  .b2-coll { max-width: 560px; margin-inline: auto; padding-top: 8px; }
  .b2-coll .b2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .b2-coll .b2-tile { min-height: 156px; padding: 16px; border-radius: 26px; }
  .b2-coll .b2-tile__ico, .b2-coll .b2-tile__ico svg { width: 64px; height: 64px; }
  .b2-coll .b2-num--s { font-size: 30px; }
  .b2-coll .b2-tile__n { font-size: 16px; }
  .b2-coll__nur { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 8px; }
}

/* ---------- PN5 · нижняя панель на 320: «Прогресс» и «Коллекция» не слипаются ---------- */
@media (max-width: 349px) {
  .tabbar.tabbar--b2 { grid-auto-columns: auto; justify-content: space-between; gap: 0; padding-left: max(4px, env(safe-area-inset-left)); padding-right: max(4px, env(safe-area-inset-right)); }
  .tabbar.tabbar--b2 a { min-width: 44px; padding-left: 2px; padding-right: 2px; }
}

/* ---------- PN2 · низ профиля: карточки по стилю b2 (всё внутри .b2-lowc (у 03 в макете — `.b2-set`, но такой класс уже есть: карточка «Настройки» в ProfileTop); при b2_ui = off обёртки нет — слепок не меняется) ---------- */
.b2-lowc { gap: 14px; align-items: start; }   /* B1 (приёмка 03): карточки сетки не растягиваются по высоте соседа — на ≥ 768 в «Напоминаниях» и «ID ученика» была пустота 30–40 % */
.b2-lowc .card { background: var(--card); border: 2px solid var(--b2-edge); border-radius: 24px; box-shadow: 0 4px 0 var(--b2-edge), 0 18px 22px -18px rgba(11, 23, 48, .5); padding: 14px; }
.b2-lowc .card h2 { font: 800 17px/1.2 var(--display); letter-spacing: -.01em; }
.b2-lowc .card-head { margin-bottom: 10px; }
.b2-lowc .card .muted { font: 600 14px/1.4 var(--font); color: var(--ink-2); }
.b2-lowc .form { gap: 12px; }
.b2-lowc .field > label, .b2-lowc .field-label { font: 800 14px/1.2 var(--font); color: var(--ink); }
.b2-lowc .field small { font: 600 14px/1.4 var(--font); color: var(--ink-2); }
.b2-lowc .input { min-height: 50px; padding: 0 14px; border: 2px solid var(--b2-field); border-radius: 15px; font: 700 16px/1.2 var(--font); }
.b2-lowc .btn { min-height: 50px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 15px; font: 800 16px/1.1 var(--font); box-shadow: 0 3px 0 var(--ink); color: var(--ink); background: var(--card); }
.b2-lowc .btn:hover { transform: none; box-shadow: 0 3px 0 var(--ink); }
.b2-lowc .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.b2-lowc .btn-dark { background: var(--ink); color: #fff; box-shadow: 0 4px 0 var(--night); }
.b2-lowc .btn-dark:hover { box-shadow: 0 4px 0 var(--night); }
.b2-lowc .btn-dark:active { box-shadow: 0 0 0 var(--night); }
.b2-lowc .btn-primary { background: var(--lamp); color: var(--ink); }
.b2-lowc .btn-sm { min-height: 44px; padding: 0 14px; font-size: 15px; border-width: 2px; }
.b2-lowc .btn-danger { background: var(--card); border-color: var(--ink); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }   /* «Выйти» — обычная вторая кнопка, не красная */
.b2-lowc .linklike { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 15px; background: var(--card); color: var(--ink); font: 800 15px/1.1 var(--font); box-shadow: 0 3px 0 var(--ink); }
.b2-lowc .linklike:hover { text-decoration: none; }
.b2-lowc .mini-list { gap: 8px; }
.b2-lowc .mini-list li { min-height: 52px; padding: 4px 12px; border-radius: 14px; background: var(--paper); font: 700 15px/1.25 var(--font); }
.b2-lowc .pill { padding: 6px 10px; border: 1.5px solid var(--b2-line); background: var(--b2-soft); color: var(--ink-2); font: 800 14px/1.1 var(--font); }
.b2-lowc .pill.on { background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); }
.b2-lowc .code { font: 700 14px/1.2 var(--mono); }
.b2-lowc .err, .b2-lowc .okmsg { font: 800 14px/1.3 var(--font); }
.b2-lowc .nt-row i { font-size: 14px; line-height: 1.35; }   /* D2 (QA 05): подсказки «за час до урока…» при подключённом Telegram были 12,5 px (`.nt-row i` из app/globals.css; в замечании 05 назван `.check i` — в разметке `NotifyCard` строка `label.nt-row`) */

/* ---------- N-4 · финиш «Пути»: плашка над картой (заголовок, слабые темы при N ≥ 1, «дальше»); к сетке `.b2-pth` не привязана — переносится разметкой ---------- */
.b2-pfin { display: grid; gap: 6px; }
.b2-pfin__t { font: 800 18px/1.2 var(--display); letter-spacing: -.01em; }
.b2-pfin p { margin: 0; font: 700 15px/1.35 var(--font); color: var(--ink-2); text-wrap: balance; }

/* =====================================================================================================================
   T-096 · PR-1 · «Задача в один экран» и общие правки когорты (замечания владельца 30.10: A, D, G, H). Дельты 03 — `docs/design/prototypes/T-096/css/t096-{a,d,h}.css`
   (мерено на настоящем DOM 77b0c5b), перенесены с заменами: `:has(.qfig)` → класс `qcard--fig` в разметке (:has не работает в Safari ≤ 15.3), `.b2fit` / `.b2d` → `.app--b2`
   (Shell ставит класс только когорте b2 и вместе с ним подключает этот файл — `components/Shell.tsx`, механизм M1 в `docs/engineering/frontend.md`), шрифт не мельче 14 px (правило файла).
   Правила для общих экранов (их видит и `off`) — ТОЛЬКО с префиксом `.app--b2`; `tests/b2-css-scope.test.ts` проверяет, что ни один селектор файла не обходится без `b2`.
   ===================================================================================================================== */

/* ---------- H · кнопка «Войти через Google»: официальный цветной «G» на белом (GoogleMark), подпись — «Войти через Google» ---------- */
.b2-btn--google { background: #fff; }
.b2-btn--google .b2-g { width: 20px; height: 20px; flex: none; }
.b2-btn--google:hover:not(:disabled):not([aria-disabled="true"]) { background: #f3f6ff; }
/* Подпись в одну строку не помещается рядом с виджетом Telegram (его ширина 258 px фиксирована: колонка Google при панели 412–440 — 144–172 px; «nowrap» растягивал форму на 470 px и выносил поля за панель):
   в двух колонках она переносится на две строки (высота кнопки 52 прежняя), в одну колонку на телефоне — одной строкой. Замер: RU/TR/EN × 641–1440 в handoff. */
.b2-soc .b2-btn--google { font-size: 14.5px; gap: 8px; padding: 0 10px; line-height: 1.12; text-align: left; }

/* ---------- A · стартовый тест в одном окне (PlacementFlow): страница = окно, прокручивается только условие ---------- */
.b2-pl ~ .b2-sr { position: fixed; top: 0; left: 0; }   /* живая область диктора лежала абсолютно под страницей и давала +1 px прокрутки */
.b2-pl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; column-gap: 12px; height: 100dvh; padding: 0 12px calc(8px + env(safe-area-inset-bottom)); }
@supports not (height: 1dvh) { .b2-pl { height: 100vh; } }
.b2-pl__strip { grid-area: 1 / 1 / 2 / 3; margin: 0 -12px; padding-inline: 12px; }
.b2-pl > .b2-offline { grid-area: 2 / 1 / 3 / 3; }
.b2-pl__stat { grid-area: 3 / 1 / 4 / 3; }
.b2-pl__hint { grid-area: 4 / 1 / 5 / 3; margin-top: 6px; line-height: 1.2; }   /* над карточкой, а не под кнопками: пропадает после ответа — нижняя строка и варианты не двигаются */
.b2-pl__task { grid-area: 5 / 1 / 6 / 3; min-height: 0; display: flex; margin-top: 8px; }
.b2-pl__nav { grid-area: 6 / 1 / 7 / 3; margin-top: 8px; }
.b2-pl__nav .b2-btn, .b2-pl__nav .b2-cta { min-height: 48px; }
.b2-pl__map { display: none; }   /* телефон: карта задач — в шторке по чипу «N/15»; ПК — рядом с кнопками */
.b2-pl__pos { display: none; }
.b2-pl__posbtn { min-height: 44px; cursor: pointer; color: var(--ink); }
.b2-pl__posbtn[aria-expanded="true"] { background: var(--lamp); }
.b2-pl__mapsheet ol { list-style: none; margin: 0; padding: 4px 0 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

.b2-pl__task .qcard { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 6px; border-radius: 20px; box-shadow: 0 4px 0 var(--ink); overflow: auto; overscroll-behavior: contain; }
.b2-pl__task .qhead { flex: none; margin: 0; flex-wrap: nowrap; }
.b2-pl__task .qtext { flex: 0 1 auto; min-height: 3.4em; overflow-y: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.45; }
.b2-pl__task .qtext:focus-visible { outline-offset: -3px; }   /* область прокручивается (tabindex 0): кольцо внутрь — снаружи его срезала бы карточка */
.b2-pl__task .qfig { flex: 1 1 0; min-height: 110px; position: relative; margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.b2-pl__task .qfig.qfig-draw, .b2-pl__task .qfig.qfig-draw.ink-on { margin: 0; }
.b2-pl__task .qfig-tools { position: static; order: -1; align-self: flex-end; flex: none; margin: 0 0 4px; box-shadow: none; }   /* «Рисовать» / панель пера — всегда в своём ряду над чертежом (приёмка 03 P1-1: в углу рамки кнопка закрывала детали чертежа у 28 из 75 задач на 1440×750) */
.b2-pl__task .qfig-view { position: relative; flex: 1 1 0; min-height: 0; border-radius: 8px; }
.b2-pl__task .qfig-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.b2-pl__task .qfig-art { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.b2-pl__task .qfig-art svg { width: auto; height: auto; max-width: min(100%, 560px); max-height: 100%; margin: 0; }   /* вписан по высоте и ширине, пропорции viewBox те же; пометки — по viewBox (Figure.tsx) */
.b2-pl__task .qfig-zoom { left: auto; right: 8px; bottom: 8px; }
.b2-pl__task .qopts { flex: none; margin: 0; gap: 6px; }
/* варианты: ≤ 5 знаков — пять плиток в ряд (optsLayout: tiles), 6…12 — две колонки на телефоне и столбик на ПК, длиннее — столбик */
.b2-pl__task .qopts.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.b2-pl__task .qopts.tiles .qopt { min-height: 52px; }
.b2-pl__task .qopts.tiles .qo { font-size: 16px; }
.b2-pl__task .qopts.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.b2-pl__task .qopt { min-height: 44px; padding-block: 5px; }
/* плитки: 4–5 знаков не упираются в края (на 360–375 px плитка ≈ 55 px, внутри ≈ 47); 14 — нижний предел шрифта слоя */
.b2-pl__task .qopts.tiles[data-len="4"] .qo { font: 800 15px/1 var(--font); letter-spacing: 0; }
.b2-pl__task .qopts.tiles[data-len="5"] .qo { font: 800 14px/1 var(--font); letter-spacing: 0; }
/* длинное условие на телефоне — не больше ~28 % высоты окна, дальше прокрутка внутри условия (чертёж не мельчает из-за текста) */
@media (max-width: 899px) { .b2-pl__task .qtext { max-height: clamp(88px, 28dvh, 210px); } .b2-pl__posbtn { display: inline-flex; } }
@media (max-width: 520px) { .b2-pl__task .qtag { display: none; } .b2-pl__task .qhead { justify-content: flex-end; } }
@media (min-width: 900px) {
  .b2-pl { max-width: 1080px; padding-inline: 24px; }
  .b2-pl__strip { margin-inline: -24px; padding-inline: 24px; }
  .b2-pl__posbtn { display: none; }
  .b2-pl__pos { display: inline-flex; }
  .b2-pl__task { margin-top: 10px; }
  /* без чертежа — одна колонка 720; с чертежом (qcard--fig) — «условие + варианты | чертёж» */
  .b2-pl__task .qcard { padding: 16px; border-radius: 24px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 18px; row-gap: 10px; max-width: 720px; width: 100%; margin-inline: auto; }
  .b2-pl__task .qcard--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: none; }
  .b2-pl__task .qhead { grid-column: 1; grid-row: 1; }
  .b2-pl__task .qtext { grid-column: 1; grid-row: 2; font-size: 17px; }
  .b2-pl__task .qfig { grid-column: 2; grid-row: 1 / span 3; }
  .b2-pl__task .qopts { grid-column: 1; grid-row: 3; }
  .b2-pl__task .qopts.cols2 { grid-template-columns: minmax(0, 1fr); }
  .b2-pl__task .qopt { min-height: 48px; }
  .b2-pl__task .qopts.tiles[data-len] .qo { font-size: 16px; }
  .b2-pl__nav { grid-area: 6 / 1 / 7 / 2; width: 440px; grid-template-columns: 1fr 1fr 1.3fr; }
  .b2-pl__map { display: block; grid-area: 6 / 2 / 7 / 3; align-self: center; justify-self: end; min-width: 0; max-width: 100%; margin: 8px 0 0; }
  .b2-pl__map ol { margin: 0; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }   /* 15 точек по 30 px в один ряд — от окна ≈ 1000; уже (900–999) — в два ряда, а не под кнопками (замер 06: при nowrap на 900 карта заходила на «Дальше» на 94 px) */
  .b2-dot { width: 30px; height: 30px; font-size: 14px; }
  .b2-pl__hint { position: fixed; top: 19px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 6; }   /* подсказка — в середине полосы, она на ПК свободна; в разметке стоит рядом с кнопками */
}

/* ---------- D · лобби выживания: рейтинг недели на первом экране (SurvivalGame, пропс b2 → `.sv-lobby`; порядок в разметке: герой → рейтинг → правила, без `order`) ---------- */
.app--b2 .sv-lobby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; max-width: 1172px; }
.app--b2 .sv-lobby > .sv-week { margin: 0; padding: 16px 18px; border-radius: 18px; }
.app--b2 .sv-lobby > .sv-cards { margin: 0; gap: 8px; }
.app--b2 .sv-lobby .sv-hero { padding: 18px 20px; border-radius: 22px; gap: 8px 12px; }
.app--b2 .sv-lobby .sv-hero h1 { font-size: clamp(32px, 9vw, 44px); margin: 6px 0 8px; }
.app--b2 .sv-lobby .sv-hero p { margin: 0 0 12px; font-size: 15px; line-height: 1.4; max-width: 40ch; }
.app--b2 .sv-lobby .sv-hero p.sv-off { margin: 10px 0 0; font-size: 14px; }
.app--b2 .sv-lobby .sv-hero p.sv-pool { margin: 10px 0 0; font-size: 14px; }
.app--b2 .sv-lobby .sv-hero .btn { min-height: 46px; }
.app--b2 .sv-lobby .sv-rec { margin-top: 14px; font-size: 14px; }
.app--b2 .sv-lobby .sv-rec b { margin-top: 6px; font-size: 20px; }
.app--b2 .sv-lobby .sv-art { display: none; }
.app--b2 .sv-lobby .sv-cards .sv-card { padding: 12px 14px; border-radius: 16px; }   /* только карточки правил: таблица недели тоже `.sv-card`, но у неё свои размеры */
.app--b2 .sv-lobby .sv-cards .sv-card-top { min-height: 30px; }
.app--b2 .sv-lobby .sv-cards .sv-card-top img { height: 30px; }
.app--b2 .sv-lobby .sv-cards .sv-card h2 { font-size: 15px; margin: 8px 0 4px; }
.app--b2 .sv-lobby .sv-cards .sv-card p { font-size: 14px; line-height: 1.4; }
.app--b2 .sv-lobby .sv-week-head { margin-bottom: 8px; }
.app--b2 .sv-lobby .sv-week-head h2 { margin: 0; font-size: 17px; }
.app--b2 .sv-lobby .sv-rows li { min-height: 40px; }
.app--b2 .sv-lobby .sv-week-note { margin: 10px 0 0 !important; font-size: 14px !important; }
@media (max-width: 640px) { .app--b2 .sv-lobby .sv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .app--b2 .sv-lobby .sv-cards .sv-card { padding: 12px 8px; } }
@media (min-width: 641px) and (max-width: 899px) { .app--b2 .sv-lobby .sv-art { display: block; height: 180px; transform: scale(.6); transform-origin: 50% 100%; } .app--b2 .sv-lobby .sv-hero { grid-template-columns: minmax(0, 1fr) 200px; } }
@media (min-width: 900px) {
  .app--b2 .sv-lobby { grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; }
  .app--b2 .sv-lobby > .sv-hero { grid-column: 1; grid-row: 1; }
  .app--b2 .sv-lobby > .sv-cards { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app--b2 .sv-lobby > .sv-week { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 20px; align-self: start; }
  .app--b2 .sv-lobby .sv-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); padding: 22px 26px; }
  .app--b2 .sv-lobby .sv-hero h1 { font-size: clamp(38px, 4.2vw, 56px); margin: 8px 0 10px; }
  .app--b2 .sv-lobby .sv-art { display: block; height: 220px; transform: scale(.72); transform-origin: 50% 100%; margin-top: -30px; }
}
/* окно 900–1279 (меню 268 + колонка ≈ 650–1000): рейтинг уже, баннер без иллюстрации, правила столбцом */
@media (min-width: 900px) and (max-width: 1279px) {
  .app--b2 .sv-lobby { grid-template-columns: minmax(0, 1fr) 320px; }
  .app--b2 .sv-lobby .sv-hero { grid-template-columns: minmax(0, 1fr); }
  .app--b2 .sv-lobby .sv-art { display: none; }
  .app--b2 .sv-lobby > .sv-cards { grid-template-columns: minmax(0, 1fr); }
  .app--b2 .sv-lobby .sv-cards .sv-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .app--b2 .sv-lobby .sv-cards .sv-card h2 { margin: 0 0 2px; }
  .app--b2 .sv-lobby .sv-cards .sv-card-top { grid-row: span 2; }
}
/* приёмка 03 P1-2: на 901–1279 колонка героя = ширина окна − 670 (меню 268 + рейтинг 320 + зазоры), а `clamp(38px, 4.2vw, 56px)` растёт быстрее — «Выживание» обрезалось краем карточки (на 900 меню ещё нет, колонка широкая) */
@media (min-width: 901px) and (max-width: 1279px) {
  .app--b2 .sv-lobby .sv-hero h1 { font-size: clamp(22px, calc((100vw - 730px) / 7.8), 56px); }
}

/* =====================================================================================================================
   T-096 · PR-2 · A · «Задача в одном окне» на остальных экранах задач когорты: смена / охота / стражи (`TaskRun`), пробник (`ExamFlow`), тренажёр и ошибки
   (`SeriesFlow` → `QuestionCard`), выживание (серия `SurvivalGame`), «Решать на листе» (`SheetOverlay`). Дельта 03 `docs/design/prototypes/T-096/css/t096-a.css` (A.2–A.7), перенесена с заменами:
   `.b2fit` → `.app--b2` + классы разметки (`tr--fit`, `exam-run--fit`, `main--fit`, `tfit`, `tfit--fig`, `tfit--after`; их ставят компоненты только при пропсе `b2`),
   `:has(...)` → классы (в Safari ≤ 15.3 `:has` не работает), шрифты 12,5/13 px → 14 px (правило файла). Все правила — под `.app--b2`: вне когорты файла нет, а Shell класс не ставит.
   ===================================================================================================================== */

/* высота нижней панели вкладок (пробник на телефоне оставляет под неё место): 76 px; ≤ 640 px после компактной шкалы — 63 px */
.app--b2 { --b2-tab: 76px; }
@media (max-width: 640px) { .app--b2 { --b2-tab: 63px; } }

/* ---------- общие правила карточки задачи `.tfit` (смена/охота/стражи, пробник, тренажёр и ошибки, выживание): условие — единственная область прокрутки, чертёж вписан по высоте и ширине ---------- */
.app--b2 .tfit .qtext { flex: 0 1 auto; min-height: 3em; max-height: clamp(88px, 28dvh, 220px); overflow-y: auto; overscroll-behavior: contain; font-size: 17px; line-height: 1.45; }
.app--b2 .tfit .qtext:focus-visible { outline-offset: -3px; }   /* область прокручивается (tabindex 0): кольцо внутрь — снаружи его срезала бы карточка */
.app--b2 .tfit .qfig { position: relative; flex: 1 1 130px; min-height: 130px;   /* basis = min: на низком окне сначала сжимается условие (до трёх строк, дальше прокрутка в нём), чертёж не мельче 130 px, а не тает до 50 */
   margin: 0; padding: 6px 8px 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; }
.app--b2 .tfit .qfig.qfig-draw, .app--b2 .tfit .qfig.qfig-draw.ink-on { margin: 0; }
.app--b2 .tfit .qfig-tools { position: static; order: -1; align-self: flex-end; flex: none; margin: 0 0 4px; box-shadow: none; }   /* «Рисовать» / панель пера — в своём ряду над чертежом (приёмка 03 P1-1) */
.app--b2 .tfit .qfig-view { position: relative; flex: 1 1 0; min-height: 0; border-radius: 8px; }
.app--b2 .tfit .qfig-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.app--b2 .tfit .qfig-art { display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; }
.app--b2 .tfit .qfig-art svg { width: auto; height: auto; max-width: min(100%, 560px); max-height: 100%; margin: 0; }   /* пропорции viewBox те же — пометки пера на месте (Figure.geom) */
.app--b2 .tfit .qfig-zoom { left: auto; right: 8px; bottom: 8px; }
@media (max-width: 640px) { .app--b2 .tfit .qfig { flex: 1 1 210px; min-height: 210px; } }   /* приёмка 03 P1-1: на телефоне чертёж пробника и выживания схлопывался до 68 px; ниже карточка прокручивается, ответы и кнопка липкие */
.app--b2 .tfit .qopts { flex: none; margin: 0; gap: 6px; }
/* на высоте, где всё же не хватает места (карточка прокручивается), ответы и «Ответить / Дальше» прижаты к низу карточки, а под ними прокручиваются условие и чертёж; при полном размещении прижимать нечего (sticky не действует). 52 px = высота липкой строки кнопки (46 + поля 6 + 12 − нижний вынос 12) */
.app--b2 .tfit .qopts { position: sticky; bottom: 52px; z-index: 2; background: var(--card); box-shadow: 0 -6px 6px -6px rgba(26, 36, 64, .22); }
.app--b2 .tr--fit .tr-card .qopts { bottom: 0; }   /* смена: кнопка — в полосе страницы, не в карточке */
.app--b2 .tfit .qopts.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app--b2 .tfit .qopts.tiles .qopt { min-height: 52px; }
.app--b2 .tfit .qopts.tiles .qo { font-size: 16px; }
.app--b2 .tfit .qopts.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app--b2 .tfit .qopt { min-height: 44px; padding-block: 5px; }
.app--b2 .tfit .qopts.tiles[data-len="4"] .qo { font: 800 15px/1 var(--font); letter-spacing: 0; }   /* 4–5 знаков не упираются в края плитки (на 360–375 px плитка ≈ 55 px) */
.app--b2 .tfit .qopts.tiles[data-len="5"] .qo { font: 800 14px/1 var(--font); letter-spacing: 0; }
/* после ответа: чертёж обычного размера, разбор ниже, прокрутка — внутри карточки */
.app--b2 .tfit--after .qfig { flex: none; height: clamp(160px, 34dvh, 300px); }
.app--b2 .tfit--after .qtext { max-height: none; }

/* ---------- A.2 · смена / охота / стражи (`TaskRun`, `.tr--fit`): сцена = окно, прокручивается карточка ---------- */
.app--b2 .tr--fit { overflow: hidden; }
.app--b2 .tr--fit .tr-top { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; }
.app--b2 .tr--fit .tr-in { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; max-width: 1080px; padding: 8px 16px 10px; }
.app--b2 .tr--fit .tr-meta { flex: none; margin-bottom: 8px; }
.app--b2 .tr--fit .tr-foe { flex: none; margin-bottom: 8px; }
.app--b2 .tr--fit .tr-card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow-y: auto; overscroll-behavior: contain; border-radius: 20px; box-shadow: 0 4px 0 var(--ink); }
.app--b2 .tr--fit .tr-card .tr-links { flex: none; margin: 0; }
.app--b2 .tr--fit .tr-hint, .app--b2 .tr--fit .tr-verdict { flex: none; margin-top: 0; }
.app--b2 .tr--fit .qerr { flex: none; margin: 0; }
.app--b2 .tr--fit .tr-side { flex: none; margin-top: 6px; }
.app--b2 .tr--fit .tr-bar { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.app--b2 .tr--fit .tr-go { min-height: 48px; }
@media (min-width: 900px) {
  /* ≥ 900: «условие + варианты + разбор | чертёж»; без чертежа — одна колонка 720. Ряды без отступов (пустой ряд высоты не даёт), отступы — полями; строка `1fr` растёт вместе с разбором — карточка прокручивается, чертёж остаётся на месте */
  .app--b2 .tr--fit .tr-card { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; grid-template-rows: auto auto auto 1fr auto; align-content: start; padding: 16px; gap: 0; }
  .app--b2 .tr--fit .tr-card.tfit--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 18px; justify-content: stretch; }
  .app--b2 .tr--fit .tr-card .tr-links { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
  .app--b2 .tr--fit .tr-card .qtext { grid-column: 1; grid-row: 2; max-height: none; font-size: 18px; }
  .app--b2 .tr--fit .tr-card .qopts { grid-column: 1; grid-row: 3; margin-top: 10px; }
  .app--b2 .tr--fit .tr-card .tr-hint, .app--b2 .tr--fit .tr-card .tr-verdict { grid-column: 1; grid-row: 4; align-self: start; margin-top: 10px; }
  .app--b2 .tr--fit .tr-card .qfig { grid-column: 2; grid-row: 1 / span 4; height: auto; }
  .app--b2 .tr--fit .tr-card.tfit--after .qfig { align-self: start; position: sticky; top: 0; height: clamp(220px, 62dvh, 520px); }
  .app--b2 .tr--fit .tr-card .qerr { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; }
  .app--b2 .tr--fit .tr-card .qopt { min-height: 48px; }
}

/* ---------- A.3 / A.4 · пробник и тренажёр / ошибки: страница = окно (`main--fit` ставит Shell по пропсу страницы), заголовок страницы остаётся для чтения с экрана, но не занимает места ---------- */
.app--b2 .main.main--fit { height: 100dvh; display: flex; flex-direction: column; padding: 10px 16px; }
@supports not (height: 1dvh) { .app--b2 .main.main--fit { height: 100vh; } }
.app--b2 .main--fit > .top, .app--b2 .main--fit > .tiles-strip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app--b2 .main--fit > .top .top-actions { display: none; }   /* review 02 C1: ссылка «Все темы» оставалась невидимой остановкой Tab (AA 2.4.7); та же ссылка есть в шапке серии («← Все темы») */
.app--b2 .main--fit > .mt { display: contents; }   /* «Ошибки»: серия лежит в обёртке .mt */
/* A.3 · пробник (`ExamFlow`, `.exam-run--fit`): строка таймера, карточка, карта задач компактным рядом */
.app--b2 .exam-run--fit { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.app--b2 .exam-run--fit .exam-bar { position: static; flex: none; margin: 0; padding: 6px 10px; gap: 8px 10px; border-radius: 14px; box-shadow: 0 2px 0 var(--ink); }
.app--b2 .exam-run--fit .clock { min-width: 96px; padding: 5px 10px; font-size: 20px; border-radius: 11px; }
.app--b2 .exam-run--fit .exam-bar .btn { min-height: 40px; }
.app--b2 .exam-run--fit > .qcard { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; box-shadow: 0 4px 0 var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.app--b2 .exam-run--fit .qcard > .qtag { flex: none; align-self: flex-start; margin: 0; }
.app--b2 .exam-run--fit .qact { flex: none; margin: 0; gap: 8px; position: sticky; bottom: -12px; padding: 6px 0 12px; background: var(--card); z-index: 2; }   /* остаётся у нижнего края, если карточка прокручивается */
.app--b2 .exam-run--fit .qhint { display: none; }
.app--b2 .exam-run--fit .qact .btn { min-height: 46px; }
.app--b2 .exam-run--fit > .card.mt { flex: none; margin: 0; padding: 8px 12px; border-radius: 14px; }
.app--b2 .exam-run--fit > .card.mt .card-head { display: none; }
.app--b2 .exam-run--fit .map { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 5px; }
.app--b2 .exam-run--fit .mapb { height: 30px; border-radius: 9px; font-size: 14px; }
/* A.4 · тренажёр и ошибки (`SeriesFlow` → `QuestionCard.tfit`) */
.app--b2 .main--fit > .series-head { flex: none; margin: 0 0 8px; }
.app--b2 .main--fit > .qcard.tfit, .app--b2 .main--fit > .mt > .qcard.tfit { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 20px; box-shadow: 0 4px 0 var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.app--b2 .qcard.tfit > .qtag { flex: none; align-self: flex-start; margin: 0; }
.app--b2 .qcard.tfit .qact { flex: none; margin: 0; gap: 8px; position: sticky; bottom: -12px; padding: 6px 0 12px; background: var(--card); z-index: 2; }   /* «Ответить» / «Дальше» остаются у нижнего края, пока прокручивается разбор */
.app--b2 .qcard.tfit .qhint { display: none; }
.app--b2 .qcard.tfit .qact .btn { min-height: 46px; }
.app--b2 .qcard.tfit .qverdict, .app--b2 .qcard.tfit .qexp, .app--b2 .qcard.tfit .q-light-note, .app--b2 .qcard.tfit .qshadow { margin-top: 8px; }
@media (min-width: 900px) {
  /* ≥ 900: «условие + варианты | чертёж»; «Ответить» — нижней строкой на всю ширину карточки */
  .app--b2 .exam-run--fit > .qcard { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; grid-template-rows: auto auto auto 1fr auto; align-content: start; padding: 16px; gap: 0; }
  .app--b2 .exam-run--fit > .qcard.tfit--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 18px; justify-content: stretch; }
  .app--b2 .exam-run--fit .qcard > .qtag { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
  .app--b2 .exam-run--fit .qcard .qtext { grid-column: 1; grid-row: 2; max-height: none; font-size: 18px; }
  .app--b2 .exam-run--fit .qcard .qopts { grid-column: 1; grid-row: 3; margin-top: 10px; }
  .app--b2 .exam-run--fit .qcard .qfig { grid-column: 2; grid-row: 1 / span 4; height: auto; }
  .app--b2 .exam-run--fit .qcard .qact { grid-column: 1 / -1; grid-row: 5; justify-content: flex-end; margin-top: 10px; position: static; padding: 0; }
  .app--b2 .exam-run--fit .qcard .qopt { min-height: 48px; }
  .app--b2 .main--fit > .qcard.tfit, .app--b2 .main--fit > .mt > .qcard.tfit { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; grid-template-rows: auto auto auto 1fr auto; align-content: start; padding: 16px; gap: 0; }
  .app--b2 .main--fit > .qcard.tfit.tfit--fig, .app--b2 .main--fit > .mt > .qcard.tfit.tfit--fig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 18px; justify-content: stretch; }
  .app--b2 .qcard.tfit > .qtag { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
  .app--b2 .qcard.tfit .qtext { grid-column: 1; grid-row: 2; max-height: none; font-size: 18px; }
  .app--b2 .qcard.tfit .qopts { grid-column: 1; grid-row: 3; margin-top: 10px; }
  .app--b2 .qcard.tfit > div:not([class]) { grid-column: 1; grid-row: 4; min-width: 0; }   /* вердикт, разбор и «Дальше» (обёртка без класса) */
  .app--b2 .qcard.tfit .qfig { grid-column: 2; grid-row: 1 / span 4; height: auto; }
  .app--b2 .qcard.tfit--after .qfig { align-self: start; position: sticky; top: 0; height: clamp(220px, 62dvh, 520px); }
  .app--b2 .qcard.tfit > .qact { grid-column: 1 / -1; grid-row: 5; justify-content: flex-end; margin-top: 10px; position: static; padding: 0; }
  .app--b2 .qcard.tfit > .qerr { grid-column: 1 / -1; grid-row: 5; }
  .app--b2 .qcard.tfit .qopt { min-height: 48px; }
}
@media (max-width: 899px) {
  .app--b2 .main.main--fit { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }   /* тренажёр: нижняя панель на время серии скрыта (html.task-on) */
  .app--b2 .main.main--fit.main--tab { padding-bottom: calc(var(--b2-tab, 76px) + 8px + env(safe-area-inset-bottom)); }   /* пробник: над нижней панелью вкладок (ширина < 900) */
  .app--b2 .exam-run--fit .exam-bar { flex-wrap: wrap; padding: 6px 8px; gap: 6px 8px; }
  .app--b2 .exam-run--fit .exam-bar > .st + .st { display: none; }   /* «Отвечено N» — состояние есть на карте задач */
  .app--b2 .exam-run--fit .exam-bar .bar-act { flex-wrap: nowrap; gap: 6px; }
  .app--b2 .exam-run--fit .exam-bar .bar-act .btn { padding-inline: 10px; font-size: 14px; }
  .app--b2 .exam-run--fit .exam-bar .sheet-new { display: none; }
  .app--b2 .exam-run--fit > .card.mt { padding: 6px 8px; }
  .app--b2 .exam-run--fit .map { display: flex; overflow-x: auto; gap: 5px; padding: 3px; scrollbar-width: none; }   /* карта — одна строка с прокруткой, а не три ряда */
  .app--b2 .exam-run--fit .mapb { flex: 0 0 40px; }
}

/* ---------- A.5 · «Решать на листе» (`SheetOverlay` в смене, пробнике, тренажёре, выживании): варианты ответа липнут к низу тела карточки, «Назад / Дальше» — в подвале ---------- */
.app--b2 .scr-body { display: flex; flex-direction: column; padding: 10px 14px 0; }
.app--b2 .scr-body .qtext { flex: none; }
.app--b2 .scr-body .qfig { flex: none; margin: 8px 0 0; padding: 6px 8px 8px; position: relative; }
.app--b2 .scr-body .qfig.qfig-draw, .app--b2 .scr-body .qfig.qfig-draw.ink-on { margin: 8px 0 0; }
.app--b2 .scr-body .qfig-tools { position: static; align-self: flex-end; flex: none; margin: 0 0 4px; box-shadow: none; }
.app--b2 .scr-body .qfig-zoom { left: auto; right: 8px; bottom: 8px; }
.app--b2 .scr-body .qopts { position: sticky; bottom: 64px; z-index: 3; flex: none; margin: 8px 0 0; padding: 8px 0 10px; background: var(--card); box-shadow: 0 -8px 8px -8px rgba(26, 36, 64, .18); grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.app--b2 .scr-body .qopts.tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app--b2 .scr-body .qopts.tiles .qopt { min-height: 48px; padding: 6px 4px; }
.app--b2 .scr-body .qopts.tiles .qo { font-size: 16px; }
.app--b2 .scr-body .qopts.tiles[data-len="4"] .qo { font: 800 15px/1 var(--font); letter-spacing: 0; }
.app--b2 .scr-body .qopts.tiles[data-len="5"] .qo { font: 800 14px/1 var(--font); letter-spacing: 0; }
.app--b2 .scr-foot { padding: 6px 12px 8px; }
@media (max-width: 640px) {
  .app--b2 .scr-card { max-height: min(54dvh, calc(100% - 12px)); }
  .app--b2 .scr-body { padding: 8px 10px 0; }
  .app--b2 .scr-body .qfig svg { max-width: min(100%, 240px); }
}

/* ---------- A.6 · выживание, серия (`SurvivalGame`, `.sv-task.tfit`): шапка и «путь в темноте» уже, карточка задачи делит оставшуюся высоту; Нур и тень по бокам остаются (декор) ---------- */
.app--b2 .sv--fit { overflow: hidden; }
.app--b2 .sv--fit .sv-top { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 0; gap: 10px; }
.app--b2 .sv--fit .sv-stage { flex: 1 1 0; min-height: 0; padding: 8px 24px 6px; align-items: stretch; grid-template-columns: minmax(120px, 200px) minmax(0, 720px) minmax(120px, 240px); }
.app--b2 .sv--fit .sv-cast { align-self: center; }
.app--b2 .sv-task.tfit { display: flex; flex-direction: column; min-height: 0; padding: 12px 16px 14px; border-radius: 20px; overflow-y: auto; overscroll-behavior: contain; }
.app--b2 .sv-task.tfit .sv-task-head { flex: none; margin-bottom: 8px; }
.app--b2 .sv-task.tfit .qfig { margin: 8px 0 0; }
.app--b2 .sv-task.tfit .qfig.qfig-draw, .app--b2 .sv-task.tfit .qfig.qfig-draw.ink-on { margin: 8px 0 0; }
.app--b2 .sv-task.tfit .qopts { margin: 8px 0 0; }
.app--b2 .sv-task.tfit .sv-spare, .app--b2 .sv-task.tfit .sv-links { flex: none; }
.app--b2 .sv-task.tfit .qact { flex: none; margin-top: 8px; position: sticky; bottom: -14px; padding: 6px 0 14px; background: var(--card); z-index: 2; }   /* «Ответить» всегда в окне, даже когда карточка прокручивается */
.app--b2 .sv-task.tfit .qhint { display: none; }
.app--b2 .sv-task.tfit .qact .btn { min-height: 46px; }
.app--b2 .sv-task.tfit--after .qfig { height: clamp(140px, 28dvh, 260px); }
.app--b2 .sv--fit .sv-path { padding: 0 24px 8px; gap: 4px; }
@media (max-width: 900px) { .app--b2 .sv--fit .sv-stage { padding: 6px 12px 4px; } .app--b2 .sv--fit .sv-path { padding: 0 12px 6px; } }
/* невысокий телефон (≤ 860 px по высоте; в survival.css то же сжатие только до 780): шапка, сцена, Nur и тень меньше — задаче достаётся высота */
@media (max-width: 900px) and (max-height: 860px) {
  .app--b2 .sv--fit .sv-top { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 0; }
  .app--b2 .sv--fit .sv-bulbs img { height: 30px; }
  .app--b2 .sv--fit .sv-streak b { font-size: 30px; }
  .app--b2 .sv--fit .sv-time { font-size: 24px; min-width: 92px; padding: 5px 8px; }
  .app--b2 .sv--fit .sv-stage { gap: 8px; padding-top: 6px; }
  .app--b2 .sv--fit .sv-cast { grid-template-columns: 54px minmax(0, 1fr) 66px; min-height: 62px; }
  .app--b2 .sv--fit .sv-nur img { width: 54px; }
  .app--b2 .sv--fit .sv-say { font-size: 16px; padding: 6px 10px; }
  .app--b2 .sv--fit .sv-foe img { max-width: 66px; }
  .app--b2 .sv--fit .sv-mvoice { display: none; }   /* реплика тени есть в подписи над ней и в итоге серии (как на 360×740 в survival.css) */
  .app--b2 .sv-task.tfit { padding: 14px 14px 16px; }
}
/* ≥ 900 и высота ≥ 800: ответы средней длины (6…12 знаков) в левой колонке карточки с чертежом — столбиком по 48 px (спецификация 03 §A.2); ниже — остаются в две колонки: пять строк по 48 px не помещаются в окно 650–700 */
@media (min-width: 900px) and (min-height: 800px) {
  .app--b2 .tfit--fig .qopts.cols2 { grid-template-columns: minmax(0, 1fr); }
}
/* подсказка «Решай прямо на экране» (первое открытие) всплывала поверх чертежа и условия при идущем таймере — как на стартовом тесте (ux C3), в карточках слоя её нет; метка «новое» на кнопке остаётся */
.app--b2 .exam-run--fit .sheet-intro, .app--b2 .main--fit .series-head .sheet-intro { display: none; }

/* лист: кнопка «Ответить / Дальше» (смена, тренажёр, выживание) — липкая полоса под липкими вариантами (высота полосы 64 px); подсказка про клавиши на листе не нужна */
.app--b2 .scr-body .qact { position: sticky; bottom: 0; z-index: 4; margin: 0; padding: 8px 0 10px; min-height: 64px; background: var(--card); }
.app--b2 .scr-body .qact .qhint { display: none; }
.app--b2 .scr-body .qact .btn { min-height: 46px; }
.app--b2 .scr-body .qact.end { justify-content: flex-end; }

/* ---------- выживание (серия): на ПК карточка с чертежом — две колонки (условие и ответы | чертёж), как у остальных экранов задач ---------- */
@media (min-width: 1100px) {
  .app--b2 .sv-task.tfit--fig { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto auto auto auto 1fr auto; column-gap: 16px; align-content: start; }
  .app--b2 .sv-task.tfit--fig > .sv-task-head { grid-column: 1 / -1; grid-row: 1; }
  .app--b2 .sv-task.tfit--fig > .sv-links { grid-column: 1 / -1; grid-row: 2; margin: 0 0 8px; }
  .app--b2 .sv-task.tfit--fig > .qtext { grid-column: 1; grid-row: 3; max-height: none; }
  .app--b2 .sv-task.tfit--fig > .sv-spare { grid-column: 1; grid-row: 4; margin-top: 8px; }
  .app--b2 .sv-task.tfit--fig > .qopts { grid-column: 1; grid-row: 5; }
  .app--b2 .sv-task.tfit--fig > div:not([class]) { grid-column: 1; grid-row: 6; min-width: 0; }   /* вердикт, разбор, «Следующая задача» */
  .app--b2 .sv-task.tfit--fig > .qfig { grid-column: 2; grid-row: 3 / span 4; margin: 8px 0 0; height: auto; }
  .app--b2 .sv-task.tfit--fig.tfit--after > .qfig { align-self: start; position: sticky; top: 0; height: clamp(220px, 50dvh, 420px); }
  .app--b2 .sv-task.tfit--fig > .qact { grid-column: 1 / -1; grid-row: 7; justify-content: flex-end; position: static; padding: 0; margin-top: 8px; }
  .app--b2 .sv-task.tfit--fig > .qerr { grid-column: 1 / -1; grid-row: 7; }
  .app--b2 .sv-task.tfit--fig .qopts.cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .app--b2 .sv--fit .sv-task-head { flex-wrap: nowrap; }
  .app--b2 .sv--fit .sv-task-head .tp { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app--b2 .sv--fit .sv-task-head .no { display: none; }   /* номер задачи есть в шапке («Серия N»); освобождает строку для «Решить на листе» */
}
/* выживание на ПК без чертежа: карточка по высоте содержимого и по центру сцены, а не пустым полотном на всю высоту */
@media (min-width: 901px) {
  .app--b2 .sv--fit .sv-task.tfit:not(.tfit--fig) { align-self: center; max-height: 100%; }
}
/* T-096 · B + I · компактная шкала Bootcamp 2.0 — дельта 03 для 06 (PROPOSED). Подключается ПОСЛЕ public/b2.css.
   Три слоя: (1) ПК — только мышь: min-width 1024 и pointer: fine (цели 32–40 px, тело 14–16, заголовки ≤ 30); (2) телефон ≤ 640 — касание 44 px остаётся, уходят «лишние» запасы;
   (3) входной экран ≥ 900 — левая колонка группой по центру, без space-between. Каждый блок помечен пунктом таблицы handoff §B.3.
   Слепок b2_ui=off: b2.css в off не подключается; правила для общих экранов (меню Shell, смена, пробники) — под классом .app--b2 (его ставит Shell когорте). */

/* ========== B-1 · ПК (мышь): базовые компоненты слоя B2 ========== */
@media (min-width: 1024px) and (pointer: fine) {
  .b2-cta { min-height: 48px; padding: 0 16px; border-radius: 14px; font-size: 16px; box-shadow: 0 3px 0 var(--night); }
  .b2-cta svg { width: 20px; height: 20px; }
  .b2-btn { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 15px; box-shadow: 0 2px 0 var(--ink); }
  .b2-btn--sm { min-height: 36px; font-size: 14px; }
  .b2-go { min-height: 36px; padding: 0 14px; border-radius: 11px; font-size: 14px; box-shadow: 0 2px 0 var(--ink); }
  .b2-chip { min-height: 28px; padding: 0 10px; }
  .b2-chip svg { width: 16px; height: 16px; }
  .b2-card { border-radius: 20px; padding: 14px 16px; }
  .b2-num { font-size: 36px; }
  .b2-root .b2-q { font-size: 24px; margin-top: 12px; }
}

/* ========== B-2 · ПК: боковое меню, вариант A (T-105, спецификация 03; общий Shell; под .app--b2 — слепок off не меняется) ==========
   Логотип 44, строка 38, Manrope без mono, «Режимы» строками, «Коллекция» одним пунктом, «Моё» без подписи. Панель 268 не меняется. */
@media (min-width: 901px) {
  .app--b2 .side { gap: 2px; padding: 12px 12px 10px; }
  .app--b2 .side .brand { padding: 0 4px 8px; }
  .app--b2 .side .brand img { height: 44px; }
  .app--b2 .nav { gap: 2px; }
  .app--b2 .nav a { min-height: 38px; padding: 0 10px; gap: 12px; border-radius: 12px; font: 600 15px/1.25 var(--font); color: #e3e9f3; }
  .app--b2 .nav a.on { color: var(--lamp); font-weight: 700; }
  .app--b2 .nav a .ico { width: 28px; height: 28px; }
  .app--b2 .nav-lab { font: 700 12px/16px var(--font); letter-spacing: .08em; color: #8d9bb8; padding: 10px 10px 3px; }
  .app--b2 .side > .nav:first-of-type > .nav-lab { display: none; }
  .app--b2 .nav a .cnt { font: 700 13px/1 var(--font); font-variant-numeric: tabular-nums; color: #a9b6cf; }
  .app--b2 .nav a .cnt.pill { padding: 5px 9px; color: #1a1405; }
  .app--b2 .nav a .cnt.hot { color: #1a1405; }
  /* режимы: четыре строки в мягкой группе вместо плиток 2×2 */
  .app--b2 .side-modes { grid-template-columns: 1fr; gap: 2px; padding: 4px; border-radius: 16px; background: rgba(185,205,235,.06); }
  .app--b2 .side-mode { flex-direction: row; align-items: center; gap: 12px; min-height: 38px; padding: 0 6px; border: 0; border-radius: 12px; background: none; color: #e3e9f3; }
  .app--b2 .side-mode:hover { transform: none; background: rgba(185,205,235,.09); }
  .app--b2 .side-mode .ico { width: 28px; height: 28px; }
  .app--b2 .side-mode b { font: 600 15px/1.25 var(--font); flex: 1 1 auto; }
  .app--b2 .side-mode i { font: 700 13px/1 var(--font); letter-spacing: 0; color: #a9b6cf; white-space: nowrap; margin-left: auto; }
  .app--b2 .side-mode i:empty { display: none; }
  .app--b2 .side-mode.sm-lock i { padding: 4px 9px; border-radius: 999px; border: 1.5px solid rgba(255,215,106,.6); color: var(--lamp); }
  .app--b2 .side-mode.on { border: 0; padding: 0 6px; background: rgba(255,215,106,.14); box-shadow: none; color: var(--lamp); font-weight: 700; }
  .app--b2 .side-mode.on b { font-weight: 700; }
  /* «Моё» — без подписи: тонкая черта вместо неё */
  .app--b2 .side > .nav:last-of-type > .nav-lab { display: none; }
  .app--b2 .side > .nav:last-of-type { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(185,205,235,.1); }
  /* тихая ссылка на сайт школы под основными пунктами */
  .app--b2 .nav a[target] { min-height: 32px; margin-top: 8px; font: 600 13px/1.2 var(--font); color: #9fb0cd; gap: 6px; }
  .app--b2 .nav a[target] .ico { display: none; }
  .app--b2 .nav a[target] .ext { color: #9fb0cd; }
  /* блок имени */
  .app--b2 .me { gap: 2px; padding: 8px 12px 2px; border-radius: 16px; background: rgba(185,205,235,.07); }
  .app--b2 .ava { width: 40px; height: 40px; }
  .app--b2 .ava img { top: -17px; width: 70px; }
  .app--b2 .me-top { gap: 10px; }
  .app--b2 .me-top b { font: 800 15px/1.2 var(--font); }
  .app--b2 .me-top i { font: 500 13px/1.3 var(--font); color: #a9b6cf; margin-top: 2px; }
  .app--b2 .me .access, .app--b2 .me .me-row:last-child { display: none; }
  .app--b2 .me .me-row { justify-content: flex-start; }
  .app--b2 .me a { font: 600 13px/1 var(--font); color: #b9c6dd; padding: 6px 2px; }
  .app--b2 .me a:hover { color: #fff; }
  .app--b2 .b2-help { width: 36px; height: 36px; margin: 0 -4px 0 auto; }
  .app--b2 .b2-help > span { width: 28px; height: 28px; border: 1.5px solid rgba(185,205,235,.5); color: #c7d3e8; font: 800 14px/1 var(--font); }
}

/* ========== B-3 · ПК: вход и регистрация (I) — группа по центру колонки, а не space-between; левая колонка равна окну и не растягивается вслед за длинной формой ========== */
@media (min-width: 900px) {
  .b2-hdr { padding: 28px 40px; justify-content: flex-start; gap: 0; position: sticky; top: 0; align-self: flex-start; height: 100dvh; }   /* форма длиннее окна (регистрация) — колонка остаётся на месте, форма прокручивается: заголовок и чипы не уезжают за край (замечание I) */
  .b2-hdr__logo img { width: 180px; }
  .b2-hdr__top { flex: none; }
  .b2-hero { margin-top: auto; }
  .b2-side { margin-bottom: auto; margin-top: 22px; }
  .b2-hero .b2-say { font-size: 26px; }
  .b2-side h2 { font-size: 34px; line-height: 1.1; }
  .b2-side__chips { margin-top: 16px; gap: 8px; }
  .b2-side__chips .b2-chip { min-height: 34px; font-size: 14px; }
  .b2-formcol { min-width: 0; padding: 24px 40px; }
  .b2-panel { width: min(100%, 460px); padding: 16px 20px 18px; }   /* min(): на 900–999 панель 460 + поля 80 были шире колонки — страница шире окна на 54 px (B-T096-1) */
  .b2-panel h1 { font-size: 22px; margin: 2px 0 10px; }
  .b2-form { gap: 10px; margin-top: 10px; }
  .b2-legal { margin-top: 14px; }
}
@media (min-width: 900px) and (max-height: 520px) { .b2-hdr { position: static; height: auto; align-self: stretch; } }
@media (min-width: 900px) and (max-height: 640px) { .b2-hero .b2-nurpic { width: 68px !important; height: 74px !important; } .b2-side__chips { display: none; } }
/* кнопки «Google» и «Telegram» рядом: виджет Telegram — iframe ≈ 258 px, не сжимается; колонке Google нужно ≥ 196 px, чтобы подпись шла в одну-две строки без 3-й (B-T096-2).
   Панель 540 px (колонка формы от 1160 px = 54 % окна − 80) даёт Google 216; уже — кнопки друг под другом, одна строка подписи */
@media (min-width: 900px) and (max-width: 1159px) { .b2-soc { grid-template-columns: minmax(0, 1fr); } .b2-soc .b2-btn--google { white-space: nowrap; } }
@media (min-width: 1160px) { .b2-panel { width: min(100%, 540px); } }
@media (min-width: 900px) and (pointer: fine) { .b2-input { min-height: 46px; } .b2-tabs button { min-height: 40px; } .b2-soc .b2-btn, .b2-tg, .b2-sch__b { min-height: 46px; } .b2-tg .tg-wrap { min-height: 38px; } .b2-flow__c { width: 38px; height: 38px; } .b2-flow__ln { margin-top: -22px; } }

/* ========== B-4 · ПК: опросник (/start) — список без прокрутки страницы ========== */
@media (min-width: 1024px) and (pointer: fine) {
  .b2-ob { padding-top: calc(8px + env(safe-area-inset-top)); }
  .b2-ob__head { min-height: 44px; }
  .b2-ob__nur .b2-nurpic { width: 76px !important; height: 82px !important; }
  .b2-opt, .b2-opt__card { min-height: 44px; }
  .b2-opts--tight { gap: 8px; }
  .b2-ob__foot { padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); }
}

/* ========== B-5 · ПК: главная (композиция T-091 не меняется — только размеры) ========== */
@media (min-width: 1024px) and (pointer: fine) {
  @container b2w (min-width: 900px) {
    .b2-home { gap: 14px; }
    .b2-scene { padding: 14px 24px 44px; border-radius: 26px; column-gap: 14px; }
    .b2-scene__nw .b2-nurpic { width: 72px !important; height: 78px !important; }
    .b2-root .b2-scene .b2-hello { font-size: 26px; }
    .b2-scene__say .b2-say { font-size: 22px; padding: 4px 14px 2px; }
    .b2-scene:not(.b2-scene--flat) + .b2-hx { margin-top: -58px; }   /* = нижнее поле сцены 44 + зазор сетки 14: плашка прогноза нахлёстывает ровно на поле, как в обычном размере (52 + 20 → −72) */
    .b2-home .b2-hx { padding: 12px 20px; }
    .b2-hx__days .b2-num--d { font-size: 46px; }
    .b2-hx__gnum .b2-num--m { font-size: 32px; }
    .b2-hx__r svg { max-width: 150px; }
    .b2-fact { padding: 8px 10px; border-radius: 14px; }
    .b2-home .b2-card { padding: 12px 18px 16px; }
    .b2-home .b2-plan { padding: 14px 18px 18px; border-radius: 26px; box-shadow: 0 5px 0 var(--ink); }
    .b2-plan__pt { min-height: 42px; padding: 2px 0 4px; }
    .b2-plan__pt h2 { font-size: 26px; }
    .b2-plan__sh { min-height: 38px; }
    .b2-tk { min-height: 52px; }
    .b2-hm, .b2-cols { gap: 14px; }
    .b2-wk2 .b2-ch h2, .b2-st2 .b2-ch h2, .b2-qk .b2-ch h2 { font-size: 18px; }
    .b2-wq2 { min-height: 64px; }
    .b2-mrs .b2-mr { padding: 10px; }
    .b2-mrs .b2-mr__nd { width: 40px; height: 40px; }
  }
}

/* ========== B-6 · телефон ≤ 640: без запасов; касание 44 px остаётся ========== */
@media (max-width: 640px) {
  .b2-cta { min-height: 52px; border-radius: 16px; font-size: 17px; }
  .b2-btn { min-height: 46px; }
  .b2-card { border-radius: 22px; }
  .tabbar.tabbar--b2 { padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }       /* 76 → 62 px: подписи 12 px и цель 52 px остаются */
  .tabbar.tabbar--b2 a { min-height: 52px; gap: 3px; }
  .tabbar.tabbar--b2 .ico { width: 26px; height: 26px; }
  .b2-panel { padding: 12px 12px 14px; margin-top: -24px; }
  .b2-panel h1 { font-size: 19px; margin: 2px 0 10px; }
  .b2-hdr { padding-bottom: 40px; }
  .b2-hero { margin-top: 4px; }
  .b2-hero .b2-nurpic { width: 72px !important; height: 78px !important; }
  .b2-hero .b2-say { font-size: 22px; }
  .b2-form { gap: 10px; }
  .b2-ob__nur .b2-nurpic { width: 76px !important; height: 82px !important; }
  .b2-opt, .b2-opt__card { min-height: 48px; }
  .b2-opts--tight { gap: 8px; }
}

/* ========== B-7 · ПК: общие экраны кабинета (пробники, смена-лобби, тренажёр) — под .app--b2 ========== */
@media (min-width: 1024px) and (pointer: fine) {
  .app--b2 .main { padding: 20px 28px 40px; }
  .app--b2 .top { margin-bottom: 14px; }
  .app--b2 .card { padding: 16px 18px; border-radius: 18px; }
  .app--b2 .fmt { padding: 14px; gap: 8px; border-radius: 16px; }
  .app--b2 .fmt::before { height: 5px; }
  .app--b2 .fmt-ico { width: 32px; height: 32px; margin-top: 2px; }
  .app--b2 .fmt-title { font-size: 16px; }
  .app--b2 .fmt-nums { gap: 12px; }
  .app--b2 .fmt-nums b { font-size: 16px; }
  .app--b2 .fmt p { font-size: 14px; line-height: 1.4; flex: 0 0 auto; }
  .app--b2 .fmt-go { min-height: 38px; }
  .app--b2 .btn { min-height: 38px; }
  .app--b2 .btn-lg { min-height: 46px; }
  .app--b2 .tiles .tile { padding: 12px 14px; }
}

/* =====================================================================================================================
   T-096 · PR-2 · правки по замечаниям PR-1 / PR-3 (backlog 03, QA 05 N8, приёмка PR-3 P2)
   ===================================================================================================================== */

/* опросник: живая область диктора лежала абсолютно у нижнего края и давала +1 px прокрутки страницы */
.b2-ob .b2-sr, .b2-ob ~ .b2-sr { position: fixed; top: 0; left: 0; }

/* QA N8: третья карточка правил лобби («Волны») — точки и подпись «волна 2» не умещались в карточке (1280–1339, 901–960); точки мельче и переносятся, колонка значка в двухколоночной раскладке 112 px */
.app--b2 .sv-lobby .sv-cards .sv-card-top { min-width: 0; flex-wrap: wrap; }
.app--b2 .sv-lobby .sv-cards .sv-dots { gap: 5px; flex-wrap: wrap; min-width: 0; }
.app--b2 .sv-lobby .sv-cards .sv-dots i { width: 12px; height: 12px; }
.app--b2 .sv-lobby .sv-cards .sv-dots b { margin-left: 0; }
@media (min-width: 900px) and (max-width: 1279px) { .app--b2 .sv-lobby .sv-cards .sv-card { grid-template-columns: 112px minmax(0, 1fr); } }

/* приёмка PR-3 P2: блоки «ID школы» и «курс» на /tariffs — низкая строка вместо двух карточек по ≈ 90 px (ПК, мышь); функции те же */
@media (min-width: 900px) and (pointer: fine) {
  .b2-tr__hint { min-height: 52px; padding: 6px 12px; }
  .b2-tr .b2-course { padding: 6px 12px; }
  .b2-tr .b2-course .b2-nurpic { width: 36px !important; height: 39px !important; }
}

/* =====================================================================
   T-096 (F): гид новичка. Перенесено с эскиза 03 (t096-f.css) с заменами: окно — fixed-слой с рамкой и тенью на весь экран (вырез без масок),
   карточка позиционируется скриптом (lib/b2/tour-geom.ts), «?» — 44 px касание при кружке 30 px. Только когорта: компонент и атрибуты появляются
   лишь при b2; анимация окна — только при no-preference.
   ===================================================================== */
.b2-tour { position: fixed; inset: 0; z-index: 300; touch-action: none; overscroll-behavior: contain; }
.b2-tour[data-none="true"] { background: rgba(11, 23, 48, .68); }
.b2-tour__hole { position: fixed; border-radius: 18px; border: 3px solid var(--lamp); box-shadow: 0 0 0 100vmax rgba(11, 23, 48, .68); pointer-events: none; }
/* движение — как везде в b2.css: только opacity (правило слоя запрещает анимировать top/left/width/height; в эскизе 03 окно «ехало» — здесь на каждом шаге окно и карточка проявляются заново) */
@media (prefers-reduced-motion: no-preference) {
  .b2-tour__hole, .b2-tour__pop { animation: b2-tour-in .22s ease-out both; }
  @keyframes b2-tour-in { from { opacity: 0; } to { opacity: 1; } }
}
.b2-tour__pop { position: fixed; width: 364px; max-width: calc(100vw - 24px); padding: 14px 16px; border-radius: 24px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); box-shadow: 0 5px 0 var(--ink); }
.b2-tour__top { display: flex; align-items: flex-end; gap: 10px; }
.b2-tour__top .b2-nurpic { flex: none; }
.b2-tour__top h2 { font: 800 18px/1.15 var(--display); letter-spacing: -.02em; padding-bottom: 4px; }
.b2-tour__pop p { margin: 8px 0 0; font: 600 15px/1.4 var(--font); color: var(--ink-2); }
.b2-tour__prog { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; }
.b2-tour__bar { display: block; flex: 1; min-width: 0; height: 6px; margin: 0; border-radius: 3px; background: var(--b2-line); overflow: hidden; }
.b2-tour__bar i { display: block; height: 100%; border-radius: 3px; background: var(--lamp-d); }
.b2-tour__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; flex-wrap: nowrap; }
.b2-tour__foot > .b2-tour__skip { margin-right: auto; }
.b2-tour__foot > * { flex: none; }
.b2-tour__cnt { flex: none; font: 800 14px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.b2-tour__skip { min-height: 44px; min-width: 44px; padding: 0 8px; border: 0; background: none; font: 800 14px/1 var(--font); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.b2-tour__pop .b2-go, .b2-tour__pop .b2-btn--sm { min-height: 44px; }
.b2-tour__pop .b2-btn--sm { width: auto; min-width: 44px; }
@media (max-width: 900px) {
  .b2-tour__skip { padding: 0 4px; }
  .b2-tour__foot { gap: 6px; }
}
@media (max-width: 359px) { .b2-tour__pop { padding: 12px; } .b2-tour__pop .b2-go { padding: 0 12px; } .b2-tour__pop .b2-btn--sm { padding: 0 8px; } .b2-tour__skip { padding: 0 2px; } }
/* «?» рядом с именем в боковом меню: касание 44 × 44 при кружке 30; высота блока профиля не растёт — внешняя высота кнопки 34 = аватар компактной шкалы (отрицательные поля −5), иначе меню 1024×700 вылезало на 5 px */
.app--b2 .me-top > span:nth-child(2) { min-width: 0; }
.b2-help { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -5px -6px -5px auto; padding: 0; border: 0; background: none; color: var(--lamp); cursor: pointer; }
.b2-help > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lamp); font: 800 15px/1 var(--font); }
@media (hover: hover) { .b2-help:hover > span { background: rgba(255, 215, 106, .16); } }
/* строка «Как тут всё устроено» в «Профиле»: телефон; на ПК её заменяет «?» в меню */
button.b2-sections__row { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; background: none; text-align: left; cursor: pointer; }
@media (min-width: 901px) { .b2-sections__row--tour { display: none; } }

/* =====================================================================================================================
   T-099 «Путь = уроки» (PR-1): карточка «Сейчас», кольцо и знак «сделан» на узле, лимит дня Free, итог урока, карточка «Урок по теме». Концепт 03 `tasks/handoffs/T-099-ux.md`.
   Движения нет (узел зажигается существующим is-ignite). Все селекторы — под .b2-root / .app--b2 (страж tests/b2-css-scope.test.ts).
   ===================================================================================================================== */
.b2-pmk.is-made { background: var(--b2-mint-bg); border-color: var(--teal-deep); color: var(--teal-deep); }
.b2-plt .ln-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; background: conic-gradient(var(--lamp-d) calc(var(--p, 0) * 1%), var(--b2-line) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
.b2-plt.is-cur .ln-ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.b2-root .ln-now { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px; }
.b2-root .ln-now--min { display: flex; padding: 0; border: 0; box-shadow: none; background: transparent; }
.b2-root .ln-now__t { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.b2-root .ln-now__t b { font: 800 18px/1.2 var(--font); overflow-wrap: break-word; hyphens: manual; }
.b2-root .ln-now__day { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.b2-root .ln-now__act { grid-column: 1 / -1; display: grid; gap: 8px; min-width: 0; }
@container b2w (min-width: 640px) {
  .b2-root .ln-now { grid-template-columns: 52px minmax(0, 1fr) minmax(220px, 300px); }
  .b2-root .ln-now__act { grid-column: auto; }
}
.b2-root .ln-limit { display: grid; gap: 10px; min-width: 0; }
.b2-root .ln-limit__t { font: 800 18px/1.2 var(--font); }
.b2-root .ln-limit__pro { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; color: var(--ink); font: 800 15px/1.2 var(--font); text-decoration: underline; text-underline-offset: 3px; }
.b2-root .ln-done { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 560px; margin: 16px auto 0; padding: 20px 16px; }
.b2-root .ln-done h1 { font-size: 28px; line-height: 1.1; }
/* итог 4-го урока за день на телефоне (360×740): заголовок в три строки; без верхнего зазора и с отступом 18 страница помещается в окно (приёмка 03 р2, P2-B) */
@media (max-width: 400px) { .b2-root .ln-done--limit { margin-top: 0; padding-top: 18px; padding-bottom: 18px; } }
.b2-root .ln-done__topic { font: 800 17px/1.2 var(--font); overflow-wrap: break-word; }
.b2-root .ln-done .b2-chips { justify-content: center; }
.b2-root .ln-done__act { display: grid; gap: 10px; width: 100%; }
.b2-root .ln-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b2-root .ln-pips li { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--teal-deep); background: var(--b2-mint-bg); color: var(--teal-deep); }
.b2-root .ln-pips li.second { border-style: dashed; }
.b2-root .ln-pips li.wrong, .b2-root .ln-pips li:not(.ok):not(.second) { border-color: var(--b2-coral-d); background: var(--b2-coral-bg); color: var(--b2-coral-d); }
.b2-root .ln-pips svg { width: 20px; height: 20px; }
.b2-root .ln-tc { display: grid; gap: 10px; max-width: 560px; }
.app--b2 .tr-meta .tr-day { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 99px; border: 1.5px solid var(--b2-line); background: var(--b2-soft); color: var(--ink-2); font: 800 14px/1.1 var(--font); }
.app--b2 button.tr-x { border: 0; background: transparent; padding: 0; cursor: pointer; }