/* «Решала»: меловая доска × тетрадь в клетку. Две темы — доска (по умолчанию) и бумага. Анимируем только transform/opacity/clip-path. */
:root {
  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand: 'Caveat', 'Marck Script', cursive;
  --font-script: 'Marck Script', 'Caveat', cursive;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --r-irr: 16px 20px 18px 22px / 20px 16px 22px 18px;
  --r-irr-s: 10px 12px 11px 13px / 12px 10px 13px 11px;
  --sb-w: 300px; --np-w: 0px;
  --ease-spring: cubic-bezier(.2, .9, .3, 1.25);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121c18; --bg-2: #18251f; --ink: #ece8da; --ink-2: #c3c6b8; --ink-3: #98a399;
  --line: rgba(236, 232, 218, .17); --line-2: rgba(236, 232, 218, .34);
  --panel: rgba(9, 17, 13, .76); --panel-solid: #0e1813; --sb-bg: rgba(8, 14, 11, .82);
  --chip: rgba(236, 232, 218, .07); --chip-h: rgba(236, 232, 218, .14);
  --accent: #f4d35e; --accent-ink: #15201a; --accent-h: #ffe58a;
  --pink: #f5a3b7; --blue: #8cc8f0; --green: #a4dca7; --red: #ff9a92;
  --hl: rgba(244, 211, 94, .42); --hl-2: rgba(244, 211, 94, .16);
  --answer: #f5a3b7; --check: #a4dca7; --focus: #8cc8f0;
  --shadow: 0 20px 46px rgba(0, 0, 0, .4); --tex: #f4f1e5;
  --stage-bg: linear-gradient(180deg, rgba(8, 14, 11, .5), rgba(8, 14, 11, .78)), url('/img/board.webp') center / cover fixed, #121c18;
  --sticker-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ea; --bg-2: #fffdf6; --ink: #1b2a3f; --ink-2: #44546a; --ink-3: #5a687c;
  --line: rgba(27, 42, 63, .17); --line-2: rgba(27, 42, 63, .34);
  --panel: #fffefa; --panel-solid: #fffefa; --sb-bg: rgba(250, 247, 236, .92);
  --chip: rgba(27, 42, 63, .06); --chip-h: rgba(27, 42, 63, .12);
  --accent: #2a54b5; --accent-ink: #ffffff; --accent-h: #1f449a;
  --pink: #c8352b; --blue: #2a54b5; --green: #2a7d45; --red: #c8352b;
  --hl: rgba(255, 214, 79, .8); --hl-2: rgba(255, 224, 102, .38);
  --answer: #c8352b; --check: #2a7d45; --focus: #2a54b5;
  --shadow: 0 14px 34px rgba(27, 42, 63, .16); --tex: #14233a;
  --grid: rgba(86, 140, 190, .26);
  --stage-bg:
    linear-gradient(90deg, transparent 63px, rgba(224, 96, 96, .5) 63px, rgba(224, 96, 96, .5) 65px, transparent 65px),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 26px 26px,
    #f7f4ea;
  --sticker-shadow: 0 6px 14px rgba(27, 42, 63, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; overflow: hidden; -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 10px; transition: top .2s; }
.skip:focus { top: 12px; }
.ic { display: inline-flex; align-items: center; justify-content: center; }
svg[focusable="false"] { width: 1.2em; height: 1.2em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
code, pre, textarea, .bubble, .key { font-variant-ligatures: none; }

/* ---------- оболочка ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr) var(--np-w); height: 100dvh; transition: grid-template-columns .45s var(--ease-out); }
.app[data-notes="open"] { --np-w: 392px; }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--sb-bg); border-right: 1.5px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 16px 14px 12px; gap: 12px; z-index: 30; }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--stage-bg); position: relative; }
.notes { overflow: hidden; background: var(--panel); border-left: 1.5px solid var(--line); display: flex; flex-direction: column; min-width: 0; visibility: hidden; z-index: 30; }
.app[data-notes="open"] .notes { visibility: visible; }
.scrim { position: fixed; inset: 0; background: rgba(5, 9, 7, .6); z-index: 25; }

.sb-head { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--font-script); font-size: 34px; line-height: 1; letter-spacing: .01em; color: var(--accent); transform: translateY(-2px); }
.brand-mark { width: 38px; height: 38px; flex: none; }
.bm-bg { fill: #14201b; stroke: var(--line-2); stroke-width: 1.5; }
.bm-rad { fill: none; stroke: #f4d35e; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.bm-x { fill: none; stroke: #f5a3b7; stroke-width: 3; stroke-linecap: round; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--line-2); border-radius: var(--r-irr-s); background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; transition: background .2s, transform .2s var(--ease-spring), border-color .2s; text-decoration: none; }
.btn:hover { background: var(--chip-h); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn-primary:hover { background: var(--accent-h); }
.btn-ghost { border-color: transparent; background: var(--chip); }
.btn-link { border: 0; background: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; min-height: 40px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2); transition: background .2s, color .2s, transform .2s var(--ease-spring); }
.icon-btn:hover { background: var(--chip-h); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.is-on { color: var(--accent); }
.new-chat { width: 100%; }

/* ---------- боковая панель ---------- */
.sb-search { position: relative; }
.sb-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.sb-search input, .np-search input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1.5px solid var(--line); border-radius: var(--r-irr-s); background: var(--chip); font-size: 16px; }
.np-search { position: relative; }
.np-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.sb-search input::placeholder, .np-search input::placeholder { color: var(--ink-3); }
.sb-tabs { display: flex; gap: 6px; }
.sb-tab { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.sb-tab.is-on { background: var(--chip-h); color: var(--ink); }
.chat-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.cl-group { font-family: var(--font-hand); font-size: 20px; color: var(--ink-3); margin: 10px 6px 2px; }
.chat-item { position: relative; border-radius: var(--r-irr-s); border: 1.5px solid transparent; }
.ci-link { display: flex; flex-direction: column; gap: 1px; padding: 9px 44px 9px 14px; min-height: 56px; justify-content: center; text-decoration: none; color: var(--ink); border-radius: inherit; }
.chat-item:hover { background: var(--chip); }
.chat-item.is-active { background: var(--chip-h); border-color: var(--line); }
.chat-item.is-active::before { content: ''; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--accent); }
.ci-title { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-meta { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-pin { color: var(--accent); margin-right: 4px; }
.ci-menu { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); opacity: 0; width: 36px; height: 36px; }
.chat-item:hover .ci-menu, .chat-item:focus-within .ci-menu, .ci-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .ci-menu { opacity: 1; } }
.cl-empty { color: var(--ink-3); font-size: 14px; padding: 18px 8px; text-align: center; }
.menu { position: fixed; z-index: 60; min-width: 200px; padding: 6px; background: var(--panel-solid); border: 1.5px solid var(--line-2); border-radius: var(--r-irr-s); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.menu button { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; border-radius: 8px; text-align: left; font-size: 15px; }
.menu button:hover { background: var(--chip-h); }
.menu .danger { color: var(--red); }
.sb-foot { border-top: 1.5px dashed var(--line); padding-top: 12px; font-size: 13.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 8px; }
.sb-foot .who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.who b { display: block; color: var(--ink); font-size: 14.5px; }
.sb-foot .btn { min-height: 40px; font-size: 14px; }

/* ---------- верхняя панель ---------- */
.topbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; min-height: 64px; }
.tb-title { flex: 1; min-width: 0; font-family: var(--font-hand); font-weight: 700; font-size: 28px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.tb-actions { display: flex; align-items: center; gap: 8px; }
#notes-toggle { position: relative; }
.count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; display: inline-grid; place-items: center; }
.only-mobile { display: none; }

/* ---------- лента ---------- */
.feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 34px; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent); scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.feed-in { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.load-more { align-self: center; }

/* приветствие */
.welcome { max-width: 1000px; margin: 0 auto; padding: 18px 4px 10px; }
.hero { position: relative; min-height: 300px; display: grid; align-content: center; gap: 14px; padding: 28px clamp(16px, 4vw, 44px); border-radius: var(--r-irr); overflow: hidden; border: 1.5px solid var(--line); }
html[data-theme="dark"] .hero { background: linear-gradient(90deg, rgba(10, 18, 14, .5), rgba(10, 18, 14, .08)), url('/img/welcome.webp') right center / cover no-repeat; }
html[data-theme="light"] .hero { background: linear-gradient(90deg, rgba(255, 254, 250, .95), rgba(255, 254, 250, .55)), repeating-linear-gradient(0deg, transparent 0 25px, rgba(86, 140, 190, .22) 25px 26px), repeating-linear-gradient(90deg, transparent 0 25px, rgba(86, 140, 190, .22) 25px 26px), #fffefa; }
.hero h1 { margin: 0; font-family: var(--font-script); font-weight: 400; font-size: clamp(54px, 9vw, 96px); line-height: .95; color: var(--accent); letter-spacing: .01em; transform: rotate(-1.5deg); transform-origin: left center; max-width: 9ch; }
.hero > * { max-width: min(560px, 58%); }
.hero .draw { display: block; width: min(320px, 70%); height: 18px; margin-top: -4px; }
.hero .draw path { fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: draw 1.1s .35s var(--ease-out) forwards; }
.hero p { margin: 0; max-width: 34em; font-size: clamp(16px, 2.2vw, 19px); color: var(--ink); text-wrap: pretty; }
.hero p b { font-weight: 600; color: var(--accent); }
.ex-groups { display: grid; gap: 18px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ex-group h2 { margin: 0 0 8px; font-family: var(--font-hand); font-weight: 700; font-size: 26px; color: var(--ink); }
.ex-group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ex { width: 100%; display: flex; align-items: center; min-height: 46px; padding: 8px 14px; text-align: left; border: 1.5px solid var(--line); border-radius: var(--r-irr-s); background: var(--chip); font-size: 15px; line-height: 1.3; transition: background .2s, transform .25s var(--ease-spring), border-color .2s; }
.ex:hover { background: var(--chip-h); border-color: var(--line-2); transform: translateX(3px); }
.ex code { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.welcome-note { margin: 22px 0 0; color: var(--ink-3); font-size: 14px; }

/* сообщения */
.msg-user { align-self: flex-end; max-width: min(640px, 92%); }
.bubble { position: relative; padding: 11px 16px; border-radius: var(--r-irr); background: var(--chip-h); border: 1.5px solid var(--line-2); font-family: var(--font-mono); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble .tag { display: inline-block; margin-right: 8px; padding: 0 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-hand); font-weight: 700; font-size: 18px; line-height: 1.4; }
.msg-card { display: flex; flex-direction: column; gap: 10px; }

/* ---------- карточка решения ---------- */
.card { position: relative; border: 1.5px solid var(--line-2); border-radius: var(--r-irr); background: var(--panel); box-shadow: var(--shadow); padding: 18px clamp(14px, 2.6vw, 28px) 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: card-in .55s var(--ease-spring) both; min-width: 0; }
html[data-theme="light"] .card { background: repeating-linear-gradient(0deg, transparent 0 25px, rgba(86, 140, 190, .16) 25px 26px), repeating-linear-gradient(90deg, transparent 0 25px, rgba(86, 140, 190, .16) 25px 26px), #fffefa; }
html[data-theme="light"] .card::before { content: ''; position: absolute; left: 12px; top: 10px; bottom: 10px; width: 2px; background: rgba(224, 96, 96, .45); border-radius: 2px; pointer-events: none; }
.card.is-static { animation: none; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.badge { font-family: var(--font-hand); font-weight: 700; font-size: 25px; line-height: 1; color: var(--blue); }
.badge small { font-size: 18px; color: var(--ink-3); margin-left: 8px; font-weight: 500; }
.card-head .sp { flex: 1; }
.cond { margin: 8px 0 4px; display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lbl-hand { font-family: var(--font-hand); font-weight: 700; font-size: 23px; color: var(--ink-3); }
.cond-body { flex: 1; min-width: 0; font-size: 1.2em; overflow-x: auto; padding: 2px 0; }
.cond-body.text { font-size: 16px; }
.cond-body .katex-display { margin: .2em 0; text-align: left; }
.cond-body .katex-display > .katex { text-align: left; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--chip); border: 1.5px solid var(--line); }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.seg button:hover { color: var(--ink); }
.seg button.is-on, .seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.methods { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.methods .lbl-hand { font-size: 20px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 1.5px solid var(--line-2); border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; transition: background .2s, transform .2s var(--ease-spring); }
.chip:hover { background: var(--chip-h); }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--chip-h); border-color: var(--accent); color: var(--accent); }

/* шаги */
.steps { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; border-left: 2px dashed var(--line); }
.step { position: relative; counter-increment: step; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 14px; padding: 10px 6px 10px 0; border-radius: 12px; }
.step:hover { background: var(--chip); }
.step::before { content: counter(step); grid-row: 1 / span 2; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-solid); border: 2px solid var(--line-2); font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: var(--accent); z-index: 1; }
.step-text { grid-column: 2; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; text-wrap: pretty; }
.step-text:empty { display: none; }
.step-math { grid-column: 2; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-x: auto; overflow-y: hidden; padding: 2px 0; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.step-math .katex-display { margin: .25em 0; text-align: left; }
.step-math .katex-display > .katex { text-align: left; }
.step-act { grid-column: 3; grid-row: 1; align-self: start; opacity: 0; transition: opacity .2s; }
.step:hover .step-act, .step:focus-within .step-act, .step-act.has-note { opacity: 1; }
@media (hover: none) { .step-act { opacity: 1; } }
.step-act .icon-btn { width: 40px; height: 40px; }
.step-notes { grid-column: 2 / span 2; display: flex; flex-wrap: wrap; gap: 14px; padding-top: 4px; }
.katex { color: var(--tex); font-size: 1.12em; }
.katex .hl { background: var(--hl-2); border-radius: 4px; box-shadow: 0 0 0 3px var(--hl-2); }
.card.fresh .katex .hl { animation: hl-in 2.2s calc(var(--delay, 0s) + .5s) ease-out both; }
.card.fresh .step { animation: step-in .5s var(--ease-out) both; animation-delay: var(--delay, 0s); }
.card.fresh .step-math { animation: write .85s var(--ease-out) both; animation-delay: calc(var(--delay, 0s) + .15s); }

/* ответ и проверка */
.answer { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; width: fit-content; max-width: 100%; margin: 18px 0 8px; padding: 12px 22px 12px 20px; }
.answer .lbl-script { font-family: var(--font-script); font-size: 34px; line-height: 1; color: var(--accent); transform: rotate(-2deg); }
.answer-body { position: relative; z-index: 1; font-size: 1.45em; min-width: 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 4px 6px; }
.answer-body .katex-display { margin: 0; }
.answer-body .katex { font-size: 1.1em; color: var(--tex); }
.answer-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.answer-ring path { fill: none; stroke: var(--answer); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.card.fresh .answer-ring path { stroke-dashoffset: 1; animation: ring 1.1s calc(var(--delay-answer, 1s)) var(--ease-out) forwards; }
.card.fresh .answer-body { animation: write .9s calc(var(--delay-answer, 1s) - .2s) var(--ease-out) both; }
.check { margin: 4px 0 0; border-top: 1.5px dashed var(--line); padding-top: 8px; }
.check summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--ink-2); }
.check summary::-webkit-details-marker { display: none; }
.check .tick { width: 28px; height: 28px; stroke: var(--check); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.check .tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.card.fresh .check .tick path { stroke-dashoffset: 1; animation: ring .7s calc(var(--delay-answer, 1s) + 1s) var(--ease-out) forwards; }
.check .chev { margin-left: auto; transition: transform .25s var(--ease-out); }
.check[open] .chev { transform: rotate(90deg); }
.check-lines { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px 38px; color: var(--ink-2); font-size: 15px; }
.check-lines .katex-display { margin: .2em 0; text-align: left; }
.alert-note { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r-irr-s); border: 1.5px dashed var(--line-2); color: var(--ink-2); font-size: 14.5px; }

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.card-actions .chip { background: var(--chip); }
.graph-wrap { margin-top: 12px; border: 1.5px solid var(--line-2); border-radius: var(--r-irr-s); overflow: hidden; background: var(--bg); position: relative; animation: card-in .5s var(--ease-spring) both; }
.card-notes { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }

/* состояния */
.skeleton { display: flex; flex-direction: column; gap: 12px; }
.skeleton .writer { font-family: var(--font-hand); font-weight: 700; font-size: 24px; color: var(--ink-2); display: flex; align-items: center; gap: 12px; }
.dots span { display: inline-block; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--accent); animation: bounce 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
.sk-line { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--chip) 0%, var(--chip-h) 50%, var(--chip) 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.sk-line.s { width: 40%; } .sk-line.m { width: 66%; } .sk-line.l { width: 90%; }
.err-card { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.err-card .err-h { font-family: var(--font-hand); font-weight: 700; font-size: 26px; color: var(--red); margin: 0 0 4px; }
.err-card p { margin: 4px 0; color: var(--ink-2); }
.err-card .hint { color: var(--ink-3); font-size: 14.5px; }

/* ---------- ввод ---------- */
.composer { position: relative; padding: 8px 20px calc(10px + var(--safe-b)); max-width: 940px; width: 100%; margin: 0 auto; }
.cmp-row { display: flex; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 6px; border: 2px solid var(--line-2); border-radius: var(--r-irr); background: var(--panel-solid); box-shadow: var(--shadow); transition: border-color .2s; }
.cmp-row:focus-within { border-color: var(--accent); }
#composer-input { flex: 1; min-width: 0; resize: none; max-height: 168px; padding: 10px 4px; border: 0; background: transparent; font-family: var(--font-mono); font-size: 16px; line-height: 1.5; outline: none; }
#composer-input::placeholder { color: var(--ink-3); }
.counter { align-self: center; font-size: 12px; color: var(--ink-3); min-width: 3.5ch; text-align: right; }
.counter.warn { color: var(--red); }
.send { width: 48px; height: 44px; flex: none; border: 0; border-radius: var(--r-irr-s); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; transition: transform .2s var(--ease-spring), background .2s; }
.send:hover { background: var(--accent-h); }
.send:active { transform: scale(.92); }
.send[disabled] { opacity: .5; cursor: not-allowed; }
.send svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hint { margin: 6px 4px 0; font-size: 12.5px; color: var(--ink-3); }
.hint code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.preview { margin: 0 4px 8px; padding: 8px 14px; border-radius: var(--r-irr-s); border: 1.5px dashed var(--line-2); background: var(--panel-solid); color: var(--ink); overflow-x: auto; font-size: 1.1em; }
.preview .pv-l { font-family: var(--font-hand); font-weight: 700; font-size: 18px; color: var(--ink-3); margin-right: 10px; }
.suggest { position: absolute; left: 20px; right: 20px; bottom: calc(100% - 4px); z-index: 20; display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1.5px solid var(--line-2); border-radius: var(--r-irr-s); background: var(--panel-solid); box-shadow: var(--shadow); }
.suggest button { display: flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 6px 12px; border: 0; background: transparent; border-radius: 8px; text-align: left; }
.suggest button:hover, .suggest button.is-sel { background: var(--chip-h); }
.suggest small { color: var(--ink-3); }
.suggest code { font-family: var(--font-mono); }
.keypad { margin: 0 0 8px; padding: 10px; border: 1.5px solid var(--line-2); border-radius: var(--r-irr); background: var(--panel-solid); box-shadow: var(--shadow); animation: card-in .35s var(--ease-spring) both; }
.kp-tabs { display: flex; gap: 6px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.kp-tabs button { flex: none; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.kp-tabs button.is-on { background: var(--accent); color: var(--accent-ink); }
.kp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; max-width: 600px; margin: 0 auto; }
.key { min-height: 46px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: var(--r-irr-s); background: var(--chip); font-family: var(--font-mono); font-size: 16px; color: var(--ink); display: grid; place-items: center; transition: background .15s, transform .15s var(--ease-spring); }
.key:hover { background: var(--chip-h); }
.key:active { transform: scale(.9); }
.key.wide { grid-column: span 2; }
.key .katex { font-size: 1.05em; }
.key.act { background: var(--chip-h); color: var(--accent); }

/* ---------- заметки ---------- */
.np-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 6px 18px; }
.np-title { flex: 1; font-family: var(--font-hand); font-weight: 700; font-size: 30px; color: var(--ink); }
.save-state { font-size: 13px; color: var(--ink-3); min-width: 0; }
.save-state.ok { color: var(--check); }
.save-state.err { color: var(--red); }
.np-tools { display: flex; flex-direction: column; gap: 8px; padding: 4px 14px 10px; }
.np-tools .seg { align-self: stretch; }
.np-tools .seg button { flex: 1; }
.np-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px 16px; position: relative; }
.np-body.is-board { background: radial-gradient(circle, var(--line) 1.2px, transparent 1.4px) 0 0 / 22px 22px; padding: 0; }
.np-list { display: flex; flex-direction: column; gap: 18px; padding: 8px 4px; }
.np-add { margin: 0 14px calc(14px + var(--safe-b)); }
.np-empty { text-align: center; padding: 40px 18px; color: var(--ink-3); }
.np-empty .big { font-family: var(--font-hand); font-weight: 700; font-size: 28px; color: var(--ink-2); margin-bottom: 6px; }
.np-ref { display: block; margin: 0 0 4px 4px; font-size: 13px; color: var(--ink-3); text-decoration: none; background: none; border: 0; padding: 4px 6px; min-height: 28px; text-align: left; border-radius: 6px; }
.np-ref:hover { color: var(--accent); }
.np-board-in { position: relative; min-height: 100%; height: 100%; touch-action: none; }

.sticker { --rot: -1.2deg; position: relative; width: min(100%, 300px); padding: 18px 14px 10px; background: var(--sc, #fff2a8); color: #2a2a2a; border-radius: 3px 3px 12px 3px; box-shadow: var(--sticker-shadow); transform: rotate(var(--rot)); animation: pop .45s var(--ease-spring) both; font-family: var(--font-hand); font-size: 23px; line-height: 1.15; }
.sticker::before { content: ''; position: absolute; left: 50%; top: -9px; width: 74px; height: 22px; margin-left: -37px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(0, 0, 0, .08); transform: rotate(-2deg); }
.sticker[data-c="yellow"] { --sc: #fff2a8; } .sticker[data-c="pink"] { --sc: #ffd3dc; } .sticker[data-c="blue"] { --sc: #cfe6ff; } .sticker[data-c="green"] { --sc: #d5f0cf; }
.sticker textarea { width: 100%; min-height: 56px; resize: none; border: 0; background: transparent; outline: none; font: inherit; color: inherit; overflow: hidden; }
.sticker textarea::placeholder { color: rgba(0, 0, 0, .45); }
.st-foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-family: var(--font-ui); font-size: 12px; color: rgba(0, 0, 0, .55); min-height: 30px; }
.st-foot .sp { flex: 1; }
.st-btn { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: rgba(0, 0, 0, .6); display: inline-grid; place-items: center; }
.st-btn:hover { background: rgba(0, 0, 0, .1); }
.st-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.st-btn.on { color: #b3261e; }
.dots-c { display: inline-flex; gap: 3px; }
.dot-c { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, .25); padding: 0; }
.dot-c[data-c="yellow"] { background: #ffe66d; } .dot-c[data-c="pink"] { background: #ffb3c4; } .dot-c[data-c="blue"] { background: #a9d4ff; } .dot-c[data-c="green"] { background: #b7e6ad; }
.dot-c.on { border-color: rgba(0, 0, 0, .8); }
.sticker.dragging { cursor: grabbing; z-index: 9; box-shadow: 0 16px 28px rgba(0, 0, 0, .4); }
.np-board-in .sticker { position: absolute; width: 230px; cursor: grab; }
.np-board-in .sticker textarea { cursor: text; }

/* ---------- график ---------- */
.graph-canvas { display: block; width: 100%; height: 340px; touch-action: none; cursor: grab; }
.graph-canvas:active { cursor: grabbing; }
.g-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; }
.g-tools .icon-btn { width: 40px; height: 40px; background: var(--panel); border: 1.5px solid var(--line-2); }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px; border-top: 1.5px solid var(--line); font-size: 14px; }
.g-legend i { display: inline-block; width: 22px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.g-hint { position: absolute; left: 12px; bottom: 54px; font-size: 12.5px; color: var(--ink-3); pointer-events: none; }

/* ---------- вход ---------- */
.auth-view { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: linear-gradient(90deg, rgba(8, 12, 12, .2), rgba(8, 12, 14, .82)), url('/img/login.webp') center / cover no-repeat, #0b1014; overflow-y: auto; }
.auth-card { position: relative; width: min(440px, 100%); padding: 28px 26px 22px; border-radius: var(--r-irr); background: rgba(12, 20, 17, .9); border: 1.5px solid rgba(236, 232, 218, .3); color: #ece8da; backdrop-filter: blur(10px); animation: card-in .5s var(--ease-spring) both; margin-left: auto; margin-right: clamp(0px, 8vw, 120px); --ink: #ece8da; --ink-2: #c3c6b8; --ink-3: #98a399; --line: rgba(236, 232, 218, .2); --line-2: rgba(236, 232, 218, .38); --chip: rgba(236, 232, 218, .08); --chip-h: rgba(236, 232, 218, .15); --accent: #f4d35e; --accent-ink: #15201a; --accent-h: #ffe58a; --red: #ff9a92; --focus: #8cc8f0; }
.auth-x { position: absolute; right: 10px; top: 10px; }
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.auth-h { font-family: var(--font-script); font-weight: 400; font-size: 44px; margin: 4px 0 2px; color: var(--accent); }
.auth-sub { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; }
.auth-seg { display: flex; margin-bottom: 14px; }
.auth-seg button { flex: 1; }
.fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.fld span { font-family: var(--font-hand); font-weight: 700; font-size: 20px; color: var(--ink-2); }
.fld input { height: 48px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-irr-s); background: rgba(0, 0, 0, .25); font-size: 16px; color: var(--ink); }
.fld input:focus { border-color: var(--accent); outline: none; }
.fld input[aria-invalid="true"] { border-color: var(--red); }
.fld-err { margin: 0 0 12px; color: var(--red); font-size: 14.5px; }
.auth-view [data-only] { display: none; }
.auth-view[data-mode="register"] [data-only="register"] { display: flex; }
.auth-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); text-align: center; }

/* ---------- мелочи ---------- */
.toasts { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--r-irr-s); background: var(--panel-solid); border: 1.5px solid var(--line-2); box-shadow: var(--shadow); font-size: 15px; animation: card-in .35s var(--ease-spring) both; }
.toast.err { border-color: var(--red); }
.toast button { border: 0; background: none; color: var(--accent); font-weight: 700; min-height: 32px; padding: 0 4px; }
.pulse-hit { animation: pulse-hit 1.6s ease-out; }

/* ---------- анимации ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes step-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes hl-in { 0% { background: var(--hl); box-shadow: 0 0 0 4px var(--hl); } 100% { background: var(--hl-2); box-shadow: 0 0 0 3px var(--hl-2); } }
@keyframes pop { from { opacity: 0; transform: rotate(var(--rot)) scale(.85) translateY(10px); } to { opacity: 1; transform: rotate(var(--rot)); } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-7px); opacity: 1; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse-hit { 0% { box-shadow: 0 0 0 0 var(--accent); } 20% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hero .draw path, .card.fresh .answer-ring path, .card.fresh .check .tick path { stroke-dashoffset: 0 !important; }
}

/* ---------- детальность ---------- */
.card[data-detail="1"] .step[data-d="2"], .card[data-detail="1"] .step[data-d="3"], .card[data-detail="2"] .step[data-d="3"] { display: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .app[data-notes="open"] { --np-w: 0px; }
  .notes { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100vw); transform: translateX(100%); visibility: visible; transition: transform .4s var(--ease-out); box-shadow: var(--shadow); background: var(--panel-solid); }
  .app[data-notes="open"] .notes { transform: none; }
}
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(340px, 88vw); transform: translateX(-102%); transition: transform .4s var(--ease-out); background: var(--panel-solid); box-shadow: var(--shadow); }
  .app[data-sidebar="open"] .sidebar { transform: none; }
  .only-mobile { display: inline-grid; }
  .topbar { padding: 6px 8px; min-height: 56px; }
  .tb-title { font-size: 24px; }
  .btn-ghost .lbl { display: none; }
  .feed { padding: 6px 12px 20px; }
  .composer { padding: 6px 10px calc(8px + var(--safe-b)); }
  .hint { display: none; }
  .suggest { left: 10px; right: 10px; }
  .card { padding: 14px 12px 12px; }
  .step { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; }
  .step::before { width: 28px; height: 28px; font-size: 18px; }
  .steps::before { left: 13px; }
  .answer { gap: 4px 10px; padding: 10px 16px 10px 14px; flex-wrap: wrap; }
  .answer .lbl-script { font-size: 28px; }
  .answer-body { font-size: 1.12em; }
  .auth-card { margin: 0 auto; }
  .graph-canvas { height: 280px; }
  .hero { min-height: 260px; }
  .hero > * { max-width: 100%; }
  html[data-theme="dark"] .hero { background: linear-gradient(180deg, rgba(10, 18, 14, .92) 30%, rgba(10, 18, 14, .35)), url('/img/welcome.webp') 72% bottom / cover no-repeat; }
}
@media (max-width: 420px) {
  .badge { font-size: 22px; }
  .seg button { padding: 0 10px; font-size: 13.5px; }
  .kp-grid { gap: 5px; }
  .key { min-height: 44px; font-size: 15px; }
}

/* ---------- печать ---------- */
@media print {
  html[data-theme] { --bg: #fff; --ink: #111; --ink-2: #222; --ink-3: #444; --line: #bbb; --line-2: #888; --panel: #fff; --panel-solid: #fff; --chip: #f3f3f3; --chip-h: #eee; --accent: #1a3f99; --accent-ink: #fff; --pink: #b3261e; --answer: #b3261e; --check: #1f6b38; --tex: #000; --hl: #ffe66d; --hl-2: #fff3b0; --stage-bg: #fff; --shadow: none; }
  html.is-printing .sidebar, html.is-printing .topbar, html.is-printing .composer, html.is-printing .notes, html.is-printing .toasts, html.is-printing .scrim, html.is-printing .msg:not(.print-target), html.is-printing .welcome, html.is-printing .card-actions, html.is-printing .toolbar, html.is-printing .step-act, html.is-printing .auth-view { display: none !important; }
  html.is-printing body { overflow: visible; background: #fff; }
  html.is-printing .app { display: block; height: auto; }
  html.is-printing .stage, html.is-printing .feed { display: block; overflow: visible; height: auto; background: #fff; padding: 0; }
  html.is-printing .card { border: 1px solid #999; box-shadow: none; animation: none; background: #fff; backdrop-filter: none; page-break-inside: auto; }
  html.is-printing .card::before { display: none; }
  html.is-printing .step { break-inside: avoid; }
  html.is-printing .card[data-detail] .step { display: grid !important; }
  html.is-printing .card .check { display: block; }
  html.is-printing .card .check > summary { pointer-events: none; }
  .katex .hl { background: #fff3b0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- подтверждение разбора условия ---------- */
.confirm-card { border-color: var(--accent); }
.confirm-card .cf-h { color: var(--accent); }
.confirm-card .cf-lead { margin: 0 0 12px; color: var(--ink-2); }
.cf-block { margin: 0 0 12px; }
.cf-input { margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: var(--chip); font-family: 'JetBrains Mono', monospace; font-size: 14px; overflow-wrap: anywhere; }
.cf-model { margin-top: 4px; padding: 6px 12px; border-left: 3px solid var(--accent); }
.cf-step .step-text { margin-bottom: 2px; }
.cf-why { margin: 4px 0 0; padding-left: 20px; color: var(--ink); }
.cf-why li + li { margin-top: 4px; }

/* ---------- телефон: тач-цели боковых панелей не меньше 44 px ---------- */
@media (max-width: 820px) {
  .brand, .sb-tab, .sb-foot .btn, .seg button, .np-add, .btn { min-height: 44px; }
  .sb-search input, .np-search input { min-height: 44px; }
  .chat-item .ci-link { min-height: 44px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
}