/* Тема Night — самодостаточный стиль (токены + компоненты системы) */
/* ==========================================================================
   Тема Night — тёмная пара дизайн-системы QuasarGen CMS (только токены)
   ========================================================================== */


/* Локальные шрифты (CSP 'self'): Manrope — оболочка CMS, JetBrains Mono — код/данные */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../../../includes/fonts/manrope-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url("../../../includes/fonts/manrope-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../../../includes/fonts/jbmono-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
    src: url("../../../includes/fonts/jbmono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --font-ui: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "DejaVu Sans Mono", monospace;

    /* Поверхности — открытый космос (цвета сняты с макета) */
    --bg: #03060d;
    --bg-decor: radial-gradient(900px 520px at 76% 2%, rgba(112, 76, 220, .20), transparent 62%),
                radial-gradient(620px 380px at 96% 26%, rgba(64, 92, 220, .13), transparent 64%),
                radial-gradient(1400px 300px at 50% 52%, rgba(58, 108, 224, .10), transparent 70%),
                url("../../../images/stars-night.png") 0 0 / 320px 320px repeat;
    --surface: #090d19;
    --surface-2: #0c1120;
    --section-bg: #0a0d17;
    --header-bg: rgba(3, 6, 13, .78);
    --hover: rgba(240, 240, 240, .05);

    /* Текст */
    --text: #f0f0f0;
    --muted: #9095a5;

    /* Акцент — фиолетовый индиго; вторым голосом — циан */
    --accent: #6057f0;
    --accent-2: #50d3db;
    --accent-soft: rgba(96, 87, 240, .14);
    --accent-glow: rgba(96, 87, 240, .32);

    /* Геометрия и тени */
    --border: #1a2036;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .55), 0 18px 44px rgba(0, 0, 0, .6);

    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239095a5' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    /* Экран авторизации: светлая иллюстрация макета тут не годится — своя станция */
    --auth-side-bg: #05080f;
    --auth-main-bg: #03060d;
    --auth-label: #c7ccdb;
    --auth-ico: #6f7793;
    --auth-art: url("../../../images/hero-station-night.png");
    --news-hero-art: url("../../../images/hero-station-night.png");
    --auth-note-bg: rgba(96, 87, 240, .07);
    --cab-bg-opacity: .95;
    --cab-card-bg: rgba(19, 23, 38, .62);
    --cab-inner-bg: rgba(28, 33, 52, .5);
    --cab-cover: linear-gradient(120deg, #141033 0%, #0f1226 55%, #1a1140 100%);
    --auth-note-border: #1d2440;
}

:root {
    /* Герой — туманность за станцией */
    --hero-bg: linear-gradient(135deg, #0a0a18 0%, #06070f 55%, #080b1a 100%);
    --hero-grid: rgba(96, 87, 240, .08);
    --hero-orb: rgba(80, 211, 219, .12);
}

/* ==========================================================================
   QuasarGen CMS — единая дизайн-система тем (слой компоновки и компонентов)
   Темы задают ТОЛЬКО токены (:root[data-theme=...]); вся геометрия здесь.
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    background-image: var(--bg-decor);
    background-attachment: fixed;
    color: var(--text);
    font: 16px/1.65 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    transition: background-color .3s ease, color .3s ease;
}

.wrap { width: 80%; margin: 0 auto; }
@media (max-width: 900px) { .wrap { width: 92%; } }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Шапка ----------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--header-bg);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--border);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}

/* SHELL RESPONSIVE LAW: ниже 1024px строке шапки может не хватить места —
   разрешаем перенос контролов на вторую строку. Desktop (≥1024) прежний. */
@media (max-width: 1023px) {
    .site-header .wrap { flex-wrap: wrap; height: auto; min-height: 56px;
                         padding-top: 8px; padding-bottom: 8px; gap: 4px 12px; }
    .site-header .controls { margin-left: auto; flex-wrap: wrap;
                             justify-content: flex-end; row-gap: 6px; }
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.brand .logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.nav { display: flex; gap: 4px; margin-right: auto; }
.nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 550;
    padding: 8px 14px;
    border-radius: 10px;
    transition: color .18s ease, background-color .18s ease;
}
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a.active { color: var(--accent); background: var(--accent-soft); }

/* --- Контролы шапки: язык, тема, вход -------------------------------- */

.controls { display: flex; align-items: center; gap: 10px; }

.select {
    appearance: none;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 7px 30px 7px 12px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    background-image: var(--chevron);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    transition: transform .18s ease, color .18s ease, border-color .18s ease;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

/* --- Кнопки ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    padding: 10px 20px;
    font: inherit;
    font-weight: 650;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 6px 18px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }

/* --- Контент и сетка карточек ---------------------------------------- */

main.wrap { padding: 36px 0 72px; }

.page-title {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 6px 0 26px;
}

/* --- Герой-секция ------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid var(--border);
    background: var(--hero-bg);
    box-shadow: var(--shadow);
    padding: 46px 48px 42px;
    margin-bottom: 28px;
}
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero::before {                                   /* сетка-миллиметровка */
    background-image: linear-gradient(var(--hero-grid) 1px, transparent 1px),
                      linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(70% 90% at 30% 20%, #000 30%, transparent 75%);
}
.hero::after {                                    /* aurora-свечения */
    background:
        radial-gradient(520px 260px at 85% -20%, var(--accent-glow), transparent 70%),
        radial-gradient(420px 240px at -5% 120%, var(--hero-orb), transparent 70%);
    filter: blur(2px);
}
.hero > * { position: relative; z-index: 1; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 16px;
}
.hero-title {
    margin: 0 0 10px;
    font-size: clamp(30px, 4.6vw, 44px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
}
.hero-title .grad {
    background: linear-gradient(120deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    margin: 0 0 26px;
    max-width: 560px;
    color: var(--muted);
    font-size: 17px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* --- Иконка-плитка и ссылка-стрелка в карточках ----------------------- */

.tile {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    margin-bottom: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.tile svg { width: 22px; height: 22px; }

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--accent);
    font-weight: 650;
    font-size: 14px;
    text-decoration: none;
}
.card-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.card-link:hover svg { transform: translateX(3px); }

.stat {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
}
.stat-label { font-size: 13px; color: var(--muted); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.grid .span-2 { grid-column: span 2; }

/* --- Карточка (виджет) ------------------------------------------------ */

.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 26px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Deep Space: капсула отвечает на курсор границей-ультрамарином */
.card:hover { border-color: rgba(59, 130, 246, .45); box-shadow: var(--shadow-lift); }

.card-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-title::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 0 8px var(--accent-glow);
}
.card-body { color: var(--muted); font-size: 15px; }
.card-body p:first-child { margin-top: 0; }
.card-body p:last-child { margin-bottom: 0; }

/* --- Формы ------------------------------------------------------------ */

.form { display: grid; gap: 16px; max-width: 420px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; color: var(--muted); }
.input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font: inherit;
    padding: 11px 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Общий календарь: одинаковая локаль и геометрия во всех браузерах. */
.acms-date-field { position: relative; display: block; min-width: 0; }
.acms-date-field .acms-date-display { padding-right: 44px; cursor: pointer; }
.acms-date-toggle { position: absolute; z-index: 2; right: 8px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0;
    border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.acms-date-toggle:hover { color: var(--accent); background: var(--hover); }
.acms-date-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acms-date-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acms-calendar { position: absolute; z-index: 40; top: calc(100% + 7px); right: 0; width: min(310px, 88vw);
    padding: 12px; border: 1px solid var(--border); border-radius: 14px; color: var(--text);
    background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .48); text-align: left; }
.acms-calendar[hidden] { display: none; }
.acms-calendar-head { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; margin-bottom: 10px; }
.acms-calendar-select { min-width: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px;
    color: var(--text); background: var(--surface-2); font: inherit; font-size: 13px; text-transform: capitalize; }
.acms-calendar-weekdays, .acms-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.acms-calendar-weekdays span { padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 700;
    text-align: center; text-transform: capitalize; }
.acms-calendar-days button { aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 8px;
    color: var(--text); background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
.acms-calendar-days button:hover { background: var(--hover); }
.acms-calendar-days button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.acms-calendar-days .is-other { color: var(--muted); opacity: .55; }
.acms-calendar-days .is-today { box-shadow: inset 0 0 0 1px var(--accent); }
.acms-calendar-days .is-selected { color: #fff; background: var(--accent); opacity: 1; }
.acms-calendar-days button:disabled { opacity: .25; cursor: default; }
.acms-calendar-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.acms-calendar-foot button { padding: 5px 7px; border: 0; color: var(--accent); background: transparent;
    font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.cab-row-v.acms-date-field { width: min(260px, 100%); margin-left: auto; }

/* --- Подвал ----------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 14px;
}
.site-footer .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    padding-bottom: 28px;
}

/* --- Адаптив ---------------------------------------------------------- */

@media (max-width: 760px) {
    /* Шапка обязана укладываться в viewport (SHELL RESPONSIVE LAW):
       на узкой ширине controls переносятся на вторую строку —
       двухстрочная шапка вместо горизонтального скролла. */
    .controls .btn { padding: 9px 14px; }
    .controls .btn-ghost { max-width: 42vw; overflow: hidden;
                           text-overflow: ellipsis; white-space: nowrap; }
    .nav { display: none; }               /* мобильное меню — фаза Ф5/Ф6 */
    .grid .span-2 { grid-column: span 1; }
    main.wrap { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* --- Формы аккаунта (Ф3) ------------------------------------------------ */
.account-wrap { max-width: 600px; margin: 0 auto; }
.account-card .input { width: 100%; min-width: 0; }
.account-card { padding: 30px 32px; }
.form-wide { max-width: none; }
.row2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.hint { font-size: 12px; color: var(--muted); min-height: 16px; margin-top: 2px; }
.hint.ok { color: #2ea56a; }
.hint.bad { color: #d0453b; }
.field-err { font-size: 12px; color: #d0453b; margin-top: 2px; }
.pw-meter { height: 6px; border-radius: 4px; background: var(--surface-2);
    border: 1px solid var(--border); overflow: hidden; margin-top: 6px; }
.pw-meter span { display: block; height: 100%; width: 0; transition: width .2s ease; }
.pw-meter span.weak { background: #d0453b; }
.pw-meter span.medium { background: #d99a2b; }
.pw-meter span.strong { background: #2ea56a; }
.phone-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr); gap: 8px; }
.account-links { margin-top: 18px; display: flex; gap: 10px; align-items: center;
    font-size: 14px; }
.account-links a { color: var(--accent); text-decoration: none; font-weight: 600; }
.account-links span { color: var(--muted); }
.alert { border-radius: 10px; padding: 11px 14px; margin-bottom: 16px; font-size: 14px;
    border: 1px solid var(--border); }
.alert-error { background: rgba(208,69,59,.10); border-color: rgba(208,69,59,.4); color: #d0453b; }
.alert-ok { background: rgba(46,165,106,.10); border-color: rgba(46,165,106,.4); color: #2ea56a; }
.alert-info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.profile-table { width: 100%; border-collapse: collapse; }
.profile-table th { text-align: left; color: var(--muted); font-weight: 600;
    padding: 9px 12px 9px 0; width: 40%; vertical-align: top; }
.profile-table td { padding: 9px 0; }
@media (max-width: 560px) {
    .row2, .row3, .phone-row { grid-template-columns: 1fr; }
}

/* --- Тосты (уведомления) ------------------------------------------------ */
.toast-host {
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    pointer-events: none;
    max-width: min(92vw, 400px);
}
.toast-host[data-pos="top-left"]      { top: 0; left: 0; }
.toast-host[data-pos="top-center"]    { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.toast-host[data-pos="top-right"]     { top: 0; right: 0; align-items: flex-end; }
.toast-host[data-pos="bottom-left"]   { bottom: 0; left: 0; flex-direction: column-reverse; }
.toast-host[data-pos="bottom-center"] { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
.toast-host[data-pos="bottom-right"]  { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }

.toast {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 260px;
    max-width: 400px;
    padding: 13px 14px 15px 16px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    color: var(--text);
    font-size: 14px;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .24s ease, transform .24s ease;
    overflow: hidden;
    border-left: 4px solid var(--accent);
}
.toast.in  { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(6px) scale(.98); }
.toast-error { border-left-color: #d0453b; }
.toast-ok    { border-left-color: #2ea56a; }
.toast-info  { border-left-color: var(--accent); }
.toast-msg   { flex: 1; line-height: 1.45; }
.toast-close {
    flex: none;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.toast-close:hover { color: var(--text); }
.toast-bar {
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent);
    opacity: .55;
}
.toast-error .toast-bar { background: #d0453b; }
.toast-ok .toast-bar    { background: #2ea56a; }
@media (prefers-reduced-motion: reduce) {
    .toast { transition: opacity .2s ease; transform: none; }
    .toast-bar { transition: none !important; }
}

/* --- Админ-панель ------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }
.admin-nav {
    position: sticky; top: 88px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 2px;
}
.admin-nav-title { font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); padding: 6px 10px 10px; }
.admin-nav-item { display: block; padding: 9px 12px; border-radius: 10px;
    color: var(--muted); text-decoration: none; font-weight: 550; }
.admin-nav-item:hover { background: var(--hover); color: var(--text); }
.admin-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.admin-nav-exit { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0;
    padding-top: 14px; color: var(--muted); }
.admin-box { margin-bottom: 20px; }
.admin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.admin-stat { background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px 22px; min-width: 130px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600;
    padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 13px; }
.admin-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table code { font-family: var(--font-mono); font-size: 12.5px; }
.mono-cell { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-on { background: rgba(46,165,106,.14); color: #2ea56a; }
.badge-off { background: rgba(150,150,150,.14); color: var(--muted); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.select-sm { padding: 6px 28px 6px 10px; font-size: 13px; }
.dim { color: var(--muted); }
.role-grid { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 8px; }
.role-chk { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.role-chk.role-staff { color: var(--accent); }
.inline-form { margin: 0; }
.admin-users td { max-width: 340px; }
@media (max-width: 760px) { .admin-layout { grid-template-columns: 1fr; } .admin-nav { position: static; } }

/* --- Режим редактирования главной (Ф6) --------------------------------- */
.edit-toolbar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.edit-toolbar .btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.edit-hint { font-size: 13px; }
body.edit-mode .card[data-block-id] { cursor: grab; outline: 1px dashed transparent; }
body.edit-mode .card[data-block-id]:hover { outline-color: var(--accent); }
body.edit-mode .card.dragging { opacity: .55; cursor: grabbing; }
[data-editable].editable-on {
    outline: 1px dashed var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
    cursor: text;
    transition: background-color .15s ease;
}
[data-editable].editable-on:focus { outline-style: solid; background: var(--accent-soft); }
.news-list { list-style: none; padding: 0; margin: 0; }
.news-list li { padding: 5px 0; border-bottom: 1px solid var(--border); }
.news-list li:last-child { border-bottom: 0; }
.news-list a { color: var(--text); text-decoration: none; font-weight: 550; }
.news-list a:hover { color: var(--accent); }
.news-body { margin-top: 8px; line-height: 1.7; }


/* --- Личный кабинет ----------------------------------------------------- */
.cabinet { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.cab-side {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 24px 18px; box-shadow: var(--shadow);
    text-align: center; position: sticky; top: 88px;
}
.cab-avatar {
    width: 84px; height: 84px; border-radius: 22px; margin: 0 auto 14px;
    display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 8px 22px var(--accent-glow);
}
.cab-name { font-weight: 750; font-size: 18px; }
.cab-role {
    display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft);
}
.cab-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; text-align: left; }
.cab-nav-item { padding: 10px 14px; border-radius: 10px; color: var(--muted);
    text-decoration: none; font-weight: 550; }
.cab-nav-item:hover { background: var(--hover); color: var(--text); }
.cab-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.cab-exit { margin-top: 10px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 14px; }
.cab-content .card { margin-bottom: 20px; }
.cab-hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
@media (max-width: 760px) { .cabinet { grid-template-columns: 1fr; } .cab-side { position: static; } }

/* ==========================================================================
   Лендинг главной: герой с орбитальными модулями, метрики, витрина модулей
   ========================================================================== */

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 36px;
    align-items: center;
    padding: 22px 0 0;
}

.lp-kicker {
    display: inline-block;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.lp-title {
    margin: 24px 0 20px;
    font-size: clamp(40px, 5vw, 62px);
    line-height: 1.02;
    letter-spacing: -.035em;
    font-weight: 800;
}
.lp-title .accent { color: var(--accent); }

.lp-lead {
    margin: 0 0 20px;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.45;
    font-weight: 500;
}

.lp-sub {
    margin: 0 0 30px;
    max-width: 46ch;
    color: var(--muted);
    font-size: 15.5px;
}

.lp-cta { display: flex; gap: 16px; flex-wrap: wrap; }

.btn-lg { padding: 15px 26px; font-size: 15.5px; border-radius: 14px; }
.btn-ico { display: inline-flex; }
.btn-ico svg { width: 18px; height: 18px; }

.btn-outline {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.btn-outline:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

/* --- Иллюстрация с плавающими метками модулей ------------------------- */

.lp-visual { position: relative; display: grid; place-items: center; min-height: 340px; }

.lp-station {
    width: 100%;
    max-width: 480px;
    height: auto;
    filter: drop-shadow(0 26px 52px var(--accent-glow));
}

.lp-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
    white-space: nowrap;
}
.lp-chip-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
}
.lp-chip-icon svg { width: 17px; height: 17px; }
.lp-chip-text b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.lp-chip-text span { font-size: 12px; color: var(--muted); }

.lp-chip--shop    { left: -6%;   top: 6%; }
.lp-chip--blog    { right: -4%;  top: -6%; }
.lp-chip--users   { left: -14%;  top: 46%; }
.lp-chip--db      { right: -12%; top: 46%; }
.lp-chip--plugins { right: -4%;  bottom: 4%; }

/* --- Полоса метрик ----------------------------------------------------- */

.lp-stats { display: flex; flex-wrap: wrap; gap: 16px; margin: 34px 0 0; }

.lp-stat {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 24px 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.lp-stat-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}
.lp-stat-icon svg { width: 19px; height: 19px; }
.lp-stat-val { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.lp-stat-lbl { display: block; font-size: 12.5px; color: var(--muted); }

/* --- Секция витрины модулей ------------------------------------------- */

.lp-section {
    margin: 56px 0 0;
    padding: 46px 40px 44px;
    border-radius: 26px;
    background: var(--section-bg);
    border: 1px solid var(--border);
}
.lp-section-title {
    margin: 0;
    text-align: center;
    font-size: clamp(23px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
}
.lp-section-sub {
    margin: 10px auto 34px;
    max-width: 64ch;
    text-align: center;
    color: var(--muted);
    font-size: 14.5px;
}
.lp-section .grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 18px; }
.lp-section .card { padding: 22px 22px 20px; }
.lp-section .card-title { font-size: 17px; }
.lp-section .card-title::before { display: none; }
.lp-section .card-body { font-size: 13.5px; }

/* Раздела ещё нет: метка сохраняет вид, но никуда не ведёт. */
.card-link.is-soon { color: var(--muted); cursor: default; }
.card-link.is-soon:hover svg { transform: none; }

@media (max-width: 1080px) {
    .lp-hero { grid-template-columns: 1fr; }
    .lp-visual { min-height: 300px; margin-top: 8px; }
    .lp-chip--users, .lp-chip--db { display: none; }
}
@media (max-width: 720px) {
    .lp-chip { display: none; }
    .lp-section { padding: 32px 18px; }
    .lp-stat { flex: 1 1 100%; }
}

/* --- Шапка по макету: логотип в две строки, подчёркивание, пилюля языка --- */

.brand { gap: 12px; }
.brand .logo-mark { width: 38px; height: 38px; border-radius: 12px; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-size: 19px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.brand-name small { font-size: 10.5px; font-weight: 650; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }

.nav { gap: 12px; margin-left: 16px; }
.nav a {
    position: relative;
    padding: 8px 6px;
    border-radius: 0;
    font-size: 14.5px;
    font-weight: 600;
}
.nav a:hover { background: transparent; color: var(--text); }
.nav a.active { background: transparent; color: var(--accent); }
.nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -16px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--accent);
}

.lang-pick {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 11px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
}
.lang-pick > svg { width: 16px; height: 16px; color: var(--muted); }
.lang-pick .select {
    border: 0;
    background-color: transparent;
    padding: 8px 28px 8px 0;
    font-weight: 650;
    font-size: 13.5px;
}
.controls .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
.controls .btn { border-radius: 12px; padding: 11px 22px; }

/* --- Доводка по макету -------------------------------------------------- */

/* Кнопка темы стоит первой в контролах — порядок макета: тема, язык, вход. */
.controls .icon-btn { order: -1; }
/* Чип имени не растягивает шапку до бесконечности — длинное имя усечётся
   эллипсисом (сам чип остаётся кликабельным путём в кабинет). */
.controls .btn-ghost { max-width: 240px; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }

/* Станция крупнее, метки разведены к краям колонки. */
.lp-station { max-width: 560px; }
.lp-visual { min-height: 380px; }
.lp-chip--shop    { left: -8%;   top: 8%; }
.lp-chip--blog    { right: -6%;  top: -2%; }
.lp-chip--users   { left: -15%;  top: 47%; }
.lp-chip--db      { right: -14%; top: 47%; }
.lp-chip--plugins { right: -6%;  bottom: 6%; }

/* Карточки модулей одной высоты, «Подробнее» прижато к низу. */
.lp-section .card { display: flex; flex-direction: column; }
.lp-section .card-body { display: flex; flex-direction: column; flex: 1; }
.lp-section .card-body p { margin: 0 0 14px; }
.lp-section .card-link { margin-top: auto; }

/* Подзаголовок секции — в одну строку, как в макете. */
.lp-section-sub { max-width: 80ch; }

/* ==========================================================================
   Ночь по макету: станция в открытом космосе, фиолет + циан
   ========================================================================== */

.lp-station {
    display: block;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 484 / 322;
    background: url("../../../images/hero-station-night.png") center / contain no-repeat;
    filter: drop-shadow(0 20px 60px rgba(96, 87, 240, .35));
}
.lp-orb { display: none; }

/* Свечение планетарного горизонта под героем. */
.lp-hero { position: relative; }
.lp-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14%;
    height: 300px;
    background: radial-gradient(60% 50% at 50% 50%, rgba(74, 124, 240, .20), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* SHELL RESPONSIVE LAW: все художественные выпуски героя (гребень, свечения,
   чипы) спроектированы «навылет» — на ширинах без полей страницы (<1024)
   они вылезали за viewport и давали горизонтальный скролл всей странице.
   Владелец — сам герой: на узких экранах он обрезает СВОИ декорации
   (clip, не hidden — скролл-контейнер не создаётся). Desktop не тронут. */
@media (max-width: 1023px) {
    .lp-hero { overflow-x: clip; }
}


/* «CMS» в заголовке — градиент от синего к фиолету, как в макете. */
.lp-title .accent {
    background: linear-gradient(92deg, #4f70f1 0%, #7c5cf5 60%, #a78bfa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Кнопки: главная — индиго-градиент, вторая — контур на тёмном. */
.btn-primary {
    background: linear-gradient(135deg, #22239f 0%, #4b3fd6 100%);
    box-shadow: 0 8px 26px rgba(60, 63, 202, .45);
}
.btn-primary:hover { box-shadow: 0 12px 34px rgba(96, 87, 240, .55); }
.btn-outline {
    background: rgba(12, 17, 32, .75);
    border-color: #262c4a;
}
.btn-outline:hover { border-color: var(--accent); color: var(--text); }

/* «Войти» в шапке — контурная фиолетовая пилюля. */
.controls .btn-primary {
    background: rgba(21, 18, 79, .5);
    border: 1px solid #4b45b8;
    color: var(--text);
    box-shadow: 0 0 18px rgba(96, 87, 240, .25);
}
.controls .btn-primary:hover { background: rgba(75, 63, 214, .35); border-color: var(--accent); }

/* Знак бренда — контурный шестигранник, а не залитая плашка. */
.brand .logo-mark {
    background: rgba(96, 87, 240, .10);
    border: 1px solid #3b3a86;
    color: #8b83ff;
    box-shadow: 0 0 20px rgba(96, 87, 240, .25);
}

/* Циановый голос: часть иконок в макете бирюзовая, а не фиолетовая. */
.tile--alt, .lp-stat-icon--alt {
    background: rgba(80, 211, 219, .12);
    color: var(--accent-2);
    border-color: color-mix(in srgb, var(--accent-2) 26%, transparent);
}

/* Туманность за станцией — как в макете; заодно прячет стык кадра с фоном. */
.lp-visual::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    background: radial-gradient(58% 58% at 52% 46%, rgba(96, 87, 240, .18), transparent 68%);
    pointer-events: none;
    z-index: -1;
}

/* ==========================================================================
   Экран авторизации: бренд-панель слева, карточка формы справа (макет)
   ========================================================================== */

/* Экран живёт внутри страницы: шапка и подвал сайта остаются на месте. */
.auth-screen {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    min-height: 660px;
    margin: 4px 0 8px;
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* --- Левая панель ------------------------------------------------------- */

.auth-side {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 46px 52px 40px;
    background: var(--auth-side-bg);
    overflow: hidden;
}
.auth-side::after {                       /* иллюстрация прижата к низу панели */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54%;
    background: var(--auth-art) center bottom / cover no-repeat;
    pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }

.auth-side .brand { margin-bottom: 0; }

.auth-side-copy { margin: 52px 0 0; max-width: 30rem; }
.auth-legal { margin-top: auto; }
.auth-welcome {
    margin: 0 0 22px;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -.03em;
}
.auth-welcome .accent { color: var(--accent); }
.auth-side-copy p {
    margin: 0 0 14px;
    max-width: 34ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}
.auth-legal { color: var(--muted); font-size: 13.5px; }

/* --- Правая панель и карточка ------------------------------------------ */

.auth-main {
    display: grid;
    place-items: center;
    padding: 48px 40px;
    background: var(--auth-main-bg);
}

.auth-box {
    width: 100%;
    max-width: 660px;
    padding: 48px 52px 46px;
    border-radius: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lift);
}
.auth-title {
    margin: 0;
    text-align: center;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.auth-sub {
    margin: 10px 0 30px;
    text-align: center;
    color: var(--muted);
    font-size: 14.5px;
}

/* --- Поля с иконками ---------------------------------------------------- */

.auth-box .field { gap: 8px; margin-bottom: 20px; }
.auth-box .field label { color: var(--auth-label); font-size: 14px; font-weight: 650; }

.input-wrap { position: relative; display: block; }
.input-wrap .input { width: 100%; padding: 15px 46px; height: auto; font-size: 15px; }
.input-ico,
.input-eye {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--auth-ico);
}
.input-ico { left: 14px; pointer-events: none; }
.input-ico svg { width: 19px; height: 19px; }
.input-eye {
    right: 10px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
}
.input-eye svg { width: 19px; height: 19px; }
.input-eye:hover { color: var(--accent); }
.input-eye.is-on { color: var(--accent); }

/* --- Строка «запомнить меня» ------------------------------------------- */

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 24px;
}
.auth-row a {
    color: var(--accent);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}
.auth-row a:hover { text-decoration: underline; }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.check input {
    appearance: none;
    width: 19px;
    height: 19px;
    margin: 0;
    border: 1.5px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .16s ease, border-color .16s ease;
}
.check input::after {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
}
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { opacity: 1; }

/* --- Кнопка, разделитель, низ карточки --------------------------------- */

.auth-submit { width: 100%; justify-content: center; padding: 17px 24px; font-size: 16px; }

.auth-or {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 22px;
    color: var(--muted);
    font-size: 13.5px;
}
.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-alt { margin: 0; text-align: center; color: var(--muted); font-size: 14.5px; }
.auth-alt a { color: var(--accent); font-weight: 700; text-decoration: none; margin-left: 6px; }
.auth-alt a:hover { text-decoration: underline; }

.auth-box .alert { margin-bottom: 20px; }

@media (max-width: 960px) {
    .auth-screen { grid-template-columns: 1fr; min-height: 0; }
    .auth-side { padding: 28px 24px 220px; }
    .auth-side::after { height: 200px; }
    .auth-main { padding: 28px 18px 48px; }
    .auth-box { padding: 32px 24px 30px; }
}

/* Ночью иллюстрация — станция: вписываем целиком, а не кадрируем. */
.auth-side::after {
    height: 46%;
    background-size: contain;
    background-position: center bottom;
}

/* Широкие формы (регистрация, профиль) требуют более просторной карточки. */
.auth-box:has(.form-wide) { max-width: 880px; }
.auth-box .input,
.auth-box .select { width: 100%; min-width: 0; }
.auth-box .row2 > *,
.auth-box .row3 > *,
.auth-box .phone-row > * { min-width: 0; }

/* --- Шапка карточки, плитки в панели, поля регистрации ------------------ */

.auth-screen--wide { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
.auth-screen--wide .auth-box { max-width: 900px; }

.auth-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.auth-head > div { flex: 1; }
.auth-head-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent);
}
.auth-head-ico svg { width: 24px; height: 24px; }
.auth-head .auth-title { text-align: left; font-size: 25px; }
.auth-head .auth-sub { margin: 4px 0 0; text-align: left; }
/* Без иконки заголовок центрируется (экран входа). */
.auth-head:not(:has(.auth-head-ico)) { display: block; }
.auth-head:not(:has(.auth-head-ico)) .auth-title { text-align: center; font-size: 27px; }
.auth-head:not(:has(.auth-head-ico)) .auth-sub { text-align: center; margin: 10px 0 0; }

.auth-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 22px; }
.auth-tiles .lp-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 13px; }
.auth-tiles .lp-stat-val { font-size: 16px; }
.auth-tiles .lp-stat-lbl { font-size: 11.5px; }

.auth-box .row2,
.auth-box .row3 { gap: 18px; }
.auth-box .field { margin-bottom: 16px; }
.label-note { color: var(--muted); font-weight: 500; }

.input-prefix {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--auth-label);
    font-size: 15px;
    font-weight: 650;
    pointer-events: none;
}
.input-wrap:has(.input-prefix) .input { padding-left: 62px; }
.input-wrap .select { padding-right: 40px; background-position: right 14px center; }

/* Индикатор силы пароля: четыре сегмента + подпись */
.pw-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; min-height: 18px; }
.pw-cap { color: var(--muted); font-size: 12.5px; }
.pw-meter { display: flex; gap: 6px; flex: 1; max-width: 190px; }
.pw-meter i { flex: 1; height: 5px; border-radius: 3px; background: var(--border); }
.pw-meter.lvl-0 i:nth-child(1) { background: #e5484d; }
.pw-meter.lvl-1 i:nth-child(-n+2) { background: #e58a2b; }
.pw-meter.lvl-2 i:nth-child(-n+3) { background: #d3b02c; }
.pw-meter.lvl-3 i { background: #2ea56a; }
.pw-word { font-size: 12.5px; white-space: nowrap; }
.pw-word.lvl-0 { color: #e5484d; }
.pw-word.lvl-1 { color: #e58a2b; }
.pw-word.lvl-2 { color: #c9a520; }
.pw-word.lvl-3 { color: #2ea56a; }

/* Согласие с документами */
.check.terms { align-items: flex-start; margin: 6px 0 24px; line-height: 1.55; }
.check.terms input { margin-top: 2px; flex: 0 0 auto; }
.link-soon { color: var(--accent); cursor: default; }

@media (max-width: 1180px) {
    .auth-screen--wide { grid-template-columns: 1fr; }
    .auth-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .auth-box .row2, .auth-box .row3 { grid-template-columns: 1fr; }
    .auth-head { gap: 12px; }
}

/* Доводка регистрации: место под плейсхолдеры, плитки внизу панели. */
.auth-screen--wide { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
.auth-screen--wide .auth-box { max-width: 940px; padding: 40px 40px 38px; }

.input-wrap .input { padding: 15px 16px 15px 42px; font-size: 14.5px; }
.input-wrap:has(.input-eye) .input { padding-right: 46px; }
.input-ico { left: 13px; }
.input-ico svg { width: 18px; height: 18px; }

.auth-tiles { margin: 26px 0 20px; gap: 10px; }
.auth-tiles .lp-stat { padding: 12px 12px 11px; gap: 8px; }
.auth-tiles .lp-stat-icon { width: 30px; height: 30px; border-radius: 9px; }
.auth-tiles .lp-stat-icon svg { width: 16px; height: 16px; }
.auth-tiles .lp-stat-val { font-size: 15px; }
.auth-tiles .lp-stat-lbl { font-size: 10.5px; line-height: 1.35; }
.auth-screen--wide .auth-side-copy { margin-bottom: auto; }
.auth-screen--wide .auth-legal { margin-top: 0; }

/* Форме нужно больше ширины: плейсхолдеры и подписи должны помещаться целиком. */
.auth-screen--wide { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }
.auth-screen--wide .auth-box { max-width: none; }
.auth-box .row3 .field label { white-space: nowrap; }
.label-note { font-size: 12.5px; }
.auth-tiles .lp-stat-lbl { font-size: 10px; }

/* В узкой панели заголовок не должен ломаться на три строки. */
.auth-screen--wide .auth-welcome { font-size: clamp(26px, 2.4vw, 34px); }
/* Станция уходит выше плиток и копирайта — они читаются на чистом фоне. */
.auth-screen--wide .auth-side::after { bottom: 132px; height: 40%; }

/* --- Экран восстановления: инфо-блок и возврат ко входу ----------------- */

.auth-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 22px 0 26px;
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--auth-note-bg);
    border: 1px solid var(--auth-note-border);
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.auth-note-ico { flex: 0 0 auto; color: var(--accent); margin-top: 1px; }
.auth-note-ico svg { width: 20px; height: 20px; }

.auth-back a { display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.auth-back .btn-ico svg { width: 17px; height: 17px; }

/* Крупная иконка в шапке карточки — как в макетах восстановления. */
.auth-head-ico { width: 58px; height: 58px; border-radius: 16px; }
.auth-head-ico svg { width: 26px; height: 26px; }

/* Плитки метрик всегда внизу панели, подписи переносятся целиком. */
.auth-side:has(.auth-tiles) .auth-side-copy { margin-bottom: auto; }
.auth-tiles { margin: 26px 0 18px; }
.auth-tiles .lp-stat > span { min-width: 0; }
.auth-tiles .lp-stat-lbl { overflow-wrap: anywhere; }

/* Там, где есть плитки, станция поднимается — копирайт и плитки на чистом фоне. */
.auth-side:has(.auth-tiles)::after { bottom: 132px; height: 40%; }

/* Плитки метрик — матовое стекло: сквозь них просвечивает космос. */
.lp-stat {
    background: rgba(20, 24, 40, .42);
    border-color: rgba(150, 158, 200, .16);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .35);
}
.lp-stat-icon { background: rgba(96, 87, 240, .16); }
.lp-stat-icon--alt { background: rgba(80, 211, 219, .14); }

/* ==========================================================================
   Личный кабинет: сайдбар разделов + сетка карточек (макет QuasarGen)
   ========================================================================== */

.cab { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 22px; align-items: start; }

/* --- Сайдбар ------------------------------------------------------------ */

.cab-side { position: sticky; top: 88px; }
.cab-nav { display: flex; flex-direction: column; gap: 4px; }
.cab-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s ease, color .16s ease;
}
.cab-nav-item:hover { background: var(--hover); color: var(--text); }
.cab-nav-item.active { background: var(--accent-soft); color: var(--accent); }
.cab-nav-ico { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; }
.cab-nav-ico svg { width: 19px; height: 19px; }
.cab-nav-item.is-soon { opacity: .45; cursor: default; }
.cab-nav-item.is-soon:hover { background: transparent; color: var(--muted); }

/* --- Шапка кабинета ----------------------------------------------------- */

.cab-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* длинный заголовок/имя не распирает кабинет */
    gap: 20px;
    margin-bottom: 18px;
}
.cab-top-title { min-width: 0; overflow-wrap: anywhere; }
.cab-top-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.02em;
}
.cab-top-title .cab-nav-ico { color: var(--accent); }
.cab-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cab-user-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.cab-user-text b { font-size: 14.5px; font-weight: 700; }
.cab-user-text small { font-size: 12px; color: var(--muted); }

/* --- Аватар ------------------------------------------------------------- */

.cab-ava {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 800;
    flex: 0 0 auto;
}
.cab-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cab-ava.sm { width: 40px; height: 40px; font-size: 14px; }
.cab-ava.lg {
    width: 108px;
    height: 108px;
    font-size: 34px;
    border: 4px solid var(--surface);
    box-shadow: var(--shadow);
}

/* --- Сетка карточек ----------------------------------------------------- */

.cab-grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}
.cab-card { padding: 24px 26px; }
.cab-card .card-title { font-size: 18px; }
.cab-card .card-title::before { display: none; }
.cab-card-sub { margin: 6px 0 18px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cab-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cab-card-head .btn { flex: 0 0 auto; }
.cab-card-head .btn svg { width: 15px; height: 15px; }

/* Карточка профиля с обложкой */
.cab-profile { grid-row: span 2; padding: 0 26px 24px; overflow: hidden; text-align: center; }
.cab-cover {
    margin: 0 -26px 0;
    height: 96px;
    background: var(--cab-cover);
}
.cab-ava-form { position: relative; display: inline-block; margin: -54px 0 12px; }
.cab-ava-btn {
    position: absolute;
    right: -2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: 3px solid var(--surface);
    cursor: pointer;
}
.cab-ava-btn svg { width: 15px; height: 15px; }
.cab-ava-btn input { display: none; }
.cab-name { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.cab-login { color: var(--muted); font-size: 14px; margin-top: 2px; }
/* Имя пользователя может быть длинным — переносим, а не распираем сетку. */
.cab-name, .cab-login { overflow-wrap: anywhere; }
.lp-stat { min-width: 0; }
.lp-stat-val, .lp-stat-lbl { overflow-wrap: anywhere; }
.cab-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 4px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 650;
}
.cab-badge svg { width: 15px; height: 15px; }

.cab-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); text-align: left; }
.cab-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 13.5px; }
.cab-row-k { color: var(--muted); }
.cab-row-v { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.cab-row-v a { color: var(--accent); text-decoration: none; }
.cab-row-v a:hover { text-decoration: underline; }
.cab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--muted); }
.cab-dot.ok { background: #2ea56a; }
.cab-dot.wait { background: #e58a2b; }
.cab-dot.bad { background: #e5484d; }

/* Мои данные */
.cab-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 34px; }
.cab-cols-b { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); align-items: start; }
.cab-cols-b .cab-row-k { display: block; margin-bottom: 8px; font-size: 13.5px; }
.cab-about { margin: 0; font-size: 13.5px; line-height: 1.6; }
.cab-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.cab-social {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    transition: color .16s ease, border-color .16s ease;
}
.cab-social:hover { color: var(--accent); border-color: var(--accent); }
.cab-social svg { width: 18px; height: 18px; }

/* Фото профиля */
.cab-drop {
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 26px 18px;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}
.cab-drop:hover { border-color: var(--accent); }
.cab-drop svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 6px; }
.cab-drop b { color: var(--accent); font-size: 14.5px; }
.cab-drop span { color: var(--muted); font-size: 13px; }
.cab-drop small { color: var(--muted); font-size: 12px; }
.cab-drop input { display: none; }

.btn-block { width: 100%; justify-content: center; margin-top: 14px; }
.btn-danger { background: transparent; color: #e5484d; border: 1px solid var(--border); }
.btn-danger:hover { border-color: #e5484d; background: rgba(229, 72, 77, .06); }
.btn-danger svg { width: 16px; height: 16px; }

/* Строка-переход (Безопасность) */
.cab-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}
.cab-item:first-of-type { border-top: 0; }
.cab-item-ico {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: 0 0 auto;
}
.cab-item-ico svg { width: 18px; height: 18px; }
.cab-item-text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.cab-item-text b { font-size: 14px; font-weight: 650; }
.cab-item-text small { font-size: 12.5px; color: var(--muted); }
.cab-item-go { color: var(--muted); display: grid; place-items: center; }
.cab-item-go svg { width: 17px; height: 17px; }
.cab-item:hover .cab-item-go { color: var(--accent); }

.cab-wide { max-width: 900px; }
.cab-wide textarea.input { resize: vertical; min-height: 84px; font: inherit; font-size: 14.5px; }
.cab-hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

@media (max-width: 1180px) {
    .cab-grid { grid-template-columns: 300px minmax(0, 1fr); }
    .cab-profile { grid-row: span 3; }
}
@media (max-width: 900px) {
    .cab { grid-template-columns: minmax(0, 1fr); }
    .cab-side { position: static; }
    /* Меню кабинета — СПИСОК сверху вниз, по одному пункту в строке.
       Здесь стояло flex-direction: row с переносом — от той поры, когда
       меню было полоской в потоке под шапкой и пункты нарочно укладывались
       в ряд. Теперь это выдвижная панель, и ряд превращал её в сетку по
       два-три пункта («Профиль | Мои данные»), а не в меню.
       Правим ПРИЧИНУ, а не добавляем правило поверх. */
    .cab-nav { flex-direction: column; flex-wrap: nowrap; }
    .cab-grid { grid-template-columns: minmax(0, 1fr); }
    .cab-profile { grid-row: auto; }
    .cab-cols { grid-template-columns: 1fr; }
}

/* Мета-строки профиля — с иконками, как в макете. */
.cab-row-k { display: inline-flex; align-items: center; gap: 9px; }
.cab-row-ico { display: grid; place-items: center; width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.cab-row-ico svg { width: 15px; height: 15px; }

/* Счётчики профиля и список активных сессий. */
.cab-stats { display: grid; grid-auto-flow: column; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.cab-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cab-stat-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.cab-stat-k { font-size: 12px; color: var(--muted); }
.cab-item.is-current { background: var(--accent-soft); border-radius: 12px; padding-inline: 12px; }
.cab-item form { margin: 0; }
.cab-chip { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: 11px; font-weight: 650; vertical-align: middle; }

/* Двухфакторная аутентификация: шаги, ключ, резервные коды. */
.cab-state { display: flex; align-items: center; gap: 4px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.cab-state.is-ok { color: #2ea56a; }
.cab-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.cab-inline .input { max-width: 260px; }
.cab-steps { margin: 0; padding-left: 20px; display: grid; gap: 20px; }
.cab-steps li b { font-size: 14.5px; }
.cab-steps .cab-card-sub { margin: 4px 0 10px; }
.cab-secret { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.cab-secret span { color: var(--muted); font-size: 13px; }
.cab-secret code, .cab-codes code {
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    letter-spacing: .06em;
}
.cab-codes { margin-bottom: 22px; padding: 18px; border-radius: 14px; background: var(--accent-soft); }
.cab-codes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.cab-item-go.is-ok { color: #2ea56a; }

/* Список сайтов пользователя. */
.cab-site { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--border); }
.cab-site:first-of-type { border-top: 0; }
.cab-site form { margin: 0; }
.cab-site-ico {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 17px; flex: 0 0 auto;
}
.cab-site-text { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.cab-site-text b { font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.cab-site-text small { font-size: 12.5px; color: var(--muted); }
.cab-site-go { display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
    font-size: 13.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.cab-site-go svg { width: 15px; height: 15px; }
.cab-sites .cab-card-head { margin-bottom: 8px; }

/* Медиатека: полоса хранилища и плитки файлов. */
.cab-quota { margin-top: 14px; }
.cab-quota-top { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.cab-bar { height: 7px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.cab-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.cab-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px; margin-top: 20px; }
.cab-file { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cab-file form { margin: 0; }
.cab-file-view {
    display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
}
.cab-file-view img { width: 100%; height: 100%; object-fit: cover; }
.cab-file-ext { font-family: var(--font-mono); font-weight: 700; color: var(--muted); }
.cab-file figcaption { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cab-file figcaption b { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.cab-file figcaption small { font-size: 11.5px; color: var(--muted); }
.cab-media .cab-drop { padding: 20px 14px; }

/* Подписки и платежи. */
.cab-billing { grid-column: 1 / -1; }
.cab-billing-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.cab-plan { position: relative; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface-2); }
.cab-plan-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); margin-bottom: 12px; }
.cab-plan-ico svg { width: 21px; height: 21px; }
.cab-plan-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cab-plan-top .cab-card-sub { margin: 0; width: 100%; }
.cab-plan-top b { font-size: 19px; font-weight: 750; }
.cab-feats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cab-feats li { position: relative; padding-left: 24px; font-size: 13.5px; }
.cab-feats li::before { content: "✓"; position: absolute; left: 0; color: #2ea56a; font-weight: 700; }
.cab-chip.is-ok { background: rgba(46, 165, 106, .16); color: #2ea56a; }
.cab-chip.is-wait { background: rgba(229, 138, 43, .16); color: #e58a2b; }
.cab-chip.is-bad { background: rgba(229, 72, 77, .16); color: #e5484d; }
.cab-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cab-table th { text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 600;
    font-size: 12.5px; border-bottom: 1px solid var(--border); }
.cab-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.cab-table tr:last-child td { border-bottom: 0; }
.cab-pay-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 9px;
    border-radius: 8px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.cab-pay-ico svg { width: 14px; height: 14px; }
.cab-pays .cab-card-head { align-items: center; margin-bottom: 6px; }
.cab-sub-title { margin: 24px 0 12px; font-size: 15px; font-weight: 700; }
.cab-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.cab-plan-card { padding: 18px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.cab-plan-card.is-current { border-color: var(--accent); }
.cab-plan-card b { display: block; font-size: 16px; }
.cab-plan-price { display: block; margin-top: 4px; color: var(--accent); font-weight: 750; }
@media (max-width: 900px) { .cab-billing-grid { grid-template-columns: 1fr; } }

/* Карточка ранга: звёзды и полоса опыта. */
.cab-rank { position: relative; margin-top: 18px; padding: 18px 18px 16px; border-radius: 16px;
    border: 1px solid var(--border); background: var(--surface-2); text-align: left; }
.cab-rank-ico { position: absolute; top: 18px; left: 18px; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.cab-rank-ico svg { width: 20px; height: 20px; }
.cab-rank-cap { display: block; margin-left: 54px; font-size: 12px; color: var(--muted); }
.cab-rank-title { display: block; margin-left: 54px; font-size: 15.5px; font-weight: 750; }
.cab-stars { display: flex; gap: 4px; margin: 8px 0 0 54px; }
.cab-star { color: var(--border); display: grid; place-items: center; }
.cab-star svg { width: 15px; height: 15px; }
.cab-star.on { color: #e9b949; }
.cab-rank-xp { margin-top: 14px; font-size: 13.5px; font-weight: 650; }
.cab-rank-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.cab-badge.is-vip { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }

/* Публичный профиль и поиск людей. */
.pub-wrap { display: grid; gap: 20px; max-width: 640px; margin: 0 auto; }
.pub-card { padding: 0 26px 26px; text-align: center; overflow: hidden; }
.pub-card .cab-ava.lg { margin-top: -54px; }
.pub-card .cab-name { margin-top: 12px; }
.pub-about { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.pub-socials { justify-content: center; margin-top: 18px; }
.pub-list { display: grid; gap: 4px; margin-top: 18px; }
.pub-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    color: inherit; text-decoration: none; transition: background-color .16s ease; }
.pub-item:hover { background: var(--hover); }
.cab-pubgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px; margin: 14px 0 20px; }

/* --- Раскладка дашборда точно по макету ------------------------------- */
/* Ряд 1: профиль (на два ряда) | мои данные | фото
   Ряд 2: (профиль)            | подписки и платежи на две колонки
   Ряд 3: безопасность         | мои сайты | медиафайлы            */
.cab-grid { grid-template-columns: 300px minmax(0, 1fr) 300px; align-items: start; }
.cab-profile { grid-area: 1 / 1 / 3 / 2; }
.cab-data    { grid-area: 1 / 2 / 2 / 3; }
.cab-photo   { grid-area: 1 / 3 / 2 / 4; }
.cab-billing { grid-area: 2 / 2 / 3 / 4; }
.cab-sec     { grid-area: 3 / 1 / 4 / 2; }
.cab-sites   { grid-area: 3 / 2 / 4 / 3; }
.cab-media   { grid-area: 3 / 3 / 4 / 4; }

@media (max-width: 1180px) {
    .cab-grid { grid-template-columns: 300px minmax(0, 1fr); }
    .cab-profile { grid-area: 1 / 1 / 3 / 2; }
    .cab-data    { grid-area: 1 / 2 / 2 / 3; }
    .cab-photo   { grid-area: 2 / 2 / 3 / 3; }
    .cab-billing { grid-area: 3 / 1 / 4 / 3; }
    .cab-sec     { grid-area: 4 / 1 / 5 / 2; }
    .cab-sites   { grid-area: 4 / 2 / 5 / 3; }
    .cab-media   { grid-area: 5 / 1 / 6 / 3; }
}
@media (max-width: 900px) {
    .cab-grid { grid-template-columns: minmax(0, 1fr); }
    .cab-profile, .cab-data, .cab-photo, .cab-billing,
    .cab-sec, .cab-sites, .cab-media { grid-area: auto; }
}

/* --- Фон кабинета: живая «нейросеть» под карточками -------------------- */

.cab-main { position: relative; }
.cab-bg {
    position: absolute;
    inset: -40px -20px auto;
    height: 900px;
    max-height: 100%;
    width: calc(100% + 40px);
    pointer-events: none;
    z-index: 0;
    color: var(--accent);
    opacity: var(--cab-bg-opacity);
    mask-image: radial-gradient(120% 90% at 50% 12%, #000 25%, transparent 78%);
}
.cab-top, .cab-grid, .cab-main > .card { position: relative; z-index: 1; }

.nb-link {
    stroke: currentColor;
    stroke-width: 1;
    stroke-dasharray: 4 92;
    animation: nb-flow 9s linear infinite;
    animation-delay: var(--d, 0s);
    opacity: .5;
}
.nb-node {
    fill: currentColor;
    animation: nb-pulse 4.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes nb-flow {
    from { stroke-dashoffset: 96; }
    to   { stroke-dashoffset: 0; }
}
@keyframes nb-pulse {
    0%, 100% { opacity: .35; }
    50%      { opacity: 1; }
}

/* Кому анимация мешает — остаётся статичный узор. */
@media (prefers-reduced-motion: reduce) {
    .nb-link, .nb-node { animation: none; }
    .nb-link { stroke-dasharray: none; opacity: .25; }
}

/* Пропорции колонок как в макете: боковые уже, центральная просторнее. */
.cab { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }
.cab-grid { grid-template-columns: 286px minmax(0, 1fr) 268px; gap: 18px; }
/* Поздняя доводка выше объявлена БЕЗ медиа и перекрывала мобильную
   раскладку — возвращаем адаптив после неё. */
@media (max-width: 1180px) {
    .cab-grid { grid-template-columns: 300px minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .cab-grid { grid-template-columns: minmax(0, 1fr); }
}
.cab-cols { gap: 2px 22px; }
.cab-data .cab-row { align-items: baseline; }
.cab-data .cab-row-v { overflow-wrap: anywhere; }
@media (max-width: 1420px) {
    .cab-data .cab-cols { grid-template-columns: 1fr; }
}

/* Мелочи узких колонок: ссылки и цифры не должны разрываться. */
.cab-card-head .card-link { white-space: nowrap; }
.cab-quota-top { flex-wrap: wrap; gap: 4px 10px; }
.cab-quota-top span:first-child { flex: 1 1 auto; }
.cab-nav-item { font-size: 14px; }

/* --- Правка: ровные ряды без дыр + фон как текстура, а не мигающие точки --- */

/* Высоту ряда задаёт самая высокая карточка — остальные тянутся до неё. */
.cab-grid { align-items: stretch; }
.cab-grid > .card { height: 100%; }

/* Фон лежит под всем кабинетом, включая поля по краям. */
.cab { position: relative; }
.cab-main { position: static; }
.cab-bg {
    position: absolute;
    inset: -60px -40px;
    width: auto;
    height: auto;
    max-height: none;
    mask-image: radial-gradient(140% 120% at 50% 30%, #000 40%, transparent 85%);
}
.cab-side, .cab-top, .cab-grid, .cab > .card { position: relative; z-index: 1; }

/* Связи важнее узлов: рисунок читается сетью, а не россыпью точек. */
.nb-link { stroke-width: .9; stroke-dasharray: 3 60; animation-duration: 14s; opacity: .38; }
.nb-node { animation-duration: 7s; }
@keyframes nb-pulse {
    0%, 100% { opacity: .22; }
    50%      { opacity: .55; }
}

/* Фон — подложка всей страницы кабинета: в полях он виден как сеть,
   под непрозрачными карточками его и не должно быть. */
.cab-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 92%);
}
.cab { position: static; }

/* --- Карточки кабинета — матовое стекло: сквозь них видно сеть ---------- */

.cab-side,
.cab-grid > .card,
.cab-main > .card {
    background: var(--cab-card-bg);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
}
/* Вложенные панели тоже пропускают фон, иначе смотрятся заплатками. */
.cab-rank,
.cab-plan,
.cab-plan-card,
.cab-drop,
.cab-file-view,
.cab-bar,
.cab-social,
.cab-secret code,
.cab-codes code { background: var(--cab-inner-bg); }
.cab-pay-ico { background: var(--cab-inner-bg); }

/* Нить каркаса — статичная и тихая; поверх неё бежит импульс. */
.nb-wire { stroke: currentColor; stroke-width: .8; opacity: .16; }
.nb-link { opacity: .75; stroke-width: 1.4; stroke-linecap: round; }
.nb-node { r: 2; }

/* --- Шторка бокового меню кабинета ------------------------------------- */

.cab {
    grid-template-columns: 0 minmax(0, 1fr);   /* по умолчанию свёрнуто */
    gap: 0;
    transition: grid-template-columns .28s ease, gap .28s ease;
}
.cab.is-side-open { grid-template-columns: 232px minmax(0, 1fr); gap: 20px; }

.cab-side { overflow: hidden; min-width: 0; }
.cab-nav { width: 232px; }                     /* ширина фиксирована — при сворачивании не плющится */
.cab-side > .cab-nav { transition: opacity .2s ease; }
.cab:not(.is-side-open) .cab-side > .cab-nav { opacity: 0; }

.cab-burger {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    margin-right: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--cab-card-bg);
    color: var(--muted);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.cab-burger:hover { color: var(--accent); border-color: var(--accent); }
.cab-burger svg { width: 19px; height: 19px; }
.cab-top-title { margin-right: auto; }

@media (max-width: 900px) {
    .cab, .cab.is-side-open { grid-template-columns: minmax(0, 1fr); }
    .cab-side { max-height: 0; transition: max-height .28s ease; }
    .cab.is-side-open .cab-side { max-height: 420px; }
    .cab-nav { width: auto; }
}

/* Логотип не переносится, даже когда шапке тесно. */
.brand-name b, .brand-name small { white-space: nowrap; }
.brand { flex: 0 0 auto; }
/* Перенос меню УБРАН у истока: именно из-за него шапка складывалась в
   две строки на 1268 и 1428 («Админ-панель» падала под «Главная»).
   Когда места мало, меню ужимается (правила ниже), а на телефоне и
   планшете уходит в выдвижную панель — но строкой быть не перестаёт. */
.nav { flex-wrap: nowrap; }

/* Кнопка-шторка живёт в левом углу шапки, слева от логотипа. */
.side-toggle {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    margin-right: -12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.side-toggle:hover { color: var(--accent); border-color: var(--accent); }
.side-toggle svg { width: 19px; height: 19px; }
.cab-burger { display: none; }               /* прежнее место кнопки больше не используется */

/* ==========================================================================
   Новости: лента с рубриками и страница статьи (макет QuasarGen)
   ========================================================================== */

/* --- Герой ленты -------------------------------------------------------- */

.news-hero {
    position: relative;
    overflow: hidden;
    margin: 4px 0 26px;
    padding: 44px 44px 34px;
    border-radius: 26px;
    border: 1px solid var(--border);
    background: var(--hero-bg);
    box-shadow: var(--shadow);
}
.news-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(560px 300px at 88% 10%, var(--accent-glow), transparent 70%),
                radial-gradient(420px 240px at 60% 120%, var(--hero-orb), transparent 70%);
}
.news-hero-in { position: relative; z-index: 1; max-width: 60ch; }
.news-hero-title {
    margin: 0 0 14px;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.08;
}
.news-hero-sub { margin: 0 0 26px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

.news-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.news-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--cab-card-bg);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.news-chip svg { width: 16px; height: 16px; }
.news-chip:hover { color: var(--text); border-color: var(--muted); }
.news-chip.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px var(--accent-glow);
}

/* --- Раскладка ---------------------------------------------------------- */

.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.news-layout--article { grid-template-columns: 264px minmax(0, 1fr) 296px; }
.news-main { min-width: 0; }
.news-side { display: grid; gap: 18px; align-content: start; position: sticky; top: 88px; }

/* --- Карточка новости --------------------------------------------------- */

.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.news-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--cab-card-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.news-cover {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--cab-inner-bg);
    overflow: hidden;
}
.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--accent);
}
.news-badge.tone-blue   { background: #2563eb; }
.news-badge.tone-violet { background: #7c3aed; }
.news-badge.tone-green  { background: #12a06a; }
.news-badge.tone-amber  { background: #d97316; }
.news-badge.tone-indigo { background: #4f46e5; }

.news-card-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.news-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 12.5px;
    margin-bottom: 10px;
}
.news-meta span { display: inline-flex; align-items: center; gap: 6px; }
.news-meta svg { width: 14px; height: 14px; }
.news-dot { opacity: .6; }
.news-card-title { margin: 0 0 10px; font-size: 17px; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
.news-card-title a { color: inherit; text-decoration: none; }
.news-card-title a:hover { color: var(--accent); }
.news-card-text { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.news-card .card-link { margin-top: auto; }

/* --- Постраничная навигация --------------------------------------------- */

.news-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 0; }
.news-page {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: var(--cab-card-bg);
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}
.news-page:hover { color: var(--accent); border-color: var(--accent); }
.news-page.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
}
.news-page.is-gap { border: 0; background: none; min-width: 24px; }
.news-page.is-off { opacity: .4; }
.news-page svg { width: 17px; height: 17px; }

/* --- Виджеты боковой колонки -------------------------------------------- */

.news-widget { padding: 20px 22px; }
.news-widget-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    font-size: 16px;
    font-weight: 750;
}
.news-widget-title svg { width: 18px; height: 18px; color: var(--accent); }
.news-widget-sub { margin: -6px 0 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }

.news-rank, .news-rel, .news-arch, .news-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}
.news-rank:first-of-type, .news-rel:first-of-type,
.news-arch:first-of-type, .news-cat:first-of-type { border-top: 0; }
.news-rank-n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 750;
}
.news-rank-text, .news-rel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.news-rank-text b, .news-rel-text b { font-size: 13.5px; font-weight: 650; line-height: 1.35; }
.news-rank-text small, .news-rel-text small { font-size: 12px; color: var(--muted); }
.news-rank:hover b, .news-rel:hover b, .news-arch:hover, .news-cat:hover span { color: var(--accent); }

.news-rel-img {
    display: grid;
    place-items: center;
    width: 62px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 11px;
    overflow: hidden;
    background: var(--cab-inner-bg);
    color: var(--muted);
}
.news-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.news-rel-img svg { width: 20px; height: 20px; }

.news-arch { justify-content: space-between; font-size: 13.5px; }
.news-arch span { display: inline-flex; align-items: center; gap: 9px; }
.news-arch svg { width: 15px; height: 15px; color: var(--muted); }
.news-arch b { color: var(--muted); font-weight: 650; }

.news-cat { justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.news-cat > span:nth-child(2) { flex: 1; }
.news-cat b { color: var(--muted); font-weight: 650; }
.news-cat-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
}
.news-cat-ico svg { width: 16px; height: 16px; }
.news-cat-ico.tone-violet { background: rgba(124, 58, 237, .14); color: #7c3aed; }
.news-cat-ico.tone-green  { background: rgba(18, 160, 106, .14); color: #12a06a; }
.news-cat-ico.tone-amber  { background: rgba(217, 115, 22, .14); color: #d97316; }
.news-cat-ico.tone-indigo { background: rgba(79, 70, 229, .14); color: #4f46e5; }
.news-cat.active { color: var(--accent); }

.news-sub .input-wrap { margin-bottom: 12px; }
.news-sub .input { padding-right: 44px; }
.news-sub .input-eye { pointer-events: none; color: var(--auth-ico); }

.news-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.news-tag {
    padding: 7px 13px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--cab-inner-bg);
    color: var(--muted);
    font-size: 12.5px;
}
.news-tags--article { margin-top: 24px; }

/* --- Статья -------------------------------------------------------------- */

.news-article { padding: 26px 34px 30px; }
.news-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 12.5px;
}
.news-crumbs a { color: var(--accent); text-decoration: none; }
.news-crumbs a:hover { text-decoration: underline; }
.news-crumbs svg { width: 13px; height: 13px; opacity: .55; }
.news-crumbs > span:last-child { color: var(--text); }

.news-meta--article { margin-bottom: 14px; font-size: 13px; }
.news-meta--article .news-badge { position: static; }
.news-title {
    margin: 0 0 16px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.14;
}
.news-lead { margin: 0 0 22px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.news-hero-img { width: 100%; border-radius: 16px; display: block; margin-bottom: 24px; }

.news-body { font-size: 15.5px; line-height: 1.75; }
.news-body p { margin: 0 0 16px; }
.news-h2 {
    margin: 30px 0 14px;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.02em;
    scroll-margin-top: 90px;
}
.news-h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 8px;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--accent);
}

.news-votes { display: flex; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.news-votes form { margin: 0; }
.news-vote {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--cab-inner-bg);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease;
}
.news-vote svg { width: 17px; height: 17px; }
.news-vote:hover { color: var(--accent); border-color: var(--accent); }
.news-vote.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.news-vote.is-on.is-down { color: #e5484d; border-color: #e5484d; background: rgba(229, 72, 77, .1); }

.news-toc-item {
    display: block;
    padding: 8px 0 8px 13px;
    border-left: 2px solid var(--border);
    color: var(--muted);
    font-size: 13.5px;
    text-decoration: none;
}
.news-toc-item:hover { color: var(--text); }
.news-toc-item.active { border-left-color: var(--accent); color: var(--accent); font-weight: 650; }

@media (max-width: 1280px) {
    .news-layout--article { grid-template-columns: minmax(0, 1fr) 296px; }
    .news-side--left { display: none; }
}
@media (max-width: 980px) {
    .news-layout, .news-layout--article { grid-template-columns: 1fr; }
    .news-side { position: static; }
    .news-hero { padding: 30px 24px 26px; }
    .news-article { padding: 22px 20px 24px; }
}

/* Иллюстрация в герое ленты и заглушка карточки без обложки. */
.news-hero::before {
    content: "";
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 46%;
    height: 128%;
    background: var(--news-hero-art) right center / contain no-repeat;
    opacity: .95;
    pointer-events: none;
}
.news-cover:empty,
.news-cover:not(:has(img)) {
    background: linear-gradient(135deg, var(--accent-soft), var(--cab-inner-bg));
}
.news-cover:not(:has(img))::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--news-hero-art) center / 46% no-repeat;
    opacity: .5;
}
@media (max-width: 980px) { .news-hero::before { display: none; } }

/* --- Кабинет: вкладка «Мои данные» — форма + карточка-компаньон --- */
.cab-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
                 gap: 24px; align-items: start; }
.cab-side-card { position: sticky; top: 96px; display: grid; gap: 16px; }
.cab-form { max-width: none; }
.cab-form-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.cab-form-ico { display: grid; place-items: center; width: 44px; height: 44px;
                flex: 0 0 44px; border-radius: 12px;
                background: var(--accent-soft); color: var(--accent); }
.cab-form-ico svg { width: 22px; height: 22px; }
.cab-form-sec { padding: 20px 0; border-top: 1px solid var(--border); }
.cab-form-sec:first-of-type { border-top: 0; }
.cab-form-sec-title { margin: 0 0 14px; font-size: 12px; font-weight: 700;
                      letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cab-form-sec .field { margin-bottom: 0; }
.cab-formbar { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 12px;
               align-items: center; margin-top: 4px; padding: 16px 0;
               background: var(--cab-card-bg); backdrop-filter: blur(6px);
               border-top: 1px solid var(--border); }
.cab-fill { margin-top: 18px; text-align: left; }
.cab-fill .cab-quota-top { display: flex; justify-content: space-between;
                           font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cab-fill-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cab-fill-list li::before { content: "·"; margin-right: 8px; color: var(--muted); }
.cab-fill-list label { cursor: pointer; font-size: 14px; color: var(--accent); }
.cab-fill-list label:hover { text-decoration: underline; }
.cab-fill-done { display: flex; gap: 8px; align-items: center; margin: 12px 0 0;
                 font-size: 14px; color: var(--accent); }
.cab-fill-done svg { width: 18px; height: 18px; }
@media (max-width: 1100px) {
    .cab-form-grid { grid-template-columns: 1fr; }
    .cab-side-card { position: static; }
}

/* --- Кабинет: правка карточки данных на месте --- */
.cab-card-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
/* .btn задаёт display:inline-flex и перебивает [hidden] — возвращаем силой. */
.cab-card-actions [hidden] { display: none !important; }
.cab-data .cab-card-head { gap: 16px; }
.cab-data .cab-card-head .card-title { white-space: nowrap; }
.cab-row-pen { display: none; margin-left: 8px; padding: 2px; border: 0; background: none;
               color: var(--muted); cursor: pointer; vertical-align: middle; }
.cab-row-pen svg { width: 15px; height: 15px; }
.cab-row-pen:hover { color: var(--accent); }
.has-inline .cab-row:hover .cab-row-pen,
.has-inline .cab-row:focus-within .cab-row-pen { display: inline-block; }
.cab-row-input { width: 100%; padding: 7px 10px; font-size: 14px; }
.cab-row.is-row-editing .cab-row-v { flex: 1 1 auto; min-width: 0; }
.cab-data.is-editing .cab-row { align-items: center; }
.cab-data.is-editing .cab-row-pen { display: none; }
.cab-row-hint { display: inline-flex; margin-left: 6px; color: var(--muted);
                vertical-align: middle; }
.cab-row-hint svg { width: 14px; height: 14px; }
.cab-about-row { display: block; }
.cab-about-row .cab-row-k { display: flex; align-items: center; margin-bottom: 6px; }
.cab-about-row textarea.cab-row-input { min-height: 90px; resize: vertical; font: inherit;
                                        font-size: 14px; }

/* --- Главная: статусы модулей экосистемы и список «Сейчас в разработке» --- */
.mod-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
              border-radius: 999px; font-size: 12px; font-weight: 650;
              background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.mod-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                      background: currentColor; }
.mod-status.is-plan { background: var(--hover); color: var(--muted); }
.devnow-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.devnow-list li { display: flex; flex-wrap: wrap; justify-content: space-between;
                  align-items: center; gap: 6px 12px; font-size: 14.5px; }

/* --- Блок новостей на главной: строка целиком — ссылка.
       Карточка узкая, поэтому дата идёт ПОД заголовком, стрелка — сбоку. --- */
.news-list .news-row { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; column-gap: 10px; padding: 9px 0;
    border-bottom: 1px solid var(--border); color: var(--text);
    text-decoration: none; font-weight: 550; font-size: 14.5px; line-height: 1.35; }
.news-list .news-row:last-child { border-bottom: 0; }
.news-list .news-row .dim { grid-column: 1; grid-row: 2; font-weight: 400;
    font-size: 12.5px; margin-top: 2px; }
.news-list .news-row svg { grid-column: 2; grid-row: 1 / span 2; width: 14px; height: 14px;
    color: var(--muted); transition: transform .15s ease, color .15s ease; }
.news-list .news-row:hover { color: var(--accent); }
.news-list .news-row:hover svg { color: var(--accent); transform: translateX(3px); }

/* --- Шапка: дропдаун «Экосистема» (CSS-only: hover + focus-within) --- */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px;
    color: var(--muted); text-decoration: none; font-weight: 550;
    padding: 8px 14px; border-radius: 10px;
    transition: color .18s ease, background-color .18s ease; }
.nav-drop-btn svg { transition: transform .18s ease; }
.nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn {
    color: var(--text); background: var(--hover); }
.nav-drop:hover .nav-drop-btn svg, .nav-drop:focus-within .nav-drop-btn svg {
    transform: rotate(180deg); }
.nav-drop-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 240px; padding: 8px; display: none;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lift); }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: grid; gap: 2px; }
/* мостик между кнопкой и меню, чтобы hover не срывался в зазоре */
.nav-drop-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.nav-drop-item { display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 550;
    color: var(--text); text-decoration: none; white-space: nowrap; }
a.nav-drop-item:hover { background: var(--hover); color: var(--accent); }
.nav-drop-item.is-soon { color: var(--muted); cursor: default; }
.nav-drop-item .mod-status { font-size: 11px; padding: 2px 8px; }

/* --- Docs: шапка раздела, дерево, пейджер, поиск с подсказками --- */
.docs-head { display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin: 6px 0 20px; }
.docs-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px;
    font-size: 26px; }
.docs-title svg { width: 24px; height: 24px; color: var(--accent); }
.docs-search { position: relative; flex: 0 1 360px; min-width: 260px; }
.docs-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    padding: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-lift); display: grid; gap: 2px; }
.docs-suggest[hidden] { display: none; }
.docs-suggest-item { padding: 8px 12px; border-radius: 8px; font-size: 14px;
    color: var(--text); text-decoration: none; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.docs-suggest-item:hover, .docs-suggest-item.active { background: var(--hover);
    color: var(--accent); }
.docs-tree-item { display: block; padding: 7px 10px; border-left: 2px solid transparent;
    font-size: 14px; color: var(--muted); text-decoration: none; border-radius: 0 8px 8px 0; }
.docs-tree-item:hover { color: var(--text); background: var(--hover); }
.docs-tree-item.active { border-left-color: var(--accent); color: var(--accent);
    font-weight: 650; background: var(--accent-soft); }
.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px;
    padding-top: 18px; border-top: 1px solid var(--border); }
.docs-pager-item { display: grid; gap: 2px; max-width: 46%; text-decoration: none; }
.docs-pager-item small { color: var(--muted); font-size: 12px; }
.docs-pager-item b { color: var(--accent); font-size: 14.5px; }
.docs-pager-item.is-next { text-align: right; margin-left: auto; }
.docs-hit { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--border);
    text-decoration: none; color: var(--text); }
.docs-hit:hover b { color: var(--accent); }
.docs-hit-sec { font-size: 12px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); }
.docs-hit-text { font-size: 14px; color: var(--muted); line-height: 1.5; }
.docs-hit-text mark { background: var(--accent-soft); color: var(--accent);
    border-radius: 3px; padding: 0 2px; }

/* --- Forum: категории, строки разделов и тем, сообщения, пагинация --- */
.forum-main { display: grid; gap: 20px; }
.forum-cat-title { margin: 0 0 12px; font-size: 17px; }
.forum-cat-head { display: grid; grid-template-columns: minmax(0,1fr) 72px 72px 220px;
    gap: 14px; padding: 0 0 8px; font-size: 11px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.forum-row { display: grid; grid-template-columns: minmax(0,1fr) 72px 72px 220px;
    gap: 14px; align-items: center; padding: 12px 0;
    border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.forum-row:hover .forum-row-text b { color: var(--accent); }
.forum-row-main { display: flex; gap: 12px; align-items: center; min-width: 0; }
.forum-row-text { display: grid; gap: 2px; min-width: 0; }
.forum-row-text b { font-size: 15px; }
.forum-row-text small { color: var(--muted); font-size: 12.5px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.forum-num { display: grid; justify-items: center; font-weight: 700; font-size: 15px; }
.forum-num small { font-weight: 400; font-size: 11px; color: var(--muted); }
.forum-last { display: grid; gap: 2px; min-width: 0; }
.forum-last b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-last small { color: var(--muted); font-size: 12px; }
.forum-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.forum-online { display: flex; flex-wrap: wrap; gap: 8px; }
.forum-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    overflow: hidden; background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: 15px; }
.forum-ava img { width: 100%; height: 100%; object-fit: cover; }
.forum-ava-lg { width: 72px; height: 72px; font-size: 26px; }
.forum-post { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 20px;
    margin-bottom: 16px; }
.forum-poster { display: grid; gap: 6px; justify-items: center; text-align: center;
    align-content: start; padding-right: 16px; border-right: 1px solid var(--border); }
.forum-poster small { color: var(--muted); font-size: 12px; }
.forum-poster-name { font-size: 15px; }
.forum-post-meta { display: flex; justify-content: space-between; font-size: 12.5px;
    margin-bottom: 10px; }
.forum-post-text { font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.forum-post-actions { display: flex; gap: 14px; align-items: center; margin-top: 14px;
    padding-top: 10px; border-top: 1px solid var(--border); }
.forum-del { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.forum-edited { font-size: 12px; margin: 8px 0 0; }
.forum-quote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent);
    background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 14px; }
.forum-quote b { display: block; margin-bottom: 4px; color: var(--accent); }
.forum-code { margin: 10px 0; padding: 12px 14px; border-radius: 10px; overflow-x: auto;
    background: var(--hover); font-family: var(--font-mono); font-size: 13.5px; }
.forum-img { max-width: 100%; border-radius: 10px; margin: 8px 0; }
.forum-pages { margin: 4px 0 18px; display: flex; gap: 6px; align-items: center;
    color: var(--muted); font-size: 14px; }
.forum-page { display: inline-grid; place-items: center; min-width: 32px; height: 32px;
    padding: 0 8px; border-radius: 9px; border: 1px solid var(--border);
    color: var(--text); text-decoration: none; }
.forum-page:hover { border-color: var(--accent); color: var(--accent); }
.forum-page.is-cur { background: var(--accent); border-color: var(--accent); color: #fff; }
.forum-modbar { display: flex; gap: 8px; }
.forum-replybox { margin-top: 4px; }
@media (max-width: 900px) {
    .forum-cat-head { display: none; }
    .forum-row { grid-template-columns: 1fr; gap: 6px; }
    .forum-num { justify-items: start; }
    .forum-post { grid-template-columns: 1fr; }
    .forum-poster { border-right: 0; border-bottom: 1px solid var(--border);
        padding: 0 0 12px; }
    .forum-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* --- Forum: редактор темы (тулбар, превью, советы) --- */
.forum-new-head { margin-bottom: 20px; }
.forum-editor { display: grid; gap: 0; }
.forum-toolbar { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px;
    border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0;
    background: var(--hover); }
.forum-tb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border: 0; border-radius: 8px; background: none; color: var(--muted);
    font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.forum-tb-btn svg { width: 15px; height: 15px; }
.forum-tb-btn:hover { background: var(--surface); color: var(--accent); }
.forum-editor .forum-editor-area { border-radius: 0 0 12px 12px; min-height: 220px;
    resize: vertical; font: inherit; font-size: 14.5px; }
.forum-preview { margin-top: 14px; border: 1px dashed var(--border); border-radius: 12px;
    padding: 14px 16px; }
.forum-preview[hidden] { display: none; }
.forum-preview-cap { font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.forum-title-count { text-align: right; }
.forum-tips { display: grid; gap: 14px; }
.forum-tip { display: flex; gap: 12px; align-items: flex-start; }
.forum-tip span:last-child { display: grid; gap: 2px; }
.forum-tip b { font-size: 14px; }
.forum-tip small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.forum-bb-cap { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); }
.forum-bb-list { display: grid; gap: 6px; }
.forum-bb-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.forum-bb-row code { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px;
    border-radius: 7px; background: var(--hover); white-space: nowrap; }
.forum-bb-row span { font-size: 12.5px; color: var(--muted); }
.forum-help { display: flex; gap: 12px; align-items: center; text-decoration: none;
    color: var(--text); }
.forum-help small { display: block; color: var(--muted); font-size: 12.5px; }
.forum-help:hover b { color: var(--accent); }

/* --- Downloads: список, карточка файла, история версий --- */
.dl-empty { display: grid; justify-items: center; text-align: center; gap: 8px;
    padding: 48px 24px; }
.dl-row { display: grid; grid-template-columns: 56px minmax(0,1fr) auto auto;
    gap: 18px; align-items: center; margin-bottom: 14px; }
.dl-row-text { display: grid; gap: 4px; min-width: 0; }
.dl-row-text small { color: var(--muted); }
.dl-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dl-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
    border: 1px solid var(--border); border-radius: 8px; font-size: 12px;
    color: var(--muted); }
.dl-badge svg { width: 13px; height: 13px; }
.dl-row-count { display: grid; justify-items: center; }
.dl-row-count b { font-size: 18px; }
.dl-row-count small { color: var(--muted); font-size: 11.5px; }
.dl-hero { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 20px;
    align-items: start; }
.dl-hero-ico { width: 84px; height: 84px; border-radius: 20px; }
.dl-hero-ico svg { width: 40px; height: 40px; }
.dl-hero-text { display: grid; gap: 6px; min-width: 0; }
.dl-hero-cta { display: grid; gap: 10px; justify-items: center; }
.dl-screens { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.dl-screen { display: block; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); }
.dl-screen img { display: block; width: 100%; height: 140px; object-fit: cover; }
.dl-screen:first-child { grid-column: 1 / -1; }
.dl-screen:first-child img { height: 320px; }
.dl-ver { padding: 12px 0; border-top: 1px solid var(--border); }
.dl-ver:first-of-type { border-top: 0; }
.dl-ver-head { display: flex; gap: 14px; align-items: baseline; }
.dl-ver-head .card-link { margin-left: auto; }
.dl-ver-log { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.dl-sha { display: block; font-family: var(--font-mono); font-size: 11.5px;
    word-break: break-all; padding: 10px 12px; border-radius: 10px;
    background: var(--hover); }
.dl-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px) {
    .dl-row { grid-template-columns: 44px minmax(0,1fr); }
    .dl-row-count, .dl-row-actions { grid-column: 2; justify-self: start; }
    .dl-hero { grid-template-columns: 1fr; }
    .dl-screens { grid-template-columns: 1fr; }
}

/* --- Office: диск с карточками документов --- */
.of-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.of-mini-form { display: flex; gap: 8px; align-items: center; }
.of-mini-form .input { min-width: 0; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px; }
.of-card { display: grid; gap: 10px; padding: 16px; }
.of-card-body { display: grid; gap: 8px; justify-items: start; text-decoration: none;
    color: var(--text); min-width: 0; }
.of-card-body b { font-size: 14.5px; overflow-wrap: anywhere; }
.of-card:hover .of-card-body b { color: var(--accent); }
.of-card-actions { display: flex; gap: 4px; border-top: 1px solid var(--border);
    padding-top: 8px; }
.of-card-actions .icon-btn { width: 30px; height: 30px; }
.of-card-actions .icon-btn svg { width: 15px; height: 15px; }
.of-card-actions .icon-btn.is-on { color: var(--accent); }
.news-widget .of-mini-form { margin-top: 10px; }
@media (max-width: 700px) { .of-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Сайдбар диска: формы не распирают узкую колонку */
.news-layout--article > * { min-width: 0; }
.news-side .of-mini-form { width: 100%; flex-wrap: wrap; }
.news-side .of-mini-form .input { flex: 1 1 auto; width: auto; min-width: 0; }
.of-file-picker { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 340px; }
.of-file-button { flex: 0 0 auto; cursor: pointer; }
.of-file-picker input:focus-visible + .of-file-button { outline: 2px solid var(--accent); outline-offset: 2px; }
.of-file-name { min-width: 0; max-width: 150px; overflow: hidden; color: var(--muted); font-size: 12px;
    text-overflow: ellipsis; white-space: nowrap; }

/* --- QDoc: рендер блоков документа --- */
.qdoc { display: grid; gap: 14px; font-size: 15px; line-height: 1.65; }
.qdoc .qdoc-h { margin: 10px 0 0; }
.qdoc-list { margin: 0; padding-left: 0; list-style: none; }
.qdoc-list > li { --qdoc-list-level: 0; position: relative;
    margin-left: calc(var(--qdoc-list-level) * 22px); padding-left: 2.8em;
    min-height: 1.45em; overflow-wrap: anywhere; }
.qdoc-list > li::before { content: attr(data-marker) "."; position: absolute;
    left: 0; width: 2.4em; text-align: right; color: var(--muted); }
.qdoc-list:not([data-numbering]) > li::before,
.qdoc-list[data-numbering=""] > li::before { content: attr(data-marker); }
.qdoc-list[data-numbering="decimal"] > li[data-marker="•"]::before { content: "•"; }
.of-list-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.qdoc-quote { margin: 0; padding: 10px 16px; border-left: 3px solid var(--accent);
    background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.qdoc-quote footer { margin-top: 6px; font-size: 13px; color: var(--muted); }
.qdoc-code { margin: 0; padding: 14px 16px; border-radius: 12px; overflow-x: auto;
    background: var(--hover); font-family: var(--font-mono); font-size: 13.5px; }
.qdoc-img { width: min(var(--qdoc-image-width, 100%), 100%); max-width: 100%;
    box-sizing: border-box; }
.qdoc-img img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 12px; }
.qdoc-img-align-left { margin-left: 0; margin-right: auto; }
.qdoc-img-align-center { margin-left: auto; margin-right: auto; }
.qdoc-img-align-right { margin-left: auto; margin-right: 0; }
.qdoc-img-wrap-inline { display: inline-block; vertical-align: middle; }
.qdoc-img-wrap-left { float: left; margin: 0 18px 12px 0; }
.qdoc-img-wrap-right { float: right; margin: 0 0 12px 18px; }
.qdoc-img figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }
.qdoc-shape { position: relative; box-sizing: border-box; width: min(var(--qdoc-shape-width), 100%); height: var(--qdoc-shape-height); max-width: 100%; margin: 8px 0; z-index: var(--qdoc-shape-z); transform: translate(var(--qdoc-shape-x), var(--qdoc-shape-y)); overflow: hidden; }
.qdoc-shape-body { position: absolute; inset: calc(var(--qdoc-shape-stroke-width) / 2); background: var(--qdoc-shape-fill); border: var(--qdoc-shape-stroke-width) solid var(--qdoc-shape-stroke); }
.qdoc-shape-ellipse .qdoc-shape-body { border-radius: 50%; }
.qdoc-shape-line .qdoc-shape-body, .qdoc-shape-arrow .qdoc-shape-body { inset: 50% 0 auto; height: 0; background: none; border: 0; border-top: var(--qdoc-shape-stroke-width) solid var(--qdoc-shape-stroke); }
.qdoc-shape-arrow .qdoc-shape-body::after { content: ""; position: absolute; right: 0; top: calc(-5px - var(--qdoc-shape-stroke-width)); border: 6px solid transparent; border-left: 10px solid var(--qdoc-shape-stroke); border-right: 0; }
.qdoc-shape-text { position: relative; z-index: 1; height: 100%; overflow: hidden; padding: 12px; box-sizing: border-box; white-space: pre-wrap; overflow-wrap: anywhere; }
.qdoc-shape-wrap-left { float: left; margin-right: 16px; } .qdoc-shape-wrap-right { float: right; margin-left: 16px; }
/* QDoc v15 semantic formula projection; AST remains the source of truth. */
.qdoc-formula { font-family: "STIX Two Math", "Cambria Math", "DejaVu Serif", serif; max-width: 100%; color: inherit; }
.qdoc-formula-inline { display: inline-flex; align-items: center; vertical-align: middle; margin-inline: .12em; }
.qdoc-formula-display { display: flex; justify-content: center; align-items: center; width: 100%; padding: .45rem .25rem; overflow-x: auto; box-sizing: border-box; }
.qdoc-formula:focus-visible { outline: 2px solid var(--primary, var(--accent)); outline-offset: 3px; }
.qf-row, .qf-script, .qf-root, .qf-fence { display: inline-flex; align-items: center; }
.qf-frac { display: inline-grid; grid-template-rows: auto auto; text-align: center; vertical-align: middle; margin-inline: .18em; line-height: 1.15; }
.qf-num { border-bottom: 1px solid currentColor; padding: 0 .16em .08em; }
.qf-den { padding: .08em .16em 0; }
.qf-script { align-items: flex-start; }
.qf-script sup, .qf-script sub, .qf-root > sup { font-size: .68em; line-height: 1; }
.qf-script sub { align-self: flex-end; margin-left: -.12em; }
.qf-radical { font-size: 1.3em; line-height: 1; }
.qf-radicand { border-top: 1px solid currentColor; padding: .05em .12em 0; }
.qf-lines { display: inline-grid; gap: .22em; text-align: center; }
.qf-line { display: block; }
@media (max-width: 520px) { .qdoc-formula-display { justify-content: flex-start; } }
@media (max-width: 520px) { .qdoc-shape { transform: none; max-width: 100%; float: none; margin-inline: 0; } }
@media(max-width:600px) {
    .qdoc-img-wrap-left, .qdoc-img-wrap-right, .qdoc-img-wrap-inline {
        float: none; display: block; width: min(var(--qdoc-image-width, 100%), 100%);
        margin: 12px auto; }
}
.qdoc-table-wrap, .of-table-scroll { overflow-x: auto; max-width: 100%; }
.qdoc-table { border-collapse: collapse; width: 100%; }
.qdoc-table col { min-width: 48px; }
.qdoc-table th, .qdoc-table td { border: 1px solid var(--border); padding: 8px 12px;
    text-align: left; font-size: 14px; }
.qdoc-table th { background: var(--hover); }
.qdoc-table thead { display: table-header-group; }

/* --- Quasar Writer: палитра | полотно | свойства --- */
.of-writer { display: grid; grid-template-columns: 200px minmax(0,1fr) 260px;
    gap: 18px; align-items: start; }
.of-writer[hidden] { display: none; }
.of-palette { display: grid; gap: 4px; align-content: start; position: sticky; top: 88px; }
.of-pal-btn { display: flex; gap: 10px; align-items: center; width: 100%;
    padding: 9px 12px; border: 0; border-radius: 10px; background: none;
    color: var(--text); font: inherit; font-size: 14px; font-weight: 550;
    cursor: pointer; text-align: left; }
.of-pal-btn svg { width: 16px; height: 16px; color: var(--muted); }
.of-pal-btn:hover { background: var(--hover); color: var(--accent); }
.of-pal-btn:hover svg { color: var(--accent); }
.of-canvas { display: grid; gap: 12px; min-height: 480px; align-content: start; }
.of-block { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--border);
    border-radius: 12px; cursor: pointer; }
.of-block:hover { border-color: var(--accent); }
.of-block.is-sel { border-color: var(--accent); background: var(--accent-soft); }
.of-block-cap { font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); }
.of-block .input { font: inherit; font-size: 14.5px; }
.of-block textarea.input { resize: vertical; }
.of-props { position: sticky; top: 88px; display: grid; gap: 12px; align-content: start; }
.of-props-ops { display: grid; gap: 6px; margin-top: 6px; }
.of-status { font-size: 13px; }
@media (max-width: 1100px) {
    .of-writer { grid-template-columns: 1fr; }
    .of-palette, .of-props { position: static; }
}

/* --- Quasar Writer: полноэкранная оболочка (мокап Office 365) --- */
body.of-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden;
    max-width: 100vw; background: var(--bg); }
.of-head { display: flex; align-items: center; gap: 18px; padding: 8px 16px;
    background: var(--header-bg); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px); flex: 0 0 auto; min-width: 0; }
.of-brand .brand-name small { letter-spacing: .18em; }
.of-head-doc { display: grid; gap: 1px; min-width: 0; }
.of-title-row { display: flex; align-items: center; gap: 4px; }
.of-title { border: 1px solid transparent; border-radius: 8px; padding: 3px 8px;
    font: inherit; font-size: 15.5px; font-weight: 650; color: var(--text);
    background: transparent; min-width: 120px; width: 34ch; }
.of-title:hover { border-color: var(--border); }
.of-title:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.of-star { width: 28px; height: 28px; }
.of-star svg { width: 15px; height: 15px; }
.of-star.is-on { color: var(--accent); }
.of-save-line { display: flex; gap: 6px; padding-left: 8px; font-size: 12px;
    color: var(--muted); }
.of-controls { margin-left: auto; }

.of-ribbon-tabs { display: flex; gap: 2px; padding: 0 16px; background: var(--header-bg);
    border-bottom: 1px solid var(--border); flex: 0 0 auto; overflow-x: auto; }
.of-rtab { padding: 9px 14px 7px; border: 0; border-bottom: 2px solid transparent;
    background: none; font: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--muted); cursor: pointer; }
.of-rtab:hover { color: var(--text); }
.of-rtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.of-rtab.is-soon { opacity: .45; cursor: not-allowed; }

.of-ribbon { background: var(--surface); border-bottom: 1px solid var(--border);
    flex: 0 0 auto; }
.of-rpanel { display: flex; gap: 4px; padding: 8px 16px; overflow-x: auto; }
.of-rpanel[hidden] { display: none; }
.of-rgroup { display: grid; gap: 4px; padding: 0 14px; border-right: 1px solid var(--border); }
.of-rgroup:last-child { border-right: 0; }
.of-rgroup-body { display: flex; gap: 4px; align-items: stretch; }
.of-rgroup-cap { text-align: center; font-size: 10.5px; color: var(--muted); }
.of-rbtn { display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-width: 58px; padding: 6px 8px; border: 0; border-radius: 8px;
    background: none; font: inherit; font-size: 11.5px; color: var(--text);
    cursor: pointer; text-decoration: none; }
.of-rbtn svg { width: 18px; height: 18px; color: var(--accent); }
.of-rbtn:hover { background: var(--hover); }
.of-rbtn:focus-visible, .of-style:focus-visible, .of-fmt-field :focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; }
.of-rbtn[aria-pressed="true"], .of-style[aria-pressed="true"] {
    color: var(--accent); background: var(--accent-soft); outline: 1px solid var(--accent); }
.of-rbtn.is-mixed, .of-style.is-mixed { outline: 1px dashed var(--muted); }
.of-fmt { min-width: 48px; }
.of-fmt-field { display: grid; gap: 3px; min-width: 82px; font-size: 10.5px;
    color: var(--muted); }
.of-fmt-field .select, .of-fmt-field .input { width: 100%; min-width: 0; padding: 5px 7px; }
.of-fmt-field input[type="color"] { width: 44px; min-height: 30px; padding: 2px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.of-fmt-field [data-mixed="true"] { outline: 2px dashed var(--muted); }
.of-al { min-width: 34px; }
.of-style { display: grid; gap: 2px; justify-items: center; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    font: inherit; font-size: 10.5px; color: var(--muted); cursor: pointer; }
.of-style:hover { border-color: var(--accent); }
.of-style-sample { font-weight: 400; font-size: 13px; color: var(--text); }
.of-style-sample.h1 { font-weight: 750; color: var(--accent); }
.of-style-sample.h2 { font-weight: 700; }
.of-style-sample.h3 { font-weight: 650; }
.of-zoom { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
    color: var(--muted); }
.of-zoom .select { width: auto; }

.of-work { display: grid; grid-template-columns: 260px minmax(0,1fr) 280px;
    flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; }
.of-left, .of-right { background: var(--surface); overflow-y: auto; padding: 14px;
    display: flex; flex-direction: column; gap: 10px; }
.of-left { border-right: 1px solid var(--border); }
.of-right { border-left: 1px solid var(--border); }
.of-left.is-closed, .of-right.is-closed { display: none; }
.of-panel-head { display: flex; align-items: center; justify-content: space-between; }
.of-panel-head b { font-size: 13.5px; }
.of-outline { display: grid; gap: 2px; flex: 1 1 auto; align-content: start; }
.of-outline-item { display: block; width: 100%; text-align: left; padding: 7px 10px;
    border: 0; border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
    background: none; font: inherit; font-size: 13.5px; color: var(--text);
    cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-outline-item.lvl2 { padding-left: 24px; font-size: 13px; color: var(--muted); }
.of-outline-item.lvl3 { padding-left: 38px; font-size: 12.5px; color: var(--muted); }
.of-outline-item:hover { background: var(--hover); }
.of-outline-item.active { border-left-color: var(--accent); color: var(--accent);
    background: var(--accent-soft); }

.of-canvas-wrap { min-width: 0; overflow: auto; padding: 28px 20px 60px; background: var(--bg); }
.of-mono { font-family: var(--font-mono); font-size: 10.5pt; }
.of-table .of-cell { width: 100%; border: 0; background: transparent; font: inherit;
    font-size: 10.5pt; color: var(--text); }
.of-table .of-cell:focus { outline: none; }
.of-table-scroll { position: relative; width: 100%; }
.of-table-scroll .of-table { width: max-content; min-width: 100%; table-layout: fixed; }
.of-table-cell { position: relative; vertical-align: top; overflow-wrap: anywhere; }
.of-table-cell.is-selected { box-shadow: inset 0 0 0 2px var(--accent); }
.of-table-cell-editor { min-height: 1.45em; white-space: pre-wrap; outline: none; }
.of-table-cell-editor:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.of-table-resize { position: absolute; z-index: 4; top: 0; width: 10px; height: 30px;
    margin-left: -5px; padding: 0; border: 0; border-left: 2px solid var(--accent);
    background: transparent; cursor: col-resize; opacity: .55; }
.of-table-resize:hover, .of-table-resize:focus-visible { opacity: 1; outline: 2px solid var(--accent); }
.of-table-actions { display: grid; gap: 5px; }
.of-table-context { position: fixed; z-index: 10000; display: grid; min-width: 210px;
    padding: 6px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); box-shadow: var(--shadow); }
.of-table-context[hidden] { display: none; }
.of-table-context button { padding: 7px 10px; border: 0; border-radius: 6px;
    background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.of-table-context button:hover, .of-table-context button:focus-visible { background: var(--hover); outline: none; }
@media(max-width:600px) {
    .qdoc-table-wrap, .of-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
    .of-table-scroll .of-table { min-width: max-content; }
}
@media print { .qdoc-table thead { display: table-header-group; } }
.qdoc-toc-field { list-style: none; margin: 12px 0; padding: 0; }
.qdoc-toc-field li, .qdoc-toc-field .qdoc-toc-row { display: flex; gap: 8px; align-items: baseline; }
.qdoc-toc-field li::after, .qdoc-toc-field .qdoc-toc-row::after { content: ''; flex: 1;
    border-bottom: 1px dotted currentColor; opacity: .38; order: 2; }
.qdoc-toc-field a { color: inherit; text-decoration: none; order: 1; }
.qdoc-toc-page { order: 3; font-variant-numeric: tabular-nums; color: var(--accent); }
.qdoc-toc-l2 { padding-left: 1rem; } .qdoc-toc-l3 { padding-left: 2rem; }
.qd-align-center { text-align: center; }
.qd-align-right { text-align: right; }
.qd-align-justify { text-align: justify; }
.of-props-type { font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.of-props-ops { display: grid; gap: 6px; margin-top: 10px; }
.of-props-ops .is-danger { color: #d0453b; }

.of-statusbar { display: flex; gap: 22px; align-items: center; padding: 6px 18px;
    background: var(--header-bg); border-top: 1px solid var(--border);
    font-size: 12.5px; color: var(--muted); flex: 0 0 auto; }
.of-status-right { margin-left: auto; }
body.of-focus .of-left, body.of-focus .of-right,
body.of-focus .of-ribbon, body.of-focus .of-ribbon-tabs { display: none; }
body.of-focus .of-work { grid-template-columns: 1fr; }
@media (max-width: 1100px) {
    .of-work { grid-template-columns: 1fr; }
    .of-left, .of-right { display: none; }
}
@media (max-width: 600px) {
    .of-head { gap: 6px; padding: 6px 8px; flex-wrap: wrap; }
    .of-head .of-brand { display: none; }
    .of-head-doc { flex: 1 1 160px; max-width: calc(100% - 42px); }
    .of-title-row, .of-save-line { min-width: 0; max-width: 100%; overflow: hidden; }
    .of-title { width: 100%; min-width: 0; }
    .of-controls { width: 100%; margin-left: 0; overflow-x: auto; }
    .of-canvas-wrap { padding-inline: 8px; }
    .of-rpanel { max-width: 100vw; padding-inline: 8px; }
}

/* --- Writer: рейл-вкладки и поиск --- */
.of-rail-tabs { display: flex; gap: 2px; align-items: center; }
.of-rail-tab { padding: 6px 10px; border: 0; border-radius: 8px; background: none;
    font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted); cursor: pointer; }
.of-rail-tab:hover { color: var(--text); background: var(--hover); }
.of-rail-tab.active { color: var(--accent); background: var(--accent-soft); }
.of-rail-tabs .icon-btn { margin-left: auto; }
.of-rail-panel { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto;
    min-height: 0; overflow-y: auto; }
.of-rail-panel[hidden] { display: none; }
.of-hit { outline: 2px solid #e2b53e; border-radius: 6px; }
.docs-conv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.docs-conv > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }

/* --- Blog: лента карточек и кабинет автора --- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px; }
.blog-card { display: grid; gap: 10px; align-content: start; }
.blog-card .cab-chip { justify-self: start; }
.blog-card-title { margin: 0; font-size: 17px; line-height: 1.35; }
.blog-card-title a { color: var(--text); text-decoration: none; }
.blog-card-title a:hover { color: var(--accent); }
.blog-card-meta { display: flex; gap: 10px; align-items: center; margin-top: auto; }
.blog-card-meta > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }
.blog-card-meta b { font-size: 13.5px; }
.blog-card-meta small { color: var(--muted); font-size: 12px; }
.blog-card-meta .card-link { margin-left: auto; white-space: nowrap; }
.blog-view-meta { margin: 6px 0 18px; }
.blog-my-row { grid-template-columns: minmax(0,1fr) auto; }
.blog-my-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Кнопка выхода из режима фокуса: видна только в фокусе */
.of-focus-exit { display: none; position: fixed; top: 14px; right: 16px; z-index: 80;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-lift); }
body.of-focus .of-focus-exit { display: inline-flex; }

/* --- Writer: свёртка панелей БЕЗ ловушки — узкая рейка вместо исчезновения --- */
.of-work { grid-template-columns: auto minmax(0, 1fr) auto; }
.of-left { width: 260px; }
.of-right { width: 280px; }
.of-note-ref { display:inline-block; min-width:.75em; font-size:0; color:var(--primary);
    cursor:pointer; vertical-align:super; line-height:1; }
.of-note-ref::after { content:attr(data-note-number); font-size:.72rem; font-weight:700; }
.of-note-ref:focus { outline:2px solid var(--primary); outline-offset:2px; border-radius:3px; }
.of-note-editor { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.of-note-editor textarea { width:100%; min-height:120px; resize:vertical; margin-top:6px; }
.of-note-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.qdoc-notes { margin-top:1.5rem; padding-top:.75rem; border-top:1px solid var(--border); }
.qdoc-note-ref a, .qdoc-note-back { color:var(--primary); }
.of-left.is-closed, .of-right.is-closed { display: flex; width: 46px; padding: 12px 6px;
    align-items: flex-start; }
.of-left.is-closed .of-rail-panel, .of-left.is-closed .of-rail-tab,
.of-left.is-closed .of-rail-tabs { width: 100%; justify-content: center; }
.of-left.is-closed .of-rail-tabs .icon-btn { margin-left: 0; }
.of-right.is-closed .of-panel-head b, .of-right.is-closed #wPropsBody,
.of-right.is-closed #wPropsEmpty { display: none; }
.of-right.is-closed .of-panel-head { width: 100%; justify-content: center; }
.of-danger { color: #d0453b; }
.of-card-actions { flex-wrap: wrap; }

/* --- Layout Engine L1: страничный вид --- */
#wPages { display: grid; gap: 26px; justify-items: center; caret-color: var(--accent); }
#wPages:focus { outline: none; }
#wPages[hidden] { display: none; }
.of-page { position: relative; background: var(--surface); border-radius: 4px;
    box-shadow: var(--shadow-lift); box-sizing: border-box; }
.of-page-cap { position: absolute; bottom: -20px; left: 0; right: 0;
    text-align: center; font-size: 11px; }
.of-mm { width: 64px; }

/* --- L2: фрагменты, продолжение блока через страницы, page_break --- */
.of-measure-surface { position: absolute; left: -300vw; top: 0; visibility: hidden; }
.of-page { font-size: 12pt; line-height: 1.65; }
.of-pb { margin-bottom: 14px; border-radius: 6px; }
.of-page .of-pb:hover { outline: none; }
.of-pb > p:empty::before { content: '\00a0'; }
.of-pb[data-qdoc-island] { user-select: all; cursor: default; }
.of-pb[data-qdoc-island]:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.of-pb:last-child { margin-bottom: 0; }
/* середины и стыки: один блок, физически идущий через страницы */
.frag-first.qdoc-quote { border-radius: 0 10px 0 0; }
.frag-mid.qdoc-quote { border-radius: 0; }
.frag-last.qdoc-quote { border-radius: 0 0 10px 0; }
.frag-mid.qdoc-code, .frag-last.qdoc-code { border-top-left-radius: 0; border-top-right-radius: 0; }
.frag-first.qdoc-code, .frag-mid.qdoc-code { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.of-pagebreak-marker { text-align: center; font-size: 11px; letter-spacing: .12em;
    border-top: 1px dashed var(--border); padding-top: 3px; user-select: none; }

/* Layout Engine L3: таблицы по рядам, картинки atomic-fit */
.of-th-repeat th { opacity: .92; }               /* шапка-копия выглядит как шапка */
.frag-first.of-table, .frag-mid.of-table { border-bottom: 1px dashed var(--line, #c9c2b4); }
.frag-mid.of-table, .frag-last.of-table { border-top: none; }
.of-row-oversize td, .of-row-oversize th { outline: 1px dashed #c77; }
.of-img-missing { padding: 18px; border: 1px dashed var(--line, #c9c2b4);
  border-radius: 8px; text-align: center; font-size: 12px; }
.of-page .qdoc-img { margin: 0; }
.of-page .qdoc-img img { max-width: 100%; }
.of-page .qdoc-img figcaption { font-size: 12px; opacity: .75; padding-top: 6px; text-align: center; }
.of-image-object { position: relative; }
.of-image-object .qdoc-img { position: relative; }
.of-image-resize { position: absolute; right: -8px; bottom: -8px; width: 18px; height: 18px;
    padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent);
    cursor: nwse-resize; box-shadow: 0 1px 5px rgb(0 0 0 / .28); }
.of-image-object:not(:focus):not(:focus-within) .of-image-resize { display: none; }
.of-image-drop-marker { height: 3px; margin: 5px 0 11px; border-radius: 2px;
    background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.of-image-drop-marker[hidden] { display: none; }

/* Layout Engine L4: колонтитулы — инстансы единственного мастера */
.of-hd { font-size: 10.5pt; opacity: .7; border-bottom: 1px solid var(--line, #d5cfc2);
  padding-bottom: 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.of-ft { font-size: 10.5pt; opacity: .7; border-top: 1px solid var(--line, #d5cfc2);
  padding-top: 4px; text-align: center; overflow: hidden; white-space: nowrap; }
.of-chrome-in { min-width: 220px; }
.of-chrome-hint { font-size: 11px; max-width: 240px; }
+
/* Office Э6: линейки и chrome редактируют канонический layout, а не CSS. */
.of-page.is-active-page { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.of-ruler { position: absolute; z-index: 8; display: none; color: var(--muted);
  background: color-mix(in srgb, var(--surface) 94%, var(--accent)); border: 1px solid var(--border);
  font-size: 8px; line-height: 1; user-select: none; overflow: visible; }
.of-page.is-active-page > .of-ruler { display: block; }
.of-ruler-x { left: 0; right: 0; top: -24px; height: 20px; }
.of-ruler-y { top: 0; bottom: 0; left: -24px; width: 20px; }
.of-ruler-tick { position: absolute; }
.of-ruler-x .of-ruler-tick { left: var(--of-ruler-at); bottom: 0; height: 5px;
  border-left: 1px solid currentColor; padding: 0 0 7px 2px; }
.of-ruler-y .of-ruler-tick { top: var(--of-ruler-at); right: 0; width: 5px;
  border-top: 1px solid currentColor; padding-right: 7px; }
.of-ruler-tick.is-major { opacity: .95; }
.of-ruler-handle { position: absolute; width: 15px; height: 15px; padding: 0; border: 0;
  background: var(--accent); clip-path: polygon(50% 100%,0 0,100% 0); cursor: ew-resize; }
.of-ruler-x .of-ruler-handle { left: var(--of-ruler-preview,var(--of-ruler-at)); top: 2px;
  transform: translateX(-50%); }
.of-ruler-y .of-ruler-handle { top: var(--of-ruler-preview,var(--of-ruler-at)); left: 2px;
  transform: translateY(-50%) rotate(90deg); cursor: ns-resize; }
.of-ruler-handle:focus-visible { outline: 2px solid var(--focus,var(--accent)); outline-offset: 2px; }
.of-ruler-handle.is-dragging { filter: brightness(1.2); }
.of-chrome-zone { min-height: 20px; border-radius: 3px; cursor: text; }
.of-chrome-zone.is-empty { opacity: .42; border: 1px dashed var(--line,#c9c2b4); }
.of-chrome-zone.is-empty::before { content: attr(aria-label); }
.of-chrome-zone.is-editing { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px;
  white-space: nowrap; overflow: hidden; }
.of-chrome-zone.is-editing::before { content: none; }
.of-pagebreak-marker[data-break-mode] { cursor: default; }
.of-pagebreak-marker[data-break-mode]:focus { outline: 2px solid var(--accent); }
@media (max-width: 600px) {
  .of-ruler { display: none !important; }
  .of-page { max-width: 100%; }
}
@media print {
  .of-ruler, .of-pagebreak-marker, .of-page-cap { display: none !important; }
  .of-chrome-zone.is-empty { border: 0; }
  .of-chrome-zone.is-empty::before { content: none; }
}


/* Layout Engine L5: печать потребляет snapshot компоновщика.
   print-CSS имеет право ТОЛЬКО убрать UI/тени/зазоры и задать @page;
   метрики контента, таблиц, картинок и chrome не трогает. */
#ofPrint { display: none; }
/* Типографика печатной поверхности = типографике измерителя и экрана. */
.of-pp { font-size: 12pt; line-height: 1.65; }
@media print {
  body.of-app > *:not(#ofPrint) { display: none !important; }
  #ofPrint { display: block; }
  .of-pp { position: relative; box-sizing: border-box; overflow: hidden;
    break-after: page; page-break-after: always; background: #fff; }
  .of-pp:last-child { break-after: auto; page-break-after: auto; }
}

/* Layout Engine L6: секции */
.of-secbreak { border-top: 2px dashed var(--line, #c9c2b4); padding-top: 6px; }

/* L10: комментарии — панель и подсветка (Highlight API: DOM не меняется) */
::highlight(qc-open) { background: rgba(255, 196, 66, .38); }
.of-comments { display: flex; flex-direction: column; gap: 8px; max-height: 60vh;
  overflow-y: auto; padding: 6px; min-width: 240px; }
.of-comment { border: 1px solid var(--line, #d5cfc2); border-radius: 8px;
  padding: 8px 10px; font-size: 12.5px; }
.of-c-head { font-weight: 600; font-size: 11.5px; opacity: .8; }
.of-c-quote { font-size: 11.5px; margin: 2px 0; }
.of-c-lost { border-style: dashed; opacity: .75; }
.of-c-resolved { opacity: .55; }
.of-c-reply { margin: 4px 0 0 10px; padding-left: 8px;
  border-left: 2px solid var(--line, #d5cfc2); }
.of-c-actions { display: flex; gap: 6px; margin-top: 6px; }

.of-presence { font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

::highlight(qc-presence) { background: rgba(80, 140, 255, .30); }
.of-audit-row { font-size: 11.5px; padding: 2px 4px; }

/* --- Organizer: dashboard, карточки внимания, таймлайн --- */
.org-head { align-items: flex-start; }
.org-head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.org-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 0 18px; }
.org-sum { padding: 16px 18px; text-align: center; }
.org-sum-num { font-size: 30px; font-weight: 700; line-height: 1.1; }
.org-sum-label { color: var(--muted); font-size: 13px; margin-top: 4px; }
.org-cols { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 18px; align-items: start; }
.org-block-title { font-size: 17px; margin: 4px 0 10px; }
.org-att { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; margin-bottom: 18px; }
.org-att-card { padding: 16px 18px; }
.org-att-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.org-att-title { margin: 0; font-size: 16px; }
.org-att-cat { font-size: 12.5px; margin-top: 2px; }
.org-att-reason { font-weight: 600; margin: 10px 0 4px; }
.org-st { white-space: nowrap; }
.org-st-expired { background: rgba(220,68,68,.14); color: #d33; }
.org-st-action { background: rgba(230,150,40,.16); color: #c77b16; }
.org-st-soon { background: rgba(230,190,40,.18); color: #a3821a; }
.org-st-renewal { background: rgba(70,130,220,.14); color: #3a76c9; }
.org-st-archived { background: rgba(150,150,150,.14); color: var(--muted); }
.org-st-ok { background: rgba(46,165,106,.14); color: #2ea56a; }
.org-upcoming, .org-list { padding: 8px 14px; margin-bottom: 18px; overflow-x: auto; }
.org-att-title, .org-view-title { overflow-wrap: anywhere; }
.org-timeline { width: 100%; border-collapse: collapse; }
.org-timeline td { padding: 8px 8px; border-bottom: 1px solid var(--line, rgba(128,128,128,.15)); }
.org-timeline tr:last-child td { border-bottom: 0; }
.org-ev-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.org-side .card { padding: 16px 18px; margin-bottom: 14px; }
.org-note { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line, rgba(128,128,128,.15)); font-size: 13.5px; }
.org-note:last-child { border-bottom: 0; }
.org-note-read { opacity: .55; }
.org-note-act { display: flex; gap: 6px; }
.org-empty { padding: 34px; text-align: center; }
.org-form .cab-card { margin-bottom: 14px; }
.org-f { display: block; margin: 10px 0; }
.org-f span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.org-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0 16px; }
.org-notes-input { width: 100%; resize: vertical; }
.org-form-actions { margin: 16px 0; display: flex; gap: 10px; align-items: center; }
.org-inline { display: inline; }
.org-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.org-dl dt { color: var(--muted); }
.org-dl dd { margin: 0; }
.org-rem-add { margin-top: 12px; }
@media (max-width: 900px) {
    .org-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .org-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Документация: примеры кода, списки и таблицы справочника.
   Разметка общая с новостями (acms_render_text), поэтому и стили общие. */
.docs-code { margin: 14px 0; padding: 14px 16px; border-radius: 12px;
    background: var(--code-bg, rgba(41, 98, 255, .06));
    border: 1px solid var(--border); overflow-x: auto; }
.docs-code code { font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre; }
.docs-code[data-lang]::before { content: attr(data-lang); display: block;
    margin: -4px 0 8px; font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); }
.docs-inline { padding: 1px 6px; border-radius: 6px; font-size: .92em;
    font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
    background: var(--hover); color: var(--text); }
/* Маркеры списку возвращены: общий сброс их снимал, и перечень читался сплошным текстом. */
.docs-list { margin: 10px 0 14px; padding-left: 22px; list-style: disc; }
.docs-olist { margin: 10px 0 14px; padding-left: 24px; list-style: decimal; }
.docs-olist li { margin: 5px 0; line-height: 1.65; }

/* Organizer workspace — the same geometry as Day; colors come from Night tokens. */
.org-shell { display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; align-items:start; }
.org-nav { position:sticky; top:92px; display:flex; flex-direction:column; gap:5px; min-width:0; }
.org-nav-link { display:flex; gap:12px; align-items:center; min-height:46px; padding:0 15px; border-radius:11px; color:var(--muted); font-weight:600; text-decoration:none; }.org-nav-link svg{width:20px;height:20px;flex:0 0 20px}.org-nav-link:hover,.org-nav-link.is-active{background:var(--accent-soft);color:var(--accent)}
.org-nav-trust{margin-top:34px;padding:15px;border:1px solid var(--border);border-radius:14px;display:flex;gap:10px;color:var(--accent)}.org-nav-trust svg{width:22px;flex:0 0 22px}.org-nav-trust strong,.org-nav-trust span{display:block}.org-nav-trust strong{font-size:12px}.org-nav-trust span{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}
.org-workspace{min-width:0;container-type:inline-size}.org-hero,.org-page-head{display:flex;align-items:center;gap:24px;margin:4px 0 20px}.org-hero>div,.org-page-head>div{flex:1}.org-hero h1,.org-page-head h1{margin:0 0 4px;font-size:28px;line-height:1.2}.org-hero p,.org-page-head p{margin:0;color:var(--muted)}.org-hero blockquote{max-width:280px;margin:0;color:var(--muted);font-style:italic;text-align:right;font-size:13px;line-height:1.5}
.org-summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.org-sum{min-height:104px;padding:18px;display:flex;align-items:center;gap:14px;text-align:left;text-decoration:none;color:var(--text);box-shadow:none}.org-sum-icon,.org-att-icon,.org-event-icon,.org-aside-icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:0 0 46px;background:var(--accent-soft);color:var(--accent)}.org-sum-icon svg,.org-att-icon svg,.org-event-icon svg,.org-aside-icon svg{width:23px;height:23px}.org-sum>span:nth-child(2){display:flex;flex-direction:column}.org-sum-label{order:0;color:var(--muted);font-size:12px}.org-sum-num{order:1;font-size:25px;margin-top:4px}.org-sum-arrow{margin-left:auto;color:var(--muted);font-size:24px}.org-sum.tone-events .org-sum-icon{background:rgba(21,166,121,.14);color:#42d4a5}.org-sum.tone-reminders .org-sum-icon{background:rgba(129,70,246,.17);color:#a27cff}.org-sum.tone-attention .org-sum-icon{background:rgba(241,139,31,.16);color:#ffb15d}
.org-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:16px;align-items:start}.org-panel,.org-calendar{padding:18px;box-shadow:none}.org-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}.org-card-head h2{font-size:16px;margin:0}.org-card-head a{font-size:12px;text-decoration:none}
.org-event-list{display:flex;flex-direction:column}.org-ev{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.org-ev:last-child{border:0}.org-ev time{width:46px;height:46px;border-radius:11px;background:var(--section-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}.org-ev time strong{font-size:16px}.org-ev time span{font-size:9px;text-transform:uppercase;color:var(--muted);margin-top:3px}.org-event-icon{width:38px;height:38px;flex-basis:38px}.org-event-icon svg{width:18px;height:18px}.org-event-copy{display:flex;flex-direction:column;min-width:0;flex:1}.org-event-copy strong{font-size:13px;overflow-wrap:anywhere}.org-event-copy small,.org-event-date{font-size:11px;color:var(--muted)}.org-event-date{text-align:right}
.org-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}.org-weekday{font-size:10px;color:var(--muted);padding:4px}.org-day{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:12px;position:relative}.org-day.is-today{background:var(--accent);color:white;font-weight:700}.org-day.has-event:not(.is-today)::after{content:"";position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--accent)}.org-calendar-nav{display:flex;gap:6px}.org-calendar-nav .btn{padding:5px 9px}
.org-attention-panel{grid-column:1}.org-reminders-panel{grid-column:2}.org-notifications-panel{grid-column:2}.org-att{display:flex;flex-direction:column;margin:0;gap:0}.org-att-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.org-att-card:last-child{border:0}.org-att-icon{width:40px;height:40px;flex-basis:40px}.org-att-icon svg{width:19px}.org-att-title{font-size:13px}.org-att-reason{display:block;margin-top:2px;font-size:11px;color:#ff7777}.org-att-end{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.org-att-end .badge{font-size:9px}.org-att-end .btn{font-size:10px}.org-next-reminder{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--text)}.org-next-reminder>span:first-child{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#a27cff;background:rgba(129,70,246,.17)}.org-next-reminder>span:nth-child(2){display:flex;flex-direction:column;flex:1}.org-next-reminder small{color:var(--muted)}.org-next-reminder b{min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent)}.org-panel-empty{margin:18px 0 8px}
.org-quick{margin-top:16px;padding:18px;box-shadow:none}.org-quick h2{font-size:15px;margin:0 0 12px}.org-quick>div{display:flex;gap:12px}.org-quick a{min-width:150px;padding:14px;border:1px solid var(--border);border-radius:12px;display:flex;gap:10px;align-items:center;justify-content:center;text-decoration:none;color:var(--text)}.org-quick a svg{width:22px;color:var(--accent)}.org-empty{min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center}.org-empty-icon{width:60px;height:60px;border-radius:18px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center}.org-empty-icon svg{width:28px}.org-empty-actions{display:flex;gap:10px;justify-content:center}
.org-dialog-stage{padding:12px 0}.org-dialog{max-width:1040px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lift);overflow:hidden}.org-dialog-head{display:flex;justify-content:space-between;gap:20px;padding:22px 26px 10px}.org-dialog-head h1{font-size:23px;margin:0}.org-dialog-head p{margin:4px 0 0;color:var(--muted);font-size:12px}.org-dialog-close{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;display:grid;place-items:center;color:var(--muted)}.org-dialog-close svg{width:18px}.org-kind-tabs{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 26px}.org-kind-tabs a{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text)}.org-kind-tabs a>svg{width:25px;color:var(--accent)}.org-kind-tabs a span{display:flex;flex-direction:column}.org-kind-tabs small{color:var(--muted)}.org-kind-tabs a.is-active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 8px 20px var(--accent-glow)}.org-kind-tabs a.is-active svg,.org-kind-tabs a.is-active small{color:#fff}
.org-form-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;padding:10px 26px 20px}.org-form-main{min-width:0}.org-form-aside{background:var(--section-bg);border:1px solid var(--border);border-radius:14px;padding:20px;height:max-content}.org-form-aside h2{font-size:16px;margin:12px 0 4px}.org-form-aside p{font-size:12px;color:var(--muted);line-height:1.5}.org-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}.org-f span{font-weight:600;color:var(--text)}.org-channel-note{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:10px;font-size:11px}.org-channel-note span{display:flex;gap:7px;align-items:center;color:var(--muted)}.org-channel-note svg{width:16px;color:var(--accent)}.org-dialog-actions{border-top:1px solid var(--border);padding:14px 26px;display:flex;justify-content:flex-end;gap:10px;margin:0}
.org-category-choice,.org-notify-types{border:0;padding:0;margin:0 0 16px;min-width:0}.org-category-choice>legend,.org-notify-types>legend{font-weight:600;color:var(--text);margin-bottom:7px}.org-category-choice>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.org-category-choice>small{display:block;color:var(--muted);font-size:11px;margin-top:-7px}.org-notify-settings{padding:15px;margin:4px 0 16px;border:1px solid var(--border);border-radius:13px;background:var(--section-bg)}.org-notify-settings>h3{display:flex;align-items:center;gap:8px;font-size:14px;margin:0}.org-notify-settings>h3 svg{width:18px;color:var(--accent)}.org-notify-settings>p{margin:4px 0 12px;color:var(--muted);font-size:11px}.org-notify-types{display:grid;grid-template-columns:1fr 1fr;gap:10px}.org-notify-types legend{grid-column:1/-1}.org-notify-types label{position:relative;display:block;cursor:pointer}.org-notify-types input{position:absolute;inset:12px auto auto 12px;accent-color:var(--accent)}.org-notify-types label>span{min-height:58px;padding:10px 10px 10px 37px;border:1px solid var(--border);border-radius:10px;background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:2px 7px;align-content:center}.org-notify-types label>span svg{grid-row:1/3;width:17px;color:var(--accent)}.org-notify-types label>span small{grid-column:2;color:var(--muted);font-size:10px}.org-notify-types input:checked+span{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}.org-notify-types input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.org-notify-types-compact{grid-template-columns:1fr;margin-bottom:8px}.org-notify-types-compact label>span{min-height:42px}.org-rem-add{display:grid;gap:8px}
.org-view-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;padding:12px 26px 22px}.org-view-banner{display:flex;gap:14px;align-items:center;padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--section-bg);margin-bottom:12px}.org-view-banner>div{flex:1}.org-view-banner h2{margin:0 0 6px;font-size:20px}.org-detail-card{border:1px solid var(--border);border-radius:13px;padding:15px;margin-bottom:12px}.org-detail-card h3{display:flex;gap:8px;align-items:center;font-size:14px;margin:0 0 13px}.org-detail-card h3 svg{width:18px;color:var(--accent)}.org-view-side .org-dl{grid-template-columns:1fr}.org-view-side .org-dl dd{margin-bottom:8px}.org-view-actions{align-items:center}.org-view-actions .org-archive-action{margin-right:auto}.org-list-switch{text-align:right;margin:-8px 0 10px}.org-list{padding:0;overflow:hidden}.org-list-head{display:flex;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--border)}.org-list-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.org-list-row:last-child{border:0}.org-list-row>span:nth-child(2){display:flex;flex-direction:column}.org-list-row small{color:var(--muted)}
@media(max-width:1100px){.org-dashboard-grid{grid-template-columns:1fr 1fr}.org-attention-panel{grid-column:auto;grid-row:auto}.org-notifications-panel{grid-column:auto}.org-summary{grid-template-columns:repeat(2,1fr)}}
@container(max-width:850px){.org-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.org-dashboard-grid{grid-template-columns:1fr}.org-attention-panel,.org-reminders-panel,.org-notifications-panel{grid-column:auto}}
@media(max-width:760px){.org-shell{grid-template-columns:1fr;gap:14px}.org-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding-bottom:4px}.org-nav-link{white-space:normal;min-height:40px;padding:0 12px}.org-nav-trust{display:none}.org-hero,.org-page-head{align-items:flex-start;flex-wrap:wrap}.org-hero blockquote{display:none}.org-hero h1,.org-page-head h1{font-size:22px}.org-summary,.org-dashboard-grid,.org-form-layout,.org-view-grid{grid-template-columns:1fr}.org-summary{gap:9px}.org-sum{min-height:82px;padding:13px}.org-dialog-head,.org-kind-tabs,.org-form-layout,.org-view-grid,.org-dialog-actions{padding-left:15px;padding-right:15px}.org-kind-tabs{grid-template-columns:1fr}.org-form-aside{order:-1}.org-field-pair,.org-dates,.org-category-choice>div,.org-notify-types{grid-template-columns:1fr}.org-event-date{display:none}.org-quick>div,.org-empty-actions{flex-direction:column}.org-quick a{min-width:0}.org-dialog-actions{flex-wrap:wrap}.org-view-actions .org-archive-action{margin-right:0}.org-view-actions>*{flex:1}.org-list-row{padding:12px;grid-template-columns:auto minmax(0,1fr) auto}.org-list-row>.badge{display:none}}
.docs-list li { margin: 5px 0; line-height: 1.65; }
.docs-table-wrap { overflow-x: auto; margin: 14px 0; }
.docs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.docs-table th, .docs-table td { padding: 9px 12px; text-align: left;
    border-bottom: 1px solid var(--border); vertical-align: top; }
.docs-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 600; }
.docs-table tr:last-child td { border-bottom: none; }

/* Админка: медиа-узел — плитки фильтров и превью файла. */
.admin-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.admin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border: 1px solid var(--border); border-radius: 999px; font-size: 12px;
    color: var(--muted); background: var(--card); text-decoration: none; }
.admin-chip:hover { color: var(--text); background: var(--hover); }
.admin-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.admin-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--border); background: var(--hover); display: block; }

/* ── Витрина Roadmap: счётчики, этапы и карточки состояния ───────────────── */
.docs-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin-top: 16px; }
.docs-count { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--border);
              border-radius: var(--radius); background: var(--surface-2); position: relative; }
.docs-count b { font-size: 26px; line-height: 1.1; }
.docs-count span:last-child { color: var(--muted); font-size: 13px; }
.docs-count-ico { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid;
                  place-items: center; border-radius: 9px; color: #fff; }
.docs-count-ico svg { width: 17px; height: 17px; }

/* Organizer dashboard — same geometry as Day, using Night tokens. */
.org-sum small{order:2;color:var(--muted);font-size:10px;margin-top:2px}.org-sum.tone-birthdays .org-sum-icon{background:rgba(241,139,31,.16);color:#ffb15d}
.org-dashboard-mock-grid{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(270px,.9fr) minmax(260px,.95fr);gap:16px;align-items:start}.org-dashboard-side{display:grid;gap:16px}.org-dashboard-side .org-panel{margin:0}.org-dashboard-mock-grid>.org-quick{grid-column:1/3;margin-top:0}
.org-day{color:var(--text);text-decoration:none}.org-day:hover,.org-day.is-selected{background:var(--hover)}.org-day.is-today{background:var(--accent);color:#fff}.org-calendar-agenda{border-top:1px solid var(--border);margin-top:12px;padding-top:12px}.org-calendar-agenda-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.org-calendar-agenda-head h3{font-size:13px;margin:0}.org-calendar-agenda-head span{min-width:22px;height:22px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:11px}.org-calendar-event{display:flex;gap:8px;align-items:center;padding:8px 6px;margin-top:5px;border-radius:8px;text-decoration:none;color:var(--text);font-size:11px;background:var(--section-bg)}.org-calendar-event i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.org-card-empty{min-height:88px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;color:var(--muted);font-size:11px}.org-card-empty-large{min-height:250px;align-items:center;text-align:center}.org-card-empty>span>svg,.org-card-empty-large>span svg{width:30px;height:30px;color:var(--accent)}.org-card-empty p{margin:0}.org-card-empty a{text-decoration:none}.org-quote-card{min-height:150px;padding:20px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,var(--accent-soft),var(--section-bg));display:flex;flex-direction:column;justify-content:space-between}.org-quote-card blockquote{font-size:16px;font-style:italic;line-height:1.45;margin:0;max-width:270px}.org-quote-card span{font-size:10px;color:var(--muted)}
.org-dashboard-mock-grid .org-quick>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.org-dashboard-mock-grid .org-quick a,.org-quick-disabled{min-width:0;padding:12px 8px;border:1px solid var(--border);border-radius:12px;display:flex;gap:8px;align-items:center;justify-content:center;text-decoration:none;color:var(--text);text-align:center}.org-dashboard-mock-grid .org-quick a svg,.org-quick-disabled svg{width:21px;color:var(--accent);flex:0 0 21px}.org-quick-disabled{opacity:.58;cursor:not-allowed}.org-quick-disabled>span{display:flex;flex-direction:column}.org-quick-disabled small{font-size:8px;color:var(--muted)}
@media(max-width:1100px){.org-dashboard-mock-grid{grid-template-columns:1fr 1fr}.org-dashboard-side{grid-column:1/-1;grid-template-columns:1fr 1fr}.org-dashboard-side .org-quote-card{grid-column:1/-1}.org-dashboard-mock-grid>.org-quick{grid-column:1/-1}}
@container(max-width:650px){.org-dashboard-mock-grid{grid-template-columns:1fr}.org-dashboard-side{grid-column:auto;grid-template-columns:1fr}.org-dashboard-mock-grid>.org-quick,.org-dashboard-side .org-quote-card{grid-column:auto}.org-dashboard-mock-grid .org-quick>div{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.org-dashboard-mock-grid .org-quick>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
.docs-count--done  .docs-count-ico { background: #2f6df6; }
.docs-count--test  .docs-count-ico { background: #7c4dff; }
.docs-count--live  .docs-count-ico { background: #16a34a; }
.docs-count--refuse .docs-count-ico { background: #e5484d; }

.docs-stages { list-style: none; margin: 14px 0 0; padding: 0; display: grid;
               grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.docs-stage { position: relative; padding-top: 22px; font-size: 14px; }
.docs-stage::before { content: ''; position: absolute; top: 8px; left: 0; right: 0; height: 2px; background: var(--border); }
.docs-stage-dot { position: absolute; top: 3px; left: 0; width: 13px; height: 13px; border-radius: 50%;
                  border: 2px solid var(--border); background: var(--surface); }
.docs-stage--done .docs-stage-dot { background: #16a34a; border-color: #16a34a; }
.docs-stage--live .docs-stage-dot { background: #2f6df6; border-color: #2f6df6; }
.docs-stage--test .docs-stage-dot { background: var(--surface); border-color: #2f6df6; }
.docs-stage b { display: block; }
.docs-stage-state { display: inline-block; margin: 4px 0 5px; padding: 1px 9px; border-radius: 999px;
                    font-size: 12px; background: var(--accent-soft); color: var(--accent); }
.docs-stage--done .docs-stage-state { background: rgba(22,163,74,.14); color: #16a34a; }
.docs-stage .dim { display: block; color: var(--muted); font-size: 13px; }

.docs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; margin-top: 16px; }
.docs-products { margin-bottom: 16px; }
.docs-products .news-title { margin-top: 8px; }
.docs-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.docs-product { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start;
    min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 14px;
    color: var(--text); background: var(--surface-2); text-decoration: none;
    transition: border-color .15s, transform .15s, box-shadow .15s; }
.docs-product:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); }
.docs-product:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.docs-product-ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.docs-product-ico svg { width: 22px; height: 22px; }
.docs-product-copy { display: grid; gap: 5px; min-width: 0; }
.docs-product-copy b { font-size: 15px; }
.docs-product-copy small { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.docs-product-go { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--accent); font-size: 12px; font-weight: 650; }
.docs-product-go em { font-style: normal; }
.docs-product-go svg { width: 14px; height: 14px; flex: 0 0 auto; }
@media (max-width: 700px) { .docs-product-grid { grid-template-columns: minmax(0, 1fr); } }
.docs-card .card-title { display: flex; align-items: center; gap: 8px; }
.docs-card .card-title svg { width: 18px; height: 18px; }
.docs-card--done   .card-title svg { color: #16a34a; }
.docs-card--test   .card-title svg { color: #7c4dff; }
.docs-card--live   .card-title svg { color: #2f6df6; }
.docs-card--refuse .card-title svg { color: #e5484d; }
/* display:grid у списка убирал маркеры: элементы становятся ячейками
   сетки и перестают быть пунктами списка. Отступы делаем полями. */
.docs-list { margin: 10px 0 0; padding-left: 20px; font-size: 14px; list-style: disc; }
.docs-list li { line-height: 1.5; margin: 7px 0; }
.docs-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; font-size: 13px; color: var(--accent); }
.docs-more svg { width: 14px; height: 14px; }
.docs-more svg { width: 14px; height: 14px; }
.docs-legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; font-size: 13px; }
.docs-legend li { display: flex; align-items: center; gap: 9px; }
.docs-chip { padding: 2px 10px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.docs-chip--done { background: rgba(22,163,74,.14); color: #16a34a; }
.docs-chip--live { background: rgba(47,109,246,.14); color: #2f6df6; }
.docs-chip--test { background: rgba(124,77,255,.14); color: #7c4dff; }
.docs-chip--refuse { background: rgba(229,72,77,.14); color: #e5484d; }
/* ── Витрина Roadmap: правки под мокап ─────────────────────────────────────── */
.docs-count { flex-direction: row; align-items: center; gap: 12px; }
.docs-count-ico { position: static; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; }
.docs-count-body { display: flex; flex-direction: column; line-height: 1.25; }
.docs-count-body b { font-size: 24px; }
.docs-count-name { font-size: 13px; }
.docs-count-sub { color: var(--muted); font-size: 12px; }
.docs-count--pass .docs-count-ico { background: #16a34a; }

.docs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.docs-card-head .card-title { margin: 0; }
.docs-card-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; }
.docs-card-ico svg { width: 15px; height: 15px; color: #fff; }
.docs-card--done   .docs-card-ico { background: #16a34a; }
.docs-card--test   .docs-card-ico { background: #7c4dff; }
.docs-card--live   .docs-card-ico { background: #2f6df6; }
.docs-card--refuse .docs-card-ico { background: #e5484d; }
.docs-marks { list-style: none; padding: 0; }
.docs-marks li { margin: 7px 0; line-height: 1.5; }
.docs-item { display: flex; align-items: flex-start; gap: 9px; }
.docs-item-mark { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px; border-radius: 50%; position: relative; }
.docs-item--ok .docs-item-mark { background: rgba(22,163,74,.16); }
.docs-item--ok .docs-item-mark::after { content: ''; position: absolute; left: 4px; top: 3px; width: 4px; height: 7px;
    border: solid #16a34a; border-width: 0 2px 2px 0; transform: rotate(42deg); }
.docs-item--dot .docs-item-mark { background: rgba(124,77,255,.16); }
.docs-item--dot .docs-item-mark::after { content: ''; position: absolute; left: 5px; top: 5px; width: 5px; height: 5px;
    border-radius: 50%; background: #7c4dff; }
.docs-item--no .docs-item-mark { background: rgba(229,72,77,.16); }
.docs-item--no .docs-item-mark::after { content: ''; position: absolute; left: 4px; top: 7px; width: 7px; height: 2px; background: #e5484d; }
.docs-toc-item { display: block; padding: 6px 10px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; }
.docs-toc-item:hover { color: var(--text); background: var(--hover); }
.docs-toc-item:hover { color: var(--text); background: var(--hover); }
@media (min-width: 1200px) {
    .docs-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .docs-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.docs-count { padding: 12px 13px; }
.docs-count-name { font-weight: 600; }
.docs-card-head .card-title { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.docs-more { white-space: nowrap; margin-top: 0; }
.docs-item { justify-content: flex-start; }
.docs-item > span:nth-child(2) { flex: 1 1 auto; }
.docs-item .docs-chip { flex: 0 0 auto; align-self: flex-start; }
@media(max-width:320px){.docs-item{flex-wrap:wrap}.docs-item>span:nth-child(2){min-width:0;overflow-wrap:anywhere}.docs-item .docs-chip{margin-left:24px}}
.docs-toc-item { text-decoration: none; }
.docs-count { align-items: flex-start; gap: 10px; min-width: 0; }
.docs-count-body { min-width: 0; }
.docs-count-body b { font-size: 22px; }
.docs-count-name { font-size: 12.5px; }
.docs-count-sub { font-size: 11.5px; line-height: 1.35; }
.docs-count-ico { width: 30px; height: 30px; margin-top: 2px; }
.docs-card-head { flex-wrap: wrap; row-gap: 4px; }
.docs-card-head .card-title { white-space: normal; min-width: 0; }
.docs-more { font-size: 12.5px; }
.docs-counts { gap: 10px; }
.docs-count { padding: 11px 11px; gap: 9px; }
.docs-count-ico { width: 28px; height: 28px; }
.docs-count-ico svg { width: 15px; height: 15px; }
.docs-count-body b { font-size: 20px; }
.docs-count-name { font-size: 12px; white-space: nowrap; }
.docs-count-sub { font-size: 11px; white-space: nowrap; }
/* КАРТОЧКИ — ПО ДВЕ В РЯД, как в мокапе: третья не отжимает четвёртую в колбаску.
   Нечётная последняя занимает ряд целиком, чтобы рядом не зияла пустота. */
@media (min-width: 1000px) {
    .docs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .docs-cards > .docs-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ==========================================================================
   Trading Diary — витрина торгового следа (модуль Trading_Diary).
   Только показ: писать сюда может лишь терминал, поэтому ни одной формы.
   ========================================================================== */
.diary-wrap { display: grid; gap: 16px; }
.diary-block { display: grid; gap: 14px; }
.diary-note { display: flex; align-items: flex-start; gap: 8px; margin: 0;
    font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.diary-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.diary-note--wide { padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--section-bg); }
.diary-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.diary-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px;
    font-weight: 650; color: var(--text); text-decoration: none;
    transition: background-color .16s ease; }
.diary-tab:hover { background: var(--hover); }
.diary-tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.diary-tab-n { font-size: 11px; opacity: .7; }
.diary-grid { display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.diary-card { display: grid; gap: 8px; align-content: start; padding: 14px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.diary-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.diary-sym { font-family: var(--font-mono); font-weight: 700; font-size: 13px; }
.diary-meta { font-size: 12px; color: var(--muted); }
.diary-chip { padding: 2px 8px; border-radius: 999px; font-size: 11.5px;
    font-weight: 650; background: var(--accent-soft); color: var(--accent); }
.diary-chip.is-long { background: rgba(16, 160, 96, .14); color: #10a060; }
.diary-chip.is-short { background: rgba(224, 64, 72, .14); color: #e04048; }
.diary-chip.is-broker { background: var(--hover); color: var(--muted); }
.diary-card-title { font-size: 15px; font-weight: 700; line-height: 1.35;
    color: var(--text); text-decoration: none; }
.diary-card-title:hover { color: var(--accent); }
.diary-card-lead { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.diary-card-foot { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 10px; }
.diary-author { display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 650; color: inherit; text-decoration: none; }
.diary-author:hover { color: var(--accent); }
.diary-author small { display: block; font-weight: 400; color: var(--muted); }
.diary-card-side { display: inline-flex; align-items: center; gap: 10px; }
.diary-count { display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--muted); }
.diary-count svg { width: 14px; height: 14px; }
.diary-stats { display: flex; justify-content: center; gap: 22px; margin-top: 14px; }
.diary-stats span { display: grid; text-align: center; font-size: 12px; color: var(--muted); }
.diary-stats b { font-size: 17px; color: var(--text); }
.diary-shot { width: 100%; border: 1px solid var(--border); border-radius: 12px; }
.diary-upd { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border); }
.diary-upd p { margin: 0; font-size: 13px; line-height: 1.5; }
.diary-warn { color: #e04048; font-size: 11.5px; }
.diary-author-card { gap: 10px; }
@media (max-width: 720px) {
    .diary-grid { grid-template-columns: 1fr; }
    .diary-stats { gap: 14px; }
}

/* Просмотрщик замороженного кадра: только показ, рисовать здесь нечем. */
.diary-chart { position: relative; width: 100%; height: 480px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); overflow: hidden;
    /* Колесо над графиком приближает его, а не листает страницу. */
    touch-action: none; user-select: none; }
.diary-chart canvas { display: block; width: 100%; height: 100%; }
.diary-chart-head { display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 10px; }
.diary-chart-head .diary-sym { font-size: 14px; }
@media (max-width: 720px) { .diary-chart { height: 280px; } }


/* --------------------------------------------------------------------------
   Запись целиком — по образцу карточки идеи в терминале
   (src/ui/IdeasView.cpp: buildReadPage). Две колонки: слева содержание,
   справа сводка шириной 330px — ровно как sideHost в программе. Человек
   читает одну и ту же запись здесь и там, и вид не должен спорить сам с
   собой: те же радиусы 16, те же 14px между карточками, тот же вес шрифта.
   -------------------------------------------------------------------------- */
.diary-idea { display: grid; gap: 14px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 330px; }
.diary-main, .diary-side { display: grid; gap: 14px; align-content: start;
    min-width: 0; }
.diary-hero { display: grid; gap: 20px; align-items: start;
    grid-template-columns: minmax(0, 1fr) auto; }
.diary-hero-l { display: grid; gap: 10px; min-width: 0; }
.diary-hero-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.diary-hero-r { display: grid; gap: 8px; justify-items: end; text-align: right; }
.diary-ico { display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent); }
.diary-ico svg { width: 18px; height: 18px; }
.diary-ico.is-danger { background: rgba(224, 64, 72, .14); color: #e04048; }
.diary-ico.is-ok { background: rgba(16, 160, 96, .14); color: #10a060; }
.diary-word { font-size: 20px; font-weight: 700; color: var(--muted); }
.diary-h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; }
.diary-badge { padding: 4px 10px; border-radius: 9px; font-size: 12px;
    font-weight: 700; background: rgba(16, 160, 96, .14); color: #10a060; }
.diary-badge.is-soft { background: var(--hover); color: var(--muted); }
.diary-cardhead { display: flex; align-items: center; gap: 10px; }
.diary-cardhead h2 { margin: 0; font-size: 15px; font-weight: 700;
    line-height: 1.3; }
.diary-cardhead small { display: block; font-size: 11px; font-weight: 400;
    color: var(--muted); }
.diary-row3 { display: grid; gap: 14px; align-items: start;
    grid-template-columns: 46fr 27fr 27fr; }
.diary-danger { border-color: rgba(224, 64, 72, .35); }
.diary-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.diary-list li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; }
.diary-list li::before { content: ""; flex: none; width: 8px; height: 8px;
    margin-top: 6px; border-radius: 50%; background: #e04048; }
.diary-checks li::before { display: none; }
.diary-checks li svg { flex: none; width: 14px; height: 14px; margin-top: 2px;
    color: #10a060; }
.diary-nums { display: grid; grid-auto-flow: column; justify-content: start;
    gap: 22px; }
.diary-nums span { display: grid; text-align: center; font-size: 10px;
    color: var(--muted); }
.diary-nums b { font-size: 16px; color: var(--text); }
.diary-legal { margin: 0; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--accent); background: var(--accent-soft);
    font-size: 12px; line-height: 1.5; color: var(--text); }
@media (max-width: 1000px) {
    .diary-idea, .diary-row3, .diary-hero { grid-template-columns: minmax(0, 1fr); }
    .diary-hero-r { justify-items: start; text-align: left; }
}

/* Миниатюра в карточке ленты — тот же холст, что и большой график
   (includes/js/diary-chart.js, режим mini): свечи и разметка автора без
   осей и легенды. Не картинка: картинку пришлось бы хранить, она стареет
   и не умеет менять тему вместе с сайтом. */
.diary-mini-wrap { display: block; border-radius: 10px; overflow: hidden;
    text-decoration: none; }
.diary-mini { display: block; width: 100%; height: 128px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); overflow: hidden; }
.diary-mini canvas { display: block; width: 100%; height: 100%; }


/* ==========================================================================
   Панель управления — оформление по мокапу admin_main_page.png.
   Всё на переменных темы: ночная версия получается сама, а не копией.
   Палитра мокапа снята пипеткой и совпала с темой Day (фон #fafbfe,
   акцент #105ffc ≈ --accent), поэтому цвета здесь НЕ прописаны числами.
   ========================================================================== */

/* Шапка панели: бренд, поиск, язык/тема, события, кто вошёл. */
.site-header .nav .adm-search { flex: 1; }
.adm-search { position: relative; flex: 1; max-width: 620px; margin: 0 auto; }
.adm-search input { width: 100%; height: 42px; padding: 0 84px 0 42px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.adm-search input:focus { outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow); }
.adm-search .adm-search-ico { position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.adm-search .adm-search-ico svg { width: 16px; height: 16px; display: block; }
.adm-search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--section-bg); color: var(--muted);
    font: 600 11px/1 var(--font-ui); }
.adm-bell { position: relative; display: inline-flex; align-items: center;
    justify-content: center; width: 38px; height: 38px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); text-decoration: none; }
.adm-bell:hover { background: var(--hover); color: var(--text); }
.adm-bell svg { width: 18px; height: 18px; }
.adm-bell b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 999px; background: #e04048; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; }
.adm-me { display: inline-flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
    color: inherit; text-decoration: none; }
.adm-me:hover { background: var(--hover); }
.adm-me-ava { display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
    color: #fff; font-weight: 700; font-size: 13px; overflow: hidden; }
.adm-me-ava img { width: 100%; height: 100%; object-fit: cover; }
.adm-me-name { display: grid; line-height: 1.2; }
.adm-me-name b { font-size: 13px; }
.adm-me-name small { font-size: 11px; color: var(--muted); }

/* Каркас: плиточное меню слева, содержимое справа. */
.adm { display: grid; gap: 18px; grid-template-columns: 208px minmax(0, 1fr);
    align-items: start; }
.adm-nav { position: sticky; top: 88px; display: grid; gap: 3px; padding: 12px;
    border: 1px solid var(--border); border-radius: 20px;
    background: var(--surface); box-shadow: var(--shadow); }
/* Значок слева, подпись рядом — так, как в ночном мокапе: читается с
   одного взгляда, а длинные названия («Тарифы и платежи») не ломаются
   на две строки, как было при подписи под значком. */
.adm-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
    border-radius: 13px; color: var(--muted); text-decoration: none;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    transition: background-color .15s ease, color .15s ease; }
.adm-nav a svg { width: 19px; height: 19px; flex: none; }
.adm-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Карточка под меню: имя площадки и её девиз. Номера версии здесь нет —
   в настройках он не хранится, а рисовать его с картинки значило бы
   показать число, которого мы не знаем. */
.adm-nav-card { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 4px 10px; margin-top: 8px; padding: 12px 13px;
    border-radius: 14px; background: var(--accent-soft); color: var(--text) !important;
    text-decoration: none; }
.adm-nav-card b { grid-column: 1; font-size: 12.5px; }
.adm-nav-card small { grid-column: 1; font-size: 11px; color: var(--muted);
    line-height: 1.3; }
.adm-nav-card svg { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px;
    color: var(--accent); }
.adm-nav-card:hover { background: var(--accent-glow); }
.adm-nav a:hover { background: var(--hover); color: var(--text); }
.adm-nav a.is-on { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.adm-nav-sep { height: 1px; margin: 6px 4px; background: var(--border); }

/* Приветствие на космической полосе. Картинку не выдумываем: полоса
   собрана градиентами темы и звёздной плиткой, которая в наборе есть. */
.adm-hero { position: relative; overflow: hidden; display: grid; gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    padding: 26px 28px; border: 1px solid var(--border); border-radius: 22px;
    background: var(--bg-decor), linear-gradient(120deg, var(--accent-soft), var(--surface) 62%); }
.adm-hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.2; }
.adm-hero p { margin: 0; max-width: 62ch; font-size: 13.5px; line-height: 1.55;
    color: var(--muted); }
.adm-clock { display: grid; gap: 2px; justify-items: end; text-align: right;
    padding: 14px 18px; border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow); }
.adm-clock-date { font-size: 12px; color: var(--muted); }
.adm-clock-time { font-size: 28px; font-weight: 800; line-height: 1.1; }
.adm-clock-note { display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted); }
.adm-dot { width: 8px; height: 8px; border-radius: 50%; background: #10a060; flex: none; }
.adm-dot.is-off { background: #d0a215; }
.adm-dot.is-bad { background: #e04048; }

/* Ряды панели. */
.adm-main { display: grid; gap: 16px; min-width: 0; }
.adm-kpis { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-row { display: grid; gap: 16px; align-items: start; }
.adm-row.is-3 { grid-template-columns: 1.35fr 1.25fr 1fr; }
.adm-row.is-2 { grid-template-columns: 1.1fr 1fr; }

/* Карточка показателя со спарклайном. */
.adm-kpi { position: relative; overflow: hidden; display: grid; gap: 6px;
    padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px;
    background: var(--surface); box-shadow: var(--shadow); }
.adm-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .45; }
/* Бледный значок в углу — как в мокапе: он держит угол карточки и не
   спорит с числом. */
.adm-kpi-ghost { position: absolute; top: 14px; right: 16px; opacity: .18;
    pointer-events: none; }
.adm-kpi-ghost svg { width: 22px; height: 22px; }
.adm-kpi-top { display: flex; align-items: center; gap: 10px; }
.adm-kpi-ico { display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 38px; height: 38px; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent); }
.adm-kpi-ico svg { width: 19px; height: 19px; }
.adm-kpi-ico.is-violet { background: rgba(124, 92, 255, .16); color: #7c5cff; }
.adm-kpi-ico.is-mint { background: rgba(16, 160, 96, .14); color: #10a060; }
.adm-kpi-ico.is-sky { background: rgba(11, 87, 250, .12); color: var(--accent); }
.adm-kpi-name { font-size: 13px; font-weight: 650; color: var(--muted); }
.adm-kpi-val { display: flex; align-items: baseline; gap: 10px; }
.adm-kpi-val b { font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.adm-kpi-sub { font-size: 11.5px; color: var(--muted); }
.adm-kpi-spark { position: absolute; right: 14px; bottom: 12px; width: 108px; height: 34px;
    opacity: .9; pointer-events: none; }
.adm-kpi-spark svg { width: 100%; height: 100%; display: block; }
.adm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.adm-chip.is-up { background: rgba(16, 160, 96, .13); color: #10a060; }
.adm-chip.is-flat { background: var(--hover); color: var(--muted); }

/* Общая карточка панели. */
.adm-card { display: grid; gap: 12px; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 18px;
    background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.adm-card-head { display: flex; align-items: center; gap: 10px; }
.adm-card-head h2 { margin: 0; font-size: 15px; font-weight: 700; }
.adm-card-head .adm-ico { display: inline-flex; align-items: center;
    justify-content: center; flex: none; width: 30px; height: 30px;
    border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.adm-card-head .adm-ico svg { width: 16px; height: 16px; }
.adm-card-more { margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 12.5px; font-weight: 650; color: var(--accent); text-decoration: none; }
.adm-card-more svg { width: 14px; height: 14px; }

/* Лента событий. */
.adm-feed { display: grid; }
.adm-feed-item { display: grid; gap: 2px 12px; align-items: center;
    grid-template-columns: 34px minmax(0, 1fr) auto; padding: 10px 0;
    border-top: 1px solid var(--border); }
.adm-feed-item:first-child { border-top: 0; }
.adm-feed-ico { display: inline-flex; align-items: center; justify-content: center;
    grid-row: span 2; width: 34px; height: 34px; border-radius: 11px;
    background: var(--section-bg); color: var(--muted); }
.adm-feed-ico svg { width: 16px; height: 16px; }
.adm-feed-t { font-size: 13px; font-weight: 650; }
.adm-feed-s { grid-column: 2; font-size: 12px; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-feed-when { grid-row: span 2; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Состояние служб. */
.adm-state { display: grid; gap: 2px; }
.adm-state-row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
    font-size: 13px; }
.adm-state-row .adm-badge { margin-left: auto; }
.adm-badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.adm-badge.is-ok { background: rgba(16, 160, 96, .13); color: #10a060; }
.adm-badge.is-off { background: rgba(208, 162, 21, .15); color: #a37d0a; }
.adm-badge.is-bad { background: rgba(224, 64, 72, .13); color: #e04048; }
.adm-state-note { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
    border-radius: 14px; background: rgba(16, 160, 96, .08); }
.adm-state-note.is-warn { background: rgba(208, 162, 21, .10); }
.adm-state-note svg { width: 18px; height: 18px; flex: none; color: #10a060; }
.adm-state-note.is-warn svg { color: #a37d0a; }
.adm-state-note b { display: block; font-size: 13px; }
.adm-state-note small { font-size: 11.5px; color: var(--muted); }

/* Быстрые действия. */
.adm-quick { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-quick a { display: flex; align-items: center; gap: 9px; padding: 12px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
    color: var(--text); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.adm-quick a:hover { background: var(--hover); border-color: var(--accent); }
.adm-quick svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* Столбики посещений. */
.adm-bars { display: grid; grid-auto-flow: column; gap: 8px; align-items: end;
    height: 76px; }
.adm-bars span { display: grid; align-content: end; justify-items: center; gap: 6px;
    height: 100%; font-size: 10.5px; color: var(--muted); }
.adm-bars i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, var(--accent), var(--accent-soft)); }

/* Таблицы панели. */
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600;
    color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
.adm-table td { padding: 11px 10px; border-bottom: 1px solid var(--border); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .adm-cell { display: flex; align-items: center; gap: 9px; }
.adm-switch { display: inline-block; width: 38px; height: 21px; border-radius: 999px;
    background: var(--border); position: relative; }
.adm-switch.is-on { background: var(--accent); }
.adm-switch::after { content: ""; position: absolute; top: 3px; left: 3px;
    width: 15px; height: 15px; border-radius: 50%; background: #fff;
    transition: left .15s ease; }
.adm-switch.is-on::after { left: 20px; }

/* Промо-карточка внизу правой колонки. */
.adm-promo { display: grid; gap: 8px; padding: 20px; border-radius: 18px;
    background: linear-gradient(140deg, #16224a, #2a4a86);
    color: #fff; box-shadow: var(--shadow-lift); }
.adm-promo-brand { display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    opacity: .85; }
.adm-promo-brand svg { width: 15px; height: 15px; }
.adm-promo h3 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.25; }
.adm-promo p { margin: 0; font-size: 12.5px; opacity: .82; }
.adm-promo a { justify-self: start; margin-top: 6px; display: inline-flex;
    align-items: center; gap: 7px; padding: 9px 15px; border-radius: 11px;
    background: rgba(255, 255, 255, .14); color: #fff; text-decoration: none;
    font-size: 12.5px; font-weight: 650; }
.adm-promo a:hover { background: rgba(255, 255, 255, .22); }
.adm-promo a svg { width: 14px; height: 14px; }

@media (max-width: 1200px) {
    .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-row.is-3, .adm-row.is-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .adm { grid-template-columns: minmax(0, 1fr); }
    .adm-nav { position: static; grid-auto-flow: column; grid-auto-columns: 92px;
        overflow-x: auto; }
    .adm-hero { grid-template-columns: minmax(0, 1fr); }
    .adm-clock { justify-items: start; text-align: left; }
    .adm-kpis { grid-template-columns: minmax(0, 1fr); }
    .adm-search { display: none; }
}

/* Фон панели — та же картинка, но под ночную тему её нужно притушить:
   светлое небо за тёмными карточками слепит и ломает читаемость. Вуаль
   кладём поверх изображения, самой картинки не трогаем. */
body.is-admin {
    background: url("../../../images/admin-bg-night.png") center center / cover no-repeat fixed,
                var(--bg);
}
body.is-admin .site-header { background: rgba(3, 6, 13, .72);
    backdrop-filter: blur(14px); }

/* Ночная панель: карточки светятся, как в мокапе admin_main_page_night.
   Фон под ними полупрозрачный — сквозь карточку видно небо, иначе на
   космическом фоне они выглядят наклейками. */
body.is-admin .adm-kpi,
body.is-admin .adm-card,
body.is-admin .adm-nav,
body.is-admin .adm-hero,
body.is-admin .adm-clock {
    background: rgba(12, 22, 47, .82);
    border-color: rgba(94, 132, 214, .22);
    backdrop-filter: blur(10px);
}
body.is-admin .adm-kpi { border-top-color: rgba(94, 132, 214, .38); }
body.is-admin .adm-kpi::after {
    content: ""; position: absolute; inset: -1px -1px auto -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
    opacity: .55;
}
body.is-admin .adm-kpi-ico.is-sky {
    background: rgba(89, 150, 250, .18); color: #5996fa;
    box-shadow: 0 0 18px rgba(89, 150, 250, .28);
}
body.is-admin .adm-kpi-ico.is-violet {
    background: rgba(206, 138, 255, .16); color: #ce8aff;
    box-shadow: 0 0 18px rgba(206, 138, 255, .26);
}
body.is-admin .adm-kpi-ico.is-mint {
    background: rgba(23, 200, 160, .14); color: #2fd6a8;
    box-shadow: 0 0 18px rgba(23, 200, 160, .24);
}
body.is-admin .adm-nav a.is-on {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 6px 20px var(--accent-glow);
}
body.is-admin .adm-badge.is-ok { background: rgba(24, 61, 51, .9); color: #2fd6a8; }
body.is-admin .adm-state-note { background: rgba(5, 34, 30, .72); }
body.is-admin .adm-state-note.is-warn { background: rgba(52, 40, 8, .6); }
body.is-admin .adm-quick a { background: rgba(9, 18, 40, .7);
    border-color: rgba(94, 132, 214, .2); }
body.is-admin .adm-quick a:hover { border-color: var(--accent-2); }

/* Девиз в приветствии и подвал панели — из ночного мокапа. */
.adm-hero { grid-template-columns: minmax(0, 1fr) auto auto; }
.adm-motto { display: grid; gap: 2px; justify-items: end; text-align: right;
    padding-right: 18px; border-right: 1px solid var(--border); }
.adm-motto i { font-size: 13px; line-height: 1.45; color: var(--text);
    max-width: 20ch; }
.adm-motto small { font-size: 11px; color: var(--muted); }
.adm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    justify-content: space-between; margin-top: 18px; padding: 14px 18px;
    border: 1px solid var(--border); border-radius: 16px;
    background: var(--surface); font-size: 12.5px; color: var(--muted); }
.adm-foot-links { display: inline-flex; gap: 16px; }
.adm-foot-links a { color: var(--muted); text-decoration: none; font-weight: 600; }
.adm-foot-links a:hover { color: var(--accent); }
@media (max-width: 1000px) {
    .adm-hero { grid-template-columns: minmax(0, 1fr); }
    .adm-motto { justify-items: start; text-align: left; padding: 0 0 12px;
        border-right: 0; border-bottom: 1px solid var(--border); }
}
body.is-admin .adm-foot { background: rgba(12, 22, 47, .82);
    border-color: rgba(94, 132, 214, .22); backdrop-filter: blur(10px); }

/* Правки по снимку (сверка с мокапом глазами):
   1) заголовок карточки и ссылка справа не должны драться за ширину —
      «Статистика посещений» ломалась на две строки и наезжала на «За 7 дней»;
   2) промо-карточка вылезала за край сетки и накрывала столбец «Статус»:
      виновата минимальная ширина содержимого в grid-колонке;
   3) столбики посещений: при одном ненулевом дне остальные вырождались
      в едва заметную чёрточку — даём им видимую основу. */
.adm-card-head { flex-wrap: nowrap; }
.adm-card-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.adm-card-more { flex: none; white-space: nowrap; }
.adm-row > * { min-width: 0; }
.adm-promo { min-width: 0; overflow: hidden; }
.adm-promo h3, .adm-promo p { overflow-wrap: anywhere; }
.adm-bars i { min-height: 8px; background:
    linear-gradient(180deg, var(--accent), var(--accent-soft)); }
.adm-bars span { min-width: 0; }
body.is-admin .adm-nav-card { background: rgba(16, 28, 57, .9);
    border: 1px solid rgba(94, 132, 214, .22); }
body.is-admin .adm-nav-card:hover { border-color: var(--accent-2); }

/* Промо-карточка вылезала на соседний столбец: третья колонка нижнего
   ряда была уже своего содержимого, и карточка выпирала за её границу.
   Лечим причину — задаём ряду пропорции и запрещаем выход за колонку. */
.adm-row.is-3 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.2fr) minmax(260px, 1fr); }
.adm-row.is-3 > *, .adm-row.is-2 > * { max-width: 100%; }
.adm-promo { width: 100%; box-sizing: border-box; }
.adm-card { box-sizing: border-box; }
/* «За 7 дней» не должна упираться в край карточки. */
.adm-card-head .adm-card-more { margin-right: 2px; }
@media (max-width: 1200px) {
    .adm-row.is-3 { grid-template-columns: minmax(0, 1fr); }
}

/* Настоящая причина наезда на соседнюю колонку: таблица тянулась по
   неразрывному содержимому (длинные адреса, полная дата), и карточка
   становилась шире своей колонки сетки. min-width:0 на элементе сетки от
   этого не спасает — лечим саму таблицу: фиксированная раскладка плюс
   перенос длинных строк. */
.adm-table { table-layout: fixed; }
.adm-table td, .adm-table th { overflow-wrap: anywhere; }
.adm-table .adm-cell { min-width: 0; }
.adm-table .adm-cell > span { min-width: 0; }
/* Ширины столбцов. Прошлая раскладка сделала «Статус» слишком узким, и
   слово «Активен» ломалось пополам — бейдж рвать нельзя, он читается как
   одно слово. Даём ему место и запрещаем перенос внутри. */
.adm-table th:nth-child(2), .adm-table td:nth-child(2) { width: 30%; }
.adm-table th:nth-child(3), .adm-table td:nth-child(3) { width: 27%; }
.adm-table .adm-badge { white-space: nowrap; overflow-wrap: normal; }

/* --------------------------------------------------------------------------
   Разделы панели (Настройки, Модули, Журнал и прочие) — тем же языком, что
   и главная. Они рисуются общей функцией admin_box(), поэтому правила
   ниже действуют сразу на все разделы ядра и модулей.
   -------------------------------------------------------------------------- */
.adm-card-body { display: grid; gap: 14px; font-size: 13.5px; color: var(--text); }
.adm-card-body p { margin: 0; color: var(--muted); line-height: 1.55; }

/* Формы раздела: поля пошире, подписи спокойнее, кнопка по содержимому —
   растянутая во всю колонку кнопка «Сохранить» читалась как полоса. */
.adm-main .form { max-width: 520px; gap: 14px; }
.adm-main .form-wide { max-width: none; }
.adm-main .field label { font-size: 12.5px; font-weight: 600; }
.adm-main .input, .adm-main .select, .adm-main textarea {
    border-radius: 11px; padding: 10px 13px; font-size: 13.5px; }
.adm-main .btn { border-radius: 11px; padding: 9px 18px; font-size: 13.5px; }
.adm-main .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 9px; }
.adm-main .form > .btn, .adm-main .form > button { justify-self: start; }
.adm-main .inline-form { display: inline-flex; gap: 8px; align-items: center; }

/* Старые таблицы разделов подтянуты к виду таблиц главной: мелкая шапка,
   компактные строки, тонкие разделители. */
.adm-main .admin-table { width: 100%; border-collapse: collapse; font-size: 13px;
    table-layout: auto; }
.adm-main .admin-table th { padding: 8px 10px; font-size: 12px; font-weight: 600;
    color: var(--muted); border-bottom: 1px solid var(--border);
    text-align: left; white-space: nowrap; }
.adm-main .admin-table td { padding: 10px 10px; border-bottom: 1px solid var(--border);
    vertical-align: middle; }
.adm-main .admin-table tr:last-child td { border-bottom: 0; }
.adm-main .badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
    font-weight: 700; }

/* Внутри панели карточка не подпрыгивает и не носит точку у заголовка —
   это язык сайта, а панель говорит своим. */
.adm-main .card:hover { transform: none; box-shadow: var(--shadow); }
.adm-main .card-title::before { display: none; }
.adm-main .card-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
body.is-admin .admin-box { background: rgba(12, 22, 47, .82); backdrop-filter: blur(10px); }

/* Правки разделов по снимкам (сверка глазами):
   1) «Модули»: столбец действий не имел заголовка и разъезжался — даём
      ему свою ширину и прижимаем содержимое вправо;
   2) бейдж состояния в таблицах разделов — того же вида, что бейджи
      главной, а не старый зелёный прямоугольник;
   3) «Журнал»: столбец IP упирался в край карточки;
   4) форма раздела не должна теряться в широкой карточке — ограничиваем
      её колонкой и прижимаем к началу. */
.adm-main .admin-table th:last-child,
.adm-main .admin-table td:last-child { text-align: right; white-space: nowrap; }
.adm-main .admin-table td:last-child .btn { margin-left: auto; }
/* Бейджи разделов рисуются классами badge-on / badge-off — они уже имеют
   свой цвет. Моё прежнее правило красило .badge серым и по специфичности
   побеждало .badge-on, то есть я сам и погасил зелёный. Поэтому здесь —
   только форма, цвет остаётся за родными классами. */
.adm-main .badge { padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
    font-weight: 700; }
/* Статус стоит рядом со своим модулем, а не посреди пустоты. */
.adm-main .admin-table th:nth-child(2),
.adm-main .admin-table td:nth-child(2) { width: 110px; }
.adm-main .mono-cell { white-space: nowrap; }
.adm-main .admin-box .adm-card-body > .form:only-child { margin-right: auto; }

/* --------------------------------------------------------------------------
   Ночная сторона САЙТА — тем же языком, что ночная панель: космос на весь
   экран, полупрозрачные карточки с размытием, тонкая светящаяся рамка.

   ВАЖНО: переменная --surface НЕ трогается. Виджет графика витрины берёт
   из неё цвет полотна и по ней же определяет тёмность темы
   (includes/js/diary-chart.js). Сделай её полупрозрачной — у графиков
   пропадёт фон, а тема начнёт определяться неверно. Поэтому прозрачность
   задаётся правилам карточек, а не переменной.
   -------------------------------------------------------------------------- */
body {
    background: url("../../../images/admin-bg-night.png") center center / cover no-repeat fixed,
                var(--bg-decor), var(--bg);
}
/* Читаемость важнее вида: поверх неба лежит вуаль, иначе текст статьи на
   звёздах не читается. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(rgba(3, 6, 13, .78), rgba(3, 6, 13, .88));
}
.site-header { background: rgba(3, 6, 13, .72); backdrop-filter: blur(14px); }
.card, .diary-card, .docs-card, .cab-card {
    background: rgba(12, 22, 47, .78);
    border-color: rgba(94, 132, 214, .22);
    backdrop-filter: blur(10px);
}
.card:hover, .diary-card:hover { border-color: rgba(94, 132, 214, .38); }
.site-footer { background: rgba(3, 6, 13, .72); backdrop-filter: blur(10px); }

/* Полотно графика остаётся НЕПРОЗРАЧНЫМ: сквозь свечи не должно быть
   видно звёзд — это уже не график, а картинка поверх картинки. */
.diary-chart, .diary-mini { background: var(--surface); backdrop-filter: none; }

/* ==========================================================================
   АДАПТИВ (RESPONSIVE LAW): Desktop ≥1024 / Tablet 768–1023 / Mobile ≤767.
   Мобильная и планшетная версии — РЕЖИМЫ ПОКАЗА одного сайта: та же
   разметка, те же данные, те же права. Никакого scale/zoom и никакого
   overflow-x: hidden как «починки» — переполнение лечится композицией.
   ========================================================================== */

/* --- Кнопка панели и сама панель --------------------------------------- */
.nav-burger { display: none; place-items: center; width: 44px; height: 44px;
    flex: none; border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2); color: var(--text); cursor: pointer; }
.nav-burger:hover { color: var(--accent); border-color: var(--accent); }
.nav-burger svg { width: 20px; height: 20px; }

.nav-drawer { position: fixed; inset: 0; z-index: 1200; display: none; }
.nav-drawer.is-open { display: block; }
.nav-drawer-overlay { position: absolute; inset: 0;
    background: rgba(3, 6, 13, .55); backdrop-filter: blur(2px); }
.nav-drawer-panel { position: absolute; inset: 0 0 0 auto; width: 88%;
    max-width: 420px; display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lift); overflow-y: auto;
    animation: nav-drawer-in .22s ease; }
@keyframes nav-drawer-in { from { transform: translateX(12px); opacity: .6; } }
.nav-drawer-head { display: flex; align-items: center; justify-content: space-between;
    padding: 4px 2px 10px; border-bottom: 1px solid var(--border); }
.nav-drawer-head b { font-size: 15px; }
.nav-drawer-close { display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 12px; background: transparent; color: var(--muted);
    cursor: pointer; }
.nav-drawer-close:hover { color: var(--text); background: var(--hover); }
.nav-drawer-close svg { width: 20px; height: 20px; }
.nav-drawer-list { display: grid; gap: 2px; padding: 8px 0; }
/* Палец — не курсор: у каждой цели своя площадь не меньше 44px. */
.nav-drawer-item { display: flex; align-items: center; gap: 8px; min-height: 48px;
    padding: 10px 12px; border-radius: 12px; color: var(--text);
    text-decoration: none; font-size: 16px; font-weight: 600; }
.nav-drawer-item:hover { background: var(--hover); }
.nav-drawer-item.is-on { background: var(--accent-soft); color: var(--accent); }
.nav-drawer-item.is-child { padding-left: 26px; font-weight: 500;
    font-size: 15px; color: var(--muted); }
.nav-drawer-item.is-soon { justify-content: space-between; color: var(--muted); }
.nav-drawer-group { padding: 14px 12px 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nav-drawer-foot { display: grid; gap: 8px; margin-top: auto;
    padding-top: 12px; border-top: 1px solid var(--border); }
.nav-drawer-foot .btn { justify-content: center; min-height: 48px; }

/* --- Планшет: 768–1023 -------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1080px) {
    .wrap { width: calc(100% - 48px); }
    /* Меню сайта уходит в панель: в ряд с логотипом и переключателями оно
       не помещается честно, а горизонтальный скролл шапки запрещён. */
    .site-header .nav { display: none; }
    .nav-burger { display: grid; }
    .site-header .wrap { flex-wrap: nowrap; height: 64px; }

    .lp-hero { grid-template-columns: 1.1fr .9fr; align-items: center; }
    .lp-title { font-size: 46px; }
    .lp-visual { min-height: 320px; }
    /* Чипы героя вылезали на 25–28px за край (замер до правок) — на этой
       ширине им места нет, показываем только два ближних. */
    .lp-chip--users, .lp-chip--db, .lp-chip--plugins { display: none; }
    .lp-stats { gap: 12px; }
    .lp-stat { flex: 1 1 calc(50% - 12px); }
    /* ТЗ §14: альбом — 4 колонки, портрет — 2. */
    .grid, #blockGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 1080px) and (orientation: portrait) {
    .grid, #blockGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Телефон: ≤767 ------------------------------------------------------ */
@media (max-width: 767px) {
    .wrap { width: calc(100% - 32px); }
    .site-header .wrap { flex-wrap: nowrap; height: 64px; gap: 8px; }
    .site-header .nav { display: none; }
    .nav-burger { display: grid; }
    /* Язык и тема остаются в шапке (ТЗ §3), остальное — в панели. */
    .site-header .controls .btn-ghost,
    .site-header .controls .btn-primary { display: none; }
    .site-header .controls { gap: 6px; }

    .lp-hero { grid-template-columns: 1fr; gap: 18px; }
    .lp-title { font-size: 36px; line-height: 1.12; }
    .lp-lead { font-size: 17px; }
    .lp-visual { min-height: 220px; order: 3; }
    .lp-chip { display: none; }
    .lp-cta { display: grid; gap: 10px; }
    .lp-cta .btn { min-height: 50px; justify-content: center; }
    .lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .lp-stat { flex: none; }
    .lp-section { padding: 28px 16px; }
    .lp-section-title { font-size: 26px; }

    /* ТЗ §6: карточки экосистемы — две колонки, не одна. */
    .grid, #blockGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .grid .span-2, #blockGrid .span-2 { grid-column: span 2; }
    .card { padding: 16px; border-radius: 20px; }

    /* iOS увеличивает страницу, если поле мельче 16px — держим 16. */
    .input, .select, textarea { font-size: 16px; min-height: 44px; }
    .btn { min-height: 44px; }
}

/* Совсем узкие экраны: 320px тоже обязан быть целым. */
@media (max-width: 479px) {
    .wrap { width: calc(100% - 24px); }
    .lp-title { font-size: 32px; }
    .lp-stats { grid-template-columns: 1fr; }
}

/* Панель — накладная, и её незачем показывать на десктопе. */
@media (min-width: 1081px) {
    .nav-drawer { display: none !important; }
}

/* --- Разбор конфликта каскада (замер + снимки 390/820) ------------------
   Планшет 768–1023 шёл по мобильной ветке: старые правила .lp-hero на
   max-width:1080 и max-width:720 стоят ниже по файлу и перекрывали мои.
   Поэтому планшетные значения переобъявлены здесь, после них. */
@media (min-width: 768px) and (max-width: 1080px) {
    .lp-hero { grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: center; }
    .lp-title { font-size: 46px; line-height: 1.1; }
    .lp-lead { font-size: 18px; }
    .lp-visual { min-height: 340px; margin-top: 0; order: 0; }
    /* Чипы на планшете не помещаются честно ни в каком числе: тот, что
       остался, вылезал за край иллюстрации. Показываем только левые. */
    .lp-chip--users, .lp-chip--db, .lp-chip--plugins, .lp-chip--shop { display: none; }
    .lp-chip--blog { display: flex; }
    .lp-stats { display: flex; flex-wrap: wrap; gap: 12px; }
    .lp-stat { flex: 1 1 calc(25% - 12px); }
    /* Вход тоже уходит в панель: в ряд с логотипом и переключателями он
       не помещается без тесноты (ТЗ §3, §12). */
    .site-header .controls .btn-ghost,
    .site-header .controls .btn-primary { display: none; }
}

/* --- Телефон: визуал не должен съедать экран (ТЗ §5) -------------------- */
@media (max-width: 767px) {
    .lp-visual { min-height: 150px; max-height: 220px; overflow: hidden; }
    .lp-hero { gap: 14px; }
}

/* --- Причина переполнения на 320px (найдена замером) --------------------
   Цепочка: card.clientWidth=117 против scrollWidth=181 → grid → main.wrap
   → html (+4px). Две колонки на 320 слишком узки для заголовков вроде
   «Сейчас в разработке»: слово не переносится и распирает карточку.
   Лечим причину — на самых узких экранах одна колонка и разрешённый
   перенос длинных слов, а не overflow-x поверх беды. ТЗ требует две
   колонки для 375–430, и они остаются. */
@media (max-width: 359px) {
    .grid, #blockGrid { grid-template-columns: minmax(0, 1fr); }
    .grid .span-2, #blockGrid .span-2 { grid-column: span 1; }
}
@media (max-width: 767px) {
    .card-title, .card-body, .lp-section-title, .lp-title { overflow-wrap: anywhere; }
    .grid > .card, #blockGrid > .card { min-width: 0; }
}

/* --- Правки по снимку 390/820 -------------------------------------------
   1) «Масштабируемость» и «Архитектура» рвались посреди слова: правило
      overflow-wrap: anywhere я дал слишком широко. Оставляем его там, где
      беда реальна (заголовки карточек сетки), и запрещаем в метриках.
   2) Чип «AI Agent» всё ещё вылезал за правый край иллюстрации на планшете.
   3) Ограничение высоты визуала на телефоне перебивалось правилом
      min-height из старого блока — переобъявляем после него. */
@media (max-width: 1023px) {
    .lp-stat, .lp-stat-lbl, .lp-stat-val { overflow-wrap: normal; word-break: keep-all; }
    .lp-stat-lbl { hyphens: auto; }
}
@media (min-width: 768px) and (max-width: 1080px) {
    .lp-chip { display: none; }        /* ни один чип на планшет не влезает честно */
}
@media (max-width: 767px) {
    .lp-visual { min-height: 0; height: 200px; max-height: 200px; }
    .lp-station { background-size: contain; background-position: center; }
}

/* Сетка планшета: ТЗ §14 — четыре колонки в альбоме, две в портрете.
   Прежнее объявление перекрывалось более поздними правилами .grid. */
@media (min-width: 768px) and (max-width: 1080px) {
    .grid, #blockGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .grid .span-2, #blockGrid .span-2 { grid-column: span 2; }
}
@media (min-width: 768px) and (max-width: 1080px) and (orientation: portrait) {
    .grid, #blockGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid .span-2, #blockGrid .span-2 { grid-column: span 2; }
}

/* Сетка секций лендинга: специфичность .lp-section .grid выше, чем .grid,
   поэтому режимы задаём тем же селектором — иначе планшет остаётся на
   auto-fit и даёт 2–3 колонки вместо четырёх (ТЗ §14). */
@media (min-width: 768px) and (max-width: 1080px) {
    .lp-section .grid, .lp-section #blockGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 768px) and (max-width: 1080px) and (orientation: portrait) {
    .lp-section .grid, .lp-section #blockGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .lp-section .grid, .lp-section #blockGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 359px) {
    .lp-section .grid, .lp-section #blockGrid {
        grid-template-columns: minmax(0, 1fr); }
}

/* Герой планшета: доли обязаны уметь сжиматься. Без minmax(0,…) колонка
   не опускается ниже своего содержимого, и на 1028px герой просил 1058 —
   +54px переполнения (найдено замером, а не на глаз). */
@media (min-width: 768px) and (max-width: 1080px) {
    .lp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
    .lp-visual { min-width: 0; }
    .lp-copy { min-width: 0; }
}

/* На планшете все метки скрыты, поэтому герой может локально
   обрезать декор. На desktop метки специально выходят за grid-границу:
   не обрезаем их вместе со свечением и не зависим от разного толкования
   overflow-clip-margin в Chrome и Firefox. Само свечение ::after уже ограничено
   границами героя и scrollWidth не распирает. */
@media (max-width: 1080px) {
    .lp-hero { overflow-x: clip; }
}

/* --------------------------------------------------------------------------
   Сетка экосистемы по мокапу main_page_cards: не частокол одинаковых плиток,
   а расстановка разного веса. Прежнее правило auto-fit minmax(210px,1fr)
   само плодило одинаковые узкие колонки — сколько блоков, столько и столбцов.
   Теперь колонок ровно четыре, а вес плитки задаёт её размер в реестре.
   -------------------------------------------------------------------------- */
@media (min-width: 1081px) {
    /* Двенадцать колонок, а не четыре. При четырёх плитка бывает только в
       одну или две колонки, и ряд «скоро» из трёх разделов не закрывался:
       оставался хвост в пустую клетку — то самое «напихали». На двенадцати
       обычная плитка равна 3, широкая 6, компактная 4, и три компактных
       дают ровно полный ряд. Замечено глазами на снимке, не расчётом. */
    .lp-section .grid, .lp-section #blockGrid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-auto-rows: minmax(150px, auto);
        gap: 18px;
    }
    /* Обычная плитка — четверть ряда. Задаём всем детям, иначе карточка без
       класса размера растянется на все двенадцать колонок. */
    .lp-section .grid > .card { grid-column: span 3; }
    /* Крупная карточка: половина ряда и два ряда — «Сейчас в разработке». */
    .lp-section .grid > .wide { grid-column: span 6; grid-row: span 2; }
    /* Высокая: четверть ряда, но два ряда — «Последнее в Quasar». */
    .lp-section .grid > .tall { grid-column: span 3; grid-row: span 2; }
    /* Широкая обычная: половина ряда, один ряд — добивает ряд живых. */
    .lp-section .grid > .span-2 { grid-column: span 6; }
    /* Низкая плитка «скоро»: треть ряда, три штуки закрывают ряд целиком. */
    .lp-section .grid > .compact { grid-column: span 4; grid-row: span 1; }
}

/* Планшет: крупная плитка остаётся широкой, высокая теряет второй ряд —
   иначе колонка вытягивается и ломает ритм. */
@media (min-width: 768px) and (max-width: 1080px) {
    .lp-section .grid > .wide { grid-column: span 2; grid-row: span 2; }
    .lp-section .grid > .tall { grid-row: span 1; }
    .lp-section .grid > .compact { grid-column: span 1; }
}

/* Телефон: все плитки равны, крупная занимает обе колонки. */
@media (max-width: 767px) {
    .lp-section .grid > .wide { grid-column: span 2; grid-row: auto; }
    .lp-section .grid > .tall { grid-row: auto; }
}
@media (max-width: 359px) {
    .lp-section .grid > .wide { grid-column: span 1; }
}

/* Карточка «скоро» — тише живых: меньше отступов, бейдж вместо ссылки. */
.lp-section .grid > .compact { padding: 16px 18px; }
.lp-section .grid > .compact .card-title { font-size: 15px; }
.lp-section .grid > .compact .card-body { font-size: 13px; }
.lp-section .grid > .compact .tile { width: 34px; height: 34px; border-radius: 11px; }
.lp-section .grid > .compact .tile svg { width: 17px; height: 17px; }

/* Крупная карточка дышит: у неё больше места, и содержимое прижато к низу. */
.lp-section .grid > .wide { padding: 26px 26px 22px; }
.lp-section .grid > .wide .card-title { font-size: 21px; }
.lp-section .grid > .wide .card-body { display: flex; flex-direction: column; gap: 10px; }
.lp-section .grid > .tall .card-body { display: flex; flex-direction: column; gap: 8px; }

/* ==========================================================================
   Мобильный вид: три очага, найденные ЗАМЕРОМ (а не на глаз) на 308–390px.
   Правила объявлены в конце файла намеренно: очаг №1 вызван поздним
   правилом без медиазапроса, и лечение обязано идти после него.
   ========================================================================== */

/* Очаг 1. Кабинет: шапка налезала на меню ровно на 68px.
   Причина: боковой колонке оставлено десктопное top: 88px от sticky, а
   position ей вернули в relative правилом без медиазапроса — оно перебило
   мобильное static. relative + top = сдвиг вниз, не прилипание.
   Заодно меню высотой 438px обрезалось контейнером max-height: 420px. */
/* Граница 1080: sticky с top: 88px объявлен без медиазапроса и действует
   на ВСЕХ ширинах, поэтому одноколоночная раскладка получала сдвиг вниз
   на 88px и шапка налезала на меню. Сначала лечение стояло на 900px, потом
   на 1023 — и то и другое оставляло часть планшетных ширин больной. */
@media (max-width: 1080px) {
    .cab .cab-side {
        position: static;
        top: auto;
    }
    .cab.is-side-open .cab-side { max-height: 760px; }
}

/* Очаг 2. Кабинет: карточка тарифа держала 388px при экране 320.
   Элемент сетки по умолчанию не сжимается ниже своего min-content —
   minmax(0,…) у родителя тут бессилен, ограничение сидит на самом элементе. */
.cab-billing-grid > * ,
.cab-plan,
.cab-plans > * { min-width: 0; }
.cab-plan, .cab-plan-card { overflow-wrap: anywhere; }

/* Очаг 3. Офис: строка формы — flex без переноса, поле 249 + кнопка 156
   давали 406px при экране 308. Считано по сумме детей, а не на глаз. */
@media (max-width: 767px) {
    .of-mini-form {
        flex-wrap: wrap;
        min-width: 0;
    }
    .of-mini-form .input {
        flex: 1 1 100%;
        min-width: 0;
    }
    /* Поле выбора файла шире экрана само по себе: имя файла не переносится. */
    .of-file-picker { flex: 1 1 100%; max-width: 100%; }
    .of-file-name { max-width: none; flex: 1 1 auto; }
    .of-mini-form .btn { flex: 1 1 auto; justify-content: center; }
}

/* Очаг 4. Форум: плитки статистики стояли по две даже на 320px и давали
   +23px. На самых узких — одна колонка. */
@media (max-width: 400px) {
    .forum-stats-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Очаг 5. Кабинет: +109px на 320, +39 на 390 и +152 на 1280 давала
   таблица платежей — пять колонок, min-content 388px при width: 100%.
   Найдено ОПЫТОМ (прятал элементы по одному и смотрел на scrollWidth), а
   не осмотром: до этого я трижды объявлял виновником декоративный фон и
   трижды ошибался — overflow: clip, clip-path и contain: paint на .cab-bg
   применялись, но не меняли scrollWidth ни на пиксель.
   Лечение как у других таблиц темы: прокручивается таблица, а не страница. */
.cab-table-wrap { overflow-x: auto; max-width: 100%; }
.cab-table-wrap .cab-table { min-width: 340px; }

/* ==========================================================================
   Кабинет на телефоне и планшете: меню — выдвижная панель СЛЕВА.
   Было: колонка в потоке, которая «схлопывается» по кнопке, и при загрузке
   она стояла распахнутой (кука по умолчанию «открыто») — пол-экрана занимал
   список вкладок. Панель устроена зеркально правой (.nav-drawer): тот же
   overlay, та же ширина, то же закрытие; отличается только сторона.
   ========================================================================== */
@media (max-width: 1080px) {
    /* Колонка выходит из потока сетки и становится панелью поверх страницы. */
    .cab .cab-side {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1200;
        width: 86%;
        max-width: 380px;
        max-height: none;            /* высоту больше не режем: панель прокручивается */
        padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
        background: var(--surface);
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-lift);
        overflow-y: auto;
        /* Закрыта — уехала за левый край; открыта — на месте. Двигаем
           transform, а не ширину: раскладка при этом не пересчитывается. */
        transform: translateX(-102%);
        transition: transform .24s ease;
        visibility: hidden;
    }
    .cab.is-side-open .cab-side {
        transform: none;
        visibility: visible;
    }
    /* Пункты панели — под палец: цель не меньше 48px, как в правой панели. */
    .cab .cab-nav { width: auto; margin-top: 6px; }
    .cab .cab-nav-item { min-height: 48px; font-size: 16px; }
    /* Затемнение под панелью: рисуем самой сеткой, чтобы не заводить лишний
       узел в разметке ради одного прямоугольника. */
    .cab.is-side-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1199;
        background: rgba(3, 6, 13, .55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    /* Содержимое всегда занимает всю ширину: панель его больше не теснит. */
    .cab, .cab.is-side-open { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ==========================================================================
   Главная по мокапу main_page_cards: отделка карточек и секций.
   Фотоподложек из макета в проекте нет, поэтому вместо них — мягкое
   свечение в углу карточки тем же цветом, что и значок раздела.
   ========================================================================== */

/* Плашка внизу карточки: слева слово, справа круглая кнопка со стрелкой. */
.card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding: 7px 7px 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg,
        rgba(124, 138, 255, .10), rgba(124, 138, 255, .04));
    color: var(--accent);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
a.card-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.card-cta-text { display: inline-flex; align-items: center; gap: 7px; }
/* Точка перед статусом — как в макете; у «Перейти» её нет. */
.card-cta-text.mod-status { padding: 0; background: none; border-radius: 0; }
.card-cta-go {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}
.card-cta-go svg { width: 15px; height: 15px; transition: transform .18s ease; }
a.card-cta:hover .card-cta-go svg { transform: translateX(2px); }
.card-cta.is-soon, .card-cta.is-plan { color: var(--muted); }
.card-cta.is-soon .card-cta-go, .card-cta.is-plan .card-cta-go {
    background: var(--hover); color: var(--muted);
}

/* Свечение в углу карточки — замена фотоподложке макета. Рисуем
   псевдоэлементом: лишних узлов в разметке не заводим. */
/* Карточка обрезает своё свечение: псевдоэлемент вынесен за правый край
   (right: -10%), и без обрезки он тянул страницу — замер дал +2px на 390.
   Виновника вычитанием было не найти: прятать по одному можно узлы, а
   псевдоэлемент узлом не является — молчание опыта тут само по себе улика. */
.lp-section .grid > .card { overflow: hidden; }
.lp-section .grid > .card::after {
    content: "";
    position: absolute;
    right: -10%;
    top: -30%;
    width: 78%;
    height: 120%;
    border-radius: 50%;
    /* Заметнее, чем было: с .16 подложка на снимке почти не читалась,
       а в макете свечение в углу видно отчётливо. */
    background: radial-gradient(closest-side,
        rgba(124, 138, 255, .30), rgba(124, 138, 255, .07) 62%,
        rgba(124, 138, 255, 0) 78%);
    pointer-events: none;
    z-index: 0;
}
.lp-section .grid > .card > * { position: relative; z-index: 1; }

/* Заголовок секции: в макете он слева, а по краям — мелкие надписи. */
.lp-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    margin-bottom: 30px;
}
.lp-section-head .lp-section-title { text-align: left; margin: 0; }
.lp-section-head .lp-section-sub { margin: 10px 0 0; text-align: left; max-width: 52ch; }
.lp-tag {
    display: block;
    margin-bottom: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}
.lp-tag-right {
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
}
.lp-tag-right i {
    display: block;
    width: 44px;
    height: 1px;
    margin-bottom: 8px;
    background: var(--border);
}
/* Второе слово заголовка — акцентом, как в макете. */
.lp-section-title em { font-style: normal; color: var(--accent); }

/* Подпись в шапке и подвале. */
.head-motto, .foot-motto {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}
.head-motto { display: none; }            /* в шапке — только на широких */
@media (min-width: 1281px) { .head-motto { display: block; } }

/* Телефон: надписи по краям мешают — заголовок остаётся один. */
@media (max-width: 767px) {
    .lp-section-head { grid-template-columns: minmax(0, 1fr); }
    .lp-tag-right { display: none; }
    .card-cta { padding-left: 12px; font-size: 12.5px; }
}

/* ==========================================================================
   Шапка: меню обязано стоять ОДНОЙ строкой.
   Замер: на 1268 и 1428 оно складывалось в две строки («Админ-панель»
   падала под «Главная»), на 1668+ стояло правильно. Виновато не
   переполнение (его нет), а правило .nav { flex-wrap: wrap }: когда места
   не хватает, меню молча переносится. У вошедшего служебного пользователя
   пунктов на один больше, поэтому он видит это первым.
   Запрещать перенос «в лоб» нельзя — меню полезет за край и вернёт
   переполнение. Поэтому: сперва ужимаем, а если и так не влезает —
   уводим в уже готовую выдвижную панель (её граница поднята до 1280).
   ========================================================================== */
@media (min-width: 1081px) and (max-width: 1420px) {
    .site-header .nav { flex-wrap: nowrap; gap: 4px; margin-left: 10px; }
    .site-header .nav a { padding: 8px 4px; font-size: 13.5px; white-space: nowrap; }
    /* Переключатели тоже ужимаем: место нужно именно им и меню. */
    .site-header .lang-pill { padding: 6px 8px; }
}
@media (min-width: 1421px) {
    .site-header .nav { flex-wrap: nowrap; }
    .site-header .nav a { white-space: nowrap; }
}
/* Меню НЕ прячем до 1080: опыт показал, что ужатое оно занимает 584px и
   укладывается в одну строку на 1088, 1188 и 1268 без переполнения.
   Сначала я спрятал его на всех ширинах до 1280 — это было решение на
   глаз, и оно лишало ноутбук нормальной навигации без всякой нужды.
   Ниже 1080 меню по-прежнему уходит в панель: там ужимать уже некуда. */
@media (min-width: 1081px) and (max-width: 1280px) {
    .site-header .nav { display: flex; flex-wrap: nowrap; gap: 4px; margin-left: 8px; }
    .site-header .nav a { padding: 8px 4px; font-size: 13.5px; white-space: nowrap; }
}

/* Блок переключателей в шапке умеет сжиматься.
   Замер: на 1428 он упирался правым краем в 1433 и давал +5px. Причина —
   display: flex без min-width: 0 и без переноса: блок держит свою ширину и
   выталкивает соседей. Всплыло после запрета переноса меню: места стало
   меньше, и упёрлось то, что раньше «спасалось» переносом строки. */
.site-header .controls { min-width: 0; flex-wrap: nowrap; }
.site-header .controls > * { min-width: 0; }
@media (min-width: 1081px) and (max-width: 1460px) {
    /* Имя пользователя — первое, чем можно пожертвовать: оно длиннее всех
       и не несёт действия, в отличие от кнопки выхода.
       Классы взяты из РАЗМЕТКИ, а не по памяти: обычный вошедший — это
       ссылка .btn.btn-ghost, служебный — .adm-me с именем в .adm-me-name.
       Прежняя редакция целилась в .user-pill, которого в разметке нет
       вовсе: правило было мёртвым и ничего не сжимало. */
    .site-header .controls .adm-me-name,
    .site-header .controls > .btn-ghost {
        max-width: 132px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .site-header .controls .adm-me-name b,
    .site-header .controls .adm-me-name small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* === Загрузки: витрина по мокапу ================================== */
.dls { display: grid; gap: 18px; }
.dls-head { display: flex; align-items: center; gap: 16px; }
.dls-head-ico { width: 56px; height: 56px; border-radius: 16px; }
.dls-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.dls-sub { margin: 4px 0 0; color: var(--muted); }
.dls-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
/* Нижний ряд тянется под категориями и центром, правая колонка — на обе строки. */
.dls-bottom { grid-column: 1 / 3; }
.dls-side { grid-column: 3; grid-row: 1 / span 2; }
.dls-card-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; padding-left: 12px;
    border-left: 3px solid var(--accent); }
.dls-cats { display: grid; gap: 4px; }
.dls-cat { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 10px;
    padding: 10px 10px; border-radius: 12px; color: var(--text); text-decoration: none; }
.dls-cat svg { width: 19px; height: 19px; color: var(--muted); }
.dls-cat b { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--hover);
    border-radius: 8px; padding: 2px 8px; }
.dls-cat:hover { background: var(--hover); }
.dls-cat.is-on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-glow); }
.dls-cat.is-on svg { color: var(--accent); }
.dls-main { display: grid; gap: 18px; min-width: 0; }
.dls-hero { display: grid; gap: 18px; }
.dls-hero-top { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 16px; align-items: center; }
.dls-hero-ico { width: 64px; height: 64px; border-radius: 16px; }
.dls-hero-ico svg { width: 30px; height: 30px; }
.dls-hero-name h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em;
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dls-hero-name p { margin: 4px 0 0; color: var(--muted); }
.dls-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-soft); white-space: nowrap; }
.dls-chip svg { width: 13px; height: 13px; }
.dls-chip.is-ok { color: #22c08a; background: rgba(34, 192, 138, .13); }
/* Галерея на всю ширину карточки, под ней описание и плитки. */
.dls-hero-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dls-shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2);
    aspect-ratio: 16 / 9; }
.dls-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.dls-shot-none { display: grid; place-items: center; height: 100%; color: var(--muted); }
.dls-hero-info { display: grid; gap: 14px; align-content: start; min-width: 0; }
.dls-lead { margin: 0; line-height: 1.55; }
.dls-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dls-lead { max-width: 78ch; }
.dls-spec { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 10px; align-items: center;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); }
.dls-spec svg { width: 20px; height: 20px; color: var(--accent); }
.dls-spec small { display: block; font-size: 11.5px; color: var(--muted); }
.dls-spec b { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.dls-spec.is-ok b { color: #22c08a; }
.dls-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.dls-actions .btn svg { width: 18px; height: 18px; }
/* Выбор ОС у кнопки «Скачать»: платформы строкой, выбранная — в рамке
   акцента; «готовится» — пунктиром, чтобы состояние читалось не одним цветом. */
.dlp-os { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 0 0 4px; padding: 0; border: 0; min-width: 0; }
.dlp-opt { position: relative; display: grid; gap: 2px; min-width: 150px; padding: 10px 16px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--hover); cursor: pointer;
    text-align: left; transition: border-color .15s, background-color .15s; }
.dlp-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.dlp-opt b { font-size: 14px; font-weight: 600; }
.dlp-opt small { font-size: 12px; color: var(--muted); }
.dlp-opt:hover { border-color: var(--accent); }
.dlp-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent); }
.dlp-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dlp-opt.is-soon { cursor: default; border-style: dashed; background: transparent; }
.dlp-opt.is-soon:hover { border-color: var(--border); }
.dlp-opt.is-soon b { color: var(--muted); }
.dlp-mine { position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); }
.dlp-note { flex: 1 1 100%; margin: 0; text-align: center; font-size: 13px; color: var(--muted); }
.dl-hero-cta .dlp-os { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dls-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.dls-box { display: grid; gap: 12px; align-content: start; }
.dls-box-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.dls-box-title svg { width: 19px; height: 19px; color: var(--accent); }
.dls-box-link { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px; }
.dls-box-link svg { width: 13px; height: 13px; }
.dls-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dls-feats li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; font-size: 13px; line-height: 1.45; }
.dls-feats svg { width: 16px; height: 16px; color: var(--accent); margin-top: 1px; }
.dls-req { margin: 0; display: grid; gap: 10px; }
.dls-req div { display: grid; grid-template-columns: 18px 110px minmax(0,1fr); gap: 10px; align-items: start; font-size: 13px; }
.dls-req svg { width: 16px; height: 16px; color: var(--muted); margin-top: 1px; }
.dls-req dt { color: var(--muted); }
.dls-req dd { margin: 0; overflow-wrap: anywhere; }
.dls-ver { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; display: grid; gap: 6px; }
.dls-ver-head { display: flex; align-items: center; gap: 10px; }
.dls-ver-head small { margin-left: auto; color: var(--muted); font-size: 12px; }
.dls-ver ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: grid; gap: 2px; }
.dls-side { display: grid; gap: 18px; min-width: 0; }
.dls-search { position: relative; padding: 10px; }
.dls-search-ico { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
.dls-search-ico svg { width: 17px; height: 17px; }
.dls-search .input { width: 100%; padding-left: 42px; }
.dls-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dls-stat { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--hover); }
.dls-stat svg { width: 22px; height: 22px; color: var(--accent); }
.dls-stat b { font-size: 19px; font-weight: 800; }
.dls-stat small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.dls-pop { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: center;
    padding: 8px 4px; color: var(--text); text-decoration: none; border-radius: 12px; }
.dls-pop:hover { background: var(--hover); }
.dls-pop .tile { width: 40px; height: 40px; border-radius: 11px; }
.dls-pop b { display: block; font-size: 13.5px; }
.dls-pop small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dls-pop em { font-style: normal; font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.dls-pop em svg { width: 14px; height: 14px; }
.dls-more { display: grid; gap: 6px; }
@media (max-width: 1180px) {
    .dls-grid { grid-template-columns: minmax(0, 1fr); }
    .dls-bottom, .dls-side { grid-column: auto; grid-row: auto; }
    .dls-cats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .dls-cats .dls-card-title { grid-column: 1 / -1; }
    .dls-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .dls-hero-top { grid-template-columns: 52px minmax(0,1fr); }
    .dls-hero-top > .dls-chip { grid-column: 1 / -1; justify-self: start; }
    .dls-hero-body { grid-template-columns: minmax(0, 1fr); }
    .dls-specs { grid-template-columns: minmax(0, 1fr); }
    .dls-req div { grid-template-columns: 18px minmax(0,1fr); }
    .dls-req dd { grid-column: 2; }
    .dls-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* === Загрузки: галерея скриншотов (карусель + просмотр) ============= */
.dlg { display: grid; gap: 10px; }
.dlg-stage { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
    background: var(--surface-2); }
.dlg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain; }
.dlg-track::-webkit-scrollbar { display: none; }
.dlg-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 16 / 9; }
.dlg-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.dlg-open img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dlg-open:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.dlg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; border: 1px solid var(--border); color: var(--text);
    background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(6px);
    cursor: pointer; opacity: .9; }
.dlg-nav:hover { opacity: 1; border-color: var(--accent); }
.dlg-nav:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dlg-nav svg, .dlg-box-nav svg, .dlg-box-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dlg-prev { left: 14px; }
.dlg-next { right: 14px; }
.dlg-count { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(8, 10, 20, .62);
    font-variant-numeric: tabular-nums; pointer-events: none; }
.dlg-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.dlg-thumb { flex: 0 0 auto; width: 116px; aspect-ratio: 16 / 9; padding: 0; border-radius: 9px; overflow: hidden;
    border: 2px solid transparent; background: var(--surface-2); cursor: pointer; opacity: .6;
    transition: opacity .15s ease, border-color .15s ease; }
.dlg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dlg-thumb:hover { opacity: .9; }
.dlg-thumb.is-on { opacity: 1; border-color: var(--accent); }
.dlg-thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.dlg-lock { overflow: hidden; }
.dlg-box { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: transparent; color: #fff; display: none; }
.dlg-box[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.dlg-box::backdrop { background: rgba(4, 6, 14, .9); backdrop-filter: blur(4px); }
.dlg-box-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.dlg-box-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .85; }
.dlg-box-close, .dlg-box-nav { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.dlg-box-close:hover, .dlg-box-nav:hover { background: rgba(255, 255, 255, .18); }
.dlg-box-close:focus-visible, .dlg-box-nav:focus-visible, .dlg-box-thumb:focus-visible {
    outline: 3px solid var(--accent-2, #50d3db); outline-offset: 2px; }
.dlg-box-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
    padding: 0 20px; min-height: 0; overflow: hidden; }
/* Высота картинки задана от экрана явно: у ячейки сетки нет определённой
   высоты, и max-height: 100% не срабатывал — кадр выходил в ленту миниатюр. */
.dlg-box-img { justify-self: center; max-width: 100%; max-height: calc(100vh - 180px);
    max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55); user-select: none; touch-action: pan-y; }
.dlg-box-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 18px; justify-content: safe center; }
.dlg-box-thumb { flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 9; padding: 0; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; background: rgba(255, 255, 255, .06); cursor: pointer; opacity: .5; }
.dlg-box-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dlg-box-thumb.is-on { opacity: 1; border-color: #fff; }
@media (max-width: 760px) {
    .dlg-nav { width: 38px; height: 38px; }
    .dlg-thumb { width: 88px; }
    .dlg-box-stage { grid-template-columns: minmax(0, 1fr); padding: 0 10px; }
    .dlg-box-nav { display: none; }
    .dlg-box-thumbs { padding: 10px; }
    .dlg-box-img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); }
}
@media (prefers-reduced-motion: reduce) {
    .dlg-thumb { transition: none; }
}

@media (max-width: 1180px) and (min-width: 761px) {
    .dls-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Кнопка «пауза/пуск» самопрокрутки — в левом нижнем углу кадра. */
.dlg-play { position: absolute; left: 14px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; border: 0; color: #fff; background: rgba(8, 10, 20, .62); cursor: pointer; }
.dlg-play:hover { background: rgba(8, 10, 20, .8); }
.dlg-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.dlg-play svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round; }
.dlg-play .dlg-ico-play { fill: currentColor; stroke-width: 1.5; }
.dlg-play .dlg-ico-play, .dlg-play.is-stopped .dlg-ico-pause { display: none; }
.dlg-play.is-stopped .dlg-ico-play { display: block; }

/* --- Шапка карточки файла: выбор системы В ЛИНИЮ ------------------------
   Столбцом четыре платформы съедали правую колонку по вертикали и рядом с
   ними оставалось пустое место: заголовок сверху, под ним воздух, справа
   узкая башня кнопок. В линию они читаются как один выбор, а кнопка
   «Скачать» встаёт на край строки — туда, куда и тянется рука.

   Ширина берётся не у правой колонки, а у всей карточки: шапка становится
   двухколонной (значок и текст), а выбор с кнопкой уходит отдельной
   строкой под ними. */
@media (min-width: 900px) {
    .dl-hero { grid-template-columns: 84px minmax(0, 1fr); }
    .dl-hero-cta {
        grid-column: 2; display: flex; flex-wrap: wrap; align-items: center;
        gap: 12px 16px; margin-top: 6px; padding-top: 16px;
        border-top: 1px solid var(--border);
    }
    .dl-hero-cta .dlp-os {
        flex: 1 1 auto; flex-direction: row; flex-wrap: wrap;
        justify-content: flex-start; align-items: stretch; margin: 0;
    }
    .dl-hero-cta .dlp-opt { min-width: 138px; }
    /* Кнопка и счётчик — к правому краю строки, отдельной группой. */
    .dl-hero-cta > .btn, .dl-hero-cta > .mod-status { margin-left: auto; }
    .dl-hero-cta .dl-row-count { text-align: center; }
    .dl-hero-cta .dlp-note { flex-basis: 100%; text-align: left; }
}

/* ==========================================================================
   Почта — три колонки во весь экран
   Геометрия общая для обеих тем; цвета берутся токенами, поэтому светлая
   тема получается из этого же кода, а не из второй его копии.
   ========================================================================== */

body.is-mail main.wrap {
    max-width: none;
    width: 100%;
    padding: 14px 18px 18px;
}
body.is-mail .site-footer { display: none; }

/* Девиз и поиск в шапке */
.mail-motto {
    font-size: .78rem;
    line-height: 1.25;
    color: var(--muted);
    margin-left: 18px;
    white-space: nowrap;
}
.adm-search.mail-search input { pointer-events: auto; }

.mail-app {
    display: grid;
    grid-template-columns: 250px minmax(320px, 540px) minmax(360px, 1fr);
    gap: 14px;
    /* Колонки тянутся на всю высоту окна. При align-items:start список
       и чтение кончались по содержимому, и под ними зияло пустое поле
       в пол-экрана — почта выглядела недорисованной. */
    align-items: stretch;
    height: calc(100vh - 118px);
    min-height: 520px;
}
.mail-app > * { min-height: 0; }

/* ---------- Боковая колонка --------------------------------------- */

.mail-side {
    align-self: start;
    max-height: 100%;
    overflow-y: auto;
    background: var(--cab-card-bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 78px;
}
.mail-compose-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), #7b6cff);
    color: #fff;
    font: 600 .95rem/1 var(--font-ui);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px var(--accent-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mail-compose-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--accent-glow); }

.mail-nav { display: flex; flex-direction: column; gap: 2px; }
.mail-mobile-search,.mail-nav-more { display:none; }
.mail-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
    position: relative;
}
.mail-nav-item svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.mail-nav-item:hover { background: var(--hover); }
.mail-nav-item.is-on { background: var(--accent-soft); font-weight: 600; }
.mail-nav-item.is-on svg { color: var(--accent); }
.mail-nav-item.is-on::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}
.mail-nav-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-nav-n {
    font: 600 .75rem/1 var(--font-ui);
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    padding: 4px 7px;
    font-style: normal;
}
.mail-nav-n.is-dim { background: transparent; color: var(--muted); padding: 4px 2px; }
.mail-folder-head { margin-top: 14px; }
.mail-folder-tree .mail-nav-item { padding-left: calc(10px + var(--folder-depth, 0) * 15px); }
.mail-drop-target.is-drop-over { background:var(--accent-soft); outline:2px dashed var(--accent); outline-offset:-2px; }
.mail-item[draggable="true"] { cursor:grab; }
.mail-item.is-dragging { opacity:.55; }
.mail-move-select { width:auto; max-width:156px; min-width:118px; font-size:.78rem; }
.mail-move-submit { flex:none; }

.mail-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 10px;
    font: 700 .7rem/1 var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.mail-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border: 0; border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.mail-mini svg { width: 14px; height: 14px; }
.mail-mini:hover { background: var(--hover); color: var(--text); }
.mail-side-empty { margin: 0 10px; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

.mail-quota { margin-top: auto; padding: 10px; border-top: 1px solid var(--border); }
.mail-quota-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: .78rem; color: var(--muted);
}
.mail-quota-row svg { width: 16px; height: 16px; }
.mail-quota-bar {
    height: 6px; border-radius: 999px; background: var(--hover);
    margin-top: 7px; overflow: hidden;
}
.mail-quota-bar i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.mail-quota-bar i.is-full { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.mail-quota-when { display: block; margin-top: 6px; font-size: .7rem; color: var(--muted); }

/* ---------- Список писем ------------------------------------------ */

.mail-list {
    background: var(--cab-card-bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mail-list-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 10px;
}
.mail-list-head h1 { margin: 0; font-size: 1.25rem; }
.mail-list-count { color: var(--muted); font-size: .8rem; }
.mail-list-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mail-sort .select { padding: 6px 26px 6px 10px; font-size: .8rem; height: auto; }

.mail-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--muted);
    cursor: pointer; text-decoration: none;
}
.mail-icon-btn svg { width: 18px; height: 18px; }
.mail-icon-btn:hover { background: var(--hover); color: var(--text); }

/* Форма — весь низ колонки: строка кнопок, затем письма. */
.mail-bulk { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.mail-bulk-bar {
    display: flex; align-items: center; gap: 2px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.mail-bulk-bar > .mail-check { margin-right: 6px; }

.mail-check { display: inline-flex; align-items: center; cursor: pointer; }
.mail-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.mail-check i {
    width: 16px; height: 16px; border-radius: 5px;
    border: 1.5px solid var(--border);
    display: inline-block; position: relative;
    background: var(--surface-2);
}
.mail-check input:checked + i { background: var(--accent); border-color: var(--accent); }
.mail-check input:checked + i::after {
    content: ""; position: absolute; left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.mail-check input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Меню: открывается нажатием, закрывается нажатием мимо */
.mail-menu { position: relative; display: inline-flex; }
.mail-menu-list {
    display: none;
    position: absolute; top: 100%; left: 0; z-index: 30;
    min-width: 210px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lift);
    padding: 6px;
}
.mail-menu.is-open .mail-menu-list { display: block; }
.mail-menu-item {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px;
    border: 0; border-radius: 8px;
    background: transparent; color: var(--text);
    font: 400 .86rem/1.2 var(--font-ui);
    text-align: left; cursor: pointer;
}
.mail-menu-item svg { width: 16px; height: 16px; color: var(--muted); }
.mail-menu-item:hover { background: var(--hover); }

.mail-items { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mail-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.mail-item:hover { background: var(--hover); }
.mail-item.is-open { background: var(--accent-soft); }
.mail-item.is-open::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent);
}
.mail-item.is-new .mail-item-from,
.mail-item.is-new .mail-item-subj { color: var(--text); font-weight: 700; }
.mail-item.is-new::after {
    content: ""; position: absolute; left: 4px; top: 50%;
    width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: var(--accent-2);
}
.mail-item > .mail-check { margin-top: 4px; }

.mail-ava {
    width: 34px; height: 34px; flex: none;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font: 700 .78rem/1 var(--font-ui);
    color: #fff;
    background: linear-gradient(135deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 40) 70% 42%));
}
.mail-ava.is-big { width: 44px; height: 44px; font-size: .95rem; }

.mail-item-body { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block; }
.mail-item-top { display: flex; align-items: baseline; gap: 8px; }
.mail-item-from {
    font-weight: 600; font-size: .88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-item-when { margin-left: auto; font-size: .74rem; color: var(--muted); flex: none; }
.mail-item-subj {
    display: block; font-size: .86rem; margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-item-prev {
    display: block; font-size: .78rem; color: var(--muted); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-item-marks { display: flex; align-items: center; gap: 4px; flex: none; }
.mail-mark svg { width: 14px; height: 14px; color: var(--muted); }
.mail-star {
    border: 0; background: transparent; cursor: pointer;
    color: var(--border); padding: 2px; line-height: 0;
}
.mail-star svg { width: 16px; height: 16px; }
.mail-star:hover { color: var(--muted); }
.mail-star.is-on { color: #f5b301; }
.mail-star.is-on svg { fill: #f5b301; }

.mail-items.is-dense .mail-item { padding: 7px 12px; }
.mail-items.is-dense .mail-item-prev { display: none; }
.mail-items.is-dense .mail-ava { width: 26px; height: 26px; font-size: .68rem; }

.mail-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 48px 24px; text-align: center; color: var(--muted);
}
.mail-empty svg { width: 34px; height: 34px; opacity: .45; }
.mail-empty b { color: var(--text); font-size: 1rem; }
.mail-empty span { font-size: .84rem; max-width: 34ch; line-height: 1.5; }

.mail-pager {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-top: 1px solid var(--border);
    font-size: .8rem; color: var(--muted);
}

/* ---------- Чтение ------------------------------------------------- */

.mail-read {
    background: var(--cab-card-bg, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex; flex-direction: column;
    overflow: hidden;
    min-height: 420px;
}
.mail-back-list { display:none; }
.mail-read-bar {
    display: flex; align-items: center; gap: 2px;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.mail-read-nav { margin-left: auto; display: flex; gap: 2px; }
.mail-read-body { display: flex; gap: 14px; padding: 16px 18px; overflow-y: auto; flex: 1; }
.mail-read-main { flex: 1; min-width: 0; }
.mail-read-title { display: flex; align-items: flex-start; gap: 12px; }
.mail-read-title h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; flex: 1; }
.mail-read-date { font-size: .76rem; color: var(--muted); flex: none; padding-top: 5px; }

.mail-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.mail-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--accent-soft); color: var(--text);
    font-size: .74rem; border: 1px solid var(--border);
}
.mail-chip svg { width: 13px; height: 13px; }
.mail-chip.is-warn { background: rgba(245, 158, 11, .14); }

.mail-from-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.mail-from-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mail-from-who b { font-size: .95rem; }
.mail-from-addr { font-size: .78rem; color: var(--muted); }
.mail-from-to { font-size: .74rem; color: var(--muted); }

.mail-warn {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 12px;
    background: rgba(245, 158, 11, .1);
    font-size: .82rem;
}
.mail-warn.is-note { background: var(--hover); }
.mail-warn svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.mail-warn .btn { margin-left: auto; padding: 5px 12px; font-size: .78rem; }

.mail-text { margin: 16px 0; font-size: .92rem; line-height: 1.6; overflow-wrap: anywhere; }
.mail-html-frame { display:block; width:100%; min-width:0; height:600px; min-height:160px; border:0; border-radius:8px; background:#fff; }
.mail-text img { max-width: 100%; height: auto; border-radius: 8px; }
.mail-text table { max-width: 100%; }
.mail-text a { color: var(--accent-2); }
.mail-plain { white-space: pre-wrap; font: .88rem/1.6 var(--font-ui); margin: 0; }
img.mail-img-blocked {
    min-width: 40px; min-height: 40px;
    border: 1px dashed var(--border); border-radius: 8px;
    background: var(--hover);
}

.mail-quick {
    display: flex; align-items: center; gap: 10px;
    margin-top: 18px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface-2);
    text-decoration: none;
}
.mail-quick:hover { border-color: var(--accent); }
.mail-quick-ph { flex: 1; color: var(--muted); font-size: .86rem; }
.mail-send-mini {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--accent); color: #fff;
}
.mail-send-mini svg { width: 17px; height: 17px; }

.mail-files { width: 200px; flex: none; }
.mail-files h3 {
    margin: 0 0 8px; font: 700 .7rem/1 var(--font-ui);
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.mail-file {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 10px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-2);
    text-decoration: none; color: inherit;
}
.mail-file:hover { border-color: var(--accent); }
.mail-file-ico {
    grid-row: span 2;
    width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hover); color: var(--muted);
}
.mail-file-ico svg { width: 17px; height: 17px; }
.mail-file-ico.is-pdf { color: #ef4444; background: rgba(239, 68, 68, .12); }
.mail-file-ico.is-img { color: #3b82f6; background: rgba(59, 130, 246, .12); }
.mail-file-ico.is-zip { color: #eab308; background: rgba(234, 179, 8, .12); }
.mail-file-ico.is-exe { color: #a855f7; background: rgba(168, 85, 247, .12); }
.mail-file-name { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-file-size { grid-column: 2; font-size: .72rem; color: var(--muted); }
.mail-file-get { grid-column: 3; grid-row: span 2; color: var(--muted); }
.mail-file-get svg { width: 16px; height: 16px; }

.mail-read.is-empty { align-items: center; justify-content: center; }
.mail-read-none {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; color: var(--muted); padding: 40px;
}
.mail-read-none svg { width: 38px; height: 38px; opacity: .4; }
.mail-read-none b { color: var(--text); font-size: 1.05rem; }
.mail-read-none span { font-size: .85rem; max-width: 32ch; line-height: 1.5; }

/* ---------- Окно письма -------------------------------------------- */

.mail-modal { position: fixed; inset: 0; z-index: 90; display: none; }
.mail-modal.is-open { display: block; }
.mail-modal-back { position: absolute; inset: 0; background: rgba(2, 4, 10, .66); backdrop-filter: blur(3px); }
.mail-modal-win {
    position: relative;
    width: min(920px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    margin: 20px auto 0;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}
.mail-modal.is-small .mail-modal-win { width: min(440px, calc(100vw - 32px)); }
.mail-modal.is-min .mail-modal-body,
.mail-modal.is-min .mail-modal-foot { display: none; }

.mail-modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.mail-modal-head h2 { margin: 0; font-size: 1.15rem; }
.mail-modal-head p { margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
.mail-modal-ico {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.mail-modal-motto {
    margin-left: auto; font-size: .74rem; color: var(--muted);
    text-align: right; line-height: 1.35;
}
.mail-modal-body { padding: 14px 22px; overflow-y: auto; }
.mail-modal-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-top: 1px solid var(--border);
}
.mail-modal-foot .btn-primary { margin-left: 0; }
.mail-secure { display: flex; align-items: center; gap: 8px; margin-right: auto; font-size: .74rem; color: var(--muted); max-width: 30ch; line-height: 1.35; }
.mail-secure svg { width: 16px; height: 16px; color: var(--accent-2); flex: none; }

.mail-field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mail-field.is-hidden { display: none; }
.mail-field > label { width: 74px; flex: none; font-size: .82rem; color: var(--muted); }
.mail-field .input { flex: 1; }
.mail-link {
    border: 0; background: transparent; color: var(--accent-2);
    font-size: .78rem; cursor: pointer; padding: 4px;
}
.mail-link:hover { text-decoration: underline; }

.mail-attach-panel { margin: 14px 0; padding: 12px; border: 1px dashed var(--border); border-radius: 12px; background: color-mix(in srgb,var(--surface-2) 74%,transparent); }
.mail-attach-head { display:flex; align-items:center; gap:8px; min-width:0; color:var(--muted); font-size:.78rem; }
.mail-attach-head>svg { width:17px; height:17px; color:var(--accent); flex:none; }
.mail-attach-head>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-attach-head>small { margin-left:8px; font-size:.68rem; white-space:nowrap; }
.mail-attach-panel .mail-attach-btn { margin-left:auto; }
.mail-editor { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background:var(--surface); }
.mail-editor-bar {
    display: flex; align-items: center; gap: 12px;
    min-height:44px; padding: 0 10px; border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.mail-editor-modes { align-self:stretch; display:inline-flex; align-items:stretch; }
.mail-editor-mode { position:relative; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border:0; background:transparent; color:var(--muted); font:inherit; font-size:.78rem; cursor:pointer; }
.mail-editor-mode::after { content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px; background:transparent; }
.mail-editor-mode.is-active { color:var(--accent); font-weight:700; }
.mail-editor-mode.is-active::after { background:var(--accent); }
.mail-editor-mode:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:8px; }
.mail-editor-mode svg { width: 15px; height: 15px; }
.mail-editor-hint { font-size: .7rem; color: var(--muted); }
.mail-editor-fallback { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.7rem; white-space:nowrap; }
.mail-editor-fallback svg { width:14px; height:14px; color:var(--accent); }
.mail-attach-btn {
    margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px; border-radius: 9px; cursor: pointer;
    font-size: .78rem; color: var(--text); background: var(--hover);
}
.mail-attach-btn svg { width: 15px; height: 15px; color: var(--muted); }
.mail-editor-area {
    width: 100%; border: 0; resize: vertical;
    padding: 14px; min-height: 220px;
    background: transparent; color: var(--text);
    font: .9rem/1.55 var(--font-ui);
}
.mail-editor-area[hidden] { display:none; }
.mail-editor-area:focus { outline: none; }
.mail-editor-count { text-align: right; padding: 4px 12px 8px; font-size: .72rem; color: var(--muted); }
.mail-editor .qf-editor { min-width: 0; max-width: 100%; }
.mail-editor .qf-toolbar { background: transparent; padding: 7px 10px; }
.mail-editor .qf-toolbar button { min-height: 30px; padding: 4px 9px; font-size: .76rem; }
.mail-editor .qf-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.mail-editor .qf-style-picker { min-height:34px; min-width:132px; max-width:170px; padding:4px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:.78rem; cursor:pointer; }
.mail-editor .qf-toolbar .qf-icon-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; min-height:34px; padding:5px; }
.mail-editor .qf-toolbar .qf-icon-button svg { width:17px; height:17px; }
.mail-editor .qf-toolbar .qf-icon-button strong,.mail-editor .qf-toolbar .qf-icon-button em,.mail-editor .qf-toolbar .qf-icon-button u { font-family:Georgia,serif; font-size:1rem; }
.mail-editor .qf-toolbar .qf-preview-button { flex:0 0 auto; width:auto; min-width:34px; gap:6px; margin-left:auto; }
.mail-editor .qf-style-picker:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mail-editor .qf-heading-picker { min-height:34px; width:54px; padding:4px 6px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:.78rem; cursor:pointer; }
.mail-editor .qf-heading-picker:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mail-editor .qf-toolbar .qf-icon-button span[aria-hidden] { font:700 .78rem/1 var(--font-ui); }
.mail-editor .qf-toolbar .qf-source-button { flex:0 0 auto; width:auto; min-width:34px; gap:6px; }
.mail-editor .qf-source { min-height:220px; max-height:360px; margin:0; padding:14px; overflow:auto; color:var(--text); font:.78rem/1.5 monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.mail-editor .qf-source[hidden] { display:none; }
.mail-editor .qf-surface,.mail-editor .qf-preview { color: var(--text); font: .9rem/1.55 var(--font-ui); }

.mail-attached { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top:10px; border-top:1px solid var(--border); }
.mail-attached-one {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 11px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .78rem;
}
.mail-attached-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-attached-remove { flex:none; border:0; border-radius:6px; padding:0 3px; background:transparent; color:var(--muted); font:700 1.1rem/1 var(--font-ui); cursor:pointer; }
.mail-attached-remove:hover,.mail-attached-remove:focus-visible { color:#ef4444; outline:2px solid var(--accent); outline-offset:2px; }
.mail-attached-warn { color: #ef4444; font-size: .78rem; width: 100%; }
.mail-attached-total { margin-left:auto; align-self:center; color:var(--muted); font-size:.72rem; }

.mail-colors { display: flex; gap: 10px; margin-top: 4px; }
.mail-color input { position: absolute; opacity: 0; }
.mail-color i {
    width: 26px; height: 26px; border-radius: 50%; display: inline-block;
    cursor: pointer; border: 2px solid transparent;
}
.mail-color input:checked + i { border-color: var(--text); }

.mail-send.is-busy { opacity: .6; pointer-events: none; }

/* ---------- Ворота: нет ящика, нужен пароль ------------------------- */

.mail-gate {
    max-width: 520px; margin: 40px auto; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.mail-gate h1 { margin: 0; font-size: 1.4rem; }
.mail-gate p { margin: 0; line-height: 1.55; }
.mail-gate-ico {
    width: 56px; height: 56px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
}
.mail-gate-ico svg { width: 26px; height: 26px; }
.mail-gate-form { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.mail-gate-form .input { flex: 1; }
.mail-gate-err { color: #ef4444; font-size: .85rem; }
.mail-gate .hint { font-size: .76rem; max-width: 46ch; }

/* ---------- Узкие экраны -------------------------------------------- */

@media (max-width: 1240px) {
    /* Чтение уезжает под список — значит страница выше окна, и держать
       её ростом в один экран больше нельзя. */
    .mail-app { grid-template-columns: 210px minmax(300px, 1fr); height: auto; }
    .mail-read { grid-column: 1 / -1; }
    .mail-items { max-height: 60vh; }
    .mail-read-body { flex-direction: column; }
    .mail-files { width: auto; }
}
@media (max-width: 860px) {
    body.is-mail main.wrap { padding: 10px; }
    /* На телефоне колонки идут одна под другой, и высота окна больше не
       правит: страница листается целиком, как всё остальное на сайте. */
    .mail-app { grid-template-columns: 1fr; height: auto; }
    .mail-side { position: static; }
    .mail-motto { display: none; }
    .mail-items { max-height: none; }
    .mail-read-body { max-height: none; }
    .mail-modal-win { margin: 12px auto; max-height: calc(100vh - 24px); }
    .mail-modal-motto { display: none; }
    .mail-field { flex-wrap: wrap; }
    .mail-field > label { width: 100%; }
    .mail-editor-bar { flex-wrap: wrap; }
    .mail-editor-hint { flex: 1 1 180px; }
    .mail-editor-fallback { margin:0 0 9px 12px; }
    .mail-attach-head { flex-wrap:wrap; }
    .mail-attach-head>span { flex:1; }
    .mail-attach-head>small { width:100%; margin:0 0 0 25px; }
    .mail-attach-btn { margin-left: 0; }
}
@media (max-width: 520px) {
    .mail-modal-win { width:calc(100vw - 16px); margin:8px auto 0; max-height:calc(100vh - 16px); border-radius:14px; }
    .mail-modal-head,.mail-modal-foot { padding-inline:12px; }
    .mail-modal-body { padding:12px; }
    .mail-editor-hint { display:none; }
    .mail-editor-fallback { width:100%; margin:0 8px 8px; white-space:normal; }
    .mail-editor-modes { width:100%; }
    .mail-editor-mode { flex:1; justify-content:center; min-height:42px; }
    .mail-secure span { display:none; }
}
@media (max-width: 600px) {
    body.is-mail main.wrap { padding:8px 8px 96px; }
    .mail-app { display:flex; flex-direction:column; gap:10px; min-height:0; }
    .mail-side { position:static; max-height:none; overflow:visible; padding:0; border:0; background:transparent; gap:8px; }
    .mail-compose-btn { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:65; width:max-content; min-width:174px; padding:14px 24px; border-radius:999px; box-shadow:0 12px 34px var(--accent-glow); }
    .mail-compose-btn:hover { transform:translateX(-50%) translateY(-1px); }
    .mail-side>.mail-nav { flex-direction:row; gap:8px; overflow-x:auto; padding:2px 1px 6px; scrollbar-width:none; }
    .mail-side>.mail-nav::-webkit-scrollbar { display:none; }
    .mail-side>.mail-nav .mail-nav-item { flex:0 0 auto; min-height:42px; padding:9px 14px; border:1px solid var(--border); border-radius:999px; background:var(--surface); }
    .mail-side>.mail-nav .mail-nav-item.is-on { color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),#7b6cff); box-shadow:0 8px 22px var(--accent-glow); }
    .mail-side>.mail-nav .mail-nav-item.is-on svg { color:#fff; }
    .mail-side>.mail-nav .mail-nav-item.is-on::before { display:none; }
    .mail-side-head,.mail-nav-labels,.mail-side-empty,.mail-quota { display:none!important; }
    .mail-folder-head { display:flex!important; margin:0 4px; padding:4px 8px; }
    .mail-folder-head .mail-mini { width:34px; height:34px; }
    .mail-folder-empty { display:block!important; margin:0 10px; }
    .mail-folder-tree { display:flex!important; }
    .mail-side>.mail-folder-tree .mail-nav-item { padding:9px 14px; }
    .mail-folder-tree .mail-nav-item::after { display:none; }
    .mail-list { border:0; border-radius:0; background:transparent; overflow:visible; }
    .mail-list-head { padding:4px 4px 8px; }
    .mail-list-head h1 { font-size:1.05rem; }
    .mail-list-count { font-size:.72rem; }
    .mail-sort .select { max-width:112px; }
    .mail-bulk-bar { padding:5px 4px 9px; border:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .mail-bulk-bar::-webkit-scrollbar { display:none; }
    .mail-items { display:grid; gap:8px; padding:0; overflow:visible; }
    .mail-item,.mail-items.is-dense .mail-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:start; padding:14px 12px; border:1px solid var(--border); border-radius:14px; background:var(--cab-card-bg,var(--surface)); box-shadow:0 5px 18px rgba(0,0,0,.16); }
    .mail-item:hover { background:var(--surface); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); }
    .mail-item.is-open { background:var(--accent-soft); }
    .mail-item.is-open::before { display:none; }
    .mail-item.is-new::after { left:5px; top:31px; width:7px; height:7px; }
    .mail-item>.mail-check { display:none; }
    .mail-item .mail-ava,.mail-items.is-dense .mail-ava { width:42px; height:42px; font-size:.78rem; }
    .mail-item-from { font-size:.86rem; }
    .mail-item-subj { font-size:.84rem; }
    .mail-item-prev,.mail-items.is-dense .mail-item-prev { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; line-height:1.35; overflow:hidden; }
    .mail-item-marks { grid-column:3; grid-row:1; padding-top:20px; }
    .mail-read { min-height:0; border-radius:14px; }
    .mail-read.is-empty { display:none; }
    .mail-read-body { padding:14px; }
    .mail-read-title { flex-direction:column; gap:4px; }
    .mail-read-date { padding:0; }
    .mail-modal { background:var(--surface); }
    .mail-modal-back { display:none; }
    .mail-modal-win { height:calc(100dvh - 16px); }
    .mail-modal-body { flex:1; }
    .mail-modal-foot { position:sticky; bottom:0; background:var(--surface); }
    .mail-modal-foot .btn { min-height:48px; }
    .mail-modal-foot .mail-send { min-width:132px; margin-left:auto; }
    .mail-field { gap:7px; }
    .mail-field .input { width:100%; min-width:0; }
    .mail-link { margin-left:auto; }
    .mail-attach-panel { margin:12px 0; }
    .mail-attach-panel .mail-attached-one { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mail-editor .qf-toolbar { display:flex; flex-wrap:wrap; gap:6px; }
    .mail-editor .qf-style-picker { min-width:110px; flex:1 1 110px; }
    .mail-editor .qf-toolbar .qf-icon-button { flex:0 0 34px; width:34px; min-width:34px; }
    .mail-editor .qf-toolbar .qf-preview-button { flex:0 0 auto; width:auto; }
    .mail-editor .qf-toolbar .qf-source-button { flex:0 0 auto; width:auto; }
    .mail-editor .qf-surface,.mail-editor .qf-preview,.mail-editor-area { min-height:260px; }
}

/* ==========================================================================
   Админка почты — раскладка по макету: слева люди, справа место и покупки
   ========================================================================== */

.adm-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }

.adm-filters {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 12px;
}
.adm-find { position: relative; display: inline-flex; align-items: center; flex: 1; min-width: 180px; }
.adm-find svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); }
.adm-find .input { padding-left: 34px; width: 100%; }
.adm-filters .select { max-width: 11rem; }

/* «Добавить доступ»: кнопка раскрывает форму, а не ведёт в пустоту. */
.adm-add { margin-bottom: 12px; }
.adm-add > summary { list-style: none; cursor: pointer; display: inline-flex; gap: 7px; }
.adm-add > summary::-webkit-details-marker { display: none; }
.adm-add-form {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--hover);
}
.adm-add-form .input { max-width: 16rem; }

/* Наименьшая ширина обязательна. Без неё таблица в узкой колонке
   сжимается до одного знака в строке: имя встаёт столбиком по букве, и
   прокрутки нет — сжимать-то ещё можно. Пусть лучше прокрутка. */
.adm-table-wrap { overflow-x: auto; }
.adm-table-wrap > table { min-width: 420px; }
.adm-table-wrap > table.is-people { min-width: 560px; }
.adm-table-wrap > table.is-quota { min-width: 480px; }
.adm-table.is-quota td:first-child { width: 42%; }
.adm-table td { overflow-wrap: anywhere; }
.adm-who { display: inline-flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.adm-who b { white-space: nowrap; }
.adm-who small {
    font-size: 11px; max-width: 12em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Адрес длиннее колонки обрезаем многоточием, а не ломаем по буквам:
   «aleksandrs@quasargen.com» столбиком читать невозможно. */
.adm-mailaddr {
    display: inline-block; max-width: 22ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom; font-weight: 600;
}
/* В таблице места адрес переносится, а не обрезается: «admin@…» не
   отличить от «admin@другой-домен», а разные домены тут соседствуют. */
.adm-table.is-quota .adm-mailaddr {
    max-width: none; white-space: normal; overflow-wrap: anywhere;
}
.adm-table.is-quota .adm-cell { align-items: flex-start; }
.adm-fill { display: flex; align-items: center; gap: 8px; }
.adm-fill small { font-size: 11px; min-width: 3.2em; }
.adm-fill small.is-ok { color: #10a060; }
.adm-fill small.is-mid { color: #3b82f6; }
.adm-fill small.is-warn { color: #d98207; }
.adm-fill small.is-dim { color: var(--muted); }
.adm-ava {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    font: 700 .78rem/1 var(--font-ui); overflow: hidden;
}
.adm-ava img { width: 100%; height: 100%; object-fit: cover; }
.adm-acts { display: flex; align-items: center; gap: 10px; }

.adm-chip.is-ok   { background: rgba(16, 160, 96, .13); color: #10a060; }
.adm-chip.is-no   { background: rgba(239, 68, 68, .13); color: #ef4444; }
.adm-chip.is-warn { background: rgba(245, 158, 11, .15); color: #d98207; }
.adm-chip.is-mid  { background: rgba(59, 130, 246, .13); color: #3b82f6; }
.adm-chip.is-dim  { background: var(--hover); color: var(--muted); }

.adm-bar {
    width: 110px; height: 6px; border-radius: 999px;
    background: var(--hover); overflow: hidden;
}
.adm-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.adm-bar i.is-ok   { background: linear-gradient(90deg, var(--accent-2), #10a060); }
.adm-bar i.is-mid  { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.adm-bar i.is-warn { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.adm-bar i.is-dim  { background: var(--border); }

.adm-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-top: 10px;
    font-size: 12px; color: var(--muted);
}
.adm-pages { display: inline-flex; gap: 4px; }
.adm-page {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; padding: 0 7px;
    border: 1px solid var(--border); border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 12px;
}
.adm-page svg { width: 14px; height: 14px; }
.adm-page:hover { background: var(--hover); }
.adm-page.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 1100px) {
    .adm-bar { width: 70px; }
}

/* ==========================================================================
   Четыре опоры на главной: крупные карточки, связанные цепочкой
   ========================================================================== */

.lp-power .lp-chain {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    position: relative;
}
/* Цепочка: линия за карточками. Не украшение — она и говорит, что это
   одно целое, а не четыре разных предложения. */
.lp-power .lp-chain::before {
    content: "";
    position: absolute;
    left: 8%; right: 8%; top: 46px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), var(--accent-glow), transparent);
    opacity: .5;
    z-index: 0;
}
.lp-power .lp-chain > .card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lp-power .lp-chain > .card:hover,
.lp-power .lp-chain > .card:focus-within {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lift);
}
.lp-power .lp-chain > .card .tile {
    width: 46px; height: 46px;
    align-self: flex-start;
}
.lp-power .lp-chain > .card .card-title {
    font-size: 1.12rem;
    line-height: 1.3;
    margin: 0;
}
.cap-lead {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

/* Список раскрывается при наведении. На устройстве без мышки (телефон,
   планшет) он показан сразу: прятать его там, где навести нечем, значит
   прятать от половины людей. */
/* Две строки видны всегда, остальные раскрываются наведением. Карточка,
   пустая до наведения, не показывает ничего тому, кто не навёл, — а
   первый экран обязан показывать, а не намекать. */
.cap-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
    max-height: 5.6em;
    overflow: hidden;
    transition: max-height .3s ease;
}
.lp-power .card:hover .cap-list,
.lp-power .card:focus-within .cap-list { max-height: 340px; }
.cap-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .84rem;
    line-height: 1.4;
}
.cap-list svg { width: 15px; height: 15px; flex: none; color: var(--accent-2); margin-top: 2px; }
.cap-list .mod-status {
    font-size: .66rem;
    font-style: normal;
    white-space: nowrap;
    align-self: center;
}

.cap-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: .86rem;
}
.cap-cta svg { width: 16px; height: 16px; }
.cap-cta:hover { box-shadow: 0 8px 22px var(--accent-glow); }
.cap-cta.is-ghost {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
}
.cap-cta.is-ghost:hover { border-color: var(--accent); box-shadow: none; }

.lp-chain-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
    max-width: 62ch;
    text-align: center;
    color: var(--muted);
    font-size: .86rem;
}
.lp-chain-note svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

@media (hover: none) {
    /* Навести нечем — показываем весь список сразу. */
    .cap-list { max-height: none; overflow: visible; }
}
@media (max-width: 1100px) {
    .lp-power .lp-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-power .lp-chain::before { display: none; }
}
@media (max-width: 620px) {
    .lp-power .lp-chain { grid-template-columns: minmax(0, 1fr); }
    .cap-list { max-height: none; overflow: visible; }
}

/* Суммы сборок на странице загрузки: по строке на систему. */
.dl-sha-row { display: grid; gap: 3px; margin-bottom: 10px; }
.dl-sha-row b { font-size: .78rem; color: var(--muted); }
.dl-sha-how { margin: 8px 0 0; font-size: .72rem; line-height: 1.5; }

/* Предупреждение о подписи у переключателя систем.
   Во всю ширину строки: флекс-ряд кнопок иначе сжимал его в столбик из
   одного слова — так на карточке терминала и вышло. */
.dlp-warn {
    flex-basis: 100%;
    width: 100%;
    order: 10;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 4px 0 0;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--hover);
    font-size: .8rem;
    line-height: 1.5;
    color: var(--muted);
}
.dlp-warn[hidden] { display: none; }
.dlp-warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent-2); }
.dlp-warn a { color: var(--accent-2); white-space: nowrap; }

/* ==========================================================================
   Quasar Messenger — страница замысла и дорожной карты
   ========================================================================== */

.msg-hero {
    max-width: 860px;
    margin: 8px auto 26px;
    text-align: center;
    display: grid;
    gap: 14px;
    justify-items: center;
}
.msg-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font: 700 .72rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.msg-kicker svg { width: 15px; height: 15px; }
.msg-title { margin: 0; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.05; }
.msg-motto { margin: 0; color: var(--accent-2); font-size: 1rem; letter-spacing: .02em; }
.msg-lead { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.6; }
.msg-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.msg-chip {
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .78rem; color: var(--text);
}
.msg-state {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 4px 0 0; padding: 9px 16px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--hover); font-size: .85rem;
}
.msg-state svg { width: 17px; height: 17px; color: var(--accent); }

.msg-body h2 { margin-top: 26px; }
.msg-body ol { padding-left: 22px; line-height: 1.7; }

/* Дорожная карта: этап — карточка, пункт — строка со знаком состояния. */
.msg-roadmap { margin-top: 26px; }
.msg-stages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 14px;
}
.msg-stage {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--cab-card-bg, var(--surface));
    padding: 16px 18px;
}
.msg-stage.is-done { border-color: rgba(16, 160, 96, .5); }
.msg-stage header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.msg-stage h3 { margin: 0; font-size: 1rem; flex: 1; }
.msg-stage-count {
    font: 700 .74rem/1 var(--font-mono); color: var(--muted);
    padding: 4px 8px; border-radius: 999px; background: var(--hover);
}
.msg-stage.is-done .msg-stage-count { color: #10a060; }
.msg-stage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.msg-stage li { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; line-height: 1.45; }
.msg-stage li svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.msg-stage li.is-done svg { color: #10a060; }
.msg-stage li.is-open { color: var(--muted); }
.msg-stage li.is-progress svg { color: #e9b949; }
.msg-stage li.is-open svg { color: var(--border); }

.msg-nodates {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 18px auto 0; max-width: 78ch;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--hover); color: var(--muted); font-size: .82rem; line-height: 1.55;
}
.msg-nodates svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }

/* Готовый продукт на первом экране: имя, строка и живая версия. */
.lp-product {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
    margin: 2px 0 4px; padding: 12px 16px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--hover);
}
.lp-product b { font-size: 1.02rem; }
.lp-product span { color: var(--muted); font-size: .9rem; }
.lp-product-ver {
    font-style: normal; font-size: .78rem; font-weight: 700;
    color: #10a060; background: rgba(16, 160, 96, .13);
    padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
/* Новые состояния проектов в списке «сейчас в разработке». */
.mod-status.is-released { background: rgba(16, 160, 96, .14); color: #10a060; }
.mod-status.is-start { background: rgba(96, 87, 240, .14); color: var(--accent); }
.mod-status.is-research { background: rgba(168, 85, 247, .14); color: #a855f7; }
.mod-status.is-part { background: var(--hover); color: var(--muted); }

/* ======================================================================
   Страница «О Quasar» — манифест экосистемы.
   Своя вёрстка, а не «белый документ с содержанием справа»: та хороша
   для соглашений и документации, но здесь страница должна отвечать на
   вопрос «зачем существует Quasar», а не листаться как справка.
   Тёмная полоса манифеста задана своими цветами, а не токенами темы:
   она обязана остаться тёмной и в светлой теме.
   ====================================================================== */

.ab-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* Колонка сетки обязана быть minmax(0, 1fr), а не «auto»: иначе её
   ширину задаёт самый широкий потомок по min-content, и на узком
   экране карточки выезжают за край вместе со всей страницей. */
.ab-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; min-width: 0; }

/* Содержание сбоку — только там, где для него есть место. На узком
   экране закреплённая колонка съедает половину ширины текста. */
.ab-rail { display: none; }
@media (min-width: 1280px) {
    .ab-page { grid-template-columns: 190px minmax(0, 1fr); gap: 34px; }
    .ab-rail {
        display: block; position: sticky; top: 92px; align-self: start;
        border-left: 1px solid var(--border); padding: 2px 0;
    }
    .ab-rail-item {
        display: block; padding: 7px 14px; margin-left: -1px;
        border-left: 2px solid transparent;
        color: var(--muted); font-size: .82rem; line-height: 1.35;
    }
    .ab-rail-item:hover { color: var(--text); border-left-color: var(--accent); }
}

/* --- Первый экран --- */
.ab-hero { display: grid; gap: 16px; padding: 10px 0 4px; }
/* Метка-плашка и пункты содержания — не текст-ссылка: в сетке плашка
   растягивалась во всю ширину, а подчёркивание превращало боковое
   содержание в столбик подчёркнутых строк. */
.ab-hero .lp-kicker { justify-self: start; }
.ab-rail-item { text-decoration: none; }
.ab-title { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; max-width: 18ch; }
.ab-sub { margin: 0; font-size: clamp(1rem, 1.6vw, 1.22rem); color: var(--accent-2); max-width: 60ch; }
.ab-lead { display: grid; gap: 12px; max-width: 74ch; }
.ab-lead p { margin: 0; color: var(--muted); line-height: 1.7; }

/* min(…, 100%) обязателен: без него колонка шириной 250px шире
   самого экрана в 308 точек, и страница уезжает вбок. */
.ab-cards {
    display: grid; gap: 14px; margin-top: 10px;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.ab-card {
    display: grid; gap: 9px; align-content: start;
    padding: 20px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    transition: border-color .2s, transform .2s;
}
.ab-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ab-card, .ab-link { text-decoration: none; }
.ab-card:hover .ab-card-title, .ab-link:hover span { text-decoration: none; }
.ab-card-ico {
    display: grid; place-items: center; width: 38px; height: 38px;
    border-radius: 11px; background: var(--accent-soft); color: var(--accent);
}
.ab-card-ico svg { width: 20px; height: 20px; }
.ab-card-title { font-size: 1.05rem; }
.ab-card-text { color: var(--muted); font-size: .88rem; line-height: 1.55; }
.ab-card .mod-status { justify-self: start; margin-top: 2px; }

/* --- Тёмная полоса манифеста --- */
.ab-manifest {
    padding: clamp(24px, 4vw, 44px);
    border-radius: calc(var(--radius) + 6px);
    border: 1px solid rgba(120, 130, 190, .22);
    background:
        radial-gradient(700px 320px at 12% 0%, rgba(96, 87, 240, .26), transparent 64%),
        radial-gradient(520px 280px at 92% 18%, rgba(80, 211, 219, .14), transparent 66%),
        linear-gradient(160deg, #080c18 0%, #0c1227 100%);
    color: #eef0f8;
}
.ab-manifest .lp-tag { color: rgba(238, 240, 248, .55); }
.ab-manifest-title { margin: 0 0 16px; font-size: clamp(1.5rem, 3vw, 2.15rem); line-height: 1.15; }
.ab-manifest > p { margin: 0 0 12px; max-width: 78ch; color: rgba(238, 240, 248, .74); line-height: 1.72; }
.ab-principles {
    display: grid; gap: 14px; margin-top: 26px;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.ab-pr {
    display: grid; gap: 8px; align-content: start;
    padding: 18px; border-radius: 14px;
    border: 1px solid rgba(160, 170, 220, .16);
    background: rgba(255, 255, 255, .04);
}
.ab-pr-ico {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; background: rgba(96, 87, 240, .22); color: #b9b4ff;
}
.ab-pr-ico svg { width: 18px; height: 18px; }
.ab-pr b { font-size: .98rem; }
.ab-pr span:last-child { color: rgba(238, 240, 248, .66); font-size: .85rem; line-height: 1.6; }

/* --- Разделы и продуктовые полосы --- */
.ab-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ab-block .lp-section-head { margin-bottom: 4px; }
.ab-line {
    display: grid; gap: 12px;
    padding: 22px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
    border-left: 3px solid var(--accent);
}
.ab-line-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ab-line-head h3 { margin: 0; font-size: 1.15rem; flex: 1 1 auto; }
.ab-line-ico {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; background: var(--accent-soft); color: var(--accent);
}
.ab-line-ico svg { width: 18px; height: 18px; }
.ab-line p { margin: 0; color: var(--muted); line-height: 1.7; max-width: 82ch; }
.ab-line .btn { justify-self: start; }
.ab-parts-title { font-weight: 700; color: var(--text) !important; }
.ab-parts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-parts li {
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface-2);
    font-size: .8rem;
}
.ab-state {
    display: inline-flex; align-items: center; gap: 9px; justify-self: start;
    padding: 9px 15px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--hover); font-size: .85rem; color: var(--text) !important;
}
.ab-state svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* --- Схема связей: корень, три ветви, общее основание --- */
.ab-map {
    display: grid; gap: 0; justify-items: center;
    padding: 24px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
}
.ab-map-root {
    padding: 10px 26px; border-radius: 999px;
    background: var(--accent-soft); border: 1px solid var(--accent);
    color: var(--accent); font-weight: 700; letter-spacing: .04em;
}
.ab-map-branches {
    display: grid; gap: 14px; width: 100%; margin: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    padding-top: 26px; position: relative;
}
/* Ветви: одна вертикаль от корня и «расчёска» к узлам. На узком экране
   линии выключены — там карточки идут столбиком, и рисовать связь
   поперёк пустоты значит рисовать неправду. */
.ab-map-branches::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 26px;
    background: var(--border);
}
.ab-node {
    display: grid; gap: 4px; justify-items: center; text-align: center;
    padding: 16px 14px; border: 1px solid var(--border);
    border-radius: 14px; background: var(--surface-2); position: relative;
}
.ab-node-ico { color: var(--accent); }
.ab-node-ico svg { width: 20px; height: 20px; }
.ab-node b { font-size: .92rem; }
.ab-node span:last-child { color: var(--muted); font-size: .8rem; }
.ab-map-base {
    display: grid; gap: 3px; justify-items: center; text-align: center;
    width: 100%; margin-top: 26px; padding: 14px;
    border: 1px dashed var(--border); border-radius: 14px;
    background: var(--hover); position: relative;
}
.ab-map-base::before {
    content: ""; position: absolute; top: -26px; left: 50%; width: 1px; height: 26px;
    background: var(--border);
}
.ab-map-base span { color: var(--muted); font-size: .82rem; }
@media (min-width: 720px) {
    .ab-map-branches > .ab-node::before {
        content: ""; position: absolute; top: -26px; left: 50%; width: 1px; height: 26px;
        background: var(--border);
    }
}

.ab-note { display: grid; gap: 12px; }
.ab-note p { margin: 0; color: var(--muted); line-height: 1.72; max-width: 82ch; }

/* --- Последовательность этапов --- */
.ab-two { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
@media (max-width: 860px) { .ab-two { grid-template-columns: minmax(0, 1fr); } }
.ab-steps {
    counter-reset: ab-step; list-style: none; margin: 0; padding: 0;
    display: grid; gap: 8px; align-content: start;
}
.ab-steps li {
    counter-increment: ab-step;
    display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 12px;
    padding: 11px 14px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface); font-size: .9rem;
}
.ab-steps li::before {
    content: counter(ab-step);
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: .8rem;
}

/* --- Публичность и закрытость --- */
.ab-open { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
@media (max-width: 860px) { .ab-open { grid-template-columns: minmax(0, 1fr); } }
.ab-open-col { display: grid; gap: 12px; align-content: start; }
.ab-open-col p { margin: 0; color: var(--muted); line-height: 1.72; }
.ab-open-key {
    display: grid; gap: 12px; align-content: start;
    padding: 20px; border-radius: var(--radius);
    border: 1px solid var(--accent); background: var(--accent-soft);
}
.ab-open-key svg { width: 26px; height: 26px; color: var(--accent); }
.ab-open-key p { margin: 0; line-height: 1.68; }

/* --- Ссылки сообщества --- */
.ab-links { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.ab-link {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface); color: var(--text);
}
.ab-link:hover { border-color: var(--accent); }
.ab-link svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.ab-link span { flex: 1 1 auto; font-size: .92rem; }
.ab-link svg:last-child { color: var(--muted); }

/* --- Итог --- */
.ab-end {
    display: grid; gap: 14px; justify-items: center; text-align: center;
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px);
    background: var(--section-bg);
}
.ab-end h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.2; max-width: 32ch; }
.ab-end p { margin: 0; max-width: 72ch; color: var(--muted); line-height: 1.72; }
.ab-end-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Боковое содержание читается, а не угадывается: раздел, который сейчас
   на экране, подсвечен, остальные — заметнее прежнего бледного серого. */
@media (min-width: 1280px) {
    .ab-rail-item { color: var(--text); opacity: .62; transition: opacity .18s, color .18s; }
    .ab-rail-item:hover { opacity: 1; }
    .ab-rail-item.is-here {
        opacity: 1; color: var(--accent); font-weight: 700;
        border-left-color: var(--accent); background: var(--accent-soft);
        border-radius: 0 8px 8px 0;
    }
}

/* Одноколоночные сетки страницы: колонка minmax(0, 1fr), а не «auto».
   Колонка «auto» шире экрана, если внутри есть что-то длинное, и тогда
   за край уезжает вся страница, а не одна строка. Проверено замером:
   на 308 точках карточки вылезали на 22 точки. */
.ab-hero, .ab-lead, .ab-card, .ab-line, .ab-pr, .ab-note, .ab-open-col,
.ab-end, .ab-map, .ab-node, .ab-map-base, .msg-hero {
    grid-template-columns: minmax(0, 1fr);
}

/* Длинная плашка состояния переносится по словам: «Активная
   исследовательская разработка» не влезает в узкую карточку одной
   строкой и уводила страницу за край. */
.ab-card .mod-status, .ab-line-head .mod-status {
    max-width: 100%; white-space: normal; text-align: left;
}

/* Признак закрепления в строке сведений карточки новости. */
.news-pin { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 700; }
.news-pin svg { width: 14px; height: 14px; }

/* Подвал прибит к низу окна, когда содержимого мало.
   Пустой блог показывал «Работает на Quasar Gen» посреди экрана: у
   короткой страницы подвал шёл сразу за содержимым, а ниже оставался
   пустой фон. Тело — колонка во всю высоту окна, середина растягивается,
   подвал уходит вниз сам. Панель управления и почта живут своей
   раскладкой во весь экран, их не трогаем.
   100dvh, а не 100vh: на телефоне адресная строка прячется, и 100vh
   там на её высоту больше настоящего окна. */
body:not(.is-admin):not(.is-mail):not(.of-app) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
body:not(.is-admin):not(.is-mail):not(.of-app) > main.wrap { flex: 1 0 auto; }
body:not(.is-admin):not(.is-mail):not(.of-app) > .site-footer { margin-top: auto; }

/* ======================================================================
   Блог: каталог личных блогов, страница автора, панель и настройка.
   Разметка общая с сайтом (wrap, card, news-layout, chips), здесь только
   то, чего в общей раскладке нет. Цвета — токенами тем, не вручную.
   ====================================================================== */

.bl-head {
    display: grid; gap: 14px; align-items: center; margin-bottom: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 380px) auto;
}
.bl-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bl-head-main .docs-title { margin: 0; }
.bl-head-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.bl-search { position: relative; display: block; min-width: 0; }
.bl-search .input { width: 100%; padding-left: 40px; }
.bl-search-ico {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; display: grid;
}
.bl-search-ico svg { width: 17px; height: 17px; }
.bl-sort .select { min-width: 190px; }
@media (max-width: 1080px) { .bl-head { grid-template-columns: minmax(0, 1fr); } }

.bl-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bl-filters { margin-top: 4px; }

/* --- Каталог авторов --- */
.bl-authors-layout {
    display: grid; gap: 20px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
}
@media (max-width: 1080px) { .bl-authors-layout { grid-template-columns: minmax(0, 1fr); } }
.bl-authors-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}
.bl-author {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
    padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.bl-author--wide { grid-column: span 2; border-color: var(--accent); }
@media (max-width: 900px) {
    .bl-author, .bl-author--wide { grid-template-columns: minmax(0, 1fr); grid-column: auto; }
}
.bl-author-who { display: grid; gap: 8px; align-content: start; justify-items: start; min-width: 0; }
.bl-author-name { margin: 0; font-size: 1.05rem; }
.bl-author-desc { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.bl-author-count { display: flex; align-items: center; gap: 7px; margin: 2px 0 0;
    color: var(--muted); font-size: .82rem; }
.bl-author-count svg { width: 15px; height: 15px; }
.bl-author-sign { margin: 10px 0 0; text-align: right; color: var(--muted); font-size: .82rem; }
.bl-ava {
    display: grid; place-items: center; width: 64px; height: 64px; flex: none;
    border-radius: 50%; overflow: hidden; background: var(--accent-soft);
    color: var(--accent); font-weight: 700; font-size: 1.3rem;
}
.bl-ava img { width: 100%; height: 100%; object-fit: cover; }
.bl-ava--sm { width: 26px; height: 26px; font-size: .8rem; }
.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip {
    padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface-2); font-size: .74rem; color: var(--muted);
}
.bl-author-last {
    display: grid; gap: 8px; align-content: start; min-width: 0;
    padding-left: 14px; border-left: 1px solid var(--border);
}
@media (max-width: 900px) {
    .bl-author-last { padding-left: 0; border-left: 0; border-top: 1px solid var(--border);
        padding-top: 12px; }
}
.bl-last-label { color: var(--muted); font-size: .76rem; text-transform: uppercase;
    letter-spacing: .1em; }
.bl-last { display: grid; gap: 8px; color: var(--text); text-decoration: none; }
.bl-last-cover {
    display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;
    border-radius: 12px; background: var(--hover); color: var(--muted);
}
.bl-last-cover img { width: 100%; height: 100%; object-fit: cover; }
.bl-last-text b { display: block; font-size: .92rem; line-height: 1.35; }
.bl-last-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-top: 5px; color: var(--muted); font-size: .78rem; }
.bl-last-text small svg { width: 14px; height: 14px; }
.bl-last:hover b { color: var(--accent); }

.bl-side { display: grid; gap: 14px; align-content: start; }
.bl-how { display: grid; gap: 12px; }
.bl-how-step { display: flex; align-items: flex-start; gap: 10px; }
.bl-how-n {
    display: grid; place-items: center; width: 26px; height: 26px; flex: none;
    border-radius: 50%; background: var(--accent-soft); color: var(--accent);
    font-weight: 700; font-size: .8rem;
}
.bl-how-step b { display: block; font-size: .9rem; }
.bl-how-step small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.45; }

/* --- Шапка личного блога --- */
.bl-hero {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px;
    align-items: center; margin-bottom: 18px; padding: 22px;
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    background: var(--surface-2); background-size: cover; background-position: center;
}
.bl-hero-ava { width: 96px; height: 96px; }
.bl-hero .bl-hero-ava {
    display: grid; place-items: center; border-radius: 50%; overflow: hidden;
    background: var(--accent-soft); color: var(--accent); font-size: 2rem; font-weight: 700;
    border: 3px solid var(--border);
}
.bl-hero-ava img { width: 100%; height: 100%; object-fit: cover; }
.bl-hero-text { min-width: 0; }
.bl-hero-title { margin: 0 0 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; }
.bl-hero-sub { margin: 0; color: var(--muted); line-height: 1.55; max-width: 70ch; }
.bl-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0;
    color: var(--muted); font-size: .84rem; }
.bl-hero-meta svg { width: 15px; height: 15px; }
.bl-hero-cta { display: grid; gap: 8px; justify-items: end; align-content: center; }
.bl-hero-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent);
    font-size: .84rem; }
.bl-hero-link svg { width: 15px; height: 15px; }
.bl-hero--cover { color: #fff; border-color: rgba(255,255,255,.3); }
.bl-hero--cover .bl-hero-title { color: #fff; }
.bl-hero--cover .bl-hero-sub,
.bl-hero--cover .bl-hero-meta,
.bl-hero--cover .bl-hero-meta svg { color: #e2e8f0; }
.bl-hero--cover .bl-hero-ava { border-color: rgba(255,255,255,.58); }
.bl-hero--cover .bl-hero-cta .btn-ghost {
    color: #fff; border-color: rgba(255,255,255,.64); background: rgba(8,12,24,.52);
}
.bl-hero--cover .bl-hero-cta .btn-ghost:hover,
.bl-hero--cover .bl-hero-cta .btn-ghost:focus-visible {
    color: #fff; border-color: #fff; background: rgba(15,23,42,.82);
}
.bl-hero--cover .bl-hero-link { color: #bfdbfe; }
.bl-hero--cover .bl-hero-link:hover { color: #fff; text-decoration: underline; }
.bl-hero--cover .bl-hero-link:focus-visible,
.bl-hero--cover .bl-hero-cta .btn-ghost:focus-visible {
    outline: 3px solid #fbbf24; outline-offset: 3px;
}
@media (max-width: 900px) {
    .bl-hero { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .bl-hero-cta { justify-items: start; }
}

.bl-postbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.bl-h2 { margin: 0; font-size: 1.2rem; flex: 1 1 auto; text-align: left; }
.bl-sortlinks { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Карточка публикации --- */
.bl-posts {
    display: grid; gap: 14px; margin-bottom: 16px;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}
.bl-post {
    display: grid; grid-template-rows: auto 1fr; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.bl-post--big {
    grid-template-rows: auto; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    margin-bottom: 14px;
}
@media (max-width: 860px) { .bl-post--big { grid-template-columns: minmax(0, 1fr); } }
.bl-post-cover {
    position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9;
    overflow: hidden; background: var(--hover); color: var(--muted);
}
.bl-post--big .bl-post-cover { aspect-ratio: auto; min-height: 220px; }
.bl-post-cover img { width: 100%; height: 100%; object-fit: cover; }
.bl-post-noimg svg { width: 34px; height: 34px; }
.bl-pin {
    position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff;
    font-size: .74rem; font-weight: 700;
}
.bl-pin svg { width: 13px; height: 13px; }
.bl-post-body { display: grid; gap: 8px; align-content: start; padding: 16px; min-width: 0; }
.bl-post-title { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.bl-post--big .bl-post-title { font-size: 1.3rem; }
.bl-post-title a { color: var(--text); }
.bl-post-title a:hover { color: var(--accent); }
.bl-post-lead { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.bl-post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    color: var(--muted); font-size: .78rem;
}
.bl-post-meta svg { width: 14px; height: 14px; }
.bl-feed-who { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.bl-feed-who:hover { color: var(--accent); }
.bl-view-cover { width: 100%; border-radius: var(--radius); margin: 8px 0 16px; }

.bl-side-author { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text); }
.bl-side-author b { display: block; font-size: .9rem; }
.bl-side-author small { color: var(--muted); font-size: .78rem; }
.bl-side-author span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.bl-side-author svg:last-child { width: 15px; height: 15px; color: var(--muted); }
.bl-side-author:hover b { color: var(--accent); }
.bl-stat { display: flex; align-items: center; gap: 9px; margin: 6px 0; font-size: .9rem; }
.bl-stat svg { width: 16px; height: 16px; color: var(--accent); }

/* --- Панель автора --- */
.bl-nobox { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 34px 20px; }
.bl-myrow {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px;
    align-items: center; margin-bottom: 10px;
}
.bl-myrow-cover {
    display: grid; place-items: center; width: 96px; aspect-ratio: 16 / 10; overflow: hidden;
    border-radius: 10px; background: var(--hover); color: var(--muted);
}
.bl-myrow-cover img { width: 100%; height: 100%; object-fit: cover; }
.bl-myrow-cover svg { width: 20px; height: 20px; }
.bl-myrow-text { min-width: 0; }
.bl-myrow-text b { display: block; }
.bl-myrow-text small { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.bl-myrow-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.bl-reason {
    display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 8px 10px;
    border-radius: 10px; background: var(--hover); color: var(--muted); font-size: .82rem;
}
.bl-reason svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
@media (max-width: 860px) {
    .bl-myrow { grid-template-columns: minmax(0, 1fr); }
    .bl-myrow-actions { justify-content: flex-start; }
    .bl-myrow-cover { width: 100%; }
}

/* --- Настройка блога и форма статьи --- */
.bl-settings {
    display: grid; gap: 18px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
}
@media (max-width: 1080px) { .bl-settings { grid-template-columns: minmax(0, 1fr); } }
.bl-set-main { display: grid; gap: 14px; }
.bl-set-side { display: grid; gap: 12px; align-content: start; }
.bl-req { color: var(--accent); font-style: normal; }
/* Адрес страницы блога — подписью под полем, а не приставкой внутри него.
   Приставка была короткой и лживой («сайт/blog/»); настоящий адрес длинный,
   и внутри строки ввода он распирал бы страницу на телефоне. Поэтому здесь
   перенос по любому месту: адрес — одно длинное слово без пробелов. */
.bl-slug-real { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.bl-slug-real a { color: var(--accent); }
.bl-topicpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bl-topicbox {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
    font-size: .84rem;
}
.bl-topicbox.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.bl-topicbox input { accent-color: var(--accent); }
.bl-cover-drop {
    display: grid; gap: 8px; justify-items: center; padding: 18px;
    border: 1px dashed var(--border); border-radius: 14px; text-align: center;
}
.bl-cover-drop svg { width: 26px; height: 26px; color: var(--muted); }
.bl-cover-now { width: 100%; border-radius: 12px; margin-bottom: 10px; }
.bl-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted);
    font-size: .82rem; }
.bl-note svg { width: 16px; height: 16px; flex: none; }
.bl-preview-card { display: grid; gap: 12px; }
.bl-preview {
    display: grid; gap: 6px; padding: 18px; border-radius: 14px;
    background: var(--surface-2); background-size: cover; background-position: center;
}
.bl-preview b { font-size: 1.05rem; }
.bl-preview small { color: var(--muted); font-size: .84rem; }
.bl-preview--cover b { color: #fff; }
.bl-preview--cover small { color: #e2e8f0; }
.bl-preview-empty {
    display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px 14px;
    border: 1px dashed var(--border); border-radius: 14px;
}
.bl-preview-empty svg { width: 26px; height: 26px; color: var(--muted); }
.bl-preview-empty small { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.bl-public { display: grid; gap: 6px; }
.bl-createform { display: grid; gap: 12px; }
.bl-formbar { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Полоса блога в редакторе Office --- */
.of-blogbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.of-blogbar-gap { flex: 1 1 auto; }
.of-blogbar form { display: inline; }

/* Заголовок карточки и ссылка автора — не подчёркнутый текст: в сетке
   карточек подчёркивание превращает список в столбик ссылок. */
.bl-post-title a, .bl-feed-who, .bl-side-author, .bl-last, .bl-hero-link { text-decoration: none; }
.bl-post-title a:hover { text-decoration: none; }

/* Место человека: сводка и из чего оно сложилось. */
.cab-storage { display: grid; gap: 4px; margin: 10px 0 6px; }
.cab-storage-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.cab-storage-row span { color: var(--muted); }
.cab-storage-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }


/* Знак бренда картинкой: плашка и рамка убираются — у знака своё
   свечение, и подложка под ним смотрится вторым квадратом. Картинка
   вписывается целиком (contain), чтобы её не обрезало по краям. */
.brand .logo-mark--img {
    /* Знак крупнее прежней плашки: внутри него есть рисунок — грани,
       орбита, ядро, — и на 34 точках он сливается в пятно. */
    width: 42px;
    height: 42px;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.brand .logo-mark--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Лёгкое свечение под знаком — вместо прежней плашки. */
    filter: drop-shadow(0 0 10px rgba(96, 87, 240, .45));
}

/* ==========================================================================
   Полоса «Философия»: один довод, без карточек
   --------------------------------------------------------------------------
   Здесь нет сетки и нет плиток намеренно. Соседняя секция — «четыре опоры
   одного ядра»; пятая карточка рядом с ними разрушила бы саму мысль про
   четыре, а довод «почему мы так делаем» карточкой и не работает: его
   читают подряд, а не сравнивают глазами.

   Текст держится узкой колонкой (56 знаков): длинная строка на широком
   экране читается хуже мелкого шрифта, и абзац-манифест теряется первым.
   ========================================================================== */
.lp-creed-in { max-width: 62ch; }
.lp-creed .lp-section-title { text-align: left; margin: 0; }
.lp-creed-lead {
    margin: 16px 0 0;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: -.01em;
}
.lp-creed-body {
    margin: 14px 0 0;
    max-width: 56ch;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.7;
}
@media (max-width: 767px) {
    .lp-creed-lead { font-size: 16.5px; }
    .lp-creed-body { font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   Комментарии блога: кому отвечаем и правка своего (T2.1)
   --------------------------------------------------------------------------
   Полоска адресата обязана быть ЗАМЕТНОЙ и снимаемой: ответ, ушедший не
   туда, человек замечает уже после отправки. Правка своего комментария
   живёт в <details> — раскрывается без сценариев и с клавиатуры.
   -------------------------------------------------------------------------- */
.bl-cm-replyto {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    font-size: 13.5px;
}
.bl-cm-replyto > span { font-weight: 600; }
.bl-cm-edit { display: inline-block; }
.bl-cm-edit > summary { cursor: pointer; list-style: none; }
.bl-cm-edit > summary::-webkit-details-marker { display: none; }
.bl-cm-edit[open] > summary { opacity: .7; }
.bl-cm-edit > .form { margin-top: 10px; display: grid; gap: 8px; max-width: 560px; }
.cab-state.is-bad { color: #e5484d; }

/* --------------------------------------------------------------------------
   QDoc Links: ссылка внутри текста документа
   --------------------------------------------------------------------------
   Один класс на две среды. На странице это настоящий <a>; в редакторе —
   <span> с тем же классом: нажатие внутри редактора обязано ставить курсор,
   а не уводить со страницы, поэтому вид даётся классом, а не тегом.

   Подчёркивание со смещением — чтобы не резало хвосты букв «р», «у», «д».
   -------------------------------------------------------------------------- */
.qd-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.qd-link:hover { text-decoration-thickness: 2px; }
/* В редакторе ссылка не кликается — курсор об этом и говорит. */
span.qd-link { cursor: text; }
.of-quasar-preview{margin-top:8px;padding:10px;border:1px solid #3c4043;border-radius:8px;max-width:100%;overflow-wrap:anywhere}.of-quasar-preview pre{white-space:pre-wrap;word-break:break-word;max-height:180px;overflow:auto}.of-quasar-preview h4{margin:7px 0 3px}@media(max-width:600px){.of-quasar-preview{min-width:0}.of-quasar-preview .of-search-actions>*{flex:1 1 140px}}
.of-search-options{display:grid;gap:6px;margin:10px 0;font-size:12px}.of-search-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.of-rail-panel[data-railpanel="search"]>.input{width:100%;box-sizing:border-box}.of-hit{outline:2px solid #f9ab00;outline-offset:2px}.of-stat-button{border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer}.of-stats-pop{position:absolute;left:180px;bottom:34px;z-index:40;min-width:250px;padding:10px 14px;border:1px solid #3c4043;border-radius:8px;background:#202124;box-shadow:0 4px 18px #0008}.of-stats-pop p{margin:4px 0}.of-intel{max-width:360px;padding:6px;overflow:auto}.of-intel-item{margin:6px 0;padding:8px;border:1px solid #3c4043;border-radius:7px;background:#202124}.of-intel-item p{margin:5px 0}.of-intel-item code{display:block;overflow-wrap:anywhere}.of-tool-check{display:flex;align-items:center;gap:4px;font-size:11px;white-space:nowrap}@media(max-width:600px){.of-stats-pop{position:fixed;left:8px;right:8px;bottom:42px;min-width:0;max-height:60vh;overflow:auto}.of-intel{max-width:100%}}
+
/* Contacts: private address book, shared geometry for Day/Night. */
.contacts-app{width:min(1460px,calc(100% - 32px));margin:18px auto 28px;display:grid;grid-template-columns:190px minmax(360px,1fr) 300px;gap:14px;min-height:calc(100vh - 126px)}
.contacts-side,.contacts-main,.contact-detail{min-width:0}
.contacts-side{display:flex;flex-direction:column;gap:18px;padding:8px 4px}
.contacts-products,.contacts-filters{display:grid;gap:5px}
.contacts-products{padding-bottom:16px;border-bottom:1px solid var(--border)}
.contacts-products a,.contact-nav-item{display:flex;align-items:center;gap:11px;min-height:43px;padding:9px 12px;border:1px solid transparent;border-radius:12px;color:var(--muted);text-decoration:none}
.contacts-products a:hover,.contact-nav-item:hover{color:var(--text);background:var(--hover)}
.contacts-products a.is-active,.contact-nav-item.is-active{color:#fff;border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:linear-gradient(135deg,var(--accent),#7b61ff);box-shadow:0 8px 24px var(--accent-glow)}
.contacts-products a svg,.contact-nav-item svg{flex:none}
.contact-nav-item b{margin-left:auto;font-size:.72rem;font-weight:600}
.contacts-group-head{display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.contacts-group-head button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.contacts-main{display:flex;flex-direction:column;gap:14px}
.contacts-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:4px 2px}
.contacts-hero h1{margin:0;font-size:2rem;line-height:1.1}
.contacts-hero p{margin:5px 0 0;color:var(--muted)}
.contacts-hero .btn{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.contacts-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.contacts-metrics article{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;column-gap:11px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.contacts-metrics article>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--accent);background:var(--accent-soft)}
.contacts-metrics b{font-size:1.2rem}.contacts-metrics small{color:var(--muted)}
.contacts-list-card,.contact-detail{border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.contacts-list-card{overflow:hidden}
.contacts-search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin:12px;padding:0 8px 0 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.contacts-search>svg{color:var(--muted)}
.contacts-search input,.contacts-search select{min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--text);font:inherit}
.contacts-search select{border-left:1px solid var(--border);padding-left:12px;color:var(--muted)}
.contacts-mobile-filters{display:none}
.contacts-list{display:grid;padding:0 12px 12px}
.contact-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto 24px;align-items:center;gap:12px;min-height:68px;padding:8px 10px;border:1px solid transparent;border-bottom-color:var(--border);color:inherit;text-decoration:none}
.contact-row:hover{background:var(--hover)}
.contact-row.is-active{border-color:var(--accent);border-radius:12px;background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.contact-avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;font-weight:700;background:linear-gradient(135deg,hsl(calc(var(--h,210)*1deg) 80% 55%),#7048ff)}
.contact-row:nth-child(4n+1) .contact-avatar{background:linear-gradient(135deg,#10b9c6,#10c987)}
.contact-row:nth-child(4n+2) .contact-avatar{background:linear-gradient(135deg,#4e55ef,#822df2)}
.contact-row:nth-child(4n+3) .contact-avatar{background:linear-gradient(135deg,#5f7ca8,#9bb0d0)}
.contact-row:nth-child(4n) .contact-avatar{background:linear-gradient(135deg,#e12f9c,#8d3be9)}
.contact-row-copy{min-width:0;display:grid;gap:3px}
.contact-row-copy strong{display:flex;align-items:center;gap:6px;min-width:0}
.contact-row-copy strong svg{width:15px;height:15px;color:#f2b84b;fill:currentColor}
.contact-row-copy small{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.contact-chip,.contact-detail-chips span{padding:5px 10px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:999px;color:var(--accent);background:var(--accent-soft);font-size:.72rem}
.contact-row-more{color:var(--muted)}
.contacts-empty{display:grid;justify-items:center;gap:8px;padding:64px 20px;text-align:center;color:var(--muted)}
.contacts-empty>svg{width:42px;height:42px;color:var(--accent)}
.contacts-empty h2{margin:6px 0 0;color:var(--text)}.contacts-empty p{margin:0;max-width:390px}
.contact-detail{position:relative;align-self:start;padding:22px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.contact-detail.is-empty{justify-content:center;min-height:360px;color:var(--muted)}
.contact-detail.is-empty>svg{width:50px;height:50px;color:var(--accent)}
.contact-detail h2{margin:12px 0 3px}.contact-detail>p{margin:2px 0;color:var(--muted)}
.contact-avatar.is-large{width:88px;height:88px;margin-top:3px;font-size:1.7rem;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--accent)}
.contact-favorite{position:absolute;right:13px;top:13px}
.contact-favorite button,.contact-detail-close{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:10px;color:#f2b84b;background:var(--surface);cursor:pointer}
.contact-detail-close{display:none;color:var(--muted);text-decoration:none}
.contact-detail-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:11px 0}
.contact-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:10px 0 14px}
.contact-actions a,.contact-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;padding:8px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:transparent;text-decoration:none;font:inherit;cursor:pointer}
.contact-actions .is-primary{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--accent),#775cff)}
.contact-actions span{font-size:.72rem}
.contact-fields{width:100%;margin:0;padding:10px;border:1px solid var(--border);border-radius:12px;text-align:left}
.contact-fields div{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;min-height:34px}
.contact-fields dt{color:var(--muted)}.contact-fields dt svg{width:16px;height:16px}
.contact-fields dd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0;min-width:0;overflow-wrap:anywhere;font-size:.8rem}
.contact-fields button{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer}
.contact-fields button svg{width:15px;height:15px}.contact-fields button.is-copied{color:#18b978}
.contact-notes{width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);text-align:left}
.contact-notes h3{margin:0 0 5px;font-size:.82rem}.contact-notes p{margin:0;color:var(--muted);font-size:.78rem;line-height:1.45}
.contact-detail-footer{display:flex;gap:7px;width:100%;margin-top:14px}.contact-detail-footer>*{flex:1}.contact-detail-footer .btn{width:100%}
.contact-detail-grip{display:none}
.contacts-bottom,.mail-bottom-nav{display:none}
.contact-modal{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:18px}
.contact-modal[hidden]{display:none}.contact-modal>div{position:absolute;inset:0;background:rgba(4,10,28,.68);backdrop-filter:blur(8px)}
.contact-modal>section,.contact-modal>form{position:relative;width:min(600px,100%);max-height:calc(100vh - 36px);overflow:auto;padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.contact-modal>section{width:min(420px,100%);text-align:center}.contact-modal>section>span{display:grid;place-items:center;width:54px;height:54px;margin:auto;border-radius:15px;color:var(--accent);background:var(--accent-soft)}
.contact-modal header,.contact-modal footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.contact-modal header{margin-bottom:18px}.contact-modal header h2{margin:0}.contact-modal header button{border:0;background:transparent;color:var(--muted)}
.contact-modal footer{justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.contact-form-grid label{display:grid;gap:6px}.contact-form-grid label>span,.contact-modal>form>label>span{font-size:.8rem;color:var(--muted)}
.contact-form-grid .is-wide{grid-column:1/-1}.contact-form-grid textarea{height:auto;resize:vertical}
.contact-form-grid fieldset{display:flex;flex-wrap:wrap;gap:7px;border:0;padding:0;margin:0}.contact-form-grid legend{margin-bottom:7px;color:var(--muted);font-size:.8rem}
.contact-group-check,.contact-fav-check{display:flex!important;grid-template-columns:none!important;align-items:center;gap:7px!important;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
.contact-modal>form>label{display:grid;gap:7px}
.is-mail .mail-motto{display:none}
.is-mail .site-header .nav{align-items:center;min-width:0;gap:12px}
.is-mail .site-header .nav .mail-search{flex:1 1 240px;min-width:150px;max-width:500px;margin:0}
.is-mail .site-header .nav .mail-search input{padding-right:14px}
.mail-products{display:flex;align-items:center;gap:5px;flex:none}
.mail-products .mail-product{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid var(--border);border-radius:11px;color:var(--muted);background:var(--surface);text-decoration:none}
.is-mail .site-header .nav .mail-products .mail-product{width:40px;height:40px;padding:0}
.mail-products .mail-product svg{width:19px;height:19px}
.mail-products .mail-product:hover,.mail-products .mail-product:focus-visible,.mail-products .mail-product.is-active{color:var(--accent);background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.mail-products .mail-product:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mail-product-tip{position:absolute;z-index:30;left:50%;top:calc(100% + 9px);transform:translate(-50%,-4px);padding:6px 9px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-lift);font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.mail-product:hover .mail-product-tip,.mail-product:focus-visible .mail-product-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mail-side .mail-products{display:none}
@media(min-width:801px) and (max-width:1080px){.mail-side .mail-products{display:flex;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--border)}}
body.is-mail :is(.mail-side,.mail-items,.mail-read-body,.mail-modal-body,.mail-editor-area){scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 34%,var(--surface-2)) transparent}
body.is-mail :is(.mail-side,.mail-items,.mail-read-body,.mail-modal-body,.mail-editor-area)::-webkit-scrollbar{width:8px;height:8px}
body.is-mail :is(.mail-side,.mail-items,.mail-read-body,.mail-modal-body,.mail-editor-area)::-webkit-scrollbar-track{background:transparent}
body.is-mail :is(.mail-side,.mail-items,.mail-read-body,.mail-modal-body,.mail-editor-area)::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--accent) 34%,var(--surface-2));background-clip:padding-box}
@media(max-width:1100px){.contacts-app{grid-template-columns:170px minmax(340px,1fr) 280px}.contacts-metrics{display:none}}
@media(max-width:800px){
 .contacts-app{grid-template-columns:1fr;width:min(100% - 20px,680px);margin-top:10px;padding-bottom:82px}
 .contacts-side{display:none}.contacts-main{gap:10px}.contacts-hero h1{font-size:1.75rem}.contacts-hero p{font-size:.86rem}
 .contacts-hero .btn{position:fixed;right:16px;bottom:76px;z-index:70;width:52px;height:52px;padding:0;border-radius:50%;font-size:0}.contacts-hero .btn svg{margin:0}
 .contacts-search{grid-template-columns:auto minmax(0,1fr) 46px;margin:0 0 10px;height:50px}.contacts-search select{width:42px;font-size:0}
 .contacts-mobile-filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none}.contacts-mobile-filters::-webkit-scrollbar{display:none}
 .contacts-mobile-filters .contact-nav-item{flex:0 0 auto;border-color:var(--border);background:var(--surface)}
 .contacts-mobile-filters .contact-nav-item.is-active{background:linear-gradient(135deg,var(--accent),#7b61ff)}
 .contacts-list-card{border:0;background:transparent;box-shadow:none}.contacts-list{gap:8px;padding:0}
 .contact-row{grid-template-columns:50px minmax(0,1fr) auto 20px;min-height:74px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:0 6px 22px rgba(0,0,0,.08)}
 .contact-row.is-active{box-shadow:inset 3px 0 0 var(--accent),0 0 22px var(--accent-glow)}
 .contact-detail{position:fixed;z-index:80;left:8px;right:8px;bottom:68px;max-height:72vh;overflow:auto;border-radius:24px 24px 16px 16px;padding:28px 18px 18px;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(18px)}
 .contact-detail.is-empty{display:none}.contact-detail-grip{display:block;position:absolute;top:9px;width:54px;height:4px;border-radius:9px;background:var(--border)}
 .contact-detail-close{display:grid;position:absolute;right:13px;top:13px}.contact-favorite{right:56px}
 .contact-actions{grid-template-columns:repeat(3,1fr)}.contact-actions a,.contact-actions button{border-radius:50%;width:58px;height:58px;min-height:58px;justify-self:center;padding:0}.contact-actions span{position:absolute;transform:translateY(43px);white-space:nowrap}.contact-actions{margin-bottom:32px}
 .contacts-bottom,.mail-bottom-nav{position:fixed;z-index:75;left:8px;right:8px;bottom:8px;display:grid;grid-template-columns:repeat(4,1fr);height:62px;padding:5px;border:1px solid var(--border);border-radius:16px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 10px 32px rgba(0,0,0,.18)}
 .contacts-bottom a,.mail-bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:11px;color:var(--muted);text-decoration:none;font-size:.67rem}
 .contacts-bottom a.is-active,.mail-bottom-nav a.is-active{color:#fff;background:linear-gradient(135deg,var(--accent),#7457f6)}
 .contacts-bottom svg,.mail-bottom-nav svg{width:18px;height:18px}
 .contact-modal{align-items:end;padding:8px 8px 76px}.contact-modal>section,.contact-modal>form{border-radius:22px 22px 14px 14px;padding:18px}
 .contact-form-grid{grid-template-columns:1fr}.contact-form-grid .is-wide{grid-column:auto}
 .mail-products{display:none}.mail-bottom-nav{z-index:60}
}
@media(max-width:600px){.mail-compose-btn{bottom:82px}.mail-app{padding-bottom:70px}.mail-modal{z-index:90}}
@media(max-width:600px){
 body.is-mail main.wrap { width:100%; max-width:100%; min-width:0; }
 .mail-app,.mail-app>.mail-side,.mail-app>.mail-list,.mail-app>.mail-read { width:100%; max-width:100%; min-width:0; }
 .mail-mobile-search { display:flex; align-items:center; gap:10px; min-width:0; height:48px; padding:0 14px; border:1px solid var(--border); border-radius:15px; background:var(--surface); }
 .mail-mobile-search svg { width:19px; height:19px; flex:none; color:var(--muted); }
 .mail-mobile-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font:inherit; }
 .mail-side>.mail-nav { width:100%; max-width:100%; min-width:0; }
 .mail-side>.mail-nav.is-enhanced:not(.is-expanded) .mail-nav-item:not([data-mail-primary="1"]):not(.is-on) { display:none; }
 .mail-side>.mail-nav .mail-nav-more:not([hidden]) { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:42px; padding:9px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font:inherit; white-space:nowrap; cursor:pointer; }
 .mail-nav-more svg { width:16px; height:16px; }
 .mail-list-head { min-width:0; flex-wrap:wrap; }
 .mail-list-tools,.mail-list-tools>form { min-width:0; }
 .mail-item,.mail-item-body,.mail-item-top,.mail-item-from,.mail-item-subj,.mail-item-prev { min-width:0; }
 .mail-item-top { width:100%; }
 .mail-app.has-open>.mail-side,.mail-app.has-open>.mail-list { display:none; }
 .mail-app.has-open>.mail-read { display:flex; }
 .mail-read-bar { min-width:0; overflow-x:auto; scrollbar-width:none; }
 .mail-read-bar::-webkit-scrollbar { display:none; }
 .mail-back-list { display:inline-flex; align-items:center; gap:4px; flex:none; padding:5px 8px; margin-right:4px; border-radius:8px; color:var(--accent); text-decoration:none; font-size:.8rem; white-space:nowrap; }
 .mail-back-list svg { width:16px; height:16px; }
 .mail-read-main,.mail-from-row,.mail-from-who,.mail-text { min-width:0; max-width:100%; }
 .mail-from-addr,.mail-from-to,.mail-plain { overflow-wrap:anywhere; }
 .mail-text { overflow-x:auto; }
 .mail-files { max-width:100%; }
 .mail-modal-win,.mail-modal-body,.mail-editor,.mail-editor .qf-editor { min-width:0; max-width:100%; }
}