/* Кортекс — стиль «Премиум»: строгая чёрно-белая основа, один синий акцент, крупная
   типографика, тонкие линии вместо теней. Тема — атрибут data-theme на <html>. */
[hidden] { display:none !important; }
:root, html[data-theme="light"] {
  --bg:#FFFFFF; --header:rgba(255,255,255,.88); --surface:#FFFFFF; --surface2:#F6F7F9; --sunken:#F6F7F9;
  --border:#ECEEF2; --border2:#D9DDE4; --track:#E6E9EF; --row:#F6F7F9;
  --text:#0E1116; --text2:#2A2F38; --muted:#4D5462; --dim:#6A7180;
  --ink:#0E1116; --on-ink:#FFFFFF;
  --accent:#2443F5; --accent-hover:#1A31B8; --accent-soft:#EEF1FF; --accent-text:#2443F5;
  --link:#2443F5;
  --ok:#0F7A55; --ok-soft:#E8F6EF; --ok-line:#B9E3CF;
  --warn:#B4500F; --warn-soft:#FFF3E8; --warn-line:#F5C9A3;
  --danger:#C62828;
  --me:#0E1116; --me-text:#FFFFFF;
  --focus:rgba(36,67,245,.35);
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg:#0B0D12; --header:rgba(11,13,18,.86); --surface:#12151C; --surface2:#181C25; --sunken:#0F1218;
  --border:#232834; --border2:#323948; --track:#262C39; --row:#161A23;
  --text:#F3F5F8; --text2:#D4D8E0; --muted:#A5ACBA; --dim:#8990A0;
  --ink:#F3F5F8; --on-ink:#0B0D12;
  --accent:#5B76FF; --accent-hover:#7A90FF; --accent-soft:#1A2147; --accent-text:#8EA0FF;
  --link:#8EA0FF;
  --ok:#4CC995; --ok-soft:#10261D; --ok-line:#1E5A41;
  --warn:#F0A060; --warn-soft:#2A1C10; --warn-line:#5C3A1C;
  --danger:#FF6B6B;
  --me:#F3F5F8; --me-text:#0B0D12;
  --focus:rgba(91,118,255,.45);
  color-scheme: dark;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.55 Onest, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--link); text-underline-offset:3px; }
h1, h2, h3 { margin:0; line-height:1.1; letter-spacing:-0.03em; font-weight:700; }
h1 { font-size:clamp(30px, 4.4vw, 48px); letter-spacing:-0.04em; }
h2 { font-size:22px; letter-spacing:-0.02em; }
h3 { font-size:18px; letter-spacing:-0.01em; }
p { margin:0 0 .6em; } p:last-child { margin-bottom:0; }
b, strong { font-weight:600; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted { color:var(--muted); } .dim { color:var(--dim); font-size:14px; }
.eyebrow { font-size:14px; font-weight:600; color:var(--accent-text); letter-spacing:.01em; }
.icon { width:20px; height:20px; flex:0 0 auto; }

/* шапка */
header.top { position:sticky; top:0; z-index:10; background:var(--header); backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border); }
.top .in { max-width:1200px; margin:0 auto; padding:12px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 32px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.logo b { font-size:19px; font-weight:700; letter-spacing:-0.02em; }
nav.main { display:flex; flex-wrap:wrap; gap:2px; flex:1 1 auto; }
nav.main a { padding:8px 12px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:500; font-size:15px; }
nav.main a:hover { color:var(--text); background:var(--surface2); }
nav.main a.on { color:var(--text); font-weight:600; box-shadow:inset 0 -2px 0 var(--ink); border-radius:0; background:none; }
.tools { display:flex; gap:8px; align-items:center; }
.icon-btn { width:40px; height:40px; border-radius:10px; border:1px solid var(--border2); background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:600; font-size:15px; }
.icon-btn:hover { background:var(--surface2); }
.theme-dark-icon { display:none; }
html[data-theme="dark"] .theme-dark-icon { display:inline; }
html[data-theme="dark"] .theme-light-icon { display:none; }

/* раскладка */
main.wrap { max-width:1200px; margin:0 auto; padding:40px 24px 80px; display:flex; flex-direction:column; gap:24px; }
.cols { display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start; }
.cols > .wide { flex:999 1 560px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.cols > .side { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:20px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; }
.card.tight { padding:16px 18px; border-radius:14px; }
.card.sunken, .sunken-box { background:var(--sunken); }
.stack { display:flex; flex-direction:column; gap:12px; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.between { justify-content:space-between; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
.crumbs { color:var(--dim); font-size:14px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--text); }
hr.line { border:0; border-top:1px solid var(--border); margin:0; }

/* кнопки и поля */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 20px; border-radius:11px; border:1px solid transparent; background:var(--accent); color:#fff; font:inherit; font-size:16px; font-weight:600; text-decoration:none; cursor:pointer; transition:background .15s; }
.btn:hover { background:var(--accent-hover); }
.btn.ink { background:var(--ink); color:var(--on-ink); }
.btn.ghost { background:var(--surface); color:var(--text); border-color:var(--border2); }
.btn.ghost:hover { background:var(--surface2); }
.btn.quiet { background:transparent; color:var(--muted); }
.btn.quiet:hover { color:var(--text); background:var(--surface2); }
.btn.danger { background:var(--danger); }
.btn.vk { background:#0077FF; }
.btn.block { width:100%; }
.btn:disabled { opacity:.55; cursor:wait; }
.cmd { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 13px; margin:2px 2px; border-radius:9px; border:1px solid var(--border2); background:var(--surface); color:var(--text); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.cmd:hover { background:var(--surface2); }
.cmd[aria-pressed="true"] { background:var(--ink); color:var(--on-ink); border-color:var(--ink); }
label.field { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:15px; }
input[type=text], input[type=email], input[type=password], textarea { width:100%; min-height:48px; padding:12px 14px; border-radius:11px; border:1px solid var(--border2); background:var(--surface); color:var(--text); font:inherit; font-size:16px; }
input::placeholder, textarea::placeholder { color:var(--dim); }
textarea { resize:vertical; min-height:52px; }
input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus); }
.btn:focus-visible, .cmd:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.choice { display:flex; flex-wrap:wrap; gap:8px; }
.choice label { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:11px; border:1px solid var(--border2); background:var(--surface); cursor:pointer; font-weight:500; }
.choice input { accent-color:var(--accent); width:18px; height:18px; }
.choice label:has(input:checked) { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:15px; }
.check input { margin-top:4px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto; }

/* метки и сообщения */
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:7px; font-weight:600; font-size:13px; background:var(--surface2); color:var(--text2); border:1px solid var(--border); }
.chip.weak { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }
.chip.good { background:var(--ok-soft); color:var(--ok); border-color:var(--ok-line); }
.chip.new { color:var(--dim); }
.chip.accent { background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
.note { padding:12px 16px; border-radius:12px; font-size:15px; }
.note.error { background:var(--warn-soft); border:1px solid var(--warn-line); color:var(--warn); }
.note.ok { background:var(--ok-soft); border:1px solid var(--ok-line); color:var(--ok); }
.bar { height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:3px; background:var(--accent); }
.bar.good > span { background:var(--ok); } .bar.weak > span { background:var(--warn); }

/* главная кабинета */
.hero { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-end; justify-content:space-between; }
.stat { display:flex; flex-direction:column; gap:4px; padding:18px 20px; border-radius:14px; background:var(--surface); border:1px solid var(--border); min-width:150px; flex:1 1 150px; }
.stat b { font-size:34px; font-weight:700; letter-spacing:-0.04em; line-height:1.1; }
.big-num { font-size:64px; font-weight:700; letter-spacing:-0.05em; line-height:1; }
.topic-row { display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.topic-row:last-child { border-bottom:0; }
.topic-row:hover b { color:var(--accent-text); }
.badge { min-width:36px; height:36px; padding:0 6px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; background:var(--surface2); color:var(--text); border:1px solid var(--border); flex:0 0 auto; font-variant-numeric:tabular-nums; }
.arrow { color:var(--dim); margin-left:auto; }
.diag-banner { display:flex; align-items:center; gap:18px; flex-wrap:nowrap; padding:20px 24px; border-radius:16px; background:var(--ink); color:var(--on-ink); text-decoration:none; }
.diag-banner .muted { color:inherit; opacity:.72; }
.diag-banner .btn { background:var(--on-ink); color:var(--ink); }

/* карта заданий */
.tcard { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); text-decoration:none; min-height:150px; transition:border-color .15s; }
.tcard:hover { border-color:var(--ink); }
.tcard .name { font-weight:600; line-height:1.35; letter-spacing:-0.01em; }

/* видео */
.player { border-radius:12px; overflow:hidden; background:#000; aspect-ratio:16/9; }
.player video { width:100%; height:100%; display:block; }
.chapters { display:flex; flex-wrap:wrap; gap:6px; }
.chapters button { min-height:36px; padding:6px 12px; border-radius:9px; border:1px solid var(--border); background:var(--surface); color:var(--text2); font:inherit; font-size:14px; cursor:pointer; }
.chapters button.on { border-color:var(--ink); color:var(--text); font-weight:600; }
.no-video { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; aspect-ratio:16/9; border-radius:12px; background:var(--sunken); color:var(--muted); text-align:center; padding:20px; }
.hack-box { background:var(--sunken); }

/* репетитор */
.chat-card { display:flex; flex-direction:column; height:min(78vh, 760px); padding:0; overflow:hidden; }
.chat-head { display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); }
.msgs { flex:1 1 auto; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; min-height:180px; }
.bubble { max-width:86%; padding:10px 14px; border-radius:14px; font-size:15px; overflow-wrap:anywhere; }
.bubble.bot { align-self:flex-start; background:var(--surface2); border-bottom-left-radius:4px; }
.bubble.me { align-self:flex-end; background:var(--me); color:var(--me-text); border-bottom-right-radius:4px; }
.bubble.me .cmd { color:var(--text); }
.bubble img { max-width:100%; border-radius:8px; margin-top:8px; display:block; background:#fff; }
.bubble audio { width:100%; margin-top:8px; }
.bubble .vanish { margin-top:8px; padding:10px; border-radius:8px; border:1px dashed var(--border2); }
.typing { align-self:flex-start; color:var(--dim); font-size:14px; padding:4px 6px; }
.typing span { animation:blink 1.2s infinite; } .typing span:nth-child(2){animation-delay:.2s} .typing span:nth-child(3){animation-delay:.4s}
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
.composer { border-top:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:8px; }
.composer form { display:flex; gap:8px; align-items:flex-end; }
.composer form.report-box { align-items:stretch; }
.composer textarea { min-height:46px; max-height:180px; }
.send { width:46px; height:46px; flex:0 0 auto; border-radius:11px; border:0; background:var(--ink); color:var(--on-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.attach { width:46px; height:46px; flex:0 0 auto; border-radius:11px; border:1px solid var(--border2); background:var(--surface); color:var(--text); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.task-card img { max-width:min(100%, 520px); border-radius:10px; background:#fff; display:block; margin-top:10px; border:1px solid var(--border); }
.task-card .text { font-size:19px; line-height:1.6; letter-spacing:-0.005em; }

/* вход */
.auth { max-width:440px; margin:5vh auto 0; width:100%; }
.or { display:flex; align-items:center; gap:12px; color:var(--dim); font-size:14px; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--border); }
.tabs { display:flex; gap:4px; padding:4px; border-radius:11px; background:var(--surface2); }
.tabs a { flex:1; text-align:center; padding:9px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:600; font-size:15px; }
.tabs a.on { background:var(--surface); color:var(--text); box-shadow:0 0 0 1px var(--border); }

/* лендинг */
.land-hero { padding:56px 0 8px; display:flex; flex-direction:column; gap:26px; }
.land-hero h1 { font-size:clamp(44px, 6.6vw, 88px); line-height:1; letter-spacing:-0.05em; max-width:1000px; }
.land-hero h1 .soft { color:var(--dim); }
.land-hero .lead { max-width:580px; font-size:20px; color:var(--text2); margin:0; }
.product { border:1px solid var(--border); border-radius:20px; background:var(--sunken); padding:24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
.product .pane { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.product .pane.wide2 { grid-column:span 2; }
@media (max-width:640px) { .product .pane.wide2 { grid-column:auto; } }
.sect { padding:72px 0; border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:48px; }
.sect h2 { font-size:clamp(30px, 3.6vw, 44px); letter-spacing:-0.04em; line-height:1.05; }
.steps { margin:0; padding:0; list-style:none; }
.steps li { padding:22px 0; border-top:1px solid var(--border); display:flex; gap:22px; }
.steps li:last-child { border-bottom:1px solid var(--border); }
.steps .n { font-weight:600; color:var(--accent-text); min-width:28px; font-variant-numeric:tabular-nums; }
.features { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:36px 28px; }
.features > div { display:flex; flex-direction:column; gap:8px; }
.ink-band { background:var(--ink); color:var(--on-ink); border-radius:20px; padding:56px; display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between; }
.ink-band h2 { max-width:640px; font-size:clamp(28px, 3.6vw, 44px); letter-spacing:-0.04em; line-height:1.05; }
.ink-band .btn { background:var(--on-ink); color:var(--ink); }
.counters { display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.counters > div { flex:1 1 200px; display:flex; flex-direction:column; gap:2px; padding:22px 0; }
.counters b { font-size:40px; font-weight:700; letter-spacing:-0.04em; }
.counters span { color:var(--muted); }
footer.foot { max-width:1200px; margin:0 auto; padding:24px; color:var(--dim); font-size:14px; display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid var(--border); }
footer.foot a { color:var(--dim); text-decoration:none; }
footer.foot a:hover { color:var(--text); }

/* жалобы */
.linkbtn { display:inline-flex; align-items:center; gap:6px; background:none; border:0; padding:4px 2px; color:var(--muted); font:inherit; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; }
.linkbtn:hover { color:var(--warn); }
.report-box { padding:14px; border-radius:12px; border:1px solid var(--border2); background:var(--sunken); }
.choice.small label { padding:8px 12px; font-size:14px; }
.report-box .choice { gap:6px; }
.chat-card:has(#report:not([hidden])) { height:auto; }
.chat-card:has(#report:not([hidden])) .msgs { max-height:260px; }

/* панель администратора */
.kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:0; border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--border); gap:1px; }
.kpi { display:flex; flex-direction:column; gap:4px; padding:18px 20px; background:var(--surface); }
.kpi span { color:var(--dim); font-size:14px; font-weight:500; }
.kpi b { font-size:34px; font-weight:700; letter-spacing:-0.04em; line-height:1.15; }
.kpi small { color:var(--muted); font-size:13px; }
.kpi.accent b { color:var(--accent-text); }
.kpi.warn b { color:var(--warn); }
.chart { display:flex; align-items:flex-end; gap:4px; height:180px; padding-top:18px; }
.chart .col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:4px; min-width:0; }
.chart .bar-v { width:100%; max-width:20px; min-height:2px; border-radius:4px 4px 1px 1px; background:var(--accent); }
.chart .col:hover .bar-v { background:var(--ink); }
.chart .v { font-size:11px; color:var(--muted); }
.chart .d { font-size:11px; color:var(--dim); height:14px; }
.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; color:var(--dim); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tbl td { padding:10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ok); margin-right:8px; vertical-align:middle; }

/* игры */
.game-ico { width:44px; height:44px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface2); border:1px solid var(--border); color:var(--text); }
.game-card { min-height:190px; }
.game #g-play { min-height:280px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border-radius:12px; padding:18px; }
.game #g-play.ok { animation:okflash .35s; }
.game #g-play.bad { animation:badflash .6s; }
@keyframes okflash { from { background:var(--ok-soft); } to { background:transparent; } }
@keyframes badflash { 0%,100% { transform:none; } 20% { transform:translateX(-8px); background:var(--warn-soft); } 40% { transform:translateX(8px); } 60% { transform:translateX(-4px); } }
.g-q { font-size:clamp(32px, 6vw, 52px); font-weight:700; letter-spacing:-0.04em; text-align:center; font-variant-numeric:tabular-nums; }
.g-q.small { font-size:18px; font-weight:500; letter-spacing:0; color:var(--muted); }
.g-q.text { font-size:clamp(19px, 3vw, 24px); font-weight:600; letter-spacing:-0.01em; line-height:1.4; max-width:640px; }
.g-form { justify-content:center; flex-wrap:nowrap; }
.g-input { max-width:200px; font-size:26px !important; text-align:center; font-weight:600; }
.g-two { display:flex; gap:12px; width:100%; max-width:560px; }
.g-big { flex:1; min-height:96px; border-radius:14px; border:1px solid var(--border2); background:var(--surface); color:var(--text); font:inherit; font-size:clamp(24px, 5vw, 36px); font-weight:700; letter-spacing:-0.03em; cursor:pointer; transition:border-color .15s, background .15s; }
.g-big:hover { border-color:var(--ink); background:var(--surface2); }
.g-big.yes, .g-big.no { font-size:20px; letter-spacing:-0.01em; }
.g-hint { color:var(--warn); font-weight:600; text-align:center; }
.g-mist { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:4px; }
#g-time.weak { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }

@media (max-width:640px) {
  body { font-size:16px; }
  .top .in { padding:10px 16px; gap:6px 12px; }
  nav.main { order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; margin:0 -4px; }
  nav.main a { white-space:nowrap; padding:8px 10px; }
  main.wrap { padding:22px 16px 56px; }
  .card { padding:18px; border-radius:14px; }
  .chat-card { height:calc(100dvh - 150px); }
  .bubble { max-width:94%; }
  .kpis { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kpi { padding:14px; } .kpi b { font-size:26px; } .kpi small { font-size:12px; }
  .ink-band { padding:32px 22px; }
  .land-hero { padding-top:24px; }
  .diag-banner { flex-direction:column; align-items:flex-start; gap:12px; padding:20px; }
  .diag-banner > svg { display:none; }
  .top .btn { min-height:38px; padding:7px 12px; font-size:15px; }
  .top .icon-btn { width:38px; height:38px; }
  .tools { margin-left:auto; gap:6px; }
  .game h1 { font-size:22px !important; }
}

/* совместимость: старые имена переменных в шаблонах → новые цвета */
:root, html[data-theme] {
  --violet:var(--accent); --violet-text:var(--accent-text); --violet-bg:var(--accent-soft);
  --now-border:var(--ink); --now-row:var(--surface2);
  --orange-bg:var(--warn-soft); --orange-text:var(--warn); --warn-border:var(--warn-line); --warn-text:var(--warn);
  --green:var(--ok); --green-bg:var(--ok-soft); --green-text:var(--ok); --ok-border:var(--ok-line); --ok-text:var(--ok);
  --gold:var(--text); --hack:var(--sunken); --hack-border:var(--border); --cyan:var(--accent); --cyan-l:var(--accent);
}

/* строка ответа под заданием */
.answer-form { margin-top:6px; padding-top:18px; border-top:1px solid var(--border); }
.answer-row { display:flex; gap:8px; align-items:stretch; }
.answer-row input { flex:1 1 auto; font-size:20px; font-weight:500; }
.answer-row textarea { flex:1 1 auto; }
.answer-row .btn { flex:0 0 auto; min-height:52px; }
.answer-result:empty { display:none; }
.answer-result .bubble, .task-card .result .bubble { max-width:100%; border-radius:12px; background:var(--sunken); border:1px solid var(--border); }
.answer-result .bubble.ok-res, .task-card .result .bubble.ok-res { background:var(--ok-soft); border-color:var(--ok-line); }
.answer-result .bubble.bad-res, .task-card .result .bubble.bad-res { background:var(--warn-soft); border-color:var(--warn-line); }
@media (max-width:640px) { .answer-row { flex-direction:column; } }