/* Модуль B1 → B2+ — учебный плеер, mobile first.
   Токены (цвета, шрифты) — из course.css, чтобы модуль выглядел частью курса.
   Раскладка: липкая шапка сверху, контент по центру (до 680px), главное
   действие — в «доке» снизу, под большим пальцем. */

:root{
  --b2-ink:var(--mentora-text,#1a1c1a);
  --b2-muted:var(--mentora-text-tertiary,#5f6763);
  --b2-line:var(--mentora-border,#e5e4e0);
  --b2-paper:#fff;
  --b2-ground:var(--mentora-bg,#faf9f6);
  --b2-soft:var(--mentora-bg-secondary,#f4f3f1);
  --b2-green:var(--teal,#1b4332);
  --b2-green-soft:#e3efe8;
  --b2-green-mid:#2d6a4f;
  --b2-red:var(--tc-alert,#ba1a1a);
  --b2-red-soft:#fbe9e7;
  --b2-amber:#b7791f;
  --b2-r:16px;
  --b2-r-sm:12px;
  --b2-dock-h:84px;
  --b2-ease:cubic-bezier(.2,.8,.2,1);
}

body{background:var(--b2-ground)}
.b2-app{min-height:100vh;min-height:100dvh;color:var(--b2-ink);font-family:var(--font-body);-webkit-tap-highlight-color:transparent}
.b2-loading,.b2-center{max-width:420px;margin:0 auto;padding:calc(48px + env(safe-area-inset-top)) 20px 0;text-align:center;color:var(--b2-muted)}
.b2-center h1{font:600 30px/1.1 var(--font-display);color:var(--b2-ink);margin:0 0 10px}
.b2-center .b2-big{margin:18px 0 14px}
.b2-link-quiet{color:var(--b2-muted);font-size:14px}

/* ---------- шапка и док ---------- */
.b2-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:color-mix(in srgb,var(--b2-ground) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--b2-line)}
.b2-brand{display:flex;align-items:center;margin-right:auto}
.b2-top-title{margin-right:auto;font:600 15px var(--font-body);color:var(--b2-muted)}
.b2-top-count{font:600 13px var(--font-body);color:var(--b2-muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
.b2-icon{display:grid;place-items:center;width:40px;height:40px;margin-left:-8px;border-radius:50%;border:0;background:transparent;color:var(--b2-ink);cursor:pointer;text-decoration:none;font-size:18px}
.b2-icon:hover{background:var(--b2-soft)}
.b2-ic{display:inline-grid;place-items:center;line-height:0}
.b2-chips{display:flex;gap:8px}
.b2-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:var(--b2-paper);border:1px solid var(--b2-line);font:600 13px var(--font-body);color:var(--b2-muted);font-variant-numeric:tabular-nums}
.b2-chip.is-hot{color:var(--b2-amber);border-color:color-mix(in srgb,var(--b2-amber) 35%,transparent);background:#fdf6ea}
.b2-chip .b2-ic{color:inherit}

.b2-dock{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--b2-ground) 70%,color-mix(in srgb,var(--b2-ground) 0%,transparent))}
.b2-dock .b2-big{max-width:648px;margin:0 auto}

/* ---------- кнопки ---------- */
.b2-big{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:12px 20px;border:0;border-radius:var(--b2-r-sm);
  background:var(--b2-green);color:#fff;font:600 16px var(--font-body);text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.18);transition:transform .12s var(--b2-ease),background .2s,opacity .2s}
.b2-big:active{transform:translateY(1px) scale(.99);box-shadow:none}
.b2-big:disabled{background:#c9cfcb;color:#fff;box-shadow:none;cursor:default}
.b2-big.is-soft{background:var(--b2-paper);color:var(--b2-green);border:1.5px solid var(--b2-line);box-shadow:none}
.b2-big.is-yes{background:var(--b2-green)}
.b2-big.is-no{background:var(--b2-paper);color:var(--b2-red);border:1.5px solid color-mix(in srgb,var(--b2-red) 30%,transparent);box-shadow:none}
.b2-app :focus-visible{outline:3px solid color-mix(in srgb,var(--b2-green) 45%,transparent);outline-offset:2px}
.b2-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.b2-stack{display:grid;gap:10px}

/* кнопки внутри заданий (из рендереров) */
.b2-app button.act,.b2-app a.act,.b2-app button.ghost,.b2-app a.ghost{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:9px 16px;border-radius:999px;font:600 15px var(--font-body);cursor:pointer;text-decoration:none}
.b2-app button.act,.b2-app a.act{background:var(--b2-green);color:#fff;border:0}
.b2-app button.ghost,.b2-app a.ghost{background:var(--b2-paper);color:var(--b2-green);border:1.5px solid var(--b2-line)}
.b2-app .b2-small{min-height:38px;padding:6px 12px;font-size:14px}
.b2-app button:disabled{opacity:.5;cursor:default}

/* ---------- общая раскладка ---------- */
.b2-main{max-width:680px;margin:0 auto;padding:18px 16px calc(var(--b2-dock-h) + 40px + env(safe-area-inset-bottom))}
.b2-app .kind{font:600 12px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--b2-muted)}
.b2-app .hint{color:var(--b2-muted);font-size:15px;line-height:1.5;margin:6px 0 12px}
.b2-app .sub{color:var(--b2-muted);margin:4px 0 0;font-size:16px}
.b2-hello{margin:6px 0 16px}
.b2-hello h1{font:600 clamp(28px,8vw,40px)/1.1 var(--font-display);margin:4px 0 0;text-wrap:balance}
.b2-h2{font:600 13px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--b2-muted);margin:28px 0 10px}
.b2-note{margin-top:24px;padding:16px;border-radius:var(--b2-r);background:var(--b2-paper);border:1px solid var(--b2-line)}
.b2-note p{margin:0 0 12px;color:var(--mentora-text-secondary);font-size:15px;line-height:1.5}
.b2-note ul{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.b2-note a{color:var(--b2-green)}
.b2-bron{display:block;color:var(--b2-muted);font-size:13px;line-height:1.4}

/* прогресс */
.b2-bar{margin:10px 0}
.b2-bar-track{height:8px;border-radius:99px;background:var(--b2-line);overflow:hidden}
.b2-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--b2-green-mid),var(--b2-green));transition:width .6s var(--b2-ease)}
.b2-bar-label{margin-top:6px;font-size:13px;color:var(--b2-muted)}
.b2-ring{position:relative;flex:none;display:grid;place-items:center}
.b2-ring svg{position:absolute;inset:0;width:100%;height:100%}
.b2-ring circle{fill:none;stroke-width:6}
.b2-ring-bg{stroke:var(--b2-line)}
.b2-ring-fg{stroke:var(--b2-green);stroke-linecap:round;transition:stroke-dashoffset .9s var(--b2-ease)}
.b2-ring span{position:relative;font:700 14px var(--font-body);font-variant-numeric:tabular-nums;color:var(--b2-ink)}

/* ---------- главная ---------- */
.b2-hero{display:grid;grid-template-columns:1fr auto;gap:14px 16px;align-items:center;padding:20px;border-radius:20px;text-decoration:none;
  color:#fff;background:radial-gradient(120% 140% at 100% 0%,#2d6a4f 0%,var(--b2-green) 55%,#10281e 100%);box-shadow:0 14px 30px -14px rgba(27,67,50,.55)}
.b2-hero .kind{color:rgba(255,255,255,.75)}
.b2-hero-title{font:600 24px/1.15 var(--font-display);margin:6px 0 4px;text-wrap:balance}
.b2-hero-meta{font-size:14px;color:rgba(255,255,255,.8)}
.b2-hero .b2-ring-bg{stroke:rgba(255,255,255,.2)}.b2-hero .b2-ring-fg{stroke:#b7e4c7}.b2-hero .b2-ring span{color:#fff}
.b2-hero-go{grid-column:1/-1;display:flex;justify-content:center;align-items:center;min-height:50px;border-radius:var(--b2-r-sm);background:var(--b2-paper);color:var(--b2-green);font:700 16px var(--font-body)}
.b2-hero:active .b2-hero-go{transform:scale(.99)}

/* повторение */
.b2-review{display:flex;align-items:center;gap:14px;margin:14px 0 0;padding:14px 16px;border-radius:var(--b2-r);background:var(--b2-paper);border:1.5px solid color-mix(in srgb,var(--b2-amber) 45%,transparent);text-decoration:none;color:var(--b2-ink)}
.b2-review-num{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fdf1dc;color:var(--b2-amber);font:700 20px var(--font-body);font-variant-numeric:tabular-nums}
.b2-review-text{flex:1;min-width:0}
.b2-review-title{font:600 16px var(--font-body)}
.b2-review-meta{font-size:13px;color:var(--b2-muted);margin-top:2px}
.b2-review-go{flex:none;padding:8px 14px;border-radius:999px;background:var(--b2-amber);color:#fff;font:700 14px var(--font-body)}
.b2-review.is-empty{border-color:var(--b2-line);cursor:default}
.b2-review.is-empty .b2-review-num{background:var(--b2-green-soft);color:var(--b2-green)}
.b2-grow{flex:1}

.b2-chapter{margin:0 0 10px;border-radius:var(--b2-r);background:var(--b2-paper);border:1px solid var(--b2-line);overflow:hidden}
.b2-chapter summary{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;list-style:none}
.b2-chapter summary::-webkit-details-marker{display:none}
.b2-chapter summary::after{content:"";width:9px;height:9px;margin-left:auto;border-right:2px solid var(--b2-muted);border-bottom:2px solid var(--b2-muted);transform:rotate(45deg);transition:transform .2s;flex:none}
.b2-chapter[open] summary::after{transform:rotate(225deg)}
.b2-chapter .b2-ring span{font-size:11px}
.b2-ch-title{font:600 16px var(--font-body)}
.b2-ch-meta{font-size:13px;color:var(--b2-muted);margin-top:2px}
.b2-chapter.is-locked summary{opacity:.6}
.b2-ring-sub{width:44px;height:44px;border-radius:50%;background:var(--b2-soft);color:var(--b2-muted)}
.b2-units{border-top:1px solid var(--b2-line);padding:6px 0}
.b2-unit{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:12px;min-height:52px;padding:8px 16px;color:var(--b2-ink);text-decoration:none}
.b2-unit:hover{background:var(--b2-soft)}
.b2-u-title{font-size:16px;line-height:1.3}
.b2-u-meta{font-size:13px;color:var(--b2-muted);font-variant-numeric:tabular-nums}
.b2-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--b2-line);font:700 12px var(--font-body);color:var(--b2-muted)}
.b2-unit.is-done .b2-dot{background:var(--b2-green);border-color:var(--b2-green);color:#fff}
.b2-unit.is-now{background:var(--b2-green-soft)}
.b2-unit.is-now .b2-dot{border-color:var(--b2-green);box-shadow:0 0 0 4px color-mix(in srgb,var(--b2-green) 15%,transparent)}
.b2-unit.is-locked{color:var(--b2-muted)}

/* ---------- карта юнита ---------- */
.b2-path{list-style:none;margin:18px 0 0;padding:0;position:relative}
.b2-path::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--b2-line)}
.b2-step a{position:relative;display:flex;align-items:center;gap:14px;padding:8px 0;color:var(--b2-ink);text-decoration:none}
.b2-node{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--b2-paper);border:2px solid var(--b2-line);font:700 15px var(--font-body);color:var(--b2-muted)}
.b2-step-text{display:grid;gap:2px;flex:1;padding:10px 14px;border-radius:var(--b2-r-sm);background:var(--b2-paper);border:1px solid var(--b2-line)}
.b2-step-title{font:600 16px var(--font-body)}
.b2-step-meta{font-size:13px;color:var(--b2-muted)}
.b2-step.is-done .b2-node{background:var(--b2-green);border-color:var(--b2-green);color:#fff}
.b2-step.is-next .b2-node{border-color:var(--b2-green);color:var(--b2-green);box-shadow:0 0 0 5px color-mix(in srgb,var(--b2-green) 14%,transparent)}
.b2-step.is-next .b2-step-text{border-color:var(--b2-green);box-shadow:0 6px 18px -10px rgba(27,67,50,.5)}
.b2-step-go{position:absolute;right:12px;font:700 13px var(--font-body);color:var(--b2-green)}
.b2-step.is-extra .b2-node{font-family:var(--font-display);font-size:16px}
.b2-step.is-extra .b2-step-text{background:var(--b2-soft)}

/* ---------- плеер урока ---------- */
.b2-segs{flex:1;display:flex;gap:3px}
.b2-segs span{flex:1;height:6px;border-radius:99px;background:var(--b2-line);transition:background .3s}
.b2-segs span.is-done{background:var(--b2-green-mid)}
.b2-segs span.is-on{background:var(--b2-green);box-shadow:0 0 0 2px color-mix(in srgb,var(--b2-green) 20%,transparent)}
.b2-lesson-head{margin:4px 0 14px}
.b2-lesson-head h1{font:600 30px/1.1 var(--font-display);margin:2px 0 0}
.b2-lesson-head .kind{text-transform:none;letter-spacing:0;font-weight:500;font-size:14px}
/* заголовок раздела дублирует название урока */
.b2-lesson>section:first-of-type>.kind:first-child{display:none}

.b2-app section{background:var(--b2-paper);border:1px solid var(--b2-line);border-radius:var(--b2-r);padding:18px 16px;margin:0 0 14px}
.b2-app section>h3{margin:2px 0 6px;font:600 21px/1.25 var(--font-display)}
.b2-app section h3{text-wrap:balance}
.b2-app [lang=nl]{font-family:var(--font-display)}
.b2-app .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}

/* чтение */
.b2-app .stanza{margin:0 0 18px}
.b2-app .stanza p{margin:0;padding:3px 6px;margin-left:-6px;border-radius:6px;font-size:19px;line-height:1.65;cursor:pointer;transition:background .2s}
.b2-app .stanza p:hover{background:var(--b2-soft)}
.b2-app .b2-now{background:#fff3c4!important;box-shadow:0 0 0 3px #fff3c4}
.b2-app .bubble{display:flex;gap:10px;margin:10px 0;align-items:flex-start}
.b2-app .bubble b{flex:none;display:grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:99px;background:var(--b2-soft);font:700 12px var(--font-body);color:var(--b2-muted)}
.b2-app .bubble div{background:var(--b2-soft);padding:10px 14px;border-radius:4px 16px 16px 16px;font-size:17px;line-height:1.5;cursor:pointer}
.b2-app .bubble:nth-child(even) b{background:var(--b2-green-soft);color:var(--b2-green)}
.b2-app .bubble:nth-child(even) div{background:var(--b2-green-soft)}
.b2-app pre{white-space:pre-wrap;font:17px/1.6 var(--font-display);background:var(--b2-soft);padding:14px;border-radius:var(--b2-r-sm);margin:10px 0}
.b2-app pre.doc{font:14px/1.55 ui-monospace,monospace}
.b2-app .b2-doc{background:var(--b2-soft);padding:14px;border-radius:var(--b2-r-sm);margin:10px 0}
.b2-app .b2-doc pre{background:none;padding:0;margin:0;border-radius:0;font:14px/1.55 ui-monospace,monospace}
.b2-app .b2-doc pre+pre{margin-top:1.55em}
.b2-app .b2-doc pre.is-tab{white-space:pre;overflow-x:auto}
.b2-app .b2-doc-rows{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:14px/1.55 ui-monospace,monospace}
.b2-app .b2-doc-table table{border-collapse:collapse;width:100%;font:13px/1.45 ui-monospace,monospace}
.b2-app .b2-doc-table{overflow-x:auto}
.b2-app .b2-doc-table td{padding:3px 8px 3px 0;vertical-align:top;overflow-wrap:anywhere;border-bottom:1px solid rgba(0,0,0,.06)}
.b2-app .b2-doc>*+*{margin-top:1.2em}
.b2-app .b2-doc-rows+pre,.b2-app pre+.b2-doc-rows{margin-top:1.55em}
.b2-app table{border-collapse:collapse;width:100%;font-size:15px}
.b2-app th,.b2-app td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--b2-line);vertical-align:top}
.b2-app th{color:var(--b2-muted);font-weight:600;font-size:13px}
.b2-app .scroll{overflow-x:auto;margin:0 -16px;padding:0 16px}
.b2-app .lay{color:var(--b2-green-mid)}
.b2-app .note{background:var(--b2-soft);border-radius:var(--b2-r-sm);padding:10px 14px;font-size:14px}
.b2-app .foto{border:1.5px dashed var(--b2-line);border-radius:var(--b2-r-sm);padding:12px;margin:10px 0;background:var(--b2-soft)}
.b2-app details summary{cursor:pointer;color:var(--b2-green);font-weight:600;padding:8px 0}

/* вопросы */
.b2-qcount{font:600 13px var(--font-body);color:var(--b2-muted);margin:6px 0 8px;font-variant-numeric:tabular-nums}
.b2-app .qa{padding:6px 0 4px;animation:b2-in .35s var(--b2-ease)}
.b2-app .qa+.qa{border-top:1px solid var(--b2-line);margin-top:10px;padding-top:16px}
.b2-app .qa.is-later{display:none}
.b2-q{font-size:19px;line-height:1.45;margin:0 0 12px;text-wrap:pretty}
.b2-opts{display:grid;gap:10px}
.b2-app .opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;text-align:left;padding:10px 14px;border:1.5px solid var(--b2-line);border-radius:var(--b2-r-sm);
  background:var(--b2-paper);font:16px/1.35 var(--font-display);color:var(--b2-ink);cursor:pointer;box-shadow:0 2px 0 var(--b2-line);transition:transform .1s,border-color .2s,background .2s}
.b2-app .opt:active{transform:translateY(1px);box-shadow:none}
.b2-app .opt:disabled{cursor:default;opacity:1}
.b2-letter{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--b2-soft);font:700 13px var(--font-body);color:var(--b2-muted)}
.b2-app .opt.good{border-color:var(--b2-green);background:var(--b2-green-soft);box-shadow:0 2px 0 var(--b2-green)}
.b2-app .opt.good .b2-letter{background:var(--b2-green);color:#fff}
.b2-app .opt.bad{border-color:var(--b2-red);background:var(--b2-red-soft);box-shadow:0 2px 0 var(--b2-red);animation:b2-shake .35s}
.b2-app .opt.bad .b2-letter{background:var(--b2-red);color:#fff}
.b2-app .ans{display:none;margin-top:12px;padding:12px 14px;border-radius:var(--b2-r-sm);background:var(--b2-green-soft);font-size:17px;line-height:1.5}
.b2-app .ans.show{display:block;animation:b2-in .3s var(--b2-ease)}
.b2-flag{margin-top:12px;padding:10px 14px;border-radius:var(--b2-r-sm);font:600 15px var(--font-body);animation:b2-pop .35s var(--b2-ease)}
.b2-flag.is-yes{background:var(--b2-green-soft);color:var(--b2-green)}
.b2-flag.is-no{background:var(--b2-red-soft);color:var(--b2-red)}
.b2-uitleg{margin-top:8px;padding:10px 14px;border-left:3px solid var(--b2-green);font:400 15px/1.55 var(--font-body);color:inherit}
.b2-uitleg p{margin:0}
.b2-reread{margin:0 0 16px;padding:10px 14px;border:1px solid var(--b2-line);border-radius:var(--b2-r-sm)}
.b2-reread summary{cursor:pointer;font:600 15px var(--font-body);color:var(--b2-green)}
.b2-reread p{margin:10px 0 0}
.b2-exam-miss{padding:12px 0;border-top:1px solid var(--b2-line);text-align:left}
.b2-exam-miss p{margin:4px 0}
.b2-miss-pick{color:var(--b2-red)}
.b2-miss-right{color:var(--b2-green);font-weight:600}
.b2-fb{margin:4px 0 14px}
.b2-fb-scores{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--font-body)}
.b2-fb-scores th,.b2-fb-scores td{padding:8px 10px 8px 0;border-bottom:1px solid var(--b2-line);text-align:left;vertical-align:top}
.b2-fb-scores th{font-weight:600;white-space:nowrap}
.b2-fb-level{font-weight:600;white-space:nowrap}
.b2-fb-level.is-3,.b2-fb-level.is-4{color:var(--b2-green)}
.b2-fb-level.is-1{color:var(--b2-red)}
.b2-fb-good,.b2-fb-next{margin:12px 0;padding:10px 14px;border-radius:var(--b2-r-sm);font:400 15px/1.55 var(--font-body)}
.b2-fb-good{background:var(--b2-green-soft)}
.b2-fb-next{border-left:3px solid var(--b2-green);border-radius:0}
.b2-fb-fix{list-style:none;margin:12px 0;padding:0;font:400 15px/1.55 var(--font-body)}
.b2-fb-fix li{padding:8px 0;border-bottom:1px solid var(--b2-line)}
.b2-fb-fix del{color:var(--b2-red)}
.b2-fb-fix ins{color:var(--b2-green);text-decoration:none;font-weight:600}
.b2-fb-fix span{display:block;color:var(--b2-muted)}
@media(max-width:560px){.b2-fb-scores tr{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:8px 0;border-bottom:1px solid var(--b2-line)}.b2-fb-scores th,.b2-fb-scores td{border:0;padding:0}.b2-fb-scores td:last-child{grid-column:1/-1}}
.b2-judge .hint{margin:12px 0 0}

/* результат */
.b2-result{display:grid;justify-items:center;text-align:center;gap:6px;padding:28px 12px 8px;animation:b2-in .5s var(--b2-ease)}
.b2-result .b2-ring circle{stroke-width:10}
.b2-result .b2-ring span{font:600 34px var(--font-display)}
.b2-result .b2-ring-fg{stroke:var(--b2-amber)}
.b2-result.is-pass .b2-ring-fg{stroke:var(--b2-green)}
.b2-result h2{font:600 30px var(--font-display);margin:14px 0 0}
.b2-result p{margin:0;color:var(--mentora-text-secondary);max-width:34ch;line-height:1.5}
.b2-result .b2-big{max-width:320px;margin-top:18px}
.b2-parts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.b2-score{font:600 40px var(--font-display);color:var(--b2-green)}

/* тренировка слов */
.b2-drill{margin:8px 0 18px}
.b2-drill-top{display:flex;align-items:center;gap:10px}.b2-drill-top .b2-bar{flex:1}
.b2-flip{position:relative;display:block;width:100%;height:220px;margin:10px 0 0;padding:0;border:0;background:transparent;cursor:pointer;perspective:1000px}
.b2-face{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:20px;border-radius:20px;background:var(--b2-paper);border:1.5px solid var(--b2-line);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.35);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s var(--b2-ease);text-align:center;font-size:18px;color:var(--b2-ink)}
.b2-face [lang=nl]{font-size:30px;line-height:1.2}
.b2-face-back{transform:rotateY(180deg);background:var(--b2-green-soft);border-color:transparent}
.b2-flip.is-turned .b2-face:not(.b2-face-back){transform:rotateY(-180deg)}
.b2-flip.is-turned .b2-face-back{transform:rotateY(0)}
.b2-drill-end{text-align:center;padding:10px 0}.b2-drill-end p{color:var(--b2-muted);margin:0 0 14px}

/* письмо, таймер, говорение */
.b2-app textarea{width:100%;min-height:200px;font:18px/1.6 var(--font-display);padding:14px;border:1.5px solid var(--b2-line);border-radius:var(--b2-r-sm);background:var(--b2-paper);color:var(--b2-ink);resize:vertical}
.b2-app textarea:focus{border-color:var(--b2-green);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--b2-green) 12%,transparent)}
.b2-app .count{font:600 13px var(--font-body);color:var(--b2-muted);font-variant-numeric:tabular-nums}
.b2-app .count.over{color:var(--b2-red)}
.b2-app ul.check{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.b2-app ul.check label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--b2-r-sm);background:var(--b2-soft);cursor:pointer;font-size:15px;line-height:1.4}
.b2-app ul.check input{width:20px;height:20px;accent-color:var(--b2-green);flex:none;margin:0}
.b2-app .timer{font:700 30px var(--font-body);font-variant-numeric:tabular-nums;color:var(--b2-green)}
.b2-app .timer.late{color:var(--b2-red)}
.b2-app .b2-task{padding:16px 0;border-top:1px solid var(--b2-line)}
.b2-app .b2-task:first-of-type{border-top:0}
.b2-app .b2-hide{display:none}
.b2-app .b2-rec{width:100%;margin:8px 0}
.b2-app .b2-model{background:var(--b2-green-soft);border-radius:var(--b2-r-sm);padding:12px 14px;margin-top:8px}

/* схемы */
.b2-fig{margin:18px 0 0;display:grid;gap:6px}
.b2-fig iframe{width:100%;height:min(780px,85vh);border:1px solid var(--b2-line);border-radius:var(--b2-r);background:#fafaf7}
.b2-fig img{width:100%;height:auto;border:1px solid var(--b2-line);border-radius:var(--b2-r);background:var(--b2-paper)}
.b2-fig figcaption{font-size:13px;color:var(--b2-muted)}
.b2-fig a{color:var(--b2-green)}

@keyframes b2-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes b2-pop{0%{transform:scale(.96);opacity:0}60%{transform:scale(1.02);opacity:1}100%{transform:scale(1)}}
@keyframes b2-shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.b2-app *,.b2-app *::before,.b2-app *::after{animation:none!important;transition:none!important}}

@media (min-width:720px){
  .b2-main{padding-top:28px}
  .b2-hero{grid-template-columns:1fr auto auto;padding:26px 28px}
  .b2-hero-go{grid-column:auto;padding:0 26px}
  .b2-app section{padding:22px 24px}
  .b2-app .scroll{margin:0;padding:0}
  .b2-flip{height:260px}
}

/* ================= вид приложения ================= */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
.b2-app{touch-action:manipulation}
.b2-app a,.b2-app button,.b2-tabbar,.b2-top{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.b2-app.has-tabs .b2-main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}

/* шапка: пустая, пока виден крупный заголовок; при прокрутке — компактная */
.b2-app.has-tabs .b2-top{border-bottom-color:transparent;background:var(--b2-ground);-webkit-backdrop-filter:none;backdrop-filter:none;min-height:52px}
.b2-app.has-tabs .b2-top.is-scrolled{border-bottom-color:var(--b2-line);background:color-mix(in srgb,var(--b2-ground) 85%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px)}
.b2-top-lead{flex:1}.b2-top-right{flex:1;display:flex;justify-content:flex-end}
.b2-top-small{font:600 17px var(--font-body);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;white-space:nowrap}
.b2-top.is-scrolled .b2-top-small{opacity:1;transform:none}
.b2-large{margin:0 0 18px}
.b2-large h1{font:700 34px/1.1 var(--font-display);margin:2px 0 0;letter-spacing:-.01em}
.b2-kicker{font:500 14px var(--font-body);color:var(--b2-muted)}

/* нижние вкладки */
.b2-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;justify-content:space-around;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--b2-paper) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--b2-line)}
.b2-tab{flex:1;max-width:140px;display:grid;justify-items:center;gap:2px;padding:6px 0 4px;border-radius:12px;color:var(--b2-muted);text-decoration:none;transition:color .2s,transform .12s}
.b2-tab:active{transform:scale(.92)}
.b2-tab.is-on{color:var(--b2-green)}
.b2-tab-ic{position:relative;display:grid;place-items:center;width:52px;height:30px;border-radius:99px;transition:background .25s}
.b2-tab.is-on .b2-tab-ic{background:var(--b2-green-soft)}
.b2-tab-label{font:600 11px var(--font-body);letter-spacing:.01em}
.b2-badge{position:absolute;top:-4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--b2-amber);color:#fff;font:700 11px/18px var(--font-body);text-align:center;box-shadow:0 0 0 2px var(--b2-paper)}

/* нажатия — как в приложении */
.b2-hero,.b2-review,.b2-unit,.b2-step a,.b2-chapter summary,.b2-tile,.b2-install{transition:transform .14s var(--b2-ease),background .2s}
.b2-hero:active,.b2-review:active,.b2-install:active{transform:scale(.98)}
.b2-unit:active,.b2-step a:active,.b2-chapter summary:active{transform:scale(.985)}

/* пустое состояние */
.b2-empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:40px 12px}
.b2-empty-art{display:grid;place-items:center;width:96px;height:96px;border-radius:32px;background:var(--b2-green-soft);color:var(--b2-green);transform:rotate(-6deg)}
.b2-empty-art svg{width:44px;height:44px}
.b2-empty h2{font:600 26px var(--font-display);margin:10px 0 0}
.b2-empty p{margin:0 0 16px;color:var(--b2-muted);max-width:32ch;line-height:1.5}
.b2-empty .b2-big{max-width:280px}

/* прогресс */
.b2-streak{padding:18px;border-radius:20px;color:#fff;background:linear-gradient(135deg,#c2761b,#e0a24a);box-shadow:0 14px 28px -16px rgba(183,121,31,.7)}
.b2-streak-num{display:flex;align-items:baseline;gap:8px}
.b2-streak-num .b2-ic svg{width:26px;height:26px}
.b2-streak-num b{font:700 44px/1 var(--font-display)}
.b2-streak-num span{font:600 15px var(--font-body);opacity:.9}
.b2-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.b2-day{display:grid;justify-items:center;gap:6px;font:600 12px var(--font-body);opacity:.85}
.b2-day i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.22);font-style:normal}
.b2-day.is-on i{background:var(--b2-paper);color:#c2761b}
.b2-day.is-today span{text-decoration:underline;text-underline-offset:3px}
.b2-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.b2-tile{display:grid;align-content:start;gap:2px;padding:16px;border-radius:18px;background:var(--b2-paper);border:1px solid var(--b2-line)}
.b2-tile .b2-ring{margin-bottom:8px}.b2-tile .b2-ring span{font-size:12px}
.b2-tile-big{font:700 34px/1 var(--font-display);color:var(--b2-green);margin-bottom:10px}
.b2-tile b{font:700 17px var(--font-body)}
.b2-tile span{font-size:13px;color:var(--b2-muted)}
.b2-install{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:18px;background:var(--b2-paper);border:1px solid var(--b2-line)}
.b2-install img{border-radius:12px;flex:none}
.b2-install-text{flex:1;display:grid;gap:2px}.b2-install-text b{font:600 15px var(--font-body)}.b2-install-text span{font-size:13px;color:var(--b2-muted)}

/* скелетон загрузки */
.b2-skeleton{padding-top:calc(64px + env(safe-area-inset-top))}
.sk{border-radius:12px;background:linear-gradient(90deg,var(--b2-soft) 25%,#ecebe7 50%,var(--b2-soft) 75%);background-size:200% 100%;animation:b2-sk 1.2s linear infinite;margin-bottom:12px}
.sk-kicker{width:45%;height:14px}.sk-title{width:65%;height:36px;margin-bottom:22px}.sk-hero{height:176px;border-radius:20px;margin-bottom:24px}.sk-row{height:64px;border-radius:16px}
@keyframes b2-sk{to{background-position:-200% 0}}

/* переходы между экранами */
@view-transition{navigation:auto}
::view-transition-old(root){animation:b2-out .22s var(--b2-ease) both}
::view-transition-new(root){animation:b2-new .28s var(--b2-ease) both}
@keyframes b2-out{to{opacity:0;transform:translateX(-24px)}}
@keyframes b2-new{from{opacity:0;transform:translateX(32px)}}
.b2-tabbar{view-transition-name:b2-tabbar}
::view-transition-old(b2-tabbar),::view-transition-new(b2-tabbar){animation:none}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* установлено как приложение */
@media (display-mode:standalone){.b2-top{padding-top:calc(6px + env(safe-area-inset-top))}}
@media (min-width:720px){.b2-tabbar{left:50%;right:auto;transform:translateX(-50%);width:min(440px,90vw);bottom:14px;border:1px solid var(--b2-line);border-radius:22px;padding-bottom:6px;box-shadow:0 12px 30px -16px rgba(0,0,0,.25)}}
.b2-install .b2-review-go{border:0;cursor:pointer}
.b2-level{display:inline-flex;padding:3px;gap:2px;border-radius:99px;background:var(--b2-soft);box-shadow:inset 0 0 0 1px var(--b2-line)}
.b2-level a{padding:6px 11px;border-radius:99px;font:600 12.5px var(--font-body);color:var(--b2-muted);text-decoration:none;white-space:nowrap}
.b2-level a.is-on{background:var(--b2-paper);color:var(--b2-green);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.b2-top-lead{display:flex}
/* Компактный заголовок стоит в потоке между пилюлей и правым краем: центр
   по абсолютным координатам налезал на переключатель уровня. */
.b2-top-small{flex:1;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;transform:translateY(6px)}
.b2-top.is-scrolled .b2-top-small{transform:none}
.b2-app.has-tabs .b2-top{gap:8px}
.b2-top-lead,.b2-top-right{flex:0 0 auto}
.b2-top-right{min-width:0}
@media (max-width:400px){.b2-level a{padding:6px 9px;font-size:12px}}
.b2-center .b2-big.is-soft{margin:0 0 14px}
.b2-offline{margin-top:22px}
.b2-offline .b2-big.is-saved{color:var(--b2-green);border-color:var(--b2-green)}
/* пробный тест: экзаменационный режим */
.b2-app.b2-no-dock .b2-dock{display:none}
.b2-app.b2-no-dock .b2-main{padding-bottom:40px}
.b2-exam-start{padding:8px 0 0}
.b2-exam-start h2{font:600 30px var(--font-display);margin:4px 0 8px}
.b2-exam-start p{color:var(--mentora-text-secondary);line-height:1.55;margin:0 0 12px}
.b2-exam-start ul{margin:0 0 18px;padding-left:18px;display:grid;gap:4px;color:var(--b2-muted)}
.b2-exam-head{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.b2-exam-head .row{margin:2px 0 0}
.b2-app .opt.is-pick{border-color:var(--b2-green);background:var(--b2-green-soft);box-shadow:0 2px 0 var(--b2-green)}
.b2-app .opt.is-pick .b2-letter{background:var(--b2-green);color:#fff}
.b2-exam-rows{display:grid;gap:6px;width:100%;max-width:320px;margin:14px 0 4px}
.b2-exam-row{display:flex;justify-content:space-between;padding:10px 14px;border-radius:var(--b2-r-sm);background:var(--b2-soft);font-size:15px}
.b2-exam-row.is-ok{background:var(--b2-green-soft);color:var(--b2-green)}
.b2-exam-row b{font-weight:600}
.b2-rate{padding:5px 8px;font-variant-numeric:tabular-nums;cursor:pointer}
.b2-app.is-player .b2-top{gap:8px}
.b2-three{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.b2-three .b2-big:last-child{grid-column:1/-1}

/* ================= Тёмная тема (те же токены, что у курса) ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --b2-ink: #e8eae7;
    --b2-muted: #97a09b;
    --b2-line: #2b3037;
    --b2-paper: #1a1e24;
    --b2-ground: #14161a;
    --b2-soft: #1c2026;
    --b2-green: #7fc9a2;
    --b2-green-soft: #23392f;
    --b2-green-mid: #4f9d78;
    --b2-red: #ff9e94;
    --b2-red-soft: #3a2320;
    --b2-amber: #e0a24a;
  }
  :root:not([data-theme="light"]) .b2-big,
  :root:not([data-theme="light"]) .b2-app button.act,
  :root:not([data-theme="light"]) .b2-app a.act { color: #10231b; }
  :root:not([data-theme="light"]) .b2-hero { color: #eaf6ef;
    background: radial-gradient(120% 140% at 100% 0%, #2f6a51 0%, #1d4534 55%, #10241b 100%); }
  :root:not([data-theme="light"]) .b2-hero-go { background: #eaf6ef; color: #12362a; }
  :root:not([data-theme="light"]) .b2-face-back { background: var(--b2-green-soft); }
  :root:not([data-theme="light"]) .b2-app .b2-now { background: #6b5a1d !important; box-shadow: 0 0 0 3px #6b5a1d; }
  :root:not([data-theme="light"]) .b2-tabbar { background: color-mix(in srgb, var(--b2-paper) 90%, transparent); }
  :root:not([data-theme="light"]) .b2-fig iframe,
  :root:not([data-theme="light"]) .b2-fig img { background: #eef1ec; }
}
:root[data-theme="dark"] {
  --b2-ink: #e8eae7;
  --b2-muted: #97a09b;
  --b2-line: #2b3037;
  --b2-paper: #1a1e24;
  --b2-ground: #14161a;
  --b2-soft: #1c2026;
  --b2-green: #7fc9a2;
  --b2-green-soft: #23392f;
  --b2-green-mid: #4f9d78;
  --b2-red: #ff9e94;
  --b2-red-soft: #3a2320;
  --b2-amber: #e0a24a;
}
:root[data-theme="dark"] .b2-big,
:root[data-theme="dark"] .b2-app button.act,
:root[data-theme="dark"] .b2-app a.act { color: #10231b; }
:root[data-theme="dark"] .b2-hero { color: #eaf6ef;
  background: radial-gradient(120% 140% at 100% 0%, #2f6a51 0%, #1d4534 55%, #10241b 100%); }
:root[data-theme="dark"] .b2-hero-go { background: #eaf6ef; color: #12362a; }
:root[data-theme="dark"] .b2-app .b2-now { background: #6b5a1d !important; box-shadow: 0 0 0 3px #6b5a1d; }
:root[data-theme="dark"] .b2-tabbar { background: color-mix(in srgb, var(--b2-paper) 90%, transparent); }
:root[data-theme="dark"] .b2-fig iframe,
:root[data-theme="dark"] .b2-fig img { background: #eef1ec; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b2-brand img { filter: brightness(0) invert(1); opacity: .92; }
}
:root[data-theme="dark"] .b2-brand img { filter: brightness(0) invert(1); opacity: .92; }
/* покупка модуля */
.b2-shop{text-align:left;margin:18px 0 8px;padding:16px;border-radius:var(--b2-r);background:var(--b2-paper);border:1px solid var(--b2-line)}
.b2-shop-row{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--b2-line)}
.b2-shop-row:first-of-type{border-top:0}
.b2-shop-row b{display:block;font:600 16px var(--font-body)}
.b2-shop-row span{font-size:13px;color:var(--b2-muted)}
.b2-consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:12.5px;line-height:1.45;color:var(--b2-muted);text-align:left;cursor:pointer}
.b2-consent input{width:20px;height:20px;flex:none;accent-color:var(--b2-green);margin:0}
.b2-shop-err{color:var(--b2-red);font-size:13px;margin:8px 0 0;min-height:1em}

/* витрина модулей для тех, у кого их ещё нет — прижата к верху, без пустоты */
.b2-sell{max-width:520px;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom))}
.b2-sell-kicker{font:600 13px var(--font-body);color:var(--b2-muted)}
.b2-sell h1{font:600 clamp(26px,7vw,34px)/1.12 var(--font-display);margin:4px 0 8px;text-wrap:balance}
.b2-lede{color:var(--mentora-text-secondary);font-size:16px;line-height:1.55;margin:0 0 16px}
.b2-sell .b2-shop{margin:0 0 14px}
.b2-shop-foot{font-size:13px;color:var(--b2-muted);margin:10px 0 0;line-height:1.5}
.b2-shop-foot a,.b2-sell a{color:var(--b2-green)}
.b2-sell .b2-consent{margin:0 0 6px;padding:12px;border-radius:var(--b2-r-sm);background:var(--b2-soft)}
.b2-signin-line{font-size:14px;color:var(--b2-muted);margin:4px 0 14px}
.b2-linkbtn{border:0;background:none;padding:0;font:600 14px var(--font-body);color:var(--b2-green);text-decoration:underline;cursor:pointer}
.b2-sell .b2-link-quiet{display:inline-block;margin-top:6px}

/* Пропуски с банком слов и текст с номерами строк (формат UvA NT2 gevorderden) */
.b2-bank{font:500 15px/1.7 var(--font-body);color:var(--b2-ink);background:var(--b2-soft);border:1px solid var(--b2-line);border-radius:var(--b2-r-sm);padding:10px 14px;margin:0 0 16px}
.b2-gaprow .b2-q{line-height:2}
.b2-gap{font:inherit;font-size:16px;margin:0 6px;padding:2px 28px 2px 10px;min-width:9ch;max-width:100%;border:1.5px solid var(--b2-line);border-radius:8px;background:var(--b2-paper);color:var(--b2-ink)}
.b2-gap:focus-visible{outline:2px solid var(--b2-green);outline-offset:2px}
.b2-gap.good{border-color:var(--b2-green);background:var(--b2-green-soft)}
.b2-gap.bad{border-color:var(--b2-red);background:var(--b2-red-soft)}
.b2-app .b2-lines,.b2-lines{font-family:var(--serif);font-size:clamp(12.5px,3.5vw,17px);line-height:1.6;margin:0 0 16px;overflow-x:auto}
.b2-app .b2-line,.b2-line{display:grid;grid-template-columns:2.2em 1fr;gap:10px;white-space:nowrap}
.b2-line.is-gap{height:.8em}
.b2-ln{color:var(--b2-muted);font:12px/2.1 var(--font-body);text-align:right;font-variant-numeric:tabular-nums}

/* Плеер с волной (интервью, которое можно перематывать) */
.b2-wv{--wv-on:#ff5500;--wv-off:#c9ccd1;display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1px solid var(--b2-line);border-radius:var(--b2-r);background:var(--b2-paper)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b2-wv{--wv-off:#4a4f57}}
:root[data-theme="dark"] .b2-wv{--wv-off:#4a4f57}
.b2-wv-play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:#ff5500;color:#fff;cursor:pointer;position:relative;box-shadow:0 2px 8px rgba(255,85,0,.35);transition:transform .15s var(--b2-ease)}
.b2-wv-play:hover{transform:scale(1.05)}
.b2-wv-play:focus-visible,.b2-wv-canvas:focus-visible,.b2-wv-skip:focus-visible{outline:2px solid #ff5500;outline-offset:3px}
.b2-wv-play::before{content:"";position:absolute;left:55%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.b2-wv.is-playing .b2-wv-play::before{left:50%;width:14px;height:18px;border:0;border-left:5px solid #fff;border-right:5px solid #fff;box-sizing:border-box}
.b2-wv.is-loading .b2-wv-play{opacity:.85}
.b2-wv-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.b2-wv-canvas{display:block;width:100%;height:64px;cursor:pointer;touch-action:none}
.b2-wv-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b2-wv-t{font:500 13px var(--font-body);color:var(--b2-muted);font-variant-numeric:tabular-nums}
.b2-wv-skips{display:flex;gap:8px}
.b2-wv-skip{font:600 13px var(--font-body);min-width:44px;height:30px;border-radius:15px;border:1px solid var(--b2-line);background:transparent;color:var(--b2-ink);cursor:pointer}
.b2-wv-skip:hover{border-color:#ff5500;color:#ff5500}
@media (prefers-reduced-motion:reduce){.b2-wv-play{transition:none}}
.b2-steps{margin:14px 0 0;padding-left:1.4em;display:grid;gap:6px;font-size:16px;line-height:1.45}

/* Тёмная тема: правило выше красит текст всех .b2-big в тёмный (для зелёных
   залитых кнопок) — прозрачные варианты и неактивное состояние возвращаем. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b2-big.is-soft,
  :root:not([data-theme="light"]) .b2-offline .b2-big.is-saved { color: var(--b2-green); }
  :root:not([data-theme="light"]) .b2-big.is-no { color: var(--b2-red); }
  :root:not([data-theme="light"]) .b2-big:disabled { background: var(--b2-soft); color: var(--b2-muted); border: 1.5px solid var(--b2-line); }
}
:root[data-theme="dark"] .b2-big.is-soft,
:root[data-theme="dark"] .b2-offline .b2-big.is-saved { color: var(--b2-green); }
:root[data-theme="dark"] .b2-big.is-no { color: var(--b2-red); }
:root[data-theme="dark"] .b2-big:disabled { background: var(--b2-soft); color: var(--b2-muted); border: 1.5px solid var(--b2-line); }

/* Цель юнита, задание урока, звёзды */
.b2-goal{margin:18px 0 8px;display:grid;gap:10px}
.b2-goal-text{margin:0;font:500 18px/1.45 var(--serif);color:var(--b2-ink);text-wrap:pretty}
.b2-goal-skills{margin:0;padding:0;list-style:none;display:grid;gap:4px;color:var(--b2-muted);font-size:15px}
.b2-goal-skills li::before{content:"–";margin-right:8px;color:var(--b2-green)}
.b2-goal-done{margin:0;color:var(--b2-green);font-weight:600}
.b2-goal-stars{display:flex;align-items:center;gap:10px;color:var(--b2-muted);font-size:14px;font-variant-numeric:tabular-nums}
.b2-stars{display:inline-flex;gap:2px;vertical-align:middle}
.b2-star{display:inline-flex;width:16px;height:16px}
.b2-star svg{width:100%;height:100%;fill:none;stroke:var(--b2-muted);stroke-width:1.6;stroke-linejoin:round}
.b2-star.is-on svg{fill:#e8a33c;stroke:#e8a33c}
.b2-stars.is-big{gap:6px;margin:4px 0 2px}
.b2-stars.is-big .b2-star{width:30px;height:30px}
.b2-step-meta{display:flex;align-items:center;gap:8px}
.b2-brief{margin:0 0 20px}
.b2-brief-do{margin:0;font-size:17px;line-height:1.45;color:var(--b2-ink);font-weight:500}
.b2-brief-why{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--b2-muted)}
.b2-task-read{margin:0 0 18px;font-size:16px;line-height:1.45;color:var(--b2-ink);font-weight:600}
.b2-extra{margin-top:26px;padding-top:18px;border-top:1px solid var(--b2-line)}

/* Пауза и «назад 5 с» рядом с «Далее» */
.b2-dockrow{display:flex;gap:10px;align-items:stretch;max-width:648px;margin:0 auto}
.b2-dockrow .b2-big{flex:1 1 auto;margin:0;max-width:none}
.b2-mini{display:flex;gap:8px}
.b2-mini[hidden]{display:none}
.b2-mini-btn{min-width:54px;min-height:54px;border-radius:var(--b2-r-sm);border:1.5px solid var(--b2-line);background:var(--b2-paper);color:var(--b2-ink);font:700 16px var(--font-body);cursor:pointer}
.b2-mini-btn:hover{border-color:var(--b2-green);color:var(--b2-green)}
.b2-mini-btn:focus-visible{outline:2px solid var(--b2-green);outline-offset:2px}
.b2-mini-btn[hidden]{display:none}

/* Эквалайзер: полоски из общего анализатора спектра (b2.js, eqLoop).
   В покое стоят в спокойной форме, во время звука идут по спектру. */
.b2-eq{display:block;color:var(--b2-green);pointer-events:none}
.b2-eq-dock{width:88px;height:54px;align-self:center}
.b2-eq-wv{width:100%;height:30px;color:#ff5500;margin-top:2px}
@media (max-width:420px){.b2-eq-dock{width:56px}}

/* подсказка с переводом над новым словом */
.b2-w{position:relative;border-bottom:2px solid color-mix(in srgb,var(--b2-green) 45%,transparent);cursor:help;border-radius:2px}
.b2-w:focus-visible{outline:2px solid var(--b2-green);outline-offset:2px}

.w-tip { position: fixed; z-index: 1000; max-width: min(280px, calc(100vw - 16px)); padding: 7px 11px; border-radius: 8px;
  background: #1a1c1a; color: #fff; font: 500 14px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); }

.b2-bank .is-used{text-decoration:line-through;opacity:.45}
/* заголовок блока вопросов не висит пустым, пока его вопросы ещё впереди */
.b2-app .b2-extra:not(:has(.qa:not(.is-later)))>.kind{display:none}
.b2-app .b2-dict{width:100%;font:18px/1.5 var(--font-display);padding:10px 14px;margin:10px 0;border:1.5px solid var(--b2-line);border-radius:var(--b2-r-sm);background:var(--b2-paper);color:var(--b2-ink)}
.b2-app .b2-dict.good{border-color:var(--b2-green);background:var(--b2-green-soft)}
.b2-app .b2-dict.bad{border-color:var(--b2-red);background:var(--b2-red-soft)}
.b2-app .b2-match{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.b2-app .b2-match>div{display:flex;flex-direction:column;gap:8px}
.b2-app .b2-match .b2-m{width:100%;min-height:52px;margin:0}
/* номера реплик — там, где урок «Opbouw» ссылается на строки разговора */
.b2-app .bubble[data-n] b::after{content:" · " attr(data-n);font-weight:400;opacity:.55;font-size:12px}

.b2-app .b2-av:empty{display:none}
.b2-app .b2-av .tc-avatar{width:120px;margin:0 0 10px}
.b2-app pre b{font-weight:700;color:var(--b2-green)}
.b2-route{font:600 13.5px var(--font-body);color:var(--b2-green);text-decoration:none;white-space:nowrap}.b2-route:hover{text-decoration:underline}

/* ---------- компьютер: та же оболочка, что у A0 → B1 ----------
   Боковое меню, широкая колонка и крупный заголовок юнита. Во время урока
   (is-player) меню уходит, как и в A0 → B1. Телефон не меняется. */
@media (min-width:900px){
  .tc-shell:has(.b2-app.is-player) .tc-side{display:none}
  .tc-col .b2-app:not(.is-player) .b2-main{max-width:1180px;padding:40px 30px calc(var(--b2-dock-h) + 56px)}
  .tc-col .b2-app:not(.is-player) .b2-top{padding-left:56px;padding-right:56px}
  .tc-col .b2-app:not(.is-player) .b2-hello{margin:8px 0 22px}
  .tc-col .b2-app:not(.is-player) .b2-hello .kind{font-size:13px;letter-spacing:.12em;color:var(--teal-text,var(--b2-green))}
  .tc-col .b2-app:not(.is-player) .b2-hello h1{font-size:clamp(44px,4.6vw,64px);letter-spacing:-.015em}
  .tc-col .b2-app:not(.is-player) .b2-hello .sub{font-size:18px}
  .tc-col .b2-app:not(.is-player) .b2-goal-text{font-size:17px;max-width:68ch}
  .tc-col .b2-app:not(.is-player) .b2-path{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;max-width:none}
  .tc-col .b2-app:not(.is-player) .b2-path::before{display:none}
  .tc-col .b2-app:not(.is-player) .b2-step-title{font-size:17px}
  .tc-shell:has(.tc-side) .b2-app:not(.is-player) .b2-dock{left:248px}
  .tc-col .b2-app:not(.is-player) .b2-dock .b2-big{max-width:928px}
  .tc-col .b2-app.has-tabs .b2-tabbar{display:none}
  .tc-col .b2-app.has-tabs .b2-main{padding-bottom:56px}
}

/* ---------- вид как у A0 → B1 ----------
   Тот же шрифт заголовков, оранжевый прогресс, бумажные карточки уроков.
   Сами уроки (is-player) не трогаем. */
.b2-app:not(.is-player) .b2-hello .kind{color:var(--teal-text);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px}
.b2-app:not(.is-player) .b2-hello h1{font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.b2-app:not(.is-player) .b2-bar-fill{background:var(--tc-orange)}
.b2-app:not(.is-player) .tc-today.tc-next{margin:18px 0 6px}
.b2-app:not(.is-player) .b2-step-title{font-family:var(--font-head);font-weight:400;font-size:19px}
.b2-app:not(.is-player) .b2-step-text{background:var(--paper,var(--b2-paper));border-radius:16px}
.b2-app:not(.is-player) .b2-step.is-next .b2-node{border-color:var(--tc-orange);color:var(--tc-orange);box-shadow:0 0 0 5px color-mix(in srgb,var(--tc-orange) 14%,transparent)}
.b2-app:not(.is-player) .b2-step.is-next .b2-step-text{border-color:var(--tc-orange)}
.b2-app:not(.is-player) .b2-step-go{color:var(--tc-orange)}

/* Урок на компьютере: шире, задание слева (липкое), текст и вопросы справа.
   Телефон не меняется: aside и body там просто идут друг под другом. */
@media (min-width:900px){
  .b2-app.is-player .b2-main{max-width:1180px;padding-left:32px;padding-right:32px}
  .b2-app.is-player .b2-dock .b2-big,.b2-app.is-player .b2-dockrow{max-width:1116px}
  .b2-app.is-player .b2-split{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);column-gap:44px;align-items:start}
  .b2-app.is-player .b2-split>.b2-side{position:sticky;top:96px}
  .b2-app.is-player .b2-split .stanza p,.b2-app.is-player .b2-split .stanza{font-size:20px;line-height:1.6}
  /* Урок без задания слева (слова, тренажёр) — не растягивать на весь экран. */
  .b2-app.is-player.is-narrow .b2-main{max-width:820px}
  /* Собеседник в говорении — не миниатюра. */
  .b2-app.is-player .b2-av .tc-avatar{width:200px}
  .b2-app.is-player.is-narrow .b2-dock .b2-big,.b2-app.is-player.is-narrow .b2-dockrow{max-width:788px}
}

/* Схема урока: миниатюра, по нажатию — во весь экран. */
.b2-fig-thumb{margin:16px 0 0}
.b2-fig-btn{display:block;width:100%;aspect-ratio:16/10;padding:0;border:1px solid var(--b2-line);border-radius:12px;overflow:hidden;background:var(--b2-paper);cursor:zoom-in;position:relative}
.b2-fig-btn iframe{position:absolute;left:0;top:0;width:300%;height:300%;border:0;transform:scale(.3333);transform-origin:0 0;pointer-events:none}
.b2-fig-thumb figcaption{margin-top:6px;font-size:13px;color:var(--b2-muted)}
.b2-fig-dlg{width:min(1100px,94vw);height:min(760px,90vh);padding:0;border:0;border-radius:16px;overflow:hidden;background:var(--b2-paper)}
.b2-fig-dlg::backdrop{background:rgba(20,24,22,.55)}
.b2-fig-dlg iframe{width:100%;height:100%;border:0}
.b2-fig-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:1px solid var(--b2-line);background:var(--b2-paper);display:grid;place-items:center;cursor:pointer;z-index:1}
@media (max-width:899px){
  .b2-fig-thumb{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .b2-fig-thumb .b2-fig-btn{width:112px;flex:none}
  .b2-fig-thumb figcaption{margin:0}
}