/* ============================================================ DeepRepeat — стили Блок au-* : экраны авторизации, 1:1 по design_handoff_auth Остальное : внутренний экран /app (вне охвата handoff) ============================================================ */ /* Шрифт — СВОЙ, с нашего домена, а не с fonts.googleapis.com. Раньше приложение подключало JetBrains Mono с Google Fonts (публичные страницы уже давно возят его сами). Если внешний домен не доезжает — а в сети владельца уже блокируется github.com, — браузер молча уходит на первый запасной, ui-monospace. Это другой шрифт с другой метрикой: эталонная строка в нём 555.7 px против 480 px у JetBrains Mono, то есть на 16% шире. Интерфейс выглядит «растянутым», причём на публичных страницах остаётся правильным, и различие ничем не объясняется. Те же два файла, что у public.css: 45 КБ на оба, подрезаны до латиницы, кириллицы и типографики. Разъезжаться им нельзя — если меняете здесь, меняйте и там. */ /* Настоящих начертаний у нас два — 400 и 700, а интерфейс просит ещё 500, 600 и 650. Диапазоны раздают их так, чтобы вид НЕ поменялся против того, что отдавал Google Fonts: 400 → 400 как было 500 → 400 было настоящее 500; из двух имеющихся 400 ближе 600 → 700 как было (в наборе Google 600 тоже не было) 650, 700 → 700 как было Соблазн отдать 500 файлом 700 (так сделано в public.css, где вес 500 встречается один раз) здесь неверен: в приложении 500 стоит в двенадцати местах, включая слово на карточке занятия. Перевод их на 700 — это утолщение на два шага, заметное сразу; 400 отклоняется на один и в сторону, которая на моноширинном читается спокойнее. Диапазон, а не голое число, важен: он говорит браузеру взять готовые очертания вместо синтеза — искусственный bold на моноширинном грязный. */ @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; } :root { color-scheme: dark; --bg: #08090b; --panel: #101216; --line: rgba(255, 255, 255, 0.12); --text: #e9e7e2; --muted: #8a8a84; --soft: #57574f; --accent: oklch(0.74 0.09 var(--accent-h)); --accent-soft: oklch(0.74 0.09 var(--accent-h) / 0.14); --shadow: 0 30px 90px rgba(0, 0, 0, 0.34); /* ---------- Формат терминала (темы оформления) ---------- Единый семантический слой. Тему задаёт data-terminal-theme на (см. applyTerminalTheme). Меняется АТМОСФЕРА — поверхности (фоны) и оттенок акцента (--accent-h) — а статусные цвета (оранжевый «повторить», красный «ошибка», янтарный «предупреждение») и текстовая лестница остаются фиксированными: смысл интерфейса не зависит от темы. Значения :root — тема «Стандартный» (бирюзовый акцент, hue 165). Все акцентные oklch по коду используют var(--accent-h), поэтому одна правка hue пере-тонирует весь UI. */ --accent-h: 165; /* Поверхности (фоны) — их переопределяют темы. */ --surface-page: #0c0d0f; /* фон страницы / body */ --surface-page-2: #131417; /* верх радиального свечения страницы */ --surface-panel: #0f1013; /* окна/панели (au-window, dr-window) */ --surface-panel-2: #101116; /* боковые панели, календарь */ --surface-titlebar: #111216; /* строка заголовка окна */ --surface-footer: #0b0c0e; /* подвал */ --surface-inset: #0e0f13; /* поля ввода, вложенные поверхности */ --surface-raised: #15161b; /* модалки, поповеры */ } /* ---------- Премиум-темы (data-terminal-theme на ) ---------- Каждая тема переопределяет оттенок акцента (--accent-h) и набор поверхностей. Статусные цвета (оранжевый/красный/янтарный), текст и белопрозрачные границы не трогаются — читаемость и смысл сохраняются во всех темах. Размер, геометрия и типографика не меняются. Стандартная тема — отсутствие атрибута (:root). */ /* Графит — прохладный стальной. */ html[data-terminal-theme="graphite"] { --accent-h: 250; --surface-page: #16181c; --surface-page-2: #1e2126; --surface-panel: #191c21; --surface-panel-2: #1c2026; --surface-titlebar: #1d2127; --surface-footer: #131519; --surface-inset: #14161a; --surface-raised: #20242b; } /* Мокрый асфальт — сине-серый. */ html[data-terminal-theme="wet_asphalt"] { --accent-h: 245; --surface-page: #12161b; --surface-page-2: #1a2028; --surface-panel: #161b22; --surface-panel-2: #191f27; --surface-titlebar: #1a212a; --surface-footer: #10141a; --surface-inset: #12161c; --surface-raised: #1d2530; } /* Стальной шторм — титаново-синий. */ html[data-terminal-theme="steel_storm"] { --accent-h: 255; --surface-page: #14171e; --surface-page-2: #1e2431; --surface-panel: #171b24; --surface-panel-2: #1b202b; --surface-titlebar: #1c222f; --surface-footer: #12151c; --surface-inset: #13161d; --surface-raised: #212836; } /* Чёрный янтарь — почти чёрный тёплый с янтарным акцентом. */ html[data-terminal-theme="black_amber"] { --accent-h: 70; --surface-page: #0d0b07; --surface-page-2: #1a140c; --surface-panel: #12100b; --surface-panel-2: #16130d; --surface-titlebar: #181410; --surface-footer: #0b0906; --surface-inset: #100e09; --surface-raised: #1d1810; } /* Винная ночь — почти чёрный с винно-бордовым акцентом. */ html[data-terminal-theme="wine_night"] { --accent-h: 12; --surface-page: #0f0a0d; --surface-page-2: #1a1015; --surface-panel: #140d11; --surface-panel-2: #181014; --surface-titlebar: #1a1116; --surface-footer: #0d090b; --surface-inset: #110c0f; --surface-raised: #1e141a; } * { box-sizing: border-box; } html, body { min-height: 100%; } /* Симметричные поля под вертикальную полосу прокрутки на обоих краях: контент центрируется относительно ОКНА, а не «ширины без скролла». Иначе скролл справа сдвигал центрированные блоки (напр. «Перед началом») на ~7px влево, и казалось, что слева места больше. Также убирает дёрганье при появлении/ исчезновении скролла между экранами. */ html { scrollbar-gutter: stable both-edges; } body { margin: 0; background: var(--surface-page); color: #e9e7e2; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; -webkit-font-smoothing: antialiased; } button, input { font: inherit; } button { appearance: none; } ::selection { background: oklch(0.74 0.09 var(--accent-h) / 0.25); } input::placeholder { color: #494a44; } /* Автозаполнение Chrome не должно ломать тёмные поля */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #e9e7e2; caret-color: oklch(0.74 0.09 var(--accent-h)); box-shadow: inset 0 0 0 1000px var(--surface-inset); transition: background-color 9999999s ease-out; } input:-webkit-autofill:focus { box-shadow: 0 0 0 3px oklch(0.74 0.09 var(--accent-h) / 0.08), inset 0 0 0 1000px #0e0f13; } /* ---------- Анимации ---------- */ @keyframes blink { 0%, 45% { opacity: 0.28; } 55%, 100% { opacity: 0.05; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes popIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes popOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px) scale(0.985); } } @keyframes sndPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } /* ---------- Кастомный скроллбар ---------- */ /* Стилизуем ВСЕ прокручиваемые области, а не только .dr-scroll: системная светлая полоса Windows со стрелками выбивалась из тёмного терминала везде, где скролл появлялся сам (дерево коллекций, длинные списки). */ /* Chromium/WebKit рисуем псевдоэлементами. Стандартное scrollbar-width здесь НЕ задаём: в Chromium оно ОТКЛЮЧАЕТ ::-webkit-scrollbar и даёт 4px-полосу, в которую тяжело попасть мышью. Firefox псевдоэлементы не поддерживает — для него стандартные свойства ниже, в @supports. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { /* прозрачная рамка + background-clip делает бегунок тоньше дорожки, поэтому он не липнет к краю и выглядит аккуратно */ background: oklch(0.58 0.04 var(--accent-h) / 0.38); border: 2px solid transparent; background-clip: padding-box; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: oklch(0.68 0.06 var(--accent-h) / 0.6); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox: только стандартные свойства (псевдоэлементов там нет). */ @supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: oklch(0.60 0.05 var(--accent-h) / 0.45) transparent; } } /* Панели с явным классом — чуть заметнее (там прокрутка часть интерфейса). */ .dr-scroll::-webkit-scrollbar { width: 9px; } .dr-scroll::-webkit-scrollbar-thumb { background: oklch(0.58 0.05 var(--accent-h) / 0.45); border: 0; border-radius: 4px; } .dr-scroll::-webkit-scrollbar-thumb:hover { background: oklch(0.64 0.06 var(--accent-h) / 0.62); } /* ============================================================ AUTH — каркас ============================================================ */ .app-root { min-height: 100vh; } .au-page { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1300px 640px at 50% -12%, var(--surface-page-2) 0%, var(--surface-page) 62%); } .au-page a { color: oklch(0.74 0.09 var(--accent-h)); text-decoration: none; transition: color 0.12s; } .au-page a:hover { color: oklch(0.84 0.09 var(--accent-h)); } .au-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 32px 20px; } .au-wrap { width: 100%; max-width: 1120px; } @media (min-width: 2200px) { .au-wrap, .au-footer-inner { max-width: 1160px; } } .au-window { position: relative; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: var(--surface-panel); overflow: hidden; height: 760px; display: flex; flex-direction: column; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.85); } /* Шапка окна */ .au-titlebar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: var(--surface-titlebar); flex: none; } .au-dots { display: flex; gap: 7px; } .au-dots span { width: 11px; height: 11px; border-radius: 50%; background: #3a3b3f; } .au-brand { display: flex; align-items: center; gap: 11px; margin-left: 4px; } /* Знак-логотип в шапке окна: прозрачный плоский PNG, без рамок и фона. */ .au-brand-logo { width: 20px; height: 20px; display: block; cursor: pointer; flex: none; } .au-brand-text { display: flex; align-items: baseline; gap: 9px; } .au-logo { background: transparent; border: 0; padding: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #e9e7e2; cursor: pointer; transition: color 0.12s; } .au-logo:hover { color: oklch(0.82 0.10 var(--accent-h)); } .au-brand-sub { font-size: 12px; color: #6a6a65; } .au-titlebar-spacer { flex: 1; } .au-path { font-size: 12.5px; color: #6a6a65; white-space: nowrap; } /* Узкое окно: шапка не помещалась целиком и разъезжалась в две строки, унося правый край (путь и выключатель звука) за границу окна. Прячем декоративное — путь и подпись бренда, — чтобы функциональная иконка звука оставалась доступной, а шапка держала свою высоту. */ @media (max-width: 700px) { .au-path, .au-brand-sub { display: none; } } /* Выключатель звука в шапке окна. Поле 6px даёт цель нажатия ~29px, а отрицательные вертикальные поля гасят её вклад в высоту шапки — строка с путём остаётся ровно той же высоты, что и без иконки. */ .au-snd { appearance: none; background: transparent; border: 0; padding: 6px; margin: -6px -4px -6px -6px; border-radius: 6px; line-height: 0; cursor: pointer; color: #6a6a65; transition: color 0.12s, background 0.12s; } .au-snd:hover, .au-snd:focus-visible { color: #cfcdc8; background: rgba(255, 255, 255, 0.06); outline: none; } /* Выключенный звук — приглушённее: состояние читается и без наведения. */ .au-snd.off { color: #4d4e48; } .au-snd.off:hover, .au-snd.off:focus-visible { color: #9a9a94; } /* Область контента */ .au-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; } .au-panel { max-width: 432px; width: 100%; margin: 0 auto; padding: 32px 28px; } .au-screen { animation: fadeIn 0.25s ease; } .au-slot { display: contents; } .au-about-root { display: contents; } /* Командная строка */ .au-cmd { font-size: 13px; color: #8a8a84; margin-bottom: 22px; } .au-tlink { background: transparent; border: 0; padding: 0; font: inherit; color: oklch(0.74 0.09 var(--accent-h)); cursor: pointer; transition: color 0.12s; } .au-tlink:hover { color: oklch(0.84 0.09 var(--accent-h)); } .au-caret { display: inline-block; width: 8px; height: 15px; margin-left: 3px; vertical-align: -2px; background: oklch(0.74 0.09 var(--accent-h)); animation: blink 1.4s ease-in-out infinite; } /* Заголовки и формы */ .au-title { font-size: 15px; letter-spacing: 0.16em; color: #cfcdc8; margin-bottom: 9px; } .au-desc { font-size: 12.5px; color: #6a6a65; line-height: 1.55; margin-bottom: 24px; text-wrap: pretty; } .au-form { display: flex; flex-direction: column; gap: 15px; } .au-label { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a8a84; margin-bottom: 7px; } .au-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 7px; } .au-label-row .au-label { margin-bottom: 0; } @keyframes auErrIn { from { opacity: 0; } to { opacity: 1; } } .au-field-msg { font-size: 11px; } /* Плавное появление текста ошибки/статуса — без резкого «щелчка». :not(:empty) перезапускает анимацию при каждом переходе пусто→текст. */ .au-field-msg:not(:empty) { animation: auErrIn 0.14s ease; } .au-field-msg.is-err { color: oklch(0.74 0.12 30); } .au-field-msg.is-ok { color: oklch(0.78 0.10 var(--accent-h)); } .au-field-msg.is-bad { color: oklch(0.74 0.11 30); } .au-input { width: 100%; background: var(--surface-inset); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 11px 13px; color: #e9e7e2; font-family: inherit; font-size: 13px; outline: none; caret-color: oklch(0.74 0.09 var(--accent-h)); } .au-input:focus { border-color: oklch(0.74 0.09 var(--accent-h) / 0.6); box-shadow: 0 0 0 3px oklch(0.74 0.09 var(--accent-h) / 0.08); } /* Поля временно disabled под about-модалкой — внешне не отличаются от обычных */ .au-input:disabled { color: #e9e7e2; -webkit-text-fill-color: #e9e7e2; opacity: 1; background: var(--surface-inset); border-color: rgba(255, 255, 255, 0.12); cursor: default; } /* -webkit-text-fill-color с инпута перекрашивает и плейсхолдер — возвращаем ему штатный приглушённый цвет в disabled-состоянии */ .au-input:disabled::placeholder { color: #494a44; -webkit-text-fill-color: #494a44; } .au-pw { position: relative; } .au-pw .au-input { padding-right: 74px; } .au-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; padding: 5px 6px; font-size: 11px; color: #6a6a65; cursor: pointer; letter-spacing: 0.04em; transition: color 0.12s; } .au-eye:hover { color: oklch(0.80 0.10 var(--accent-h)); } .au-inline-err { font-size: 12px; color: oklch(0.74 0.12 30); margin-top: 6px; } .au-hint { font-size: 11.5px; color: #57574f; margin-top: 6px; } .au-reqs { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; } .au-reqs span { font-size: 11.5px; color: #57574f; } .au-reqs span.ok { color: oklch(0.78 0.10 var(--accent-h)); } /* Чекбоксы-«кнопки» */ .au-check { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 2px 0; cursor: pointer; align-self: flex-start; } .au-checkbox { font-size: 14px; line-height: 1; width: 3ch; display: inline-block; text-align: left; color: #6a6a65; } .au-checkbox.on { color: oklch(0.80 0.10 var(--accent-h)); } .au-check-text { font-size: 12.5px; color: #9a9a94; } .au-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 2px; } .au-consent-box { flex: none; background: transparent; border: 0; padding: 0; font-size: 14px; line-height: 1.55; width: 3ch; text-align: left; color: #6a6a65; cursor: pointer; } .au-consent-box.on { color: oklch(0.80 0.10 var(--accent-h)); } .au-consent-text { font-size: 12px; color: #8a8a84; line-height: 1.55; } .au-consent-errwrap { min-height: 0; } .au-consent-err { font-size: 12px; color: oklch(0.74 0.12 30); margin-top: 2px; } /* Баннеры логина */ /* Плавное раскрытие баннера (высота 0↔авто) — центрированная форма не прыгает. margin-top:-15px гасит лишний flex-gap, пока баннер свёрнут. */ .au-collapse { display: grid; grid-template-rows: 0fr; margin-top: -15px; opacity: 0; transition: grid-template-rows 0.22s ease, margin-top 0.22s ease, opacity 0.18s ease; } .au-collapse.show { grid-template-rows: 1fr; margin-top: 0; opacity: 1; } .au-collapse-inner { overflow: hidden; min-height: 0; } .au-banner-err { padding: 10px 13px; border: 1px solid oklch(0.66 0.13 30 / 0.32); border-radius: 8px; background: oklch(0.66 0.13 30 / 0.06); font-size: 12.5px; color: oklch(0.80 0.11 30); line-height: 1.5; } .au-banner-warn { padding: 11px 13px; border: 1px solid oklch(0.74 0.13 65 / 0.32); border-radius: 8px; background: oklch(0.74 0.13 65 / 0.06); font-size: 12.5px; color: oklch(0.84 0.10 72); line-height: 1.55; } .au-banner-warn button { background: transparent; border: 0; padding: 0; font: inherit; color: oklch(0.84 0.10 72); text-decoration: underline; cursor: pointer; } /* Кнопки форм */ .au-submit { width: 100%; background: oklch(0.74 0.09 var(--accent-h) / 0.14); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.5); color: oklch(0.84 0.10 var(--accent-h)); border-radius: 8px; padding: 12px; font-size: 13px; letter-spacing: 0.03em; cursor: pointer; transition: all 0.12s; } .au-submit:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.22); border-color: oklch(0.74 0.09 var(--accent-h) / 0.7); } .au-submit.mt { margin-top: 12px; } .au-loading { width: 100%; background: #141519; border: 1px solid rgba(255, 255, 255, 0.1); color: #8a8a84; border-radius: 8px; padding: 12px; font-size: 13px; letter-spacing: 0.03em; cursor: default; } .au-loading.mt { margin-top: 12px; } .au-loading .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 9px; vertical-align: middle; animation: sndPulse 1s ease-in-out infinite; } .au-links { display: flex; gap: 18px; margin-top: 20px; font-size: 12.5px; } .au-after { margin-top: 20px; font-size: 12.5px; } /* Success / error карточки */ .au-card { animation: popIn 0.28s ease; /* Итоговые карточки (аккаунт создан / письмо отправлено / пароль изменён…) центрируются: контент уже колонки, слева выглядел «съехавшим». */ text-align: center; } .au-card-title { font-size: 15px; letter-spacing: 0.14em; color: oklch(0.82 0.10 var(--accent-h)); margin-bottom: 14px; } .au-card-title.tight { margin-bottom: 12px; } .au-card-title.bad { color: oklch(0.76 0.12 30); } .au-card-text { font-size: 13px; color: #9a9a94; line-height: 1.6; margin-bottom: 22px; } .au-card-text.tight { margin-bottom: 6px; } .au-card-email { font-size: 13px; color: oklch(0.82 0.10 var(--accent-h)); margin-bottom: 22px; } .au-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .au-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; border-radius: 8px; font-size: 12.5px; cursor: pointer; transition: all 0.12s; } .au-btn.primary { background: oklch(0.74 0.09 var(--accent-h) / 0.14); color: oklch(0.84 0.10 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.5); } .au-btn.primary:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.22); } .au-btn.secondary { background: #191a1f; color: #cfcdc8; border: 1px solid rgba(255, 255, 255, 0.14); } .au-btn.secondary:hover { border-color: rgba(255, 255, 255, 0.28); } .au-countdown { display: inline-flex; align-items: center; padding: 10px 15px; font-size: 12px; color: #57574f; } /* Dev-ссылка из письма — видна только в режиме разработки */ .au-devlink { margin-top: 14px; font-size: 11.5px; } /* Ссылка «зачем нужен DeepRepeat» */ .au-about-link { position: absolute; left: 28px; bottom: 24px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; padding: 4px 2px; font-size: 12px; color: oklch(0.74 0.09 var(--accent-h)); cursor: pointer; transition: color 0.12s; } .au-about-link:hover { color: oklch(0.84 0.09 var(--accent-h)); } .au-about-link .q { animation: blink 1.4s ease-in-out infinite; } /* About-модалка */ .au-overlay { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; z-index: 5; background: rgba(8, 9, 11, 0.62); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); display: flex; align-items: center; justify-content: center; padding: 32px; animation: fadeIn 0.18s ease; } .au-overlay.closing { animation: fadeOut 0.18s ease forwards; } .au-modal { width: 100%; max-width: 520px; background: var(--surface-inset); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9); padding: 26px 28px; animation: popIn 0.24s ease; } .au-overlay.closing .au-modal { animation: popOut 0.19s ease forwards; } .au-modal-cmd { font-size: 13px; color: #8a8a84; margin-bottom: 16px; } .au-modal-title { font-size: 15px; letter-spacing: 0.14em; color: #cfcdc8; margin-bottom: 14px; } .au-modal-p { font-size: 13px; color: #9a9a94; line-height: 1.65; margin-bottom: 12px; text-wrap: pretty; } .au-modal-p.last { margin-bottom: 18px; } .au-modal-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; } .au-modal-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: #cfcdc8; } .au-modal-item .tick { color: oklch(0.78 0.10 var(--accent-h)); flex: none; } .au-modal-btn { width: 100%; padding: 11px 20px; border-radius: 8px; font-size: 12.5px; cursor: pointer; background: oklch(0.74 0.09 var(--accent-h) / 0.14); color: oklch(0.84 0.10 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.5); transition: all 0.12s; } .au-modal-btn:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.22); border-color: oklch(0.74 0.09 var(--accent-h) / 0.7); } .au-modal-hint { font-size: 11.5px; color: #57574f; margin-top: 16px; text-align: center; } /* Футер */ .au-footer { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 22px 32px 26px; background: var(--surface-footer); flex: none; } /* Режим юридического футера. Оба варианта лежат друг на друге в одной grid-ячейке, переключение — visibility, а не display. Из-за этого высота футера всегда равна высоте полного варианта: при смене режима терминал не меняет размер и страница не дёргается. Схема перенесена из DeepReader. */ .au-footer-inner { max-width: 1120px; margin: 0 auto; text-align: center; display: grid; } .au-footer-mode { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 9px; visibility: hidden; } html[data-legal-footer="full"] .au-footer-mode--full, html[data-legal-footer="compact"] .au-footer-mode--compact { visibility: visible; } .au-footer-mode--compact .au-footer-copy a { color: #6d6d64; } .au-footer-mode--compact .au-footer-copy a:hover { color: var(--accent, #8ab4f8); } .au-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: 12.5px; } .au-footer-links .sep { color: #3a3b3f; } .au-footer-copy { font-size: 11.5px; color: #57574f; } .au-footer-legal { font-size: 11px; color: #45463f; } /* ============================================================ Терминал приложения (dr-*): картотека, повторение, прогресс, изучение карточек, профиль — 1:1 по прототипам Vocab Terminal ============================================================ */ @keyframes cardNext { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes cardPrev { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes flyUp { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-72px) scale(0.965); } } @keyframes flyDown { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(72px) scale(0.965); } } @keyframes drSndPulse { 0%, 100% { opacity: 0.65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.09); } } @keyframes drPopIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dr-window { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; background: var(--surface-panel); overflow: hidden; /* Точка отсчёта для .dr-toasts: тост живёт поверх содержимого окна. */ position: relative; /* Фиксированная высота, как у .au-window: окно не «прыгает» при переключении вкладок — контент скроллится во внутренних областях. */ height: 760px; display: flex; flex-direction: column; box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.85); } .dr-body { padding: 22px 28px 28px; flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; } .dr-userstats { position: absolute; top: 12px; right: 16px; z-index: 2; max-width: 40%; max-height: 34.8px; overflow: hidden; color: #6b7280; font-size: 12px; line-height: 1.45; opacity: 0.7; text-align: right; } .dr-userstats div { display: block; } .dr-stat { appearance: none; display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; transition: color 0.12s; } .dr-stat:hover, .dr-stat:focus-visible { color: oklch(0.80 0.12 var(--accent-h)) !important; outline: none; } /* Header-своп процента опыта ⇄ числа XP (перенос DeepReader). Число `.pxp` по умолчанию скрыто; на десктопе при hover/focus процент `.pct` прячется, а число показывается (цвет — общий hover `.dr-stat`). Блок шапки right-aligned, поэтому число растёт влево, правый край на месте. На тач-устройствах свопа нет — всегда виден процент, тап просто ведёт на /xp. */ .dr-xp-pct .pxp { display: none; } @media (hover: hover) and (pointer: fine) { .dr-xp-pct:hover .pct, .dr-xp-pct:focus-visible .pct { display: none; } .dr-xp-pct:hover .pxp, .dr-xp-pct:focus-visible .pxp { display: inline; } } .dr-cmdline { margin-bottom: 16px; padding-right: 44%; } .dr-cmdline.study { margin-bottom: 18px; } .dr-cmdline.profile { margin-bottom: 24px; } .dr-cmd { font-size: 13px; color: #8a8a84; } .dr-cmd .t { color: oklch(0.74 0.09 var(--accent-h)); /* Слово-«команда» кликабельно: возвращает к списку колод. */ cursor: pointer; transition: color 0.12s; } .dr-cmd .t:hover { color: oklch(0.86 0.10 var(--accent-h)); } .dr-cmd .v { color: #e9e7e2; } /* Ссылки под командной строкой экрана изучения: выход — основная, «поделиться» — редкая и потому приглушена. */ .dr-learn-links { display: flex; align-items: baseline; /* ссылки на одной строке независимо от глифов */ flex-wrap: wrap; /* узкое окно: перенос целыми ссылками, без разрыва слов */ gap: 14px; font-size: 12px; line-height: 1.45; margin-top: 8px; /* Отступ 44% у .dr-cmdline зарезервирован под блок статистики справа, но он стоит выше — вровень с prompt-строкой. Ссылки идут ПОД ним, поэтому им возвращаем полную ширину: иначе четыре ссылки не помещаются и текст внутри ломается на две строки. */ margin-right: -44%; } .dr-learn-links button { white-space: nowrap; /* ссылка переносится целиком, а не по словам */ } .dr-learn-links button { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; transition: color 0.12s; } .dr-learn-links .lk-exit, .dr-learn-links .lk-swap, .dr-learn-links .lk-edit { color: #8a8a84; } .dr-learn-links .lk-share { color: #57574f; } /* Стрелки ←/⇄/↗ рендерятся фолбэк-шрифтом (webfont-сабсеты Google Fonts не содержат диапазона стрелок) и без нормировки сидят на разной высоте. Фиксированный line-height и лёгкая посадка к базовой линии выравнивают их боксы между собой независимо от шрифта. */ .dr-learn-links .ar { display: inline-block; width: 1.15em; text-align: center; line-height: 1; vertical-align: -1px; } /* Секундомер сессии в строке прогресса: [⏸] MM:SS, клик — пауза. */ .st-clock { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; color: #7d7d78; transition: color 0.12s; } .st-clock:hover { color: oklch(0.80 0.12 var(--accent-h)); } /* Свой глиф паузы/пуска в строках таймера (inline-SVG, currentColor): Unicode-паузу iOS рисовал цветной системной эмодзи. Выравнивание по базовой линии соседнего моноширинного текста. */ .st-glyph { vertical-align: -1px; } .st-clock-sep { color: #3a3b3f; margin: 0 10px; } /* Экран паузы: fixed-оверлей поверх всего, любой клик снимает паузу. */ .st-pause { position: fixed; inset: 0; z-index: 55; background: rgba(8, 9, 11, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; animation: fadeIn 0.18s ease; } .st-pause .in { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 24px; } .st-pause .cap { font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: #8a8a84; } .st-pause .rule { width: 90px; height: 1px; background: rgba(255, 255, 255, 0.12); } .st-pause .clock { font-size: 48px; font-weight: 500; color: #ecebe6; letter-spacing: 0.04em; } .st-pause .note { font-size: 12.5px; color: #6a6a65; } .st-conf-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; } .st-resume-btn { margin-top: 8px; padding: 13px 28px; border-radius: 9px; font: inherit; font-size: 13px; cursor: pointer; background: oklch(0.74 0.09 var(--accent-h) / 0.16); color: oklch(0.85 0.07 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.4); transition: all 0.12s; display: inline-flex; align-items: center; gap: 10px; } .st-resume-btn:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.24); } /* Клавиша под кнопкой: подсказка есть, но кнопку она не утяжеляет. */ .st-resume-key { margin-top: 9px; font-size: 11px; letter-spacing: 0.04em; color: #5c5c57; } .st-resume-btn:active { transform: scale(0.985); } .dr-learn-links button:hover { color: oklch(0.80 0.12 var(--accent-h)); } /* Предсессионный экран «Перед началом»: сессия стартует только по явной кнопке. Явные margin (а не общий gap) — чтобы точно попасть в интервалы референса. */ .st-prep { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 16px 12px; /* Вход без горизонтального сдвига: cardNext (въезд справа на 30px) на этом статичном экране на 0.3с смещал блок вправо и создавал ощущение «слева больше места». popIn — только прозрачность + лёгкий подъём, центр по X не меняется. */ animation: popIn 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .st-prep .cap { font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: #5f5f5a; margin-bottom: 20px; } .st-prep .nm { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: #ecebe6; max-width: 620px; overflow-wrap: anywhere; text-wrap: pretty; margin-bottom: 15px; } .st-prep .meta { font-size: 13.5px; color: #8a8a84; margin-bottom: 28px; } .st-prep-resume { font-size: 12.5px; color: oklch(0.82 0.07 var(--accent-h)); background: oklch(0.74 0.09 var(--accent-h) / 0.10); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.22); border-radius: 8px; padding: 8px 14px; margin-bottom: 28px; } .st-prep-resume .clk { font-variant-numeric: tabular-nums; } /* Выбор лицевой стороны — текстовые переключатели, не кнопки. */ .st-prep-swap { display: flex; align-items: center; gap: 11px; font-size: 13px; margin-bottom: 36px; } .st-prep-swap .lbl { color: #6a6a65; } .st-prep-swap .sep { color: #3f3f3a; } .st-prep-swap .sw { appearance: none; background: transparent; border: 0; padding: 1px 0; font: inherit; font-size: 13px; cursor: pointer; color: #6a6a65; border-bottom: 1px solid transparent; transition: color 0.12s; } .st-prep-swap .sw:hover { color: #e9e7e2; } .st-prep-swap .sw.on { color: #e9e7e2; border-bottom-color: rgba(255, 255, 255, 0.45); } .st-prep-actions { display: flex; gap: 12px; align-items: center; margin-bottom: 32px; } /* «Начать повторение» — единственный сильный акцент экрана. */ .st-prep-actions .st-resume-btn { margin-top: 0; padding: 14px 32px; font-size: 14px; font-weight: 500; } /* «Назад» — тихая второстепенная, подсвечивается при наведении. */ .st-prep-back { appearance: none; padding: 14px 22px; border-radius: 9px; font: inherit; font-size: 13.5px; cursor: pointer; background: transparent; color: #8a8a84; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.12s; } .st-prep-back:hover { background: rgba(255, 255, 255, 0.06); color: #e9e7e2; border-color: rgba(255, 255, 255, 0.28); } .st-prep-back:active { transform: scale(0.98); } .st-prep .hint { font-size: 11.5px; color: #57574f; line-height: 1.65; max-width: 430px; text-wrap: pretty; } /* Межраундовая заметка и «тихая» ссылка досрочного завершения */ .dr-finish-note { font-size: 12px; color: #6a6a65; text-align: center; line-height: 1.7; max-width: 470px; } .st-final-link { font: inherit; font-size: 11.5px; background: none; border: none; padding: 0; cursor: pointer; color: #55554f; text-decoration: underline; text-underline-offset: 3px; transition: color 0.12s ease; } .st-final-link:hover { color: oklch(0.72 0.10 30); } /* Вкладки терминала */ /* Зона результата поиска друга: одна и та же высота во всех состояниях — пусто, карточка, «не найден», ошибка. Раньше блок появлялся и исчезал, и кнопка «Найти» прыгала под курсором между двумя поисками подряд. */ .fr-result { margin-top: 14px; min-height: 96px; display: flex; flex-direction: column; justify-content: center; } /* До первого поиска зона только держит место. Рамки нет намеренно: обведённый прямоугольник читался как пустая карточка участника — будто кого-то уже нашли, но ничего не показали. Осталась одна негромкая строка. */ .fr-result.empty { align-items: flex-start; justify-content: flex-start; padding-top: 10px; color: var(--text-dim, #8a839b); font-size: 12.5px; opacity: 0.62; } .fr-result-hint { margin-top: 8px; font-size: 12px; color: var(--text-dim, #8a839b); } /* Тосты терминала: короткое подтверждение выполненного действия. Лежат отдельным слоем под панелью вкладок справа — появление и исчезновение не двигают ни строку списка, ни высоту окна (сообщение в потоке для этого не годилось: список подпрыгивал). pointer-events: none — тост никогда не перехватывает клик по тому, что под ним. */ .dr-toasts { position: absolute; top: 62px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(360px, 62%); } .dr-toast { display: flex; gap: 9px; align-items: baseline; background: #1a1420; border: 1px solid rgba(240, 180, 100, 0.18); border-left: 3px solid var(--accent-amber, #f0b464); border-radius: 8px; padding: 10px 13px; font-size: 12.5px; color: #ded3c6; box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.85); animation: fadeIn 0.18s ease; transition: opacity 0.35s ease; } .dr-toast .ic { color: var(--accent-amber, #f0b464); flex: none; } .dr-toast.err { border-left-color: #f09c9c; } .dr-toast.err .ic { color: #f09c9c; } .dr-toast.out { opacity: 0; } .dr-tabs { display: flex; gap: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 22px; } .dr-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 0 12px; margin-bottom: -1px; font-size: 14px; cursor: pointer; color: #6a6a65; transition: color 0.12s; display: inline-flex; align-items: center; gap: 8px; } .dr-tab.active { color: #e9e7e2; border-bottom-color: oklch(0.74 0.09 var(--accent-h)); } .dr-tab-badge { display: inline-flex; align-items: center; font-size: 11px; color: oklch(0.85 0.09 72); padding: 1px 7px; border-radius: 20px; background: oklch(0.62 0.10 72 / 0.18); } .dr-anim-in { width: 100%; animation: cardNext 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Зона контента вкладки заполняет остаток окна; скролл — внутри неё. */ .dr-anim-in > [data-zone="app-content"] { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* Картотека */ .dr-lib-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .dr-crumbs { font-size: 13px; flex: 1; min-width: 200px; } .dr-crumbs button { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; } .dr-crumbs .sep { color: #3a3b3f; } .dr-seg { display: flex; gap: 4px; background: #141519; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 3px; } .dr-seg button { appearance: none; border: 0; border-radius: 6px; padding: 6px 13px; font: inherit; font-size: 12.5px; cursor: pointer; background: transparent; color: #8a8a84; transition: all 0.12s; } .dr-seg button.active { background: rgba(255, 255, 255, 0.08); color: #e9e7e2; } .dr-seg button span { opacity: 0.55; } .dr-seg.teal button.active { background: oklch(0.74 0.09 var(--accent-h) / 0.14); color: oklch(0.85 0.07 var(--accent-h)); } .dr-create { appearance: none; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 12.5px; cursor: pointer; background: transparent; color: #cfcdc8; transition: all 0.12s; text-align: center; } /* Невидимая «призрачная» строка с самой длинной подписью резервирует ширину: при переключении «Папки»/«Стопки» кнопка (и вся панель) не прыгает. */ .dr-create::after { content: "+ Создать стопку"; display: block; height: 0; visibility: hidden; overflow: hidden; } .dr-create:hover { border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.03); } .dr-lib-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; } .dr-folders { display: flex; flex-direction: column; gap: 5px; } .dr-folder { appearance: none; display: flex; align-items: center; gap: 14px; padding: 13px 15px; border-radius: 9px; font: inherit; text-align: left; cursor: pointer; background: #131418; border: 1px solid rgba(255, 255, 255, 0.07); transition: all 0.12s; } .dr-folder:hover { background: #171920; border-color: rgba(255, 255, 255, 0.16); } .dr-folder:active { transform: scale(0.996); } .dr-folder .ic { color: #6a6a65; line-height: 0; } .dr-folder .body { flex: 1; min-width: 0; } .dr-folder .nm { display: block; font-size: 14px; color: #e6e4df; } .dr-folder .meta { display: block; font-size: 12px; color: #6a6a65; margin-top: 3px; } .dr-folder .st { font-size: 12px; white-space: nowrap; } .dr-folder .chev { color: #4e4e49; line-height: 0; margin-left: 4px; } .dr-table { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; overflow: hidden; } .dr-thead, .dr-trow { display: grid; /* Колонка «Добавл.» — 80px: вмещает и короткое «19.07» (текущий год), и полное «19.07.2026» (даты прошлых лет, ~66px) с запасом, поэтому со сменой года ничего не поедет. Правая колонка — под иконки действий строки: в Картотеке их две (карандаш + корзина), в «Повторении» одна (отложить). 58px хватает на обе, поэтому они не налезают на значение «След. повтор». Имя minmax(0,1fr): сжимается и поглощает их ширину, переполнения нет. */ grid-template-columns: 34px minmax(0, 1fr) 50px 80px repeat(6, 42px) 44px 168px 58px; align-items: center; padding: 11px 15px; } .dr-thead { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #57574f; background: #121317; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .dr-trow { padding: 12px 15px; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.12s; } .dr-trow:hover { background: rgba(255, 255, 255, 0.025); } .dr-th-r { text-align: right; } .dr-th-c { text-align: center; } .dr-th-added { text-align: right; padding-right: 14px; } .dr-c-idx { color: #57574f; } .dr-c-name { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; color: #e2e0db; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-c-num { color: #9a9a94; text-align: right; } .dr-c-added { color: #9a9a94; text-align: right; font-size: 11px; padding-right: 14px; } .dr-c-sched { text-align: center; font-size: 10.5px; } .dr-c-act { text-align: right; } /* Правая колонка действия: иконка корзины (Картотека) / отложить (Повторение). Скрыта, проявляется при наведении на строку — как у папок. */ .dr-c-tool { display: flex; justify-content: flex-end; } .dr-ddel, .dr-dedit, .dr-snz { appearance: none; background: transparent; border: 0; padding: 4px; line-height: 0; cursor: pointer; color: #57574f; opacity: 0; transition: opacity 0.12s, color 0.12s; } .dr-trow:hover .dr-ddel, .dr-trow:hover .dr-dedit, .dr-trow:hover .dr-snz, .dr-ddel:focus-visible, .dr-dedit:focus-visible, .dr-snz:focus-visible { opacity: 1; } .dr-ddel:hover { color: oklch(0.7 0.12 25); } /* Карандаш правки — нейтральная подсветка (не деструктивное действие). */ .dr-dedit:hover { color: #cfcdc8; } .dr-snz:hover { color: oklch(0.82 0.1 72); } @media (hover: none) { .dr-ddel, .dr-snz { opacity: 0.55; } } /* Inline-подтверждение действия над стопкой (вместо строки таблицы) */ .dr-rowconfirm { display: flex; align-items: center; gap: 13px; min-height: 63px; padding: 12px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); animation: fadeIn 0.15s ease; } .dr-rowconfirm.danger { background: oklch(0.35 0.06 25 / 0.1); } .dr-rowconfirm.snooze { background: oklch(0.4 0.05 72 / 0.09); } .dr-rowconfirm .ic { line-height: 0; flex: none; } .dr-rowconfirm.danger .ic { color: oklch(0.7 0.12 25); } .dr-rowconfirm.snooze .ic { color: oklch(0.82 0.1 72); } .dr-rowconfirm .body { flex: 1; min-width: 0; } /* Строгое удаление: фраза-подтверждение. Кнопки прижимаются к верху — баннер с полем ввода выше обычного, и растянутые по центру кнопки визуально относились бы непонятно к чему. */ .dr-rowconfirm.strict { align-items: flex-start; } .dr-rowconfirm.strict .ic { margin-top: 2px; } .dr-rowconfirm.strict .dr-btn-sm { margin-top: 2px; } .dr-rowconfirm .meta b { color: #d8d6d0; font-weight: 600; } .dr-delphrase { display: block; width: min(100%, 280px); margin-top: 8px; padding: 7px 11px; font: inherit; font-size: 12.5px; color: #e6e4df; background: #0e0f13; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; outline: none; } .dr-delphrase:focus-visible { border-color: oklch(0.7 0.12 25 / 0.6); } .dr-delphrase-err { display: block; min-height: 15px; margin-top: 5px; font-size: 11.5px; color: oklch(0.72 0.11 25); } .dr-rowconfirm .q { display: block; font-size: 13px; color: #e6e4df; } .dr-rowconfirm .meta { display: block; font-size: 11.5px; color: #8a8a84; margin-top: 3px; line-height: 1.5; } .dr-btn-sm.accent { background: oklch(0.74 0.09 var(--accent-h) / 0.16); color: oklch(0.85 0.07 var(--accent-h)); border-color: oklch(0.74 0.09 var(--accent-h) / 0.4); white-space: nowrap; } .dr-btn-sm.accent:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.24); } /* ===== Плашка черновика стопки (Картотека) ===== */ /* Плашка незавершённого занятия в «Повторении»: вернуться к паузе можно оттуда же, откуда повторения начинают. Сплошная рамка (в отличие от пунктирного черновика) — занятие реально существует и ждёт продолжения. */ .dr-sessbar { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; padding: 11px 14px; border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.34); border-radius: 9px; background: oklch(0.74 0.09 var(--accent-h) / 0.06); cursor: pointer; transition: background 0.14s, border-color 0.14s; } .dr-sessbar:hover, .dr-sessbar:focus-visible { background: oklch(0.74 0.09 var(--accent-h) / 0.1); border-color: oklch(0.74 0.09 var(--accent-h) / 0.5); outline: none; } .dr-sessbar .sb-ic { line-height: 0; color: oklch(0.78 0.08 var(--accent-h)); flex: none; } .dr-sessbar .sb-body { flex: 1; min-width: 0; } .dr-sessbar .sb-title { display: block; font-size: 13px; color: #dcdad5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-sessbar .sb-meta { display: block; font-size: 11.5px; color: #6f6f6a; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-sessbar .sb-clock { color: #9a9a94; } .dr-sessbar .dr-btn-sm { flex: none; } .dr-draftbar-wrap { position: relative; z-index: 7; margin-bottom: 14px; } .dr-draftbar { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 14px; border: 1px dashed oklch(0.74 0.09 var(--accent-h) / 0.34); border-radius: 9px; background: oklch(0.74 0.09 var(--accent-h) / 0.05); cursor: pointer; transition: background 0.14s, border-color 0.14s; } .dr-draftbar:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.09); border-color: oklch(0.74 0.09 var(--accent-h) / 0.5); } .dbf-ic { line-height: 0; color: oklch(0.78 0.08 var(--accent-h)); flex: none; } .dbf-body { flex: 1; min-width: 0; } .dbf-title { display: block; font-size: 13px; color: #dcdad5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dbf-meta { display: block; font-size: 11.5px; color: #6f6f6a; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dbf-more { appearance: none; display: inline-block; margin-top: 7px; background: transparent; border: 0; padding: 0; font: inherit; font-size: 11.5px; cursor: pointer; color: #7d7d78; } .dbf-cont { flex: none; white-space: nowrap; } .dbf-hide { line-height: 0; color: #57574f; flex: none; padding: 5px; margin: -5px -3px -5px 0; cursor: pointer; transition: color 0.12s; } .dbf-hide:hover { color: #9a9a94; } /* Корзинка удаления черновика — как в других местах: приглушённая, краснеет на hover. */ .dbf-del { appearance: none; background: transparent; border: 0; line-height: 0; color: #57574f; flex: none; padding: 5px; cursor: pointer; transition: color 0.12s; } .dbf-del:hover { color: oklch(0.7 0.12 25); } /* Красный вариант плашки — подтверждение удаления черновика. */ .dr-draftbar-del, .dr-draftbar-del:hover { border-style: solid; border-color: oklch(0.5 0.1 25 / 0.4); background: oklch(0.35 0.06 25 / 0.12); cursor: default; } .dbf-ic.del { color: oklch(0.7 0.12 25); } /* Раскрытый список «ещё N черновиков» — absolute, поверх картотеки */ .dr-draftmore { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 6; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 5px; background: #121317; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; box-shadow: 0 24px 54px -22px rgba(0, 0, 0, 0.9); animation: fadeIn 0.14s ease; } .dm-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background 0.12s; } .dm-row:hover { background: rgba(255, 255, 255, 0.025); } .dm-body { flex: 1; min-width: 0; } .dm-title { display: block; font-size: 12px; color: #b8b6b1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-meta { display: block; font-size: 11px; color: #616159; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dm-cont { flex: none; font-size: 11.5px; color: #7d7d78; } /* Обёртка списка Картотеки + скрим затемнения при раскрытом «ещё N» */ .dr-lib-body { position: relative; z-index: 0; } .dr-draft-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(8, 9, 11, 0.68); border-radius: 8px; cursor: pointer; animation: fadeIn 0.14s ease; } .dr-c-act button { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; font-size: 12px; } .dr-empty { padding: 30px 20px; text-align: center; border: 1px dashed rgba(255, 255, 255, 0.08); border-radius: 9px; } .dr-empty .t1 { font-size: 13px; color: #8a8a84; } .dr-empty .t2 { font-size: 12px; color: #57574f; margin-top: 5px; } /* Действие внутри пустого состояния: то же, что кнопка в шапке раздела, чтобы рабочая область не выглядела тупиком. */ .dr-empty-act { margin-top: 14px; } .dr-empty.big { padding: 48px 24px; border-radius: 10px; font-size: 13px; color: #8a8a84; } .dr-note { font-size: 12px; color: #8a8a84; margin-top: 16px; } /* Предложение Premium на восьмой стопке. Спокойная панель вместо редактора: без таймеров, красного и «последних шансов» — человек уже получил пользу от сервиса, разговор о подписке идёт на равных. Ширина ограничена мерой текста: во всю рабочую область три строки читались бы как системный сбой. */ .dr-paywall { max-width: 560px; margin: 28px auto 0; padding: 24px 26px 26px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; background: rgba(255, 255, 255, 0.02); } .dr-paywall .ttl { font-size: 15px; font-weight: 600; color: #e9e7e2; margin-bottom: 12px; } .dr-paywall p { font-size: 13px; line-height: 1.7; color: #b7b5af; margin: 0 0 10px; } .dr-paywall .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* Пресеты сроков у выдачи Premium в админке: те же 30/90/365, что в тарифах. */ .dr-admin-days-presets { display: inline-flex; gap: 6px; margin-left: 10px; } /* ============================================================ Главное меню — дашборд стартового действия (design/design_handoff_main_menu). Сверху динамический блок «что делать сейчас» + «В работе», ниже три панели, внизу командная строка. Все цвета — токены дизайн-системы; акцент только через var(--accent)/--accent-h, чтобы работали premium-темы. ============================================================ */ .hm2-wrap { display: flex; flex-direction: column; min-height: 100%; } .hm2-status { font-size: 12px; color: #6a6a65; margin: -6px 0 14px; } .hm2-row1 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; } .hm2-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 14px; } .hm2-main, .hm2-panel { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-panel-2); padding: 16px 18px; min-width: 0; } .hm2-main { padding: 18px 20px 16px; display: flex; flex-direction: column; } .hm2-panel-hd { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: #57574f; margin-bottom: 12px; } /* label-строка главного блока: точка 5px + подпись капсом */ .hm2-label { display: flex; align-items: center; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.24em; color: #8a8a84; margin-bottom: 12px; } .hm2-label .dot { width: 5px; height: 5px; border-radius: 50%; flex: none; } .hm2-label.accent .dot { background: var(--accent); } .hm2-label.amber .dot { background: oklch(0.78 0.08 72); } .hm2-title { font-size: 16px; font-weight: 500; color: #ecebe6; margin-bottom: 8px; } .hm2-title .accent { color: var(--accent); } .hm2-meta { font-size: 12.5px; line-height: 1.6; color: #8a8a84; } .hm2-meta .amber, .hm2-crumb .amber, .hm2-act .amber { color: oklch(0.78 0.08 72); } .hm2-crumb { font-size: 12px; color: #8a8a84; margin-bottom: 6px; } .hm2-queue { font-size: 12px; color: #6a6a65; margin-top: 6px; } /* Прогресс сессии: бар 240×7 в «скобках» терминала */ .hm2-bar-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12px; color: #57574f; } .hm2-bar { width: min(240px, 60%); height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .hm2-bar .fill { display: block; height: 100%; border-radius: 4px; background: var(--accent); } .hm2-bar-row .pct { color: #8a8a84; margin-left: 4px; } /* Кнопки прижаты к низу блока — при любом состоянии он одной высоты с соседней панелью. */ .hm2-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 16px; } .hm2-btn { font: inherit; font-size: 13px; line-height: 1.2; padding: 10px 16px; border-radius: 8px; background: #191a1f; border: 1px solid rgba(255, 255, 255, 0.14); color: #cfcdc8; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, transform 0.12s ease; } .hm2-btn:hover, .hm2-btn:focus-visible { border-color: rgba(255, 255, 255, 0.28); color: #e9e7e2; } .hm2-btn.primary { background: var(--accent-soft, oklch(0.74 0.09 var(--accent-h) / 0.14)); border-color: oklch(0.74 0.09 var(--accent-h) / 0.5); color: oklch(0.86 0.07 var(--accent-h)); } /* Раньше «[enter]» было приглушено (opacity: 0.6) и выглядело как отдельная подсказка, приклеенная к кнопке. Это одна надпись — цвет у неё общий. */ .hm2-btn.sm { padding: 7px 12px; font-size: 12px; } .hm2-quiet { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: #6a6a65; cursor: pointer; text-align: left; } .hm2-quiet:hover { color: #8a8a84; } .hm2-quiet.accent { color: var(--accent); margin-top: 10px; } .hm2-quiet.accent:hover { color: oklch(0.86 0.07 var(--accent-h)); } /* dotted-leader строки панели «В работе» */ .hm2-dl { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 8px; min-width: 0; } .hm2-dl .k { color: #6a6a65; flex: none; } .hm2-dl .v { color: #cfcdc8; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm2-dl .dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(255, 255, 255, 0.14); transform: translateY(-3px); } .hm2-minibar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); overflow: hidden; margin-top: 12px; } .hm2-minibar .fill { display: block; height: 100%; background: oklch(0.78 0.08 72); border-radius: 3px; } .hm2-minibar-note { font-size: 11px; color: #57574f; margin-top: 6px; } /* Последняя активность */ .hm2-act { margin-bottom: 10px; min-width: 0; } .hm2-act:last-child { margin-bottom: 0; } .hm2-act .t { font-size: 12.5px; color: #cfcdc8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm2-act .s { font-size: 11.5px; color: #6a6a65; margin-top: 2px; } /* Пустые состояния панелей */ .hm2-empty-t { font-size: 12.5px; color: #8a8a84; } .hm2-empty-d { font-size: 11.5px; color: #57574f; line-height: 1.55; margin: 4px 0 10px; } .hm2-note { font-size: 11.5px; color: #8a8a84; margin-top: 8px; } /* Быстрые переходы: строки-ссылки, не кнопки-таблетки */ .hm2-link { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; font-size: 12.5px; color: #cfcdc8; background: none; border: 1px solid transparent; border-radius: 7px; padding: 8px 10px; cursor: pointer; text-align: left; transition: background 0.15s ease, border-color 0.15s ease; } .hm2-link:hover, .hm2-link:focus-visible { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } .hm2-link .arr { color: #6a6a65; } /* Командная строка внизу тела */ .hm2-cmdline { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; } .hm2-cmdline .p { color: var(--accent); } .hm2-cmdline .d { color: #57574f; } .hm2-cmdline input { flex: 1; font: inherit; font-size: 13px; color: #e9e7e2; background: none; border: 0; outline: none; padding: 6px 0; } .hm2-cmdline input::placeholder { color: #57574f; } /* Дашборд рассчитан на десктопное окно; на узком экране ряды складываются в одну колонку — терминал и так не мобильный сценарий, но ломаться не должен. */ @media (max-width: 980px) { .hm2-row1, .hm2-row2 { grid-template-columns: 1fr; } } /* Результат действия в секции профиля: строка зарезервирована постоянно, чтобы появление текста не меняло высоту и не рождало скролл-прыжок. */ /* Общая строка уведомления под секцией (пароль, e-mail, тема, подписка, админка). Место под неё зарезервировано всегда, а line-height задан явно и равен резерву: иначе одна строка текста получалась чуть выше пустого состояния и появление уведомления сдвигало всё, что ниже. */ .dr-inline-note { min-height: 17px; line-height: 17px; margin-top: 8px; font-size: 12px; color: #8a8a84; } /* Главная: незавершённая сессия + последние занятия */ .hm-wrap { max-width: 720px; } .hm-active { border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.3); background: linear-gradient(180deg, oklch(0.3 0.04 var(--accent-h) / 0.16), #101115); border-radius: 11px; padding: 18px 20px; } .hm-a-head { display: flex; align-items: baseline; gap: 12px; } .hm-a-name { font-size: 15px; font-weight: 600; color: #ecebe6; } .hm-a-folder { font-size: 12px; color: #8a8a84; } .hm-a-meta { margin-top: 7px; font-size: 12.5px; color: #9a9a94; } .hm-a-clock { color: oklch(0.8 0.09 var(--accent-h)); } .hm-idle { color: oklch(0.84 0.10 72); } .hm-a-actions { display: flex; gap: 10px; margin-top: 14px; } .hm-a-hint { margin-top: 9px; font-size: 11.5px; color: #57574f; } .hm-recent-title { margin-top: 26px; } /* ---------- «Последние сессии» (/sessions) ---------- Дизайн design/design_handoff_sessions: журнал-таблица без внутреннего скролла, 12 строк на страницу, пагинация прижата к низу окна. Шапка колонок и строки используют ОДНУ сетку — разъехаться они не могут. */ .ss-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: cardNext 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Бюджет высоты жёсткий: окно 760px, внутри 12 строк по 38px плюс одна раскрытая панель. Отступы здесь меньше макетных ровно настолько, чтобы раскрытие не рождало скролл, — макет рисовался под окно min-height, а у приложения высота фиксированная. */ .ss-head { margin-top: 6px; display: flex; align-items: baseline; gap: 14px; } .ss-title { font-size: 11px; letter-spacing: 0.18em; color: #55564f; } .ss-count { font-size: 11px; color: #43443f; font-variant-numeric: tabular-nums; } .ss-cols, .ss-row { display: grid; grid-template-columns: 34px 60px 54px minmax(0, 1fr) 104px 176px; align-items: center; gap: 14px; } .ss-cols { margin-top: 8px; padding: 0 12px 9px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #4f5049; border-bottom: 1px solid rgba(255, 255, 255, 0.10); /* Тот же невидимый левый бортик, что у строк: без него колонки шапки стояли бы на 2px левее колонок содержимого. */ border-left: 2px solid transparent; } .ss-cols .r { text-align: right; } .ss-item { border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .ss-row { width: 100%; appearance: none; background: transparent; border: 0; /* Левый бортик рисуется всегда (прозрачным): иначе раскрытие сдвигало бы содержимое строки на 2px вправо. */ border-left: 2px solid transparent; font: inherit; text-align: left; padding: 0 12px; height: 38px; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .ss-row:hover { background: rgba(255, 255, 255, 0.03); } .ss-row.open { border-left-color: oklch(0.74 0.09 var(--accent-h) / 0.55); background: rgba(255, 255, 255, 0.03); } .ss-row .c-n { color: #4a4b45; font-size: 12px; font-variant-numeric: tabular-nums; } .ss-row .c-date, .ss-row .c-time { color: #7d7e77; font-size: 12.5px; font-variant-numeric: tabular-nums; } .ss-row .c-name { color: #dcdad5; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ss-row .c-dur { color: #9a9b94; font-size: 12.5px; font-variant-numeric: tabular-nums; } .ss-row .c-status { text-align: right; font-size: 12.5px; } /* Раскрытая панель. Левый бортик продолжает бортик строки — сплошная вертикальная отметка. */ .ss-details { display: flex; align-items: center; gap: 34px; padding: 9px 12px 11px 60px; background: rgba(255, 255, 255, 0.018); border-left: 2px solid oklch(0.74 0.09 var(--accent-h) / 0.55); font-size: 12.5px; } .ss-details .k { color: #5e5f58; } .ss-details .v { color: #dcdad5; } .ss-details .v.ok { color: oklch(0.78 0.09 var(--accent-h)); } .ss-details .v.rp { color: oklch(0.82 0.10 72); } /* Корзина — контекстное действие раскрытой панели: в списке никаких кнопок удаления нет. Приглушена, у правого края, не меняет высоту панели. */ .ss-trash { margin-left: auto; appearance: none; background: transparent; border: 0; padding: 2px; line-height: 0; color: #5e5f58; cursor: pointer; transition: color 0.12s; } .ss-trash:hover, .ss-trash:focus-visible { color: oklch(0.72 0.12 28); } /* Подтверждение удаления — модальное окно (.ns-overlay/.ns-modal из /new-stack): инлайновая врезка добавляла бы ~120px и выталкивала пагинацию за фиксированную высоту окна. */ /* Пустое состояние и служебные заметки не прилипают к заголовку раздела: тот же вертикальный ритм, что у таблицы (12px до шапки колонок). */ .ss-wrap .dr-empty { margin-top: 14px; } /* Распорка: при неполной странице прижимает пагинацию к низу, геометрия окна не меняется. */ .ss-spacer { flex: 1; min-height: 6px; } .ss-pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); } /* Ссылка возврата на этом экране ниже пагинации; общий отступ .dr-actionline здесь слишком щедрый для жёсткого бюджета высоты. */ .ss-wrap .dr-actionline { margin-top: 10px; } .ss-nav, .ss-pg { appearance: none; font: inherit; border: 0; background: transparent; cursor: pointer; font-size: 12.5px; padding: 4px 2px; transition: color 0.12s; } .ss-nav { color: #8f8f89; } .ss-nav:hover { color: oklch(0.78 0.09 var(--accent-h)); } /* На краю кнопка гаснет, но НЕ исчезает — ряд не дёргается. */ .ss-nav.off { color: #3a3b36; pointer-events: none; } .ss-pages { display: flex; align-items: center; gap: 4px; } .ss-pg { color: #6a6a65; font-variant-numeric: tabular-nums; } .ss-pg:hover { color: #cfcdc8; } .ss-pg.active { color: oklch(0.80 0.09 var(--accent-h)); border-bottom: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.5); } .ss-pg.gap { color: #3f4039; pointer-events: none; cursor: default; } /* Заглушка «Главное меню» */ .dr-menu-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1; min-height: 0; border: 1px dashed rgba(255, 255, 255, 0.10); border-radius: 12px; background: var(--surface-inset); padding: 40px 24px; } .dr-menu-stub .k { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #57574f; margin-bottom: 20px; } .dr-menu-stub .h { font-size: 24px; color: #e9e7e2; margin-bottom: 14px; } .dr-menu-stub .p { font-size: 13px; color: #8a8a84; max-width: 400px; line-height: 1.65; margin-bottom: 28px; text-wrap: pretty; } .dr-menu-stub .bar { font-size: 13px; color: oklch(0.74 0.09 var(--accent-h)); letter-spacing: 0.04em; } .dr-menu-stub .bar .lbl { color: #6a6a65; margin-left: 12px; } .dr-menu-stub .bar .crt { display: inline-block; width: 8px; height: 14px; margin-left: 5px; vertical-align: -2px; background: oklch(0.74 0.09 var(--accent-h)); animation: blink 1.4s ease-in-out infinite; } /* Календарь прогресса */ .dr-cal-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .dr-cal-stats { display: flex; flex-wrap: wrap; gap: 24px 20px; flex: 1; min-width: 440px; } .dr-cal-stat { flex: none; width: 150px; } .dr-cal-stat .lbl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #57574f; margin-bottom: 6px; } .dr-cal-stat .row { display: flex; align-items: baseline; gap: 6px; } .dr-cal-stat .val { font-size: 19px; } .dr-cal-stat .unit { font-size: 12px; color: #6a6a65; } .dr-cal-main { display: flex; gap: 20px; flex: 1; min-height: 0; } .dr-cal-left { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dr-cal-mscroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; } /* Сетка месяцев. Зазор по вертикали меньше горизонтального намеренно. На 180 днях шесть месяцев ложатся в 3×2 и упирались в высоту области. Первый заход считал пиксели: месяц с шестью недельными строками занимал 247px, два ряда с зазором давали 510 при доступных 509. Забрали 16px из отступов — стало 493 в 509, и локально скролл исчез. У пользователя он остался. Причина в том, что 16px запаса нечем защитить: высота месяца ЗАВИСЕЛА ОТ ШРИФТА И ДАННЫХ, а не только от нашей вёрстки. 1. Шапка месяца могла переноситься на вторую строку. «сентябрь 2026» плюс «1 ч 25 мин · 1 акт.» не влезают в 205px строки, .dr-cal-mtitle перенос не запрещал — месяц становился на 17px выше, два ряда давали 527 при 509. То есть достаточно обычных данных в сентябре, чтобы календарь сломался. 2. Высота шапки и строки дней недели считалась по line-height: normal, то есть по метрикам конкретного шрифта. Замер: с веб-шрифтом шапка 17px, с запасным моноширинным — 14px. Разница по 8px на месяц съедает половину запаса ещё до данных; сюда же попадает и «минимальный размер шрифта» в настройках браузера. Поэтому теперь высота месяца ДЕТЕРМИНИРОВАНА: - шапка не переносится никогда (nowrap + многоточие у названия, сводка не сжимается); - у шапки и строки дней недели line-height задан в пикселях, а не наследуется от метрик шрифта; - отступы поджаты ещё на 10px в сумме. Запас стал 44px вместо 16 и больше не зависит ни от месяца, ни от наработанного времени, ни от шрифта. Высоту ячеек по-прежнему не трогаем: у .dr-cal-day стоит aspect-ratio: 1, она следует из ширины колонки, и «немного поджать» её значит либо сузить календарь, либо сделать дни неквадратными. 365 дней по-прежнему прокручиваются: тринадцать месяцев в высоту окна не уложить никаким уплотнением, и это нормально. */ .dr-cal-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; row-gap: 10px; } .dr-cal-month { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; background: var(--surface-panel-2); /* По горизонтали 14px не меняем: от него зависит ширина колонки дней, а от неё — высота квадратной ячейки. */ padding: 8px 14px; } .dr-cal-month.current { border-color: rgba(120, 220, 180, 0.22); } /* Шапка месяца — РОВНО одна строка фиксированной высоты. line-height в пикселях, а не normal: иначе высота зависела бы от метрик шрифта (17px с веб-шрифтом против 14px с запасным) и «плавала» бы вместе с ним. flex-wrap: nowrap плюс многоточие у названия закрывают вторую причину — перенос при длинном названии месяца и длинной сводке. */ .dr-cal-mhead { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 6px; line-height: 14px; } .dr-cal-mtitle { font-size: 12.5px; color: #9a9a94; text-transform: capitalize; /* Название уступает сводке: «сентябрь 2026» рядом с «12 ч 45 мин · 28 акт.» не помещается, и что-то обязано сжаться. Сжимается название — месяц виден по первым буквам, а вот обрезанное время читалось бы как ошибка. */ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dr-cal-month.current .dr-cal-mtitle { color: #e9e7e2; } .dr-cal-msum { font-size: 10px; color: #6a6a65; text-align: right; white-space: nowrap; flex: 0 0 auto; } .dr-cal-wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-bottom: 2px; } .dr-cal-wk span { text-align: center; font-size: 9px; /* Как и у шапки: высота строки задана, а не взята из метрик шрифта. */ line-height: 12px; color: #4e4e49; text-transform: uppercase; min-width: 0; overflow: hidden; } .dr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } .dr-cal-day { appearance: none; aspect-ratio: 1; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 4px; font: inherit; font-size: 9.5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; } .dr-cal-day:hover { transform: scale(1.14); } .dr-cal-muted { aspect-ratio: 1; min-width: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; color: #33342f; } /* Боковая колонка календаря НЕ скроллится целиком: панели «Детали дня» и «Легенда» всегда видны на своих местах. Переменная часть здесь ровно одна — список стопок за день; при большом числе стопок скроллится только он (.dr-day-decks .lst), а не вся колонка. */ .dr-cal-side { width: 300px; flex: none; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; } .dr-cal-side > .dr-panel { flex: none; } /* Панель дня забирает остаток высоты и отдаёт его списку стопок. */ .dr-cal-side > .dr-panel:not(.legend) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dr-panel { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: var(--surface-panel-2); padding: 15px 16px; } .dr-panel.legend { padding: 13px 16px; } .dr-panel-title { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #57574f; margin-bottom: 12px; } .dr-panel.legend .dr-panel-title { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 11px; } .dr-day-title { font-size: 14px; color: #e6e4df; } .dr-kv { display: flex; flex-direction: column; gap: 9px; margin-top: 15px; font-size: 13px; } .dr-kv-row { display: flex; align-items: baseline; color: #8a8a84; } .dr-kv-row .dots { flex: 1; margin: 0 10px; border-bottom: 1px dotted rgba(255, 255, 255, 0.12); transform: translateY(-3px); } .dr-day-decks { margin-top: 16px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .dr-day-decks .hd { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #4e4e49; margin-bottom: 9px; } .dr-day-decks .lst { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; } .dr-day-deck { display: flex; align-items: center; gap: 10px; font-size: 12.5px; } .dr-day-deck .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfcdc8; } .dr-day-deck .mn { color: #8a8a84; white-space: nowrap; } .dr-day-empty { font-size: 13px; color: #6a6a65; margin-top: 15px; line-height: 1.5; } /* Две колонки: легенда — справочная часть, она не должна съедать высоту, которая нужна деталям дня (иначе колонка уходила в скролл). */ .dr-legend-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; } .dr-legend-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #8a8a84; } .dr-legend-row .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; } .dr-legend-hint { font-size: 11px; color: #57574f; margin-top: 12px; line-height: 1.5; } .dr-cal-tip { position: fixed; transform: translate(-50%, -100%); pointer-events: none; z-index: 50; background: #1a1c20; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; padding: 7px 10px; font-size: 11.5px; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.85); } .dr-cal-tip .main { color: #e6e4df; } .dr-cal-tip .xp { color: oklch(0.85 0.09 72); margin-top: 2px; } /* Экран изучения карточек */ .dr-study-zone { margin-top: auto; margin-bottom: auto; } /* Во время загрузки в этой зоне живёт сцена «Загрузка терминала», а не карточка: её место — слева СВЕРХУ, как у эха команды, поэтому вертикальное центрирование (auto-поля выше) отключаем. */ .dr-study-zone.top { margin-top: 0; } .dr-cardwrap { position: relative; perspective: 2000px; margin-bottom: 32px; } /* Переворот БЕЗ 3D-двухгранника. Прежняя механика (preserve-3d + постоянный rotateX(180) у оборота + backface-visibility) на живом iPhone Safari ненадёжна: браузер рендерит грани отдельными слоями, и обе стороны просвечивали друг сквозь друга — зеркальный текст и «четыре язычка» (ручная приёмка 2026-08-10, и в занятии, и в проверке словаря). Теперь видима ровно одна грань (вторая — visibility:hidden из рендера), а анимация — две фазы на самих гранях (drFlipCard в terminal.js). Возвращение preserve-3d/rotateX(180deg) сюда — возвращение того бага. */ .dr-card { position: relative; height: 400px; cursor: pointer; } .dr-face { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 48px; } .dr-face.front { background: linear-gradient(180deg, #141519, #101115); } .dr-face.back { border-color: oklch(0.74 0.05 var(--accent-h) / 0.26); background: linear-gradient(180deg, #13161a, #0f1215); transition: border-color 0.22s, background 0.22s; } .dr-face-inner { display: flex; flex-direction: column; align-items: center; transform: translateY(-16px); } .dr-face-label { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: #4e4e49; margin-bottom: 11px; } .dr-face-rule { width: 90px; height: 1px; background: rgba(255, 255, 255, 0.12); margin-bottom: 20px; } .dr-face-text { white-space: pre-line; /* переносы строк из карточек сохраняются при показе */ font-size: 23px; font-weight: 500; line-height: 1.62; text-align: center; text-wrap: pretty; max-width: 800px; color: #ecebe6; } /* Язычок-закладка категории слова: узкая полоса на внутренней левой кромке карточки, чуть ниже верхнего угла. Живёт ВНУТРИ стороны карточки, поэтому переворачивается вместе с ней и есть на обеих сторонах. Полупрозрачный, при наведении чуть ярче; свечения и подписи рядом нет. Красный не используется: он занят ошибкой («Повторить»). */ .dr-kind { position: absolute; top: 38px; left: 1px; z-index: 3; width: 6px; height: 30px; border-radius: 0 3px 3px 0; background: var(--kind-color, rgba(255, 255, 255, 0.3)); opacity: 0.5; cursor: default; transition: opacity 0.15s ease; } /* Область нажатия шире самой полосы: на телефоне в 6 px пальцем не попасть. Вид при этом не меняется — растёт только «невидимая» зона. */ .dr-kind::before { content: ""; position: absolute; inset: -10px -14px -10px -6px; } .dr-kind[data-kind="noun"] { --kind-color: oklch(0.68 0.13 300); } /* фиолетовый */ .dr-kind[data-kind="verb"] { --kind-color: oklch(0.78 0.11 165); } /* мятно-зелёный */ .dr-kind[data-kind="adj_adv"] { --kind-color: oklch(0.75 0.10 235); } /* голубой */ .dr-kind[data-kind="phrase"] { --kind-color: oklch(0.80 0.10 72); } /* янтарный */ /* Класса .on здесь больше нет: подсказка показывается только по наведению и с клавиатуры. Клик по язычку раньше закреплял её на пару секунд — элемент отвечал на нажатие, хотя действия за ним не было, и это читалось как зависший интерфейс. */ .dr-kind:hover, .dr-kind:focus-visible { opacity: 0.85; outline: none; } /* Подсказка — одно слово, появляется справа от язычка. Не сдвигает раскладку (absolute) и не перехватывает мышь. */ .dr-kind-tip { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(21, 23, 27, 0.94); color: #d7d5cf; font-size: 11px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.14s ease; } /* Hover-показ — только у настоящей мыши. iOS «залипающий» tap-hover оставлял подсказку видимой навсегда, и она просвечивала сквозь заднюю грань при перевороте (баг ручной приёмки 2026-08-10). На тач подсказку показывает транзиентный портал cardTipShow — вне вращаемой грани. */ @media (hover: hover) and (pointer: fine) { .dr-kind:hover .dr-kind-tip, .dr-kind:focus-visible .dr-kind-tip { opacity: 1; visibility: visible; } } /* Язычок «i» — доп. пояснение карточки. Нейтральный серый, ниже цветного язычка типа; при наведении/фокусе подсвечивается. Панель с текстом — отдельный оверлей (.dr-card-panel), а не тултип: пояснение бывает длинным и его нужно читать/копировать. */ .dr-info { position: absolute; top: 78px; left: 1px; z-index: 3; width: 6px; /* Та же геометрия, что у язычка типа (.dr-kind, 30px): это элементы одной системы, разная высота читалась как неряшливость (ручная приёмка 2026-08-10). Отличается только цвет и функция. */ height: 30px; border-radius: 0 3px 3px 0; background: rgba(255, 255, 255, 0.22); opacity: 0.55; cursor: pointer; transition: opacity 0.15s ease; } .dr-info::before { content: ""; position: absolute; inset: -10px -14px -10px -6px; /* зона нажатия шире полосы (палец) */ } .dr-info .g { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); font-size: 11px; font-style: italic; color: #8a8a84; opacity: 0; transition: opacity 0.14s ease; pointer-events: none; } .dr-info:hover, .dr-info:focus-visible { opacity: 0.95; outline: none; } @media (hover: hover) and (pointer: fine) { .dr-info:hover .g, .dr-info:focus-visible .g { opacity: 1; } } /* Буква «T» — три примера употребления: полупрозрачная, «вдавленная» в поверхность карточки (тёмная верхняя и светлая нижняя грани, как оттиск). Правый нижний угол стороны; при наведении появляется подпись «3 примера». */ /* Кнопка примеров: тот же язык, что у подписей клавиш под карточкой ([W], [S], [space]) — скобки и есть обещание, что клавиша существует. Наведение только подсвечивает её; саму панель открывает клик или «T», иначе большой блок мелькал бы при случайном движении мыши. */ .dr-tex { position: absolute; right: 16px; bottom: 12px; z-index: 3; appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 6px; padding: 3px 8px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.35; color: var(--text-dim, #8a839b); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .dr-tex:hover, .dr-tex:focus-visible { color: #d7d5cf; border-color: rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.04); outline: none; } /* Открытая панель — кнопка «нажата»: видно, что повторный клик её закроет. */ .dr-tex.on { color: #d7d5cf; border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.07); } .dr-tex-hint { position: absolute; right: calc(100% + 2px); top: 50%; transform: translateY(-50%); padding: 3px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(21, 23, 27, 0.94); color: #d7d5cf; font-size: 11px; font-weight: 400; text-shadow: none; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.14s ease; } @media (hover: hover) and (pointer: fine) { .dr-tex:hover .dr-tex-hint, .dr-tex:focus-visible .dr-tex-hint { opacity: 1; visibility: visible; } } /* Панель пояснения/примеров: оверлей в рамке карточки (не вращается с ней), текст выделяется и копируется. Закрывается кликом по язычку/букве, переворотом карточки или Esc. */ .dr-card-panel { position: absolute; left: 26px; right: 26px; bottom: 46px; z-index: 6; max-height: 62%; overflow-y: auto; background: rgba(17, 19, 23, 0.97); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 14px 18px; box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.9); animation: drPopIn 0.16s ease; user-select: text; cursor: auto; } .dr-card-panel .cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #6d6d66; margin-bottom: 9px; } .dr-panel-copy { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 10.5px; letter-spacing: 0.06em; text-transform: none; color: #9a9a94; cursor: pointer; transition: color 0.12s, border-color 0.12s; } /* Действия заголовка одной группой у правого края. Именно группа, а не два отдельных ребёнка: у .cap стоит space-between, и три элемента он растащил бы по всей ширине — «копировать» уезжало в середину панели. */ .dr-panel-actions { display: flex; align-items: center; gap: 6px; flex: none; } /* Крестик рядом с «копировать». Та же высота и рамка, что у соседа, — иначе заголовок панели стал бы выше и карточка подпрыгнула бы при открытии. */ .dr-panel-x { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; line-height: 1; color: #9a9a94; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .dr-panel-x:hover, .dr-panel-x:focus-visible { color: #d7d5cf; border-color: rgba(255, 255, 255, 0.3); outline: none; } .dr-panel-copy:hover { color: #d7d5cf; border-color: rgba(255, 255, 255, 0.3); } .dr-panel-text { font-size: 13.5px; line-height: 1.6; color: #d7d5cf; white-space: pre-line; } .dr-panel-ex { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; padding: 6px 0; } .dr-panel-ex + .dr-panel-ex { border-top: 1px solid rgba(255, 255, 255, 0.06); } .dr-panel-ex .n { color: #57574f; font-size: 12px; padding-top: 1px; } .dr-panel-ex .src { grid-column: 2; font-size: 13.5px; color: #ecebe6; } .dr-panel-ex .ru { grid-column: 2; font-size: 12.5px; color: #8a8a84; margin-top: 2px; } .dr-flash-badge { position: absolute; top: 14px; left: 16px; font-size: 12px; letter-spacing: 0.03em; } .dr-flash-badge.known { color: oklch(0.82 0.10 var(--accent-h)); } .dr-flash-badge.rep { color: oklch(0.72 0.13 30); } .dr-speak { position: absolute; top: 11px; right: 13px; appearance: none; background: transparent; border: 0; padding: 7px; cursor: pointer; color: #6a6a65; line-height: 0; transition: color 0.12s; } .dr-progressrow { position: relative; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: #7d7d78; margin-bottom: 20px; } .dr-progressrow .br { color: #5f5f5a; } .dr-bar { position: relative; display: inline-block; width: 240px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; vertical-align: middle; } .dr-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: oklch(0.74 0.09 var(--accent-h)); border-radius: 4px; transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .dr-progressrow .pct { color: #9a9a94; } .dr-progressrow .spacer { flex: 1; } .dr-progressrow .ok { color: oklch(0.74 0.09 var(--accent-h)); } .dr-progressrow .rp { color: oklch(0.74 0.11 30); } /* Переключатель перемешивания рядом с индикатором прогресса (терминальный стиль, как .st-clock). Включённый — бирюзовый акцент. */ .st-shuffle { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; font-size: 12.5px; cursor: pointer; color: #7d7d78; white-space: nowrap; transition: color 0.12s; } .st-shuffle .k { color: #5f5f5a; transition: color 0.12s; } .st-shuffle:hover { color: #cfcdc8; } .st-shuffle:hover .k { color: #8a8a84; } .st-shuffle.on { color: oklch(0.80 0.10 var(--accent-h)); } .st-shuffle.on .k { color: oklch(0.72 0.10 var(--accent-h)); } /* Ненавязчивое уведомление «Перемешивание включено» — всплывает над строкой прогресса (position:absolute, поэтому раскладку не сдвигает) и гаснет само. */ /* Тост о смене режима перемешивания — в верхнем левом углу рамки карточки, поверх содержимого (absolute внутри .dr-cardwrap), высоту карточки не меняет и ничего не сдвигает. Тёмная полупрозрачная подложка; зелёная рамка на «вкл», нейтральная приглушённая на «выкл» (класс .off). Плавно гаснет (класс .show). */ .st-shuffle-note { position: absolute; top: 14px; left: 14px; z-index: 4; padding: 4px 10px; border-radius: 7px; border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.5); background: rgba(15, 17, 20, 0.86); color: #d3d1cb; font-size: 11.5px; white-space: nowrap; backdrop-filter: blur(2px); opacity: 0; transform: translateY(-3px); visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; } .st-shuffle-note.off { border-color: rgba(255, 255, 255, 0.16); } .st-shuffle-note.show { opacity: 1; transform: translateY(0); visibility: visible; } /* Постоянный индикатор раунда в строке состояния: «раунд N» отдельным спокойным сегментом между счётчиком повторов и «карточка X/Y». Тон нейтрально-светлый, не спорит с зелёным (помню) и оранжевым (повторить). */ .dr-progressrow .st-round { color: #b7b5af; } .dr-progressrow .st-round [data-round] { color: #e9e7e2; font-variant-numeric: tabular-nums; } /* Тост старта раунда «Раунд N · повторяем M карточек» — по центру верхней кромки рамки карточки (absolute внутри .dr-cardwrap, высоту не меняет). Зелёный акцент сессии; появляется и гаснет плавно (класс .show). Не перекрывает .st-shuffle-note (та в левом углу). */ .dr-round-note { position: absolute; top: 14px; left: 50%; z-index: 5; transform: translate(-50%, -3px); padding: 4px 12px; border-radius: 7px; border: 1px solid oklch(0.78 0.10 var(--accent-h) / 0.55); background: rgba(15, 17, 20, 0.9); color: #e2e0da; font-size: 11.5px; letter-spacing: 0.02em; white-space: nowrap; backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .dr-round-note.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .dr-controls { display: flex; gap: 9px; flex-wrap: wrap; } .dr-ctl { flex: 1; min-width: 120px; font-family: inherit; font-size: 13px; padding: 12px; border-radius: 8px; cursor: pointer; transition: all 0.12s; } .dr-ctl:active { transform: scale(0.97); } .dr-ctl.neutral { background: #191a1f; color: #e9e7e2; border: 1px solid rgba(255, 255, 255, 0.1); } .dr-ctl.neutral:hover { border-color: rgba(255, 255, 255, 0.22); } .dr-ctl.neutral .k { color: #6f6f6a; } .dr-ctl.know { background: oklch(0.74 0.09 var(--accent-h) / 0.12); color: oklch(0.84 0.07 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.3); } .dr-ctl.know:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.2); } .dr-ctl.rep { background: oklch(0.72 0.10 30 / 0.1); color: oklch(0.8 0.09 30); border: 1px solid oklch(0.72 0.10 30 / 0.28); } .dr-ctl.rep:hover { background: oklch(0.72 0.10 30 / 0.18); } .dr-ctl.know .k, .dr-ctl.rep .k { opacity: 0.6; } .dr-ctl[disabled] { cursor: not-allowed; opacity: 0.4; } /* Итог сессии */ .dr-finish { display: flex; flex-direction: column; align-items: center; gap: 26px; /* межраундовый экран: статистика ↔ кнопки; на финале ребёнок один */ padding: 6px 0 4px; animation: cardNext 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } /* Единая панель итога фиксированной ширины: подложка + две колонки + кнопки собраны в одну композицию, поэтому кнопки центрируются относительно всей панели, а не относительно круга справа. */ .dr-finish-panel { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* Статусная подложка на всю ширину панели: тёмная с лёгким зелёным оттенком, тонкая зелёная рамка, минимальная прозрачность — без свечения и эффекта большого уведомления. Текст по центру. Цвет не зависит от точности. */ .dr-finish-band { width: 100%; box-sizing: border-box; padding: 13px 18px 12px; border-radius: 12px; border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.26); background: oklch(0.32 0.045 var(--accent-h) / 0.16); text-align: center; } .dr-finish-band .dr-finish-hd { margin-bottom: 5px; } .dr-finish-band .dr-finish-sub { margin-bottom: 0; } /* Досрочное завершение — та же спокойная подложка, но в янтарном тоне под янтарный заголовок. */ .dr-finish-band.early { border-color: oklch(0.75 0.09 72 / 0.32); background: oklch(0.34 0.05 72 / 0.15); } /* Loader финала (пока backend не вернул полный ответ): спокойные пульсирующие точки + подпись. min-height близок к высоте финальной панели, чтобы переход loader → SESSION COMPLETE не прыгал по вертикали (зона центрируется margin:auto). */ .dr-finish-load { min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; animation: cardNext 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .dr-finish-load-dots { display: flex; gap: 7px; } .dr-finish-load-dots span { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.74 0.09 var(--accent-h) / 0.65); animation: finLoadPulse 1s ease-in-out infinite; } .dr-finish-load-dots span:nth-child(2) { animation-delay: 0.15s; } .dr-finish-load-dots span:nth-child(3) { animation-delay: 0.3s; } .dr-finish-load-cap { font-size: 12px; color: #6a6a65; letter-spacing: 0.04em; } @keyframes finLoadPulse { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } } .dr-finish-grid { display: flex; gap: 36px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; } .dr-finish-stats { flex: 1; min-width: 250px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; } .dr-finish-hd { font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: #4e4e49; margin-bottom: 6px; } /* Вторая строка итога — обычный регистр, чуть заметнее приглушённого SESSION COMPLETE над ней; отдельная строка с нормальным межстрочным отступом до сводки. */ .dr-finish-sub { font-size: 13px; line-height: 1.4; color: #b7b4ad; margin-bottom: 14px; } /* Свободная тренировка: спокойная приглушённая подпись под SESSION COMPLETE вместо прежней янтарной плашки-предупреждения. Это не предупреждение — ничего не акцентируем, просто нейтральный факт «расписание не изменено». */ .dr-finish-sub.practice { font-size: 12px; color: #7c7a75; letter-spacing: 0.01em; } /* Досрочное завершение — тот же финальный экран, но заголовок янтарный. */ .dr-finish-hd.early { color: oklch(0.75 0.09 72); } .dr-finish-row { display: flex; align-items: baseline; color: #8a8a84; } .dr-finish-row .dots { flex: 1; margin: 0 10px; border-bottom: 1px dotted rgba(255, 255, 255, 0.12); transform: translateY(-3px); } .dr-ring { position: relative; width: 128px; height: 128px; flex: none; } .dr-ring .in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dr-ring .num { font-size: 24px; font-weight: 500; color: #ecebe6; } .dr-ring .cap { /* «ПЕРВЫЙ ПРОХОД» в одну строку шире внутреннего диаметра кольца (128px, внутри ~100px) и налезал на дугу. Ограничиваем ширину — подпись переносится на две строки («ПЕРВЫЙ» / «ПРОХОД») и остаётся внутри. */ max-width: 72px; text-align: center; line-height: 1.5; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #5f5f5a; margin-top: 2px; } .dr-finish-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 440px; margin-top: 2px; } /* Финал: две равные кнопки-повтора в одной строке (исходное / обратное направление), под каждой — приглушённая подпись направления. Кнопки равной высоты: колонки тянутся по строке (align-items:stretch), кнопка внутри колонки — flex:1, поэтому короткий и длинный текст дают одинаковую высоту. */ .dr-fin-choices { display: flex; gap: 10px; width: 100%; align-items: stretch; } .dr-fin-choice { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dr-fin-choice .dr-fin-secondary { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; } .dr-fin-choice-sub { font-size: 11px; color: #6a6a65; letter-spacing: 0.02em; text-align: center; } .dr-fin-primary { width: 100%; padding: 14px; border-radius: 9px; font: inherit; font-size: 13.5px; cursor: pointer; background: oklch(0.74 0.09 var(--accent-h) / 0.18); color: oklch(0.86 0.07 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.45); transition: all 0.12s; } .dr-fin-primary:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.26); } .dr-fin-primary:active { transform: scale(0.985); } .dr-fin-primary[disabled] { cursor: not-allowed; opacity: 0.4; } /* Индикатор клавиши [Space] на основной кнопке «Подучить N» — приглушённый, как у клавиш-подсказок на карточных кнопках. */ .dr-fin-primary .k { opacity: 0.62; margin-right: 2px; } .dr-fin-secondary { width: 100%; padding: 13px; border-radius: 9px; font: inherit; font-size: 13px; cursor: pointer; background: #191a1f; color: #cfcdc8; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.12s; } .dr-fin-secondary:hover { border-color: rgba(255, 255, 255, 0.24); } .dr-fin-secondary:active { transform: scale(0.985); } .dr-fin-ghost { width: 100%; padding: 10px; border-radius: 9px; font: inherit; font-size: 12.5px; cursor: pointer; background: transparent; color: #8a8a84; border: 0; transition: color 0.12s; } .dr-fin-ghost:hover { color: #cfcdc8; } /* Нижняя строка терминала. На шести основных экранах здесь не инструкция, а короткая мысль о смысле раздела (см. SCREEN_HINTS в terminal.js), поэтому строка стала длиннее и переносится. min-height держит место под две строки ВСЕГДА. Без него подвал прыгал бы при каждом переходе: у разных разделов фразы разной длины, и одна укладывается в строку, другая в две. Тон, размер и положение прежние — меняется только то, что здесь написано. max-width задан так, чтобы самая длинная из утверждённых фраз укладывалась в две строки: иначе перенос съедал бы третью и подвал всё-таки поехал бы. */ .dr-hints { text-align: center; font-size: 11.5px; line-height: 1.55; color: #57574f; margin: 16px auto 0; max-width: 780px; min-height: 36px; text-wrap: pretty; } /* Модалка «поделиться стопкой» */ .dr-share-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(6, 7, 9, 0.72); display: flex; align-items: center; justify-content: center; padding: 24px; animation: fadeIn 0.16s ease; } .dr-share { width: 100%; max-width: 450px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: var(--surface-panel); overflow: hidden; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); animation: drPopIn 0.18s cubic-bezier(0.2, 0.7, 0.2, 1); } .dr-share-titlebar { display: flex; align-items: center; gap: 11px; padding: 11px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: var(--surface-titlebar); } .dr-share-titlebar .dots { display: flex; gap: 6px; } .dr-share-titlebar .dots span { width: 10px; height: 10px; border-radius: 50%; background: #3a3b3f; } .dr-share-titlebar .ttl { flex: 1; text-align: center; font-size: 12px; color: #7d7d78; } .dr-share-close { appearance: none; background: transparent; border: 0; padding: 2px 4px; font: inherit; font-size: 13px; color: #6a6a65; cursor: pointer; } .dr-share-body { padding: 24px 24px 20px; } .dr-share-cap { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #5f5f5a; margin-bottom: 18px; } .dr-share-cap.email { margin-bottom: 16px; } .dr-share-deck { font-size: 14px; color: #ecebe6; margin-bottom: 5px; } .dr-share-count { font-size: 12px; color: #6a6a65; margin-bottom: 22px; } .dr-share-lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a65; margin-bottom: 9px; } .dr-share-linkrow { display: flex; gap: 8px; margin-bottom: 18px; } .dr-share-url { flex: 1; min-width: 0; font-size: 12.5px; color: #9a9a94; background: #191a1f; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; padding: 11px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-share-copy { flex: none; padding: 11px 14px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; background: oklch(0.74 0.09 var(--accent-h) / 0.14); color: oklch(0.84 0.07 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.3); transition: all 0.12s; } .dr-share-copy:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.22); } .dr-share-copy:active { transform: scale(0.97); } .dr-share-btns { display: flex; gap: 9px; } .dr-share-btn { flex: 1; padding: 12px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; background: #191a1f; color: #e9e7e2; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.12s; } .dr-share-btn:hover { border-color: rgba(255, 255, 255, 0.24); } .dr-share-btn:active { transform: scale(0.97); } .dr-share-esc { text-align: center; margin-top: 20px; font-size: 11.5px; color: #57574f; } .dr-share-esc.email { margin-top: 18px; } .dr-share-note { font-size: 13px; color: #8a8a84; margin-bottom: 20px; } .dr-share-input { width: 100%; font-family: inherit; font-size: 13px; color: #e9e7e2; background: #191a1f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; padding: 12px 13px; outline: none; transition: border-color 0.12s; } .dr-share-input.err { border-color: oklch(0.72 0.12 30 / 0.6); } .dr-share-err { font-size: 11.5px; color: oklch(0.74 0.13 30); margin-top: 8px; } .dr-share-ok { font-size: 11.5px; color: oklch(0.82 0.10 var(--accent-h)); margin-top: 8px; } .dr-share-lbl2 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a65; margin: 18px 0 9px; } .dr-share-preview { font-size: 12.5px; color: #9a9a94; line-height: 1.65; background: #191a1f; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 7px; padding: 12px 13px; } .dr-share-preview .t { color: #cfcdc8; } .dr-share-preview .u { color: oklch(0.78 0.08 var(--accent-h)); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-share-actions { display: flex; gap: 9px; margin-top: 18px; } .dr-share-back { flex: none; padding: 12px 16px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; background: #191a1f; color: #cfcdc8; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.12s; } .dr-share-back:hover { border-color: rgba(255, 255, 255, 0.24); } .dr-share-send { flex: 1; padding: 12px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; background: oklch(0.74 0.09 var(--accent-h) / 0.16); color: oklch(0.85 0.07 var(--accent-h)); border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.4); transition: all 0.12s; } .dr-share-send:hover { background: oklch(0.74 0.09 var(--accent-h) / 0.24); } /* Профиль */ .dr-profile { width: 100%; max-width: 660px; animation: cardNext 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); flex: 1; min-height: 0; /* Контейнер общий для профиля, подписки, формата терминала, прогресса и журнала занятий. Раньше здесь стоял overflow-y: hidden («контент подогнан под окно»), и это молча срезало низ там, где содержимое переменное: журнал занятий терял больше тысячи пикселей, а на подписке обрывался последний абзац. auto ничего не меняет для коротких экранов — полоса появляется только когда содержимое действительно не влезло. */ overflow-y: auto; padding-right: 4px; } /* Сравнение с другом — единственный экран раздела, которому 660px мало: в нём четыре колонки, три из них фиксированной ширины. Расширяем до всей рабочей области окна, как в макете. */ .dr-profile.wide { max-width: 100%; } .dr-sec-title { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #57574f; margin-bottom: 12px; } .dr-plist { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .dr-prow { display: flex; align-items: baseline; } .dr-prow .k { color: #8a8a84; } .dr-prow .dots { flex: 1; margin: 0 12px; border-bottom: 1px dotted rgba(255, 255, 255, 0.14); transform: translateY(-3px); } .dr-prow .v { color: #e9e7e2; } /* Строка «уровень»: выделяем только текущее значение — крупнее на 2px, полужирным, приглушённым янтарным акцентом; «/ 100» чуть меньше и нейтрально-серым. Без свечения/фона/рамки; базовый размер .dr-plist = 13px. */ .dr-prow .lvl-cur { font-size: 15px; font-weight: 600; color: oklch(0.84 0.1 72); } .dr-prow .lvl-max { font-size: 12px; color: #6a6a65; } /* Дополнительный отступ сверху: визуально отделяет строку от предыдущих (в .dr-plist к flex-gap 8px прибавляется этот margin). */ .dr-prow.sep { margin-top: 12px; } /* Кликабельный статус индекса: базовый цвет зоны (--sc) и яркий hover-цвет той же зоны (--sh) задаются инлайном; переход по `color`, а не `filter` — filter на тексте переключает режим сглаживания и мерцает при уходе курсора. */ .dr-idxstat { appearance: none; background: transparent; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--sc); transition: color 0.12s; } .dr-idxstat:hover, .dr-idxstat:focus-visible { color: var(--sh); outline: none; } .dr-xpbar { font-size: 13px; letter-spacing: 0.03em; color: #6a6a65; margin: 1px 0 2px; } .dr-xpbar .f { color: oklch(0.74 0.09 var(--accent-h)); } .dr-xpbar .e { color: #33342f; } .dr-xpbar .lb { color: #8a8a84; } /* ===== Полоска уровня (модель DeepReader): шкала в пределах уровня, ===== */ /* золотая заливка + голубой сегмент «сегодня» + тултип при наведении. */ .dr-xp2 { --cur: 0%; --day: 0%; --tw: 0%; position: relative; width: min(100%, 560px); margin: 4px 0 14px; } /* Подпись над полоской: почему часть голубая. */ .dr-xp2-note { margin-bottom: 5px; font-size: 11px; line-height: 1.3; color: rgba(92, 214, 255, 0.72); text-align: right; } .dr-xp2-track { position: relative; height: 12px; border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.28); border-radius: 999px; background: #14150f; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); overflow: hidden; } /* Золотая заливка = весь опыт внутри уровня. */ .dr-xp2-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--cur); background: linear-gradient(90deg, oklch(0.62 0.09 var(--accent-h) / 0.85), oklch(0.74 0.1 var(--accent-h) / 0.9)); transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.14s ease, box-shadow 0.14s ease; } /* Голубой сегмент = опыт, полученный сегодня (от начала дня до текущего). */ .dr-xp2-today { position: absolute; top: 0; bottom: 0; left: var(--day); width: var(--tw); min-width: 3px; /* маленький прирост тоже виден, не искажая пропорцию */ background: linear-gradient(90deg, rgba(71, 180, 226, 0.85), rgba(125, 224, 255, 0.92)); box-shadow: 0 0 8px rgba(92, 214, 255, 0.22); cursor: default; outline: none; transition: filter 0.14s ease, box-shadow 0.14s ease; } /* Прозрачная зона «остаток» справа от иглы — своя подсказка при наведении. */ .dr-xp2-remaining { position: absolute; top: 0; bottom: 0; left: var(--cur); right: 0; background: transparent; cursor: default; transition: background 0.14s ease; } /* Затемнение полоски при наведении на неё (модель DeepReader, 140ms ease): вся заливка приглушается, «остаток» слегка подсвечивается — единый живой эффект. */ .dr-xp2-track:hover .dr-xp2-fill { filter: saturate(0.96) brightness(0.9); box-shadow: 0 0 9px oklch(0.74 0.09 var(--accent-h) / 0.18); } .dr-xp2-track:hover .dr-xp2-today { filter: saturate(0.96) brightness(0.9); box-shadow: 0 0 10px rgba(92, 214, 255, 0.3); } .dr-xp2-track:hover .dr-xp2-remaining { background: rgba(230, 228, 223, 0.06); } /* Игла текущего XP на границе заливки. */ .dr-xp2-needle { position: absolute; top: -1px; bottom: -1px; left: clamp(1px, var(--cur), calc(100% - 1px)); width: 2px; border-radius: 999px; transform: translateX(-50%); background: oklch(0.86 0.11 var(--accent-h)); box-shadow: 0 0 7px oklch(0.8 0.11 var(--accent-h) / 0.5); pointer-events: none; } .dr-xp2-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #6a6a65; } /* Стилизованная подсказка сегмента. Живёт в обёртке .dr-xp2 (ВНЕ overflow трека, иначе режется), координаты (left/top) ставит JS (xpTipShow) от наведённого сегмента; показ/скрытие — класс .on. */ /* Тултип XP живёт в body-портале (см. xpTipLayer в terminal.js) и позиционируется fixed по координатам сегмента — так его не режет ни один ancestor с overflow, и ничего в макете не сдвигается. z-index выше fold-поповера (120). */ .dr-xp2-tip { position: fixed; left: -9999px; top: -9999px; padding: 5px 9px; border: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.45); border-radius: 6px; background: #14150f; color: #e6e4df; font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.85); opacity: 0; visibility: hidden; transition: opacity 0.12s ease; pointer-events: none; z-index: 130; } .dr-xp2-tip.on { opacity: 1; visibility: visible; } /* Транзиентная подсказка язычков карточки (портал cardTipShow): пояснение бывает длинным — переносим строки и ограничиваем ширину вьюпортом. */ .dr-card-tip { white-space: normal; max-width: min(320px, calc(100vw - 24px)); text-align: left; line-height: 1.45; } /* ===== Полоска индекса обучения (перенос «Индекса читателя» DeepReader) ===== */ /* Градиент красный→зелёный из 6 стыкующихся сегментов; маркер с числом над */ /* полоской на позиции score/max, цвет маркера — по зоне текущего значения. */ .dr-idx { --idx: 0%; --idx-color: rgba(226, 197, 99, 0.94); position: relative; width: min(100%, 560px); margin: 8px 0 14px; padding-top: 22px; } .dr-idx-marker { position: absolute; left: clamp(10px, var(--idx), calc(100% - 10px)); top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); pointer-events: none; } .dr-idx-marker-lb { font-size: 12px; line-height: 1; color: var(--idx-color); text-shadow: 0 0 9px var(--idx-color); } .dr-idx-marker-pin { width: 2px; height: 15px; border-radius: 999px; background: var(--idx-color); box-shadow: 0 0 8px var(--idx-color); } .dr-idx-track { display: flex; width: 100%; height: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: #14150f; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4); } .dr-idx-seg { min-width: 0; } .dr-idx-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #6a6a65; } /* ===== Терминальная загрузка при переходах между разделами ===== */ /* Точки набегают одна за другой (не мигают): 0.7s, шаговая анимация. */ @keyframes drdots { 0%, 15% { content: "."; } 40% { content: ".."; } 65%, 100% { content: "..."; } } .dr-load { display: flex; flex-direction: column; align-items: flex-start; padding: 2px; animation: fadeIn 0.14s ease; } /* Переход ВНУТРИ раздела (открытие папки, стопки): сцена занимает место уже прочитанного экрана, а не списка, начинающегося сверху, поэтому выравнивается по центру области — иначе строка в левом верхнем углу пустого поля теряется и выглядит как обрывок. min-height: 100% удерживает высоту области: без него зона схлопнулась бы под две строки текста, рамка терминала дёрнулась бы, а после загрузки прыгнула обратно. Именно 100%, а не подобранное число пикселей: зону растягивает флекс-родитель (.dr-body → .dr-anim-in → зона, все flex: 1 1 0), её высота определена, и процент считается от неё при любом размере окна. */ .dr-load.center { align-items: center; justify-content: center; text-align: center; min-height: 100%; } /* Загрузка внутри уже отрисованной страницы: крошки и командная строка на месте, ждём только содержимое. Резерв по высоте держит геометрию — без него терминал дёрнулся бы в момент подстановки данных. */ .dr-load.inline { align-items: flex-start; text-align: left; min-height: 220px; padding-top: 6px; } .dr-load .ttl { font-size: 15.5px; letter-spacing: 0.01em; color: oklch(0.84 0.11 74); } .dr-load .ttl::after { content: "..."; animation: drdots 0.7s steps(1, end) infinite; white-space: pre; } .dr-load .desc { font-size: 12.5px; color: #6a6a65; margin-top: 10px; max-width: 46ch; line-height: 1.5; text-wrap: pretty; } .dr-load .err { font-size: 15px; color: oklch(0.72 0.15 34); margin-bottom: 9px; } .dr-load .err-desc { font-size: 12.5px; color: #6a6a65; margin-bottom: 18px; max-width: 44ch; line-height: 1.5; text-wrap: pretty; } .dr-retry { appearance: none; font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 15px; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); color: #cfcdc8; transition: all 0.12s; } .dr-retry:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.04); } /* Приглушённое эхо принятой команды — на месте обычной командной строки. */ /* Статус перехода внутри картотеки. Янтарный, как всё, что в терминале означает «идёт работа»: это не ошибка и не готовый результат. Стоит на месте каретки и живёт 375мс, поэтому появляется мягко — иначе на быстрых кликах строка дёргается. */ .dr-cmd .st { margin-left: 10px; color: oklch(0.78 0.08 72); animation: fadeIn 0.14s ease-out; } .dr-cmd.echo { color: #5f5f5a; } .dr-cmd.echo .t { color: oklch(0.60 0.06 var(--accent-h)); cursor: default; } /* ===== Разделы прогрессии: «Уровень и опыт» (/level), «Дневные рубежи» (/goals) ===== */ .pg-note { font-size: 12px; line-height: 1.7; color: #8a8a84; margin: 14px 0 4px; max-width: 560px; } .pg-note.dim { font-size: 11.5px; color: #57574f; } .pg-note .dr-stat { font-size: inherit; } /* Лестница рубежей — моноширинная колонка, как в DeepReader: ✓ достигнут (зелёный) · → следующий (жёлтый) · будущие приглушены. */ .pg-ladder { margin: 14px 0 4px; font-size: 13px; line-height: 1.75; white-space: pre; } .pg-mrow.earned { color: oklch(0.80 0.09 var(--accent-h)); } .pg-mrow.next { color: oklch(0.84 0.10 72); } .pg-mrow.future { color: #57574f; } /* «Ритм обучения»: серия активных дней точками — ● набрано (бирюзовый), ○ осталось (приглушённый), рядом счётчик N / target. */ .rh-streak { font-size: 22px; letter-spacing: 3px; line-height: 1; margin: 6px 0 16px; } .rh-streak .on { color: oklch(0.80 0.11 var(--accent-h)); } .rh-streak .off { color: #3a3a36; } .rh-streak .rh-count { font-size: 13px; letter-spacing: normal; color: #8a8a84; margin-left: 8px; vertical-align: 2px; } /* ---------- «Управление подпиской» (/subscription) ---------- */ .sub-benefits { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; } .sub-benefits li { position: relative; padding-left: 20px; font-size: 13px; color: #cfcdc8; } .sub-benefits li::before { content: "✓"; position: absolute; left: 0; color: oklch(0.80 0.10 var(--accent-h)); } .sub-tariffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; } @media (max-width: 560px) { .sub-tariffs { grid-template-columns: 1fr; } } .sub-tariff { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; appearance: none; cursor: pointer; font: inherit; padding: 14px 14px 12px; border-radius: 9px; background: var(--surface-panel-2); border: 1px solid rgba(255, 255, 255, 0.1); color: #e9e7e2; transition: border-color 0.12s, background 0.12s, transform 0.06s; } .sub-tariff:hover { border-color: oklch(0.74 0.09 var(--accent-h) / 0.5); background: #12141a; } .sub-tariff:active { transform: translateY(1px); } .sub-tariff.best { border-color: oklch(0.74 0.10 var(--accent-h) / 0.45); } .sub-tariff-title { font-size: 12px; color: #8a8a84; } .sub-tariff-price { font-size: 20px; color: #ecebe6; font-variant-numeric: tabular-nums; } /* --- Цена со скидкой по промокоду --- Старая цена перечёркнута и приглушена, новая — крупнее и акцентом: разница должна читаться мгновенно, без сравнения цифр. */ .sub-tariff.discounted .sub-tariff-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sub-tariff-price .old { font-size: 13.5px; color: #6a6a65; text-decoration: line-through; } .sub-tariff-price .new { font-size: 20px; color: oklch(0.84 0.12 165); } .sub-tariff-save { font-size: 11.5px; color: oklch(0.78 0.10 165); font-variant-numeric: tabular-nums; } .sub-tariff-nodisc { font-size: 11px; color: #6a6a65; line-height: 1.45; } .sub-tariff.discounted { border-color: oklch(0.62 0.10 165 / 0.45); } /* Применённый промокод занимает МЕСТО ПОЛЯ ВВОДА, а не строку над ним: геометрия строки одна и та же в обоих состояниях, поэтому тарифы под блоком не сдвигаются ни на пиксель. Высота задана явно у обоих элементов — иначе она зависела бы от того, как браузер меряет внутренности , и совпадение было бы случайным. */ .sub-promo-applied { flex: 1; min-width: 160px; min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 7px; font-size: 13px; line-height: 1.3; color: oklch(0.86 0.10 165); background: oklch(0.55 0.10 165 / 0.09); border: 1px solid oklch(0.62 0.10 165 / 0.32); overflow: hidden; } /* Сам код — моноширинный и в разрядку, как в поле ввода: это то же значение, просто уже принятое. Длинный код обрезается многоточием и не выталкивает кнопку удаления за край. */ .sub-promo-applied-code { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.06em; color: oklch(0.92 0.08 165); } .sub-promo-applied-sep { flex: none; opacity: 0.5; } .sub-tariff-sub { font-size: 11.5px; color: #6a6a65; min-height: 14px; } .sub-tariff-cta { margin-top: 6px; font-size: 12px; color: oklch(0.82 0.10 var(--accent-h)); } /* Приписка под кнопками оформления: оферта и безопасность оплаты. Мельче и глуше обычной заметки — она не должна конкурировать с кнопками, но ссылка на оферту обязана оставаться заметной. */ .pay-legal { margin-top: 10px; font-size: 11px; line-height: 1.65; } /* Пометка лучшего тарифа. Была набрана в разрядку прописными, лежала абсолютом в правом верхнем углу и на узкой карточке наезжала на заголовок «12 месяцев» (перекрытие доходило до 47px). Теперь она в одной строке с заголовком: наложение невозможно в принципе, а не «при этой ширине». Текст короче, кегль и поля меньше, разрядка снята. */ .sub-tariff-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .sub-tariff-head .sub-tariff-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub-tariff-badge { flex: none; font-size: 9.5px; text-transform: uppercase; color: oklch(0.86 0.10 72); background: oklch(0.62 0.10 72 / 0.16); border: 1px solid oklch(0.70 0.10 72 / 0.3); border-radius: 4px; padding: 1px 5px; line-height: 1.5; } .sub-promo-row { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; } .sub-promo-input { flex: 1; min-width: 160px; /* Та же высота, что у .sub-promo-applied: строка не меняет размер при применении и удалении кода. */ min-height: 36px; appearance: none; font: inherit; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 12px; border-radius: 7px; background: var(--surface-inset); color: #e9e7e2; border: 1px solid rgba(255, 255, 255, 0.12); transition: border-color 0.12s; } .sub-promo-input::placeholder { color: #494a44; text-transform: none; letter-spacing: normal; } .sub-promo-input:focus { outline: none; border-color: oklch(0.74 0.09 var(--accent-h) / 0.6); } .sub-note { min-height: 18px; } .sub-note.ok { color: oklch(0.82 0.10 var(--accent-h)); } .sub-note.err { color: oklch(0.74 0.13 30); } .dr-sec { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .dr-sec-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; } /* ==================== Реестры админки ==================== Полные истории (активации, журнал, ошибки, стопки, карточки, сессии) рисуются одной таблицей: колонок разное число, поэтому сетка задаётся переменной --reg-cols. Длинные значения не ломают строку — они режутся на сервере, а таблица прокручивается внутри рабочей области терминала, не растягивая само окно. */ .dr-reg-table { margin-top: 10px; border: 1px solid rgba(167, 139, 250, 0.14); border-radius: 10px; overflow-x: auto; } .dr-reg-row { display: grid; grid-template-columns: repeat(var(--reg-cols, 5), minmax(90px, 1fr)); gap: 10px; padding: 7px 12px; font-size: 12px; color: var(--ad-text2, oklch(0.82 0.02 285)); border-bottom: 1px solid rgba(167, 139, 250, 0.08); min-width: 640px; } .dr-reg-row:last-child { border-bottom: none; } .dr-reg-row.head { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ad-acc-dim, oklch(0.62 0.06 290)); background: rgba(167, 139, 250, 0.05); } .dr-reg-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .dr-pg { appearance: none; cursor: pointer; font: inherit; font-size: 12px; min-width: 30px; padding: 4px 8px; border-radius: 7px; border: 1px solid rgba(167, 139, 250, 0.18); background: transparent; color: var(--ad-mut, oklch(0.66 0.02 285)); transition: color 0.12s, border-color 0.12s, background 0.12s; } .dr-pg:hover:not(:disabled) { color: var(--ad-text, oklch(0.9 0.02 285)); } .dr-pg:disabled { opacity: 0.35; cursor: default; } .dr-pg.on { background: rgba(167, 139, 250, 0.16); border-color: rgba(167, 139, 250, 0.5); color: oklch(0.9 0.04 290); font-weight: 700; } .dr-pg-gap { color: var(--ad-soft, oklch(0.55 0.02 285)); padding: 0 2px; } .dr-admin-back { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .dr-admin-hint { margin-top: 8px; font-size: 11px; color: var(--ad-soft, oklch(0.55 0.02 285)); } /* Заголовок-переход к полной истории: в покое выглядит как обычный заголовок, ведёт себя как ссылка при наведении. */ .dr-admin-sec-title.linky { appearance: none; background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: inherit; transition: color 0.12s; } .dr-admin-sec-title.linky:hover, .dr-admin-sec-title.linky:focus-visible { color: oklch(0.86 0.09 292); outline: none; } .dr-admin-sec-title.linky .arr { opacity: 0.5; } .dr-admin-sec-title.linky:hover .arr { opacity: 1; } /* Форма смены пароля (/password): три поля в колонку, ширина ограничена — пароль не длиннее строки, растянутое на весь экран поле выглядит чужим. */ .pw-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 420px; } .pw-field { display: flex; flex-direction: column; gap: 5px; } .pw-field .lbl { font-size: 11px; color: oklch(0.68 0.02 var(--accent-h)); letter-spacing: 0.04em; } .dr-btn-sm { appearance: none; padding: 8px 13px; border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer; background: #191a1f; color: #cfcdc8; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.12s; } .dr-btn-sm:hover { border-color: rgba(255, 255, 255, 0.24); } .dr-btn-sm:active { transform: scale(0.97); } .dr-btn-sm[disabled] { cursor: default; opacity: 0.75; } .dr-btn-sm[disabled]:hover { border-color: rgba(255, 255, 255, 0.1); } .dr-btn-sm[disabled]:active { transform: none; } /* Кнопка подтверждения e-mail меняет подпись по фазам («Отправляем…», «Письмо отправлено ✓», …) — призрачная строка с самой длинной подписью держит постоянную ширину, чтобы соседние кнопки не дёргались. */ .pf-verify { text-align: center; } .pf-verify::after { content: "Подтвердить e-mail — отправить письмо"; display: block; height: 0; visibility: hidden; overflow: hidden; } .dr-btn-sm.danger { background: oklch(0.66 0.13 30 / 0.14); color: oklch(0.80 0.11 30); border-color: oklch(0.66 0.13 30 / 0.45); } .dr-btn-sm.danger:hover { background: oklch(0.66 0.13 30 / 0.22); border-color: oklch(0.66 0.13 30 / 0.45); } .dr-profile-bottom { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dr-logout { appearance: none; padding: 9px 15px; border-radius: 7px; font: inherit; font-size: 12.5px; cursor: pointer; background: #191a1f; color: #cfcdc8; border: 1px solid rgba(255, 255, 255, 0.14); transition: all 0.12s; } .dr-logout:hover { border-color: rgba(255, 255, 255, 0.28); } .dr-logout:active { transform: scale(0.97); } .dr-delete-link { appearance: none; background: transparent; border: 0; padding: 4px 2px; font: inherit; font-size: 11.5px; cursor: pointer; color: #4a4b44; transition: color 0.12s; } .dr-delete-link:hover { color: oklch(0.66 0.11 30); } .dr-delete-confirm { margin-top: 14px; padding: 13px 15px; border: 1px solid oklch(0.66 0.13 30 / 0.28); border-radius: 9px; background: oklch(0.66 0.13 30 / 0.05); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dr-delete-confirm .msg { font-size: 12.5px; color: #9a9a94; flex: 1; min-width: 220px; line-height: 1.5; } /* ===== Создание стопки (/new-stack) ===== */ .ns-topbar { flex: none; padding: 2px 2px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); margin-bottom: 14px; } .ns-crumbs { font-size: 13px; color: #8a8a84; margin-bottom: 12px; } .ns-crumbs .sep { color: #45463f; } .ns-crumb-cur { color: #cfcdc8; } .ns-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ns-name { flex: 1; min-width: 220px; background: var(--surface-inset); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #e9e7e2; font: inherit; font-size: 13.5px; padding: 10px 12px; outline: none; transition: border-color 0.12s; } .ns-name:focus { border-color: oklch(0.74 0.09 var(--accent-h) / 0.55); } .ns-name.err { border-color: oklch(0.64 0.13 30 / 0.6); } .ns-count { font-size: 12px; color: #6a6a65; white-space: nowrap; } .ns-save { background: #1b2827; border: 1px solid #39675b; border-radius: 8px; color: oklch(0.84 0.09 var(--accent-h)); font: inherit; font-size: 13px; padding: 10px 16px; cursor: pointer; transition: background 0.12s, color 0.12s; } .ns-save:hover:not(:disabled) { background: #21312f; color: oklch(0.88 0.09 var(--accent-h)); } .ns-save:disabled { opacity: 0.65; cursor: default; } .ns-cancel { background: transparent; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: #9a9a94; font: inherit; font-size: 13px; padding: 10px 14px; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .ns-cancel:hover { color: #cfcdc8; border-color: rgba(255, 255, 255, 0.24); } .ns-draft-ind { /* Фиксированный слот справа: смена статуса ("сохраняется…" ↔ "Черновик сохранён") НЕ меняет ширину и не двигает соседей по строке (input flex:1 иначе поджимался бы на каждом нажатии — интерфейс дёргался). Редкие длинные статусы (офлайн/конфликт) подрезаются многоточием. */ flex: 0 0 auto; width: 160px; text-align: right; font-size: 11.5px; color: #57574f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s; } /* Момент сохранения черновика: короткая яркая вспышка с мягким угасанием. Резкая атака (~90 мс на пике) ловит боковое зрение, дальше 0.7 с ease-out уводят строку обратно в спокойный серый — заметно, но не отвлекает от набора. Анимация вешается классом .flash и перезапускается через reflow. */ @keyframes nsDraftFlash { 0% { color: #ffffff; text-shadow: 0 0 9px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.32); } 12% { color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 18px rgba(255, 255, 255, 0.26); } 100% { color: #57574f; text-shadow: none; } } .ns-draft-ind.flash { animation: nsDraftFlash 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .ns-draft-ind.flash { animation: none; } } .ns-toperr { margin-top: 10px; font-size: 12px; color: oklch(0.76 0.12 30); animation: auErrIn 0.14s ease; } /* Информационный вариант той же строки (например, «черновик восстановлен»): спокойный цвет вместо тревожного красного. */ .ns-toperr.info { color: oklch(0.78 0.07 var(--accent-h)); } .ns-topwarn { margin-top: 10px; font-size: 12px; color: oklch(0.84 0.10 72); } .ns-editor { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 6px 8px 2px; } .ns-row { position: relative; display: grid; grid-template-columns: 40px 1fr 36px; gap: 10px; align-items: stretch; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); animation: cardIn 0.3s ease; } @keyframes cardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ns-row.ghost > * { opacity: 0.18; } .ns-row.ghost { outline: 1px dashed rgba(255, 255, 255, 0.22); outline-offset: -4px; border-radius: 10px; } .ns-row.ns-float { position: fixed; z-index: 90; margin: 0; padding: 12px 10px; background: #12141a; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.9); pointer-events: none; animation: none; } .ns-gutter { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 26px; } .ns-handle { background: transparent; border: 0; padding: 4px; color: #57574f; cursor: grab; touch-action: none; transition: color 0.12s; } .ns-handle:hover { color: #9a9a94; } .ns-num { font-size: 11px; color: #57574f; letter-spacing: 0.08em; } .ns-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-width: 0; } .ns-field { position: relative; display: flex; flex-direction: column; min-width: 0; } .ns-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #57574f; margin-bottom: 7px; } .ns-ta { width: 100%; /* Старт — ровно две строки текста; дальше поле растёт само (nsSyncRowHeight). */ min-height: 74px; background: var(--surface-inset); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; color: #e9e7e2; font: inherit; font-size: 13px; line-height: 1.55; padding: 10px 12px 22px; outline: none; resize: vertical; overflow-y: auto; transition: border-color 0.12s; } .ns-ta:focus { border-color: oklch(0.74 0.09 var(--accent-h) / 0.55); } .ns-ta.err { border-color: oklch(0.64 0.13 30 / 0.65); } .ns-ta::placeholder { color: #494a44; } .ns-cnt { position: absolute; right: 10px; bottom: 6px; font-size: 10.5px; color: #57574f; pointer-events: none; } .ns-cnt.near { color: oklch(0.84 0.10 72); } .ns-cnt.full { color: oklch(0.72 0.13 30); } .ns-fieldmsg { min-height: 16px; margin-top: 4px; font-size: 11.5px; color: oklch(0.76 0.12 30); } .ns-fieldmsg.softwarn { color: oklch(0.84 0.10 72); } .ns-rowside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } /* Кнопка «i» — доп. пояснение карточки (необязательное). С текстом — ярче. */ .ns-note { appearance: none; background: transparent; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; width: 20px; height: 20px; padding: 0; font: inherit; font-size: 11px; font-style: italic; line-height: 1; color: #6d6d66; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .ns-note:hover { color: #cfcdc8; border-color: rgba(255, 255, 255, 0.36); } .ns-note.set { color: oklch(0.8 0.09 var(--accent-h)); border-color: oklch(0.7 0.08 var(--accent-h) / 0.55); } /* Поле пояснения — третья строка под парой textarea, во всю ширину. */ .ns-info-field { grid-column: 1 / -1; position: relative; display: flex; flex-direction: column; margin-top: 10px; } .ns-info-ta { min-height: 44px; } /* Необязательное поле «Тип карточки»: кнопка повторяет вид язычка, который появится на карточке во время обучения. Пустая — тип не указан. */ .ns-kind { background: transparent; border: 0; padding: 6px 4px; cursor: pointer; line-height: 0; } .ns-kind .bar { display: block; width: 5px; height: 18px; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; transition: opacity 0.12s, border-color 0.12s; } .ns-kind:hover .bar { border-color: rgba(255, 255, 255, 0.4); } .ns-kind.set .bar { border-color: transparent; background: var(--kind-color, rgba(255, 255, 255, 0.3)); opacity: 0.75; } .ns-kind.set:hover .bar { opacity: 1; } .ns-kind[data-kind="noun"] { --kind-color: oklch(0.68 0.13 300); } .ns-kind[data-kind="verb"] { --kind-color: oklch(0.78 0.11 165); } .ns-kind[data-kind="adj_adv"] { --kind-color: oklch(0.75 0.10 235); } .ns-kind[data-kind="phrase"] { --kind-color: oklch(0.80 0.10 72); } /* Меню выбора типа — рядом со строкой карточки, как подтверждение удаления. Раскрывается ВНИЗ от верхней кромки строки: центрирование по вертикали выносило меню выше строки, и у первой карточки оно накрывало шапку редактора с кнопками «Сохранить стопку» и «Отмена». */ .ns-kindmenu { position: absolute; right: 44px; top: 6px; z-index: 6; min-width: 232px; max-width: calc(100vw - 84px); /* на узком экране не уезжает за край */ background: #14161b; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; padding: 9px 8px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.85); } .ns-kindmenu .cap { padding: 0 6px 6px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #57574f; } .ns-kindmenu .opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px; background: transparent; border: 0; border-radius: 6px; font: inherit; font-size: 12.5px; color: #cfcdc8; text-align: left; cursor: pointer; } .ns-kindmenu .opt:hover { background: rgba(255, 255, 255, 0.06); } .ns-kindmenu .opt.on { color: #ecebe6; } .ns-kindmenu .opt .dot { width: 4px; height: 14px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; flex: none; } .ns-kindmenu .opt[data-kind] .dot { border-color: transparent; background: var(--kind-color, rgba(255, 255, 255, 0.3)); } .ns-kindmenu .opt[data-kind="noun"] { --kind-color: oklch(0.68 0.13 300); } .ns-kindmenu .opt[data-kind="verb"] { --kind-color: oklch(0.78 0.11 165); } .ns-kindmenu .opt[data-kind="adj_adv"] { --kind-color: oklch(0.75 0.10 235); } .ns-kindmenu .opt[data-kind="phrase"] { --kind-color: oklch(0.80 0.10 72); } .ns-kindmenu .hint { padding: 6px 6px 0; font-size: 11px; line-height: 1.45; color: #6d6d66; } .ns-trash { background: transparent; border: 0; padding: 6px; color: #57574f; cursor: pointer; transition: color 0.12s; } .ns-trash:hover { color: oklch(0.72 0.12 30); } .ns-del-confirm { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; gap: 10px; background: #14161b; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; padding: 10px 12px; font-size: 12px; color: #cfcdc8; box-shadow: 0 16px 44px -18px rgba(0, 0, 0, 0.85); animation: drPopIn 0.16s ease; } .ns-add { width: 100%; margin-top: 14px; padding: 14px; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.16); border-radius: 10px; color: #8a8a84; font: inherit; font-size: 13px; cursor: pointer; transition: color 0.12s, border-color 0.12s; } .ns-add:hover { color: oklch(0.82 0.09 var(--accent-h)); border-color: oklch(0.74 0.09 var(--accent-h) / 0.4); } .ns-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: rgba(5, 6, 8, 0.66); animation: fadeIn 0.18s ease; } .ns-modal { /* Шире, чем текст требует: подписи кнопок идут в одну строку и ряду нужно место (см. .ns-modal-actions .ns-btn). */ width: min(600px, calc(100vw - 48px)); background: var(--surface-raised); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 26px 28px; animation: drPopIn 0.2s ease; } .ns-modal-title { font-size: 14px; letter-spacing: 0.14em; color: #cfcdc8; margin-bottom: 12px; } .ns-modal-title.ok { color: oklch(0.82 0.10 var(--accent-h)); } .ns-modal-title.warn { color: oklch(0.84 0.10 72); } .ns-modal-text { font-size: 13px; line-height: 1.6; color: #9a9a94; margin-bottom: 20px; } .ns-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Подпись кнопки НЕ переносится: перенос делал кнопку в три строки высотой и ряд выглядел громоздко. Кнопки растут в ширину по своему тексту и делят остаток строки поровну; если ряд не помещается, flex-wrap переносит кнопку целиком на следующую строку — она занимает всю ширину модалки. */ .ns-modal-actions .ns-btn { flex: 1 1 auto; white-space: nowrap; text-align: center; padding-left: 18px; padding-right: 18px; } /* На узких экранах (телефоны) равные доли дают ~88px на кнопку — длинные моноширинные подписи туда не влезают. Складываем кнопки в столбик: каждая занимает всю ширину модалки и читается целиком. */ @media (max-width: 520px) { .ns-modal-actions { flex-direction: column; } } .ns-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; color: #cfcdc8; font: inherit; font-size: 12.5px; padding: 10px 14px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; } .ns-btn:hover { border-color: rgba(255, 255, 255, 0.3); } .ns-btn.primary { background: #1b2827; border-color: #39675b; color: oklch(0.84 0.09 var(--accent-h)); } .ns-btn.primary:hover { background: #21312f; } .ns-btn.danger { color: oklch(0.74 0.11 30); border-color: oklch(0.6 0.1 30 / 0.4); } .ns-modal-hint { margin-top: 16px; font-size: 11px; color: #57574f; } /* Подсветка только что созданной стопки в таблице картотеки */ .dr-trow.hl-new { animation: nsHlFade 2.4s ease forwards; } @keyframes nsHlFade { 0% { background: oklch(0.35 0.05 var(--accent-h) / 0.5); } 100% { background: transparent; } } /* ===== Раздел «Повторение»: секции Пропущено / Сегодня ===== */ .dr-repeat-summary { font-size: 12.5px; color: #9a9a94; margin-bottom: 14px; } .dr-repeat-summary .dim { color: #6a6a65; } .dr-sechead { display: flex; align-items: center; gap: 10px; /* Левый отступ равен зазору между надписью и цифрой в счётчике (gap 10 + рамка 1 + padding бейджа 7 = 18px), поэтому «СЕГОДНЯ» не прилипает к границе: слева от «С» столько же воздуха, сколько между «Я» и цифрой. Минус 1px — левый боковой вынос глифа. */ padding: 16px 4px 8px 17px; } .dr-sechead .lbl { font-size: 10.5px; letter-spacing: 0.18em; color: #8a8a84; white-space: nowrap; } .dr-sechead .cnt { font-size: 10.5px; color: #57574f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 9px; padding: 1px 7px; } .dr-sechead .line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.07); } .dr-repeat-next { margin-top: 14px; font-size: 12.5px; color: #8a8a84; line-height: 1.7; } /* ===== Экран стопки (/deck) ===== */ .dk-head { display: flex; flex-direction: column; gap: 10px; } .dk-meta { font-size: 13px; color: #9a9a94; } .dk-sched { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; } .dk-sched-sep { color: #3a3b3f; } .dk-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .dk-practice-note { font-size: 11.5px; color: #6a6a65; } .dk-card-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 14px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; line-height: 1.55; } .dk-card-num { font-size: 11px; color: #57574f; letter-spacing: 0.08em; padding-top: 2px; } .dk-card-side { color: #e9e7e2; white-space: pre-line; word-break: break-word; min-width: 0; } .dk-card-side.trans { color: oklch(0.82 0.09 var(--accent-h)); } .dk-practice-banner { margin: 10px 0 0; padding: 9px 13px; border: 1px solid #514634; background: #1b1a19; border-radius: 8px; font-size: 12px; color: #ddb87a; } /* ===== Папки: иконка, закладка описания, поповер, удаление, подсветка ===== */ .dr-folder { position: relative; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.07); background: #131418; } .dr-folder:hover .ic svg, .dr-folder:focus-visible .ic svg { filter: brightness(1.2); } .dr-folder:focus-visible { outline: 1px solid oklch(0.74 0.09 var(--accent-h) / 0.55); outline-offset: 1px; } /* Маркер-закладка описания на верхней границе строки */ .fold-bookmark { position: absolute; top: -1px; left: 5px; width: 11px; height: 15px; opacity: 0.85; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 66%, 0 100%); transition: opacity 0.12s; z-index: 3; } .fold-bookmark:hover, .fold-bookmark:focus-visible, .fold-bookmark.on { opacity: 1; } /* Поповер описания папки — верхний слой (portal на body). position:fixed выводит его из-под overflow-скролла списка .dr-lib-scroll, координаты считает JS (foldPopPlace) от язычка с автосмещением в пределах рамки терминала. display переключается инлайн-стилем в foldPopShow/foldPopHide. */ .fold-pop-layer { position: fixed; display: none; z-index: 120; max-width: 330px; background: var(--surface-raised); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; padding: 11px 13px; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.85); animation: drPopIn 0.15s ease; cursor: default; } .fold-pop-layer .pnm { display: block; font-size: 12.5px; color: #e6e4df; margin-bottom: 5px; } .fold-pop-layer .ptx { display: block; font-size: 12px; color: #8f8f89; line-height: 1.6; white-space: pre-line; } /* Карандаш и корзина в строке папки — появляются по наведению на строку */ .fold-del, .fold-edit { background: transparent; border: 0; padding: 5px; color: #57574f; opacity: 0; cursor: pointer; line-height: 0; transition: opacity 0.12s, color 0.12s; } .dr-folder:hover .fold-del, .dr-folder:hover .fold-edit, .fold-del:focus-visible, .fold-edit:focus-visible { opacity: 1; } .fold-del:hover { color: oklch(0.7 0.12 25); } /* Правка — нейтральное действие, поэтому без красного акцента */ .fold-edit:hover { color: #cfcdc8; } @media (hover: none) { .fold-del, .fold-edit { opacity: 0.55; } } /* Inline-подтверждение удаления (вместо строки) */ .fold-confirm { display: flex; align-items: center; gap: 14px; min-height: 63px; padding: 13px 15px; border-radius: 9px; background: oklch(0.35 0.06 25 / 0.1); border: 1px solid oklch(0.62 0.12 25 / 0.32); animation: fadeIn 0.15s ease; } .fold-confirm .ic { color: oklch(0.7 0.12 25); line-height: 0; } .fold-confirm .body { flex: 1; min-width: 0; } .fold-confirm .q { display: block; font-size: 13.5px; color: #e6e4df; } .fold-confirm .meta { display: block; font-size: 12px; color: #8a8a84; margin-top: 3px; } /* Мягкая подсветка только что созданной папки (~2.6 с) */ .dr-folder.fold-hl { animation: foldHl 2.6s ease forwards; } @keyframes foldHl { 0%, 60% { background: var(--fh-bg); border-color: var(--fh-bd); } 100% { background: #131418; border-color: rgba(255, 255, 255, 0.07); } } /* ===== Форма создания папки ===== */ .fc-wrap { max-width: 600px; padding: 4px 2px 16px; } .fc-title { font-size: 17px; font-weight: 500; color: #e9e7e2; } .fc-sub { font-size: 12.5px; color: #6a6a65; margin: 6px 0 22px; } .fc-label { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6a6a65; margin: 0 0 8px; } .fc-label .opt { color: #45463f; text-transform: none; letter-spacing: normal; } .fc-field { position: relative; } .fc-input, .fc-textarea { width: 100%; background: #191a1f; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; color: #e9e7e2; font: inherit; font-size: 13.5px; padding: 11px 64px 11px 12px; outline: none; transition: border-color 0.12s; } .fc-textarea { resize: none; min-height: 84px; line-height: 1.55; padding: 11px 12px 24px; } .fc-input:focus, .fc-textarea:focus { border-color: oklch(0.74 0.09 var(--accent-h) / 0.55); } .fc-input.err { border-color: oklch(0.62 0.13 25 / 0.65); } .fc-cnt { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: #57574f; pointer-events: none; } .fc-cnt.ta { top: auto; bottom: 8px; transform: none; } .fc-err { min-height: 21px; font-size: 12px; color: oklch(0.7 0.13 25); margin: 5px 0 10px; } /* Область прокрутки формы создания папки расширена на 6px влево: у выбранного свотча кольцо выходит за его габариты, и на первом свотче ряда его срезал overflow скролла. Отрицательный margin возвращает содержимое на прежнее место — выравнивание с полями формы не меняется. */ .fc-scroll { padding-left: 6px; margin-left: -6px; } .fc-colors { display: flex; gap: 11px; flex-wrap: wrap; margin-bottom: 20px; } .fc-swatch { width: 27px; height: 27px; border-radius: 8px; border: 0; cursor: pointer; font-size: 13px; color: #101114; line-height: 1; transition: transform 0.12s, box-shadow 0.12s, filter 0.12s; } .fc-swatch:hover { box-shadow: 0 0 0 2px var(--surface-panel), 0 0 0 3.5px rgba(255, 255, 255, 0.35); transform: scale(1.12); filter: brightness(1.08); } .fc-swatch.on { box-shadow: 0 0 0 2px var(--surface-panel), 0 0 0 3.5px rgba(255, 255, 255, 0.65); transform: scale(1.12); } .fc-preview-row { cursor: default; margin-bottom: 20px; } .fc-preview-row:hover { background: #131418; border-color: rgba(255, 255, 255, 0.07); } .fc-actions { display: flex; gap: 12px; margin-top: 4px; } .fc-submit { flex: 1; } /* ---------- Административный режим (/admin) ---------- */ /* Язычок на правой границе окна — едва заметный, выезжает при наведении. Только для роли admin и не на самой /admin (управляется syncAdminTab). */ /* Крепится к ВНЕШНЕЙ правой стороне окна терминала: left/top задаёт JS (positionAdminTab) по границе .dr-window, поэтому язычок «прирастает» к окну, а не к краю экрана. Левым краем прилегает к рамке окна, скруглён снаружи. */ #dr-admin-tab { position: fixed; left: 0; top: 0; transform: translateY(-50%); z-index: 60; appearance: none; cursor: pointer; border: 1px solid oklch(0.62 0.14 300 / 0.4); border-left: none; border-radius: 0 8px 8px 0; background: oklch(0.30 0.10 300 / 0.55); color: oklch(0.86 0.10 300); font: inherit; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; writing-mode: vertical-rl; padding: 12px 4px; opacity: 0.32; box-shadow: 2px 0 10px oklch(0.4 0.12 300 / 0.18); transition: opacity 0.18s ease, padding-right 0.18s ease, background 0.18s ease; } /* При наведении язычок «выдвигается» НАРУЖУ, оставаясь прижатым к рамке окна: растёт только правый паддинг (левый край задан left и не двигается), поэтому зазор между терминалом и язычком не появляется. */ #dr-admin-tab:hover, #dr-admin-tab:focus-visible { opacity: 1; padding-right: 11px; background: oklch(0.34 0.12 300 / 0.92); outline: none; } /* Фиолетовое окно админки — отличимая палитра «вы не в обычном режиме». */ .dr-window-admin { border-color: oklch(0.55 0.14 300 / 0.45) !important; box-shadow: 0 0 40px oklch(0.5 0.15 300 / 0.14), 0 28px 70px rgba(0, 0, 0, 0.5) !important; background: linear-gradient(135deg, #150c22 0%, #100a1a 45%, #180c2a 100%) !important; } .dr-window-admin .au-titlebar { background: linear-gradient(180deg, oklch(0.32 0.10 300 / 0.5), oklch(0.24 0.08 300 / 0.3)) !important; border-bottom-color: oklch(0.55 0.12 300 / 0.3) !important; } .dr-window-admin .au-brand-sub { color: oklch(0.82 0.11 300); } .dr-window-admin .au-path { color: oklch(0.78 0.10 300); } /* Окно админки, как и обычное, имеет фиксированную высоту (.dr-window 760px), а .dr-body — overflow:hidden. Поэтому админка обязана быть флекс-колонкой во всю высоту тела: без flex/min-height она растёт по контенту, и низ длинных вкладок («Обзор», «Контент», «Система», карточка пользователя с действиями) молча обрезается — без скроллбара и без всякого признака, что там что-то есть. Прокручивается только .dr-admin-content: заголовок и вкладки остаются на месте, переключиться между разделами можно с любой позиции. */ .dr-admin { padding: 4px 2px 8px; color: #e9e7e2; flex: 1; min-height: 0; display: flex; flex-direction: column; } .dr-admin-content { flex: 1; min-height: 0; overflow-y: auto; /* Отступ под полосу прокрутки — как в остальных прокручиваемых зонах (.dr-lib-scroll, .dr-cal-mscroll), чтобы текст не липнул к скроллбару. */ padding-right: 4px; } .dr-admin-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .dr-admin-title { font-size: 14px; color: oklch(0.86 0.10 300); letter-spacing: 0.02em; } .dr-admin-exit { appearance: none; cursor: pointer; font: inherit; font-size: 12px; padding: 6px 12px; border-radius: 7px; background: oklch(0.30 0.08 300 / 0.4); color: oklch(0.86 0.10 300); border: 1px solid oklch(0.60 0.12 300 / 0.4); transition: background 0.12s; } .dr-admin-exit:hover { background: oklch(0.36 0.10 300 / 0.6); } .dr-admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid oklch(0.50 0.10 300 / 0.25); padding-bottom: 10px; margin-bottom: 14px; } .dr-admin-tabbtn { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 7px; background: transparent; color: #b7b1c4; border: 1px solid transparent; transition: all 0.12s; } .dr-admin-tabbtn:hover { color: #e9e7e2; background: oklch(0.30 0.08 300 / 0.3); } .dr-admin-tabbtn.on { color: oklch(0.90 0.09 300); background: oklch(0.34 0.10 300 / 0.45); border-color: oklch(0.60 0.12 300 / 0.4); } .dr-admin-sec-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: oklch(0.74 0.08 300); margin: 16px 0 8px; } .dr-admin-content > .dr-admin-sec-title:first-child { margin-top: 4px; } .dr-admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; } /* Настройка прямо на «Обзоре» (сейчас одна — режим футера). Оформлена как плитки статистики рядом, но с рамкой поспокойнее: это не цифра, на которую смотрят, а тумблер, который трогают редко. */ .dr-admin-setting { margin-top: 14px; padding: 12px 14px; border-radius: 9px; background: oklch(0.26 0.05 300 / 0.22); border: 1px solid oklch(0.50 0.10 300 / 0.18); } .dr-admin-setting-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .dr-admin-setting-t { font-size: 12.5px; color: oklch(0.86 0.05 300); } .dr-admin-setting .dr-seg.busy { opacity: 0.55; pointer-events: none; } .dr-admin-setting-note { margin-top: 8px; font-size: 11.5px; line-height: 1.6; color: oklch(0.66 0.03 300); } .dr-admin-setting-note.err { color: oklch(0.78 0.12 30); } .dr-admin-stat { padding: 12px 14px; border-radius: 9px; background: oklch(0.26 0.05 300 / 0.35); border: 1px solid oklch(0.50 0.10 300 / 0.22); } .dr-admin-stat-v { font-size: 22px; color: #ecebe6; font-variant-numeric: tabular-nums; } .dr-admin-stat-l { font-size: 11.5px; color: #a9a2ba; margin-top: 3px; } .dr-admin-loading, .dr-admin-empty { color: #8f89a0; font-size: 13px; padding: 12px 2px; } .dr-admin-search, .dr-admin-grant, .dr-admin-promoform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0 10px; } /* Канонический текстовый ввод админки (единый компонент для ВСЕХ поисков, фильтров и полей формы). box-sizing:border-box — геометрия не «прыгает» при фокусе (рамка внутри). appearance:none — снимает системный вид input/search, чтобы ни в одном браузере не проступал стандартный (в т.ч. Windows) стиль. */ .dr-admin-input { appearance: none; -webkit-appearance: none; box-sizing: border-box; font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 7px; background: oklch(0.20 0.03 300 / 0.5); color: #e9e7e2; border: 1px solid oklch(0.50 0.08 300 / 0.3); transition: border-color 0.12s, box-shadow 0.12s; flex: 1; min-width: 140px; } .dr-admin-input.sm { flex: 0 1 200px; min-width: 120px; } .dr-admin-input.xs { flex: 0 0 92px; min-width: 70px; } .dr-admin-input::placeholder { color: #8f89a0; opacity: 1; } /* Лёгкое изменение рамки при наведении. */ .dr-admin-input:hover { border-color: oklch(0.55 0.09 300 / 0.45); } /* Фокус — фирменная фиолетовая подсветка без системной синей/белой обводки. Кольцо через box-shadow (не меняет геометрию). :focus покрывает и клик, и клавиатуру — админ работает мышью. */ .dr-admin-input:focus, .dr-admin-input:focus-visible { outline: none; border-color: oklch(0.66 0.12 300 / 0.7); box-shadow: 0 0 0 2px oklch(0.66 0.12 300 / 0.28); } /* Автозаполнение браузера не должно рисовать белый/системный фон. */ .dr-admin-input:-webkit-autofill, .apm-search input:-webkit-autofill, .auc-input:-webkit-autofill { -webkit-text-fill-color: #e9e7e2; caret-color: #e9e7e2; -webkit-box-shadow: 0 0 0 1000px oklch(0.20 0.03 300 / 0.5) inset; transition: background-color 9999s ease-out; } /* Единый safety-набор для всех текстовых полей админки: снять системный вид и декорации поиска в любом браузере (в т.ч. крестик очистки в WebKit). */ .dr-admin-input, .apm-search input, .auc-input { -webkit-appearance: none; appearance: none; } .dr-admin-input::-webkit-search-cancel-button, .apm-search input::-webkit-search-cancel-button, .auc-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .dr-admin-lbl { font-size: 12px; color: #a9a2ba; } .dr-admin-table { display: flex; flex-direction: column; border: 1px solid oklch(0.50 0.08 300 / 0.2); border-radius: 9px; overflow: hidden; } .dr-admin-trow { display: grid; grid-template-columns: 1.2fr 1.9fr 0.8fr 0.7fr auto; gap: 10px; align-items: center; padding: 9px 12px; font-size: 12.5px; border-top: 1px solid oklch(0.50 0.08 300 / 0.14); } .dr-admin-table.promo .dr-admin-trow { grid-template-columns: 1.5fr 0.6fr 0.7fr 0.9fr auto; } .dr-admin-trow:first-child { border-top: none; } .dr-admin-thead { color: #8f89a0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .dr-admin-trow .a-email, .dr-admin-trow .a-user, .dr-admin-trow .a-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-admin-trow .a-prem { color: oklch(0.84 0.10 72); } .dr-admin-trow .a-free { color: #8f89a0; } .dr-admin-trow .a-on { color: oklch(0.82 0.10 var(--accent-h)); } .dr-admin-trow .a-off { color: #8f89a0; } .dr-admin-trow .a-actions { display: flex; gap: 6px; } .dr-btn-xs { appearance: none; cursor: pointer; font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 6px; background: oklch(0.30 0.06 300 / 0.4); color: #cfcdc8; border: 1px solid oklch(0.50 0.08 300 / 0.3); transition: all 0.12s; } .dr-btn-xs:hover { color: #fff; background: oklch(0.36 0.08 300 / 0.6); } .dr-btn-xs.danger { color: oklch(0.78 0.12 30); border-color: oklch(0.60 0.12 30 / 0.4); } .dr-btn-xs.danger:hover { background: oklch(0.40 0.10 30 / 0.4); } .dr-btn-sm.danger { color: oklch(0.78 0.12 30); border-color: oklch(0.60 0.12 30 / 0.4); } .dr-btn-sm.danger:hover { background: oklch(0.40 0.10 30 / 0.35); } .dr-admin-grant-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; } .dr-admin-trow.blocked .a-user { color: oklch(0.74 0.13 30); } .dr-admin-table.subs .dr-admin-trow { grid-template-columns: 1.2fr 1.4fr 0.9fr 1.1fr auto; } .dr-admin-table.content .dr-admin-trow { grid-template-columns: 1.6fr 1fr 0.5fr 0.6fr 0.9fr auto; } /* Матрица метрик «Обзора»: метка + три периода. */ .dr-metric-table { border: 1px solid oklch(0.50 0.08 300 / 0.2); border-radius: 9px; overflow: hidden; } .dr-metric-row { display: grid; grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr; gap: 8px; align-items: center; padding: 8px 13px; font-size: 12.5px; border-top: 1px solid oklch(0.50 0.08 300 / 0.12); } .dr-metric-row:first-child { border-top: none; } .dr-metric-head { color: #8f89a0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; } .dr-metric-row .m-label { color: #cfcdc8; } .dr-metric-row .m-v { text-align: right; font-variant-numeric: tabular-nums; color: #ecebe6; } .dr-metric-row.clickable { cursor: pointer; } .dr-metric-row.clickable:hover { background: oklch(0.34 0.08 300 / 0.28); } .dr-admin-stat.clickable { cursor: pointer; appearance: none; font: inherit; text-align: left; transition: border-color 0.12s; } .dr-admin-stat.clickable:hover { border-color: oklch(0.62 0.12 300 / 0.5); } .dr-admin-chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 6px 0 12px; } .dr-admin-chip { appearance: none; cursor: pointer; font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 20px; background: oklch(0.28 0.05 300 / 0.3); color: #b7b1c4; border: 1px solid oklch(0.50 0.08 300 / 0.28); transition: all 0.12s; } .dr-admin-chip:hover { color: #e9e7e2; } .dr-admin-chip.on { color: oklch(0.90 0.09 300); background: oklch(0.36 0.10 300 / 0.5); border-color: oklch(0.62 0.12 300 / 0.5); } /* Панель подтверждения действия над пользователем (причина обязательна). */ .dr-admin-confirm { margin: 8px 0 10px; padding: 12px 13px; border-radius: 9px; background: oklch(0.30 0.06 300 / 0.28); border: 1px solid oklch(0.55 0.10 300 / 0.35); display: grid; gap: 9px; } .dr-admin-confirm-t { font-size: 13px; color: oklch(0.88 0.09 300); } .dr-admin-back { margin-bottom: 8px; } .dr-admin-audit { display: flex; flex-direction: column; border: 1px solid oklch(0.50 0.08 300 / 0.18); border-radius: 9px; overflow: hidden; } .dr-admin-audit-row { display: grid; /* Колонка действия шире прежних 150px: имена вроде referral_creator_update не переносятся по подчёркиванию и в узкой ячейке налезали на детали справа. */ grid-template-columns: 140px 110px 200px 1fr; gap: 10px; padding: 8px 12px; font-size: 12px; border-top: 1px solid oklch(0.50 0.08 300 / 0.12); } .dr-admin-audit-row:first-child { border-top: none; } .dr-admin-audit-row .a-when { color: #8f89a0; } .dr-admin-audit-row .a-who { color: oklch(0.80 0.09 300); } .dr-admin-audit-row .a-act { color: #cfcdc8; min-width: 0; overflow-wrap: anywhere; } .dr-admin-audit-row .a-det { color: #a9a2ba; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 640px) { .dr-admin-audit-row { grid-template-columns: 1fr 1fr; } .dr-admin-trow { font-size: 11.5px; gap: 6px; } } /* ---------- Коллекции (лепесток приобретённых программ) ---------- */ /* Спокойный янтарный акцент лепестка: отличим от обычной навигации, но не «премиальное казино». Статусные цвета обучения не трогаем. */ .dr-tab.collections { color: oklch(0.78 0.08 72); } .dr-tab.collections:hover { color: oklch(0.88 0.09 72); } .dr-tab.collections.active { color: oklch(0.90 0.10 72); border-bottom-color: oklch(0.78 0.10 72); } .dr-tab-badge.amber { color: oklch(0.88 0.10 72); background: oklch(0.62 0.10 72 / 0.2); } /* Маркер системной папки коллекции: сдержанный янтарный ромб (+ подпись у корневой). Определяется связью с коллекцией, не именем папки. */ .fold-col-mark { font-size: 10.5px; color: oklch(0.80 0.09 72); margin-left: 8px; letter-spacing: 0.03em; white-space: nowrap; } /* Скролл раздела «Коллекции»: паттерн .dr-lib-scroll — контейнер занимает остаток flex-колонки app-content и прокручивается внутри окна терминала. */ /* Единственная вертикальная прокрутка раздела. Место под полосу зарезервировано заранее: иначе появление прокрутки (например, при показе перевода в аудировании) сужало рабочую область, и всё выровненное по правому краю — «Английский язык · A1», линии, заголовки — прыгало влево на ширину полосы. Резерв держит одну геометрию в обоих состояниях. */ .col-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; } .col-sec-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: oklch(0.78 0.08 72); margin: 14px 0 8px; } .col-card { border: 1px solid oklch(0.70 0.09 72 / 0.22); border-radius: 10px; background: var(--surface-panel-2); padding: 14px 16px; margin-bottom: 10px; } .col-card.owned { border-color: oklch(0.74 0.10 72 / 0.38); background: linear-gradient(180deg, oklch(0.30 0.04 72 / 0.14), var(--surface-panel-2)); } .col-card-hd { font-size: 15px; color: #ecebe6; } .col-card-sub { font-size: 12.5px; color: #8a8a84; margin-top: 3px; } .col-card-meta { font-size: 12px; color: #6a6a65; margin-top: 7px; } .col-card-progress { font-size: 12.5px; color: #cfcdc8; margin-top: 7px; } .col-card-progress b { color: oklch(0.86 0.10 72); font-weight: 600; } .col-card-btns { display: flex; gap: 10px; align-items: center; margin-top: 11px; flex-wrap: wrap; } /* «Аудирование»: отдельный лёгкий режим внутри Коллекций. Первый прототип уже использует MP3; браузерная озвучка оставлена только fallback-ом. */ .lis-home { width: 100%; max-width: none; min-width: 0; } /* Своей типографики у пояснения аудирования нет: раньше здесь были на пол-пункта другие размеры и цвета, из-за чего два одинаковых по смыслу блока читались как разные компоненты. Всё общее — в .diag-intro. */ /* Карточка материала — та же .col-card, что в «Коллекциях»: вертикальный поток, действие завершает карточку. Своего здесь только страховка ширины текста; сетка с кнопкой во второй колонке убрана как источник дисбаланса. */ .lis-card { box-sizing: border-box; width: 100%; max-width: none; } .lis-card .col-card-hd, .lis-card .col-card-sub { max-width: 62ch; } /* моноширинный шрифт: длинное название не должно разрывать рамку */ .lis-card .col-card-hd { overflow-wrap: anywhere; } .lis-home .col-card:last-child { margin-bottom: 0; } /* Тот же янтарь раздела, приглушённый прозрачностью: на списке из десяти карточек ряд ярких кикеров дал бы полосатость и спорил с названиями. */ .lis-card-kicker { font-size: 11px; line-height: 1.35; letter-spacing: 0.04em; color: oklch(0.82 0.09 72 / 0.72); margin-bottom: 6px; } /* Группы по языкам — появляются со второго языка; паузы задаются отступами, третий тип линий на странице не нужен. */ .lis-group + .lis-group { margin-top: 18px; } /* Заголовок группы читается как одна строка: счётчик идёт сразу за названием, а не прижимается к правому краю — иначе он повторяет ту же ошибку, что исправлена у кнопки, и на широком экране висит сам по себе. */ .lis-group-hd { display: flex; align-items: baseline; gap: 10px; font-size: 11px; letter-spacing: 0.04em; margin: 0 0 8px; padding: 0 2px; } .lis-group-name { color: #8a8a84; } .lis-group-count { color: #6a6a65; } .lis-empty { margin-top: 0; } .lis-player { width: 100%; max-width: none; min-width: 0; } /* Управляющая строка: лёгкие текстовые действия вместо трёх прямоугольных кнопок — на экране, где главное это текст, рамки вокруг служебных действий перетягивают внимание. Высота закреплена: «Остановить» появляется и исчезает по ходу воспроизведения и не должен двигать текст под собой. */ .lis-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 22px; margin-bottom: 14px; } /* Язык и уровень — свойство материала, поэтому стоят в одной строке с его названием, а не в панели управления. Правый край — общий с содержимым. */ .lis-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .lis-top-meta { flex: none; font-size: 12px; color: #8a8a84; } .lis-title { font-size: 17px; color: #ecebe6; min-width: 0; } .lis-sub { margin-top: 5px; margin-bottom: 14px; max-width: 820px; font-size: 12.5px; line-height: 1.55; color: #8a8a84; } /* У текста НЕТ своей прокрутки. Раньше здесь стоял max-height с overflow-y, и справа оказывались два ползунка подряд: один у рабочей области терминала, другой у самого текста — приходилось угадывать, какой из них крутить. Материал просто продолжает страницу, прокрутка на экране одна. */ .lis-reader { box-sizing: border-box; width: 100%; padding: 14px 0 6px; border-top: 1px solid rgba(255, 255, 255, 0.07); border-bottom: 1px solid rgba(255, 255, 255, 0.055); } .lis-paragraph { margin: 0 0 17px; color: #bebdb8; font-size: 14.5px; line-height: 1.9; overflow-wrap: anywhere; } .lis-paragraph.translated { margin-bottom: 20px; line-height: 1.65; } .lis-pair { display: block; margin: 0 0 10px; } .lis-pair.active .lis-translation { color: #918d80; } .lis-sentence { appearance: none; display: inline; font: inherit; line-height: inherit; text-align: left; border: 0; border-radius: 4px; background: transparent; color: inherit; padding: 0 1px; margin: 0 1px; cursor: pointer; white-space: normal; transition: color 0.12s, text-shadow 0.12s; } .lis-sentence:hover, .lis-sentence:focus-visible { outline: none; color: oklch(0.84 0.10 72); text-shadow: 0 0 14px oklch(0.62 0.10 72 / 0.22); } .lis-sentence:active { color: oklch(0.88 0.11 72); } .lis-sentence.active, .lis-sentence.active:hover, .lis-sentence.active:focus-visible { color: #ded9c8; text-shadow: none; } .lis-word { transition: color 0.1s; } .lis-word.done { color: #74716b; } .lis-word.now { color: var(--accent); } .lis-translation { display: block; margin-top: 3px; padding-left: 16px; color: #686963; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; } @media (max-width: 720px) { /* Раскладка не меняется — она и так вертикальная; меняется только плотность. Кнопку на всю ширину не растягиваем: в «Коллекциях» и «Проверке» .dr-btn-sm автоширинная. */ .lis-hint { margin-bottom: 12px; } .lis-card .col-card-hd, .lis-card .col-card-sub { max-width: none; } .lis-group + .lis-group { margin-top: 14px; } } .col-price { font-size: 14px; color: oklch(0.88 0.10 72); font-variant-numeric: tabular-nums; } .col-price.big { font-size: 19px; } .col-head { margin-bottom: 12px; } /* Возврат стоит над названием коллекции отдельной строкой: это уход с экрана, а не часть заголовка. */ .col-head-back { margin-bottom: 12px; } .col-head .dr-btn-sm { margin-bottom: 10px; } .col-head-t { font-size: 17px; color: #ecebe6; } /* Блок покупки — законченная группа из двух строк. Было: цена, кнопка и длинное пояснение в ОДНОЙ строке. Текст перевешивал композицию вправо и читался как продолжение действия, будто у кнопки есть подпись-условие. Теперь пояснение уходит под кнопку отдельной строкой, выравнивается по её левому краю (то есть по левому краю всего блока) и остаётся заметно тише цены и кнопки. */ /* Две колонки: цена и всё остальное. Так пояснение встаёт ровно под кнопку, без подбора отступа под ширину суммы, — а сумма может стать и «12 000 ₽». Сетка ужимается по содержимому (inline-grid), поэтому вторая колонка не тянется на всю ширину дерева. */ .col-buy { display: inline-grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; margin-top: 10px; /* Воздух до следующего блока (полоска проверки / дерево): группа должна читаться как отдельная, а не сливаться с тем, что под ней. */ margin-bottom: 20px; } /* Кнопка не тянется на всю колонку: её ширину задаёт подпись, а ширину колонки — пояснение под ней. Без этого «Открыть коллекцию навсегда» растягивалась на 620px и переставала читаться как кнопка. */ .col-buy .dr-btn-sm { justify-self: start; } .col-buy-note { /* Вторая колонка, вторая строка — то есть точно под кнопкой. */ grid-column: 2; margin-top: 9px; font-size: 12px; line-height: 1.5; color: #8a8a84; /* Не даём строке разрастаться: длинный текст мелким кеглем читается тяжело, а на широком экране он иначе растянул бы и саму сетку. */ max-width: 620px; } /* «Проверка уровня» — саб-вкладки раздела «Коллекции»: диагностика живёт отдельно от витрины материалов. */ .col-subtabs { display: flex; gap: 6px; margin-bottom: 10px; flex: 0 0 auto; } .col-subtab { appearance: none; font: inherit; font-size: 12.5px; color: #9a9993; background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 7px; padding: 5px 12px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; } .col-subtab:hover { color: #d7d5cf; } .col-subtab.active { color: oklch(0.88 0.09 72); border-color: oklch(0.70 0.10 72 / 0.5); background: oklch(0.32 0.06 72 / 0.22); } /* Пояснение к проверке: спокойнее прежнего баннера (без янтарной заливки — вкладка уже названа) и закрывается крестиком. */ /* Пояснение вкладки — раскрывающееся, свёрнутое по умолчанию. Управляется одной ссылкой-вопросом над ним (.dr-hint-toggle), крестика внутри больше нет: закрывают там же, где открыли, поэтому и место справа под кнопку закрытия не резервируется. */ /* ---- Раскрывающееся пояснение вкладки (единый компонент) ---- Один компонент на «Проверку словарного запаса» и «Аудирование». Раньше это были две независимые реализации: панель проверки шла на всю ширину, а панель аудирования упиралась в собственный max-width 760px, и крестик у неё оказывался посреди экрана — два соседних раздела выглядели так, будто их делали разные люди. Здесь у обеих ОДНА геометрия; отличаются только текст заголовка и содержимое. Ширина панели — 100% рабочей области, ровно как у карточек ниже: пояснение относится ко всему списку под ним и должно стоять с ним в одну колонку. Никаких пиксельных ширин. */ .dr-hint { margin-bottom: 12px; } .dr-hint.open { margin-bottom: 14px; } /* Заголовок — отдельный управляющий элемент, а не часть рамки: без этого воздуха он прилипал к верхней границе панели и читался как её заголовок. */ .dr-hint.open .dr-hint-toggle { margin-bottom: 10px; } /* Текст + подчёркивание + шеврон — одна кнопка, и ровно ОДНА пунктирная линия: под текстом. Раньше кнопка носила ещё и класс .diag-link, у которого свой border-bottom. Он объявлен ниже по файлу, при равной специфичности побеждал обнуление — и под кнопкой целиком (вместе с шевроном) шла вторая пунктирная линия, прямо под первой. Поэтому переключатель самодостаточен: ни от чего не наследуется и ничего не обнуляет. */ .dr-hint-toggle { appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; font: inherit; font-size: 12px; color: #8a8a84; padding: 4px 2px; cursor: pointer; transition: color 0.12s; } /* Линия принадлежит тексту, а не кнопке: под иконкой она выглядела бы обрывком. */ .dr-hint-toggle .t { border-bottom: 1px dotted rgba(255, 255, 255, 0.22); transition: border-color 0.12s; } .dr-hint-toggle:hover, .dr-hint-toggle:focus-visible { color: oklch(0.86 0.09 72); } .dr-hint-toggle:hover .t, .dr-hint-toggle:focus-visible .t { border-bottom-color: oklch(0.74 0.10 72 / 0.5); } .dr-hint-toggle:focus-visible { outline: none; } /* Вниз — «можно развернуть», вверх — «можно свернуть». Поворот короткий: в терминальном интерфейсе лучше читается мгновенная реакция. */ .dr-hint-chev { flex: none; transition: transform 0.14s ease; } .dr-hint.open .dr-hint-chev { transform: rotate(180deg); } .diag-intro { display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.09); /* Тонкий янтарный торец — принадлежность к «Коллекциям», не тревога: это вторичный информационный блок, а не предупреждение. */ border-left: 2px solid oklch(0.74 0.10 72 / 0.55); border-radius: 9px; background: rgba(255, 255, 255, 0.02); /* Тот же ритм, что у карточек раздела ниже (.col-card): сверху и снизу поровну, слева и справа поровну. Крестик стоит в потоке, поэтому места под него отдельно резервировать не нужно и текст под него не подлезает. */ padding: 14px 16px; } .dr-hint-body { flex: 1; min-width: 0; } /* Первая строка внутри панели не добавляет свой отступ сверху: с ним воздух над текстом был заметно больше, чем под ним, и содержимое выглядело приподнятым. Вертикальный ритм задаёт padding контейнера. */ .diag-intro .col-diag-lead { margin-top: 0; } /* Второй способ закрыть — чтобы не тянуть мышь обратно к заголовку. Стоит в потоке у правого верхнего угла содержимого; отрицательные поля гасят собственные отступы кнопки, поэтому она не поднимает высоту панели и не сдвигает первую строку. */ .dr-hint-close { flex: none; margin: -4px -6px 0 0; appearance: none; border: 0; background: transparent; color: #6a6a65; font: inherit; font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 5px; cursor: pointer; transition: color 0.12s, background 0.12s; } .dr-hint-close:hover, .dr-hint-close:focus-visible { color: #d7d5cf; background: rgba(255, 255, 255, 0.06); outline: none; } /* .diag-link удалён: это был локальный предшественник текстового действия (ActionLink, docs/FRONTEND.md §3). Пока он жил рядом, его пунктирная линия перебивала обнуление у .dr-hint-toggle и рисовала вторую линию под заголовками подсказок. Вторичные действия проверки теперь строит actionLinkHtml — один компонент на всё приложение. */ .col-diag-t { font-size: 13.5px; font-weight: 600; color: oklch(0.88 0.09 72); } .col-diag-lead { font-size: 13px; line-height: 1.5; color: #d7d5cf; margin-top: 6px; } .col-diag-sub { font-size: 12px; line-height: 1.55; color: #9a9993; margin-top: 5px; } .diag-lang .diag-lang-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } .diag-paused { font-size: 12.5px; color: oklch(0.84 0.09 72); margin-top: 6px; } .diag-done { font-size: 12.5px; color: #cfcdc8; margin-top: 6px; } .diag-done .lv { color: oklch(0.84 0.09 72); font-size: 14px; } /* Полоска состояния диагностики на странице коллекции. */ .col-diag-strip { border: 1px solid oklch(0.74 0.10 72 / 0.4); border-radius: 9px; background: oklch(0.30 0.05 72 / 0.14); padding: 9px 12px; margin: 10px 0; font-size: 12.5px; color: #cfcdc8; } .col-diag-strip .dim { color: #8a8a84; font-size: 11.5px; } .diag-savemark { color: oklch(0.78 0.07 165); } .diag-err { font-size: 12.5px; color: oklch(0.78 0.14 25); } .diag-xp { font-size: 12px; color: oklch(0.80 0.10 165); margin-bottom: 12px; } /* Итог: строки диапазонов «A1 — уверенно освоен · 100%». */ .diag-res-lv-cap { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #8a8a84; margin-top: 10px; } .diag-lv-rows { max-width: 380px; margin: 14px auto; text-align: left; } .diag-lv-row { display: flex; align-items: center; gap: 12px; padding: 6px 2px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 12.5px; } .diag-lv-key { flex: 1; min-width: 0; color: #d7d5cf; } .diag-lv-label { color: #9a9993; } .diag-lv-label .dim { color: #6a6a65; } .diag-lv-label.strong { color: oklch(0.80 0.10 165); } .diag-lv-label.good { color: oklch(0.84 0.09 72); } .diag-lv-label.partial { color: #cfcdc8; } .col-check-res-acc .of { font-size: 20px; font-weight: 400; color: #6a6a65; } .col-check-res-rec .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8a84; margin-bottom: 6px; } .pf-diag-date { font-size: 11.5px; color: #8a8a84; } /* Честная оговорка под итогом: это оценка словарного запаса, а не уровня. */ .diag-disclaimer { max-width: 520px; margin: 0 auto 14px; font-size: 11.5px; line-height: 1.55; color: #6a6a65; text-align: center; } /* Раннер проверки уровня: один проход, крупная карточка, ничего лишнего. */ .col-check { max-width: 640px; margin: 6px auto 0; } /* Прохождение проверки берёт визуальный язык ЭКРАНА ЗАНЯТИЯ: те же .dr-cardwrap / .dr-card / .dr-face / .dr-ctl, та же ось переворота. Ограничение в 640px здесь снято намеренно. Оно осталось экрану итога, где читают текст (длинная строка утомляет), но на прохождении давало карточку в 57% ширины окна с полосой пустоты под ней — рядом с занятием проверка выглядела черновиком. Здесь главный объект экрана — карточка, и она занимает рабочую область целиком, как на занятии. */ .col-check.run { max-width: none; margin-top: 2px; } /* Переворот НЕ переопределяется: и длительность, и кривая наследуются от .dr-card, то есть от занятия. Была попытка ускорить его здесь до 0.24s (в проверке 150 слов подряд, полсекунды на каждом складываются в минуту), но владелец правильно указал: одно и то же действие в двух местах не должно ощущаться по-разному. Скорость — часть узнаваемости среды, а не параметр экрана; экономия читается как «другой продукт». От занятия отличается только высота: у диагностики нет язычков типа и примеров, и 400px оставляли бы полосу пустоты под карточкой. */ .dr-card.diag { height: 372px; } .dr-cardwrap.diag { margin: 14px 0 18px; } /* Окно анимации карточки проверки. Карточка занимает рабочую область целиком, а анимации занятия выводят её за края: вход cardNext приезжает со сдвигом translateX(30px), уход flyUp/flyDown уносит на 72px по вертикали. На занятии этот выход срезает .dr-body (overflow: hidden), а здесь карточка живёт внутри .col-scroll, который по горизонтали ничего не обрезает, — и на каждой смене слова внизу страницы выскакивала горизонтальная полоса прокрутки. Обрезаем ровно вокруг карточки, а не глобальным overflow-x на body: причина здесь, и прятать её на уровне страницы значило бы оставить мину для любой будущей анимации. Внутренние отступы обёртки входят в высоту (overflow отменяет схлопывание полей), поэтому геометрия не меняется. */ .diag-stage { overflow: hidden; } /* Оригинал под переводом: человек сверяет, что именно он вспоминал. Тише перевода — это опора, а не второй ответ. */ .dr-face-orig { margin-top: 14px; font-size: 13px; color: #8a8a84; } .col-check-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .col-check-title { margin-left: auto; font-size: 13px; color: oklch(0.88 0.09 72); font-weight: 600; } .col-check-exit-ask { font-size: 12px; color: #cfcdc8; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .col-check-sub { font-size: 11.5px; color: #8a8a84; margin: 8px 0 10px; } .col-check-bar { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .col-check-bar span { display: block; height: 100%; background: oklch(0.74 0.10 72); transition: width 0.2s; } /* Здесь жила собственная карточка проверки (.col-check-card / -side-label / -word / -orig) и свой ряд кнопок (.col-check-btns) — 190 px высоты, 640 px ширины, никакого переворота. Всё это заменено компонентами экрана занятия: .dr-cardwrap.diag / .dr-card.diag / .dr-face / .dr-ctl. Правила удалены, а не оставлены «на всякий случай»: два похожих набора для одной сущности разъезжаются при первой же правке одного из них. */ .col-check-wait { font-size: 13px; color: #9a9993; } .col-check-hint { text-align: center; font-size: 11px; color: #6a6a65; margin-top: 10px; } /* Результат проверки: отдельный экран с процентом и рекомендацией. */ .col-check-result { text-align: center; padding-top: 22px; } .col-check-res-kicker { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #8a8a84; } .col-check-res-acc { font-size: 46px; font-weight: 700; color: oklch(0.88 0.09 72); margin: 8px 0 2px; } .col-check-res-band { font-size: 12.5px; color: #9a9993; } .col-check-res-band.high { color: oklch(0.80 0.10 165); } .col-check-res-band.medium { color: oklch(0.84 0.09 72); } .col-check-res-rec { border: 1px solid oklch(0.74 0.10 72 / 0.4); border-radius: 10px; background: oklch(0.30 0.05 72 / 0.16); padding: 14px 16px; margin: 16px auto 14px; max-width: 520px; text-align: left; } .col-check-res-rec .t { font-size: 13.5px; font-weight: 600; color: oklch(0.88 0.09 72); } /* Конкретное место в коллекции под заголовком рекомендации: «A1 — Базовый английский · 01. Человек и общение». Тише заголовка — это уточнение. */ .col-check-res-rec .p { font-size: 12px; line-height: 1.5; color: #8a8a84; margin-top: 4px; } .col-check-res-rec .x { font-size: 13px; line-height: 1.55; color: #cfcdc8; margin-top: 6px; } .col-check-res-rec .h { font-size: 11.5px; line-height: 1.5; color: #8a8a84; margin-top: 8px; } .col-check-res-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* Подсветка рекомендованной темы после «Открыть рекомендованный раздел». */ .col-fold.flash > .col-fold-hd { animation: colFlash 1.8s ease-out 1; } @keyframes colFlash { 0% { background: oklch(0.40 0.08 72 / 0.5); } 100% { background: transparent; } } .col-tree { margin-top: 10px; } .col-fold { margin-left: calc(var(--col-depth, 0) * 0px); } .col-fold-hd { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 9px 6px 9px calc(6px + var(--col-depth, 0) * 18px); font: inherit; font-size: 13px; color: #d7d5cf; cursor: pointer; text-align: left; transition: background 0.12s; } .col-fold-hd:hover { background: rgba(255, 255, 255, 0.03); } .col-fold-hd.extra .col-fold-name { color: #8a8a84; } .col-caret { color: oklch(0.76 0.09 72); width: 12px; flex: 0 0 auto; } .col-fold-name { flex: 1; min-width: 0; } .col-fold-count { font-size: 11.5px; color: #6a6a65; white-space: nowrap; } .col-deck { display: flex; align-items: center; gap: 10px; padding: 7px 6px 7px calc(24px + var(--col-depth, 0) * 18px); border-top: 1px solid rgba(255, 255, 255, 0.04); font-size: 12.5px; } .col-deck.rec { background: oklch(0.32 0.05 72 / 0.12); } .col-deck-name { flex: 1; min-width: 0; color: #cfcdc8; } /* Компактная пометка пути рекомендации: стоит у уровня, темы и стопки. У раскрытых родителей приглушается — акцент на самом глубоком шаге. */ .col-rec-tag { flex: 0 0 auto; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.86 0.10 72); border: 1px solid oklch(0.74 0.10 72 / 0.45); background: oklch(0.32 0.06 72 / 0.28); border-radius: 5px; padding: 1px 6px; margin-left: 8px; white-space: nowrap; } .col-rec-tag.dim { color: oklch(0.72 0.06 72 / 0.8); border-color: oklch(0.70 0.08 72 / 0.22); background: transparent; } /* Метка «Рекомендуем» — постоянный след проверки словарного запаса. Сознательно НЕ бейдж: без рамки, подложки, скругления и иконки. Янтарный цвет связывает её с подсветкой перехода, размер оставляет её заметно слабее названия темы. Стоит внутри имени, поэтому счётчик добавленных стопок справа не сдвигается. */ .col-rec-mark { margin-left: 10px; font-size: 11px; color: oklch(0.78 0.09 72); white-space: nowrap; } .col-deck-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .col-badge { font-size: 11.5px; white-space: nowrap; } .col-badge.dim { color: #6a6a65; } .col-badge.ok { color: oklch(0.80 0.10 165); } .col-badge.learn { color: oklch(0.82 0.10 var(--accent-h)); } .dr-btn-xs.col-add { color: oklch(0.88 0.10 72); border-color: oklch(0.70 0.10 72 / 0.4); background: oklch(0.32 0.06 72 / 0.25); } .dr-btn-xs.col-add:hover { background: oklch(0.38 0.08 72 / 0.4); } /* ---------- Формат терминала (/theme) ---------- */ .theme-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 8px 0 4px; } .theme-opt { display: flex; align-items: center; gap: 11px; text-align: left; appearance: none; cursor: pointer; font: inherit; padding: 11px 13px; border-radius: 9px; background: var(--surface-panel-2); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text); transition: border-color 0.12s, background 0.12s; } .theme-opt:hover { border-color: oklch(0.74 0.09 var(--accent-h) / 0.5); } .theme-opt.active { border-color: oklch(0.74 0.10 var(--accent-h) / 0.7); background: oklch(0.74 0.09 var(--accent-h) / 0.08); } .theme-opt.locked { opacity: 0.72; cursor: default; } .theme-opt.locked:hover { border-color: rgba(255, 255, 255, 0.14); } .theme-name { flex: 1; font-size: 13px; } .theme-badge { font-size: 11px; color: oklch(0.85 0.09 72); white-space: nowrap; } .theme-active { font-size: 11.5px; color: oklch(0.82 0.10 var(--accent-h)); white-space: nowrap; } .theme-swatch { flex: 0 0 auto; width: 42px; height: 30px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.16); position: relative; overflow: hidden; } .theme-swatch::before { content: ""; position: absolute; inset: 0; } .theme-swatch::after { content: ""; position: absolute; left: 6px; bottom: 6px; width: 18px; height: 5px; border-radius: 3px; } /* Превью-свотчи каждой темы — ФИКСИРОВАННЫЕ значения (панель + акцент), чтобы показать все темы независимо от текущей активной. */ .theme-swatch[data-theme-swatch="default"]::before { background: #0f1013; } .theme-swatch[data-theme-swatch="default"]::after { background: oklch(0.74 0.10 165); } .theme-swatch[data-theme-swatch="graphite"]::before { background: #191c21; } .theme-swatch[data-theme-swatch="graphite"]::after { background: oklch(0.74 0.10 250); } .theme-swatch[data-theme-swatch="wet_asphalt"]::before { background: #161b22; } .theme-swatch[data-theme-swatch="wet_asphalt"]::after { background: oklch(0.74 0.10 245); } .theme-swatch[data-theme-swatch="steel_storm"]::before { background: #171b24; } .theme-swatch[data-theme-swatch="steel_storm"]::after { background: oklch(0.74 0.10 255); } .theme-swatch[data-theme-swatch="black_amber"]::before { background: #12100b; } .theme-swatch[data-theme-swatch="black_amber"]::after { background: oklch(0.76 0.11 70); } .theme-swatch[data-theme-swatch="wine_night"]::before { background: #140d11; } .theme-swatch[data-theme-swatch="wine_night"]::after { background: oklch(0.66 0.13 12); } /* ================= Реферальная программа: кабинет креатора ================= Стили в семантике приложения (не админской фиолетовой): кабинет — обычный раздел для пользователя-креатора. Таблицы переиспользуют .dr-admin-table (нейтральная сетка), но рамки здесь белёсые, без фиолетового оттенка. */ .dr-ref-wrap { display: flex; flex-direction: column; gap: 11px; } .dr-ref-paused { border: 1px solid oklch(0.72 0.10 72 / 0.45); background: oklch(0.72 0.10 72 / 0.08); color: oklch(0.84 0.08 72); border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.55; } .dr-ref-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; } .dr-ref-card { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-panel-2); padding: 12px 16px; min-width: 0; } .dr-ref-card-t { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.24em; color: #8a8a84; margin-bottom: 7px; } .dr-ref-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13.5px; min-width: 0; } .dr-ref-lbl { color: #8a8a84; flex: none; min-width: 150px; font-size: 12.5px; } .dr-ref-code { font-weight: 600; letter-spacing: 0.08em; color: oklch(0.84 0.10 72); user-select: all; } .dr-ref-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; color: var(--accent, #7fd1b9); } .dr-ref-hint { color: #8a8a84; font-size: 12px; line-height: 1.5; margin-top: 5px; } .dr-ref-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .dr-ref-stats.money { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 6px; } .dr-ref-stat { border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-panel-2); padding: 8px 12px; min-width: 0; } .dr-ref-stat-v { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-ref-stat-l { color: #8a8a84; font-size: 11px; margin-top: 4px; } .dr-ref-payask { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 12px 14px; font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .dr-ref-payask .a-actions { display: flex; gap: 8px; margin-left: auto; } /* Статусные цвета операций: и в кабинете, и в админ-таблицах партнёрки. */ .st-ok { color: oklch(0.82 0.10 160); } .st-bad { color: oklch(0.78 0.12 25); } .st-warn { color: oklch(0.84 0.08 72); } .st-wait { color: #a09a8e; } /* Колонки таблиц партнёрки поверх базовой .dr-admin-trow-сетки. */ .dr-admin-table.ref-orders .dr-admin-trow { grid-template-columns: 0.8fr 1fr 1.2fr 0.8fr 0.8fr 1.4fr; } .dr-admin-table.ref-ledger .dr-admin-trow { grid-template-columns: 0.8fr 1.1fr 0.9fr 2fr; } .dr-admin-table.ref-payouts .dr-admin-trow { grid-template-columns: 0.8fr 0.9fr 1fr 2fr; } .dr-admin-table.creators .dr-admin-trow { grid-template-columns: 1.2fr 1fr 0.8fr 0.9fr auto; } .dr-admin-table.cr-payouts .dr-admin-trow { grid-template-columns: 0.8fr 1fr 0.8fr 0.9fr auto; } .dr-admin-table.cr-orders .dr-admin-trow { grid-template-columns: 0.8fr 1.3fr 0.8fr 0.8fr 1fr auto; } .dr-admin-kv { display: flex; gap: 10px; font-size: 13px; padding: 3px 0; min-width: 0; } .dr-admin-kv > span:first-child { color: #8f89a0; min-width: 90px; flex: none; font-size: 12px; } .dr-admin-kv > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-admin-sec-title.sm { font-size: 12px; margin-top: 16px; } .dr-admin-hint { color: #8f89a0; font-size: 12px; line-height: 1.5; margin-top: 6px; } .dr-admin-payask { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px dashed oklch(0.50 0.08 300 / 0.25); } .dr-admin-payask .dr-admin-input { flex: 1; } @media (max-width: 980px) { .dr-ref-grid { grid-template-columns: 1fr; } .dr-ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dr-ref-stats.money { grid-template-columns: 1fr; } } /* ============ Панель подтверждения e-mail (единая на приложение) ============ Открывается из api() по ответу 403 email_not_verified, поэтому живёт в отдельном хосте на и не зависит от текущего экрана. Тон спокойный: это не ошибка пользователя, а один невыполненный шаг. */ .dr-vgate-back { position: fixed; inset: 0; z-index: 70; background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(2px); } /* Центрирование — flex-обёрткой, а не transform самой модалки. Прежнее left:50% + translate(-50%,-50%) ломала анимация появления: кейфреймы drPopIn на время анимации ПОДМЕНЯЮТ transform своим scale, и первые кадры окно стояло левым верхним углом в центре экрана («справа снизу»), а по окончании телепортировалось на место. В обёртке drPopIn безопасен — позицию держит flex, а не transform. */ .dr-vgate-wrap { position: fixed; inset: 0; z-index: 71; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: none; /* клики мимо модалки уходят подложке-закрытию */ } .dr-vgate { pointer-events: auto; width: min(580px, calc(100vw - 32px)); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: var(--surface-panel); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9); padding: 22px 24px 18px; animation: drPopIn 0.16s ease-out; } .dr-vgate-t { font-size: 15px; color: oklch(0.86 0.09 72); margin-bottom: 10px; } .dr-vgate-msg { font-size: 13px; line-height: 1.6; color: #cfcdc8; } .dr-vgate-mail { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 9px; background: var(--surface-inset, rgba(255, 255, 255, 0.02)); } .dr-vgate-mail .lbl { color: #8a8a84; font-size: 12px; } .dr-vgate-mail .val { color: var(--accent, #7fd1b9); font-size: 13px; user-select: all; overflow-wrap: anywhere; } .dr-vgate-hint { color: #8a8a84; font-size: 12px; line-height: 1.5; margin-top: 8px; } /* Место под сообщение зарезервировано ВСЕГДА (две строки текста): проверка статуса и её результат не меняют высоту окна и не сдвигают кнопки — раньше появление строки раздвигало модалку, и она «дёргалась». */ .dr-vgate-note { font-size: 12px; line-height: 1.5; min-height: 36px; margin-top: 10px; color: #8a8a84; } .dr-vgate-note.ok { color: oklch(0.82 0.10 160); } .dr-vgate-note.err { color: oklch(0.78 0.12 25); } .dr-vgate-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* «Закрыть» — второстепенное действие: уводим к правому краю, чтобы две основные кнопки читались как пара. */ .dr-vgate-btns .dr-btn-sm:last-child { margin-left: auto; } /* Ширина первой кнопки закреплена по самой длинной подписи («Отправить письмо повторно»): смена текста на «Отправляем…» и «Письмо отправлено ✓» не двигает соседние кнопки. */ .dr-vgate-btns .dr-btn-sm:first-child { min-width: 216px; } @media (max-width: 560px) { .dr-vgate { padding: 18px 16px 14px; } .dr-vgate-btns .dr-btn-sm { flex: 1 1 auto; } } /* ============ Заявка на участие в партнёрской программе (ap-*) ============ Тот же терминал: общие поля, кнопки и статусы. Индикатор этапов есть, но страница не превращается в банковский мастер — она остаётся строгой. */ .ap-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #6f6f69; } .ap-step { display: flex; align-items: center; gap: 7px; } .ap-step .n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; } .ap-step.on { color: var(--accent, #7fd1b9); } .ap-step.done { color: oklch(0.72 0.09 160); } .ap-step-sep { color: #45453f; } .ap-intro { font-size: 13px; line-height: 1.65; color: #a8a69f; margin-bottom: 18px; max-width: 620px; } .ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 18px; } .ap-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ap-lbl { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a84; display: flex; align-items: baseline; gap: 8px; } .ap-hint { text-transform: none; letter-spacing: 0; font-size: 11px; color: #6f6f69; } .ap-field.err .dr-admin-input, .ap-block.err .dr-admin-input { border-color: oklch(0.66 0.14 25 / 0.75); } .ap-err { font-size: 11.5px; color: oklch(0.78 0.12 25); } .ap-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .ap-chips { display: flex; flex-wrap: wrap; gap: 7px; } .ap-chip { appearance: none; cursor: pointer; font: inherit; font-size: 12px; padding: 6px 11px; border-radius: 7px; background: transparent; color: #a8a69f; border: 1px solid rgba(255, 255, 255, 0.12); transition: all 0.12s; } .ap-chip:hover { color: #e9e7e2; border-color: rgba(255, 255, 255, 0.22); } .ap-chip.on { color: var(--accent, #7fd1b9); border-color: oklch(0.62 0.10 var(--accent-h) / 0.6); background: var(--accent-soft, oklch(0.74 0.09 var(--accent-h) / 0.14)); } .ap-link-row { display: flex; gap: 8px; align-items: center; } .ap-link-row .dr-admin-input { flex: 1; min-width: 0; } .ap-area { resize: vertical; min-height: 84px; line-height: 1.55; } .ap-note { font-size: 12.5px; line-height: 1.5; min-height: 18px; color: #8a8a84; } .ap-note.ok { color: oklch(0.82 0.10 160); } .ap-note.err { color: oklch(0.78 0.12 25); } .ap-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } /* ---- документ правил ---- */ .ap-doc-head { margin-bottom: 12px; } .ap-doc-t { font-size: 15px; color: #e9e7e2; } .ap-doc-meta { font-size: 11.5px; color: #8a8a84; margin-top: 4px; } /* Выделение и копирование выключены ТОЛЬКО здесь. Это препятствие для «скопировал целиком, отдал нейросети, принял не читая», а не защита: текст остаётся обычным HTML — работают поиск по странице, адаптивность и средства доступности. Настоящий контроль — прокрутка до конца, ручной ввод ФИО и отдельные подтверждения ключевых условий. */ .ap-doc-body { max-height: min(46vh, 420px); overflow-y: auto; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-inset, rgba(255, 255, 255, 0.02)); font-size: 13px; line-height: 1.65; color: #c9c7c1; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .ap-doc-body h2 { font-size: 14px; color: #e9e7e2; margin: 0 0 10px; } .ap-doc-body h3 { font-size: 13px; color: oklch(0.84 0.08 var(--accent-h)); margin: 18px 0 8px; } .ap-doc-body h4 { font-size: 12.5px; color: #d8d6d0; margin: 14px 0 6px; } .ap-doc-body p { margin: 0 0 9px; } .ap-doc-body ol, .ap-doc-body ul { margin: 0 0 10px; padding-left: 22px; } .ap-doc-body li { margin-bottom: 5px; } .ap-doc-body code { color: var(--accent, #7fd1b9); font-size: 12.5px; } .ap-doc-body strong { color: #e9e7e2; } .ap-doc-body blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid rgba(255, 255, 255, 0.14); color: #a8a69f; } .ap-readmark { margin-top: 10px; font-size: 12px; color: #8a8a84; } .ap-readmark.on { color: oklch(0.82 0.10 160); } .ap-confirm { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 10px; } .ap-check { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: #c9c7c1; cursor: pointer; } .ap-check input { margin-top: 3px; flex: none; accent-color: oklch(0.70 0.10 var(--accent-h)); } /* ---- итоговые состояния (ожидание, отказ, одобрение) ---- */ .ap-final { max-width: 620px; } .ap-final-t { font-size: 16px; color: #e9e7e2; margin-bottom: 10px; } .ap-final-msg { font-size: 13px; line-height: 1.65; color: #a8a69f; margin-bottom: 16px; } @media (max-width: 720px) { .ap-grid { grid-template-columns: 1fr; } .ap-doc-body { max-height: 52vh; } } /* Админ: реферальные заявки */ .dr-admin-table.apps .dr-admin-trow { grid-template-columns: 0.8fr 1fr 1.3fr 0.9fr 1fr auto; } .dr-admin-table.apps-hist .dr-admin-trow { grid-template-columns: 0.8fr 1fr 1fr 1fr; } .ap-adm-link { font-size: 12.5px; color: #a9a2ba; padding: 4px 0; overflow-wrap: anywhere; } .ap-adm-plan { font-size: 12.5px; line-height: 1.6; color: #cfcdc8; white-space: pre-wrap; padding: 10px 12px; border: 1px solid oklch(0.50 0.08 300 / 0.2); border-radius: 9px; } .dr-admin-chip .n { margin-left: 7px; color: #8f89a0; font-size: 11px; } /* Приглашение от администрации на экране заявки */ .ap-invite { border: 1px solid oklch(0.72 0.10 72 / 0.45); background: oklch(0.72 0.10 72 / 0.08); color: oklch(0.86 0.08 72); border-radius: 10px; padding: 12px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 16px; max-width: 620px; } /* Кабинет 2.0: ставка крупно, кликабельные регистрации, живые пустые состояния */ .dr-ref-card.rate { display: flex; flex-direction: column; } .dr-ref-rate { font-size: 34px; font-weight: 650; line-height: 1.05; color: var(--accent, #7fd1b9); letter-spacing: 0.01em; } .dr-ref-rate-sub { color: #a8a69f; font-size: 12.5px; margin: 2px 0 6px; } .dr-ref-stat.clickable { cursor: pointer; transition: border-color 0.12s, background 0.12s; } .dr-ref-stat.clickable:hover { border-color: oklch(0.62 0.10 var(--accent-h) / 0.55); background: var(--accent-soft, oklch(0.74 0.09 var(--accent-h) / 0.10)); } .dr-ref-empty { border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .dr-ref-empty .t { font-size: 14px; color: #e9e7e2; } .dr-ref-empty .d { font-size: 12.5px; line-height: 1.55; color: #8a8a84; margin-bottom: 6px; } .dr-admin-table.ref-regs .dr-admin-trow { grid-template-columns: 1fr 1.4fr 0.7fr 1.2fr; } .dr-admin-table.ref-orders .dr-admin-trow { grid-template-columns: 1fr 1fr 1.1fr 0.7fr 0.55fr 0.7fr 1.6fr; } .dr-admin-table.rate-hist .dr-admin-trow { grid-template-columns: 1fr 1fr 1fr; } /* Журнал событий безопасности: время, тип, IP, endpoint, детали. */ .dr-admin-table.sec-events .dr-admin-trow { grid-template-columns: 1.1fr 1.3fr 0.9fr 1.2fr 1.6fr; } .dr-admin-table.sec-events .a-code, .dr-admin-table.sec-events .a-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Закрытый вход в партнёрку: контакт Telegram */ .ap-tg-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; } .ap-tg-btn { text-decoration: none; display: inline-flex; align-items: center; } /* Кабинет 3.0: компактная главная + вложенные экраны */ .dr-ref-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; } .dr-ref-crumbs .sep { color: #55554f; } .dr-ref-crumbs .cur { color: #e9e7e2; } .dr-ref-grid.last-row { grid-template-columns: 1fr 1fr; } .dr-ref-card.last { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .dr-ref-card.last .dr-btn-sm { margin-top: auto; } .dr-ref-last-main { font-size: 14px; color: #e9e7e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .dr-ref-last-sub { font-size: 12px; color: #8a8a84; } .dr-ref-last-st { font-size: 12px; margin-bottom: 10px; } .dr-ref-last-empty { font-size: 12.5px; line-height: 1.55; color: #8a8a84; margin-bottom: 10px; } .dr-ref-stat .arr { color: var(--accent, #7fd1b9); font-size: 14px; } .dr-ref-pager { display: flex; align-items: center; gap: 10px; margin-top: 10px; justify-content: flex-end; } .dr-ref-pager .pg { font-size: 12px; color: #8a8a84; } @media (max-width: 980px) { .dr-ref-grid.last-row { grid-template-columns: 1fr; } } /* ================= Друзья (/friends) ================= */ .fr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 14px; } .fr-tile { appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.09); background: var(--surface-panel-2); color: #e9e7e2; transition: border-color 0.12s, background 0.12s; } .fr-tile:hover { border-color: oklch(0.62 0.10 var(--accent-h) / 0.55); background: var(--accent-soft, oklch(0.74 0.09 var(--accent-h) / 0.10)); } .fr-tile-t { font-size: 14px; display: flex; align-items: center; gap: 8px; } .fr-tile-d { font-size: 12px; color: #8a8a84; } .fr-usercard { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-panel-2); margin-bottom: 8px; } .fr-uc-name { font-size: 14px; color: #e9e7e2; } .fr-uc-lvl { font-size: 12px; color: #8a8a84; } /* Дата подачи заявки прижата к кнопкам: это свойство самой заявки, а не человека, поэтому она стоит рядом с решением по ней, а не в его подписи. */ .fr-uc-when { margin-left: auto; font-size: 12px; color: #6f6f6a; white-space: nowrap; } .fr-uc-when + .fr-uc-act { margin-left: 14px; } .fr-uc-act { margin-left: auto; display: flex; gap: 8px; align-items: center; } .fr-list { display: flex; flex-direction: column; } .fr-friendrow { appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; background: var(--surface-panel-2); color: #e9e7e2; margin-bottom: 8px; transition: border-color 0.12s, background 0.12s; } /* Только что принятый друг: мягкий мятный след на пару секунд — ответ на вопрос «где он в списке». Без вспышки и без постоянной рамки: подсветка гаснет сама и ничего не смещает (меняются только цвета). */ .fr-friendrow.just-added { border-color: oklch(0.74 0.10 var(--accent-h) / 0.5); background: oklch(0.34 0.05 var(--accent-h) / 0.22); transition: background 0.5s ease, border-color 0.5s ease; } .fr-friendrow:hover { border-color: oklch(0.62 0.10 var(--accent-h) / 0.55); background: var(--accent-soft, oklch(0.74 0.09 var(--accent-h) / 0.10)); } .fr-friendrow .fr-fr-meta { font-size: 12px; color: #8a8a84; } .fr-friendrow .arr { margin-left: auto; color: var(--accent, #7fd1b9); } .fr-prof-head { margin-bottom: 12px; } .fr-prof-name { font-size: 18px; color: #e9e7e2; } .fr-prof-lvl { font-size: 13px; color: #a8a69f; margin-top: 4px; } .fr-prof-since { font-size: 12px; color: #8a8a84; margin-top: 2px; } /* ==================== Сравнение с другом ==================== Экран отвечает на вопрос «как мы занимаемся и в чём разница», а не «кто победил». Поэтому здесь намеренно нет: общего счёта, формулировок «впереди по N показателям», встречных полос-шкал, чипов, рамок вокруг разницы и любых накопительных счётчиков карточек. Никакой жирности — насыщенность всюду обычная, разницу несут только цвет и размер. Два блока в одной сетке. «Недавняя активность» — главный: то, на что можно повлиять сегодня, он крупнее и с разделителями. «Общий прогресс» — тише: за всё время его почти нельзя изменить одним занятием, и соревноваться там бессмысленно. Шапка колонок печатается один раз, над первым блоком. */ .fr-cmp-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; } /* От крошек до первого блока — те же 28px, что и между блоками: свои 14px крошки уже отдали снизу. */ .fr-cmp-cap:first-child { margin-top: 14px; } .fr-cmp-cap .t { font-size: 12px; letter-spacing: 0.08em; color: #cfcdc8; } .fr-cmp-cap .d { font-size: 11.5px; color: #55564f; } /* Второй блок — тише первого по всем параметрам сразу. */ .fr-cmp-cap.sub .t { font-size: 11px; color: #77776f; } .fr-cmp-cap.sub .d { font-size: 11px; color: #4d4e48; } /* Одна сетка у шапки и у строк обоих блоков: колонки значений стоят вертикально ровно, независимо от длины подписи слева. */ .fr-cmp-head, .fr-cmp-row { display: grid; grid-template-columns: 1fr 168px 168px 132px; } .fr-cmp-head { padding: 12px 12px 8px; margin-top: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 10.5px; letter-spacing: 0.09em; color: #55564f; } .fr-cmp-head .me { color: oklch(0.78 0.09 var(--accent-h)); } .fr-cmp-head .fr { color: oklch(0.80 0.08 74); } .fr-cmp-head .df { text-align: right; } .fr-cmp-rows { display: flex; flex-direction: column; } .fr-cmp-rows.sub { margin-top: 8px; } .fr-cmp-row { align-items: center; padding: 11px 12px; border-radius: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); transition: background 0.12s; } .fr-cmp-row:hover { background: rgba(255, 255, 255, 0.026); } .fr-cmp-row .l { font-size: 13.5px; color: #a5a49e; } .fr-cmp-row .v { font-size: 14px; } .fr-cmp-row .df { font-size: 13px; text-align: right; } .fr-cmp-rows.sub .fr-cmp-row { padding: 8px 12px; border-bottom: 0; } .fr-cmp-rows.sub .fr-cmp-row:hover { background: rgba(255, 255, 255, 0.022); } .fr-cmp-rows.sub .fr-cmp-row .l { font-size: 13px; color: #7e7e78; } .fr-cmp-rows.sub .fr-cmp-row .v { font-size: 13px; } /* Ровно три цвета на весь экран. Свой — акцент темы (по умолчанию тот самый мятный oklch(… 165)), поэтому на любой теме «моя» колонка остаётся «моей». Цвет друга зафиксирован: он должен отличаться от акцента при любой теме. Серым выводятся нули и равенство — это нормальное состояние нового аккаунта, а не ошибка. */ .fr-cmp-me { color: oklch(0.78 0.09 var(--accent-h)); } .fr-cmp-fr { color: oklch(0.80 0.08 74); } .fr-cmp-zero { color: #77776f; } /* ==================== Текстовое действие (ActionLink) ==================== Паттерн интерфейса: элемент ведёт себя как действие, но выглядит обычным подчёркнутым текстом — без рамки, заливки и кнопочного контейнера. Это лёгкое ВТОРИЧНОЕ действие внутри уже открытого экрана, оно не должно конкурировать с содержимым и с главной кнопкой. Когда применять: вернуться назад, в главное меню, показать/скрыть перевод, перейти к списку, остановить воспроизведение, войти в словарную проверку. Когда НЕ применять: главные действия, которых от человека ждут, — «Открыть коллекцию навсегда», «Добавить в картотеку», «Активировать промокод»; а также пары «подтвердить / отмена» в диалогах, где две кнопки сравниваются между собой и обязаны выглядеть одинаково. Модификаторы: .back — ссылка возврата (BackLink): шеврон слева, сдвиг влево; .fwd — переход вперёд: шеврон справа, сдвиг вправо; без модификатора — действие на месте, без сдвига. Семантически это всегда