/* Классно — дизайн-система v3. Описание решений: 05-code/demo/DESIGN.md */
:root {
  --canvas: #F4F4F8;
  --panel: #FFFFFF;
  --sunken: #F7F7FB;
  --hover: #F0F0F6;
  --border: #E7E7EF;
  --border-strong: #D6D6E3;
  --text: #14141F;
  --text-2: #4A4A5E;
  --text-3: #6E6E84;
  --brand: #5B4CE6;
  --brand-hover: #4E3FDB;
  --brand-shadow: #3F31BF;
  --brand-soft: #EFEDFF;
  --brand-line: #CFC9FF;
  --brand-ink: #FFFFFF;
  --ok: #16A36B;   --ok-soft: #E6F7EF;  --ok-shadow: #0E8455;  --ok-line: #A8E3C8;
  --bad: #E5484D;  --bad-soft: #FFEDEE; --bad-shadow: #C1353A; --bad-line: #F6B8BA;
  --wip: #D98E00;  --wip-soft: #FFF4DB;
  --sun: #FFB224;  --sun-soft: #FFF6E0;
  --bar: #14141F;  --bar-ink: #ECECF4;
  --on-color: #FFFFFF;
  --brand-deep: #5B4CE6;
  --sh-xs: 0 1px 2px rgb(20 20 31 / 5%);
  --sh-sm: 0 1px 2px rgb(20 20 31 / 5%), 0 4px 12px -4px rgb(20 20 31 / 8%);
  --sh-md: 0 2px 4px rgb(20 20 31 / 4%), 0 12px 32px -10px rgb(20 20 31 / 16%);
  --sh-lg: 0 24px 60px -18px rgb(20 20 31 / 28%);
  --r-xs: 10px; --r-sm: 14px; --r: 18px; --r-lg: 24px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0C0C12; --panel: #15151E; --sunken: #1B1B26; --hover: #22222F; --border: #2A2A38; --border-strong: #3A3A4C;
    --text: #F2F2F7; --text-2: #BDBDD0; --text-3: #8E8EA6;
    --brand: #8B7FFF; --brand-hover: #9D93FF; --brand-shadow: #5A4DD8; --brand-soft: #231F42; --brand-line: #3F3780; --brand-ink: #0C0C12;
    --ok: #3DD68C; --ok-soft: #0F2E1F; --ok-shadow: #1F9A5E; --ok-line: #1D5A3C;
    --bad: #FF6B70; --bad-soft: #36151A; --bad-shadow: #B8434A; --bad-line: #6B2A30;
    --wip: #F5B83D; --wip-soft: #33270C; --sun: #FFC247; --sun-soft: #33280C;
    --bar: #050508; --bar-ink: #DCDCE8; --on-color: #0C0C12; --brand-deep: #3A2F9E;
    --sh-xs: 0 1px 2px rgb(0 0 0 / 40%); --sh-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%);
    --sh-md: 0 2px 4px rgb(0 0 0 / 30%), 0 12px 32px -10px rgb(0 0 0 / 60%); --sh-lg: 0 24px 60px -18px rgb(0 0 0 / 70%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0C0C12; --panel: #15151E; --sunken: #1B1B26; --hover: #22222F; --border: #2A2A38; --border-strong: #3A3A4C;
  --text: #F2F2F7; --text-2: #BDBDD0; --text-3: #8E8EA6;
  --brand: #8B7FFF; --brand-hover: #9D93FF; --brand-shadow: #5A4DD8; --brand-soft: #231F42; --brand-line: #3F3780; --brand-ink: #0C0C12;
  --ok: #3DD68C; --ok-soft: #0F2E1F; --ok-shadow: #1F9A5E; --ok-line: #1D5A3C;
  --bad: #FF6B70; --bad-soft: #36151A; --bad-shadow: #B8434A; --bad-line: #6B2A30;
  --wip: #F5B83D; --wip-soft: #33270C; --sun: #FFC247; --sun-soft: #33280C;
  --bar: #050508; --bar-ink: #DCDCE8; --on-color: #0C0C12; --brand-deep: #3A2F9E;
  --sh-xs: 0 1px 2px rgb(0 0 0 / 40%); --sh-sm: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 12px -4px rgb(0 0 0 / 50%);
  --sh-md: 0 2px 4px rgb(0 0 0 / 30%), 0 12px 32px -10px rgb(0 0 0 / 60%); --sh-lg: 0 24px 60px -18px rgb(0 0 0 / 70%);
}

/* ============================================================ база */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--canvas); color: var(--text); }
body { margin: 0; font: 500 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.18; text-wrap: balance; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(26px, 2.8vw, 34px); }
h2 { font-size: 20px; letter-spacing: -0.015em; }
h3 { font-size: 16px; letter-spacing: -0.01em; }
p { margin: 0; }
.t2 { color: var(--text-2); } .t3 { color: var(--text-3); }
.small { font-size: 13px; } .xs { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.ico { display: inline-flex; width: 1.2em; height: 1.2em; flex: none; }
.ico svg { width: 100%; height: 100%; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }

/* ============================================================ появление и движение */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes slideUp { from { transform: translateY(100%); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--brand-line), var(--sh-xs); } 40% { box-shadow: 0 0 0 5px var(--brand-soft), var(--sh-xs); } 100% { box-shadow: 0 0 0 0 transparent, var(--sh-xs); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
@keyframes drawerIn { from { transform: translateX(28px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.enter > * { animation: fadeUp .32s var(--ease) both; }
.enter > *:nth-child(2) { animation-delay: .04s; } .enter > *:nth-child(3) { animation-delay: .08s; } .enter > *:nth-child(4) { animation-delay: .12s; }
.stagger > * { animation: fadeUp .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
.pop { animation: pop .26s var(--spring); }
.shake { animation: shake .36s ease; }
.glow { animation: glow .9s var(--ease); }

/* ============================================================ демо-панель */
.demobar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 16px; background: var(--bar); color: var(--bar-ink); font-size: 13px; }
.demo-tag { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; margin-right: auto; }
.demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgb(255 178 36 / 18%); }
.demobar.live .demo-dot { background: #3DD68C; box-shadow: 0 0 0 4px rgb(61 214 140 / 20%); }
.demo-group { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.demo-label { opacity: .6; white-space: nowrap; }
.seg-ctl { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(255 255 255 / 8%); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.seg-ctl button { border: 0; background: none; color: inherit; padding: 6px 12px; border-radius: 9px; font-weight: 700; white-space: nowrap; opacity: .7; transition: background .2s var(--ease), color .2s, opacity .2s; }
.seg-ctl button:hover { opacity: 1; }
.seg-ctl button[aria-pressed="true"] { background: #FFFFFF; color: #14141F; opacity: 1; }
.demo-select { background: rgb(255 255 255 / 8%); border: 0; color: inherit; border-radius: 10px; padding: 6px 10px; font-weight: 700; }
.demo-select option { color: #14141F; }
.theme-btn { display: inline-flex; align-items: center; gap: 7px; border: 0; background: rgb(255 255 255 / 8%); color: inherit; border-radius: 10px; padding: 6px 11px; font-weight: 700; font-size: 13px; transition: background .2s; }
.theme-btn:hover { background: rgb(255 255 255 / 16%); }
.theme-btn .ico { font-size: 15px; }

/* ============================================================ каркас */
.layout { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 48px); }
.side { min-width: 0; }
.side-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 16px 12px 16px 14px; }
.ws { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); border: 0; background: none; text-align: left; width: 100%; }
.ws:hover { background: var(--hover); }
.logo { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); display: grid; place-items: center; flex: none; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 18%); }
.logo svg { width: 20px; height: 20px; }
.ws b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.ws small { display: block; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.search { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-xs); border: 1px solid var(--border); background: var(--panel); color: var(--text-3); font-size: 13.5px; box-shadow: var(--sh-xs); }
.search kbd { margin-left: auto; font: 600 11px var(--font); padding: 2px 6px; border-radius: 6px; background: var(--sunken); border: 1px solid var(--border); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); padding: 10px 10px 4px; letter-spacing: .03em; }
.nav button { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r-xs); font-weight: 650; font-size: 14.5px; color: var(--text-2); transition: background .15s, color .15s; }
.nav button .ico { color: var(--text-3); font-size: 17px; transition: color .15s; }
.nav button:hover { background: var(--hover); color: var(--text); }
.nav button[aria-current="true"] { background: var(--panel); color: var(--text); box-shadow: var(--sh-sm); }
.nav button[aria-current="true"] .ico { color: var(--brand); }
.nav .count { margin-left: auto; font-size: 11.5px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--brand); color: var(--brand-ink); }
.nav .gdot { width: 8px; height: 8px; border-radius: 3px; margin: 0 5px; flex: none; }
.me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-sm); }
.me b { display: block; font-size: 13.5px; line-height: 1.2; }
.me span { font-size: 12px; color: var(--text-3); }

.main { min-width: 0; padding: 10px 10px 10px 0; }
.panel { background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--sh-sm); border: 1px solid var(--border); min-height: calc(100vh - 68px); padding: clamp(18px, 3vw, 36px) clamp(16px, 3.2vw, 44px) 56px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head .sub { color: var(--text-2); margin-top: 6px; }

/* режим урока: без бокового меню */
body.focus .layout { grid-template-columns: minmax(0, 1fr); }
body.focus .side { display: none; }
body.focus .main { padding: 0; }
body.focus .panel { border-radius: 0; border: 0; box-shadow: none; min-height: calc(100vh - 48px); padding: 0; background: var(--canvas); }

/* ============================================================ компоненты */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
.card.soft { background: var(--sunken); border-color: transparent; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--border-strong); background: var(--panel); padding: 9px 15px; border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; transition: background .15s, border-color .15s, transform .12s var(--ease), box-shadow .15s; box-shadow: var(--sh-xs); }
.btn:hover { border-color: var(--text-3); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: transparent; box-shadow: 0 1px 2px rgb(63 49 191 / 30%), inset 0 1px 0 rgb(255 255 255 / 16%); }
.btn.primary:hover { background: var(--brand-hover); }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.sm { padding: 6px 11px; font-size: 13px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text-2); font-size: 17px; transition: background .15s, border-color .15s; }
.icon-btn:hover { background: var(--hover); color: var(--text); }

/* тактильная кнопка (как у Duolingo) */
.btn3d { --c: var(--brand); --s: var(--brand-shadow); display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 14px; padding: 13px 24px; min-width: 170px; background: var(--c); color: var(--on-color); font-weight: 800; font-size: 15.5px; letter-spacing: .01em; box-shadow: 0 4px 0 var(--s); transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, filter .15s; }
.btn3d:hover { filter: brightness(1.06); }
.btn3d:active { transform: translateY(4px); box-shadow: 0 0 0 var(--s); }
.btn3d.ok { --c: var(--ok); --s: var(--ok-shadow); }
.btn3d.bad { --c: var(--bad); --s: var(--bad-shadow); }
.btn3d.neutral { --c: var(--panel); --s: var(--border-strong); color: var(--text); border: 2px solid var(--border-strong); }
.btn3d:disabled { --c: var(--border); --s: var(--border-strong); color: var(--text-3); cursor: not-allowed; filter: none; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: var(--sunken); color: var(--text-2); white-space: nowrap; }
.pill .ico { font-size: 13px; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.wip { background: var(--wip-soft); color: var(--wip); }
.pill.brand { background: var(--brand-soft); color: var(--brand); }
.pill.sun { background: var(--sun-soft); color: #B7730A; }
:root[data-theme="dark"] .pill.sun { color: var(--sun); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live .dot { animation: blink 1.4s ease-in-out infinite; }

.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12.5px; flex: none; letter-spacing: .02em; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.faces { display: flex; }
.faces .avatar { width: 30px; height: 30px; font-size: 11px; margin-left: -7px; box-shadow: 0 0 0 2px var(--panel); }
.faces .avatar:first-child { margin-left: 0; }
.meter { height: 6px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .5s var(--ease); }
.ring circle.v { transition: stroke-dasharray .6s var(--ease), stroke .3s; }

.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.field input, .field textarea, .field select, .input { border: 1px solid var(--border-strong); background: var(--panel); border-radius: 12px; padding: 10px 12px; color: var(--text); font-weight: 500; font-size: 14.5px; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.field textarea { min-height: 130px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.65; }
.help { font-size: 12.5px; color: var(--text-3); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--text-3); font-weight: 700; padding: 0 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 13px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--sunken); }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
.person { display: flex; align-items: center; gap: 10px; font-weight: 700; }

/* ============================================================ ученик: главная */
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 22px; padding: 24px; border-radius: var(--r-lg); background: var(--brand-deep); color: #fff; position: relative; overflow: hidden; }
.next::before { content: ""; position: absolute; width: 360px; height: 360px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 16%), transparent 65%); pointer-events: none; }
.next .eyebrow { color: rgb(255 255 255 / 72%); }
.next h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 8px 0 6px; }
.next .meta { color: rgb(255 255 255 / 82%); font-size: 14px; }
.next .faces .avatar { box-shadow: 0 0 0 2px var(--brand-deep); }
.next .btn3d { --c: #FFFFFF; --s: rgb(0 0 0 / 22%); color: var(--brand-deep); }
.next .count { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; background: rgb(255 255 255 / 14%); padding: 6px 12px; border-radius: 99px; }
.path { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 16%); }
.path .step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; }
.path .step i { width: 28px; height: 28px; border-radius: 9px; background: rgb(255 255 255 / 16%); display: grid; place-items: center; font-style: normal; font-size: 14px; flex: none; }
.path .more { font-size: 12.5px; color: rgb(255 255 255 / 70%); padding-left: 38px; }
.streak { display: flex; align-items: center; gap: 14px; }
.streak .flame { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--sun-soft); color: var(--sun); font-size: 24px; }
.streak b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.week div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-3); font-weight: 700; }
.week i { width: 100%; max-width: 36px; aspect-ratio: 1; border-radius: 11px; background: var(--sunken); display: grid; place-items: center; font-style: normal; color: #fff; font-size: 14px; }
.week i.on { background: var(--sun); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 12%); }
.week i.today { background: transparent; border: 2px dashed var(--sun); }
.task-row { display: flex; align-items: center; gap: 14px; padding: 12px; margin-inline: -12px; border-radius: var(--r-sm); transition: background .15s; }
.task-row:hover { background: var(--sunken); }
.task-row .tb { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; }
.task-row b { display: block; font-size: 15px; }
.teacher-note { font-family: var(--hand); font-size: 24px; line-height: 1.25; color: var(--text); }

/* ============================================================ урок */
.title-select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-weight: 800; font-size: 15px; color: var(--text); padding: 0 22px 0 0; cursor: pointer; max-width: 100%; field-sizing: content; letter-spacing: -0.01em;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; border-radius: 6px; display: block; }
.title-select:hover { color: var(--brand); }
.title-select.big { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; padding-right: 28px; margin-top: 6px; background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; }
.title-select option { font-size: 15px; }
.tile .foot .btn { padding: 5px 9px; font-size: 12.5px; }
.lbar { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 12px clamp(12px, 2.4vw, 28px); background: color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter: blur(12px); }
.lbar-title { min-width: 0; }
.lbar-title b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbar-title small { font-size: 12.5px; color: var(--text-3); }
.lbar-right { display: flex; align-items: center; gap: 10px; }
.segs { grid-column: 1 / -1; display: flex; gap: 5px; }
.segs button { flex: 1; min-width: 14px; height: 30px; border: 0; background: none; padding: 0; position: relative; display: flex; align-items: center; }
.segs button::before { content: ""; width: 100%; height: 8px; border-radius: 99px; background: var(--border); transition: background .3s var(--ease), height .2s var(--ease); }
.segs button:hover::before { height: 12px; }
.segs button.done::before { background: var(--ok); }
.segs button.bad::before { background: var(--bad); }
.segs button.wip::before { background: var(--wip); }
.segs button[aria-current="true"]::before { background: var(--brand); height: 12px; box-shadow: 0 0 0 4px var(--brand-soft); }
.segs button:disabled { cursor: default; }
.segs .tip { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; background: var(--text); color: var(--panel); font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.segs button:hover .tip { opacity: 1; transform: translate(-50%, 0); }
.call { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--sh-xs); }
.call .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--sunken); font-size: 15px; }

.stage { max-width: 860px; margin: 0 auto; padding: 18px clamp(12px, 3vw, 24px) 140px; }
.task-card { background: var(--panel); border-radius: var(--r-lg); border: 1px solid var(--border); box-shadow: var(--sh-md); padding: clamp(20px, 3.4vw, 40px); }
.task-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.type-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 17px; flex: none; }
.task-title { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 8px; }
.task-hint { color: var(--text-2); font-size: 15px; margin-bottom: 26px; }

.checkbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; border-top: 1px solid var(--border); background: var(--panel); padding: 16px clamp(12px, 3vw, 28px) calc(16px + env(safe-area-inset-bottom, 0px)); transition: background .25s var(--ease), border-color .25s; }
.checkbar-in { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.checkbar.ok { background: var(--ok-soft); border-color: var(--ok-line); }
.checkbar.bad { background: var(--bad-soft); border-color: var(--bad-line); }
.fb { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; animation: fadeUp .25s var(--ease); }
.fb .fb-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); font-size: 22px; flex: none; box-shadow: var(--sh-sm); }
.checkbar.ok .fb-ico { color: var(--ok); } .checkbar.bad .fb-ico { color: var(--bad); }
.fb b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.checkbar.ok .fb b { color: var(--ok); } .checkbar.bad .fb b { color: var(--bad); }
.fb span { font-size: 13.5px; color: var(--text-2); }

/* варианты ответа */
.opt { --b: var(--border-strong); position: relative; display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--b); background: var(--panel); color: var(--text); border-radius: 14px; padding: 10px 16px; font-weight: 700; font-size: 16.5px; box-shadow: 0 3px 0 var(--b); transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, background .15s, border-color .15s, color .15s; }
.opt:hover:not(:disabled) { background: var(--sunken); }
.opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--b); }
.opt[aria-pressed="true"], .opt.sel { --b: var(--brand-line); background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.opt.ok { --b: var(--ok-line); background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.opt.bad { --b: var(--bad-line); background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.opt:disabled { cursor: default; }
.opt .kbd { font-size: 11.5px; font-weight: 800; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid currentColor; display: grid; place-items: center; opacity: .55; }
.bank { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.lines { display: flex; flex-direction: column; gap: 16px; font-size: 19px; }
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; line-height: 1.4; }
.line .no { color: var(--text-3); font-size: 14px; font-weight: 700; width: 20px; font-variant-numeric: tabular-nums; }
.slot { min-width: 88px; height: 42px; padding: 0 14px; border-radius: 12px; border: 2px dashed var(--border-strong); background: var(--sunken); color: var(--text); font-weight: 800; font-size: 17px; transition: border-color .15s, background .15s; }
.slot.target { border-color: var(--brand); border-style: solid; background: var(--brand-soft); }
.slot.filled { border-style: solid; border-color: var(--brand-line); background: var(--panel); color: var(--brand); box-shadow: 0 2px 0 var(--brand-line); }
.slot.ok { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.slot.bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); color: var(--bad); box-shadow: none; }
.slot:disabled { cursor: default; }
.qs { display: flex; flex-direction: column; gap: 26px; }
.q { font-size: 19px; font-weight: 700; margin-bottom: 12px; display: flex; gap: 10px; }
.q .no { color: var(--text-3); }
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.match .col { display: flex; flex-direction: column; gap: 12px; }
.match .opt { justify-content: space-between; text-align: left; min-height: 54px; }
.match .opt.paired { background: color-mix(in srgb, var(--pc) 16%, var(--panel)); border-color: color-mix(in srgb, var(--pc) 70%, var(--border-strong)); --b: color-mix(in srgb, var(--pc) 45%, var(--border-strong)); color: var(--text); }
.match .tag { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #14141F; background: var(--pc); flex: none; }
.tray { min-height: 66px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; border: 2px dashed var(--border-strong); margin-bottom: 20px; transition: border-color .2s; }
.tray.has { border-style: solid; border-color: var(--border); background: var(--sunken); }
.tray .ph { color: var(--text-3); padding-left: 6px; }
.prompt { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.vocab { display: flex; flex-direction: column; }
.vrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
.vrow:last-child { border-bottom: 0; }
.vocab.words .vrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; }
.vocab.words .act { justify-content: flex-end; }
.vrow .w { font-size: 18px; font-weight: 800; }
.vrow .tr { color: var(--text-2); }
.vrow .act { display: flex; gap: 8px; }
.save { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border-strong); background: var(--panel); border-radius: 10px; padding: 7px 12px; font-size: 13px; font-weight: 700; color: var(--text-2); transition: all .15s; }
.save:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.save.on { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.notes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.note { border-radius: var(--r); padding: 18px; background: var(--sunken); }
.note h3 { margin-bottom: 6px; }
.note p { color: var(--text-2); font-size: 14.5px; }
.note code { display: inline-block; margin-top: 12px; font: 600 13px/1.5 var(--mono); padding: 6px 10px; border-radius: 9px; background: var(--panel); color: var(--brand); border: 1px solid var(--border); white-space: pre-wrap; }
.intro-big { font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin: 6px 0 12px; }
.intro-sub { font-size: 17px; color: var(--text-2); max-width: 52ch; }
.tr-list { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.tr-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 30px; align-items: center; gap: 14px; }
.tr-row .qw { font-size: 17px; font-weight: 800; padding: 10px 14px; border-radius: 12px; background: var(--sunken); text-align: center; }
.tr-row input { height: 48px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--panel); padding: 0 14px; font-size: 17px; font-weight: 700; color: var(--text); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.tr-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tr-row.ok input { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.tr-row.bad input { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.tr-row .mk { font-size: 20px; }
.ide { border-radius: 16px; overflow: hidden; background: #111120; border: 1px solid #262640; box-shadow: var(--sh-sm); }
.ide-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #181830; }
.ide-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3A3A58; }
.ide-bar span { margin-left: 8px; font: 600 12.5px var(--mono); color: #A9A9D6; }
.editor { display: block; width: 100%; min-height: 230px; resize: vertical; tab-size: 2; border: 0; margin: 0; font: 14px/1.7 var(--mono); background: #111120; color: #E8E8FF; padding: 16px 18px; caret-color: #8B7FFF; }
.editor:focus { outline: none; }
.tests { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.test { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--sunken); font: 13px/1.4 var(--mono); transition: background .2s; }
.test .mk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font); flex: none; background: var(--border); color: var(--text-3); }
.test.ok { background: var(--ok-soft); } .test.ok .mk { background: var(--ok); color: #fff; }
.test.bad { background: var(--bad-soft); } .test.bad .mk { background: var(--bad); color: #fff; }
.test .res { margin-left: auto; color: var(--text-3); text-align: right; }
.test.bad .res { color: var(--bad); }

.hint-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r); background: var(--sun-soft); margin-bottom: 14px; animation: fadeUp .3s var(--ease); }
.hint-card .who { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.hint-card p { font-family: var(--hand); font-size: 25px; line-height: 1.2; color: var(--text); }
.showcase { padding: 14px 16px; border-radius: var(--r); background: var(--brand-soft); margin-bottom: 14px; animation: fadeUp .3s var(--ease); }

.burst { position: fixed; pointer-events: none; z-index: 70; }
.burst i { position: absolute; width: 9px; height: 9px; border-radius: 3px; animation: burst .75s var(--ease) forwards; }

/* ============================================================ учитель: урок */
.tlayout { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 18px; padding: 8px clamp(12px, 2.4vw, 28px) 40px; align-items: start; }
.tlayout .task-card { padding: 22px; box-shadow: var(--sh-sm); position: sticky; top: 108px; }
.tlayout .task-title { font-size: 20px; }
.tlayout .task-card .lines, .tlayout .task-card .q, .tlayout .task-card .prompt { font-size: 16px; }
.tlayout .task-card .opt { font-size: 14.5px; padding: 7px 12px; }
.tlayout .task-card .slot { height: 36px; font-size: 15px; min-width: 70px; }
.tlayout .task-card .intro-big { font-size: 26px; }
.tlayout .task-card .editor { min-height: 170px; font-size: 13px; }
.tlayout .task-card .match { gap: 8px 12px; }
.tlayout .task-card .match .opt { min-height: 42px; }
.tlayout .task-card .notes { grid-template-columns: 1fr; }
.class-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dist { display: flex; height: 10px; border-radius: 99px; overflow: hidden; gap: 3px; margin: 0 0 14px; }
.dist i { display: block; height: 100%; border-radius: 99px; transition: flex-grow .5s var(--ease); min-width: 0; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border: 1px solid var(--border); background: var(--panel); border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--text-2); display: inline-flex; gap: 7px; align-items: center; transition: all .15s; }
.filters button b { font-variant-numeric: tabular-nums; color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--text); color: var(--panel); border-color: var(--text); }
.filters button[aria-pressed="true"] b { color: var(--panel); }
.filters .sw { width: 8px; height: 8px; border-radius: 50%; }
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 12px; text-align: left; width: 100%; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; box-shadow: var(--sh-xs); transition: border-color .15s, transform .15s var(--ease), box-shadow .2s; }
.tile:hover { border-color: var(--brand-line); transform: translateY(-2px); box-shadow: var(--sh-md); }
.tile.spot { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tile .top { display: flex; align-items: center; gap: 10px; }
.tile .top b { font-size: 14.5px; display: block; }
.tile .top small { font-size: 12px; color: var(--text-3); }
.tile .ans { font-size: 14px; min-height: 40px; }
.tile .foot { display: flex; flex-wrap: wrap; gap: 6px; }
.tile .foot .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
.tile .foot span { font-size: 12.5px; color: var(--text-3); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.pring { position: relative; width: 40px; height: 40px; flex: none; }
.pring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pring .avatar { position: absolute; inset: 5px; width: 30px; height: 30px; font-size: 11px; }
.help-dot { position: absolute; right: -2px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 2px var(--panel); }
.ans .chips, .rv-ans .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ans .c, .rv-ans .c { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--sunken); color: var(--text-3); }
.ans .c.ok, .rv-ans .c.ok { background: var(--ok-soft); color: var(--ok); }
.ans .c.bad, .rv-ans .c.bad { background: var(--bad-soft); color: var(--bad); }
.ans .c small, .rv-ans .c small { font-size: 11px; opacity: .7; font-weight: 700; }
.ans pre, .rv-ans pre { margin: 0; font: 12px/1.55 var(--mono); white-space: pre-wrap; max-height: 150px; overflow: hidden; color: var(--text-2); background: var(--sunken); border-radius: 10px; padding: 8px 10px; }
.ans .muted, .rv-ans .muted { color: var(--text-3); font-size: 13px; }

/* ============================================================ методист */
.builder { display: grid; gap: 16px; grid-template-columns: 290px minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.outline { display: flex; flex-direction: column; gap: 2px; }
.oitem { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; border: 0; background: none; text-align: left; color: var(--text-2); transition: background .15s; }
.oitem:hover { background: var(--sunken); }
.oitem[aria-current="true"] { background: var(--brand-soft); color: var(--text); }
.oitem .n { width: 20px; font-weight: 800; font-size: 12.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.oitem .type-badge { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; background: var(--panel); border: 1px solid var(--border); }
.oitem[aria-current="true"] .type-badge { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.oitem b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oitem small { font-size: 12px; color: var(--text-3); }
.menu { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--sh-md); animation: fadeUp .2s var(--ease); }
.menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font-size: 13px; font-weight: 700; color: var(--text-2); text-align: left; }
.menu button:hover { background: var(--brand-soft); color: var(--brand); }
.preview { border-radius: var(--r-lg); background: var(--canvas); padding: 14px; border: 1px solid var(--border); }
.preview .task-card { box-shadow: var(--sh-sm); padding: 22px; }
.preview .task-title { font-size: 20px; }
.preview .lines, .preview .q { font-size: 16px; }
.preview .opt { font-size: 14.5px; padding: 8px 12px; }
.preview .slot { height: 38px; min-width: 72px; font-size: 15px; }
.preview .match { gap: 8px 12px; }
.preview .intro-big, .drawer .intro-big, .tlayout .task-card .intro-big { font-size: 28px; }

/* ============================================================ управляющий */
.kpi { display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 12px; }
.kpi .v { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .d { font-size: 12.5px; color: var(--ok); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.spark { width: 100%; height: 38px; margin-top: 10px; }
.left-bars { display: inline-flex; gap: 3px; vertical-align: middle; }
.left-bars i { width: 7px; height: 16px; border-radius: 3px; background: var(--border); }
.left-bars i.on { background: var(--ok); }
.left-bars.wip i.on { background: var(--wip); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 12px; border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--border-strong); transition: transform .15s var(--spring); }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--text); }
.bp { border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; display: grid; grid-template-columns: 116px 1fr; min-height: 160px; background: var(--canvas); }
.bp-side { padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.bp-logo { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 11px; min-width: 0; }
.bp-logo i { width: 18px; height: 18px; border-radius: 6px; background: var(--brand); flex: none; }
.bp-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-nav { height: 9px; border-radius: 5px; background: var(--border); }
.bp-nav.on { background: var(--panel); box-shadow: inset 3px 0 0 var(--brand); }
.bp-main { margin: 8px 8px 8px 0; border-radius: 12px; background: var(--panel); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.bp-h { height: 12px; width: 60%; border-radius: 4px; background: var(--text); opacity: .85; }
.bp-btn { margin-top: auto; align-self: flex-start; height: 26px; width: 90px; border-radius: 8px; background: var(--brand); box-shadow: 0 3px 0 var(--brand-shadow); }

/* ============================================================ словарь */
.flip { perspective: 1200px; }
.flip-in { position: relative; min-height: 260px; transition: transform .55s var(--ease); transform-style: preserve-3d; }
.flip.on .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; border-radius: var(--r-lg); backface-visibility: hidden; border: 1px solid var(--border); box-shadow: var(--sh-md); }
.face.front { background: var(--panel); }
.face.back { background: var(--brand-deep); color: #fff; transform: rotateY(180deg); }
.face .w { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; }
.face small { display: block; margin-top: 10px; color: var(--text-3); font-weight: 700; }
.face.back small { color: rgb(255 255 255 / 75%); }
.segmented { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--sunken); gap: 2px; }
.segmented button { border: 0; background: none; padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.segmented button[aria-pressed="true"] { background: var(--panel); color: var(--text); box-shadow: var(--sh-xs); }

/* ============================================================ расписание */
.agenda { display: flex; flex-direction: column; }
.ag { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.ag:first-child { border-top: 0; }
.ag time { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ag time small { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
.ag-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-sm); background: var(--sunken); }
.ag.now .ag-card { background: var(--brand-soft); box-shadow: inset 0 0 0 1.5px var(--brand-line); }

/* ============================================================ шторка, тост */
.drawer-wrap { position: fixed; inset: 0; z-index: 50; background: rgb(12 12 18 / 40%); display: flex; justify-content: flex-end; animation: fade .2s ease; backdrop-filter: blur(2px); }
.drawer { position: relative; width: min(620px, 100%); height: 100%; overflow: auto; background: var(--canvas); padding: 24px 22px calc(26px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--sh-lg); animation: drawerIn .28s var(--ease); }
.drawer-close { position: absolute; right: 18px; top: 18px; }
.drawer .task-card { box-shadow: var(--sh-sm); padding: 22px; }
.drawer .task-title { font-size: 20px; }
.drawer .lines, .drawer .q { font-size: 16px; }
.hint-edit { width: 100%; border: 0; background: none; resize: vertical; font-family: var(--hand); font-size: 25px; line-height: 1.2; color: var(--text); padding: 0; }
.hint-edit:focus { outline: none; }
.toast { position: fixed; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: var(--text); color: var(--panel); padding: 11px 18px; border-radius: 14px; font-weight: 700; box-shadow: var(--sh-lg); max-width: calc(100% - 32px); animation: fadeUp .25s var(--ease); }
body.focus .toast { bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }

/* ============================================================ адаптив */
@media (max-width: 1280px) {
  .builder { grid-template-columns: 270px minmax(0, 1fr); }
  .builder .pcol { grid-column: 2; }
}
@media (max-width: 1080px) {
  .tlayout { grid-template-columns: minmax(0, 1fr); }
  .tlayout .task-card { position: static; }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side-inner { position: static; height: auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; }
  .side .search, .side .me, .side .nav-label, .side .ws small, .side .ws b, .side .groups { display: none; }
  .nav { flex-direction: row; gap: 4px; }
  .nav button { white-space: nowrap; padding: 8px 12px; }
  .main { padding: 0 8px 8px; }
  .panel { min-height: auto; }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder .pcol { grid-column: auto; }
  .next { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .demo-tag { width: 100%; }
  .demo-group { width: 100%; }
  .seg-ctl { flex: 1; }
  .lbar { grid-template-columns: auto auto minmax(0, 1fr); }
  .segs .tip { display: none; }
  .lbar-right .call { display: none; }
  .lbar-right { grid-column: 1 / -1; }
  .lbar-right:empty { display: none; }
  .lbar-right .btn3d { width: 100%; }
  .lbar-right .btn3d { min-width: 0; padding: 10px 14px; }
  .match { gap: 10px; }
  .match .opt { font-size: 15px; padding: 9px 12px; }
  .tr-row { grid-template-columns: 90px minmax(0, 1fr) 24px; gap: 10px; }
  .vrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vrow .act { grid-column: 1 / -1; }
  .checkbar-in { gap: 12px; }
  .checkbar .btn3d { width: 100%; }
  .stage { padding-bottom: 190px; }
  .ag { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ============================================================ урок-доска: этапы с эмодзи, доска, стикеры, реакции */
.lesson2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; padding: 10px clamp(12px, 2.4vw, 28px) 48px; align-items: start; }
.lesson2.with-class { grid-template-columns: minmax(0, 1fr) 340px; }
.rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 10px; padding: 6px 4px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: none; }
.rail button { position: relative; width: 62px; height: 62px; flex: none; border-radius: 20px; background: var(--panel); border: 1px solid var(--border); font-size: 28px; line-height: 1; display: grid; place-items: center; box-shadow: var(--sh-xs); transition: transform .18s var(--spring), box-shadow .2s, border-color .2s; }
.rail button:hover:not(:disabled) { transform: scale(1.07); }
.rail button[aria-current="true"] { border: 2px solid var(--brand); box-shadow: 0 0 0 5px var(--brand-soft), var(--sh-sm); transform: scale(1.04); }
.rail .n { position: absolute; left: -5px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--text); color: var(--panel); font: 800 11px var(--font); display: grid; place-items: center; }
.rail .st { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--canvas); display: grid; place-items: center; color: #fff; font: 800 10px var(--font); }
.rail .st.done { background: var(--ok); } .rail .st.bad { background: var(--bad); } .rail .st.wip { background: var(--wip); }
.rail .tip { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; background: var(--text); color: var(--panel); font: 700 12.5px var(--font); padding: 6px 10px; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; }
.rail button:hover .tip { opacity: 1; transform: translate(0, -50%); }
.rail button:disabled { cursor: default; }
.rail-add { border-style: dashed !important; color: var(--text-3); font-size: 22px !important; background: transparent !important; box-shadow: none !important; }

.board { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: 26px; box-shadow: var(--sh-md); overflow: hidden; }
.board-head { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.board-head .emo-h { width: 50px; height: 50px; border-radius: 16px; background: var(--sunken); display: grid; place-items: center; font-size: 28px; flex: none; }
.board-head h2 { font-size: 21px; }
.board-body { position: relative; padding: clamp(20px, 3vw, 36px); min-height: 440px; background-color: var(--panel); background-image: radial-gradient(var(--border) 1.3px, transparent 1.3px); background-size: 22px 22px; }
.board-grid { position: relative; z-index: 1; display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
.board-grid.two { grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr); align-items: start; }
.b-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.b-surface { background: var(--panel); border-radius: 18px; }
.b-h { font-size: clamp(26px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.b-p { font-size: 18px; line-height: 1.6; white-space: pre-line; color: var(--text); }
.b-note { background: var(--sun-soft); border-radius: 6px 6px 22px 6px; padding: 16px 18px; font-family: var(--hand); font-size: 25px; line-height: 1.25; transform: rotate(-.8deg); box-shadow: 0 10px 22px -14px rgb(120 80 0 / 45%); }
.meme { border-radius: 20px; aspect-ratio: 1 / 1; max-height: 360px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 18px 14px; text-align: center; color: #14141F; box-shadow: var(--sh-sm); overflow: hidden; }
.meme .cap { font-weight: 800; font-size: clamp(15px, 1.6vw, 19px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; text-wrap: balance; }
.meme .big { font-size: clamp(80px, 9vw, 120px); line-height: 1; filter: drop-shadow(0 10px 14px rgb(0 0 0 / 18%)); }
.art { position: relative; border-radius: 20px; aspect-ratio: 4 / 3; width: 100%; display: grid; place-items: center; overflow: hidden; box-shadow: var(--sh-sm); color: #14141F; }
.art .big { font-size: clamp(80px, 9vw, 120px); line-height: 1; }
.art .cap { position: absolute; left: 12px; bottom: 12px; background: rgb(255 255 255 / 88%); padding: 5px 11px; border-radius: 10px; font-weight: 800; font-size: 14px; }
.photo { border-radius: 20px; overflow: hidden; box-shadow: var(--sh-sm); position: relative; }
.photo img { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.photo .cap { position: absolute; left: 12px; bottom: 12px; background: rgb(255 255 255 / 88%); color: #14141F; padding: 5px 11px; border-radius: 10px; font-weight: 800; font-size: 14px; }
.mat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--sh-xs); }
.mat .fi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--sunken); flex: none; }
.mat b { display: block; font-size: 14.5px; line-height: 1.3; }
.mat small { color: var(--text-3); font-size: 12.5px; }
.b-task { position: relative; z-index: 1; margin-top: 26px; padding-top: 26px; border-top: 1.5px dashed var(--border-strong); }
.b-task-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.b-task-head .pill { font-size: 13px; }

.stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker { position: absolute; font-size: 46px; line-height: 1; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); user-select: none; -webkit-user-select: none; filter: drop-shadow(0 6px 8px rgb(0 0 0 / 15%)); animation: stick .35s var(--spring) both; }
@keyframes stick { from { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.2); opacity: 0; } }
.editable .sticker { pointer-events: auto; cursor: grab; }
.editable .sticker:active { cursor: grabbing; }
.editable .sticker:hover::after { content: "✕"; position: absolute; right: -10px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); color: var(--panel); font: 800 10px/18px var(--font); text-align: center; }
.reactions { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.react { position: absolute; bottom: 70px; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: floatUp 2.4s cubic-bezier(.2, .7, .3, 1) forwards; }
.react .e { font-size: 38px; line-height: 1; }
.react .w { font: 700 11px var(--font); background: var(--text); color: var(--panel); padding: 2px 7px; border-radius: 99px; white-space: nowrap; }
@keyframes floatUp { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 12% { transform: translateY(0) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-300px) scale(1); opacity: 0; } }

.dock { position: sticky; bottom: 16px; z-index: 6; margin: 22px auto 0; width: fit-content; max-width: 100%; display: flex; gap: 2px; padding: 6px; border-radius: 20px; background: var(--text); color: var(--panel); box-shadow: var(--sh-lg); overflow-x: auto; scrollbar-width: none; }
.dock button { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 8px 10px; border: 0; border-radius: 14px; background: none; color: inherit; font: 700 11.5px var(--font); white-space: nowrap; transition: background .15s, transform .15s var(--spring); }
.dock button .e { font-size: 22px; line-height: 1; }
.dock button:hover { background: rgb(255 255 255 / 12%); transform: translateY(-2px); }
:root[data-theme="dark"] .dock button:hover { background: rgb(0 0 0 / 10%); }
.dock.react-dock button { min-width: 48px; padding: 8px; }
.dock.react-dock button .e { font-size: 26px; }
.dock .sep { width: 1px; background: rgb(255 255 255 / 18%); margin: 6px 4px; }

.checkbar.inline { position: static; border-radius: 0; padding: 14px 22px; z-index: auto; }
.checkbar.inline .checkbar-in { max-width: none; }
body.focus .toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.lesson2 .klass { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.lesson2 .tiles { grid-template-columns: minmax(0, 1fr); }
.lesson2 .tile { padding: 12px; gap: 10px; }

/* выбор в шторке: эмодзи, мемы, картинки, шаблоны */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.pick-grid button { aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); font-size: 28px; transition: transform .15s var(--spring), border-color .15s; }
.pick-grid button:hover { transform: scale(1.1); border-color: var(--brand); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery button { border: 2px solid transparent; background: none; padding: 0; border-radius: 22px; transition: transform .15s var(--spring), border-color .15s; }
.gallery button:hover { transform: translateY(-3px); border-color: var(--brand); }
.gallery .meme, .gallery .art { max-height: none; }
.gallery .meme .big, .gallery .art .big { font-size: 56px; }
.gallery .meme .cap { font-size: 12px; }
.tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tpl button { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); transition: border-color .15s, transform .15s var(--ease), box-shadow .15s; }
.tpl button:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sh-md); }
.tpl .e { font-size: 30px; line-height: 1; flex: none; }
.tpl b { display: block; font-size: 14.5px; }
.tpl small { color: var(--text-3); font-size: 12.5px; line-height: 1.35; display: block; margin-top: 2px; }
.drawer h2 { margin-bottom: 4px; }
.drawer .lead { color: var(--text-2); margin-bottom: 18px; }
.upload { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border-radius: 16px; border: 2px dashed var(--border-strong); color: var(--text-2); font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; }
.upload:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.upload input { display: none; }

/* конструктор 2 */
.builder2 { display: grid; gap: 16px; grid-template-columns: 215px minmax(0, 1fr) 280px; align-items: start; }
.steps { display: flex; flex-direction: column; gap: 4px; }
.step-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 14px; border: 1px solid transparent; background: none; text-align: left; transition: background .15s; }
.step-item:hover { background: var(--sunken); }
.step-item[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand-line); }
.step-item .e { width: 42px; height: 42px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; font-size: 22px; flex: none; }
.step-item b { display: block; font-size: 14px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-item small { font-size: 12px; color: var(--text-3); }
.step-item .n { font: 800 12px var(--font); color: var(--text-3); width: 16px; text-align: center; }
.b-item { position: relative; border-radius: 18px; outline: 2px solid transparent; outline-offset: 6px; transition: outline-color .15s; }
.editable .b-item { cursor: pointer; }
.editable .b-item:hover { outline-color: var(--brand-line); }
.editable .b-item.sel { outline-color: var(--brand); }
.item-tools { position: absolute; right: 6px; top: -16px; display: none; gap: 2px; padding: 3px; border-radius: 11px; background: var(--text); box-shadow: var(--sh-md); z-index: 2; }
.item-tools button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--panel); display: grid; place-items: center; font-size: 13px; }
.item-tools button:hover { background: rgb(255 255 255 / 16%); }
.editable .b-item:hover .item-tools, .editable .b-item.sel .item-tools { display: flex; }
.emo-btn { width: 64px; height: 64px; border-radius: 20px; border: 1px dashed var(--border-strong); background: var(--sunken); font-size: 34px; display: grid; place-items: center; transition: transform .15s var(--spring), border-color .15s; }
.emo-btn:hover { transform: scale(1.06); border-color: var(--brand); }
.inspector { position: sticky; top: 16px; }
.empty-board { display: grid; place-items: center; text-align: center; gap: 8px; min-height: 260px; color: var(--text-3); }
.empty-board .e { font-size: 44px; }

@media (max-width: 1280px) {
  .builder2 { grid-template-columns: 230px minmax(0, 1fr); }
  .builder2 .inspector { grid-column: 1 / -1; position: static; }
  .lesson2.with-class { grid-template-columns: minmax(0, 1fr); }
  .lesson2.with-class .klass { position: static; max-height: none; }
  .lesson2 .tiles { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (max-width: 900px) {
  .builder2 { grid-template-columns: minmax(0, 1fr); }
  .steps { flex-direction: row; overflow-x: auto; }
  .step-item { width: auto; flex: none; }
  .step-item b { max-width: 120px; }
}
@media (max-width: 720px) {
  .lesson2, .lesson2.with-class { grid-template-columns: minmax(0, 1fr); }
  .lesson2.with-class .klass { grid-column: auto; }
  .rail { position: static; flex-direction: row; max-height: none; overflow-x: auto; padding: 6px 6px 8px; }
  .rail button { width: 54px; height: 54px; font-size: 24px; border-radius: 17px; }
  .rail .tip { display: none; }
  .board-grid.two { grid-template-columns: minmax(0, 1fr); }
  .board-body { padding: 18px 16px; min-height: 320px; }
  .sticker { font-size: 34px; }
  .dock button { min-width: 56px; padding: 7px 8px; }
}
.builder2 .intro-big { font-size: 26px; }
.builder2 .b-h { font-size: 24px; }
.builder2 .board-grid.two { grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr); }
.builder2 .meme .big, .builder2 .art .big { font-size: 72px; }
.builder2 .meme .cap { font-size: 13px; }
.builder2 .board-body { padding: 22px; }


/* ============================================================ путь урока: свёрнутая пилюля */
.stepper { position: relative; z-index: 30; }
.sp-sum { position: relative; display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 10px 0 6px; border-radius: 99px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--sh-xs); font: 800 13px var(--font); color: var(--text-2); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.sp-sum:hover, .stepper.open .sp-sum { border-color: var(--brand-line); box-shadow: var(--sh-sm); }
.sp-sum .e { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; line-height: 1; background: var(--sunken); }
.sp-sum .e.cur { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.sp-sum .e.nxt { opacity: .6; width: 26px; height: 26px; font-size: 14px; }
.sp-sum .arr { color: var(--text-3); font-size: 12px; }
.sp-sum .cnt { margin-left: 4px; }
.sp-sum .chev { color: var(--text-3); transition: transform .25s var(--ease); }
.stepper.open .chev, .stepper:hover .chev { transform: rotate(180deg); }
.sp-sum .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--brand); border-radius: 0 3px 3px 0; transition: width .45s var(--ease); }
.sp-pop { position: absolute; top: calc(100% + 8px); left: 0; width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow-y: auto; padding: 8px; border-radius: 20px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top left; transition: opacity .2s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; }
.stepper.open .sp-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease), transform .28s var(--ease), visibility 0s; }
@media (hover: hover) { .stepper:hover .sp-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease) .08s, transform .28s var(--ease) .08s, visibility 0s .08s; } }
.stepper::after { content: ""; position: absolute; left: 0; right: -40px; top: 100%; height: 12px; }
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 8px; }
.sp-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 12px; border: 0; background: none; text-align: left; font-size: 14px; color: var(--text); transition: background .12s; }
.sp-row:hover:not(:disabled) { background: var(--sunken); }
.sp-row[aria-current="true"] { background: var(--brand-soft); }
.sp-row .n { width: 16px; font: 800 12px var(--font); color: var(--text-3); text-align: center; flex: none; }
.sp-row .e { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; line-height: 1; background: var(--sunken); border: 2px solid transparent; flex: none; }
.sp-row.done .e { border-color: var(--ok); background: var(--ok-soft); }
.sp-row.bad .e { border-color: var(--bad); background: var(--bad-soft); }
.sp-row[aria-current="true"] .e { border-color: var(--brand); background: var(--panel); }
.sp-row .t { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row small { font-size: 12px; font-weight: 800; color: var(--brand); }
.sp-row:disabled { cursor: default; }
.sp-note { font-size: 12.5px; color: var(--text-3); padding: 8px 8px 4px; border-top: 1px solid var(--border); margin-top: 6px; }
.wait-teacher { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); padding: 10px 14px; border-radius: 12px; background: var(--sunken); }

/* ============================================================ чат */
.chat-fab { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; border: 0; background: var(--text); color: var(--panel); font: 800 14px var(--font); box-shadow: var(--sh-lg); transition: transform .2s var(--spring); animation: fadeUp .3s var(--ease); }
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab .badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--bad); color: #fff; font-size: 11.5px; display: grid; place-items: center; animation: pop .3s var(--spring); }
.chat-panel { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 41; width: min(370px, calc(100vw - 32px)); height: min(520px, calc(100vh - 150px)); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--sh-lg); overflow: hidden; transform-origin: bottom right; animation: chatIn .28s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.chat-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--canvas); }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 86%; animation: fadeUp .22s var(--ease); }
.msg .who { font-size: 11.5px; font-weight: 800; color: var(--text-3); margin: 0 0 3px 2px; }
.msg .bubble { background: var(--panel); border: 1px solid var(--border); border-radius: 16px 16px 16px 5px; padding: 8px 12px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.msg.teacher .bubble { background: var(--ok-soft); border-color: transparent; }
.msg.me { align-self: flex-end; }
.msg.me .bubble { background: var(--brand); color: #fff; border-color: transparent; border-radius: 16px 16px 5px 16px; }
.chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-form input { flex: 1; min-width: 0; border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; background: var(--panel); color: var(--text); font-size: 14px; }
.chat-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ============================================================ перетаскивание */
.dnd .b-item { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.dnd .b-item:active { cursor: grabbing; }
.b-item.dragging { opacity: .3; }
.drag-ghost { position: fixed; z-index: 90; margin: 0; pointer-events: none; transform: rotate(-1.2deg) scale(.98); box-shadow: var(--sh-lg); border-radius: 18px; opacity: .96; background: var(--panel); }
.drag-ghost .item-tools { display: none !important; }
.drop-ph { border: 2px dashed var(--brand); border-radius: 18px; background: var(--brand-soft); animation: fade .15s ease; }
.col-drop { min-height: 120px; border: 2px dashed var(--border-strong); border-radius: 18px; display: grid; place-items: center; text-align: center; padding: 12px; color: var(--text-3); font-size: 13px; font-weight: 700; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.sorting .col-drop { border-color: var(--brand-line); }
.item-tools .grip { display: grid; place-items: center; width: 24px; color: var(--panel); opacity: .8; font-size: 15px; cursor: grab; }
.steps .step-item { touch-action: none; }
.steps .step-item.dragging { opacity: .3; }
.steps .drop-ph { border-radius: 14px; }
.sorting { user-select: none; -webkit-user-select: none; }
body.focus .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .sp-pop { position: fixed; left: 12px; right: 12px; top: auto; width: auto; }
  .chat-fab { padding: 11px 15px; }
  .chat-panel { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: min(520px, calc(100vh - 120px)); }
}

/* ============================================================ кнопки справа внизу: реакции + чат */
.fabs { position: fixed; right: 20px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: flex-end; gap: 10px; }
.react-wrap { position: relative; }
.react-fab { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); font-size: 22px; line-height: 1; display: grid; place-items: center; box-shadow: var(--sh-lg); transition: transform .2s var(--spring), background .2s; animation: fadeUp .3s var(--ease); }
.react-fab:hover { transform: translateY(-2px) scale(1.05); }
.react-wrap.open .react-fab { background: var(--text); color: var(--panel); font-size: 16px; font-weight: 800; }
.react-pop { position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column-reverse; gap: 6px; padding: 6px; border-radius: 99px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9); transform-origin: bottom center; transition: opacity .18s var(--ease), transform .25s var(--spring), visibility 0s linear .25s; }
.react-wrap.open .react-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .18s var(--ease), transform .25s var(--spring), visibility 0s; }
.react-pop button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; display: grid; place-items: center; transition: transform .15s var(--spring), background .15s; }
.react-pop button:hover { transform: scale(1.25); background: var(--sunken); }
.react-wrap.open .react-pop button { animation: fadeUp .25s var(--ease) both; animation-delay: calc(var(--i) * 25ms); }
@media (max-width: 640px) { .fabs { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } }

/* реакции: полоса справа внизу → до середины экрана */
.react-lane { position: fixed; right: 18px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); width: 120px; height: 48vh; z-index: 35; pointer-events: none; }
.react-lane .react { position: absolute; bottom: 0; left: auto; animation: laneUp 2.7s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes laneUp {
  0% { transform: translate(0, 16px) scale(.5); opacity: 0; }
  12% { transform: translate(0, 0) scale(1.12); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(var(--drift, 0px), -46vh) scale(.95); opacity: 0; }
}

/* изменение размера элемента доски */
.b-col > * { max-width: 100%; }
input[type="range"] { accent-color: var(--brand); width: 100%; }
/* мемы и иллюстрации масштабируются вместе с размером элемента */
.meme, .art { container-type: inline-size; }
.meme .big, .art .big, .builder2 .meme .big, .builder2 .art .big, .gallery .meme .big, .gallery .art .big { font-size: clamp(30px, 38cqi, 130px); }
.meme .cap, .builder2 .meme .cap, .gallery .meme .cap { font-size: clamp(9px, 7.2cqi, 20px); }
.art .cap { font-size: clamp(10px, 5.5cqi, 14px); }

/* ---------- доска-холст v3.2: свободные координаты, как слайд в Canva ---------- */
.board-body { min-height: 0; }
.canvas-wrap { container-type: inline-size; }
.canvas { position: relative; width: 100%; container-type: inline-size; aspect-ratio: 100 / var(--ch, 40); }
.canvas.edit { outline: 1.5px dashed transparent; outline-offset: 10px; border-radius: 4px; transition: outline-color .2s; }
.canvas.edit:hover, .canvas.moving, .canvas.resizing { outline-color: var(--border-strong); }
.canvas-wrap + .b-inline, .canvas-wrap + .b-task { margin-top: 30px; }
.b-inline .notes { margin-top: 0; }
.ci { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); height: calc(var(--h) * 1cqw); }
.ci.k-text { height: auto; min-height: calc(var(--h) * 1cqw); display: flex; flex-direction: column; font-size: max(11px, calc(var(--fs, 2.1) * 1cqw)); }
.ci.s-h { --fs: 3.6; } .ci.s-note { --fs: 2.9; }
.ci .b-h, .ci .b-p, .ci .b-note { font-size: 1em; }
.ci .b-note { flex: 1; padding: .5em .7em; }
.ci > .meme, .ci > .art, .ci > .photo { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; container-type: size; }
.ci .photo img { height: 100%; max-height: none; object-fit: cover; }
.canvas .meme { padding: 6cqmin 5cqmin; border-radius: max(10px, 7cqmin); }
.canvas .meme .big, .canvas .art .big { font-size: 44cqmin; }
.canvas .meme .cap { font-size: max(8px, 8.5cqmin); }
.canvas .art .cap, .canvas .photo .cap { font-size: max(9px, 6cqmin); left: 5cqmin; bottom: 5cqmin; }
.canvas .art, .canvas .photo { border-radius: max(10px, 7cqmin); }
.ci.k-material { font-size: max(10px, calc(var(--fs, 1.75) * 1cqw)); }
.ci .mat { height: 100%; padding: .45em .7em; gap: .6em; border-radius: .8em; overflow: hidden; }
.ci .mat .grow { min-width: 0; }
.ci .mat b { font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci .mat small { font-size: .8em; }
.ci .mat .fi { font-size: 1.15em; width: 1.9em; height: 1.9em; border-radius: .5em; }
.ci .mat .btn.sm { font-size: max(11px, .8em); padding: .4em .8em; }
.ci.k-sticker { display: grid; place-items: center; }
.ci .stk { font-size: calc(var(--w) * .82cqw); line-height: 1; transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 .08em .1em rgb(0 0 0 / 16%)); user-select: none; -webkit-user-select: none; }

/* редактирование */
.canvas.edit .ci { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.canvas.edit .ci::before { content: ""; position: absolute; inset: -5px; border: 1.5px solid transparent; border-radius: 8px; pointer-events: none; transition: border-color .12s; z-index: 1; }
.canvas.edit .ci:hover::before { border-color: var(--brand-line); }
.canvas.edit .ci.sel::before, .canvas.moving .ci.sel::before { border-color: var(--brand); }
.canvas.edit .ci.sel { z-index: 30; }
.canvas.moving, .canvas.moving .ci { cursor: grabbing; }
.canvas.edit .ci a, .canvas.edit .ci button:not(.hd) { cursor: pointer; }
.hd { position: absolute; z-index: 2; display: none; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 2.5px solid var(--brand); box-shadow: 0 1px 4px rgb(0 0 0 / 20%); touch-action: none; }
.hd::after { content: ""; position: absolute; inset: -9px; }
.ci.sel .hd { display: block; }
.hd.nw { left: -12px; top: -12px; cursor: nwse-resize; } .hd.se { right: -12px; bottom: -12px; cursor: nwse-resize; }
.hd.ne { right: -12px; top: -12px; cursor: nesw-resize; } .hd.sw { left: -12px; bottom: -12px; cursor: nesw-resize; }
.hd.n, .hd.s { left: calc(50% - 11px); width: 22px; height: 10px; border-radius: 6px; cursor: ns-resize; }
.hd.n { top: -10px; } .hd.s { bottom: -10px; }
.hd.e, .hd.w { top: calc(50% - 11px); width: 10px; height: 22px; border-radius: 6px; cursor: ew-resize; }
.hd.e { right: -10px; } .hd.w { left: -10px; }
.canvas.moving .hd { opacity: 0; }
.ci-tools { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); z-index: 3; display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--text); color: var(--panel); box-shadow: var(--sh-lg); white-space: nowrap; cursor: default; animation: fade .15s ease; }
.ci-tools.below { bottom: auto; top: calc(100% + 16px); }
.ci.sel .ci-tools { display: flex; }
.canvas.moving .ci-tools, .canvas.resizing .ci-tools, .ci.editing .ci-tools { display: none !important; }
.ci-tools button { border: 0; background: none; color: inherit; font: 800 13px/1 var(--font); min-width: 32px; height: 30px; padding: 0 7px; border-radius: 8px; }
.ci-tools button:hover { background: rgb(255 255 255 / 14%); }
:root[data-theme="dark"] .ci-tools button:hover { background: rgb(0 0 0 / 10%); }
.ci-tools i { width: 1px; align-self: stretch; margin: 4px 3px; background: rgb(255 255 255 / 20%); }
.ci.editing { cursor: text !important; }
.ci.editing::before { border-style: dashed !important; border-color: var(--brand) !important; }
.ci [contenteditable="true"] { outline: none; cursor: text; user-select: text; -webkit-user-select: text; }
.guide { position: absolute; z-index: 40; display: none; pointer-events: none; background: #F43F8E; }
.guide.gv { top: -10px; bottom: -10px; width: 1px; }
.guide.gh { left: -10px; right: -10px; height: 1px; }
.canvas-grow { position: absolute; left: calc(50% - 28px); bottom: -16px; z-index: 5; width: 56px; height: 12px; border: 3px solid var(--panel); border-radius: 8px; background: var(--border-strong); cursor: ns-resize; touch-action: none; transition: background .15s; }
.canvas-grow:hover, .canvas-grow:active { background: var(--brand); }
.canvas-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; color: var(--text-3); pointer-events: none; }
.canvas-empty .e { font-size: 40px; }
.canvas-empty b { color: var(--text-2); }
.builder2 .board-body { padding: 26px 26px 22px; }

/* узкий экран у ученика: элементы доски идут столбиком, сверху вниз */
@container (max-width: 560px) {
  .canvas:not(.edit) { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .canvas:not(.edit) .ci { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 0; order: var(--o); }
  .canvas:not(.edit) .ci.k-text { font-size: calc(var(--fs, 2.1) * 7.6px); }
  .canvas:not(.edit) .ci.k-meme, .canvas:not(.edit) .ci.k-image { width: min(100%, 300px); aspect-ratio: var(--w) / var(--h); align-self: center; }
  .canvas:not(.edit) .ci.k-material { font-size: 15px; }
  .canvas:not(.edit) .ci.k-sticker { display: none; }
}
.mat .ico { display: none; }
.ci.k-material { container-type: inline-size; }
@container (max-width: 250px) { .ci .mat .lbl { display: none; } .ci .mat .ico { display: inline; } .ci .mat .btn.sm { padding: .35em .6em; } }

/* ---------- v3.3: поворот, отражение, правка на месте, метки этапа ---------- */
.ci { transform: rotate(calc(var(--rot, 0) * 1deg)); }
.ci .stk, .ci .big, .ci .photo img { transform: scaleX(var(--sx, 1)); transition: transform .2s var(--ease); }
.hd.rot { left: calc(50% - 13px); top: auto; bottom: -46px; width: 26px; height: 26px; border-width: 2px; border-radius: 50%; place-items: center; color: var(--brand); font: 800 15px/1 var(--font); cursor: grab; }
.ci.sel .hd.rot { display: grid; }
.hd.rot::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: 10px; background: var(--brand); }
.canvas.rotating, .canvas.rotating .hd.rot { cursor: grabbing; }
.canvas.rotating .hd:not(.rot), .canvas.rotating .ci-tools { display: none !important; }
.ci-tools.below { top: calc(100% + 60px); }
.ci[data-deg]::after { content: attr(data-deg); position: absolute; left: 50%; top: -44px; z-index: 4; transform: translateX(-50%) rotate(calc(var(--rot, 0) * -1deg)); background: var(--text); color: var(--panel); font: 800 12px/1 var(--font); padding: 6px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.canvas.edit .ci.sel:not(.editing) [data-f]:hover { outline: 1.5px dashed var(--brand); outline-offset: 3px; border-radius: 6px; cursor: text; }
.ci [contenteditable="true"] { background: color-mix(in srgb, var(--panel) 60%, transparent); border-radius: 4px; box-shadow: 0 0 0 2px var(--brand); }

.b-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.canvas-wrap + .b-tags { margin-top: 30px; }
.b-tags + .b-inline, .b-tags + .b-task { margin-top: 22px; }
.pill.tag { font-size: 13.5px; padding: 6px 12px; }
button.pill.tag { border: 0; cursor: pointer; font-family: var(--font); transition: box-shadow .15s, transform .15s var(--spring); }
button.pill.tag:hover { box-shadow: 0 0 0 2px var(--brand-line); transform: translateY(-1px); }
.pill.tag.add { background: none; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.pill.tag.add:hover { color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
.tag-pop { position: fixed; z-index: 95; width: min(340px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--sh-lg); animation: fadeUp .18s var(--ease); }
.tag-pop .eyebrow { margin-top: 2px; }
.tp-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-grid button { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 99px; padding: 6px 11px; font: 700 13px var(--font); cursor: pointer; transition: border-color .15s, background .15s; }
.tp-grid button:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.tp-grid button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tp-own { display: flex; gap: 6px; margin-top: 4px; }
.tp-own input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: 500 14px var(--font); background: var(--panel); color: var(--text); }
.tp-del { justify-self: start; }
.ci-tools { transform: translateX(-50%) rotate(calc(var(--rot, 0) * -1deg)); }

/* ---------- v3.4: векторные эмодзи, блок «внутри», задание на доске, метки в шапке ---------- */
.emo { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.emo-t { display: grid; place-items: center; line-height: 1; }
.ci .stk { width: 100%; height: 100%; font-size: calc(var(--w) * .82cqw); transform: scaleX(var(--sx, 1)); filter: drop-shadow(0 .5cqw .6cqw rgb(0 0 0 / 16%)); }
.pick-grid button { display: grid; place-items: center; padding: 10px; }
.pick-grid button .emo { width: 30px; height: 30px; }
.pick-grid button .emo-t { font-size: 28px; }

/* мем и иллюстрация: фон + части */
.card-in { position: relative; width: 100%; overflow: hidden; container-type: size; border-radius: max(10px, 7cqmin); box-shadow: var(--sh-sm); color: #14141F; }
.card-in.cm { aspect-ratio: 1 / 1; }
.card-in.ca { aspect-ratio: 4 / 3; }
.ci > .card-in { height: 100%; aspect-ratio: auto; }
.part { position: absolute; left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); transform: translate(-50%, -50%); }
.pt-emoji { width: calc(var(--s) * 1cqmin); aspect-ratio: 1; }
.pt-emoji .emo { transform: scaleX(calc(var(--sx, 1) * var(--psx, 1))); filter: drop-shadow(0 1.2cqmin 1.6cqmin rgb(0 0 0 / 16%)); transition: transform .2s var(--ease); }
.pt-emoji .emo-t { font-size: calc(var(--s) * .82cqmin); }
.pt-text { width: calc(var(--pw) * 1%); text-align: var(--al, center); font-size: max(7px, calc(var(--pfs) * 1cqmin)); line-height: 1.15; font-weight: 700; overflow-wrap: anywhere; }
.pt-text.cap { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.gallery .card-in { border-radius: 20px; }

/* режим «внутри блока» */
.canvas.has-inside .ci:not(.inside) { opacity: .35; }
.ci.inside > .ci-tools, .ci.inside > .hd { display: none !important; }
.ci.inside::before { border-style: dashed !important; border-color: var(--brand) !important; }
.ci.inside .card-in { overflow: visible; }
.ci.inside .part { cursor: grab; touch-action: none; }
.ci.inside .part::before { content: ""; position: absolute; inset: -3px; border: 1.5px dashed transparent; border-radius: 6px; pointer-events: none; }
.ci.inside .part:hover::before { border-color: var(--brand-line); }
.ci.inside .part.sel::before { border: 1.5px solid var(--brand); }
.ci.p-moving .part.sel { cursor: grabbing; }
.phd { position: absolute; z-index: 2; display: none; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--brand); touch-action: none; }
.phd::after { content: ""; position: absolute; inset: -8px; }
.ci.inside .part.sel .phd { display: block; }
.phd.nw { left: -9px; top: -9px; cursor: nwse-resize; } .phd.se { right: -9px; bottom: -9px; cursor: nwse-resize; }
.phd.ne { right: -9px; top: -9px; cursor: nesw-resize; } .phd.sw { left: -9px; bottom: -9px; cursor: nesw-resize; }
.phd.e, .phd.w { top: calc(50% - 9px); width: 8px; height: 18px; border-radius: 5px; cursor: ew-resize; }
.phd.e { right: -7px; } .phd.w { left: -7px; }
.in-tools { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%) rotate(calc(var(--rot, 0) * -1deg)); z-index: 3; display: none; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--text); color: var(--panel); box-shadow: var(--sh-lg); white-space: nowrap; animation: fade .15s ease; }
.ci.inside .in-tools { display: flex; }
.in-tools > span { display: none; gap: 2px; }
.ci.inside .in-card, .ci.inside[data-pk="emoji"] .in-pe, .ci.inside[data-pk="text"] .in-pt { display: flex; }
.ci.inside[data-pk="emoji"] .in-pe::before, .ci.inside[data-pk="text"] .in-pt::before { content: ""; width: 1px; align-self: stretch; margin: 4px 3px; background: rgb(255 255 255 / 20%); }
.in-tools button, .ci-tools button { border: 0; background: none; color: inherit; font: 800 13px/1 var(--font); min-width: 32px; height: 30px; padding: 0 7px; border-radius: 8px; }
.in-tools button:hover { background: rgb(255 255 255 / 14%); }
:root[data-theme="dark"] .in-tools button:hover { background: rgb(0 0 0 / 10%); }
.in-tools i { width: 1px; align-self: stretch; margin: 4px 3px; background: rgb(255 255 255 / 20%); }
.in-tools .done { background: var(--brand); color: #fff; }
.in-tools .done:hover { background: var(--brand-hover); }
.ci-tools button.wide, .in-tools button.wide { padding: 0 10px; }
.canvas.edit .ci.k-meme, .canvas.edit .ci.k-image { cursor: grab; }

/* задание — элемент доски, масштабируется вместе с ней */
.ci.k-task { height: auto; min-height: 0; }
.ci.k-task .tz { zoom: var(--z, 1); }
.ci.k-task .b-task-head { margin-bottom: 14px; }
.canvas.edit .ci.k-task { cursor: default; touch-action: auto; user-select: auto; -webkit-user-select: auto; }
.canvas.edit .ci.k-task .b-task-head { cursor: grab; touch-action: none; user-select: none; border-radius: 12px; padding: 4px; margin: -4px -4px 10px; transition: background .15s; }
.canvas.edit .ci.k-task .b-task-head:hover { background: var(--sunken); }
.b-task-head .grip { font-size: 18px; color: var(--text-3); line-height: 1; padding: 0 2px; }
.ci.k-task .hd.e, .ci.k-task .hd.w { top: calc(50% - 14px); height: 28px; }
.canvas:not(.edit) .ci.k-sticker { pointer-events: none; }
@container (max-width: 560px) { .canvas:not(.edit) .ci.k-task { width: 100%; } }

/* метки в шапке этапа */
.board-head .b-tags { margin-top: 8px; }
.board-head .pill.tag { font-size: 12.5px; padding: 4px 10px; }
.ci.inside .part.sel { z-index: 5; }
.pt-text > [data-f] { white-space: pre-line; }
.ci-tools.r, .in-tools.r { left: auto; right: -6px; transform: rotate(calc(var(--rot, 0) * -1deg)); }
.ci-tools.l, .in-tools.l { left: -6px; transform: rotate(calc(var(--rot, 0) * -1deg)); }

/* ---------- v3.5: палитра, «Изменить» в блоке, эмодзи своей метки ---------- */
.in-hint { display: none; padding: 0 10px 0 6px; font: 600 12.5px var(--font); opacity: .7; }
.ci.inside[data-pk=""] .in-hint { display: inline; }
.ci.inside .part.pt-text::before { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.ci.inside .part.pt-text { cursor: text; }
.color-pop { width: auto; }
.cp-grid { display: grid; grid-template-columns: repeat(8, 30px); gap: 7px; }
.cp-grid .swatch { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgb(0 0 0 / 12%); cursor: pointer; transition: transform .12s var(--spring); }
.cp-grid .swatch:hover { transform: scale(1.12); }
.cp-grid .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand); }
.cp-own { display: flex; align-items: center; gap: 8px; font: 700 13px var(--font); color: var(--text-2); cursor: pointer; margin-top: 2px; }
.cp-own input { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }
.tp-emo { flex: none; width: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--sunken); font-size: 19px; cursor: pointer; transition: border-color .15s; }
.tp-emo:hover { border-color: var(--brand); }
.tp-emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; padding: 8px; border-radius: 12px; background: var(--sunken); }
.tp-emo-grid[hidden] { display: none; }
.tp-emo-grid button { height: 34px; border: 0; border-radius: 8px; background: none; font-size: 19px; cursor: pointer; }
.tp-emo-grid button:hover, .tp-emo-grid button[aria-pressed="true"] { background: var(--panel); box-shadow: 0 0 0 1.5px var(--brand-line); }

/* ---------- v3.6: выравнивание и фон текста ---------- */
.pt-text.has-bg { background: var(--pbg); padding: .32em .6em; border-radius: .55em; box-shadow: 0 .15em .5em rgb(0 0 0 / 8%); }
.pt-text > [data-f] { display: block; }
.ci.k-text > [data-f] { text-align: var(--al, left); }
.ci.k-text.has-bg > .b-h, .ci.k-text.has-bg > .b-p { flex: 1; background: var(--tbg); padding: .35em .6em; border-radius: .5em; box-shadow: 0 .15em .5em rgb(0 0 0 / 8%); }
.ci.k-text.has-bg > .b-note { background: var(--tbg); }
.al-ico { width: 18px; height: 18px; display: block; margin: 0 auto; }
.cp-grid .swatch.none { background: repeating-conic-gradient(#E4E4EC 0 25%, #fff 0 50%) 0 0 / 10px 10px; position: relative; overflow: hidden; }
.cp-grid .swatch.none::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: #E5484D; transform: rotate(45deg); }
.ci.inside [data-f]:hover { outline: none !important; }

/* ---------- v3.7: пары сразу зелёные/красные, редактор конспекта ---------- */
.match .opt .mk { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; flex: none; }
.match .opt .mk .ico { width: 14px; height: 14px; }
.match .opt.ok:disabled { opacity: 1; cursor: default; }
.match .opt.shake { animation: shake .4s var(--ease); }

.note { position: relative; }
.note.has-fg h3, .note.has-fg p { color: inherit; }
.canvas.edit .note [data-tf] { cursor: text; border-radius: 6px; outline: 1.5px dashed transparent; outline-offset: 3px; transition: outline-color .15s; min-height: 1.2em; }
.canvas.edit .note [data-tf]:hover { outline-color: var(--brand-line); }
.canvas.edit .note [data-tf][contenteditable="true"] { outline: 2px solid var(--brand); background: color-mix(in srgb, var(--panel) 70%, transparent); }
.note [data-tf].ph::before { content: attr(data-ph); color: var(--text-3); opacity: .7; font-style: italic; }
.note code.ph { background: none; border-style: dashed; }
.tile-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--text); color: var(--panel); opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 2; }
.note:hover .tile-tools, .note:focus-within .tile-tools { opacity: 1; pointer-events: auto; }
.tile-tools button { border: 0; background: none; color: inherit; min-width: 28px; height: 26px; border-radius: 7px; font: 800 13px/1 var(--font); cursor: pointer; }
.tile-tools button:hover { background: rgb(255 255 255 / 14%); }
.a-ico { text-decoration: underline 3px var(--brand); text-underline-offset: 2px; font-weight: 800; }
.add-note { display: grid; place-items: center; min-height: 120px; border: 2px dashed var(--border-strong); background: none; color: var(--text-3); font: 800 15px var(--font); cursor: pointer; transition: border-color .15s, color .15s; }
.add-note:hover { border-color: var(--brand); color: var(--brand); }

.tiles-ed { display: grid; gap: 12px; }
.tile-ed { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.te-head { display: flex; align-items: center; gap: 8px; }
.te-sw { width: 34px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 800 13px var(--font); background: var(--sunken); color: var(--text); border: 1px solid var(--border); flex: none; }
.te-head .icon-btn { width: 32px; height: 32px; }
.tile-ed input, .tile-ed textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font: 500 14.5px var(--font); background: var(--panel); color: var(--text); resize: vertical; }
.tile-ed input:focus, .tile-ed textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tile-ed input.mono { font: 500 13.5px var(--mono); }
.tiles-ed, .tile-ed { min-width: 0; }
.te-head { gap: 4px; }
.te-head b { white-space: nowrap; margin-left: 4px; font-size: 14px; }
.te-head .icon-btn { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.te-sw { width: 30px; height: 28px; }
.tile-ed > * { min-width: 0; } .te-head b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- v3.8: видеосвязь — стопка / лента / все на экран ---------- */
.call-dock { position: fixed; z-index: 45; --tw: 168px; user-select: none; -webkit-user-select: none; }
.call-dock.c-bl { left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.call-dock.c-br { right: 20px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.call-dock.c-tl { left: 20px; top: 150px; }
.call-dock.c-tr { right: 20px; top: 150px; }
.vt { position: relative; width: var(--tw); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; flex: none; color: #fff;
  background: radial-gradient(120% 95% at 50% 15%, color-mix(in srgb, var(--pc) 38%, #fff) 0%, color-mix(in srgb, var(--pc) 72%, #1d1d2b) 100%);
  box-shadow: 0 10px 28px -12px rgb(20 20 40 / 45%), 0 0 0 1px rgb(255 255 255 / 10%) inset; transition: transform .45s var(--spring), opacity .3s, box-shadow .25s; }
.vt .vface { position: absolute; left: 50%; bottom: -10%; width: 70%; transform: translateX(-50%); animation: breathe 5s ease-in-out infinite; animation-delay: calc(var(--k) * -1.3s); }
.vt.self .vface .emo { transform: scaleX(-1); }
@keyframes breathe { 0%, 100% { transform: translate(-50%, 0) rotate(0); } 35% { transform: translate(-49%, -2%) rotate(-1.2deg); } 70% { transform: translate(-51%, -1%) rotate(1deg); } }
.vt.off { background: linear-gradient(160deg, #2E2E40, #1B1B27); }
.vt .ava { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 800 calc(var(--tw) * .13) var(--font); color: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 8%); }
.vt .nm { position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px); display: flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 8px; background: rgb(10 10 20 / 55%); backdrop-filter: blur(6px); font: 700 11.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt .mut { display: grid; color: #FF8A8A; } .vt .mut .ico, .vt .mut svg { width: 12px; height: 12px; }
.vt .wave { display: flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.vt .wave b { width: 2.5px; height: 3px; border-radius: 2px; background: #fff; opacity: .6; }
.vt.speaking { box-shadow: 0 0 0 3px #22C55E, 0 10px 30px -8px rgb(34 197 94 / 55%); }
.vt.speaking .wave b { background: #4ADE80; opacity: 1; animation: wave .8s ease-in-out infinite; }
.vt.speaking .wave b:nth-child(2) { animation-delay: .15s; } .vt.speaking .wave b:nth-child(3) { animation-delay: .3s; }
@keyframes wave { 0%, 100% { height: 3px; } 50% { height: 10px; } }
.vt .hand, .vt .pin { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #FFB224; font-size: 14px; animation: pop .35s var(--spring); }
.vt .pin { left: 6px; right: auto; background: rgb(255 255 255 / 85%); font-size: 12px; }
.vt-tools { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; opacity: 0; transition: opacity .15s; }
.vt:hover .vt-tools { opacity: 1; }
.vt-tools button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgb(10 10 20 / 60%); color: #fff; font-size: 13px; cursor: pointer; }
.vt .hand ~ .vt-tools { top: 36px; }

/* стопка */
.call-dock.stack .vt-wrap { position: relative; width: calc(var(--tw) + 20px); height: calc(var(--tw) * .75 + 20px); cursor: grab; }
.call-dock.stack .vt { position: absolute; left: 20px; top: 20px; transform: translate(calc(var(--k) * -9px), calc(var(--k) * -9px)) scale(calc(1 - var(--k) * .07)); transform-origin: top left; z-index: calc(10 - var(--k)); }
.call-dock.stack .vt:not(:first-of-type) .nm, .call-dock.stack .vt:not([style*="--k: 0"]) .vt-tools { opacity: 0; }
.call-dock.stack .vt.hidden { opacity: 0; pointer-events: none; }
.call-dock.stack:hover .vt { transform: translate(calc(var(--k) * -16px), calc(var(--k) * -14px)) scale(calc(1 - var(--k) * .06)); }
.call-dock.dragging .vt-wrap { cursor: grabbing; }
.call-dock.dragging { transition: none; }
.call-dock.stack .more { position: absolute; left: 0; top: 0; z-index: 12; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--text); color: var(--panel); font: 800 11.5px/22px var(--font); text-align: center; box-shadow: var(--sh-sm); }
.self-pip { position: absolute; right: -10px; bottom: -10px; z-index: 12; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid var(--panel); padding: 4px 4px 0; cursor: pointer;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--pc) 35%, #fff), color-mix(in srgb, var(--pc) 75%, #1d1d2b)); box-shadow: var(--sh-md); display: grid; place-items: end center; }
.self-pip .emo { transform: scaleX(-1) translateY(8%); }
.self-pip.off { background: #2E2E40; color: #fff; font: 800 13px var(--font); place-items: center; padding: 0; }
.call-bar { display: flex; align-items: center; gap: 4px; margin-top: 10px; padding: 4px; width: fit-content; border-radius: 14px; background: var(--text); color: var(--panel); box-shadow: var(--sh-lg); }
.call-dock.c-tl .call-bar, .call-dock.c-tr .call-bar { margin-top: 12px; }
.call-dock.c-br .call-bar, .call-dock.c-tr .call-bar { margin-left: auto; }
.call-bar i { width: 1px; align-self: stretch; margin: 4px 2px; background: rgb(255 255 255 / 20%); }
.call-bar .cb { display: flex; align-items: center; gap: 5px; height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: 800 12.5px var(--font); cursor: pointer; }
.call-bar .cb:hover { background: rgb(255 255 255 / 14%); }
:root[data-theme="dark"] .call-bar .cb:hover { background: rgb(0 0 0 / 10%); }
.call-bar .cb.off { background: #E5484D; color: #fff; }
.call-bar .cb .ico { font-size: 17px; }

/* лента: все рядом, у края экрана */
.call-dock.strip { --tw: 176px; }
.call-dock.strip .vt-wrap { display: grid; grid-template-columns: repeat(2, var(--tw)); gap: 10px; padding: 10px; border-radius: 22px; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); box-shadow: var(--sh-lg); max-height: calc(100vh - 260px); overflow-y: auto; animation: fadeUp .25s var(--ease); }
.call-dock.strip .vt.teacher { grid-column: 1 / -1; width: 100%; --tw: 362px; aspect-ratio: 16 / 9; }

/* все на экран: сетка поверх доски */
.call-dock.grid { inset: 0; left: 0; top: 0; right: 0; bottom: 0; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 28px 28px 22px; background: rgb(12 12 22 / 82%); backdrop-filter: blur(10px); animation: fade .2s ease; }
.call-dock.grid .vt-wrap { width: min(1200px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-content: center; }
.call-dock.grid .vt { width: 100%; --tw: 300px; aspect-ratio: 16 / 10; border-radius: 22px; }
.call-dock.grid .vt.teacher { grid-column: span 2; }
.call-dock.grid .vt .nm { font-size: 13px; left: 10px; bottom: 10px; }
.call-dock.grid .call-bar { margin: 16px auto 0; }

@media (max-width: 640px) {
  .call-dock { --tw: 112px; }
  .call-dock.c-bl { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .call-dock.c-tl, .call-dock.c-tr { top: 120px; }
  .call-dock.c-br { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .call-dock.strip { --tw: 120px; left: 8px !important; right: 8px !important; }
  .call-dock.strip .vt-wrap { grid-template-columns: repeat(auto-fill, var(--tw)); grid-auto-flow: column; overflow-x: auto; max-height: none; }
  .call-dock.strip .vt.teacher { grid-column: auto; width: var(--tw); --tw: 120px; aspect-ratio: 4 / 3; }
  .call-dock.grid { padding: 14px; } .call-dock.grid .vt.teacher { grid-column: auto; }
  .call-bar .cb.wide { padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .vt .vface, .vt.speaking .wave b { animation: none; } }
.vt .hand { padding: 4px; } .vt .hand .emo { width: 100%; height: 100%; }
.vt .mut .ico { font-size: 12px; }
/* свёрнуто совсем: только микрофон, камера и число участников */
.call-dock.mini .vt-wrap { display: none; }
.call-dock.mini .call-bar { margin-top: 0; cursor: grab; animation: fadeUp .2s var(--ease); }
.call-bar .spk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 9.5px var(--font); color: #fff; box-shadow: 0 0 0 2px #22C55E; animation: spk 1.4s ease-in-out infinite; margin-right: 2px; }
@keyframes spk { 50% { box-shadow: 0 0 0 4px rgb(34 197 94 / 45%); } }
/* узкий экран: заголовок-выбор урока не распирает страницу */
.page-head > div { min-width: 0; max-width: 100%; }
.title-select { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- v4.0: игры ---------- */
.game { display: grid; gap: 12px; }
.g-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.g-task { font-weight: 800; font-size: 17px; }
.g-score { font-weight: 800; font-size: 13.5px; padding: 5px 12px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.g-stage { position: relative; width: 100%; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 6%); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.g-world { position: absolute; left: 0; top: 0; width: 640px; height: 300px; transform-origin: 0 0; }
.g-world > div { position: absolute; left: 0; top: 0; will-change: transform; }
.g-world .emo { width: 100%; height: 100%; }
.g-label { position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%); padding: 3px 9px; border-radius: 99px; background: #fff; color: #14141F; font: 800 13px var(--font); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 18%); }
.g-hoops .g-stage { background: linear-gradient(#FDEBD3 0 76%, #E3A765 76% 100%); }
.g-penalty .g-stage { background: linear-gradient(#BFE6FF 0 22%, #4FB35E 22% 100%); }
.g-meteor .g-stage { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 45% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 85% 55%, #fff 50%, transparent 51%), linear-gradient(#1B1747, #3B2C7A 70%, #5B3E8F); }
.g-moles .g-stage { background: linear-gradient(#BFE6FF 0 18%, #7CC56B 18% 100%); }
.g-balloons .g-stage { background: radial-gradient(60px 26px at 20% 30%, #fff 60%, transparent 62%), radial-gradient(80px 30px at 78% 22%, #fff 60%, transparent 62%), linear-gradient(#9ED8FF, #DDF3FF); }
/* баскетбол */
.g-ball { width: 44px; height: 44px; }
.g-ball.big { width: 52px; height: 52px; }
.g-board { width: 16px; height: 120px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 3px #14141F inset; }
.g-rim { width: 78px; height: 16px; }
.g-rim::before { content: ""; position: absolute; inset: 0; border: 5px solid #F05A28; border-radius: 50%; z-index: 2; }
.g-rim .net { position: absolute; left: 10px; right: 10px; top: 8px; height: 46px; background: repeating-linear-gradient(60deg, transparent 0 7px, rgb(255 255 255 / 90%) 7px 9px), repeating-linear-gradient(-60deg, transparent 0 7px, rgb(255 255 255 / 90%) 7px 9px); clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%); transform-origin: top; }
.g-rim.swish .net { animation: swish .5s ease; }
@keyframes swish { 30% { transform: scaleY(1.35) scaleX(.9); } 60% { transform: scaleY(.9); } }
.g-floor { width: 640px; height: 12px; background: #B9783E; }
.g-thrower { width: 74px; height: 74px; transform-origin: bottom; }
.g-thrower.throw .emo { animation: throwUp .45s ease; }
@keyframes throwUp { 40% { transform: translateY(-14px) scaleY(1.08); } }
/* пенальти */
.g-goal { width: 300px; height: 118px; border: 7px solid #fff; border-bottom: 0; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 45%) 0 2px, transparent 2px 14px), repeating-linear-gradient(0deg, rgb(255 255 255 / 45%) 0 2px, transparent 2px 14px); }
.g-goal.hit { animation: netHit .5s ease; }
@keyframes netHit { 30% { background-size: 16px 16px; filter: brightness(1.3); } }
.g-grass { width: 640px; height: 110px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 6%) 0 80px, transparent 80px 160px); }
.g-keeper { width: 56px; height: 56px; }
.g-sign { padding: 6px 16px; border-radius: 12px; background: #fff; color: #14141F; font: 800 20px var(--font); text-align: center; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 35%); white-space: nowrap; }
.g-sign small, .g-q small { display: block; font-size: 11px; color: var(--text-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* метеориты */
.g-rock { width: 50px; height: 50px; }
.g-rock .g-label { background: #FFE8A3; }
.g-tramp { width: 580px; height: 16px; border-radius: 99px; background: linear-gradient(#2E2E40, #14141F); box-shadow: 0 0 0 3px #F05A28, 0 8px 0 -4px #14141F; }
.g-tramp.boing { animation: boing .45s var(--spring); }
@keyframes boing { 30% { transform: translate(320px, 282px) translate(-50%, -50%) scaleY(.5) scaleX(1.02); } }
/* крот */
.g-hole { width: 100px; height: 30px; border-radius: 50%; background: radial-gradient(#3B2A1A, #5C4028); box-shadow: inset 0 6px 10px rgb(0 0 0 / 45%); }
.g-mole { width: 66px; height: 66px; cursor: pointer; }
.g-mole .emo { animation: moleUp .25s var(--spring) both; }
@keyframes moleUp { from { transform: translateY(30px) scaleY(.4); opacity: 0; } }
.g-mole.down { opacity: 0; transition: opacity .2s; }
.g-mole.bonk .emo { transform: scaleY(.45) translateY(30px); transition: transform .15s; }
.g-mole.wrong { animation: shake .3s; } .g-mole.wrong .g-label { background: #FFD6D6; color: #B42318; }
/* шарики */
.g-q { padding: 8px 18px; border-radius: 14px; background: #fff; font: 800 19px var(--font); color: #14141F; text-align: center; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 30%); white-space: nowrap; }
.g-balloon { width: 70px; height: 84px; cursor: pointer; }
.g-balloon .emo { filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 6px 8px rgb(0 0 0 / 15%)); }
.g-balloon .g-label { top: 28%; }
/* эффекты */
.g-fx { width: 64px; height: 64px; animation: fx .6s ease forwards; pointer-events: none; }
@keyframes fx { from { opacity: 1; } to { opacity: 0; margin-top: -20px; } }
.g-say { padding: 6px 14px; border-radius: 99px; font: 800 16px var(--font); color: #fff; background: #14141F; white-space: nowrap; animation: say 1.1s ease forwards; pointer-events: none; z-index: 5; }
.g-say.ok { background: var(--ok); } .g-say.bad { background: var(--bad); } .g-say.warn { background: #E59A0B; }
@keyframes say { 0% { opacity: 0; margin-top: 12px; } 15% { opacity: 1; margin-top: 0; } 80% { opacity: 1; } 100% { opacity: 0; margin-top: -14px; } }
.g-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgb(255 255 255 / 72%); backdrop-filter: blur(3px); animation: fade .3s ease; z-index: 6; }
.g-over span { width: 64px; height: 64px; } .g-over b { font-size: 22px; }
.g-form { display: flex; gap: 10px; }
.g-in { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 2px solid var(--border-strong); border-radius: 14px; font: 700 17px var(--font); background: var(--panel); color: var(--text); }
.g-in:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.g-form .btn3d { min-width: 0; padding: 0 18px; white-space: nowrap; }
.game-key { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--sunken); }
.gk-emo { width: 52px; height: 52px; flex: none; }
/* колесо */
.wheel-box { position: relative; width: min(320px, 80vw); margin: 10px auto 0; }
.wheel { width: 100%; display: block; transition: transform 4s cubic-bezier(.17, .67, .12, 1); filter: drop-shadow(0 10px 20px rgb(0 0 0 / 18%)); }
.wheel-ptr { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 30px; color: #14141F; z-index: 2; }
.wheel-res { text-align: center; font-size: 20px; margin-top: 12px; min-height: 30px; }
.game { max-width: 820px; margin: 0 auto; width: 100%; }
.g-balloon { width: 92px; height: 110px; } .g-balloon .g-label { top: 24%; font-size: 14px; }

/* ---------- v4.1: лобби, доступ, группа, итоги урока, проверка домашки ---------- */
.lobby { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; max-width: 1040px; margin: 40px auto; padding: 0 20px; }
.lobby-left { display: grid; gap: 12px; }
.lobby-cam { --tw: 100%; width: 100%; aspect-ratio: 16 / 10; border-radius: 26px; }
.lobby-cam .nm { font-size: 14px; left: 12px; bottom: 12px; }
.lobby-cam .wave.lv b { background: #4ADE80; opacity: 1; animation: wave .7s ease-in-out infinite; }
.lobby-cam .wave.lv b:nth-child(2) { animation-delay: .12s; } .lobby-cam .wave.lv b:nth-child(3) { animation-delay: .24s; }
.lobby-cam .ava { font-size: 44px; }
.lobby-bar { display: flex; gap: 8px; justify-content: center; }
.lobby-bar .cb { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); font: 700 14px var(--font); cursor: pointer; }
.lobby-bar .cb.off { background: #E5484D; border-color: #E5484D; color: #fff; }
.lobby-bar .cb .ico { font-size: 18px; }
.lobby-card { background: var(--panel); border: 1px solid var(--border); border-radius: 26px; padding: 28px; box-shadow: var(--sh-md); animation: fadeUp .3s var(--ease); }
.lobby-card h1 { font-size: 26px; margin: 6px 0 4px; }
.me-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--sunken); }
.me-row b { display: block; font-size: 17px; }
.lobby-demo { margin-top: 16px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.lobby-demo button, .lnk { border: 0; background: none; padding: 0; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.blocked-card, .end-card { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; text-align: center; }
.lock { display: block; width: 72px; height: 72px; margin: 0 auto 8px; }
.stars { display: flex; justify-content: center; gap: 6px; margin: 6px 0 10px; }
.stars span { width: 44px; height: 44px; filter: grayscale(1) opacity(.3); transition: filter .3s; }
.stars span.on { filter: none; animation: pop .4s var(--spring) both; }
.stars span.on:nth-child(2) { animation-delay: .12s; } .stars span.on:nth-child(3) { animation-delay: .24s; }
.hw-box { display: grid; gap: 8px; justify-items: center; margin: 18px 0 6px; padding: 16px; border-radius: 18px; background: var(--brand-soft); }
.hw-box b { display: flex; align-items: center; gap: 6px; }
.rate { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.rate button { width: 44px; height: 44px; padding: 6px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; transition: transform .15s var(--spring); }
.rate button:hover { transform: scale(1.12); }
.rate button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 760px) { .lobby { grid-template-columns: minmax(0, 1fr); margin: 16px auto; padding: 0 12px; } }

.switch { position: relative; width: 42px; height: 24px; flex: none; border: 0; border-radius: 99px; background: var(--border-strong); cursor: pointer; transition: background .2s; vertical-align: middle; }
.switch i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform .2s var(--spring); }
.switch.on { background: var(--ok); } .switch.on i { transform: translateX(18px); }
.setting { gap: 12px; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--sunken); align-items: flex-start; cursor: pointer; }
.row-off td { opacity: .55; }
.links-ed { display: grid; gap: 8px; margin-bottom: 14px; }
.link-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; }
.link-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-row .grow { min-width: 0; }
.le { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--sunken); font-size: 19px; flex: none; }
.link-form { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.link-form input, .link-form select { height: 40px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; font: 500 14px var(--font); background: var(--panel); color: var(--text); min-width: 0; }
.link-form #linkU { grid-column: 1 / -1; } .link-form .btn { grid-column: 1 / -1; justify-content: center; }
.links { display: grid; gap: 8px; }
.link-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s var(--spring); }
.link-card:hover { border-color: var(--brand-line); transform: translateY(-1px); }
.link-card b { flex: 1; font-size: 14.5px; } .link-card .ico { color: var(--text-3); }
.more-btn { flex: 0 0 auto !important; padding: 5px 10px !important; font-weight: 800; }
.vt .lm { position: absolute; left: 6px; top: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgb(10 10 20 / 60%); font-size: 12px; }

.end-modal .sec, .rv .sec { margin: 22px 0 10px; font-size: 16px; }
.kpis3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.kpis3 > div { padding: 14px; border-radius: 16px; background: var(--sunken); display: grid; gap: 2px; }
.kpis3 b { font-size: 20px; } .kpis3 span { font-size: 12.5px; color: var(--text-3); }
.end-rows { display: grid; gap: 6px; }
.end-row { display: grid; grid-template-columns: 28px minmax(90px, 140px) 110px 36px 52px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); }
.end-row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.end-row .weak { display: flex; gap: 4px; flex-wrap: wrap; }
.chip-s { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: var(--sunken); font: 700 12px var(--font); color: var(--text-2); border: 0; white-space: nowrap; }
.chip-s.bad { background: var(--bad-soft); color: var(--bad); }
button.chip-s { cursor: pointer; } button.chip-s:hover { background: var(--brand-soft); color: var(--brand); }
.hw-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-item { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; cursor: pointer; }
.hw-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.bal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .kpis3 { grid-template-columns: 1fr; } .end-row { grid-template-columns: 28px 1fr 60px; } .end-row .meter, .end-row .num, .end-row .weak { display: none; } }

.rv-task { margin-top: 14px; border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.rv-task header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.rv-ans { pointer-events: none; }
.rv-note { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.rv-note input { flex: 1 1 220px; height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; font: 500 14px var(--font); background: var(--panel); color: var(--text); }
#rvComment { border: 1px solid var(--border); border-radius: 12px; padding: 10px; font: 500 14.5px var(--font); background: var(--panel); color: var(--text); }
.rv-stars { display: inline-flex; gap: 2px; }
.rv-stars button { width: 30px; height: 30px; padding: 3px; border: 0; background: none; cursor: pointer; filter: grayscale(1) opacity(.35); }
.rv-stars button.on { filter: none; }
.btn3d.ok { background: var(--ok); --b: #0E7A4F; }
.rv-home.ok { border-color: var(--ok-line, var(--ok)); } .rv-home.redo { border-color: #E59A0B; }
.lobby-cam .vface { width: 40%; bottom: -6%; }

/* ============ v4.2: реакции выезжают влево, чат и реакции — поверх видео */
.fabs { z-index: 46; }
.chat-panel { z-index: 47; }
.react-pop { right: calc(100% + 10px); bottom: 50%; flex-direction: row-reverse; transform: translate(12px, 50%) scale(.9); transform-origin: right center; }
.react-wrap.open .react-pop { transform: translateY(50%); }
.react-wrap.open .react-pop button { animation-name: fadeLeft; }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
/* чат открыт — видео справа отъезжает левее чата, чтобы не закрывать его */
.call-dock { transition: right .3s var(--ease), left .3s var(--ease); }
body.chat-open .call-dock.c-br, body.chat-open .call-dock.c-tr { right: calc(min(370px, 100vw - 32px) + 36px); }
@media (max-width: 640px) {
  /* на телефоне кнопка реакций — крайняя справа, полоска выезжает влево на месте кнопки «Чат» (ниже видео) */
  .fabs { flex-direction: row-reverse; }
  .react-wrap.open ~ .chat-fab { visibility: hidden; }
  .react-pop { right: calc(100% + 8px); gap: 4px; }
  .react-pop button { width: 34px; height: 34px; font-size: 20px; }
  body.chat-open .call-dock { visibility: hidden; } /* чат на весь экран — видео прячем, пока он открыт */
}

/* ============ v4.3: итог игры — разбор ответов вместо «Сыграть ещё раз» */
.g-res { border-radius: 20px; background: var(--sunken); padding: 18px; display: grid; gap: 14px; animation: fadeUp .3s var(--ease); }
.g-res-head { display: flex; align-items: center; gap: 14px; }
.g-res-emo { width: 48px; height: 48px; flex: none; display: grid; place-items: center; }
.g-res-emo .emo { width: 100%; height: 100%; }
.g-res-head b { font-size: 18px; }
.g-res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.g-res-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); font-size: 14.5px; }
.g-res-list li > i { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: var(--sunken); color: var(--text-3); }
.g-res-list li.ok > i { background: var(--ok); color: #fff; }
.g-res-list li.bad > i { background: var(--bad); color: #fff; }
.g-res-list li.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.g-res-list .q { font-weight: 700; }
.g-res-list .y { padding: 2px 9px; border-radius: 8px; font-weight: 700; background: var(--ok-soft); color: var(--ok); }
.g-res-list .y::before { content: '→ '; opacity: .6; }
.g-res-list li.bad .y { background: var(--bad-soft); color: var(--bad); text-decoration: line-through; text-decoration-thickness: 2px; }
.g-res-list li.skip .y { background: var(--sunken); color: var(--text-3); }
.g-res-list .r { color: var(--text-2); font-size: 13.5px; }
.g-res-list li.bad .r b, .g-res-list li.skip .r b { color: var(--ok); }
.g-res-list .r.hint { color: var(--text-3); }
.g-res-more { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip-w { padding: 3px 9px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--text-2); }
.rv-ans .g-res { padding: 12px; }

/* ============ v4.4: лобби по центру экрана + «На главную» */
.lobby-page { position: relative; min-height: calc(100vh - 48px); display: flex; flex-direction: column; padding: 64px 0 24px; }
.lobby-page > .lobby { margin: auto; width: 100%; }
.lobby-back { position: absolute; left: 20px; top: 18px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--text-2); font: 700 14px var(--font); cursor: pointer; transition: color .15s, transform .15s var(--spring); }
.lobby-back:hover { color: var(--text); transform: translateX(-2px); }
.lobby-back svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .lobby-page { padding-top: 60px; } .lobby-back { left: 12px; top: 12px; } }

/* ============ v4.5: трибуны, болельщики, табло, подсказки */
.g-world > .g-stands { width: 640px; }
.g-stands.arena { background: repeating-linear-gradient(0deg, rgb(0 0 0 / 14%) 0 3px, transparent 3px 22px), linear-gradient(#5B3DB5, #7B5BE0); box-shadow: 0 4px 0 #3E2A86; }
.g-stands.stadium { background: repeating-linear-gradient(0deg, rgb(0 0 0 / 16%) 0 3px, transparent 3px 16px), linear-gradient(#2C4C8C, #3F69B8); box-shadow: 0 3px 0 #22386A; }
.g-crowd { display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.g-crowd .fan { position: relative; width: var(--fs); height: var(--fs); display: block; animation: fanBob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.41s); }
.g-crowd .fan > .emo { display: block; }
.g-crowd .fan .hands, .g-crowd .fan .oh { position: absolute; left: 50%; width: 80%; height: 80%; opacity: 0; transform: translate(-50%, 6px) scale(.6); transition: opacity .15s, transform .25s var(--spring); }
.g-crowd .fan .hands { top: -62%; }
.g-crowd .fan .oh { top: 8%; width: 100%; height: 100%; }
@keyframes fanBob { 50% { transform: translateY(-1.5px); } }
.g-crowd.cheer .fan { animation: fanJump .45s ease-out 3; animation-delay: calc(var(--i) * 35ms); }
.g-crowd.cheer .fan .hands { opacity: 1; transform: translate(-50%, 0) scale(1); animation: wave .3s ease-in-out infinite alternate; }
@keyframes fanJump { 40% { transform: translateY(-10px); } }
@keyframes wave { from { rotate: -14deg; } to { rotate: 14deg; } }
.g-crowd.groan .fan { animation: fanGroan .6s ease; }
.g-crowd.groan .fan:nth-child(3n) .oh, .g-crowd.groan .fan:nth-child(4n+1) .oh { opacity: 1; transform: translate(-50%, 0) scale(1); }
@keyframes fanGroan { 30% { transform: translateY(3px) rotate(-6deg); } 60% { transform: translateY(3px) rotate(6deg); } }
/* табло */
.g-sb { display: flex; align-items: center; gap: 4px; padding: 4px 8px 3px; border-radius: 8px; background: #14141F; box-shadow: 0 0 0 2px #3A3A52, 0 5px 12px rgb(0 0 0 / 30%); z-index: 1; }
.g-sb .sb-c { display: grid; justify-items: center; gap: 1px; }
.g-sb b { min-width: 28px; padding: 0 4px; border-radius: 4px; background: #000; text-align: center; font: 800 17px/1.25 var(--mono); color: #FFB224; text-shadow: 0 0 6px rgb(255 178 36 / 75%); }
.g-sb .sb-bad { color: #FF6B6B; text-shadow: 0 0 6px rgb(255 107 107 / 70%); }
.g-sb i { font: 800 16px var(--mono); color: #8E8EA6; font-style: normal; margin-top: -10px; }
.g-sb small { font: 800 7px var(--font); letter-spacing: .09em; color: #A7A7BF; }
.g-sb b.flash { animation: sbFlash .6s ease; }
@keyframes sbFlash { 0%, 100% { transform: none; } 30% { transform: scale(1.35); filter: brightness(1.6); } }
/* подсказки */
.g-hintbar { display: none; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #FFF6D6; border: 1px solid #F5D77A; color: #5C4400; }
.g-hintbar.show { display: flex; animation: fadeUp .3s var(--ease); }
.g-hintbar .gh-emo { width: 30px; height: 30px; flex: none; }
.g-hintbar small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.g-hintbar .mask { font: 800 18px var(--mono); letter-spacing: .06em; color: #14141F; }
:root[data-theme="dark"] .g-hintbar { background: #3A3113; border-color: #6B5A1F; color: #F5E1A0; }
:root[data-theme="dark"] .g-hintbar .mask { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-hintbar { background: #3A3113; border-color: #6B5A1F; color: #F5E1A0; } :root:not([data-theme="light"]) .g-hintbar .mask { color: #fff; } }
.g-rhint { position: absolute; left: 50%; top: calc(100% + 22px); transform: translateX(-50%); padding: 2px 8px; border-radius: 8px; background: #FFF6D6; color: #5C4400; font: 800 12px var(--mono); white-space: nowrap; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.g-mole.glow .emo { filter: drop-shadow(0 0 8px #FFD84D) drop-shadow(0 0 14px #FFD84D); }
.g-mole.glow .g-label { background: #FFE58A; }
.g-balloon.deflate { transition: opacity .5s, scale .5s; opacity: 0; scale: .3; }

/* ============ v4.6: сцены игр — зал, стадион, космос, ферма, праздник */
.g-world > .g-layer { width: 640px; height: 300px; transform: none; pointer-events: none; }
.g-world > .g-layer .sc { position: absolute; inset: 0; overflow: hidden; }
.g-world > .g-layer .sc > * { position: absolute; }
.g-world > .g-layer .emo { width: 100%; height: 100%; display: block; }
.g-stage:has(.g-layer) { background: #14141F; }
/* --- болельщики */
.crow { position: absolute; display: flex; justify-content: space-between; align-items: flex-start; filter: brightness(var(--dim)); }
.crow .fan { position: relative; width: var(--fs); height: var(--fs); margin-top: var(--dy); animation: fanBob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.crow .fan::after { content: ""; position: absolute; left: 6%; right: 6%; top: 82%; height: 90%; border-radius: 45% 45% 10% 10%; background: var(--sh); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 15%); z-index: -1; }
.crow .fan > .emo { position: relative; z-index: 1; }
.crow .fan .hands, .crow .fan .oh { position: absolute; left: 50%; width: 86%; height: 86%; opacity: 0; transform: translate(-50%, 6px) scale(.5); transition: opacity .15s, transform .25s var(--spring); z-index: 2; }
.crow .fan .hands { top: -64%; }
.crow .fan .oh { top: 0; width: 100%; height: 100%; }
.crow .fan .flag { position: absolute; left: 70%; top: -70%; width: 2px; height: 150%; background: #D8D8E4; z-index: 0; }
.crow .fan .flag::after { content: ""; position: absolute; left: 2px; top: 0; width: 16px; height: 10px; background: linear-gradient(var(--fc) 0 50%, #fff 50%); transform-origin: left center; animation: flagWave 1.2s ease-in-out infinite; }
@keyframes flagWave { 50% { transform: skewY(12deg) scaleX(.85); } }
.g-crowd.cheer .fan { animation: fanJump .45s ease-out 3; animation-delay: calc(var(--i) * 18ms); }
.g-crowd.cheer .crow.front .fan .hands { opacity: 1; transform: translate(-50%, 0) scale(1); animation: wave .28s ease-in-out infinite alternate; }
.g-crowd.groan .crow.front .fan:nth-child(3n) .oh, .g-crowd.groan .crow.front .fan:nth-child(4n+1) .oh { opacity: 1; transform: translate(-50%, 0) scale(1); }
.g-crowd.groan .fan { animation: fanGroan .6s ease; }
.crow.ufos .fan { width: calc(var(--fs) * 1.5); height: var(--fs); animation: ufoBob 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
.crow.ufos .fan::after { display: none; }
.crow.ufos .fan > .emo { position: absolute; inset: 0; }
.crow.ufos .pilot { position: absolute; left: 30%; top: -48%; width: 40%; height: 60%; z-index: 0; }
@keyframes ufoBob { 50% { transform: translateY(-5px) rotate(-3deg); } }
/* --- вспышки, конфетти, лазер */
.g-flashes .fl { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(#fff 0 22%, rgb(255 255 255 / .75) 32%, transparent 70%); transform: scale(var(--s)); animation: flashPop .45s ease-out forwards; }
.g-flashes .fl::before, .g-flashes .fl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 2px; margin: -1px 0 0 -15px; background: linear-gradient(90deg, transparent, #fff, transparent); }
.g-flashes .fl::after { transform: rotate(90deg); }
@keyframes flashPop { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; transform: scale(var(--s)); } 100% { opacity: 0; transform: scale(calc(var(--s) * 1.2)); } }
.g-flashes .cf { position: absolute; width: 6px; height: 9px; border-radius: 1px; animation: cfFly var(--t) cubic-bezier(.2, .6, .4, 1) forwards; z-index: 9; }
@keyframes cfFly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 45% { transform: translate(calc(var(--dx) * .7), var(--dy)) rotate(calc(var(--r) * .5)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 150px)) rotate(var(--r)); opacity: 0; } }
.g-flashes .laser { position: absolute; height: 4px; margin-top: -2px; transform-origin: 0 50%; border-radius: 2px; background: linear-gradient(90deg, #7DE3FF, #fff); box-shadow: 0 0 8px #7DE3FF, 0 0 16px #3BB4E0; animation: laser .26s ease-out forwards; }
@keyframes laser { from { opacity: 1; } to { opacity: 0; filter: blur(1px); } }
.g-flashes { z-index: 8; }
/* --- бегущая строка (LED-реклама) */
.sc .adb { left: 0; right: 0; overflow: hidden; background: #0B0B14; border-top: 2px solid #2A2A40; border-bottom: 2px solid #2A2A40; display: flex; align-items: center; }
.sc .adb .marq { display: flex; white-space: nowrap; animation: marq 16s linear infinite; }
.sc .adb .marq span { padding-right: 20px; font: 800 11px var(--font); letter-spacing: .12em; color: #FFB224; text-shadow: 0 0 6px rgb(255 178 36 / 70%); }
.sc .adb.blue .marq span { color: #7DE3FF; text-shadow: 0 0 6px rgb(125 227 255 / 70%); }
@keyframes marq { to { transform: translateX(-50%); } }
.adb .adb-hot { width: 100%; text-align: center; font: 900 13px var(--font); letter-spacing: .14em; animation: ledBlink .25s steps(2) 5; }
.adb .adb-hot.ok { color: #4ADE80; text-shadow: 0 0 8px #4ADE80; } .adb .adb-hot.bad { color: #FF6B6B; text-shadow: 0 0 8px #FF6B6B; }
@keyframes ledBlink { 50% { opacity: .35; } }
/* --- зал (баскетбол) */
.sc.arena { background: radial-gradient(140% 90% at 50% -10%, #3A2C8A, #1A1446 55%, #100C2C); }
.sc.arena .stands { left: 0; right: 0; top: 36px; height: 70px; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 22%) 0 2px, transparent 2px 18px), linear-gradient(#2A2166, #3B2E8C); }
.sc .beam { top: -10px; width: 90px; height: 340px; transform-origin: 50% 0; transform: rotate(var(--r)); background: linear-gradient(rgb(255 250 220 / .28), rgb(255 250 220 / 0) 80%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); filter: blur(2px); animation: beamSway 7s ease-in-out infinite alternate; z-index: 3; mix-blend-mode: screen; }
@keyframes beamSway { to { transform: rotate(calc(var(--r) * -1)); } }
.sc .court { left: 0; right: 0; top: 124px; bottom: 0; background: linear-gradient(rgb(20 10 40 / .55), transparent 28%), radial-gradient(60% 40% at 30% 30%, rgb(255 255 255 / .28), transparent 70%), radial-gradient(40% 30% at 80% 45%, rgb(255 255 255 / .18), transparent 70%), repeating-linear-gradient(90deg, #E2A465 0 46px, #D2924F 46px 47px, #E8B172 47px 93px, #CB8A48 93px 94px); }
.sc svg.lines { left: 0; top: 0; }
.g-pole { width: 12px; height: 200px; border-radius: 4px; background: linear-gradient(90deg, #6E6E86, #C9C9D8 40%, #6E6E86); }
.g-pad { width: 34px; height: 58px; border-radius: 8px 8px 4px 4px; background: linear-gradient(90deg, #3B2DB5, #5B4CE6 50%, #3B2DB5); box-shadow: 0 4px 0 #22196E; }
.g-arm { width: 52px; height: 7px; border-radius: 3px; background: linear-gradient(#C9C9D8, #6E6E86); }
.g-bb { width: 112px; height: 64px; border-radius: 4px; background: linear-gradient(135deg, rgb(255 255 255 / .42), rgb(200 230 255 / .18) 60%, rgb(255 255 255 / .3)); border: 3px solid #fff; box-shadow: 0 0 0 1.5px #14141F, 0 6px 14px rgb(0 0 0 / 35%); backdrop-filter: blur(1px); }
.g-bb i { position: absolute; left: 50%; bottom: 5px; width: 36px; height: 26px; margin-left: -18px; border: 3px solid #F05A28; }
.g-bb.shake { animation: bbShake .35s ease; }
@keyframes bbShake { 25% { margin-left: 2px; } 50% { margin-left: -2px; } 75% { margin-left: 1px; } }
.g-rim::before { box-shadow: 0 2px 0 #B8401A; }
.g-player { width: 76px; height: 124px; }
.g-player .pl, .g-keeper .pl, .g-kicker .pl { width: 100%; height: 100%; display: block; }
.pl .arm { transform-box: fill-box; transform-origin: 50% 8%; transition: transform .18s ease; }
.pl .pl-all { transform-box: fill-box; transform-origin: 50% 100%; }
.g-player .armL { transform: rotate(14deg); }
.g-player .armR { animation: dribbleArm .45s ease-in-out infinite alternate; }
@keyframes dribbleArm { from { transform: rotate(-24deg); } to { transform: rotate(-8deg); } }
.g-player.shoot .pl-all { animation: jumpShot .8s cubic-bezier(.3, .7, .4, 1); }
.g-player.shoot .armL { transform: rotate(-168deg); } .g-player.shoot .armR { animation: none; transform: rotate(-150deg); }
.g-player.shoot .pl-shadow { animation: shadowJump .8s ease; }
@keyframes jumpShot { 0% { transform: none; } 15% { transform: scaleY(.9); } 45% { transform: translateY(-18px); } 100% { transform: none; } }
@keyframes shadowJump { 45% { transform: scale(.7); transform-origin: 38px 119px; opacity: .5; } }
.g-dribble { width: 20px; height: 20px; }
.g-dribble .db { width: 100%; height: 100%; animation: dribble .45s cubic-bezier(.5, 0, .9, .5) infinite alternate; }
@keyframes dribble { to { transform: translateY(36px); } }
.g-dribble.hide { opacity: 0; }
.g-ball { width: 28px; height: 28px; z-index: 4; }
.g-ball .g-label { font-size: 11px; padding: 2px 7px; }
/* табло-джамботрон */
.g-sb { flex-direction: column; gap: 1px; z-index: 5; }
.g-sb .sb-row { display: flex; align-items: center; gap: 4px; }
.g-sb .sb-colon { font: 800 16px var(--mono); color: #8E8EA6; font-style: normal; margin-top: -9px; }
.g-sb.jumbo { padding: 4px 12px 4px; border-radius: 10px; background: linear-gradient(#1D1D2E, #0B0B14); box-shadow: 0 0 0 2px #4A4A66, 0 0 18px rgb(91 76 230 / 55%), 0 8px 16px rgb(0 0 0 / 45%); }
.g-sb.jumbo .sb-title { font: 800 6.5px var(--font); letter-spacing: .2em; color: #A9A0FF; }
.g-sb.jumbo .cable { position: absolute; top: -40px; width: 2px; height: 40px; background: #4A4A66; } .g-sb.jumbo .cable.l { left: 18px; } .g-sb.jumbo .cable.r { right: 18px; }
.g-sb.jumbo b { font-size: 18px; min-width: 30px; }
/* --- стадион (пенальти) */
.sc.night { background: linear-gradient(#081231, #13296B 60%, #1C3A8A); }
.sc.night .stands { left: 0; right: 0; top: 0; height: 56px; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 25%) 0 2px, transparent 2px 13px), linear-gradient(#162B63, #23428F); }
.sc .flood { top: 2px; width: 40px; height: 14px; border-radius: 3px; background: radial-gradient(circle, #fff 0 2px, transparent 2.5px) 0 0 / 8px 7px, #3A3A52; box-shadow: 0 0 22px 8px rgb(255 255 230 / .45); z-index: 4; }
.sc .fbeam { top: 0; width: 180px; height: 360px; transform-origin: 50% 0; transform: rotate(var(--r)); background: linear-gradient(rgb(255 255 230 / .22), transparent 75%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); z-index: 3; mix-blend-mode: screen; }
.sc .pitch { left: 0; right: 0; top: 71px; bottom: 0; background: radial-gradient(70% 50% at 50% 30%, rgb(255 255 255 / .12), transparent), repeating-linear-gradient(180deg, #3E9E4B 0 26px, #4AAE58 26px 52px); }
.g-goal { border-color: #fff; box-shadow: 0 0 0 1.5px rgb(0 0 0 / 25%), inset 0 0 0 1px rgb(0 0 0 / 15%), 4px 4px 0 -1px rgb(0 0 0 / 20%); background: repeating-linear-gradient(90deg, rgb(255 255 255 / 55%) 0 1.5px, transparent 1.5px 11px), repeating-linear-gradient(0deg, rgb(255 255 255 / 55%) 0 1.5px, transparent 1.5px 11px), linear-gradient(rgb(0 0 0 / 18%), rgb(0 0 0 / 5%)); }
.g-goal .netback { position: absolute; left: 18px; right: 18px; top: 14px; bottom: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 25%) 0 1px, transparent 1px 9px), repeating-linear-gradient(0deg, rgb(255 255 255 / 25%) 0 1px, transparent 1px 9px); }
.g-keeper { width: 52px; height: 84px; z-index: 3; }
.g-keeper .armL { transform: rotate(58deg); } .g-keeper .armR { transform: rotate(-58deg); }
.g-keeper .pl-all { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.g-keeper.dive-l .pl-all { transform: translateX(-26px) translateY(-10px) rotate(-70deg); }
.g-keeper.dive-r .pl-all { transform: translateX(26px) translateY(-10px) rotate(70deg); }
.g-keeper.dive-l .arm, .g-keeper.dive-r .arm { transform: rotate(180deg); }
.g-kicker { width: 56px; height: 92px; z-index: 3; }
.g-kicker .armL { transform: rotate(20deg); } .g-kicker .armR { transform: rotate(-20deg); }
.g-kicker.kick .pl-all { animation: kickRun .5s ease; }
.g-kicker.kick .armL { transform: rotate(60deg); } .g-kicker.kick .armR { transform: rotate(-70deg); }
@keyframes kickRun { 0% { transform: none; } 55% { transform: translate(34px, 6px) rotate(-8deg); } 100% { transform: translate(20px, 2px); } }
.g-ball.foot { width: 26px; height: 26px; filter: drop-shadow(0 4px 2px rgb(0 0 0 / 35%)); }
.g-sign { font-size: 18px; padding: 5px 16px; z-index: 4; }
.g-sb.stadium { box-shadow: 0 0 0 2px #3A3A52, 0 0 16px rgb(125 227 255 / 35%), 0 5px 12px rgb(0 0 0 / 30%); }
/* --- космос (метеориты) */
.sc.space { background: radial-gradient(60% 50% at 70% 20%, #3B2C7A, transparent), linear-gradient(#0B0822, #1B1447 60%, #2D1F63); }
.sc .neb { width: 260px; height: 160px; border-radius: 50%; filter: blur(30px); opacity: .5; }
.sc .neb.n1 { left: 300px; top: 20px; background: #EC6FA8; } .sc .neb.n2 { left: 40px; top: 120px; background: #5B4CE6; }
.sc .stars { left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.sc .stars.tw { animation: twinkle 3s ease-in-out infinite; } .sc .stars.tw2 { animation: twinkle 4.4s ease-in-out infinite reverse; }
@keyframes twinkle { 50% { opacity: .25; } }
.sc .planet { left: 470px; top: 60px; animation: floaty 8s ease-in-out infinite; }
.sc .moon { left: 250px; top: 36px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #C9C9D8 60%, #8E8EA6); box-shadow: 0 0 12px rgb(255 255 255 / .4); }
.sc .shoot-star { left: -40px; top: 40px; width: 70px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(18deg); animation: shootStar 6s linear infinite; }
@keyframes shootStar { 0%, 80% { transform: translate(0, 0) rotate(18deg); opacity: 0; } 82% { opacity: 1; } 100% { transform: translate(700px, 230px) rotate(18deg); opacity: 0; } }
@keyframes floaty { 50% { transform: translateY(-6px); } }
.sc .city { left: 0; bottom: 0; }
.sc .blink, .blink { animation: blinkL 1.6s steps(2) infinite; }
@keyframes blinkL { 50% { opacity: .2; } }
.sc .turret { left: 8px; top: 234px; }
.g-tramp { background: linear-gradient(#1B6E8C, #0E3A4E); box-shadow: 0 0 0 2px #7DE3FF, 0 0 14px #7DE3FF, 0 0 30px rgb(125 227 255 / .5); }
.g-rock .emo { filter: drop-shadow(0 0 8px rgb(255 160 60 / .8)); }
.g-sb.hud { background: rgb(10 14 40 / .75); box-shadow: 0 0 0 1.5px #7DE3FF, 0 0 14px rgb(125 227 255 / .5); }
.g-sb.hud b { background: transparent; color: #7DE3FF; text-shadow: 0 0 8px #7DE3FF; } .g-sb.hud .sb-bad { color: #FF6B9A; text-shadow: 0 0 8px #FF6B9A; }
/* --- ферма (крот) */
.sc.farm { background: linear-gradient(#8FD3FF, #CDEFFF 50%); }
.sc .sun { left: 12px; top: 4px; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(#FFE56B, #FFB224); box-shadow: 0 0 20px #FFD84D; }
.sc .sun i { position: absolute; inset: -12px; border-radius: 50%; background: repeating-conic-gradient(rgb(255 216 77 / .55) 0 8deg, transparent 8deg 30deg); animation: spin 18s linear infinite; z-index: -1; }
@keyframes spin { to { transform: rotate(360deg); } }
.sc .cloud { left: -120px; width: 90px; height: 26px; border-radius: 99px; background: #fff; box-shadow: 22px -10px 0 4px #fff, 48px -4px 0 0 #fff; opacity: .95; animation: cloudDrift var(--d) linear infinite; }
.sc .cloud.small { transform: scale(.7); }
@keyframes cloudDrift { to { left: 700px; } }
.sc .hills { left: 0; top: 20px; }
.sc .fence { left: 0; top: 48px; }
.sc .field { left: 0; right: 0; top: 84px; bottom: 0; background: radial-gradient(circle at 20% 30%, rgb(255 255 255 / .1) 0 2px, transparent 3px) 0 0 / 34px 22px, repeating-linear-gradient(180deg, #6FBE5B 0 30px, #79C765 30px 60px); }
.sc .flower { width: 16px; height: 16px; }
.g-hole { background: radial-gradient(#2A1D10 40%, #4A331D); }
.g-mound { width: 112px; height: 26px; border-radius: 0 0 50% 50% / 0 0 100% 100%; background: linear-gradient(#8B5E34, #6B4526); box-shadow: inset 0 3px 0 #A87444; z-index: 3; clip-path: inset(40% 0 0 0); }
.g-mole { z-index: 2; }
.g-mole .g-label { top: -12px; z-index: 4; }
.g-hammer { width: 42px; height: 42px; z-index: 6; transform-origin: 80% 80%; }
.g-hammer .emo { animation: hammer .35s ease-in forwards; transform-origin: 85% 85%; }
@keyframes hammer { from { transform: rotate(-70deg); } 60% { transform: rotate(22deg); } to { transform: rotate(10deg); } }
.g-stars { width: 34px; height: 34px; z-index: 6; animation: fx .7s ease forwards; }
.g-sb.wood { background: linear-gradient(#A8743F, #8B5A2B); box-shadow: 0 0 0 2px #6B4526, 0 4px 0 #5A3A1E; }
.g-sb.wood b { background: #3B2A1A; color: #FFF6D6; text-shadow: none; } .g-sb.wood .sb-bad { color: #FFB4A8; } .g-sb.wood small { color: #FFE8C2; }
/* --- праздник (шарики) */
.sc.fair { background: linear-gradient(#7CCBFF, #D8F1FF 70%); }
.sc.fair .sun { left: 14px; top: 34px; }
.sc .bunting { left: 0; top: 0; }
.sc .airship { left: 468px; top: 120px; animation: floaty 6s ease-in-out infinite; opacity: .85; }
.sc .bird { left: -40px; animation: birdFly var(--d) linear infinite; }
@keyframes birdFly { 0% { left: -40px; transform: translateY(0); } 50% { transform: translateY(-14px); } 100% { left: 680px; transform: translateY(0); } }
.sc .hill { left: 0; bottom: 0; }
.g-pop { font: 900 20px var(--font); color: #fff; -webkit-text-stroke: 1.5px #14141F; z-index: 7; animation: popTxt .65s ease-out forwards; }
.g-pop.ok { color: #FFD84D; } .g-pop.bad { color: #C9C9D8; font-size: 15px; }
@keyframes popTxt { from { opacity: 0; margin-top: 8px; } 25% { opacity: 1; margin-top: 0; } to { opacity: 0; margin-top: -20px; } }
.g-q { z-index: 4; }
.g-sb.carn { background: #E5484D; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #E5484D, 0 5px 12px rgb(0 0 0 / 25%); }
.g-sb.carn b { background: #14141F; }
.g-sb.carn small { color: #fff; }
@media (prefers-reduced-motion: reduce) { .sc *, .crow .fan, .g-player .armR, .g-dribble .db { animation: none !important; } }
.game { grid-template-columns: minmax(0, 1fr); }
.g-hintbar.done { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); }
.g-hintbar.done small { opacity: .8; }
.slot.shown { position: relative; } .slot.shown::after { content: "!"; position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--bad); color: #fff; font: 800 12px/18px var(--font); text-align: center; }
.checkbar-in > .fb, .checkbar-in > .grow { flex: 1 1 280px; min-width: min(280px, 100%); }

/* ============ v4.7: своя картинка в меме */
.upzone { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px dashed var(--border-strong); border-radius: 18px; background: var(--sunken); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--spring); margin: 6px 0 18px; }
.upzone:hover, .upzone.over { border-color: var(--brand); background: var(--brand-soft); }
.upzone.over { transform: scale(1.01); }
.upzone.busy { opacity: .6; pointer-events: none; }
.upzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upzone .uz-ico { font-size: 30px; line-height: 1; }
.upzone b { display: block; font-size: 15px; }
.upzone small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.pt-img .pimg { width: 100%; height: 100%; object-fit: contain; border-radius: 1.2cqmin; }

/* ============ v4.8: пустая рамка «Своя картинка» */
.pt-slot .pslot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .6cqmin; border: .8cqmin dashed #8E86F0; border-radius: 3cqmin; background: repeating-linear-gradient(45deg, rgb(91 76 230 / .06) 0 3cqmin, rgb(91 76 230 / .12) 3cqmin 6cqmin), #fff; color: #4B3FD0; text-align: center; cursor: pointer; transition: background .15s, transform .15s var(--spring); }
.pt-slot .pslot:hover { background: #EFEDFF; transform: scale(1.02); }
.pt-slot .ps-ico { font-size: calc(var(--s) * .3cqmin); line-height: 1; }
.pt-slot .pslot b { font-size: calc(var(--s) * .1cqmin); font-weight: 800; }
.pt-slot .pslot small { font-size: calc(var(--s) * .065cqmin); color: #6E66D8; font-weight: 600; }
.canvas:not(.edit) .pt-slot { visibility: hidden; }
.canvas.edit.drop-over, .canvas.edit .ci.drop-over { outline: 3px dashed var(--brand); outline-offset: 4px; }
.gallery .tpl-slot { position: relative; }
.gallery .tpl-slot::after { content: "Своя"; position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 99px; background: var(--brand); color: #fff; font: 800 11px var(--font); }

/* ============================================================ v4.9 направления: новые задания, онбординг, кабинет, ИИ */
/* ---------- ответ числом / впиши ответ */
.i-list { display: flex; flex-direction: column; gap: 10px; }
.i-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 16px; background: var(--panel); transition: border-color .2s, background .2s; }
.i-row .no { width: 28px; height: 28px; border-radius: 9px; background: var(--sunken); color: var(--text-3); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.i-row.ok { border-color: var(--ok-line); background: var(--ok-soft); }
.i-row.bad { border-color: var(--bad-line); background: var(--bad-soft); }
.i-row.shake { animation: shake .36s ease; }
.i-q { font-size: 16.5px; font-weight: 700; min-width: 0; }
.i-ans { display: flex; align-items: center; gap: 10px; }
.i-ans .mk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; }
.i-row.ok .mk { background: var(--ok); color: #fff; } .i-row.bad .mk { background: var(--bad); color: #fff; }
.i-note { grid-column: 2 / -1; font-size: 13px; color: var(--bad); font-weight: 600; }
.num-box { display: inline-flex; align-items: center; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--panel); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.num-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.num-in { width: 108px; border: 0; background: none; padding: 9px 12px; font-size: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; outline: none; }
.num-in[readonly] { cursor: default; }
.unit { padding: 0 12px; align-self: stretch; display: grid; place-items: center; background: var(--sunken); color: var(--text-2); font-weight: 700; font-size: 14px; border-left: 1.5px solid var(--border); }
.i-row.ok .num-box { border-color: var(--ok); } .i-row.bad .num-box { border-color: var(--bad); }
.i-row.ok .num-in { color: var(--ok); } .i-row.bad .num-in { color: var(--bad); }
.fill-line { font-size: 19px; font-weight: 700; line-height: 2.1; min-width: 0; font-family: var(--font); }
.fill-in { width: calc(var(--w, 3ch) + 26px); min-width: 46px; max-width: 100%; border: 2px dashed var(--border-strong); background: var(--sunken); border-radius: 10px; padding: 3px 8px; margin: 0 3px; font-size: 18px; font-weight: 800; text-align: center; color: var(--brand); outline: none; transition: border-color .15s, background .15s; }
.fill-in:focus { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.fill-in.ok { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.fill-in.bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.fill-in.shake { animation: shake .36s ease; }
.fill-row.ok { border-color: var(--ok-line); background: var(--panel); }
/* ---------- шаги решения */
.sol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sol li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--panel); }
.sol li i { font-style: normal; width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--sunken); color: var(--text-3); }
.sol li code { font: 700 16px/1.4 var(--mono); white-space: pre-wrap; }
.sol li.ok { border-color: var(--ok-line); background: var(--ok-soft); } .sol li.ok i { background: var(--ok); color: #fff; }
.sol li.bad { border-color: var(--bad-line); background: var(--bad-soft); } .sol li.bad i { background: var(--bad); color: #fff; }
.sol li small { margin-left: auto; color: var(--bad); font-weight: 700; }
.sol li.next { border-style: dashed; color: var(--text-3); background: none; }
.sol li.pop { animation: popIn .3s var(--spring); }
.steps-bank { display: flex; flex-wrap: wrap; gap: 10px; }
.code-opt { font: 700 15px/1.4 var(--mono); white-space: pre; text-align: left; }
@keyframes popIn { from { transform: scale(.94); opacity: .4; } to { transform: none; opacity: 1; } }
/* ---------- координатная плоскость */
.plot-target { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-weight: 700; margin-bottom: 12px; }
.plot-target.done { background: var(--ok-soft); color: var(--ok); }
.plot { max-width: 440px; margin: 0 auto; background: var(--panel); border: 1.5px solid var(--border); border-radius: 18px; padding: 8px; }
.plot svg { display: block; width: 100%; height: auto; user-select: none; }
.plot .gl { stroke: var(--border); stroke-width: 1; }
.plot .gl.ax { stroke: var(--text-2); stroke-width: 2; }
.plot .gn { fill: var(--text-3); font: 600 11px var(--font); text-anchor: middle; }
.plot .ax-n { font-weight: 800; font-size: 14px; fill: var(--text-2); font-style: italic; }
.plot .fn { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
.plot .pt circle { stroke: #fff; stroke-width: 2.5; }
.plot .pt text { font: 800 14px var(--font); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.plot .pt.ok circle { fill: var(--ok); } .plot .pt.ok text { fill: var(--ok); }
.plot .pt.bad circle { fill: var(--bad); } .plot .pt.bad text { fill: var(--bad); }
.plot .pt.miss circle { fill: var(--bad); animation: missPt .75s ease forwards; } .plot .pt.miss text { fill: var(--bad); }
@keyframes missPt { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: .25; } }
.plot .nd { fill: transparent; cursor: crosshair; }
.plot .nd:hover { fill: var(--brand); fill-opacity: .22; }

/* ---------- кнопка онбординга в демо-панели */
.onb-btn { border: 0; background: var(--sun); color: #14141F; border-radius: 10px; padding: 6px 12px; font-weight: 800; font-size: 13px; }
.onb-btn:hover { filter: brightness(1.05); }

/* ---------- онбординг */
body.onb-open { overflow: hidden; }
.onb { position: fixed; inset: 0; z-index: 90; overflow: auto; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 10% -10%, #E9E3FF 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #FFE8C8 0%, transparent 55%), var(--canvas); }
:root[data-theme="dark"] .onb { background: radial-gradient(1200px 600px at 10% -10%, #231F42 0%, transparent 60%), var(--canvas); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .onb { background: radial-gradient(1200px 600px at 10% -10%, #231F42 0%, transparent 60%), var(--canvas); } }
.onb-card { width: min(720px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--sh-lg); padding: 22px 28px 32px; animation: popIn .35s var(--ease); }
.onb-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 36px; margin-bottom: 18px; }
.onb-back { justify-self: start; border: 0; background: none; color: var(--text-2); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; }
.onb-back:hover { background: var(--hover); }
.onb-dots { display: flex; gap: 6px; } .onb-dots i { width: 28px; height: 6px; border-radius: 99px; background: var(--border); transition: background .3s; } .onb-dots i.on { background: var(--brand); }
.onb-logo { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.onb-logo .logo { width: 26px; height: 26px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; } .onb-logo .logo svg { width: 16px; }
.onb-body h1 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 8px; }
.onb-body .lead { color: var(--text-2); font-size: 16px; margin-bottom: 22px; }
.onb-hero { text-align: center; padding: 10px 0; }
.onb-big { display: inline-block; font-size: 56px; line-height: 1; margin-bottom: 14px; }
.onb-big.spin { animation: onbBounce 1s var(--ease) infinite alternate; }
@keyframes onbBounce { to { transform: translateY(-8px) rotate(-6deg); } }
.onb-feats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: -6px 0 26px; }
.onb-feats span { padding: 7px 12px; border-radius: 99px; background: var(--sunken); font-weight: 700; font-size: 13.5px; }
.onb-go { min-width: 220px; }
.onb-alt { margin-top: 18px; font-size: 13.5px; color: var(--text-3); }
.lnk { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.onb-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.onb-dir { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px; border-radius: 20px; border: 2px solid var(--border); background: var(--panel); box-shadow: 0 3px 0 var(--border); transition: transform .12s, border-color .15s, background .15s, box-shadow .12s; }
.onb-dir:hover { border-color: var(--dc); transform: translateY(-2px); }
.onb-dir[aria-pressed="true"] { border-color: var(--dc); background: var(--ds); box-shadow: 0 3px 0 var(--dc); }
:root[data-theme="dark"] .onb-dir[aria-pressed="true"] { background: color-mix(in srgb, var(--dc) 18%, var(--panel)); }
.od-e { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.onb-dir b { font-size: 18px; } .onb-dir small { color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.onb-foot { margin-top: 16px; }
.onb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--ds); color: var(--dc); font-weight: 800; font-size: 13px; margin-bottom: 12px; }
.onb-chip.sm { margin: 4px 0 0; font-size: 12px; padding: 3px 10px; }
:root[data-theme="dark"] .onb-chip { background: color-mix(in srgb, var(--dc) 20%, var(--panel)); }
.onb-specs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.onb-spec { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 14px; border: 2px solid var(--border-strong); background: var(--panel); font-weight: 700; font-size: 15.5px; box-shadow: 0 3px 0 var(--border-strong); }
.onb-spec[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); box-shadow: 0 3px 0 var(--brand-line); }
.onb-name input { font-size: 18px; padding: 14px 16px; border-radius: 14px; }
.onb-preview { display: flex; align-items: center; gap: 12px; min-height: 58px; margin: 14px 0 22px; padding: 10px 14px; border-radius: 16px; background: var(--sunken); }
.onb-preview b { display: block; } .onb-preview small { color: var(--text-3); font-weight: 600; }
.onb-ready { list-style: none; padding: 0; margin: 18px auto 0; max-width: 470px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.onb-ready li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--sunken); font-weight: 600; opacity: 0; animation: readyIn .35s var(--ease) forwards; animation-delay: calc(var(--i) * .32s + .15s); }
.onb-ready li i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-style: normal; }
@keyframes readyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .onb-card { padding: 16px 16px 24px; border-radius: 22px; } .onb-dirs { grid-template-columns: minmax(0, 1fr); } .onb-dir { flex-direction: row; align-items: center; gap: 14px; padding: 14px; } .od-e { margin: 0; } .onb-dir small { display: block; } .onb-logo { display: none; } .onb-top { grid-template-columns: 1fr auto; } }

/* ---------- кабинет репетитора */
.home-acts { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.home-acts.four { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 1200px) { .home-acts.four { grid-template-columns: 1fr 1fr; } }
.ha { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); box-shadow: 0 3px 0 var(--border); transition: transform .12s, box-shadow .12s, border-color .15s; }
.ha:hover { transform: translateY(-2px); border-color: var(--brand-line); }
.ha:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.ha-e { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.ha b { font-size: 16.5px; } .ha small { color: var(--text-3); font-size: 13px; font-weight: 600; }
.ha.ai { background: linear-gradient(135deg, #6D5DF5, #9B5CF0 55%, #E86FB1); color: #fff; border: 0; box-shadow: 0 4px 0 #4B3CC7, 0 14px 30px -12px rgb(109 93 245 / 60%); }
.ha.ai small { color: rgb(255 255 255 / 85%); }
.my-lessons { display: flex; flex-direction: column; gap: 8px; }
.ml-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); }
.ml-row b { display: block; } .ml-e { width: 40px; height: 40px; border-radius: 12px; background: var(--sunken); display: grid; place-items: center; font-size: 20px; flex: none; }
.ml-btns { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ai-tag { color: var(--brand); font-weight: 800; } .ok-t { color: var(--ok); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tr-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--panel); transition: border-color .15s, transform .12s, background .15s; }
.tr-tile:hover { border-color: var(--brand); transform: translateY(-2px); }
.tr-tile .e { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.tr-tile b { font-size: 14.5px; } .tr-tile small { color: var(--text-3); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tr-tile .try { margin-top: auto; padding-top: 8px; color: var(--brand); font-weight: 800; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; }
.tr-tile:hover .try, .tr-tile:focus-visible .try { opacity: 1; }
.tr-grid.games .tr-tile { background: linear-gradient(180deg, var(--sun-soft), var(--panel)); }
.start-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.start-list li { display: flex; align-items: center; gap: 12px; }
.start-list li > div { flex: 1; min-width: 0; } .start-list li b { display: block; font-size: 14.5px; }
.start-list li > i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--sunken); color: var(--text-3); }
.start-list li.done > i { background: var(--ok); color: #fff; } .start-list li.done b { text-decoration: line-through; color: var(--text-3); }
.ai-orb { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(135deg, #6D5DF5, #E86FB1); box-shadow: 0 6px 16px -6px rgb(109 93 245 / 60%); }
.ai-orb.spin { animation: aiPulse 1s ease-in-out infinite alternate; }
@keyframes aiPulse { to { transform: scale(1.08) rotate(8deg); } }
.ai-meters { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.ai-meters > div { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.ai-meters .meter > i { background: linear-gradient(90deg, #6D5DF5, #E86FB1); }
.ai-pill { background: var(--brand-soft); color: var(--brand); }
.ai-btn { border-color: var(--brand-line); color: var(--brand); }
.ai-btn:hover { background: var(--brand-soft); }
@media (max-width: 900px) { .home-acts { grid-template-columns: minmax(0, 1fr); } .ml-row { flex-wrap: wrap; } .ml-btns { width: 100%; justify-content: flex-start; } }

/* ---------- окна: попробовать тренажёр, ИИ */
.try-e { font-size: 34px; }
.try-host { padding: 18px; }
.chips-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.chip-t { border: 1.5px solid var(--border-strong); background: var(--panel); border-radius: 99px; padding: 6px 12px; font-weight: 700; font-size: 13.5px; }
.chip-t:hover { border-color: var(--brand); color: var(--brand); }
#aiDur button small { display: block; font-size: 11px; opacity: .7; font-weight: 600; }
.ai-warn { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--wip-soft); color: var(--text); font-size: 14px; }
.ai-warn.bad { background: var(--bad-soft); } .ai-warn b { font-size: 14.5px; } .ai-warn span { color: var(--text-2); }
.ai-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.ai-bar { margin: 18px 0 12px; height: 8px; } .ai-bar > i { background: linear-gradient(90deg, #6D5DF5, #E86FB1); transition: width .15s linear; }
.ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; counter-reset: st; }
.ai-list li { counter-increment: st; display: grid; grid-template-columns: 26px 30px 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--sunken); animation: readyIn .25s var(--ease); }
.ai-list li::before { content: counter(st); color: var(--text-3); font-weight: 800; font-size: 12.5px; }
.ai-list li .e { font-size: 18px; } .ai-list li small { color: var(--text-3); font-weight: 600; }
.ai-ok { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--ok-soft); }
.ai-ok span { color: var(--text-2); font-size: 14px; }
.invite-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--sunken); }
.invite-box code { flex: 1 1 240px; min-width: 0; font: 600 14px var(--mono); word-break: break-all; }
.ml-row { flex-wrap: wrap; }
.ml-row > .grow { flex: 1 1 220px; min-width: 0; }
.ml-btns { flex: none; }
.tr-tile { position: relative; }
.tr-tile .try { position: absolute; top: 12px; right: 12px; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .i-row { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 12px; }
  .i-ans { grid-column: 2; flex-wrap: wrap; }
  .fill-line { font-size: 17px; }
  .num-in { width: 90px; }
}
@media (max-width: 640px) {
  .onb-dir { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
  .onb-dir .od-e { grid-row: 1 / 3; }
}

/* ============================================================ v4.10 онбординг плавнее, «＋» в заданиях, список уроков, профиль */
.onb { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.onb-card { animation: none; }
.onb-body.enter { animation: stepIn .32s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.onb-dir { position: relative; }
.onb-dir:hover { border-color: var(--brand-line); }
.onb-dir[aria-pressed="true"], :root[data-theme="dark"] .onb-dir[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 3px 0 var(--brand-line); }
.od-check { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 14px; opacity: 0; transform: scale(.4); transition: opacity .18s, transform .22s var(--spring); }
.onb-dir[aria-pressed="true"] .od-check { opacity: 1; transform: none; }
.onb-spec { transition: background .15s, border-color .15s, color .15s, box-shadow .12s, transform .12s; }
.onb-spec:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border-strong); }
.os-check { display: inline-grid; place-items: center; width: 0; overflow: hidden; opacity: 0; transition: width .18s var(--ease), opacity .15s; }
.onb-spec[aria-pressed="true"] .os-check { width: 18px; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .onb-body.enter, .onb { animation: none; } }

/* ---------- «＋» в задании */
.add-item { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 12px; border: 2px dashed var(--border-strong); border-radius: 14px; background: none; color: var(--text-3); font-weight: 800; font-size: 14.5px; transition: border-color .15s, color .15s, background .15s; }
.add-item:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.row-tools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.i-row:hover .row-tools, .sol li:hover .row-tools, .row-tools:focus-within { opacity: 1; }
.row-tools button { border: 0; background: var(--sunken); border-radius: 8px; width: 30px; height: 30px; font-size: 14px; }
.row-tools button:hover { background: var(--hover); }
.sol li .row-tools { margin-left: auto; }
@media (hover: none) { .row-tools { opacity: 1; } }
.if-err { color: var(--bad); font-weight: 700; font-size: 13.5px; min-height: 18px; margin-top: 10px; }

/* ---------- конструктор: список уроков */
.back-lnk { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 8px 4px 0; margin-bottom: 4px; color: var(--brand); font-weight: 800; font-size: 13.5px; }
.back-lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.continue-card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--r); border: 1.5px solid var(--brand-line); background: linear-gradient(90deg, var(--brand-soft), var(--panel)); transition: transform .12s, box-shadow .15s; }
.continue-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.continue-card b { display: block; font-size: 17px; } .cc-e { font-size: 32px; width: 54px; height: 54px; flex: none; border-radius: 16px; background: var(--panel); display: grid; place-items: center; }
.continue-card .btn3d { pointer-events: none; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lcard { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); overflow: hidden; transition: transform .12s, box-shadow .15s, border-color .15s; text-align: left; }
.lcard:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--brand-line); }
.lc-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px; border: 0; background: var(--sunken); min-height: 76px; align-content: center; }
.lc-strip span { width: 36px; height: 36px; border-radius: 10px; background: var(--panel); display: grid; place-items: center; font-size: 19px; box-shadow: var(--sh-xs); }
.lc-strip .more { font-size: 12px; font-weight: 800; color: var(--text-3); }
.lc-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 8px; flex: 1; }
.lc-title { font-size: 16px; line-height: 1.3; }
.lc-foot { display: flex; align-items: center; gap: 6px; padding: 10px 16px 14px; }
.lc-foot .btn { margin-right: auto; }
.lcard.new { align-items: flex-start; justify-content: center; gap: 4px; padding: 20px; min-height: 200px; border: 2px dashed var(--border-strong); background: none; }
.lcard.new:hover { border-color: var(--brand); }
.lcard.new .new-e { font-size: 30px; margin-bottom: 6px; } .lcard.new b { font-size: 16.5px; }
.lcard.new.ai { border: 0; background: linear-gradient(135deg, #6D5DF5, #9B5CF0 55%, #E86FB1); color: #fff; box-shadow: 0 4px 0 #4B3CC7; }
.lcard.new.ai .small { color: rgb(255 255 255 / 85%); }

/* ---------- профиль и аватар */
.avatar { overflow: hidden; }
.avatar.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.has-emo { color: var(--text); } .avatar.has-emo .emo { width: 72%; height: 72%; }
.avatar.xl { width: 88px; height: 88px; font-size: 30px; border-radius: 50%; }
.me-btn { width: 100%; border: 0; background: none; text-align: left; border-radius: 14px; padding: 8px; margin: -8px; transition: background .15s; }
.me-btn:hover { background: var(--hover); }
.prof-top { display: flex; align-items: center; gap: 18px; }
.prof-emo { grid-template-columns: repeat(6, 1fr); }
.prof-emo button[aria-pressed="true"] { outline: 2.5px solid var(--brand); outline-offset: 1px; background: var(--brand-soft); }
.prof-emo .emo { width: 28px; height: 28px; }
.prof-dir { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.prof-btn .avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.vphoto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.me-btn { margin: auto 0 0; }
.me .avatar { color: #fff; font-size: 12.5px; } .me .avatar.has-emo { color: var(--text); }

/* ============================================================ v4.11 свёрнутое меню, конструктор на весь экран, автосохранение */
.side-inner { position: sticky; }
.side-toggle { position: absolute; top: 20px; right: -14px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2); display: grid; place-items: center; font-size: 15px; box-shadow: var(--sh-sm); opacity: 0; transition: opacity .15s, background .15s, color .15s, transform .15s; }
.side:hover .side-toggle, .side-toggle:focus-visible, body.side-mini:not(.focus) .side-toggle { opacity: 1; }
.side-toggle:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: scale(1.08); }
.layout { transition: grid-template-columns .22s var(--ease); }
@media (min-width: 901px) {
  body.side-mini:not(.focus) .layout { grid-template-columns: 76px minmax(0, 1fr); }
  body.side-mini:not(.focus) .side-inner { padding: 16px 10px; align-items: center; }
  body.side-mini:not(.focus) .ws { width: auto; padding: 6px; }
  body.side-mini:not(.focus) .ws .grow, body.side-mini:not(.focus) .ws > .t3, body.side-mini:not(.focus) .nav-label, body.side-mini:not(.focus) .groups { display: none; }
  body.side-mini:not(.focus) .search { width: 44px; height: 40px; padding: 0; gap: 0; justify-content: center; font-size: 0; }
  body.side-mini:not(.focus) .search kbd { display: none; } body.side-mini:not(.focus) .search .ico { font-size: 17px; }
  body.side-mini:not(.focus) .nav { align-items: center; }
  body.side-mini:not(.focus) .nav button { position: relative; width: 48px; height: 44px; padding: 0; justify-content: center; }
  body.side-mini:not(.focus) .nav button > span:not(.count):not(.ico) { display: none; }
  body.side-mini:not(.focus) .nav button .ico { font-size: 19px; }
  body.side-mini:not(.focus) .nav .count { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  body.side-mini:not(.focus) .me { justify-content: center; padding: 6px; width: auto; }
  body.side-mini:not(.focus) .me .grow, body.side-mini:not(.focus) .me > .t3 { display: none; }
  /* свёрнутое меню: большая заметная кнопка «развернуть» сверху, а не только стрелка на краю */
  body.side-mini:not(.focus) .side-toggle { position: static; order: -1; width: 44px; height: 36px; border-radius: 12px; margin-bottom: -6px; background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); box-shadow: none; }
  body.side-mini:not(.focus) .side-toggle:hover { background: var(--brand); color: #fff; }
}
@media (max-width: 900px) { .side-toggle { display: none; } }

/* конструктор на весь экран: этапы — узкой колонкой из эмодзи, настройки этапа — выезжают справа */
body.b-wide .builder2 { grid-template-columns: 84px minmax(0, 1fr); }
body.b-wide .builder2 > .card:first-child { padding: 10px 8px !important; }
body.b-wide .builder2 > .card:first-child h3, body.b-wide .builder2 > .card:first-child .spacer, body.b-wide .builder2 > .card:first-child .row .t3 { display: none; }
body.b-wide .step-item { justify-content: center; padding: 6px; gap: 0; position: relative; }
body.b-wide .step-item .grow { display: none; }
body.b-wide .step-item .n { position: absolute; top: 2px; left: 4px; font-size: 10px; }
body.b-wide .builder2 [data-act="addDrawer"][data-kind="step"] { font-size: 0; padding: 10px !important; }
body.b-wide .builder2 [data-act="addDrawer"][data-kind="step"]::before { content: "➕"; font-size: 18px; }
body.b-wide .builder2 [data-act="bdel"] { font-size: 0; justify-content: center; }
body.b-wide .builder2 [data-act="bdel"] .ico { font-size: 17px; }
body.b-wide .builder2 .inspector { position: fixed; top: 120px; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); z-index: 40; overflow: auto; box-shadow: var(--sh-lg); transform: translateX(calc(100% + 24px)); transition: transform .25s var(--ease); }
body.b-wide.insp-open .builder2 .inspector { transform: none; }
body.b-wide .main { padding-right: 10px; }
[data-act="toggleInsp"][aria-pressed="true"] { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

/* автосохранение */
.save-state { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--ok-line); background: var(--ok-soft); color: var(--ok); border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 13.5px; }
.save-state .ico { font-size: 16px; }
.save-state.busy { border-color: var(--border); background: var(--sunken); color: var(--text-2); }
.save-state.busy .ico { animation: spinIco .8s linear infinite; }
.save-state.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
@keyframes spinIco { to { transform: rotate(360deg); } }
/* список этапов в конструкторе не уезжает при прокрутке доски */
@media (min-width: 901px) {
  .builder2 > .card:first-child { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; }
}
/* на уроке меню скрыто целиком — даже если в кабинете оно свёрнуто */
body.focus.side-mini .layout, body.focus .layout { grid-template-columns: minmax(0, 1fr); }
body.focus.side-mini .layout { grid-template-columns: minmax(0, 1fr); } /* страховка: в уроке меню нет */

/* ============================================================ v4.12 расписание, группы, уведомления ученику */
.week-card { padding: 12px; }
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-nav .week { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wday { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid transparent; background: none; transition: background .15s, border-color .15s; }
.wday:hover { background: var(--hover); }
.wday small { font-size: 12px; font-weight: 700; color: var(--text-3); } .wday b { font-size: 18px; }
.wday.today b { color: var(--brand); }
.wday.on { background: var(--brand-soft); border-color: var(--brand); }
.wday .dots { display: flex; gap: 3px; height: 6px; } .wday .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.ag-card { position: relative; }
.ag-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ag-main { border: 0; background: none; text-align: left; padding: 0; min-width: 0; }
.ag-main b { display: block; }
.faces.sm { margin-top: 6px; } .faces.sm .avatar { width: 24px; height: 24px; font-size: 9.5px; }
.empty-day { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; color: var(--text-2); }
.empty-day > span { font-size: 34px; }
.pick-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 280px; overflow: auto; padding: 4px; border-radius: 14px; background: var(--sunken); }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 600; }
.pick-row:hover { background: var(--panel); }
.pick-row input { width: 18px; height: 18px; accent-color: var(--brand); }
.pick-row b { flex: 1; font-size: 14.5px; }
.bad-t { color: var(--bad); }
.groups-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.gnav-card { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; position: sticky; top: 12px; }
.gnav { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 10px; font-weight: 650; font-size: 14.5px; color: var(--text-2); }
.gnav:hover { background: var(--hover); color: var(--text); }
.gnav.on { background: var(--brand-soft); color: var(--brand); }
.gnav.add { color: var(--brand); font-weight: 800; }
.gdot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }
.gdot.big { width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; }
.gdot.add { width: 14px; height: 14px; border-radius: 4px; background: var(--sunken); color: var(--brand); font: 800 12px/14px var(--font); text-align: center; margin: 0 3px; }
.side-add { color: var(--brand) !important; }
.row-acts { white-space: nowrap; text-align: right; }
.row-acts .icon-btn { display: inline-grid; vertical-align: middle; margin-left: 4px; }
.chip-s .gdot { margin-right: 5px; }
.sched-card .card-head h2 { display: flex; align-items: center; gap: 8px; }
.notices { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-bottom: 12px; }
.notice { width: 100%; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--text); font-weight: 600; font-size: 13.5px; }
.up-list { display: flex; flex-direction: column; gap: 6px; }
.up-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--sunken); }
.up-row.new { outline: 2px solid var(--brand-line); background: var(--brand-soft); }
.up-when { width: 78px; flex: none; } .up-when b { display: block; font-size: 16px; } .up-when small { color: var(--text-3); font-size: 12px; }
@media (max-width: 900px) {
  .groups-layout { grid-template-columns: minmax(0, 1fr); }
  .gnav-card { position: static; flex-direction: row; flex-wrap: wrap; } .gnav-card .nav-label { width: 100%; } .gnav { width: auto; }
  .week-nav .week { gap: 2px; } .wday { padding: 6px 0; } .wday b { font-size: 15px; }
}
.row-acts { text-align: left; }
table.compact .sw-t { display: none; }
.gh-head { flex-wrap: wrap; gap: 8px; }
@media (max-width: 1180px) {
  .groups-layout { grid-template-columns: minmax(0, 1fr); }
  .gnav-card { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; } .gnav-card .nav-label { width: 100%; padding: 4px 6px; } .gnav { width: auto; }
}
/* карточка «ближайший урок»: если колонка узкая (пол-экрана), план урока уходит под кнопку, а не наезжает на текст */
.split > .stack { container-type: inline-size; }
@container (max-width: 640px) {
  .next { grid-template-columns: minmax(0, 1fr); }
  .next .path { order: 2; }
}
.next .count { white-space: nowrap; }
/* видео в правом нижнем углу: кнопки «Чат» и реакций стоят прямо под ним (зазор 10 px) — чистый CSS, без JS */
body.dock-br .fabs { bottom: calc(35px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) { body.dock-br .fabs { bottom: calc(27px + env(safe-area-inset-bottom, 0px)); } }
/* кнопка реакций поменьше и при наведении не подпрыгивает — не задевает панель видео над ней */
.react-fab { width: 42px; height: 42px; font-size: 19px; }
.react-fab:hover { transform: scale(1.04); background: var(--hover); }
.react-wrap.open .react-fab:hover { background: var(--text); }
.fabs { align-items: center; }
body.dock-br .chat-fab:hover { transform: none; }

/* ============================================================ v4.13 помощник ученика, значок преподавателя в видео */
.vt .nm .role-tag { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgb(255 255 255 / 18%); font-size: 12px; margin-left: 2px; }
.helper-note { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); font-size: 13.5px; font-weight: 600; }
.helper-log { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 10px; }
.hm { max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 6px; background: var(--sunken); font-size: 14.5px; line-height: 1.45; align-self: flex-start; }
.hm.me { align-self: flex-end; border-radius: 16px 16px 6px 16px; background: var(--brand); color: #fff; }
.hm.typing { display: flex; gap: 4px; padding: 14px; } .hm.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: tdot 1s infinite; } .hm.typing i:nth-child(2) { animation-delay: .15s; } .hm.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.helper-form { display: flex; gap: 8px; margin-top: 12px; }
.helper-form input { flex: 1; min-width: 0; height: 46px; border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 0 14px; font: 500 15px var(--font); background: var(--panel); color: var(--text); }
.helper-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.helper-left { margin-top: 10px; }
.chip-t:disabled { opacity: .45; cursor: default; }
.helper-form .btn3d { min-width: 0; width: 52px; height: 46px; padding: 0; flex: none; }

/* v4.14 · лимиты ИИ закончились — доброе сообщение */
.helper-off { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--wip-soft); }
.helper-off .ho-e { font-size: 34px; line-height: 1; }
.helper-off b { display: block; font-size: 15.5px; margin-bottom: 4px; }
.helper-off span:not(.ho-e) { display: block; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.limit-note { display: block; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--wip-soft); color: var(--text); font-size: 13.5px; line-height: 1.45; }

/* v4.15 · кнопка «Спросить помощника» */
.helper-wrap { position: relative; display: inline-flex; }
.helper-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 5px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #6D5DF5, #E86FB1); color: #fff; font: 700 14.5px var(--font); white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -6px rgb(109 93 245 / 60%); transition: transform .15s, box-shadow .15s, filter .15s; }
.helper-cta:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px -8px rgb(109 93 245 / 70%); }
.helper-cta:active { transform: translateY(0) scale(.98); }
.helper-cta:focus-visible { outline: 3px solid var(--brand-line); outline-offset: 2px; }
.helper-cta .hc-orb { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgb(255 255 255 / 24%); }
.helper-cta .hc-short { display: none; }
.helper-cta.off { padding: 0 14px; background: var(--wip-soft); color: var(--text); box-shadow: none; border: 1px solid var(--border); font-weight: 600; }
.helper-cta.off:hover { transform: none; filter: none; box-shadow: none; }
.helper-tip { position: absolute; top: calc(100% + 10px); right: 4px; z-index: 6; white-space: nowrap; padding: 7px 11px; border-radius: 10px; background: var(--text); color: var(--panel); font-size: 12.5px; font-weight: 600; pointer-events: none; box-shadow: 0 8px 20px -10px rgb(0 0 0 / 40%); animation: fade .4s ease .6s both, fanBob 2.4s ease-in-out 1s infinite; }
.helper-tip::before { content: ''; position: absolute; top: -5px; right: 26px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
@media (max-width: 640px) {
  .helper-cta .hc-long { display: none; } .helper-cta .hc-short { display: inline; }
  .helper-cta { padding-right: 13px; } .helper-tip { left: 0; right: auto; white-space: normal; width: 210px; } .helper-tip::before { left: 22px; right: auto; }
}

/* v4.16 · тренажёры v48 */
.ti-in { width: 100%; min-width: 0; height: 44px; border: 2px solid var(--border-strong); border-radius: 12px; background: var(--panel); color: var(--text); padding: 0 12px; font: 700 16px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
.ti-in:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.ti-in[readonly] { cursor: default; }
.i-row.ok .ti-in { border-color: var(--ok); color: var(--ok); background: var(--panel); } .i-row.bad .ti-in { border-color: var(--bad); color: var(--bad); background: var(--panel); }
.wip-t { color: var(--wip); font-weight: 700; }

/* разложи по группам */
.sort-pool { display: flex; flex-wrap: wrap; gap: 10px; min-height: 52px; margin-bottom: 16px; }
.sc-btn { font-size: 16px; }
.sc-btn.sel { animation: glow 1.6s ease-in-out infinite; }
.sort-cols { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sort-cols.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sort-cols.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sort-col { --gc: var(--brand); display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-height: 150px; padding: 10px; border: 2px dashed color-mix(in srgb, var(--gc) 55%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--gc) 7%, var(--panel)); color: var(--text); text-align: left; cursor: pointer; transition: transform .12s, background .15s, border-color .15s; }
.sort-col:not(:disabled):hover { transform: translateY(-2px); background: color-mix(in srgb, var(--gc) 13%, var(--panel)); border-style: solid; }
.sort-col:disabled, .sort-col.static { cursor: default; }
.sort-col.static:hover { transform: none; }
.sort-col.bad { border-color: var(--bad); background: var(--bad-soft); }
.sort-col .sh { align-self: flex-start; padding: 4px 12px; border-radius: 99px; background: var(--gc); color: #fff; font-weight: 800; font-size: 15px; }
.sort-col .sbody { display: flex; flex-wrap: wrap; gap: 6px; }
.sort-col .sph { color: var(--text-3); font-size: 13px; padding: 4px 2px; }
/* карточка в группе — класс srt-c (раньше .sc — совпадал со сценами игр и закрывал им небо и трибуны белым) */
.srt-c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; font-weight: 700; font-size: 14.5px; background: var(--panel); border: 1.5px solid var(--border); }
.srt-c.ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); } .srt-c.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
.srt-c.ok, .srt-c.bad { animation: popIn .25s var(--spring); }

/* верно / неверно */
.tf-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
.tf-btn { padding: 7px 12px; font-size: 14.5px; }
.tf-btn.dim { opacity: .45; }
.tf-why { grid-column: 2 / -1; font-size: 13.5px; color: var(--text-2); font-weight: 600; line-height: 1.45; }

/* найди ошибку */
.spot-line { font-size: 18px; font-weight: 700; line-height: 2.15; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; }
.tok { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px; border-radius: 8px; }
.tok-btn { border: 0; background: none; color: var(--text); font: inherit; padding: 0 6px; cursor: pointer; border-bottom: 2px dotted var(--border-strong); border-radius: 6px 6px 2px 2px; transition: background .12s, color .12s; }
.tok-btn:hover { background: var(--brand-soft); color: var(--brand); border-bottom-color: var(--brand); }
.tok-btn.bad { background: var(--bad-soft); color: var(--bad); border-bottom-color: var(--bad); }
.tok.found { padding: 0 6px; } .tok.found.ok { background: var(--ok-soft); color: var(--ok); } .tok.found.bad { background: var(--bad-soft); color: var(--bad); }
.tok s, .tok-fix s { opacity: .55; font-weight: 600; }
.tok-fix { display: inline-flex; align-items: center; gap: 6px; }
.tok-fix .ti-in { width: calc(var(--w, 6ch) + 28px); height: 38px; font-size: 16px; border-style: dashed; background: var(--sunken); color: var(--brand); }
.tok-fix .ti-in:focus { border-style: solid; background: var(--brand-soft); }
.spot-q { white-space: nowrap; }

/* собери слово */
.lw-done { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lw { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-weight: 700; font-size: 14px; }
.lw.ok { background: var(--ok-soft); color: var(--ok); } .lw.bad { background: var(--bad-soft); color: var(--bad); }
.lw-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 14px 20px; border: 1.5px solid var(--border); border-radius: 20px; background: var(--panel); text-align: center; }
.lw-hint { font-size: 21px; font-weight: 800; }
.lw-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ls { width: 42px; height: 50px; border-radius: 12px; border: 2px dashed var(--border-strong); background: var(--sunken); display: grid; place-items: center; font: 800 24px var(--font); text-transform: lowercase; }
.ls.next { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.ls.on { border-style: solid; border-color: var(--ok); background: var(--ok-soft); color: var(--ok); animation: popIn .22s var(--spring); }
.lsp { width: 18px; }
.lw-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
.lt { width: 48px; height: 52px; border-radius: 14px; border: 2px solid var(--border-strong); background: var(--panel); color: var(--text); font: 800 22px var(--font); box-shadow: 0 3px 0 var(--border-strong); cursor: pointer; transition: transform .08s, box-shadow .08s; }
.lt:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.lt:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.lt.used { opacity: .18; box-shadow: none; }
.lt.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); box-shadow: 0 3px 0 var(--bad-line); }

/* диктант */
.dt-in { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dt-play { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; border: 0; }
.dt-play:hover { background: var(--brand-hover); }
.dt-slow { width: 36px; height: 36px; flex: none; font-size: 17px; }
.dt-after { grid-column: 2 / -1; font-size: 14px; color: var(--text-2); }

/* таблица */
.tt-scroll { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 16px; background: var(--panel); }
.tt { width: 100%; border-collapse: collapse; font-size: 16px; }
.tt th { background: var(--sunken); color: var(--text-2); font-weight: 800; font-size: 14px; text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--border); white-space: nowrap; }
.tt td { padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 700; white-space: nowrap; }
.tt tr:last-child td { border-bottom: 0; }
.tt td:first-child { color: var(--text-2); }
.tt .tt-in { margin: 0; }
.tt-tools { width: 1%; }

/* сравни */
.cmp { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cmp-x { min-width: 92px; padding: 8px 12px; border-radius: 12px; background: var(--sunken); font: 800 18px var(--font); text-align: center; }
.cmp-btns { display: inline-flex; gap: 6px; }
.cmp-b { width: 46px; height: 44px; padding: 0; justify-content: center; font-size: 22px; }
.cmp-sign { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 24px var(--font); animation: popIn .25s var(--spring); }
.cmp-sign.ok { background: var(--ok); color: #fff; } .cmp-sign.bad { background: var(--bad); color: #fff; }

/* числовая прямая */
.nl { background: var(--panel); border: 1.5px solid var(--border); border-radius: 18px; padding: 6px 8px; }
.nl svg { display: block; width: 100%; height: auto; user-select: none; }
.nl-axis { stroke: var(--text-2); stroke-width: 2.5; } .nl-arr { fill: var(--text-2); }
.nl-t { stroke: var(--text-3); stroke-width: 1.5; } .nl-t.maj { stroke: var(--text); stroke-width: 2.5; }
.nl-n { fill: var(--text-2); font: 700 14px var(--font); text-anchor: middle; }
.nl-p circle { stroke: var(--panel); stroke-width: 2.5; } .nl-p text { font: 800 15px var(--font); text-anchor: middle; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.nl-p.ok circle { fill: var(--ok); } .nl-p.ok text { fill: var(--ok); } .nl-p.bad circle { fill: var(--bad); } .nl-p.bad text { fill: var(--bad); }
.nl-p.miss circle { fill: var(--bad); animation: missPt .75s ease forwards; }
.nl-hit { fill: transparent; cursor: pointer; } .nl-hit:hover { fill: var(--brand); fill-opacity: .16; }
.nl-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.nl-legend span { padding: 4px 10px; border-radius: 99px; background: var(--sunken); display: inline-flex; gap: 6px; align-items: center; }
.nl-legend .ok { background: var(--ok-soft); color: var(--ok); } .nl-legend .bad { background: var(--bad-soft); color: var(--bad); }

/* показания прибора */
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.g-item { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.g-top { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.g-top .no { flex: none; }
.g-pic { display: grid; place-items: center; padding: 4px 0; }
.g-q { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g-q .i-ans { flex-wrap: wrap; justify-content: center; } .g-q .num-in { width: 84px; }
.g-q .i-note { grid-column: auto; text-align: center; }
.gsv { width: 100%; max-width: 180px; max-height: 230px; } .g-pic .gsv[viewBox^="0 0 300"] { max-width: 280px; }
.g-body { fill: var(--sunken); stroke: var(--border-strong); stroke-width: 1.5; }
.g-t { stroke: var(--text-2); stroke-width: 1.5; }
.g-n { fill: var(--text-2); font: 700 11px var(--font); text-anchor: middle; } .g-n.l { text-anchor: start; }
.g-red { fill: #E5484D; }
.g-water { fill: #5AA9F5; fill-opacity: .55; }
.g-glass { fill: none; stroke: var(--text-2); stroke-width: 2.5; stroke-linejoin: round; }
.g-spring { stroke: var(--text-3); stroke-width: 3; stroke-dasharray: 3 3; }
.g-mark { stroke: #E5484D; stroke-width: 3; stroke-linecap: round; }
.g-hook { fill: none; stroke: var(--text-2); stroke-width: 2.5; }
.g-obj { fill: #FFB224; }

/* что выведет код */
.pc { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pc-code { margin: 0; padding: 12px 14px; border-radius: 12px; background: #15151E; color: #E8E8F2; font: 600 14.5px/1.55 var(--mono); white-space: pre; overflow-x: auto; }
.pc-out { display: flex; align-items: center; gap: 8px; font: 700 13px var(--mono); color: var(--text-3); }
.pc-out .ti-in { font-family: var(--mono); height: 40px; }

/* диалог */
.dl { border: 1.5px solid var(--border); border-radius: 20px; background: var(--panel); overflow: hidden; }
.dl-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--sunken); font-size: 15px; }
.dl-head > span:first-child { font-size: 22px; }
.dl-chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; max-height: 360px; overflow-y: auto; }
.dl-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; animation: chatIn .3s var(--ease) both; }
.dl-msg.mine { align-self: flex-end; }
.dl-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 19px; }
.dl-b { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--sunken); font-size: 16px; font-weight: 600; line-height: 1.4; }
.dl-msg.mine .dl-b { flex-direction: column; align-items: flex-end; gap: 2px; border-radius: 18px 18px 6px 18px; background: var(--ok-soft); color: var(--ok); }
.dl-msg.mine.bad .dl-b { background: var(--bad-soft); color: var(--bad); }
.dl-msg.mine small { font-size: 11.5px; font-weight: 700; opacity: .8; }
.dl-say { border: 0; background: none; color: var(--text-3); padding: 2px; display: inline-grid; place-items: center; cursor: pointer; border-radius: 8px; }
.dl-say:hover { color: var(--brand); background: var(--brand-soft); }
.dl-opts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px 14px; border-top: 1px dashed var(--border); }
.dl-opt { justify-content: flex-start; text-align: left; font-size: 15.5px; }
.dl > .plot-target { margin: 0 14px 14px; }

@media (max-width: 640px) {
  .sort-cols, .sort-cols.g3, .sort-cols.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-row { grid-template-columns: 30px minmax(0, 1fr); } .tf-row .i-ans { grid-column: 2; }
  .spot-row, .dt-row, .pc-row, .cmp-row { grid-template-columns: 30px minmax(0, 1fr); } .spot-row .i-ans, .dt-row .i-ans, .pc-row .i-ans, .cmp-row .i-ans { grid-column: 2; }
  .ls { width: 34px; height: 42px; font-size: 20px; } .lt { width: 42px; height: 46px; font-size: 19px; }
  .cmp { flex-wrap: nowrap; gap: 6px; } .cmp-x { flex: 1; min-width: 0; padding: 7px 6px; font-size: 15px; } .cmp-btns { gap: 4px; } .cmp-b { width: 34px; height: 38px; font-size: 18px; } .cmp-sign { width: 38px; height: 38px; font-size: 20px; }
}

/* v4.17 · визуальный редактор заданий */
.inspector { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.ved { display: flex; flex-direction: column; gap: 10px; }
.ved-hint { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.ved-sec { margin-top: 6px; font-weight: 800; font-size: 14px; }
.ved-h { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.ved-live { text-align: center; margin-top: 4px; }
.ved-list { display: flex; flex-direction: column; gap: 10px; }
.ved-item { border: 1.5px solid var(--border); border-radius: 14px; background: var(--panel); padding: 8px 10px 10px; }
.ved-ih { display: flex; align-items: center; gap: 2px; min-height: 30px; }
.ved-ih .icon-btn.sm { width: 28px; height: 28px; font-size: 13px; }
.ved-no { font-size: 12px; font-weight: 800; color: var(--text-3); text-transform: uppercase; letter-spacing: .03em; }
.ved-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ved-topf { margin-bottom: 2px; }
.ved-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ved-f.full { grid-column: 1 / -1; }
.ved-l { font-size: 12px; font-weight: 700; color: var(--text-2); }
.ved-in { width: 100%; min-width: 0; border: 1.5px solid var(--border-strong); border-radius: 10px; background: var(--panel); color: var(--text); padding: 8px 10px; font: 600 14.5px var(--font); outline: none; transition: border-color .15s, box-shadow .15s; }
textarea.ved-in { resize: vertical; line-height: 1.45; }
.ved-in.mono { font: 600 13.5px/1.5 var(--mono); }
.ved-in:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ved-in::placeholder { color: var(--text-3); font-weight: 500; }
select.ved-in { cursor: pointer; }
.ved-wrapline { display: flex; gap: 6px; align-items: center; }
.ved-wrapline .ved-in { flex: 1; }
.ved-wrapbtn { white-space: nowrap; flex: none; }
.ved-warn { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--wip-soft); color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.ved-add { align-self: flex-start; }
.ved-addrow { display: flex; flex-wrap: wrap; gap: 8px; }
.ved-seg { width: 100%; } .ved-seg button { flex: 1; }
.ved-seg.sign button { font-size: 20px; font-weight: 800; }
.ved-chip { display: inline-block; padding: 2px 8px; margin: 2px 0; border-radius: 8px; background: var(--sunken); border: 1px solid var(--border); font-weight: 700; color: var(--text); }
/* варианты */
.ved-opts { display: flex; flex-direction: column; gap: 6px; }
.ved-opt { display: flex; align-items: center; gap: 6px; }
.ved-opt .ved-in { flex: 1; }
.ved-opt.on .ved-in { border-color: var(--ok); background: var(--ok-soft); }
.ved-radio { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--panel); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; cursor: pointer; }
.ved-radio:hover { border-color: var(--ok); }
.ved-opt.on .ved-radio { background: var(--ok); border-color: var(--ok); }
.ved-addopt { align-self: flex-start; margin-top: 4px; }
/* группы */
.ved-gcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ved-gcol { --gc: var(--brand); display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--gc) 55%, var(--border)); background: color-mix(in srgb, var(--gc) 7%, var(--panel)); }
.ved-ghead { display: flex; gap: 4px; align-items: center; }
.ved-ghead .ved-in { font-weight: 800; border-color: var(--gc); }
.ved-gcard { display: flex; gap: 4px; align-items: center; }
.ved-gcard .ved-in { padding: 6px 8px; font-size: 13.5px; }
/* таблица */
.ved-tbl { overflow-x: auto; border: 1.5px solid var(--border); border-radius: 12px; }
.ved-tbl table { border-collapse: collapse; width: 100%; }
.ved-tbl td, .ved-tbl th { padding: 4px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ved-tbl thead td { background: var(--sunken); }
.ved-tbl td.ans .ved-in { border-style: dashed; border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.ved-cell { display: flex; gap: 2px; align-items: center; min-width: 96px; }
.ved-cell .ved-in { padding: 6px 7px; font-size: 13.5px; }
.ved-tog { flex: none; border: 0; background: none; font-size: 12px; padding: 4px 2px; border-radius: 6px; cursor: pointer; opacity: .5; white-space: nowrap; }
.ved-tog.on { opacity: 1; } .ved-tog:hover { opacity: 1; background: var(--hover); }
.ved-rowbtn { width: 1%; }
/* диалог */
.ved-who { display: flex; flex-direction: column; gap: 6px; }
.ved-emos { display: flex; flex-wrap: wrap; gap: 4px; }
.ved-emo { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--panel); font-size: 18px; cursor: pointer; }
.ved-emo.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }
.ved-dls { display: flex; flex-direction: column; gap: 8px; }
.ved-dl { display: flex; gap: 6px; align-items: flex-start; }
.ved-dlav { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); font-size: 17px; margin-top: 4px; }
.ved-dlb { flex: 1; min-width: 0; padding: 6px 8px 8px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--sunken); }
.ved-dl.me { padding-left: 24px; } .ved-dl.me .ved-dlb { background: var(--ok-soft); border-color: var(--ok-line); }
.ved-dl.me .ved-opts { margin-top: 2px; }
/* прибор */
.ved-gprev { display: grid; place-items: center; margin-top: 8px; padding: 6px; border-radius: 12px; background: var(--sunken); }
.ved-gprev .gsv { max-width: 130px; max-height: 190px; }
.ved-gprev .gsv[viewBox^="0 0 300"] { max-width: 240px; }
/* текстовый режим */
.ved-raw { border: 1.5px dashed var(--border-strong); border-radius: 12px; padding: 8px 10px; }
.ved-raw > summary { cursor: pointer; font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.ved-raw[open] > summary { margin-bottom: 8px; }
.ved-raw .field { margin-top: 8px; }
.ved-big { align-self: stretch; justify-content: center; }
.ved.big .ved-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ved.big .ved-gcols { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.ved.big .ved-cell { min-width: 120px; }
@media (min-width: 1360px) { .builder2 { grid-template-columns: 215px minmax(0, 1fr) 340px; } }
.ved-prev { padding: 14px; pointer-events: none; }
.ved-prev .prompt { font-size: 17px; }

/* v4.18 · предложения, предлоги, формы слов */
.ord-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ord-done { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--ok-line); background: var(--ok-soft); }
.ord-done.bad { border-color: var(--bad-line); background: var(--bad-soft); }
.ord-done .no { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--panel); color: var(--text-3); font-weight: 800; font-size: 12px; }
.ord-done b { display: block; font-size: 16px; } .ord-done small { display: block; color: var(--text-3); font-size: 12.5px; }
.ord-done.ok b { color: var(--ok); } .ord-done.bad b { color: var(--bad); }
.bad-t { color: var(--bad); font-weight: 700; }
.ord-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1.5px solid var(--border); border-radius: 18px; background: var(--panel); }
.ord-card .prompt { margin: 0; }
.ord-card .tray { margin-bottom: 0; }
.ord-card .bank { margin-bottom: 0; }
.ord-end { font: 800 20px var(--font); color: var(--text-2); margin-left: -6px; }
.opt.ghost-slot { opacity: .25; box-shadow: none; cursor: default; border-style: dashed; }
.tray.shake { animation: shake .36s ease; }
/* выбор в строке */
.pk-line { font-size: 18px; font-weight: 700; line-height: 2.3; min-width: 0; }
.pk { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; margin: 0 3px; border-radius: 12px; border: 2px dashed var(--brand-line); background: var(--brand-soft); vertical-align: middle; line-height: 1.2; }
.pk-o { border: 1.5px solid var(--border-strong); background: var(--panel); color: var(--text); border-radius: 9px; padding: 4px 10px; font: 700 15.5px var(--font); cursor: pointer; box-shadow: 0 2px 0 var(--border-strong); transition: transform .08s, box-shadow .08s; }
.pk-o:hover { border-color: var(--brand); color: var(--brand); }
.pk-o:active { transform: translateY(2px); box-shadow: none; }
.pk-o.bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.pk-o.tried { opacity: .35; text-decoration: line-through; box-shadow: none; cursor: default; }
.pk-done { display: inline-block; padding: 0 8px; margin: 0 2px; border-radius: 8px; animation: popIn .25s var(--spring); }
.pk-done.ok { background: var(--ok-soft); color: var(--ok); } .pk-done.bad { background: var(--bad-soft); color: var(--bad); }
/* поставь в форму */
.wf-gap { display: inline-flex; align-items: center; gap: 4px; }
.wf-gap .fill-in::placeholder { color: var(--text-3); font-weight: 600; font-style: italic; }
.wf-base { font-size: 14px; font-weight: 700; color: var(--text-3); font-style: italic; }
/* составь предложение */
.cp { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-words { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cp-w { padding: 4px 10px; border-radius: 10px; background: var(--sunken); border: 1.5px solid var(--border); font-weight: 800; font-size: 15.5px; }
.cp-sl { color: var(--text-3); font-weight: 700; }
.cp-hint { flex-basis: 100%; }
.cp-diff { font-size: 13.5px; color: var(--text-2); line-height: 1.6; padding: 6px 10px; border-radius: 10px; background: var(--wip-soft); }
.cp-diff s { color: var(--bad); text-decoration-thickness: 2px; font-weight: 700; }
.cp-diff span { font-weight: 600; }
.cp-row .i-note { grid-column: auto; }
/* редактор */
.ved-chip.extra { border-style: dashed; color: var(--bad); }
.ved-pgap { margin-top: 8px; padding: 8px; border-radius: 12px; background: var(--sunken); }
.ved-pgap .ved-no { display: block; margin-bottom: 4px; }
.ved-in.ok { border-color: var(--ok); background: var(--ok-soft); }
@media (max-width: 640px) { .wf-row, .cp-row, .pk-row { grid-template-columns: 30px minmax(0, 1fr); } .wf-row .i-ans, .cp-row .i-ans, .pk-row .i-ans { grid-column: 2; } }

/* ===== v4.19 «свой предмет»: выбор, какой урок создаём (английский / испанский, физика / химия…) ===== */
.flv-pick .lead { margin-bottom: 14px; }
.flv-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.flv-opt { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; border: 2px solid var(--border); background: var(--panel); box-shadow: 0 3px 0 var(--border); text-align: left; font-size: 16px; transition: transform .12s, border-color .15s, box-shadow .12s; }
.flv-opt:hover { border-color: var(--brand); transform: translateY(-1px); }
.flv-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.flv-opt .fo-e { font-size: 28px; line-height: 1; }
@media (max-width: 640px) { .flv-opts { grid-template-columns: minmax(0, 1fr); } }

/* ===== v4.20 ещё 6 игр: гонки, корзины, мемори, снеговик, башня, лягушка ===== */
.g-world > .g-layer .sc .deco { position: absolute; display: block; }
.g-world > .g-layer .sc .deco .emo { width: 100%; height: 100%; }
/* панель под сценой: вопрос/утверждение и большие кнопки ответа — читаются и нажимаются на телефоне */
.g-panel { display: grid; gap: 10px; }
.g-stmt { padding: 12px 16px; border-radius: 16px; background: var(--sunken); font: 800 19px/1.35 var(--font); color: var(--text); text-align: center; min-height: 54px; display: grid; align-content: center; gap: 4px; }
.g-stmt small { font: 800 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.g-stmt .g-fb { font-size: 14.5px; font-weight: 600; line-height: 1.4; padding: 6px 10px; border-radius: 10px; margin-bottom: 4px; animation: fade .25s ease; }
.g-stmt .g-fb b { font-weight: 800; margin-right: 4px; }
.g-stmt .g-fb.ok { background: var(--ok-soft); color: var(--ok); } .g-stmt .g-fb.bad { background: var(--bad-soft, #FFE4E4); color: var(--bad); }
.g-stmt .g-fb span { color: var(--text-2); }
.g-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.g-opts.two { grid-template-columns: 1fr 1fr; }
.g-opt { position: relative; min-height: 54px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--border); background: var(--panel); box-shadow: 0 4px 0 var(--border); font: 800 17px var(--font); color: var(--text); cursor: pointer; transition: transform .1s, box-shadow .1s, border-color .15s, background .15s, opacity .3s; }
.g-opt:hover:not(:disabled) { border-color: var(--brand); }
.g-opt:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--border); }
.g-opt kbd { position: absolute; left: 8px; top: 6px; font: 700 10px var(--mono); color: var(--text-3); }
.g-opt.ok, .g-opt.right { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); box-shadow: 0 4px 0 var(--ok); }
.g-opt.bad { border-color: var(--bad); background: #FFE4E4; color: var(--bad); box-shadow: 0 4px 0 var(--bad); animation: shake .3s; }
.g-opt.gone { opacity: .25; text-decoration: line-through; }
.g-opt:disabled { cursor: default; }
.g-opt.yes { color: var(--ok); } .g-opt.no { color: var(--bad); }
@media (hover: none) { .g-opt kbd { display: none; } }
:root[data-theme="dark"] .g-opt.bad, :root[data-theme="dark"] .g-stmt .g-fb.bad { background: rgb(229 72 77 / .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .g-opt.bad, :root:not([data-theme="light"]) .g-stmt .g-fb.bad { background: rgb(229 72 77 / .16); } }

/* --- гонки */
.g-race .g-stage { background: #7FC8F8; }
.sc.race-sky { background: linear-gradient(#7FC8F8, #CFEFFF 40%); }
.sc.race-sky .stands { left: 0; right: 0; top: 44px; height: 54px; background: repeating-linear-gradient(0deg, rgb(0 0 0 / 18%) 0 2px, transparent 2px 15px), linear-gradient(#5B6B8C, #7A8AAE); }
.sc .track { left: 0; right: 0; top: 112px; bottom: 0; background: linear-gradient(#5E5E6E 0 12px, #4A4A58 12px); }
.sc .track::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, #E5484D 0 20px, #fff 20px 40px); }
.g-car { width: 58px; height: 46px; z-index: 2; }
.g-car .car-b { position: absolute; inset: 0; transform: scaleX(-1); }
.g-car .g-label { top: 50%; left: calc(100% + 2px); transform: translateY(-50%); background: #FFB224; font-size: 10px; padding: 1px 7px; }
.g-car .nitro, .g-car .smoke { position: absolute; left: -22px; top: 12px; width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg); }
.g-car .smoke { left: -14px; transform: none; }
.g-car.boost .nitro { animation: nitro .8s ease; }
@keyframes nitro { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.g-car.spin .car-b { animation: carSpin .7s ease; }
.g-car.spin .smoke { animation: nitro .9s ease; }
@keyframes carSpin { to { transform: scaleX(-1) rotate(360deg); } }
.g-car.me .car-b { filter: drop-shadow(0 0 6px #FFB224); }

/* --- корзины */
.g-baskets .g-stage { background: #8FD3FF; }
.sc .chute { left: 290px; top: 0; width: 60px; height: 26px; border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #8B5A2B, #A8743F 50%, #8B5A2B); box-shadow: 0 4px 0 #5A3A1E; }
.g-basket { width: 92px; height: 74px; cursor: pointer; z-index: 2; }
.g-basket .emo { filter: drop-shadow(0 6px 6px rgb(0 0 0 / 20%)); }
.g-basket .bk-sign { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); padding: 3px 12px; border-radius: 8px; background: #FFF6D6; border: 2px solid #8B5A2B; color: #5A3A1E; font: 800 14px var(--font); white-space: nowrap; }
.g-basket.bump .emo { animation: bump .45s var(--spring); }
@keyframes bump { 30% { transform: scale(1.15, .85); } 60% { transform: scale(.95, 1.08); } }
.g-basket.glow .emo { filter: drop-shadow(0 0 10px #FFD84D) drop-shadow(0 0 18px #FFD84D); }
.g-basket.glow .bk-sign { background: #FFE58A; animation: ledBlink .3s steps(2) 4; }
.g-fruit { width: 44px; height: 44px; z-index: 3; }
.g-fruit .g-label { font-size: 14px; }

/* --- мемори */
.g-memory .g-stage { min-height: 300px; background: radial-gradient(120% 90% at 50% 30%, #2E9E6A, #1B6E48); }
.sc.felt { background: radial-gradient(120% 90% at 50% 30%, #2E9E6A, #1B6E48); }
.mem-grid { position: absolute; inset: 12px; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 10px; z-index: 3; perspective: 900px; }
.mem-card { position: relative; border: 0; padding: 0; background: none; cursor: pointer; min-height: 52px; }
.mem-card .mc-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.3, .7, .4, 1); }
.mem-card .mc-back, .mem-card .mc-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 0 rgb(0 0 0 / 25%); }
.mem-card .mc-back { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .14) 0 6px, transparent 6px 12px), var(--mc); border: 3px solid #fff; }
.mem-card .mc-back b { font: 900 clamp(22px, 4vw, 34px) var(--font); color: #fff; text-shadow: 0 2px 0 rgb(0 0 0 / .2); }
.mem-card .mc-face { transform: rotateY(180deg); padding: 6px; background: #fff; border: 3px solid var(--mc); color: #14141F; font: 800 clamp(13px, 2.2vw, 19px)/1.2 var(--font); text-align: center; word-break: break-word; }
.mem-card.s0 { --mc: #3B82F6; } .mem-card.s1 { --mc: #F59E0B; }
.mem-card.open .mc-in, .mem-card.peek .mc-in, .mem-card.gone .mc-in { transform: rotateY(180deg); }
.mem-card.match .mc-face { border-color: var(--ok); background: #DFF7EA; }
.mem-card.match { animation: bump .45s var(--spring); } /* анимируем саму карточку: transform у .mc-face занят переворотом */
.mem-card.nope .mc-face { border-color: var(--bad); background: #FFE4E4; }
.mem-card.nope { animation: shake .3s; }
.mem-card.gone { pointer-events: none; animation: memGone .45s ease forwards; }
@keyframes memGone { to { opacity: 0; transform: scale(.6) translateY(-12px); } }
.mem-card.peek .mc-face { border-color: #FFD84D; box-shadow: 0 0 0 4px #FFD84D; }
.mem-card:focus-visible { outline: 3px solid #FFD84D; outline-offset: 2px; border-radius: 14px; }
@media (max-width: 640px) { .mem-grid { inset: 8px; gap: 6px; } .mem-card .mc-face { font-size: 13px; padding: 4px; border-width: 2px; border-radius: 10px; } .mem-card .mc-back { border-radius: 10px; border-width: 2px; } }
.g-sb.hidden { display: none; }

/* --- снеговик */
.g-snowman .g-stage, .g-snowman-stage { background: #BFE3FF; }
.game.g-snowman .g-stage { background: #BFE3FF; }
.sc.winter { background: linear-gradient(#9FD4FF, #DDF0FF 60%); }
.sc .snowfield { left: 0; right: 0; top: 228px; bottom: 0; background: linear-gradient(#fff, #EAF4FF); border-radius: 50% 50% 0 0 / 14px 14px 0 0; }
.sc .snow { inset: -300px 0 0 0; height: 600px; background-image: radial-gradient(2.5px 2.5px at 20px 30px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 90px 120px, #fff 50%, transparent 52%), radial-gradient(3px 3px at 160px 60px, #fff 50%, transparent 52%), radial-gradient(2px 2px at 230px 170px, #fff 50%, transparent 52%); background-size: 260px 200px; animation: snowFall 14s linear infinite; opacity: .9; }
.sc .snow.s2 { background-size: 190px 160px; animation-duration: 9s; opacity: .7; }
@keyframes snowFall { to { transform: translateY(300px); } }
.g-snowman .g-world > .g-snowman, .g-world > .g-snowman { width: 120px; height: 170px; z-index: 2; }
.g-world > .g-snowman svg { display: block; overflow: visible; }
.g-world > .g-snowman.enter svg { animation: smIn .5s var(--spring); }
@keyframes smIn { from { transform: translateY(30px) scale(.7); opacity: 0; } }
.g-world > .g-snowman .hat, .g-world > .g-snowman .armL, .g-world > .g-snowman .armR, .g-world > .g-snowman .nose, .g-world > .g-snowman .scarf { transition: transform .6s cubic-bezier(.5, 0, .7, .4), opacity .6s; transform-box: fill-box; transform-origin: center; }
.g-world > .g-snowman.m1 .hat { transform: translate(40px, 120px) rotate(70deg); opacity: 0; }
.g-world > .g-snowman.m2 .armL { transform: translate(-6px, 80px) rotate(-60deg); opacity: 0; }
.g-world > .g-snowman.m3 .armR { transform: translate(6px, 80px) rotate(60deg); opacity: 0; }
.g-world > .g-snowman.m4 .nose { transform: translate(10px, 110px) rotate(90deg); opacity: 0; }
.g-world > .g-snowman.m5 .scarf { transform: translate(0, 90px); opacity: 0; }
.g-world > .g-snowman.m5 .mouth { transform: scaleY(-1); transform-box: fill-box; transform-origin: center; }
.g-world > .g-snowman .body { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.2s ease; }
.g-world > .g-snowman .puddle { opacity: 0; transition: opacity 1s; }
.g-world > .g-snowman.m6 .body { transform: scale(1.15, .32); }
.g-world > .g-snowman.m6 .puddle { opacity: 1; }
.g-world > .g-snowman.saved .hat { animation: hatHop .6s var(--spring) 2; transform-box: fill-box; }
@keyframes hatHop { 50% { transform: translateY(-14px) rotate(-8deg); } }
.g-sun { width: 64px; height: 64px; z-index: 1; }
.g-sun .emo { transform: scale(calc(1 + var(--heat, 0) * .16)); transition: transform .5s var(--spring), filter .5s; filter: drop-shadow(0 0 calc(6px + var(--heat, 0) * 4px) #FFB224); }
.g-hintc { max-width: 330px; white-space: normal; font-size: 18px; }
.g-sb.ice { background: rgb(255 255 255 / .85); box-shadow: 0 0 0 2px #9FD4FF, 0 5px 12px rgb(0 0 0 / 15%); }
.g-sb.ice b { background: #E8F4FF; color: #1E6FD9; text-shadow: none; } .g-sb.ice .sb-bad { color: #E5484D; } .g-sb.ice small { color: #5B7A99; }
.g-wordrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 52px; padding: 6px 0; }
.g-wordrow .wl { display: grid; place-items: center; width: clamp(30px, 7vw, 44px); height: 48px; border-bottom: 4px solid var(--brand); font: 800 26px var(--font); color: var(--text); text-transform: none; }
.g-wordrow .wl.on { color: var(--ok); border-color: var(--ok); animation: bump .35s var(--spring); }
.g-wordrow .wl.miss { color: var(--bad); border-color: var(--bad); }
.g-wordrow .wsp { width: 16px; display: grid; place-items: end center; font: 800 26px var(--font); }
.g-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.g-keys .gk { width: 46px; height: 50px; border-radius: 12px; border: 2px solid var(--border); background: var(--panel); box-shadow: 0 3px 0 var(--border); font: 800 20px var(--font); color: var(--text); cursor: pointer; transition: transform .1s, opacity .2s; }
.g-keys .gk:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.g-keys .gk.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); box-shadow: 0 3px 0 var(--ok); }
.g-keys .gk.bad { opacity: .35; text-decoration: line-through; }
.g-keys .gk:disabled { cursor: default; }
@media (max-width: 640px) { .g-keys .gk { width: 40px; height: 46px; font-size: 18px; } .g-wordrow .wl { height: 42px; font-size: 22px; } }

/* --- башня */
.g-tower .g-stage { background: #FDB59A; }
.sc.sunset { background: linear-gradient(#5B4CE6 0%, #C66BD6 35%, #FF9A76 70%, #FFD08A); }
.sc.sunset .sunlow { left: 470px; top: 150px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(#FFF1B8, #FFB224 70%); box-shadow: 0 0 40px #FFB224; }
.sc.sunset .city { top: 204px; opacity: .9; }
.sc .crane { left: 0; top: 0; }
.sc .site-ground { left: 0; right: 0; top: 286px; bottom: 0; background: repeating-linear-gradient(135deg, #F2B705 0 12px, #14141F 12px 24px); }
.g-trolley { width: 26px; height: 12px; border-radius: 3px; background: #3B3B55; box-shadow: 0 2px 0 #14141F; z-index: 2; }
.g-cable { width: 2px; background: #3B3B55; z-index: 1; }
.g-tblock { width: var(--w, 150px); height: var(--h, 28px); border-radius: 6px; background: linear-gradient(rgb(255 255 255 / .22), transparent 40%), var(--c, #5B4CE6); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), 0 3px 6px rgb(0 0 0 / .25); display: grid; place-items: center; z-index: 2; }
.g-tblock span { color: #fff; font: 800 14px var(--font); text-shadow: 0 1px 2px rgb(0 0 0 / .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 94%; }
.g-tblock.hang { box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), 0 0 0 3px #fff, 0 6px 14px rgb(0 0 0 / .3); }
.g-tblock.hang::before { content: ""; position: absolute; left: 50%; top: -9px; width: 14px; height: 9px; margin-left: -7px; border: 3px solid #3B3B55; border-bottom: 0; border-radius: 8px 8px 0 0; }
.g-tblock.land.wob { animation: wob .5s ease; }
@keyframes wob { 30% { margin-left: 3px; } 60% { margin-left: -2px; } }
.g-flag { width: 34px; height: 34px; z-index: 3; }
.g-flag .emo { animation: smIn .5s var(--spring); }
.g-sb.site { background: #14141F; box-shadow: 0 0 0 3px #F2B705, 0 5px 12px rgb(0 0 0 / 30%); }

/* --- лягушка */
.g-frog .g-stage { background: #3FA9D9; }
.sc .bank { left: 0; right: 0; top: 64px; height: 60px; background: linear-gradient(#7CC56B, #5DAA4C); border-radius: 0 0 40% 40% / 0 0 18px 18px; }
.sc .pond { left: 0; right: 0; top: 118px; bottom: 0; background: linear-gradient(#4FB8E6, #2D8FC4); overflow: hidden; }
.sc .pond .rip { position: absolute; width: 60px; height: 14px; border: 2px solid rgb(255 255 255 / .35); border-radius: 50%; animation: rip 3.6s ease-out infinite; }
.sc .pond .r1 { left: 120px; top: 40px; } .sc .pond .r2 { left: 380px; top: 110px; animation-delay: -1.2s; } .sc .pond .r3 { left: 520px; top: 30px; animation-delay: -2.4s; }
@keyframes rip { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.sc .shore { top: 150px; bottom: 0; width: 64px; background: linear-gradient(#C9A26B, #A8834F); }
.sc .shore.l { left: 0; border-radius: 0 30px 0 0; } .sc .shore.r { right: 0; border-radius: 30px 0 0 0; }
.g-pad { width: 66px; height: 50px; cursor: pointer; z-index: 1; opacity: .55; transition: opacity .3s, filter .3s; }
.g-pad .emo { filter: drop-shadow(0 3px 0 rgb(0 0 0 / .18)); }
.g-pad b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 900 16px var(--font); color: #fff; opacity: 0; transition: opacity .3s; }
.g-pad.yes b { background: var(--ok); } .g-pad.no b { background: var(--bad); }
.g-pad.now { opacity: 1; } .g-pad.now b { opacity: 1; }
.g-pad.now .emo { animation: padBob 2.4s ease-in-out infinite; }
@keyframes padBob { 50% { transform: translateY(-2px) rotate(2deg); } }
.g-pad.bob .emo { animation: bump .45s var(--spring); }
.g-pad.sink { animation: sink .6s ease forwards; }
@keyframes sink { to { opacity: 0; scale: .5; } }
.g-pad.glow .emo { filter: drop-shadow(0 0 10px #FFD84D) drop-shadow(0 0 16px #FFD84D); }
.g-frog .g-world > .g-frog, .g-world > .g-frog { width: 48px; height: 48px; z-index: 4; }
.g-world > .g-frog.wet .emo { animation: dunk .6s ease; }
@keyframes dunk { 40% { transform: translateY(18px) scale(.8); opacity: .3; } }
.g-goal-bank { width: 34px; height: 34px; z-index: 2; }
.g-goal-bank .emo { animation: padBob 2s ease-in-out infinite; } /* у самих объектов сцены transform занят положением */

/* ===== v4.21 перевод: строка-задание «в каком времени переводить» ===== */
.tr-prompt { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); color: var(--text); font-weight: 600; font-size: 15px; line-height: 1.4; max-width: 560px; }
.g-tblock.hang { width: auto; min-width: var(--w, 150px); padding: 0 14px; }
.g-tblock.hang span { max-width: none; }
/* фраза «я сейчас читаю» — в одну строку, поля ввода — ровным столбцом */
.tr-list { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) 30px; align-items: center; gap: 12px 14px; }
.tr-list .tr-row { display: contents; }
.tr-row .qw { white-space: nowrap; }
@media (max-width: 640px) { .tr-list { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 10px; } .tr-row .qw { grid-column: 1 / -1; white-space: normal; text-align: left; margin-top: 6px; } }

/* ===== v4.22 значок предмета над приветствием — крупнее ===== */
.eb-subj { display: inline-flex; align-items: center; gap: 8px; }
.eb-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; }
.eb-ico .emo { width: 100%; height: 100%; }
.eb-ico .emo-t { font-size: 22px; line-height: 1; }

/* ============ боевой режим: вход, регистрация, ссылки ученика и родителя (prod.js) ============ */
body.prod .demobar { display: none; }
body.prod .layout { min-height: 100vh; }
body.auth-mode .layout { display: none; }
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 16px;
  background: radial-gradient(1200px 600px at 50% -10%, var(--brand-soft), transparent 70%), var(--canvas); }
.auth-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 30px 28px 24px; animation: authIn .35s var(--ease); }
@keyframes authIn { from { opacity: 0; transform: translateY(8px); } }
.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: 19px; }
.auth h1 { font-size: 25px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.auth .lead { margin: 0 0 20px; color: var(--text-2); font-size: 15px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field input { font-size: 16px; padding: 12px 14px; } /* 16px — iPhone не приближает поле */
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 46px !important; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--text-3); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.pw-eye:hover { background: var(--hover); color: var(--text); }
.auth-link { border: 0; background: none; padding: 0; color: var(--brand); font-weight: 700; font-size: 14px; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-link.right { align-self: flex-end; margin-top: -6px; font-size: 13px; }
.auth-err { min-height: 18px; color: var(--bad); font-size: 13.5px; font-weight: 600; }
.auth-err:empty { min-height: 0; margin-top: -8px; }
.auth-go { width: 100%; margin-top: 2px; }
.auth-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; font-size: 14px; color: var(--text-2); }
.auth-done { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.auth-foot { text-align: center; max-width: 420px; }
.st-h { font-size: 15px; margin: 18px 0 8px; }
.st-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--sunken); }
.st-list span { font-size: 13px; color: var(--text-3); }
.side-out { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 12px; color: var(--text-3); font-weight: 600; font-size: 13px; }
.side-out:hover { background: var(--hover); color: var(--text); }
@media (max-width: 480px) { .auth-card { padding: 24px 18px 20px; } .auth h1 { font-size: 22px; } }
.tag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tag-row select { border: 1px solid var(--border-strong); background: var(--panel); border-radius: 12px; padding: 10px 12px; color: var(--text); font-size: 14.5px; }
.tag-row > * { min-width: 0; }
.tag-row input, .tag-row select { width: 100%; min-width: 0; }
.live-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; border-color: var(--bad-line); background: var(--bad-soft); }
.live-banner b { display: block; }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 rgb(229 72 77 / 50%); animation: liveDot 1.6s infinite; flex: none; }
@keyframes liveDot { 70% { box-shadow: 0 0 0 10px rgb(229 72 77 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(229 72 77 / 0%); } }

/* ============ этап 4: типы урока и конспект преподавателя ============ */
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kind-c { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1.5px solid var(--border); background: var(--panel); border-radius: 14px; padding: 10px 12px; color: var(--text); transition: border-color .15s, background .15s; }
.kind-c:hover { border-color: var(--brand-line); }
.kind-c[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); }
.kind-c .kc-e { font-size: 20px; line-height: 1; }
.kind-c b { font-size: 13.5px; }
.kind-c small { font-size: 12px; color: var(--text-3); font-weight: 500; line-height: 1.3; }
.ai-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 12px; }
.ai-row > .field:first-child { flex: 1 1 180px; min-width: 0; }
.ai-row .segmented button { white-space: nowrap; }
#aiDesc { font-family: var(--font); font-size: 14px; min-height: 64px; }
.ai-list li.wait { opacity: .45; }
.note-ed { margin-top: 14px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: var(--sunken); }
.note-ed summary { cursor: pointer; font-weight: 800; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.note-ed .field { margin-top: 10px; }
.note-ed textarea { font-family: var(--font) !important; font-size: 13.5px !important; min-height: 52px !important; }
.note-card { margin-top: 14px; border: 1px solid var(--sun); background: var(--sun-soft); border-radius: 16px; padding: 12px 14px; }
.note-card summary { cursor: pointer; font-weight: 800; display: flex; gap: 10px; align-items: baseline; }
.nc-row { display: flex; gap: 10px; margin-top: 10px; }
.nc-e { font-size: 18px; line-height: 1.2; }
.nc-row b { font-size: 12.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.nc-row p { margin: 2px 0 0; font-size: 14px; white-space: pre-line; }

/* ---------- перенос материала (этап 5) */
.imp-modal .imp-tabs { margin: 18px 0 12px; }
.imp-modal .imp-zone { margin: 4px 0 14px; }
.imp-modal .imp-zone b { word-break: break-word; }
.imp-modal .imp-modes { grid-template-columns: 1fr 1fr; }
.imp-modal .imp-hint { margin: -4px 0 14px; }
.imp-orb { background: linear-gradient(135deg, #FFE8A3, #FFD6E0); }
.imp-notes { display: grid; gap: 8px; margin-top: 12px; }
.imp-list { max-height: 300px; overflow: auto; }
@media (max-width: 640px) { .imp-modal .imp-modes { grid-template-columns: 1fr; } }
/* страница PDF или слайд на доске: целиком, без скругления «как у фото» */
.canvas .photo.page, .photo.page { border-radius: 6px; box-shadow: 0 0 0 1px var(--border), var(--sh-sm); background: #fff; }
.ci .photo.page img, .photo.page img { object-fit: contain; max-height: none; }

/* ---------- видео (этап 2): настоящие камеры в плитках, строка состояния над кнопками */
.vt .vbox { position: absolute; inset: 0; background: #14141F; }
.vt .vbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt .vbox video.mirror { transform: scaleX(-1); }
.call-dock.grid .vt .vbox video { object-fit: contain; }
.vid-note { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding: 6px 8px 6px 10px; max-width: 320px; border-radius: 12px; background: var(--text); color: var(--panel); font: 700 12px/1.3 var(--font); box-shadow: var(--sh-lg); }
.vid-note .vn-b { border: 0; border-radius: 8px; padding: 4px 9px; background: rgb(255 255 255 / 14%); color: inherit; font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.vid-note .vn-b:hover { background: rgb(255 255 255 / 24%); }
.vid-note .vn-b.go { background: var(--brand); color: #fff; }
.call-dock.c-br .vid-note, .call-dock.c-tr .vid-note { margin-left: auto; }

/* ============ кабинет родителя (этап 6, D-048): по ссылке, на телефоне в первую очередь ============ */
.par-page { min-height: 100vh; padding: 20px 16px 40px; background: radial-gradient(1100px 520px at 50% -12%, var(--brand-soft), transparent 70%), var(--canvas); }
.par-wrap { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; animation: authIn .35s var(--ease); }
.par-top { display: flex; align-items: center; gap: 9px; font-size: 17px; margin-bottom: 4px; }
.par-top .t3 { font-size: 14px; font-weight: 600; }
.par-hero { display: flex; align-items: center; gap: 14px; }
.par-hero h1 { font-size: clamp(24px, 6vw, 30px); }
.par-hero p { margin: 3px 0 0; font-size: 14.5px; }
.par-ava { width: 54px; height: 54px; font-size: 19px; }
.par-next, .par-note { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-xs); }
.par-next { display: flex; align-items: center; gap: 12px; }
.par-next > div { display: flex; flex-direction: column; }
.par-next b { font-size: 16.5px; }
.par-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); font-size: 21px; flex: none; }
.par-note > span .ico { vertical-align: -2px; margin-right: 3px; }
.par-note { border-left: 4px solid var(--brand); }
.par-note p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.par-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.par-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.par-tile b { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.par-tile b i { font-style: normal; font-size: 18px; color: var(--text-3); }
.par-tile span { font-size: 13px; color: var(--text-3); }
.par-tile small { font-size: 12.5px; font-weight: 700; color: var(--wip); }
.par-tile.warn { border-color: var(--wip); background: var(--wip-soft); }
.par-sec { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.par-sec h2 { font-size: 18px; }
.par-empty { margin: 0; color: var(--text-3); font-size: 14.5px; }
.par-skills { display: flex; flex-direction: column; gap: 14px; }
.par-skill { display: flex; flex-direction: column; gap: 6px; }
.par-m { height: 8px; }
.par-trend { font-size: 13px; font-weight: 700; color: var(--text-3); }
.par-trend.ok { color: var(--ok); } .par-trend.bad { color: var(--bad); }
.par-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.par-tags .eyebrow { width: 100%; }
.par-tags .pill { white-space: normal; }
.par-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.par-list li { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 12px; background: var(--sunken); min-width: 0; }
.par-list li.row { flex-direction: row; align-items: center; gap: 10px; }
.par-list .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.par-list .pill { white-space: normal; }
.par-hw-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.par-hw-h b { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.par-list q { font-size: 14px; color: var(--text-2); font-style: italic; overflow-wrap: anywhere; }
.par-ok { color: var(--ok); font-weight: 800; }
.par-foot { text-align: center; margin: 6px 0 0; }
.par-page .btn.sm { align-self: flex-start; }
@media (max-width: 480px) { .par-tile b { font-size: 24px; } .par-sec { padding: 16px 14px; } }
/* репетитор: окно «Кабинет родителя» */
.par-set { display: flex; flex-direction: column; gap: 8px; }
.par-set label.chk { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.par-set label.chk input { width: 18px; height: 18px; accent-color: var(--brand); }
#parNote { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--border-strong); border-radius: 12px; padding: 10px 12px; font: 500 15px/1.5 var(--font); background: var(--panel); color: var(--text); }

/* ============ первый урок за 5 минут (этап 7): карточка в кабинете и инструкция ============ */
.start-card .start-help { margin-top: 12px; align-self: flex-start; white-space: normal; text-align: left; }
.start-card .card-head .small { white-space: nowrap; }
.help h3 { font-size: 16px; margin: 6px 0 0; }
.help-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.help-steps li { display: flex; gap: 12px; align-items: flex-start; }
.help-steps li > i { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; background: var(--brand-soft); color: var(--brand); }
.help-steps li > div { flex: 1; min-width: 0; }
.help-steps b { font-size: 15.5px; color: var(--text); }
.help-steps p { margin: 4px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.help-faq { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--panel); }
.help-faq summary { cursor: pointer; font-weight: 700; font-size: 14.5px; }
.help-faq p { margin: 8px 0 2px; color: var(--text-2); font-size: 14px; line-height: 1.55; }

/* ============ регистрация: две отдельные отметки — оферта и согласие на обработку данных (D-050) ============ */
.auth-chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); cursor: pointer; line-height: 1.45; }
.auth-chk input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--brand); }
.auth-chk a, .auth-foot a, .par-foot a { color: var(--brand); }

/* ============ ИИ «что дальше» (этап 6, D-051) ============ */
.next-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--sunken); border-left: 4px solid var(--brand); }
.next-step.next { border-color: var(--ok); } .next-step.practice { border-color: var(--wip); } .next-step.mistakes { border-color: var(--bad); }
.next-step .ns-e { font-size: 24px; line-height: 1.2; }
.next-step b { font-size: 15.5px; }
.next-step p { margin: 3px 0 8px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.end-modal .next-step p { margin-bottom: 0; }

/* ============================================================ «Тренировка» ученика (D-052) */
.trn-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: stretch; }
.trn-today { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #9C82FF 0%, rgb(156 130 255 / 0%) 55%), linear-gradient(140deg, #4636D4 0%, #5B4CE6 45%, #7B61F4 100%); box-shadow: 0 18px 40px -22px rgb(70 54 212 / 70%); }
.trn-today::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px; border-radius: 50%; border: 28px solid rgb(255 255 255 / 7%); pointer-events: none; }
.trn-today h2 { font-size: clamp(20px, 2.2vw, 24px); color: #fff; max-width: 30ch; }
.trn-today-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgb(255 255 255 / 80%); font-weight: 700; }
.trn-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: rgb(255 255 255 / 16%); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.trn-today-sub { color: rgb(255 255 255 / 85%); max-width: 46ch; }
.trn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trn-chips > span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 12px; background: rgb(255 255 255 / 14%); font-weight: 700; font-size: 13.5px; }
.trn-prev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.trn-prev li { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgb(255 255 255 / 9%); min-width: 0; }
.trn-prev li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.trn-prev li .t3 { color: rgb(255 255 255 / 70%); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; align-self: center; }
.trn-dot.bad { background: #FF9DA0; } .trn-dot.brand { background: #FFE08A; } .trn-dot.wip { background: #FFC56B; }
.trn-today-f { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; position: relative; z-index: 1; }
.btn3d.trn-go { --c: #FFFFFF; --s: #C9C0FF; color: #3F31BF; min-width: 190px; }
.trn-goal-line { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: rgb(255 255 255 / 85%); min-width: 180px; }
.trn-meter { height: 8px; border-radius: 99px; background: rgb(255 255 255 / 20%); overflow: hidden; }
.trn-meter i { display: block; height: 100%; border-radius: 99px; background: #7CF0B5; transition: width .5s var(--ease); }
.trn-week { display: flex; flex-direction: column; }
.trn-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.trn-days div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.trn-days i { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: #fff; font-style: normal; font-size: 15px; }
.trn-days .on i { background: var(--ok); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 14%); }
.trn-days .today i { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--brand); }
.trn-days .today span { color: var(--brand); }
.trn-days .later { opacity: .5; }
.trn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.trn-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--sunken); text-align: center; }
.trn-stats b { font-size: 20px; font-weight: 800; line-height: 1.1; }
.trn-stats span { font-size: 11.5px; font-weight: 600; color: var(--text-3); line-height: 1.25; }
.trn-week-f { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 18px; }
.trn-week-f > div { display: flex; flex-direction: column; gap: 2px; }
.trn-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.trn-ring b { position: absolute; font-size: 15px; }
.trn-sec { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 30px 0 12px; }
.trn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.trn-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 18px; border-radius: var(--r); border: 1px solid var(--border); background: var(--panel); box-shadow: var(--sh-xs); transition: transform .18s var(--ease), box-shadow .18s, border-color .18s; min-height: 178px; }
.trn-tile b { font-size: 17px; font-weight: 800; margin-top: 6px; }
.trn-tile:not(:disabled):hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--brand-line); }
.trn-tile:disabled { opacity: .6; cursor: default; }
.trn-tile-i { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-size: 21px; background: var(--brand-soft); color: var(--brand); }
.trn-tile.sun .trn-tile-i { background: var(--sun-soft); color: #B7730A; }
.trn-tile.ok .trn-tile-i { background: var(--ok-soft); color: var(--ok); }
.trn-tile-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; padding-top: 8px; }
.trn-tile-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunken); color: var(--text-2); flex: none; transition: background .18s, color .18s; }
.trn-tile:not(:disabled):hover .trn-tile-go { background: var(--brand); color: var(--brand-ink); }
.trn-bottom { margin-top: 22px; }
.trn-dict-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.trn-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text-3); }
.trn-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.trn-search input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; color: var(--text); font-weight: 500; }
.trn-folder { margin-top: 12px; }
.trn-folder-h { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--text-2); padding: 6px 0; border-bottom: 1px solid var(--border); }
.trn-wrow { display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.trn-wrow:last-child { border-bottom: 0; }
.trn-wrow .w { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.trn-wrow .tr { color: var(--text-2); overflow-wrap: anywhere; }
.trn-say { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--sunken); color: var(--text-2); font-size: 15px; }
.trn-say:hover { background: var(--brand-soft); color: var(--brand); }
.trn-say.big { width: 46px; height: 46px; font-size: 20px; }
.trn-wrow .icon-btn.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
.trn-rules { display: flex; flex-direction: column; gap: 6px; }
.trn-rule { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel); text-align: left; }
.trn-rule:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.trn-rule .grow { display: flex; flex-direction: column; }
.trn-rule-i { font-size: 20px; }
.trn-q { display: flex; flex-direction: column; }
.trn-qrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.trn-qrow:last-child { border-bottom: 0; }
.trn-qrow .grow { display: flex; flex-direction: column; min-width: 0; }
.trn-qrow .grow b, .trn-qrow .grow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trn-qi { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sunken); color: var(--text-2); flex: none; }
.trn-qr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.trn-how { display: flex; gap: 7px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.trn-home { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px; border-radius: var(--r); border: 1px solid var(--brand-line); background: var(--brand-soft); }
.trn-home .grow { display: flex; flex-direction: column; min-width: 200px; }
.trn-home-i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-size: 20px; flex: none; }
.trn-tline { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.trn-tline.on { color: var(--ok); }
.chip-s.trn-mark.on { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
/* прохождение */
.trn-run { max-width: 820px; margin: 0 auto; padding: 18px clamp(12px, 3vw, 28px) 64px; }
.trn-runbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.trn-segs { flex: 1; display: flex; gap: 5px; }
.trn-segs i { flex: 1; height: 8px; border-radius: 99px; background: var(--border); transition: background .3s; }
.trn-segs i.cur { background: var(--brand-line); } .trn-segs i.ok { background: var(--ok); } .trn-segs i.bad { background: var(--bad); }
.trn-src { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.trn-card { position: relative; overflow: hidden; animation: fadeUp .3s var(--ease); }
.trn-card .checkbar.inline { margin: 26px calc(-1 * clamp(20px, 3.4vw, 40px)) calc(-1 * clamp(20px, 3.4vw, 40px)); }
.trn-ask { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; text-align: center; margin: 22px 0 26px; }
.trn-ask b { font-size: clamp(28px, 4.6vw, 42px); font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.trn-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trn-opt { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 16px; border: 2px solid var(--border-strong); background: var(--panel); text-align: left; font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 var(--border-strong); transition: border-color .15s, background .15s, transform .08s; }
.trn-opt:not(:disabled):hover { border-color: var(--brand); }
.trn-opt:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.trn-opt .k { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--sunken); color: var(--text-3); font-size: 13px; flex: none; }
.trn-opt.ok { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 3px 0 var(--ok-line); color: var(--ok); }
.trn-opt.bad { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 3px 0 var(--bad-line); color: var(--bad); }
.trn-opt.dim { opacity: .5; }
.trn-opt:disabled { cursor: default; }
.trn-reveal { display: grid; place-items: center; min-height: 90px; }
.trn-reveal b { font-size: 28px; font-weight: 800; color: var(--brand); animation: fadeUp .25s var(--ease); }
.trn-done { text-align: center; padding: clamp(26px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trn-done h1 { margin-top: 12px; }
.trn-done-ring { position: relative; display: inline-grid; place-items: center; }
.trn-done-ring b { position: absolute; font-size: 36px; font-weight: 800; }
.trn-done-ring b small { font-size: 18px; color: var(--text-3); }
.trn-done-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.trn-done-next { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); margin-top: 6px; }
.trn-timer { flex: 1; height: 10px; border-radius: 99px; background: var(--border); overflow: hidden; }
.trn-timer i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sun), var(--ok)); transition: width .2s linear; }
.trn-secs { font-weight: 800; min-width: 48px; text-align: right; }
.trn-sprint.flash-ok { animation: trnOk .3s var(--ease); }
.trn-sprint.flash-bad { animation: trnBad .3s var(--ease); }
@keyframes trnOk { 0% { box-shadow: 0 0 0 0 var(--ok); } 100% { box-shadow: 0 0 0 10px rgb(22 163 107 / 0%); } }
@keyframes trnBad { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.trn-rule-modal .eyebrow { display: block; }
@media (max-width: 900px) {
  .trn-top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .trn-today { padding: 20px; }
  .btn3d.trn-go { width: 100%; }
  .trn-opts { grid-template-columns: minmax(0, 1fr); }
  .trn-wrow { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .trn-wrow .tr { grid-column: 2 / 3; grid-row: 2; font-size: 13px; }
  .trn-wrow .pill { grid-column: 3; grid-row: 1; }
  .trn-wrow > :last-child { display: none; }
  .trn-prev li b { max-width: 60%; }
}