/* ============================================================ Репетитор Влада — тёплый, спокойный интерфейс для ребёнка 9–10 лет. Mobile-first (от 360px), крупная типографика (база 20px), тап-зоны не меньше 48px. Светлая и тёмная темы — самостоятельные палитры, все цвета только через переменные. Только системные шрифты, никаких внешних ресурсов и CDN. Тема: ; «авто» следует prefers-color-scheme (см. js/theme.js в составе settings.js). ============================================================ */ :root { color-scheme: light; /* поверхность — тёплый нейтральный, не больнично-белый */ --bg: #f7f5f0; --surface: #ffffff; --surface-2: #efece3; --line: #e3ded2; --line-strong: #cfc8b6; /* текст */ --ink: #262420; --ink-soft: #4b473e; --muted: #6b665a; /* акцент — спокойный зелёный, не корпоративный синий */ --accent: #2e7d5b; --accent-strong: #24634a; --on-accent: #ffffff; --accent-text: #24634a; --accent-soft: #e6f2ec; --accent-soft-text: #1f5943; /* правильный ответ — спокойная зелёная отметка */ --ok-mark: #2e7d5b; --ok-soft: #e6f2ec; --ok-soft-text: #1f5943; /* «давай разберём» — тёплая охра, не тревожный красный */ --retry-mark: #a8641f; --retry-soft: #f8ecda; --retry-soft-text: #7a4712; /* редкий настоящий сбой (сеть, лимит) — приглушённый, не кричащий */ --danger: #9c3b2e; --danger-soft: #f6e6e2; --danger-soft-text: #7c2e23; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --radius-lg: 18px; --radius: 14px; --radius-sm: 10px; --shadow-1: 0 1px 2px rgba(38, 36, 32, 0.06); --shadow-2: 0 2px 6px rgba(38, 36, 32, 0.08), 0 8px 20px -10px rgba(38, 36, 32, 0.16); --focus: #2e7d5b; --tap: 48px; --z-header: 10; --z-popup: 60; --z-toast: 80; } /* Тёмная тема — самостоятельная палитра (тёплый графит + светлая зелень). */ :root[data-theme='dark'] { color-scheme: dark; --bg: #1b1a17; --surface: #242220; --surface-2: #2d2b27; --line: #3a382f; --line-strong: #4c4939; --ink: #f1efe9; --ink-soft: #cfccc1; --muted: #a19c8c; --accent: #6fcda0; --accent-strong: #8fe0b8; --on-accent: #0d2118; --accent-text: #8fe0b8; --accent-soft: #1c3229; --accent-soft-text: #a7e8c6; --ok-mark: #6fcda0; --ok-soft: #1c3229; --ok-soft-text: #a7e8c6; --retry-mark: #e0a45c; --retry-soft: #33291a; --retry-soft-text: #f0c187; --danger: #e08a7a; --danger-soft: #3a2420; --danger-soft-text: #f2b3a5; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, 0.5); --focus: #8fe0b8; } @media (prefers-color-scheme: dark) { :root[data-theme='auto'], :root:not([data-theme]) { color-scheme: dark; --bg: #1b1a17; --surface: #242220; --surface-2: #2d2b27; --line: #3a382f; --line-strong: #4c4939; --ink: #f1efe9; --ink-soft: #cfccc1; --muted: #a19c8c; --accent: #6fcda0; --accent-strong: #8fe0b8; --on-accent: #0d2118; --accent-text: #8fe0b8; --accent-soft: #1c3229; --accent-soft-text: #a7e8c6; --ok-mark: #6fcda0; --ok-soft: #1c3229; --ok-soft-text: #a7e8c6; --retry-mark: #e0a45c; --retry-soft: #33291a; --retry-soft-text: #f0c187; --danger: #e08a7a; --danger-soft: #3a2420; --danger-soft-text: #f2b3a5; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, 0.5); --focus: #8fe0b8; } } /* ---------- база ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); font-size: 20px; line-height: 1.5; color: var(--ink); background: var(--bg); min-height: 100vh; } button { font: inherit; color: inherit; } a { color: var(--accent-text); text-decoration: none; } h1, h2, h3, p { margin: 0 0 0.6em; } ::selection { background: var(--accent-soft); color: var(--ink); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } .noscript-note, .app-loading, .app-fatal { padding: 3rem 1.25rem; text-align: center; color: var(--muted); } /* ---------- каркас экрана ---------- */ .screen { max-width: 640px; margin: 0 auto; padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px)); animation: screen-in 0.22s ease-out both; } @keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .screen-header { display: flex; align-items: center; gap: 12px; min-height: var(--tap); margin-bottom: 12px; } .screen-header .back-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border-radius: var(--radius-sm); color: var(--ink); } .screen-header .back-btn:hover { background: var(--surface-2); } .screen-header-titles { flex: 1; min-width: 0; } .screen-title { font-size: 1.35rem; font-weight: 700; margin: 0; } .screen-subtitle { color: var(--muted); font-size: 0.9rem; margin-top: 2px; } .screen-header-right { flex: none; } .icon { display: inline-flex; width: 1.35em; height: 1.35em; } .icon svg { width: 100%; height: 100%; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: var(--tap); min-width: var(--tap); padding: 0.6em 1.3em; border: 1px solid transparent; border-radius: var(--radius); font-weight: 600; font-size: 1rem; cursor: pointer; text-align: center; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-1); } .btn-primary:hover { background: var(--accent-strong); } .btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover { background: var(--surface-2); } .btn-block { display: flex; width: 100%; } /* ---------- карточки и текстовые блоки ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-1); } .card + .card { margin-top: 16px; } .muted { color: var(--muted); } .notice { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px; color: var(--ink-soft); font-size: 0.95rem; } .link-list { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .link-list a { display: flex; align-items: center; min-height: var(--tap); padding: 4px 2px; font-weight: 600; } .link-list a:hover { color: var(--accent-strong); } /* ---------- toast ---------- */ #toast-host { position: fixed; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; pointer-events: none; z-index: var(--z-toast); } .toast { pointer-events: auto; max-width: 90vw; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.95rem; box-shadow: var(--shadow-2); } :root[data-theme='dark'] .toast { background: var(--surface-2); color: var(--ink); } /* ---------- настройки ---------- */ .field { margin-bottom: 20px; } .field-label { display: block; font-weight: 600; margin-bottom: 8px; } .segmented { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; } .segmented button { flex: 1; min-height: var(--tap); border: none; background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 600; } .segmented button + button { border-left: 1px solid var(--line-strong); } .segmented button[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); } input[type='range'] { width: 100%; height: var(--tap); accent-color: var(--accent); } /* ---------- домашний экран ---------- */ .home-hero { text-align: center; padding: 8px 0 4px; } .home-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; } .home-lead { color: var(--muted); font-size: 1.05rem; } /* ---------- отладка (экран #/debug/speech, П-3) ---------- */ .settings-group { margin-bottom: 24px; } .settings-group-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 10px; } .settings-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .btn-sm { min-height: 36px; padding: 0.4em 0.9em; font-size: 0.9rem; } .btn-active { background: var(--accent); color: var(--on-accent); } .debug-log { display: block; max-width: 100%; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; overflow-x: auto; max-height: 220px; overflow-y: auto; } .stt-banner { background: var(--retry-soft); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; } .stt-banner-text { color: var(--retry-soft-text); font-size: 0.95rem; } /* ---------- брейкпоинты (только раскладка, не кегль) ---------- */ @media (min-width: 768px) { .screen { padding-top: 32px; } } /* ============================================================ Английский: слова и попап (пакет П-9, план v1 §3.1, §3.2) ============================================================ */ .en-units-body { margin-top: 4px; } .origin-badge { display: inline-flex; align-items: center; padding: 4px 12px; margin-bottom: 16px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-soft-text); font-size: 0.85rem; font-weight: 700; } .unit-list { display: flex; flex-direction: column; gap: 12px; } .unit-card { padding: 16px 18px; } .unit-card-title { font-size: 1.15rem; font-weight: 700; } .unit-card-title-en { color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; } .unit-card-actions { display: flex; gap: 10px; flex-wrap: wrap; } .unit-card-actions .btn { flex: 1; min-width: 120px; } /* ---------- карточка слова (#/en/:id/words) ---------- */ .word-card { text-align: center; } .word-emoji { font-size: 2.2rem; margin-bottom: 6px; } .word-big { font-size: 2.6rem; font-weight: 800; line-height: 1.15; word-break: break-word; } .word-ru { font-size: 1.35rem; color: var(--ink-soft); margin: 10px 0 18px; } .word-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .word-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; } .word-nav .btn { flex: none; min-width: 100px; } .word-counter { color: var(--muted); font-weight: 600; text-align: center; flex: 1; } /* ---------- строка слогов (карточка слова + попап) ---------- */ .syllable-block { margin: 14px 0; } .syl-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; } .syl-row-en { font-size: 1.9rem; font-weight: 800; } .syl-row-ru { font-size: 1.05rem; color: var(--muted); margin-top: 2px; } .syl { border: none; background: transparent; color: inherit; font: inherit; padding: 2px 4px; border-radius: var(--radius-sm); cursor: pointer; min-height: var(--tap); min-width: var(--tap); } .syl-ru { padding: 0 4px; } .syl-dot { color: var(--muted); align-self: center; } .syl-stress { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .syl.syl-active, .syl-ru.syl-active { background: var(--accent); color: var(--on-accent); border-radius: var(--radius-sm); } .syl.syl-done, .syl-ru.syl-done { color: var(--accent-text); } /* ---------- попап слова (порт word-line.js / showWordPopup Гермеса) ---------- */ .sent-words { display: inline; } .w { border-radius: 4px; padding: 1px 2px; cursor: pointer; transition: background-color 0.12s ease; -webkit-tap-highlight-color: transparent; } .w:hover, .w:active { background: var(--accent-soft); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); flex: none; border: none; background: transparent; color: var(--ink); border-radius: var(--radius-sm); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .word-popup { position: fixed; z-index: var(--z-popup); width: min(320px, calc(100vw - 16px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 14px 16px; animation: popup-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes popup-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } } .popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .popup-word { font-size: 1.35rem; font-weight: 800; } .popup-ru { margin: 4px 0 10px; font-size: 1rem; color: var(--ink-soft); } .popup-ru-missing { color: var(--muted); font-style: italic; } .popup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .popup-actions .btn { flex: 1; white-space: nowrap; } /* ---------- экран чтения (#/en/:id/read) ---------- */ .section-title { font-size: 1.05rem; font-weight: 700; margin: 20px 0 10px; } .read-row { padding: 10px 0; border-bottom: 1px solid var(--line); } .read-context { color: var(--muted); font-size: 0.85rem; margin-bottom: 2px; } .read-en { font-size: 1.15rem; } .read-ru { color: var(--ink-soft); font-size: 0.98rem; margin-top: 2px; } .read-text { margin-bottom: 16px; } .read-text-title { font-size: 1.1rem; font-weight: 700; } .read-text-title-en { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; } .read-line { padding: 6px 4px; border-radius: var(--radius-sm); font-size: 1.1rem; } .read-line-active { background: var(--accent-soft); } /* ============================================================ П-25 — «Учебник на экране»: страница как в книге + карточка помощи под заданием. Отдельная палитра-неймспейс `--bp-*` (book page), НЕ пересекается с --accent/--ok-mark/--retry-mark выше (те остаются зелёными для существующих экранов «Тренировки» и П-9) — так авторский цвет учебника (синий, см. дизайн-v1.1.md) не перекрашивает уже сданные экраны. Токены и правила — см. docs/specs/дизайн-v1.1.md. Тёмная тема — самостоятельная палитра, тот же переключатель data-theme, что и выше. ============================================================ */ :root { --bp-bg: #f1ece4; --bp-surface: #ffffff; --bp-surface-2: #f5f9fe; --bp-line: #e2dbd0; --bp-line-strong: #cfc8b6; --bp-ink: #1f1d1a; --bp-ink-soft: #4a443c; --bp-muted: #6b655c; --bp-accent: #1e6fbf; --bp-accent-strong: #164f8a; --bp-on-accent: #ffffff; --bp-accent-soft: #f5f9fe; --bp-accent-soft-line: #cfe0f5; --bp-ok: #2e7d4f; --bp-ok-soft: #f3faf5; --bp-ok-soft-strong: #f0faf3; --bp-ok-line: #8fcba5; --bp-ok-line-strong: #bfe3cb; --bp-warn: #b45309; --bp-warn-text: #9a4a0b; --bp-warn-soft: #fff7ee; --bp-warn-line: #e8b98a; --bp-shadow-1: 0 1px 3px rgba(31, 29, 26, 0.08); --bp-shadow-2: 0 2px 8px rgba(31, 29, 26, 0.14); --bp-shadow-3: 0 8px 24px rgba(31, 29, 26, 0.18); --bp-radius-lg: 16px; --bp-radius: 14px; --bp-radius-sm: 12px; --bp-radius-page: 8px; --bp-tap: 48px; --bp-tap-card: 52px; --bp-tap-numpad: 56px; /* Геометрия страницы задаётся в JS (page-flow.js setWidth) через инлайн-стили полос (background-position/size, высоты) — это единственное разрешённое исключение из «никаких inline-стилей». */ --bp-caption-font: 11px; } :root[data-theme='dark'] { --bp-bg: #1b1a17; --bp-surface: #242220; --bp-surface-2: #1e2a38; --bp-line: #3a382f; --bp-line-strong: #4c4939; --bp-ink: #f1efe9; --bp-ink-soft: #cfccc1; --bp-muted: #a19c8c; --bp-accent: #6fb2ec; --bp-accent-strong: #90c6f2; --bp-on-accent: #0d2036; --bp-accent-soft: #1e2a38; --bp-accent-soft-line: #2f4a63; --bp-ok: #6fcda0; --bp-ok-soft: #1c3229; --bp-ok-soft-strong: #203a2f; --bp-ok-line: #3e6e52; --bp-ok-line-strong: #2f5a44; --bp-warn: #e0a45c; --bp-warn-text: #f0c187; --bp-warn-soft: #33291a; --bp-warn-line: #4a3b22; --bp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --bp-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4); --bp-shadow-3: 0 10px 26px rgba(0, 0, 0, 0.5); } @media (prefers-color-scheme: dark) { :root[data-theme='auto'], :root:not([data-theme]) { --bp-bg: #1b1a17; --bp-surface: #242220; --bp-surface-2: #1e2a38; --bp-line: #3a382f; --bp-line-strong: #4c4939; --bp-ink: #f1efe9; --bp-ink-soft: #cfccc1; --bp-muted: #a19c8c; --bp-accent: #6fb2ec; --bp-accent-strong: #90c6f2; --bp-on-accent: #0d2036; --bp-accent-soft: #1e2a38; --bp-accent-soft-line: #2f4a63; --bp-ok: #6fcda0; --bp-ok-soft: #1c3229; --bp-ok-soft-strong: #203a2f; --bp-ok-line: #3e6e52; --bp-ok-line-strong: #2f5a44; --bp-warn: #e0a45c; --bp-warn-text: #f0c187; --bp-warn-soft: #33291a; --bp-warn-line: #4a3b22; --bp-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35); --bp-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4); --bp-shadow-3: 0 10px 26px rgba(0, 0, 0, 0.5); } } /* ---------- Полка/экран прототипа ---------- */ .book-shelf { /* Переопределяет .screen (max-width:640px, margin:0 auto) — этот экран сам держит широкий режим (панель справа от 1024px), в отличие от остальных mobile-first экранов приложения. */ max-width: none; margin: 0; min-height: 100%; background: var(--bp-bg); color: var(--bp-ink); font-family: var(--font-ui); padding: 12px 12px 32px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; } @media (min-width: 1024px) { .book-shelf { padding: 16px 24px 40px; } } .book-shelf-switch { display: flex; gap: 8px; flex-wrap: wrap; } .book-shelf-switch button { height: var(--bp-tap); padding: 0 16px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; } .book-shelf-switch button[aria-pressed='true'] { border-color: var(--bp-accent); color: var(--bp-accent); background: var(--bp-accent-soft); } /* ---------- Шапка страницы (.page-top) ---------- */ .page-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; padding: 6px 8px 6px 14px; background: var(--bp-surface); border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-1); flex-wrap: wrap; } .page-top-title { display: flex; align-items: center; gap: 10px; color: var(--bp-accent); } .page-top-title strong { font-size: 18px; font-weight: 800; color: var(--bp-ink); } .page-top-title span { font-size: 15px; font-weight: 700; color: var(--bp-muted); } .page-top-nav { display: flex; align-items: center; gap: 4px; } .page-top-nav button { width: 44px; height: 44px; border: 0; border-radius: var(--bp-radius-sm); background: var(--bp-bg); color: var(--bp-ink); font-size: 20px; font-weight: 800; cursor: pointer; } .page-top-nav span { min-width: 60px; text-align: center; font-size: 17px; font-weight: 800; } .page-top-jump { display: flex; align-items: center; gap: 6px; } .page-top-jump label { font-size: 14px; font-weight: 700; color: var(--bp-muted); } .page-top-jump input { width: 56px; height: 40px; box-sizing: border-box; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); font: inherit; font-size: 17px; font-weight: 800; text-align: center; color: var(--bp-ink); background: var(--bp-surface); } .page-top-captions { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--bp-radius-sm); border: 2px solid var(--bp-line); background: var(--bp-surface); color: var(--bp-muted); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .page-top-captions[aria-pressed='true'] { border-color: var(--bp-accent); color: var(--bp-accent); } /* Н-2 приёмки 21.09.2026: на 390px полная подпись не помещалась в кнопку и вылезала за её границы. Текст в одну строку, на узком экране — короткий вариант («Подписи · выкл») и мельче кегль. */ .page-top-captions { white-space: nowrap; flex: 0 0 auto; } .page-top-captions .cap-short { display: none; } @media (max-width: 480px) { .page-top-captions { font-size: 13px; padding: 0 10px; height: 36px; } .page-top-captions .cap-full { display: none; } .page-top-captions .cap-short { display: inline; } } .page-top-zoom { display: flex; gap: 4px; } .page-top-zoom button { height: 40px; padding: 0 12px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } .page-top-zoom button[aria-pressed='true'] { border-color: var(--bp-accent); color: var(--bp-accent); background: var(--bp-accent-soft); } .page-top-hint { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 15px; font-weight: 700; color: var(--bp-muted); } .page-top-hint .icon { color: var(--bp-accent); flex-shrink: 0; } .page-open-full { align-self: flex-start; height: 44px; padding: 0 16px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } /* ---------- Страница-поток (.page-flow) ---------- */ .page-flow-scroll { width: 100%; overflow-x: auto; } .page-flow { display: flex; flex-direction: column; border-radius: var(--bp-radius-page); overflow: hidden; box-shadow: var(--bp-shadow-2); background: var(--bp-surface); } .slice { position: relative; background-repeat: no-repeat; background-color: var(--bp-surface); } /* ---------- Хит-зоны заданий и слов ---------- */ /* П-31б: хит-зона стоит строго по bbox задания (left/top/width/height — инлайн из page-flow.js), не во всю полосу — было `inset:0`. */ .ex-hit { position: absolute; display: block; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 10px; transition: background-color 120ms ease; } .ex-hit:hover, .ex-hit:focus-visible { background: rgba(30, 111, 191, 0.08); } .ex-hit:focus-visible { outline: 3px solid var(--bp-accent); outline-offset: -3px; } /* Кружок-номер в левом верхнем углу зоны задания (П-31б п.3) — виден по наведению/касанию, постоянно — только у выбранного (`aria-pressed`). */ .ex-num-badge { position: absolute; left: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: var(--bp-accent); color: var(--bp-on-accent); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; box-shadow: var(--bp-shadow-1); opacity: 0; transform: scale(0.85); transition: opacity 120ms ease, transform 120ms ease; pointer-events: none; } .ex-hit:hover .ex-num-badge, .ex-hit:focus-visible .ex-num-badge, .ex-hit--peek .ex-num-badge, .ex-hit[aria-pressed='true'] .ex-num-badge { opacity: 1; transform: scale(1); } /* Метка «правило» на полях теории (П-31б п.1) — тап показывает правило в рабочей области/карточке, теория саму страницу не режет. */ .theory-tab { position: absolute; display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 10px; border: 2px solid var(--bp-accent); border-radius: 999px; background: var(--bp-surface); color: var(--bp-accent); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; } .theory-tab:hover, .theory-tab:focus-visible { background: var(--bp-accent-soft); } .ex-hit[aria-pressed='true'] { background: rgba(30, 111, 191, 0.05); } .word-hit { position: absolute; border: 0; margin: 0; padding: 0; background: transparent; border-radius: 6px; cursor: pointer; } .word-hit:hover, .word-hit:focus-visible, .word-hit[aria-pressed='true'] { background: rgba(30, 111, 191, 0.18); box-shadow: 0 0 0 2px rgba(30, 111, 191, 0.55); } :root[data-theme='dark'] .word-hit:hover, :root[data-theme='dark'] .word-hit:focus-visible, :root[data-theme='dark'] .word-hit[aria-pressed='true'] { background: rgba(111, 178, 236, 0.22); box-shadow: 0 0 0 2px rgba(111, 178, 236, 0.6); } .word-hit:focus-visible { outline: none; } /* Русская транслитерация под словом (§ заказчик 21.09.2026) — только отображение, не хит-зона: pointer-events выключен, чтобы подпись никогда не перехватывала тап по слову или по заданию под ней. */ .word-caption { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; white-space: nowrap; /* Подпись целиком помещается в зазор под словом: высоту и кегль считает ui/word-layer.js (captionFitForGap), лишнее по ширине режется — две соседние подписи не слипаются в одно слово (Н-1 приёмки 21.09.2026). */ overflow: hidden; font-size: var(--bp-caption-font); line-height: 1.15; font-weight: 800; color: var(--bp-accent); background: rgba(255, 255, 255, 0.88); border-radius: 3px; } :root[data-theme='dark'] .word-caption { color: var(--bp-accent-strong); background: rgba(27, 26, 23, 0.82); } /* Видимая реакция на озвучку (отчёт user-tester 21.09.2026: тап без звука выглядел «мёртвым») — на скане (.word-hit/.word-caption) и в строке чтения карточки (.reading-word), на время произнесения слова/пока идёт «Прочитать всё» по текущему предложению. */ .word-hit.is-speaking, .reading-word.is-speaking { background: rgba(30, 111, 191, 0.22); box-shadow: 0 0 0 2px var(--bp-accent); transition: background 150ms ease; } .word-caption.is-speaking { box-shadow: 0 0 0 2px var(--bp-accent); } :root[data-theme='dark'] .word-hit.is-speaking, :root[data-theme='dark'] .reading-word.is-speaking { background: rgba(111, 178, 236, 0.28); box-shadow: 0 0 0 2px var(--bp-accent-strong); } @media (prefers-reduced-motion: reduce) { .word-hit.is-speaking, .reading-word.is-speaking { transition: none; } } /* ---------- Карточка помощи под заданием (.ex-card) ---------- */ .ex-card { box-sizing: border-box; width: 100%; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bp-accent-soft); border-top: 2px solid var(--bp-accent-soft-line); border-bottom: 2px solid var(--bp-accent-soft-line); } .ex-card--done { background: var(--bp-ok-soft); border-color: var(--bp-ok-line-strong); } .ex-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ex-card-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ex-card-title strong { font-size: 20px; font-weight: 800; color: var(--bp-accent); } .ex-card--done .ex-card-title strong, .ex-card-done-title { color: var(--bp-ok); } .ex-card-title span { font-size: 16px; font-weight: 700; color: var(--bp-muted); } .ex-card-close { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--bp-radius-sm); background: var(--bp-surface); border: 2px solid var(--bp-line); color: var(--bp-ink); font-size: 20px; font-weight: 800; cursor: pointer; } .ex-card-body { display: flex; flex-direction: column; gap: 14px; } .ex-card-done-banner { display: flex; align-items: center; gap: 12px; color: var(--bp-ok); font-size: 20px; font-weight: 800; } .ex-card-done-banner .icon { color: var(--bp-ok); } /* Строки-ответы уравнений/подписей */ .ex-card__row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--bp-surface); border: 2px solid var(--bp-line); border-radius: var(--bp-radius); } .ex-card__row--ok { border-color: var(--bp-ok-line); } .ex-card__row--warn { border-color: var(--bp-warn-line); } .ex-card__row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ex-card__row-label { font-size: 20px; font-weight: 800; color: var(--bp-accent); min-width: 24px; } .ex-card__row-eq { font-size: 20px; font-weight: 700; min-width: 128px; } .ex-card__row-eq-label { font-size: 20px; font-weight: 700; } .ex-card__row input[type='text'] { width: 76px; height: 48px; box-sizing: border-box; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); font: inherit; font-size: 22px; font-weight: 800; text-align: center; color: var(--bp-ink); background: var(--bp-surface); } .ex-card__row--ok input[type='text'] { border-color: var(--bp-ok); background: var(--bp-ok-soft-strong); color: var(--bp-ok); } .ex-card__row--warn input[type='text'] { border-color: var(--bp-warn); background: var(--bp-warn-soft); } .ex-card__row-note { font-size: 16px; font-weight: 700; color: var(--bp-muted); padding-left: 34px; } .ex-card__row--ok .ex-card__row-note { display: flex; align-items: center; gap: 8px; color: var(--bp-ok); font-weight: 800; padding-left: 0; } .ex-card__row--warn .ex-card__row-note { color: var(--bp-warn-text); padding-left: 0; } .ex-card__row-choice { height: 46px; padding: 0 16px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 20px; font-weight: 800; cursor: pointer; } .ex-card__row-choice[aria-pressed='true'].is-ok { border-color: var(--bp-ok); background: var(--bp-ok-soft-strong); } .ex-card__row-choice[aria-pressed='true'].is-warn { border-color: var(--bp-warn); background: var(--bp-warn-soft); } .ex-card__row-icon-btn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-accent); cursor: pointer; } .ex-card__row-text-btn { height: 46px; padding: 0 14px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; } /* Состояние «думаю» — скелетон вместо застывшего экрана (план §1.5) */ .ex-card__row--thinking .ex-card__row-note { display: flex; align-items: center; gap: 8px; color: var(--bp-accent); padding-left: 0; } .skeleton-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bp-accent); display: inline-block; animation: bp-pulse 1s ease-in-out infinite; } .skeleton-dot:nth-child(2) { animation-delay: 0.15s; } .skeleton-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes bp-pulse { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .skeleton-dot { animation: none; opacity: 0.7; } } /* Нет сети / дневной лимит — приглушённая карточка-нотис, не тревожная */ .state-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--bp-radius); border: 2px solid var(--bp-line); background: var(--bp-surface); color: var(--bp-ink-soft); font-size: 16px; font-weight: 700; } .state-banner .icon { color: var(--bp-muted); flex-shrink: 0; } /* Подсказка и похожий пример */ .hint-step, .similar-example { display: flex; gap: 12px; padding: 14px 16px; background: var(--bp-surface); border-radius: var(--bp-radius); border: 2px solid var(--bp-accent-soft-line); } .similar-example { border-color: var(--bp-line); } .hint-step .icon { color: var(--bp-accent); flex-shrink: 0; margin-top: 2px; } .similar-example .icon { color: var(--bp-muted); flex-shrink: 0; margin-top: 2px; } .hint-step-body, .similar-example-body { display: flex; flex-direction: column; gap: 4px; } .hint-step-label { font-size: 16px; font-weight: 800; color: var(--bp-accent); } .similar-example-label { font-size: 16px; font-weight: 800; color: var(--bp-muted); } .hint-step-text, .similar-example-text { font-size: 19px; font-weight: 600; line-height: 1.4; } .hint-more-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .hint-more-row .btn-sm-count { font-size: 15px; font-weight: 700; color: var(--bp-muted); } /* Спросить про это задание */ .ask-row { display: flex; align-items: center; gap: 10px; } .ask-row input[type='text'] { flex-grow: 1; height: var(--bp-tap-card); box-sizing: border-box; padding: 0 16px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius); font: inherit; font-size: 17px; font-weight: 600; color: var(--bp-ink); background: var(--bp-surface); } .ask-row button { width: var(--bp-tap-card); height: var(--bp-tap-card); flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--bp-radius); background: var(--bp-accent); color: var(--bp-on-accent); cursor: pointer; } .ex-card-footnote { font-size: 15px; font-weight: 700; color: var(--bp-muted); } /* Кнопки-действия карточки (Проверить / Ещё подсказка / Прочитать всё…) */ .ex-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ex-card-actions .btn-book-primary { display: flex; align-items: center; justify-content: center; height: var(--bp-tap-card); padding: 0 26px; border: 0; border-radius: var(--bp-radius); background: var(--bp-accent); color: var(--bp-on-accent); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; } .ex-card-actions .btn-book-ghost { display: flex; align-items: center; gap: 8px; height: var(--bp-tap-card); padding: 0 20px; border: 2px solid var(--bp-accent); border-radius: var(--bp-radius); background: var(--bp-surface); color: var(--bp-accent); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; } .ex-card-actions .btn-book-outline { display: flex; align-items: center; gap: 8px; height: var(--bp-tap-card); padding: 0 20px; border: 2px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 18px; font-weight: 800; cursor: pointer; } .ex-card-done-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .ex-card-done-cell { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; background: var(--bp-surface); border: 2px solid var(--bp-ok-line); border-radius: var(--bp-radius); font-size: 18px; font-weight: 800; } .ex-card-done-cell span:last-child { color: var(--bp-ok); } .ex-chat { display: flex; flex-direction: column; gap: 10px; } .ex-chat-bubble { max-width: 90%; padding: 12px 16px; border-radius: 16px; font-size: 17px; font-weight: 600; line-height: 1.4; } .ex-chat-bubble--child { align-self: flex-end; background: var(--bp-surface); border: 2px solid var(--bp-line); border-radius: 16px 16px 4px 16px; } .ex-chat-bubble--tutor { align-self: flex-start; background: var(--bp-surface); border: 2px solid var(--bp-accent-soft-line); border-radius: 16px 16px 16px 4px; } /* Строка чтения — английский, слово + русская подпись рядом (§ заказчик 21.09.2026: «текст задания переверстан крупно, под каждым словом подпись»). Отдельно от .word-caption на скане — здесь текст набран заново, а не наложен на картинку. */ .reading-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .reading-line { display: flex; flex-wrap: wrap; gap: 6px; } .reading-word { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 7px; border-radius: 8px; background: var(--bp-surface); border: 1.5px solid var(--bp-line); } .reading-word-en { font-size: 19px; font-weight: 700; } .reading-word-ru { font-size: 14px; font-weight: 800; color: var(--bp-accent); } /* ---------- «Читаю сам» (П-34в, ui/read-aloud.js) ---------- */ .read-aloud { display: flex; flex-direction: column; gap: 8px; } .read-aloud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .read-aloud-head { font-size: 15px; font-weight: 800; color: var(--bp-accent); } .read-aloud-controls { display: flex; gap: 6px; flex-wrap: wrap; } .read-aloud-mic[aria-pressed='true'], .read-aloud-mic.is-listening { background: var(--bp-warn); } .read-aloud-chips { display: flex; flex-wrap: wrap; gap: 5px; } .read-aloud-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 7px; border-radius: 8px; border: 1.5px solid var(--bp-line); background: var(--bp-surface); font: inherit; font-size: 17px; font-weight: 700; color: var(--bp-ink); cursor: pointer; } .read-aloud-chip--ok { border: 2px solid var(--bp-ok-line); background: var(--bp-ok-soft-strong); } .read-aloud-chip--active { border: 2px solid var(--bp-warn-line); background: var(--bp-warn-soft); } .read-aloud-hint { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--bp-warn-soft); border: 1.5px solid var(--bp-warn-line); border-radius: 10px; } .read-aloud-hint-label { font-size: 14px; font-weight: 800; color: var(--bp-warn-text); } .read-aloud-hint-text { font-size: 15px; font-weight: 600; line-height: 1.35; } .read-aloud-transcription { color: var(--bp-accent); font-weight: 800; } .read-aloud-syllables { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .read-aloud-verdict { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--bp-line); font-size: 15px; font-weight: 700; } .read-aloud-verdict--ok { border-color: var(--bp-ok-line); color: var(--bp-ok); } .read-aloud-verdict--retry { color: var(--bp-muted); } .read-aloud-note { font-size: 15px; font-weight: 600; color: var(--bp-muted); } .read-aloud-footnote { font-size: 14px; font-weight: 600; color: var(--bp-muted); } /* ---------- Числовая клавиатура (.numpad) ---------- */ .numpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 320px; } .numpad button { height: var(--bp-tap-numpad); border: 2px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-surface); color: var(--bp-ink); font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; } .numpad button:active { background: var(--bp-accent-soft); border-color: var(--bp-accent); } .numpad-back { color: var(--bp-warn-text) !important; } .numpad-done { grid-column: span 3; background: var(--bp-accent) !important; border-color: var(--bp-accent) !important; color: var(--bp-on-accent) !important; } /* ---------- Вход (#/login, П-36) ---------- */ .login-screen { padding-top: 48px; } .login-form { display: flex; flex-direction: column; gap: 16px; } .login-field { display: flex; flex-direction: column; } .login-pw-row { display: flex; align-items: stretch; gap: 8px; } .login-input { flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; font-size: 1.15rem; font-family: var(--font-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); } .login-input:focus-visible { border-color: var(--focus); } .login-toggle { flex: none; min-height: 56px; padding: 0 16px; font-weight: 600; font-size: 0.95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; } .login-toggle:hover { background: var(--surface-2); } .login-submit { min-height: 56px; font-size: 1.1rem; } .login-error { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger-soft-text); font-size: 0.95rem; } /* ---------- Широкий экран (≥1024px): панель помощи справа (заказчик 21.09.2026) — страница остаётся целой, задание обводится рамкой, панель приклеена к правому краю и выровнена по верху задания. ---------- */ .page-flow-row { width: 100%; } @media (min-width: 1024px) { .page-flow-row { display: flex; gap: 24px; align-items: flex-start; } .page-flow-row .page-flow-scroll { flex: 0 0 auto; width: auto; } } .ex-frame { position: absolute; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 3px var(--bp-accent), 0 0 0 8px rgba(30, 111, 191, 0.15); } .ex-panel-wrap { position: sticky; top: 16px; width: 420px; max-width: 44vw; flex-shrink: 0; } .ex-panel-wrap .ex-card { position: relative; border: 3px solid var(--bp-accent); border-radius: var(--bp-radius-lg); border-top: 3px solid var(--bp-accent); border-bottom: 3px solid var(--bp-accent); box-shadow: var(--bp-shadow-2); } .ex-panel-badge { position: absolute; left: -18px; top: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--bp-accent); color: var(--bp-on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; box-shadow: var(--bp-shadow-1); } .ex-panel-connector { position: absolute; left: -24px; top: 30px; width: 24px; height: 4px; background: var(--bp-accent); } /* Номер страницы — поле ввода числа (заказчик 21.09.2026), не текст */ .page-top-nav input[type='text'] { width: 64px; height: 44px; box-sizing: border-box; border: 2px solid var(--bp-accent); border-radius: var(--bp-radius-sm); font: inherit; font-size: 20px; font-weight: 800; text-align: center; color: var(--bp-ink); background: var(--bp-surface); } .page-numpad-dock { display: flex; justify-content: center; } /* ---------- П-31: полка книг (.shelf-*) ---------- */ .shelf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; } .shelf-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; } .shelf-card-cover { width: 100%; min-height: 120px; border-radius: var(--bp-radius); overflow: hidden; box-shadow: var(--bp-shadow-2); background: var(--bp-surface); } .shelf-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .shelf-card-body { display: flex; flex-direction: column; gap: 2px; } .shelf-card-title { font-size: 17px; font-weight: 800; } .shelf-card-kind, .shelf-card-status { font-size: 14px; font-weight: 700; color: var(--bp-muted); } /* ---------- П-31: книга (.book-*) ---------- */ .book-body { display: flex; flex-direction: column; gap: 16px; } .book-continue { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; border: 2px solid var(--bp-accent-soft-line); background: var(--bp-accent-soft); } .book-continue strong { color: var(--bp-accent); font-size: 18px; } .book-jump { display: flex; flex-wrap: wrap; gap: 16px; } .book-jump .field { display: flex; align-items: center; gap: 10px; } .book-jump input { width: 96px; height: var(--bp-tap); box-sizing: border-box; border: 2px solid var(--bp-line); border-radius: var(--bp-radius-sm); font: inherit; font-size: 20px; font-weight: 800; text-align: center; background: var(--bp-surface); color: var(--bp-ink); } .book-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; } .book-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; font-size: 13px; font-weight: 700; } .book-thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--bp-radius-sm); border: 2px solid var(--bp-line); background: var(--bp-surface); } .book-thumb-count { color: var(--bp-muted); font-weight: 600; } /* ---------- П-31: дом — карточки предметов и «Продолжить» ---------- */ .home-subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } /* Н-6 приёмки 21.09.2026: общее правило `.card + .card { margin-top: 16px }` опускало вторую карточку ряда — карточки шли вразнобой по верхнему краю. */ .home-subjects .card + .card { margin-top: 0; } .home-subject-card { display: flex; flex-direction: column; gap: 4px; min-height: 120px; justify-content: center; text-decoration: none; color: inherit; } .home-subject-card strong { font-size: 20px; } .home-subject-card span { color: var(--bp-muted); font-size: 14px; font-weight: 700; } .home-continue { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; border: 2px solid var(--bp-accent-soft-line); background: var(--bp-accent-soft); } .home-continue strong { color: var(--bp-accent); } /* ---------- П-31: рабочая область во всю высоту страницы (.work-area) ---- Требование заказчика ~17:00 (план §0б п.9б): панель справа выровнена со страницей по верху и низу — `align-self: stretch` растягивает внешний `.work-area` до высоты `.page-flow-scroll` (flex row, см. ниже), а сама видимая карточка внутри держится у верха через `position: sticky` на `.work-area-sticky` при прокрутке длинной страницы. */ .page-flow-row.has-work-area { position: relative; } @media (min-width: 1024px) { .page-flow-row.has-work-area { align-items: stretch; } } .work-area { width: 420px; max-width: 44vw; flex-shrink: 0; position: relative; } .work-area-sticky { position: sticky; top: 16px; box-sizing: border-box; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bp-surface); border: 2px solid var(--bp-line); border-radius: var(--bp-radius); box-shadow: var(--bp-shadow-2); } .work-area-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; } .work-area-head span:first-child { font-size: 16px; font-weight: 800; color: var(--bp-muted); } .work-area-progress { font-size: 15px; font-weight: 700; color: var(--bp-muted); } .work-area-badge { position: absolute; left: -18px; width: 36px; height: 36px; border-radius: 50%; background: var(--bp-accent); color: var(--bp-on-accent); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; box-shadow: var(--bp-shadow-1); } .work-area-slot .ex-card { border: 3px solid var(--bp-accent); border-radius: var(--bp-radius-lg); border-top: 3px solid var(--bp-accent); border-bottom: 3px solid var(--bp-accent); } .work-area-empty { padding: 20px 14px; text-align: center; color: var(--bp-muted); font-size: 16px; font-weight: 700; } .work-area-route { position: absolute; left: 0; top: 0; pointer-events: none; } /* ---------- П-31: прогресс-точка у решённых заданий (page-flow.js) ------- */ .ex-hit--done .ex-hit-dot { position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--bp-ok); box-shadow: 0 0 0 2px var(--bp-surface); } /* ---------- П-31: рамка вручную (страница без разметки, ui/manual-box.js) */ .manual-box-overlay { position: absolute; left: 0; top: 0; z-index: 2; cursor: crosshair; touch-action: none; } .manual-box-rect { position: absolute; border: 2px dashed var(--bp-accent); background: rgba(30, 111, 191, 0.12); border-radius: 6px; pointer-events: none; } /* ---------- П-38: родительский экран (#/parent) ---------- */ .home-parent-link { font-size: 0.85rem; color: var(--muted); min-height: auto; } /* ---------- П-37: дом — блок «Тренировка», сам экран #/train ---------- */ .home-train-card { display: flex; flex-direction: column; gap: 2px; min-height: 56px; justify-content: center; text-decoration: none; color: inherit; margin-top: 12px; } .home-train-card span { color: var(--muted); font-size: 0.85rem; font-weight: 600; } .train-menu-due { color: var(--muted); margin: 4px 0 16px; } .train-tile-list { display: flex; flex-direction: column; gap: 12px; } .train-tile { display: flex; flex-direction: column; gap: 4px; min-height: 56px; justify-content: center; text-align: left; width: 100%; font: inherit; } .train-tile span { color: var(--muted); font-size: 0.9rem; font-weight: 600; } .train-quiz-card { display: flex; flex-direction: column; gap: 12px; } .train-quiz-counter { color: var(--muted); font-weight: 700; margin: 0; } .train-quiz-prompt { font-size: 1.2rem; font-weight: 700; margin: 0; } .train-quiz-row { display: flex; flex-direction: column; gap: 8px; } .train-quiz-input { height: var(--tap); box-sizing: border-box; border: 2px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: 1.1rem; font-weight: 700; text-align: center; padding: 0 12px; background: var(--surface); color: var(--ink); } .train-quiz-note { margin: 0; font-weight: 700; } .train-quiz-note--ok { color: var(--ok-mark); } .train-quiz-note--retry { color: var(--retry-mark); } .train-quiz-hints { display: flex; flex-direction: column; gap: 6px; } .train-quiz-hint { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; margin: 0; font-size: 0.95rem; } .train-quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; } .train-quiz-summary { font-weight: 700; margin: 0 0 12px; } .train-words-counter { color: var(--muted); font-weight: 700; text-align: center; } .unit-card-badge { display: inline-block; color: var(--retry-mark); font-size: 0.85rem; font-weight: 700; margin-top: 2px; } /* вход по PIN — крупные точки-индикаторы, numpad.js уже даёт свою сетку */ .pin-card { display: flex; flex-direction: column; align-items: center; gap: 20px; } .pin-dots { display: flex; gap: 12px; } .pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; } .pin-dot-filled { background: var(--accent); border-color: var(--accent); } /* вкладки */ .parent-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; -webkit-overflow-scrolling: touch; } .parent-tab { flex: 0 0 auto; padding: 10px 14px; min-height: var(--tap); border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-weight: 600; white-space: nowrap; } .parent-tab[aria-selected='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .parent-tab-body { display: flex; flex-direction: column; gap: 16px; } .parent-card { display: flex; flex-direction: column; gap: 10px; } .parent-form { display: flex; flex-direction: column; gap: 14px; } .parent-checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 600; } /* график минут/заданий по дням */ .parent-chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; overflow-x: auto; } .parent-chart-col { flex: 1 0 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; } .parent-bar-pair { display: flex; align-items: flex-end; gap: 2px; height: 96px; width: 100%; justify-content: center; } .parent-bar { width: 6px; min-height: 2px; border-radius: 3px 3px 0 0; } .parent-bar-minutes { background: var(--accent); } .parent-bar-tasks { background: var(--retry-mark); } .parent-day-label { font-size: 0.7rem; color: var(--muted); } .parent-legend { display: flex; gap: 16px; font-size: 0.85rem; color: var(--muted); } .parent-legend-item { display: flex; align-items: center; gap: 6px; } .parent-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .parent-dot-minutes { background: var(--accent); } .parent-dot-tasks { background: var(--retry-mark); } /* книга → страница → задание */ .parent-book + .parent-book { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; } .parent-book-title { font-weight: 700; } .parent-page { margin-top: 6px; padding-left: 8px; } .parent-page-title { font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; } .parent-task-list { display: flex; flex-wrap: wrap; gap: 6px; } .parent-task-chip { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font-size: 0.85rem; } .parent-task-chip-wrong { background: var(--retry-soft); color: var(--retry-soft-text); } /* работа над ошибками */ .parent-topic { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .parent-topic:first-of-type { border-top: none; } .parent-topic-title { font-weight: 600; } /* расход ИИ */ .parent-cost-row { display: flex; flex-wrap: wrap; gap: 16px; } .parent-cost-item { flex: 1 1 140px; } .parent-cost-value { font-size: 1.3rem; font-weight: 700; } /* журнал вопросов */ .parent-log-item { padding: 10px 0; border-top: 1px solid var(--line); } .parent-log-item:first-of-type { border-top: none; } .parent-log-head { display: flex; justify-content: space-between; gap: 10px; } .parent-log-kind { font-weight: 600; } .parent-log-question { font-style: italic; margin-top: 4px; } .parent-log-answer { margin-top: 4px; } .parent-log-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 0.85rem; } .parent-badge { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 0.78rem; } .parent-badge-warn { background: var(--retry-soft); color: var(--retry-soft-text); } /* устройства */ .parent-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .parent-device:first-of-type { border-top: none; } .parent-device-label { font-weight: 600; display: flex; align-items: center; gap: 8px; } /* ---------- Экран ревью разметки (#/review/:book/:n, П-29б) ---------- */ .review-counter { margin: 4px 0 8px; font-weight: 600; color: var(--muted); } .review-zone { border: 3px solid transparent; box-sizing: border-box; } .review-zone--auto { border-color: var(--line-strong); } .review-zone--ok { border-color: var(--bp-ok); } .review-zone--fixed { border-color: var(--bp-warn); } .review-zone--hidden { border-color: var(--danger); background: rgba(156, 59, 46, 0.1); } .review-zone--selected { outline: 3px solid var(--bp-accent); outline-offset: -3px; } .review-zone-badge { position: absolute; top: 2px; left: 2px; min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 0.72rem; font-weight: 700; text-align: center; pointer-events: none; } .review-form-host { margin-top: 12px; } .review-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; } .review-form-instruction { color: var(--ink-soft); white-space: pre-wrap; } .review-field-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .review-field-row label { min-width: 120px; color: var(--muted); } .review-field-row input[type='text'], .review-field-row select { flex: 1; min-width: 160px; height: var(--tap); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .review-bbox-row { display: flex; flex-wrap: wrap; gap: 10px; } .review-bbox-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: var(--muted); } .review-bbox-field input { width: 100px; height: var(--tap); padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } .review-answer { border-top: 1px solid var(--line); padding-top: 8px; } .review-answer-label { font-weight: 600; color: var(--muted); } .review-answer-json { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px; font-size: 0.85rem; } .review-form-actions { display: flex; gap: 10px; justify-content: flex-end; } /* ---------- Работа над ошибками (`#/errors`, `#/errors/drill`, П-41б) ---------- */ /* Общие `.card`/`.btn`/`.notice`/`.word-card` — без книжного `--bp-*` неймспейса (`ui/ex-card.js`), тот доступен только внутри страницы книги. */ .errors-body { display: flex; flex-direction: column; gap: 14px; } .errors-summary { gap: 6px; } .errors-topic-list { display: flex; flex-direction: column; gap: 10px; } .errors-topic-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .errors-topic-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm); background: var(--retry-soft); color: var(--retry-soft-text); font-weight: 800; } .errors-topic-source { margin-left: auto; color: var(--muted); font-size: 0.9rem; } .errors-topic-rule { margin: 0; color: var(--ink-soft); } .errors-word-list { display: flex; flex-direction: column; gap: 8px; } .errors-word-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); } .errors-word-row:first-child { border-top: none; } .errors-word-en { font-weight: 800; } .errors-word-tr { color: var(--accent-text); font-weight: 700; } .errors-word-ru { color: var(--ink-soft); } .errors-actions { display: flex; flex-wrap: wrap; gap: 10px; } .errors-footnote { font-size: 0.9rem; } .errors-drill-counter { color: var(--muted); font-weight: 700; } .errors-result-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .errors-result-badge { color: var(--ok-mark); font-weight: 700; } .errors-result-badge--pending { color: var(--retry-mark); } .session-end-banner { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: var(--z-toast); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-2); } .session-end-banner span:first-child { flex: 1; min-width: 160px; } /* ---------- П-43: исправления по приёмке UI 21.09.2026 ------------------ Разбор дефектов — `docs/notes/приёмка-ui-2026-09-21.md`, что сделано — `docs/notes/исправления-приёмки-ui.md`. */ /* Дефект 5: служебные блоки («на полях», «?») — подпись словом, а не служебным номером, поэтому кружок-номер становится плашкой. */ .ex-num-badge--wide, .work-area-badge--wide { width: auto; min-width: 36px; padding: 0 10px; border-radius: 14px; font-size: 13px; white-space: nowrap; } .work-area-badge--wide { left: -10px; } /* Дефект 6: карточка задания прокручивается ВНУТРИ правой панели — окно 1280×900 и 1536×864 не получают собственной прокрутки, страница слева не растягивается под высоту карточки. */ @media (min-width: 1024px) { .work-area-sticky { max-height: calc(100vh - 32px); overflow: hidden; } .work-area-slot { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; padding-right: 4px; } .work-area-slot .ex-card { max-height: none; } } /* Дефект 16: «Что от меня хотят» — три строки и кнопка «ещё», кегль не крупнее самого условия задания. */ .hint-step--compact { padding: 10px 12px; } .hint-step--compact .hint-step-text { font-size: 17px; font-weight: 500; } .hint-step-text--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-clamp: 3; overflow: hidden; } /* Дефект 12: текстовый ответ английского задания — плейсхолдер «Впиши ответ» не обрезается (числовое поле математики остаётся узким). */ .ex-card__row input[type='text'].ex-card__row-input-text { width: 100%; max-width: 260px; text-align: left; padding: 0 12px; font-size: 19px; } /* Дефект 11: в карточке ошибки — само задание, правило страницы ниже под своей подписью. */ .errors-topic-task { display: flex; flex-direction: column; gap: 4px; } .errors-topic-task-label, .errors-topic-rule-label { font-size: 14px; font-weight: 800; color: var(--bp-muted); } .errors-topic-task-text { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; } .errors-topic-rule-box { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 2px solid var(--bp-line); } /* Дефект 12 «Читаю сам»: плашка деградации микрофона прячется пустой. */ .read-aloud-note[hidden] { display: none; }