/* Оболочка «Доска»: тёмная тема — школьная меловая доска, светлая — белая маркерная доска */
/* В Pangolin знак «№» нарисован как «No» — подменяем только этот символ системным шрифтом */
@font-face { font-family: "BzNo"; src: local("Nunito"), local("Arial"), local("Helvetica"), local("Liberation Sans"), local("DejaVu Sans"), local("Roboto"); unicode-range: U+2116; }
body.bz-skin-board {
  --bz-bg: #E9ECF0; --bz-panel: #FFFFFF; --bz-soft: #F1F3F6; --bz-line: #D3D8DF;
  --bz-ink: #1B1F24; --bz-text: #2B3038; --bz-mute: #525A66;
  --bz-acc: #1D4ED8; --bz-on-acc: #FFFFFF; --bz-acc-soft: #E3EAFD; --bz-acc-ink: #1D4ED8;
  --bz-ok: #0F7B45; --bz-ok-bg: #E3F4EA; --bz-ok-ink: #0B6638;
  --bz-warn: #D98A00; --bz-warn-bg: #FDF0DC; --bz-warn-ink: #874600;
  --bz-bad: #C81E4A; --bz-bad-bg: #FCE6EC; --bz-bad-ink: #A3173C;
  --bz-none: #EEF0F3; --bz-none-ink: #525A66;
  --bz-radius: 10px; --bz-radius-sm: 8px;
  --bz-font: Nunito, system-ui, sans-serif; --bz-font-d: BzNo, Pangolin, Nunito, cursive;
  --bz-max: 1220px;
  --bz-frame: #B9C0CA; --bz-frame-dark: #9AA3AF; --bz-tray: #DDE1E7;
  --bz-paper: #FFF7D6; --bz-magnet: #1D4ED8;
  --bz-shadow: 0 10px 26px rgba(27,31,36,.10);
  --bz-dust: none;
}
html[data-theme="dark"] body.bz-skin-board {
  --bz-bg: #16211D; --bz-panel: #264A41; --bz-soft: #2E5449; --bz-line: #4F7268;
  --bz-ink: #F4F2EA; --bz-text: #ECEADF; --bz-mute: #BFD0C7;
  --bz-acc: #F4D35E; --bz-on-acc: #1E2A25; --bz-acc-soft: #3C5A40; --bz-acc-ink: #F4D35E;
  --bz-ok: #B2EBC0; --bz-ok-bg: #1D3D2E; --bz-ok-ink: #B2EBC0;
  --bz-warn: #F4D35E; --bz-warn-bg: #3A4A30; --bz-warn-ink: #F4D35E;
  --bz-bad: #F7A8BA; --bz-bad-bg: #4A3038; --bz-bad-ink: #F7A8BA;
  --bz-none: #2E5449; --bz-none-ink: #BFD0C7;
  --bz-frame: #7A5230; --bz-frame-dark: #5E3F24; --bz-tray: #1F2D28;
  --bz-paper: #FFFDF5; --bz-magnet: #E5484D;
  --bz-shadow: 0 18px 40px rgba(0,0,0,.28);
  --bz-dust: radial-gradient(circle at 18% 22%, rgba(255,255,255,.05), transparent 38%), radial-gradient(circle at 82% 70%, rgba(255,255,255,.04), transparent 42%);
  color-scheme: dark;
}

/* ---------- Шапка ---------- */
.bz-skin-board .bz-top { background: var(--bz-bg); border-bottom: 0; }
.bz-skin-board .bz-brand { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 28px; }
.bz-skin-board .bz-brand-dot { color: var(--bz-acc); }
.bz-skin-board .bz-nav-a { font-weight: 700; border-radius: 0; background: transparent !important; border-bottom: 3px solid transparent; }
.bz-skin-board .bz-nav-a:hover { color: var(--bz-ink) !important; border-bottom-color: var(--bz-line); }
.bz-skin-board .bz-nav-a.is-on { color: var(--bz-ink) !important; border-bottom-color: var(--bz-acc); }
.bz-skin-board .bz-theme-toggle, .bz-skin-board .bz-top-out { border: 2px solid var(--bz-ink); color: var(--bz-ink) !important; }
.bz-skin-board .bz-top-out { border-radius: 22px; }
.bz-skin-board .bz-foot { border-top: 0; background: var(--bz-tray); }

/* ---------- Типографика ---------- */
.bz-skin-board .bz-h1, .bz-skin-board .bz-h2, .bz-skin-board .bz-h3, .bz-skin-board .bz-hero-title,
.bz-skin-board .bz-task-title, .bz-skin-board .bz-explain-t, .bz-skin-board .bz-step-h, .bz-skin-board .bz-sidecta-t,
.bz-skin-board .bz-tutor-n, .bz-skin-board .bz-quick-v, .bz-skin-board .bz-kpi-v, .bz-skin-board .bz-pred-v,
.bz-skin-board .bz-tile-v, .bz-skin-board .bz-grade, .bz-skin-board .bz-bk-date, .bz-skin-board .bz-line-n,
.bz-skin-board .bz-score b, .bz-skin-board .bz-hw-score b, .bz-skin-board .bz-day-d, .bz-skin-board .bz-ring-t { font-weight: 400; letter-spacing: 0; }
.bz-skin-board .bz-h1, .bz-skin-board .bz-hero-title, .bz-skin-board .bz-page-h .bz-h1 { animation: bzChalkIn .9s steps(22) both; }
.bz-skin-board .bz-hero-title { font-size: clamp(36px, 5vw, 58px); }
.bz-skin-board .bz-eyebrow { font-family: BzNo, Pangolin, cursive; text-transform: none; letter-spacing: 0; font-size: 17px; }

/* ---------- Доски (карточки) ---------- */
.bz-skin-board .bz-card, .bz-skin-board .bz-tutor-full, .bz-skin-board .bz-tutor-line, .bz-skin-board .bz-line {
  border: 4px solid var(--bz-frame); background-color: var(--bz-panel); background-image: var(--bz-dust);
  border-radius: 8px; box-shadow: var(--bz-shadow);
}
.bz-skin-board .bz-task, .bz-skin-board .bz-pred, .bz-skin-board .bz-map, .bz-skin-board .bz-chart,
.bz-skin-board .bz-bk-step, .bz-skin-board .bz-auth-card, .bz-skin-board .bz-kpis, .bz-skin-board .bz-recs, .bz-skin-board .bz-heat {
  border-width: 12px; border-color: var(--bz-frame);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 0 var(--bz-frame-dark), var(--bz-shadow);
}
.bz-skin-board .bz-task { padding: 26px 30px; }
.bz-skin-board .bz-task-title { font-size: 32px; }
.bz-skin-board h2.bz-task-title { font-size: 22px; }
.bz-skin-board .bz-task-n { background: var(--bz-acc); color: var(--bz-on-acc); border-radius: 50%; font-family: BzNo, Pangolin, cursive; }
.bz-skin-board .bz-task-meta { font-family: BzNo, Pangolin, cursive; font-size: 15px; }
.bz-skin-board .bz-cond { font-family: BzNo, Pangolin, cursive; font-size: 22px; line-height: 1.55; color: var(--bz-ink); }
.bz-skin-board .bz-cond .katex { font-size: 1em; }
html[data-theme="dark"] .bz-skin-board .bz-cond img, html[data-theme="dark"] .bz-skin-board .bz-explain img { filter: invert(1); mix-blend-mode: screen; }
.bz-skin-board .bz-diff-t { font-family: BzNo, Pangolin, cursive; font-size: 15px; }

/* поле ответа — подчёркивание мелом */
.bz-skin-board .bz-answer-l { font-family: BzNo, Pangolin, cursive; font-size: 22px; font-weight: 400; }
.bz-skin-board .bz-answer input { font-family: BzNo, Pangolin, cursive; font-size: 26px; font-weight: 400; background: transparent; border: 0; border-bottom: 3px dashed var(--bz-ink); border-radius: 0; width: 140px; }
.bz-skin-board .bz-answer input:focus { border-bottom-style: solid; border-bottom-color: var(--bz-acc); }
.bz-skin-board .bz-answer.is-ok input { background: transparent; border-bottom: 3px solid var(--bz-ok); }
.bz-skin-board .bz-answer.is-bad input { background: transparent; border-bottom: 3px solid var(--bz-bad); }
.bz-skin-board .bz-result { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 24px; }
.bz-skin-board .bz-answer.is-ok .bz-result { animation: bzWob 3s ease-in-out infinite; }

/* решение и подсказка — «пишутся» мелом */
.bz-skin-board .bz-explain { border-top: 2px dashed var(--bz-line); }
.bz-skin-board .bz-explain-t { color: var(--bz-acc-ink); font-size: 24px; }
.bz-skin-board .bz-explain .bz-math { font-family: BzNo, Pangolin, cursive; font-size: 20px; color: var(--bz-ink); }
.bz-skin-board .bz-explain.bz-reveal .bz-math > *, .bz-skin-board .bz-explain.bz-reveal .bz-math li { animation: bzChalkIn .8s steps(20) both; }
.bz-skin-board .bz-explain.bz-reveal .bz-math > *:nth-child(2), .bz-skin-board .bz-explain.bz-reveal .bz-math li:nth-child(2) { animation-delay: .5s; }
.bz-skin-board .bz-explain.bz-reveal .bz-math > *:nth-child(3), .bz-skin-board .bz-explain.bz-reveal .bz-math li:nth-child(3) { animation-delay: 1s; }
.bz-skin-board .bz-explain.bz-reveal .bz-math > *:nth-child(4), .bz-skin-board .bz-explain.bz-reveal .bz-math li:nth-child(4) { animation-delay: 1.5s; }
.bz-skin-board .bz-explain ol { list-style-position: inside; padding-left: 0; }
.bz-skin-board .bz-explain-by { font-family: BzNo, Pangolin, cursive; font-size: 16px; text-align: right; }
.bz-skin-board .bz-answer-panel { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 22px; background: transparent; border: 2px dashed var(--bz-line); }
.bz-skin-board .bz-report { background: var(--bz-soft); }

/* ---------- Кнопки — мел / маркер ---------- */
.bz-skin-board .bz-btn { border-radius: 8px; font-weight: 800; }
.bz-skin-board .bz-btn-acc { background: var(--bz-acc); color: var(--bz-on-acc) !important; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.bz-skin-board .bz-btn-acc:hover { transform: translateY(-2px) rotate(-.6deg); }
.bz-skin-board .bz-btn-line, .bz-skin-board .bz-btn-ghost { border: 2px solid var(--bz-ink); background: transparent; }
.bz-skin-board .bz-btn-ghost.is-on { background: var(--bz-ink); color: var(--bz-panel) !important; }
.bz-skin-board .bz-btn-soft { background: transparent; border: 2px solid var(--bz-acc); color: var(--bz-acc-ink) !important; }
.bz-skin-board [data-bz-variant-toggle].is-on { border-color: var(--bz-ok); background: var(--bz-ok-bg); }
.bz-skin-board .bz-btn-text { text-decoration: underline; text-underline-offset: 4px; }
.bz-skin-board .bz-seg { background: var(--bz-tray); }
.bz-skin-board .bz-seg a.is-on, .bz-skin-board .bz-seg input:checked + span { background: var(--bz-acc); color: var(--bz-on-acc) !important; }

/* ---------- Номера — кружки мелом ---------- */
.bz-skin-board .bz-nums { gap: 8px; }
.bz-skin-board .bz-num { border-radius: 50%; aspect-ratio: 1; height: auto; min-height: 38px; width: 100%; max-width: 46px; justify-self: center; border: 2px dashed var(--bz-mute); background: transparent; color: var(--bz-ink) !important; font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 17px; }
.bz-skin-board .bz-num.is-ok { border: 2px solid var(--bz-ok); background: var(--bz-ok-bg); color: var(--bz-ink) !important; }
.bz-skin-board .bz-num.is-bad { border: 2px solid var(--bz-bad); background: var(--bz-bad-bg); color: var(--bz-ink) !important; }
.bz-skin-board .bz-num.is-current { border: 2px solid var(--bz-acc); background: var(--bz-acc); color: var(--bz-on-acc) !important; }
.bz-skin-board .bz-num:hover { transform: translateY(-2px) rotate(-3deg); }
.bz-skin-board .bz-numcard-h { font-size: 15px; }
.bz-skin-board .bz-trow-n { border-radius: 50%; border: 2px dashed var(--bz-mute); background: transparent; font-family: BzNo, Pangolin, cursive; font-weight: 400; }
.bz-skin-board .bz-trow.is-ok .bz-trow-n { border: 2px solid var(--bz-ok); }
.bz-skin-board .bz-trow.is-bad .bz-trow-n { border: 2px solid var(--bz-bad); }
.bz-skin-board .bz-line-n { border-radius: 50%; font-family: BzNo, Pangolin, cursive; font-size: 22px; border: 2px dashed var(--bz-mute); background: transparent; color: var(--bz-ink); }
.bz-skin-board .bz-line.is-good .bz-line-n { border: 2px solid var(--bz-ok); background: var(--bz-ok-bg); }
.bz-skin-board .bz-line.is-mid .bz-line-n { border: 2px solid var(--bz-warn); background: var(--bz-warn-bg); }
.bz-skin-board .bz-line.is-weak .bz-line-n { border: 2px solid var(--bz-bad); background: var(--bz-bad-bg); }
.bz-skin-board .bz-line:hover { transform: translateY(-3px) rotate(-.4deg); }

/* ---------- Домашка — листок на магните ---------- */
.bz-skin-board .bz-hwcard, .bz-skin-board .bz-hwline {
  position: relative; background: var(--bz-paper) !important; background-image: none !important; border: 0 !important; border-radius: 2px;
  color: #1B1F24 !important; box-shadow: 0 10px 24px rgba(0,0,0,.22); transform-origin: top center; animation: bzSwing 5s ease-in-out infinite;
}
.bz-skin-board .bz-hwcard { padding-top: 26px; }
.bz-skin-board .bz-hwcard::before, .bz-skin-board .bz-hwline::before { content: ""; position: absolute; top: -10px; left: calc(50% - 12px); width: 24px; height: 24px; border-radius: 50%; background: var(--bz-magnet); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.bz-skin-board .bz-hwcard-l { color: #874600; font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 17px; }
.bz-skin-board .bz-hwcard-t { color: #1B1F24; }
.bz-skin-board .bz-hwcard .bz-muted, .bz-skin-board .bz-hwline .bz-muted { color: #4B5260; }
.bz-skin-board .bz-hwline b { color: #1B1F24; }
.bz-skin-board .bz-hwcard .bz-btn-warn { background: #1B1F24; color: #FFFFFF !important; }

/* ---------- Кабинет ---------- */
.bz-skin-board .bz-tabs { border-bottom: 2px dashed var(--bz-line); }
.bz-skin-board .bz-tabs a { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 19px; }
.bz-skin-board .bz-ring-bg { stroke: var(--bz-soft); }
.bz-skin-board .bz-ring-fg { stroke: var(--bz-acc); stroke-dasharray: none; }
.bz-skin-board .bz-ring-t { font-family: BzNo, Pangolin, cursive; font-size: 36px; }
.bz-skin-board .bz-pred-v { font-size: 46px; }
.bz-skin-board .bz-pred-goal { font-family: BzNo, Pangolin, cursive; font-weight: 400; color: var(--bz-acc-ink); font-size: 26px; }
.bz-skin-board .bz-kpi-v { font-size: 38px; }
.bz-skin-board .bz-tile { border: 2px solid transparent; border-radius: 8px; }
.bz-skin-board .bz-tile.is-good { border-color: var(--bz-ok); }
.bz-skin-board .bz-tile.is-mid { border-color: var(--bz-warn); }
.bz-skin-board .bz-tile.is-weak { border-color: var(--bz-bad); }
.bz-skin-board .bz-tile.is-none { border: 2px dashed var(--bz-line); }
.bz-skin-board .bz-tile-v { font-size: 26px; }
.bz-skin-board .bz-rec { background: transparent; border: 2px dashed var(--bz-line); }
.bz-skin-board .bz-rec b { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 18px; }
.bz-skin-board .bz-bar i { background: var(--bz-bad); }
.bz-skin-board .bz-word { background-color: var(--bz-tray); background-image: none; }
.bz-skin-board .bz-word-c { font-family: BzNo, Pangolin, cursive; font-size: 20px; line-height: 1.35; color: var(--bz-ink); }
.bz-skin-board .bz-grade { background: transparent; color: var(--bz-bad); font-family: BzNo, Pangolin, cursive; font-size: 36px; border: 0; }
html[data-theme="dark"] .bz-skin-board .bz-grade { color: var(--bz-acc); }
.bz-skin-board .bz-grade.is-empty { color: var(--bz-mute); }
.bz-skin-board .bz-lc-line { stroke-width: 3.5; }
.bz-skin-board .bz-lc-x, .bz-skin-board .bz-lc-gt { font-family: BzNo, Pangolin, cursive; font-size: 14px; }
.bz-skin-board .bz-heat-c { border-radius: 50%; }
.bz-skin-board .bz-legend { font-family: BzNo, Pangolin, cursive; font-size: 16px; }

/* ---------- Репетитор ---------- */
.bz-skin-board .bz-tutor-ph { border: 2px solid var(--bz-ink); background: transparent; color: var(--bz-ink); font-family: BzNo, Pangolin, cursive; font-weight: 400; }
.bz-skin-board .bz-tutor-g li::before { background: transparent; box-shadow: none; content: "✓"; color: var(--bz-ok); width: auto; height: auto; margin-top: 0; font-weight: 800; }
.bz-skin-board .bz-tutor-l { font-family: BzNo, Pangolin, cursive; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--bz-acc-ink); }

/* ---------- Запись и формы ---------- */
.bz-skin-board .bz-step-n { background: transparent; border: 2px solid var(--bz-acc); color: var(--bz-acc-ink); font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 18px; }
.bz-skin-board .bz-service { border: 2px dashed var(--bz-line); }
.bz-skin-board .bz-service:has(input:checked) { border-style: solid; border-color: var(--bz-acc); background: var(--bz-acc-soft); }
.bz-skin-board .bz-service-p { font-size: 22px; }
.bz-skin-board .bz-day, .bz-skin-board .bz-time { border: 2px dashed var(--bz-line); background: transparent; }
.bz-skin-board .bz-day[aria-pressed="true"], .bz-skin-board .bz-time[aria-pressed="true"] { border: 2px solid var(--bz-acc); background: var(--bz-acc); color: var(--bz-on-acc); }
.bz-skin-board .bz-time { font-family: BzNo, Pangolin, cursive; font-weight: 400; font-size: 18px; }
.bz-skin-board .bz-field input, .bz-skin-board .bz-field select, .bz-skin-board .bz-field textarea, .bz-skin-board .bz-report textarea, .bz-skin-board .bz-inline-form input { background: var(--bz-soft); border: 2px solid var(--bz-line); }
.bz-skin-board .bz-code { font-family: BzNo, Pangolin, cursive; font-weight: 400; background: transparent; border: 2px dashed var(--bz-acc); }
.bz-skin-board .bz-quote { background: transparent; border-left: 4px solid var(--bz-acc); font-family: BzNo, Pangolin, cursive; font-size: 20px; }
.bz-skin-board .bz-train { background: var(--bz-tray); color: var(--bz-acc-ink); border: 2px dashed var(--bz-acc); }
.bz-skin-board .bz-chip { border-width: 2px; }

/* ---------- Анимации ---------- */
@keyframes bzChalkIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bzSwing { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(-.3deg); } }
@keyframes bzWob { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

@media (max-width: 860px) {
  .bz-skin-board .bz-task, .bz-skin-board .bz-pred, .bz-skin-board .bz-map, .bz-skin-board .bz-chart,
  .bz-skin-board .bz-bk-step, .bz-skin-board .bz-auth-card { border-width: 8px; }
  .bz-skin-board .bz-task { padding: 18px; }
  .bz-skin-board .bz-cond { font-size: 20px; }
  .bz-skin-board .bz-menu[open] > .bz-menu-body { background: var(--bz-bg); }
  .bz-skin-board .bz-menu-btn { border: 2px solid var(--bz-ink); }
}
@media (max-width: 480px) {
  .bz-skin-board .bz-task, .bz-skin-board .bz-pred, .bz-skin-board .bz-map, .bz-skin-board .bz-chart,
  .bz-skin-board .bz-bk-step, .bz-skin-board .bz-auth-card { border-width: 6px; }
  .bz-skin-board .bz-task { padding: 14px; }
  .bz-skin-board .bz-answer input { width: 100%; }
}