ещё сверстаны на Tailwind (styles.css), элементные правила дизайн-системы (h1-h3 serif, p max-width, section padding, цвет ссылок) не должны менять их вид. Селекторы обёрнуты в :where(), чтобы иметь нулевую «классовую» специфичность: любой класс дизайн-системы или Tailwind побеждает этот слой, а элементные правила redesign.css он перекрывает только порядком каскада. 2. Каркас приложения (появляется в кластере рестайла): адаптация компонентов .cab-* из redesign.css (вписанный макет-бокс) к полноэкранной оболочке личного кабинета и админки. Тема: класс dark на (theme-toggle приложения), как на сайте. ============================================================================ */ /* ============ ПЕРЕХОДНЫЙ КОМПАТ-СЛОЙ (удалить после фазы 3) ============ */ /* Контент страниц рендерится внутри

обоих layout. Хром (сайдбар, топбар, шапка, футер) лежит ВНЕ main и живёт по правилам дизайн-системы. Селекторы вида main :where(...) имеют специфичность (0,0,1): равны элементным правилам redesign.css и побеждают их только порядком каскада, а ЛЮБОЙ класс (Tailwind или дизайн-системы) побеждает их. */ main :where(h1, h2, h3) { font-family: var(--font-body); letter-spacing: normal; line-height: 1.25; text-wrap: initial; } main :where(p) { max-width: none; } main :where(section) { padding-block: 0; } main :where(a) { color: inherit; text-decoration-thickness: initial; text-underline-offset: initial; } /* ============ AUTH-ОБЁРТКА (define "layout") ============ */ /* Хром страниц входа/регистрации/оферты: стеклянная шапка .site-header и футер .site-footer из дизайн-системы, контент тянет футер вниз. */ .app-page { min-height: 100vh; display: flex; flex-direction: column; } .app-main { flex: 1; width: 100%; padding-block: clamp(24px, 4vw, 40px); display: block; } /* Шапка auth-страниц синхронизирована со статикой: та же лента меню .site-nav и гамбургер со шторкой (правила и брейкпоинт 800px едут из redesign.css, механика из redesign.js). Дополнительно к статике для залогиненного показываются имя и «Выйти»; на узкой шапке имя прячется, чтобы ряд «тема, кабинет, демо, бургер» не переполнялся. */ @media (max-width: 800px) { .app-hdr-user { display: none; } } .app-hdr-user { color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; } /* Флеши layout: зелёный успех и красная ошибка на токенах статусов. */ .app-flash { border: 1px solid color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); color: var(--ok); border-radius: var(--r-m); padding: 12px 14px; font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px; } .app-flash.is-err { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); background: color-mix(in srgb, var(--crit) 9%, var(--surface)); color: var(--crit); } /* Футер приложения: только базовая строка, без верхней сетки сайта. */ .app-footer-base { margin-top: 0; padding-top: 0; border-top: 0; } /* ============ AUTH-СТРАНИЦЫ (переверстанный контент фазы 3) ============ */ /* Компат-слой выше нейтрализует элементные правила дизайн-системы внутри main для ещё не переверстанных страниц. Переверстанные auth-компоненты возвращают себе типографику и ссылки дизайн-системы (как в site-mockup). */ .auth-card h1, .reg-main h1, .reg-side h2, .auth-ok h1, .auth-ok h2 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.14; text-wrap: balance; } .auth-ok h1 { font-size: 1.4rem; } .auth-card a:not(.btn), .auth-ok a:not(.btn), .reg-main a:not(.btn), .reg-side a:not(.btn) { color: var(--co-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Подзаголовок под h1 карточки/формы: как .reg-main .sub дизайн-системы. */ .auth-card .sub { color: var(--ink-2); font-size: 0.92rem; margin-top: -8px; } /* Широкая auth-обёртка: текстовые экраны (принятие оферты). */ .auth-wrap.is-wide { max-width: 640px; } .auth-card p { color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; } /* Статусные экраны на базе .auth-ok: информационный (проверьте почту) и критический (ошибка, оплата не завершена) варианты. */ .auth-ok.is-info { border-color: var(--co-line); background: color-mix(in srgb, var(--co) 8%, var(--surface)); } .auth-ok.is-info .ok-ico { background: color-mix(in srgb, var(--co) 15%, var(--surface)); color: var(--co-ink); } .auth-ok.is-crit { border-color: color-mix(in srgb, var(--crit) 40%, var(--line)); background: color-mix(in srgb, var(--crit) 8%, var(--surface)); } .auth-ok.is-crit .ok-ico { background: color-mix(in srgb, var(--crit) 14%, var(--surface)); color: var(--crit); } .auth-ok .btn { margin-top: 6px; } /* Хвост карточки принятия оферты: отделённый hairline выход из аккаунта. */ .auth-card .exit-row { border-top: 1px solid var(--line-soft); padding-top: 14px; text-align: center; } .auth-card .exit-row button { border: 0; background: none; font: inherit; font-size: 0.85rem; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .auth-card .exit-row button:hover { color: var(--ink); } /* Карточка пробного ключа на экране «Email подтверждён». */ .auth-key { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; text-align: left; display: grid; gap: 5px; font-size: 0.85rem; color: var(--ink-2); } .auth-key p { font-size: 0.85rem; color: var(--ink-2); } .auth-key .key { font-family: var(--font-mono); font-size: 1.02rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; } /* ============ КАРКАС КАБИНЕТА (define "dashboard_layout") ============ */ /* Компоненты .cab-* дизайн-системы описывают вписанный макет-бокс (site-mockup, роут #/dashboard). Здесь та же анатомия растянута на весь вьюпорт: грид сайдбар+колонка, без рамки и радиуса макета. Скролл остаётся на документе (main#content без своего overflow). */ .cab-app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: var(--bg); } @media (min-width: 861px) { /* Сайдбар всегда на экране: sticky-колонка во всю высоту вьюпорта. Собственный overflow-y нужен длинной админ-навигации на коротких экранах; шторка мобильного режима и так скроллится (redesign.css). */ .cab-app > .cab-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; } } @media (max-width: 860px) { .cab-app { grid-template-columns: 1fr; } } /* Топбар прилипает при прокрутке, как в текущем приложении. */ .cab-app .cab-topbar { position: sticky; top: 0; z-index: 10; } /* cab-title в приложении остаётся h1: возвращаем ему шрифт интерфейса (элементное правило h1 дизайн-системы даёт serif). */ .cab-topbar .cab-title { font-family: var(--font-body); } /* Контентная область: паддинги прежнего масштаба, без грида макета, чтобы не менять раскладку ещё не переверстанных страниц. */ .app-content { flex: 1; padding: clamp(16px, 2.5vw, 32px); } /* Бейджи счётчиков: .hidden (styles.css) обязан гасить .cab-badge (redesign.css грузится позже styles.css и иначе победил бы). */ .cab-badge.hidden { display: none; } /* Разделитель групп админ-навигации: дух spanel/sp-group console-mockup (сгруппированные разделы), но без новых текстов - только hairline. */ .cab-nav .app-nav-sep { height: 1px; background: var(--cab-line); margin: 8px 6px; } /* Аффорданс htmx-навигации: приглушение цели на время запроса (переехал из прежнего