/* ============================================================
   UZSCINET — бренд-тема регистратора доменов.
   Токены и компоненты повторяют uzsci.net (styles.css сайта):
   акцент #1C9DD8 только у действий, шрифт Manrope, светлая тема по умолчанию.
   Слой 1 — токены, слой 2 — маппинг в переменные DaisyUI, слой 3 — компоненты.
   ============================================================ */

/* ---------- ШРИФТЫ: самохостинг (как на сайте, есть кириллица) ---------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/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:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/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:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/jetbrainsmono-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:400 700;font-display:swap;src:url('/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/jetbrainsmono-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ============================================================
   1. БРЕНД-ТОКЕНЫ (имена совпадают с сайтом — правки переносятся 1:1)
   ============================================================ */
:root,
[data-theme="light"] {
    color-scheme: light;

    --uz-primary: #1C9DD8;
    --uz-primary-d: #0B5E8A;
    --uz-primary-l: #5FC2EC;
    --uz-accent-ink: #0E7CB0;          /* акцент как ЧЕРНИЛА (AA на светлом) */
    --uz-accent-d: #0B5E8A;            /* hover акцентных ссылок (= сайтовый --accent-d) */

    --uz-bg: #f7fafd;                  /* фон страницы */
    --uz-surface: #ffffff;             /* карточки, сайдбар, хедер */
    --uz-text: #0e1620;
    --uz-text-dim: #3c4754;
    --uz-text-dimmer: #52606b;
    --uz-line: rgba(17, 24, 39, .16);
    --uz-line-soft: rgba(17, 24, 39, .11);
    /* Разделители-«сетка» (строки параметров, колонки таблиц, группы кнопок): их задача —
       именно резать блок на части, поэтому заметнее обычной рамки. Не для рамок карточек. */
    --uz-line-strong: rgba(17, 24, 39, .26);
    --uz-field-bg: #eef3f8;
    --uz-icon-bg: rgba(17, 24, 39, .05);

    --uz-card-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 16px -6px rgba(15,23,42,.10), 0 18px 36px -12px rgba(15,23,42,.12);
    --uz-shadow-lg: 0 2px 4px rgba(15,23,42,.04), 0 16px 32px -8px rgba(15,23,42,.12), 0 36px 60px -18px rgba(15,23,42,.16);
    --uz-header-bg: rgba(255, 255, 255, .82);

    --uz-success: #1A8F5C;
    --uz-warning: #B7791F;
    --uz-danger: #C5384B;

    --uz-glow-1: rgba(28, 157, 216, .10);
    --uz-glow-2: rgba(95, 194, 236, .10);
    --uz-noise-op: 0;

    /* фон-«рэк»: корпуса юнитов / акцентные индикаторы (читает js/bg.js) */
    --net-rgb: 11, 94, 138;
    --net-led-rgb: 28, 157, 216;

    --uz-logo-filter: none;

    --uz-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --uz-mono: 'JetBrains Mono', ui-monospace, monospace;
    --uz-ease: cubic-bezier(.22, .61, .36, 1);
    --uz-tap: 44px;

    /* ---------- ТИПОГРАФИКА: та же шкала, что на сайте (styles.css, --fs-*) ----------
       Ступени в rem: размер шрифта из настроек браузера наконец работает.
       До этого размеры жили по месту в компонентах — 22 разных значения, из них
       девять полупиксельных (12.5/13.5/14.5…), которые дисплей всё равно округлял. */
    --fs-2xs: .6875rem;                /* 11px — UPPERCASE-метки, бейджи */
    --fs-caption: .8125rem;            /* 13px — подписи, лейблы, хелперы */
    --fs-small: .875rem;               /* 14px — вторичный текст, таблицы */
    --fs-body: 1rem;                   /* 16px — тело, поля ввода */
    --fs-lead: 1.125rem;               /* 18px — лид, заголовок секции */
    --fs-h3: 1.25rem;                  /* 20px */
    --fs-h2: clamp(1.5625rem, 1.05rem + 1.85vw, 1.9375rem);   /* 25→31px */
    --fs-h1: clamp(2rem, 1.3rem + 3vw, 3.25rem);              /* 32→52px — герой, как на сайте */
    --fs-title: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem);    /* 30→44px — заголовок страницы-формы:
                                                                 чуть тише героя сайта (32→52), но крупно */

    /* Заголовкам — плотно (иначе строки расползаются), тексту — просторно.
       1.65 — ровно как --lh-body сайта: Manrope 500 требует воздуха в строке. */
    --lh-tight: 1.12;
    --lh-snug: 1.3;
    --lh-body: 1.65;
    --lh-relaxed: 1.75;

    /* 800 — привилегия h1/h2. Ниже уровень различает размер, а не вес:
       раньше h1 и h5 были одинаково «чёрные», и иерархия держалась ни на чём. */
    --fw-body: 500;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Крупному кеглю трекинг сжимаем, мелкому и капсу — раздаём */
    --ls-tight: -.02em;
    --ls-snug: -.01em;
    --ls-body: .01em;
    --ls-caps: .08em;

    /* Мера строки: 50–75 знаков — дальше глаз теряет начало следующей строки */
    --measure: 66ch;
    --measure-narrow: 46ch;

    /* ---------- РАДИУСЫ: три номинала вместо девяти (аудит геометрии 2026-07-15) ----------
       card — карточки/модалки/«пилюли»; ctl — ЛЮБОЙ контрол (кнопка, поле, пункт меню);
       in — вложенные панели внутри карточек (по формуле вложенности ≤ card − padding). */
    --uz-r-card: 22px;
    --uz-r-ctl: 12px;
    --uz-r-in: 12px;

    /* Роли: клиент — брендовый, персонал — нейтральные/семантические */
    --uz-role-user: #1C9DD8;
    --uz-role-manager: #1A8F5C;        /* менеджер «на смене» — зелёный (решение пользователя) */
    --uz-role-admin: #0B5E8A;
    --uz-role-sadmin: #C5384B;
    --uz-role-ink: #ffffff;
}

[data-theme="dark"] {
    color-scheme: dark;

    --uz-primary: #1C9DD8;
    --uz-primary-d: #0B5E8A;
    --uz-primary-l: #5FC2EC;
    --uz-accent-ink: #5FC2EC;
    --uz-accent-d: #5FC2EC;            /* в тёмной = базовому: hover телефона не темнеет, только подчёркивание */

    --uz-bg: #070a10;
    --uz-surface: #0e1218;
    --uz-text: #e8eef6;
    --uz-text-dim: #94a7bb;
    --uz-text-dimmer: #8597a9;
    --uz-line: rgba(255, 255, 255, .15);
    --uz-line-soft: rgba(255, 255, 255, .10);
    --uz-line-strong: rgba(255, 255, 255, .28);   /* на тёмном фоне линия «съедается» сильнее — берём выше светлой */
    --uz-field-bg: rgba(255, 255, 255, .04);
    --uz-icon-bg: rgba(255, 255, 255, .05);

    --uz-card-shadow: 0 2px 6px rgba(0,0,0,.5), 0 16px 32px -10px rgba(0,0,0,.7);
    --uz-shadow-lg: 0 4px 10px rgba(0,0,0,.5), 0 32px 60px -16px rgba(0,0,0,.8);
    --uz-header-bg: rgba(8, 12, 19, .72);

    --uz-success: #3FD08A;
    --uz-warning: #E0B252;
    --uz-danger: #FF6B7E;

    --uz-glow-1: rgba(28, 157, 216, .28);
    --uz-glow-2: rgba(11, 94, 138, .40);
    --uz-noise-op: .025;

    --net-rgb: 120, 190, 230;
    --net-led-rgb: 95, 194, 236;

    --uz-logo-filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(95, 194, 236, .45));

    --uz-role-user: #1C9DD8;
    --uz-role-manager: #2FBF7B;        /* зелёный ярче — читаемость на тёмном */
    --uz-role-admin: #0E7CB0;
    --uz-role-sadmin: #C5384B;
    --uz-role-ink: #ffffff;
}

/* ============================================================
   2. МАППИНГ В DaisyUI — перекрашивает все шаблоны без правки разметки
   ============================================================ */
:root,
[data-theme="light"] {
    --color-base-100: #ffffff;
    --color-base-200: #f7fafd;
    --color-base-300: #e2e9f0;
    --color-base-content: #0e1620;

    --color-primary: #1C9DD8;
    --color-primary-content: #ffffff;
    --color-secondary: #0B5E8A;
    --color-secondary-content: #ffffff;
    --color-accent: #5FC2EC;
    --color-accent-content: #06121b;
    --color-neutral: #0e1620;
    --color-neutral-content: #f7fafd;

    --color-info: #0E7CB0;
    --color-info-content: #ffffff;
    --color-success: #1A8F5C;
    --color-success-content: #ffffff;
    --color-warning: #B7791F;
    --color-warning-content: #ffffff;
    --color-error: #C5384B;
    --color-error-content: #ffffff;

    --radius-selector: 999px;   /* бейджи, тумблеры */
    --radius-field: 12px;       /* кнопки, поля */
    --radius-box: 22px;         /* карточки, модалки — как на сайте */
    --size-selector: 0.25rem;
    --size-field: 0.28rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

[data-theme="dark"] {
    --color-base-100: #0e1218;
    --color-base-200: #070a10;
    --color-base-300: #212a35;
    --color-base-content: #e8eef6;

    --color-primary: #1C9DD8;
    --color-primary-content: #ffffff;
    --color-secondary: #5FC2EC;
    --color-secondary-content: #06121b;
    --color-accent: #5FC2EC;
    --color-accent-content: #06121b;
    --color-neutral: #e8eef6;
    --color-neutral-content: #0e1620;

    --color-info: #5FC2EC;
    --color-info-content: #06121b;
    --color-success: #3FD08A;
    --color-success-content: #06121b;
    --color-warning: #E0B252;
    --color-warning-content: #06121b;
    --color-error: #FF6B7E;
    --color-error-content: #06121b;

    --radius-selector: 999px;
    --radius-field: 12px;
    --radius-box: 22px;
    --size-selector: 0.25rem;
    --size-field: 0.28rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}

/* ============================================================
   3. БАЗА
   ============================================================ */
/* Резервируем место под полосу прокрутки всегда: иначе на коротких страницах
   скроллбара нет, на длинных он появляется и сдвигает центрированный хедер —
   выглядело как «хедер меняет размер между страницами» (2026-07-15). */
html { scrollbar-gutter: stable; }

html,
body {
    font-family: var(--uz-sans);
    font-size: var(--fs-body);        /* 16px: раньше базы не было — компоненты ставили 14–15px по месту */
    font-weight: var(--fw-body);      /* тело сайта — Medium */
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tailwind v4 берёт шрифт из своих переменных — подменяем и их */
:root {
    --default-font-family: var(--uz-sans);
    --font-sans: var(--uz-sans);
    --default-mono-font-family: var(--uz-mono);
    --font-mono: var(--uz-mono);
}

body {
    background: var(--uz-bg);
    color: var(--uz-text);
    transition: background .4s, color .4s;
}

/* ---------- ФОН «живой рэк ЦОД»: перенесён с uzsci.net (canvas + свечения + шум) ----------
   Фон body пропагируется в корневой canvas, поэтому .bg с z-index:-1 виден поверх него.
   Цвета корпусов/индикаторов — токены ниже, их читает js/bg.js и перерисовывает при смене темы. */
.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(1200px 700px at 72% -12%, var(--uz-glow-1), transparent 60%),
        radial-gradient(800px 560px at 6% 8%, var(--uz-glow-2), transparent 55%),
        var(--uz-bg);
    transition: background .4s;
}

.bg-net {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Общая сила рисунка (решение пользователя 2026-08-01: фон до 5–8%).
       Геометрия рэка рисуется в bg.js с альфой 0.11–0.16, то есть 11–16%; множитель 0.5
       опускает её до 5.5–8%. Крутим ОДИН этот номер, а не альфы в bg.js: там их шесть
       (линии, заливки, обводки, свечение и два состояния диодов), и по отдельности они
       разъехались бы по яркости. Диоды тускнеют пропорционально и остаются акцентом. */
    opacity: .5;
    /* маска приглушает середину — зону чтения */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 66%, #000 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.55) 66%, #000 100%);
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    animation: uzGlowFloat 16s ease-in-out infinite alternate;
}

.bg-glow--1 {
    width: 560px;
    height: 560px;
    top: -180px;
    left: 48%;
    background: radial-gradient(circle, var(--uz-glow-1), transparent 70%);
}

.bg-glow--2 {
    width: 480px;
    height: 480px;
    top: 520px;
    left: -120px;
    background: radial-gradient(circle, var(--uz-glow-2), transparent 70%);
    animation-delay: -6s;
}

.bg-noise {
    position: absolute;
    inset: 0;
    opacity: var(--uz-noise-op);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes uzGlowFloat {
    from { transform: translateY(0) scale(1); }
    to   { transform: translateY(40px) scale(1.08); }
}

/* Размер здесь НЕ задаём: его держат классы компонентов, а голые h1–h5 в кабинете
   иначе внезапно раздулись бы до героя. Задаём то, чего у заголовков не было вовсе —
   свой интерлиньяж: раньше они наследовали 1.5 от тела, и заголовок в две строки
   читался как абзац. */
h1, h2 {
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

h3, h4, h5 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
}

::selection {
    background: rgba(28, 157, 216, .22);
    color: var(--uz-text);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--color-base-300) 70%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-base-300); }

:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   4. ХРОМ ПРИЛОЖЕНИЯ: сайдбар и хедер в стиле сайта
   ============================================================ */
.sidebar {
    position: relative;
    z-index: 20;
    background: var(--uz-header-bg);       /* «стекло», как хедер сайта: фон-рэк просвечивает */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--uz-line);
}

/* Полный логотип в сайдбаре кабинета (в тёмной теме перекрашивается токеном-фильтром) */
.uz-sidebar-logo {
    width: auto;
    height: 40px;
    max-width: 100%;
    display: block;
    filter: var(--uz-logo-filter);
    transition: filter .4s;
}

/* Логотип-шарик + слово-марка (как в шапке сайта) */
.uz-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.uz-brand__img {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    display: block;
    filter: var(--uz-logo-filter);
    transition: filter .4s;
}

.uz-brand__name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.05;
    color: var(--uz-text);
    white-space: nowrap;
}

.uz-brand__sub {
    font-family: var(--uz-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uz-text-dimmer);
    white-space: nowrap;
}

/* В шапке кабинета язык стоит в ряду справа — авто-отступ шапки сайта здесь не нужен */
.app-header .lang { margin-left: 0; }

/* Бренд в шапке кабинета — только там, где сайдбар скрыт (≤1024px) */
.uz-brand--mob { display: none; }

@media (max-width: 1024px) {
    .uz-brand--mob { display: flex; }
}

/* Пункты меню сайдбара */
.menu li > a {
    position: relative;
    font-weight: 600;
    font-size: 14px;
    color: var(--uz-text-dim);
    border-radius: var(--uz-r-ctl);
    transition: color .18s, background-color .18s;
}

.menu li > a:hover {
    color: var(--uz-text);
    background: var(--uz-field-bg);
}

.menu li > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--uz-primary);
    opacity: 0;
    transition: opacity .2s ease;
}

.menu li > a.active::before { opacity: 1; }

.menu li > a.active {
    background: color-mix(in oklch, var(--uz-primary) 10%, transparent);
    color: var(--uz-accent-ink);
    font-weight: 700;
}

.menu .menu-label > span,
.menu li.menu-label {
    font-family: var(--uz-mono);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--uz-text-dimmer);
}

/* Верхний бар — «стеклянный», как хедер сайта */
.app-header {
    position: relative;
    z-index: 20;
    background: var(--uz-header-bg);
    border-bottom: 1px solid var(--uz-line);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Ссылка «на сайт» в хедере — подчёркивание как у .topbar__home */
.uz-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    min-height: var(--uz-tap);
    padding: 8px 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--uz-text-dim);
    transition: color .2s;
}

.uz-back:hover { color: var(--uz-text); }

.uz-back::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 2px;
    background: var(--uz-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.uz-back:hover::after { transform: scaleX(1); }

.uz-back svg { width: 16px; height: 16px; }

/* Тумблер темы — квадратная кнопка с рамкой (как .theme-toggle на сайте) */
.theme-toggle,
.theme-selector-btn {
    width: var(--uz-tap);
    height: var(--uz-tap);
    border-radius: var(--uz-r-ctl);
    border: 1px solid var(--uz-line);
    background: var(--uz-field-bg);
    color: var(--uz-text-dim);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.theme-toggle:hover,
.theme-selector-btn:hover {
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
    background: var(--uz-field-bg);
}

/* Каркас кабинета: сам фон рисует .bg, тело только пропагирует цвет в корневой холст.
   position+z-index делают body стекинг-контекстом — иначе .bg (z:-1) проваливается
   ПОД фон тела и «рэк» не виден (у .uz-public это же правило стоит ниже списком). */
.uz-app {
    background: var(--uz-bg);
    position: relative;
    z-index: 1;
}

/* Контент под хромом должен лежать поверх фоновых свечений.
   ⚠️ .app-header и .sidebar сюда НЕ включать: у них свой z-index:20 объявлен выше,
   а это правило (позже в файле, та же специфичность) роняло их до 1 — и main,
   идущий позже в DOM, накрывал выпадающие меню шапки. */
main,
.uz-public {
    position: relative;
    z-index: 1;
}

/* ============================================================
   5. КОМПОНЕНТЫ DaisyUI → бренд
   ============================================================ */

/* --- Кнопки --- */
.btn {
    font-family: var(--uz-sans);
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: var(--uz-r-ctl);
    box-shadow: none;
    transition: transform .24s var(--uz-ease), box-shadow .24s var(--uz-ease),
                background-color .24s var(--uz-ease), border-color .24s var(--uz-ease), color .24s var(--uz-ease);
}

.btn:active { transform: scale(.985); }

/* PRIMARY — единственный «голубой» элемент: сплошной градиент + белый текст */
/* Цвета — из токенов, а не пятью литералами: #1C9DD8/#0B5E8A и так лежат в
   --uz-primary/--uz-primary-d, а дубликаты расходятся при первой же правке бренда.
   Hover-стопы выводим из тех же токенов через color-mix, чтобы и они ехали за брендом. */
.btn.btn-primary {
    background: linear-gradient(180deg, var(--uz-primary), var(--uz-primary-d));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
                0 6px 16px -6px color-mix(in oklch, var(--uz-primary-d) 55%, transparent);
}

.btn.btn-primary:hover {
    background: linear-gradient(180deg,
                color-mix(in oklch, var(--uz-primary) 88%, #fff),
                color-mix(in oklch, var(--uz-primary-d) 92%, #fff));
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
                0 10px 24px -8px color-mix(in oklch, var(--uz-primary-d) 60%, transparent);
}

.btn.btn-primary:active {
    transform: translateY(0) scale(.985);
    box-shadow: 0 2px 8px -3px rgba(11,94,138,.4);
}

/* Вторичные — тихие: рамка, без заливки (не конкурируют с действием) */
.btn.btn-secondary,
.btn.btn-outline,
.btn.btn-neutral {
    background: transparent;
    border-color: var(--uz-line);
    color: var(--uz-text);
    box-shadow: none;
}

.btn.btn-secondary:hover,
.btn.btn-outline:hover,
.btn.btn-neutral:hover {
    background: transparent;
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
}

.btn.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--uz-text-dim);
}

.btn.btn-ghost:hover {
    background: var(--uz-field-bg);
    color: var(--uz-text);
}

.btn.btn-error {
    background: var(--uz-danger);
    border-color: transparent;
    color: #fff;
}

.btn.btn-error:hover { filter: brightness(1.06); }

.btn.btn-success {
    background: var(--uz-success);
    border-color: transparent;
    color: #fff;
}

.btn.btn-success:hover { filter: brightness(1.06); }

/* ============ Ховер-отклик у ВСЕХ кликабельных кнопок ============
   Правило UX: смена цвета легко теряется — движение считывается мгновенно.
   Любая кнопка при наведении чуть приподнимается, при нажатии — вдавливается.
   Исключения: пункты меню (.uz-acc__item — им положена подсветка строки, не подъём)
   и «?»-подсказки (.uz-hint — у них своя анимация масштаба). */
.btn:hover:not(:disabled):not([disabled]) { transform: translateY(-1px); }

button:not(.btn):not(:disabled) {
    transition: transform .18s var(--uz-ease), box-shadow .18s var(--uz-ease),
                background-color .18s var(--uz-ease), border-color .18s var(--uz-ease),
                color .18s var(--uz-ease), filter .18s var(--uz-ease);
}

button:not(.btn):not(:disabled):not(.uz-acc__item):not(.uz-hint):not(.cabnav__dropbtn):not(.uz-search__btn):not(.uz-pw__btn):hover {
    transform: translateY(-1px);
}

button:not(.btn):not(:disabled):not(.uz-hint):not(.cabnav__dropbtn):not(.uz-search__btn):not(.uz-pw__btn):active {
    transform: translateY(0) scale(.96);
}

/* Малые pill-действия таблиц и тулбаров (утилитарные «bg-…/10 hover:bg-…/20» — «Найти»,
   «Удалить», «Запустить» и т.п.): на hover — окантовка своим цветом, БЕЗ подъёма
   (решение пользователя 2026-07-15: движение у мелких кнопок убрать, оставить рамку) */
button[class*="hover:bg-"]:not(.btn):not(:disabled):not(.uz-acc__item):not(.uz-hint):hover,
a[class*="hover:bg-"]:not(.btn):not(.tab):not(.card):hover {
    box-shadow: inset 0 0 0 1.5px currentColor;
    transform: none;
}

/* Кликабельные карточки (плитки-ссылки в панели) — подъём, как bento-плитки сайта */
a.card {
    transition: transform .2s var(--uz-ease), box-shadow .2s var(--uz-ease),
                border-color .2s var(--uz-ease);
}

a.card:hover {
    transform: translateY(-2px);
    border-color: var(--uz-primary);
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    button:not(.btn):hover,
    a[class*="hover:bg-"]:hover,
    a.card:hover { transform: none; }
}

.btn:disabled,
.btn[disabled] {
    opacity: .45;
    transform: none;
    box-shadow: none;
    filter: saturate(.5);
}

.btn.btn-link {
    color: var(--uz-accent-ink);
    font-weight: 600;
}

/* --- Карточки --- */
.card {
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-card-shadow);
    transition: transform .3s var(--uz-ease), border-color .3s, box-shadow .3s;
}

.card-hover:hover,
.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--uz-primary);
    box-shadow: var(--uz-shadow-lg);
}

/* --- Поля --- */
.input,
.select,
.textarea,
.file-input {
    font-family: var(--uz-sans);
    font-size: var(--fs-body);        /* 16px на всех ширинах: было 15px, а 16px включались
                                         только ≤680px — и то ради того, чтобы iOS не зумил форму */
    line-height: var(--lh-snug);
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    color: var(--uz-text);
    transition: border-color .24s var(--uz-ease), background-color .24s var(--uz-ease);
}

.input:focus,
.input:focus-within,
.select:focus,
.textarea:focus,
.file-input:focus,
.app-input:focus {
    outline: none;
    border-color: var(--uz-primary);
    box-shadow: 0 0 0 3px rgba(28, 157, 216, .2);
}

.input::placeholder,
.textarea::placeholder { color: var(--uz-text-dimmer); opacity: .75; }

/* Подпись поля — это то, что читают перед каждым вводом: 13px для неё мелко */
.label,
.fieldset-legend,
.label-text {
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--uz-text-dim);
}

/* ---------- Глазок «показать пароль» (обёртку и кнопку ставит js/uz-password.js) ---------- */
.uz-pw {
    position: relative;
    display: block;
}

.uz-pw .input { padding-right: 46px; }   /* текст не заезжает под кнопку */

.uz-pw__btn {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--uz-r-ctl);
    background: none;
    color: var(--uz-text-dimmer);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.uz-pw__btn svg {
    width: 20px;
    height: 20px;
    pointer-events: none;   /* SVG сам не ловит pointer-события, все события идут на кнопку */
}

/* Глазок не должен реагировать на наведение — только клик переключает пароль.
   Повышенная специфичность, чтобы перебить transition/transform у button:not(.btn):not(:disabled). */
.uz-pw .uz-pw__btn {
    transform: translateY(-50%);
    transition: none;
}
.uz-pw .uz-pw__btn:hover {
    color: var(--uz-text-dimmer);
    background: transparent;
    transform: translateY(-50%);
}
.uz-pw .uz-pw__btn:focus-visible {
    outline: none;
    color: var(--uz-text-dimmer);
    background: transparent;
    box-shadow: none;
}

.checkbox:checked,
.radio:checked,
.toggle:checked {
    border-color: var(--uz-primary);
    background-color: var(--uz-primary);
}

/* --- Бейджи: НЕЙТРАЛЬНЫЕ по умолчанию (голубой не уходит в декор) --- */
.badge {
    white-space: nowrap;
    font-family: var(--uz-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
    color: var(--uz-text-dim);
}

.badge.badge-primary {
    background: rgba(28, 157, 216, .12);
    border-color: rgba(28, 157, 216, .28);
    color: var(--uz-accent-ink);
}

.badge.badge-success {
    background: color-mix(in oklch, var(--uz-success) 12%, transparent);
    border-color: color-mix(in oklch, var(--uz-success) 30%, transparent);
    color: var(--uz-success);
}

.badge.badge-warning {
    background: color-mix(in oklch, var(--uz-warning) 12%, transparent);
    border-color: color-mix(in oklch, var(--uz-warning) 30%, transparent);
    color: var(--uz-warning);
}

.badge.badge-error {
    background: color-mix(in oklch, var(--uz-danger) 12%, transparent);
    border-color: color-mix(in oklch, var(--uz-danger) 30%, transparent);
    color: var(--uz-danger);
}

.badge.badge-info,
.badge.badge-neutral,
.badge.badge-ghost {
    background: var(--uz-icon-bg);
    border-color: var(--uz-line);
    color: var(--uz-text-dim);
}

/* --- Таблицы --- */
.table th,
.app-table th {
    font-family: var(--uz-mono);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--uz-text-dimmer);
    background: transparent;
}

.table td { font-size: 14px; color: var(--uz-text); }

.table tbody tr,
.app-table tbody tr { transition: background-color .15s ease; }

.table tbody tr:hover,
.app-table tbody tr:hover { background: var(--uz-field-bg); }

/* DaisyUI 5 вешает границу строки НА ЯЧЕЙКИ — `:where(thead tr :is(td,th), tbody tr:not(:last-child) :is(td,th))`,
   а не на сам <tr>. Прежнее правило целилось в tr и потому молча не работало: строки всё это время
   разделял дефолт DaisyUI (5% от base-content). Красим там, где граница действительно живёт. */
.table :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
    border-bottom-color: var(--uz-line-soft);
}

/* --- Модалки, выпадающие меню, тосты --- */
.modal-box,
.dropdown-content {
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-shadow-lg);
}

.modal-box { border-radius: var(--uz-r-card); }

/* Затемнение фона под модалками (решение пользователя 2026-07-16).
   daisyui гасит нативный ::backdrop (display:none) и затемняет сам .modal — до нас это
   не доезжало, справки открывались поверх незатемнённой страницы. Возвращаем нативный
   backdrop и красим его сами; цвет и блюр — как у модалки политики на сайте (.pmodal-dlg).
   Правила неслоёные, поэтому перебивают @layer daisyui.
   Фон самого .modal гасим в прозрачный — иначе затемнение сложилось бы в два слоя. */
dialog[open]::backdrop {
    display: block;
    background: rgba(8, 16, 24, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

dialog.modal[open] { background-color: transparent; }

.alert {
    border-radius: var(--uz-r-in);
    border: 1px solid var(--uz-line);
    font-size: 14px;
    font-weight: 600;
}

.alert.alert-success {
    background: color-mix(in oklch, var(--uz-success) 12%, var(--uz-surface));
    border-color: color-mix(in oklch, var(--uz-success) 30%, transparent);
    color: var(--uz-success);
}

.alert.alert-warning {
    background: color-mix(in oklch, var(--uz-warning) 12%, var(--uz-surface));
    border-color: color-mix(in oklch, var(--uz-warning) 30%, transparent);
    color: var(--uz-warning);
}

.alert.alert-error {
    background: color-mix(in oklch, var(--uz-danger) 12%, var(--uz-surface));
    border-color: color-mix(in oklch, var(--uz-danger) 30%, transparent);
    color: var(--uz-danger);
}

.alert.alert-info {
    background: rgba(28, 157, 216, .1);
    border-color: rgba(28, 157, 216, .26);
    color: var(--uz-accent-ink);
}

/* --- Вкладки, шаги, статистика --- */
.tabs .tab {
    font-weight: 600;
    color: var(--uz-text-dim);
}

.tabs .tab.tab-active {
    color: var(--uz-accent-ink);
    border-color: var(--uz-primary);
}

.stat-value { font-weight: 800; letter-spacing: -.02em; }
.stat-title { font-family: var(--uz-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--uz-text-dimmer); }

.steps .step-primary + .step-primary:before,
.steps .step-primary:after { background-color: var(--uz-primary); color: #fff; }

.link { color: var(--uz-accent-ink); }
.link:hover { color: var(--uz-primary-d); }

.loading { color: var(--uz-primary); }

kbd, code, .font-mono, .stat-desc { font-family: var(--uz-mono); }

/* ============================================================
   6. ПРИКЛАДНЫЕ КЛАССЫ ШАБЛОНОВ
   ============================================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--uz-text-dimmer);
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--uz-line), transparent);
}

/* Шапка страницы — без «задника»: заголовок и действия живут на фоне страницы,
   карточки остаются только у контента (решение пользователя 2026-07-15) */
.page-header {
    background: transparent;
}

/* Заголовок списка и подпись под ним — крупнее (решение пользователя 2026-07-15):
   Tailwind ставил text-xl/2xl + text-xs, читалось мелко. Перебиваем размером,
   не трогая кнопки-действия в шапке (у них свои классы). */
.page-header h1 {
    font-size: var(--fs-h2);
    line-height: var(--lh-tight, 1.15);
    letter-spacing: -0.01em;
}

.page-header > div p,
.page-header .gap-x-4.gap-y-1 > span {
    font-size: var(--fs-body);
    line-height: var(--lh-body, 1.5);
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--uz-mono);
    font-size: 12px;
    color: var(--uz-text-dimmer);
}

.breadcrumbs a { color: var(--uz-text-dimmer); transition: color .15s ease; }
.breadcrumbs a:hover { color: var(--uz-accent-ink); }
.breadcrumbs .separator { color: var(--uz-line); }
.breadcrumbs .current { color: var(--uz-text); font-weight: 600; }

/* Экраны входа/регистрации — «воздух» сайта вместо фиолетового радиала */
.auth-layout {
    background:
        radial-gradient(620px 420px at 50% -10%, var(--uz-glow-1), transparent 70%),
        radial-gradient(520px 380px at 8% 100%, var(--uz-glow-2), transparent 70%);
}

.landing-hero {
    background:
        radial-gradient(700px 460px at 78% -20%, var(--uz-glow-1), transparent 70%),
        radial-gradient(560px 420px at -6% 60%, var(--uz-glow-2), transparent 70%);
}

.landing-section { padding: 3rem 0; }

@media (min-width: 1024px) {
    .landing-section { padding: 4rem 0; }
}

/* Мелкая моно-подпись (шапка, служебные метки) */
.uz-label {
    font-family: var(--uz-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--uz-text-dimmer);
}

/* Аватар и чип роли */
.uz-role {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 12px;
    color: var(--uz-role-ink);
    flex-shrink: 0;
}

.uz-role--user { background: var(--uz-role-user); }
.uz-role--manager { background: var(--uz-role-manager); }
.uz-role--admin { background: var(--uz-role-admin); }
.uz-role--sadmin { background: var(--uz-role-sadmin); }

.uz-role-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--uz-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 999px;
}

/* Менеджер «на смене»: зелёная роль с пульсирующей точкой в начале */
.uz-role-chip--manager::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
    --pulse-c: color-mix(in oklch, currentColor 45%, transparent);
    animation: uzDotPulse 2.2s var(--uz-ease) infinite;
}

/* Пульс для точек-индикаторов: цвет кольца наследуется от текста через --pulse-c */
@keyframes uzDotPulse {
    0%        { box-shadow: 0 0 0 0 var(--pulse-c); }
    70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

.uz-dot-pulse {
    --pulse-c: color-mix(in oklch, currentColor 45%, transparent);
    animation: uzDotPulse 2.2s var(--uz-ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
    .uz-role-chip--manager::before,
    .uz-dot-pulse { animation: none; }
}

.uz-role-chip--user { color: var(--uz-role-user); background: color-mix(in oklch, var(--uz-role-user) 14%, transparent); }
.uz-role-chip--manager { color: var(--uz-role-manager); background: color-mix(in oklch, var(--uz-role-manager) 14%, transparent); }
.uz-role-chip--admin { color: var(--uz-role-admin); background: color-mix(in oklch, var(--uz-role-admin) 14%, transparent); }
.uz-role-chip--sadmin { color: var(--uz-role-sadmin); background: color-mix(in oklch, var(--uz-role-sadmin) 14%, transparent); }

/* Суффикс зоны в поле проверки домена */
.uz-tld {
    display: flex;
    align-items: center;
    padding: 0 18px;
    font-family: var(--uz-mono);
    font-size: 17px;
    font-weight: 700;
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .10);
    border: 1px solid var(--uz-line);
    border-left: 0;
    border-radius: 0 10px 10px 0;
    user-select: none;
}

/* Карточка-факт (что входит в регистрацию) */
.uz-feat {
    text-align: center;
    padding: 18px 12px;
}

.uz-feat__ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: var(--uz-r-ctl);
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
    color: var(--uz-text-dim);          /* иконки нейтральные — акцент только у действий */
}

.uz-feat__ico svg { width: 20px; height: 20px; }
.uz-feat__title { font-size: 14.5px; font-weight: 700; color: var(--uz-text); }
.uz-feat__sub { margin-top: 4px; font-size: 13px; color: var(--uz-text-dimmer); }

/* Плашка-eyebrow над заголовками (как на сайте) */
.uz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--uz-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--uz-text-dimmer);
}

.uz-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--uz-primary);
}

/* ============================================================
   7. ПУБЛИЧНЫЕ СТРАНИЦЫ: шапка и футер uzsci.net
   ============================================================ */
.uz-public {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--uz-bg);
}

.uz-public > main,
.uz-public > .uz-main { flex: 1; }

/* Шапка — перенесена с uzsci.net (те же классы и правила, что в styles.css сайта) */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 10px 16px 0;
}

.topbar {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 64px;
    padding: 0 16px 0 20px;
    background: var(--uz-header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-card-shadow);
    transition: background .4s, border-color .4s;
}

.logo { display: flex; align-items: center; flex-shrink: 0; min-width: 0; }

.logo__img {
    height: 54px;
    width: auto;
    display: block;
    filter: var(--uz-logo-filter);
    transition: filter .4s;
}

/* Телефоны у логотипа */
.phones {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 2px;
    color: var(--uz-text-dim);
}

.phones .ico { width: 19px; height: 19px; stroke: var(--uz-primary); fill: none; stroke-width: 1.8; }

.phones__call {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--uz-tap);
    min-height: var(--uz-tap);
    margin: -12px -8px;
    padding: 12px 8px;
}

.phones__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--uz-mono);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.phones__list a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--uz-accent-ink);
    transition: color .2s;
}

/* 1:1 с сайтом: hover = --uz-accent-d (в тёмной теме = базовому, номер не темнеет) + подчёркивание */
.phones__list a:hover { color: var(--uz-accent-d); text-decoration: underline; }

.phones__list i {
    font-style: normal;
    font-size: 10.5px;
    color: var(--uz-text-dimmer);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* Переключатель языков */
.lang { position: relative; margin-left: auto; }

.lang__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    color: var(--uz-text);
    font-family: var(--uz-mono);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: .2s;
}

.lang__btn:hover { border-color: var(--uz-primary); }
.lang__btn .ico { width: 14px; height: 14px; stroke: var(--uz-text-dim); fill: none; stroke-width: 2; transition: transform .2s; }
.lang.open .lang__btn .ico { transform: rotate(180deg); }

.lang__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 152px;
    padding: 6px;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    box-shadow: var(--uz-card-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .18s;
}

.lang.open .lang__menu { opacity: 1; visibility: visible; transform: none; }

.lang__menu a {
    display: flex;
    align-items: center;
    min-height: var(--uz-tap);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--uz-text-dim);
    transition: .15s;
}

.lang__menu a:hover { background: var(--uz-field-bg); color: var(--uz-text); }
.lang__menu a.is-active { color: var(--uz-accent-ink); font-weight: 600; }

/* «Главная» */
.topbar__home {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-height: var(--uz-tap);
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--uz-text);
}

.topbar__home::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 2px;
    background: var(--uz-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.topbar__home:hover::after { transform: scaleX(1); }

.theme-toggle svg,
.theme-selector-btn svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .ico-sun { display: none; }
[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* Тумблер темы в мобильном меню: ползунок с двумя состояниями */
.theme-switch {
    position: relative;
    flex-shrink: 0;
    width: 58px;
    height: 30px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--uz-line);
    background: var(--uz-field-bg);
    cursor: pointer;
    transition: background .3s, border-color .3s;
}

.theme-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    transition: transform .28s var(--uz-ease);
}

.theme-switch__knob svg { width: 14px; height: 14px; stroke: #1a1d21; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .ico-moon { display: none; }

.theme-name--dark { display: none; }
[data-theme="dark"] .theme-name--light { display: none; }
[data-theme="dark"] .theme-name--dark { display: inline; }
[data-theme="dark"] .theme-switch { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .theme-switch__knob { transform: translateX(28px); }
[data-theme="dark"] .theme-switch .ico-sun { display: none; }
[data-theme="dark"] .theme-switch .ico-moon { display: block; }

/* Бургер (только мобила) */
.burger {
    display: none;
    width: var(--uz-tap);
    height: var(--uz-tap);
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--uz-r-ctl);
    border: 1px solid var(--uz-line);
    background: var(--uz-field-bg);
    color: var(--uz-text-dim);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.burger:hover { border-color: var(--uz-primary); color: var(--uz-accent-ink); }
.burger svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.burger .ico-close { display: none; }
.burger.is-open .ico-burger { display: none; }
.burger.is-open .ico-close { display: block; }

/* Мобильное меню */
.mobmenu {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);
    z-index: 60;
    padding: 8px;
    background: var(--uz-header-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s, transform .22s var(--uz-ease), visibility .22s;
}

.mobmenu.is-open { opacity: 1; visibility: visible; transform: none; }

.mobmenu__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 4px 16px;
    border-radius: var(--uz-r-ctl);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--uz-text);
    transition: background .18s, color .18s;
}

.mobmenu__link:active { background: var(--uz-field-bg); }
.mobmenu__link[aria-current="page"] { color: var(--uz-accent-ink); background: var(--uz-field-bg); }

.mobmenu__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    margin-top: 8px;
    padding: 4px 16px;
    border-top: 1px solid var(--uz-line-soft);
    color: var(--uz-text-dim);
    font-size: 14.5px;
    font-weight: 600;
}

/* «Кабинет» в бургер-меню: раскрывающийся пункт с почтой, входом в кабинет и выходом.
   Нативный <details> вместо своего JS — раскрытие, фокус и клавиатура работают сами.
   Отбивка сверху как у тумблера темы: это уже не раздел сайта, а личное. */
.mobmenu__acc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--uz-line-soft);
}

/* list-style снимает штатный треугольник (в WebKit — своим псевдоэлементом) */
.mobmenu__acc > summary {
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}
.mobmenu__acc > summary::-webkit-details-marker { display: none; }
.mobmenu__acc[open] > summary { color: var(--uz-accent-ink); }

.mobmenu__acc-chev {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s var(--uz-ease, ease);
}
.mobmenu__acc[open] .mobmenu__acc-chev { transform: rotate(180deg); }

.mobmenu__acc-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 6px;
}
.mobmenu__acc-mail {
    font-size: 13px;
    color: var(--uz-text-dimmer);
    overflow-wrap: anywhere;      /* длинная почта не должна распирать меню */
}

/* Вложенность показываем отступом, а не рамкой: рамка спорила бы с рамкой самого блока */
.mobmenu__acc-item { padding-left: 28px; }

/* Кнопка выхода живёт в <form> (POST + CSRF), поэтому это button, а не ссылка:
   гасим его собственное оформление и наследуем шрифт — иначе выпадает из ряда пунктов. */
.mobmenu__acc-out {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--uz-danger);
}

/* Подхедер-«пилюля» с услугами */
.subnav {
    display: flex;
    justify-content: center;
    padding: 8px 16px 0;
}

.subnav__pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    background: var(--uz-header-bg);
    border: 1px solid var(--uz-line);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Объём вернули (решение пользователя 2026-08-07 — отменяет плоский вид от 2026-08-01,
       когда тень сняли из-за «двойной полки» под шапкой).
       Берём тот же токен, что у .topbar, а не новый литерал: подхедер и шапка — один
       уровень над страницей, и разъезжаться их тени не должны. Токен переключается по
       теме сам, так что в тёмной пилюля не получит светлую подложку. */
    box-shadow: var(--uz-card-shadow);
}

.subnav__pill a {
    display: inline-flex;
    align-items: center;
    min-height: var(--uz-tap);
    padding: 8px 16px;
    border-radius: 999px;
    font-family: var(--uz-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--uz-text-dim);
    white-space: nowrap;
    transition: .18s;
}

.subnav__pill a:hover { color: var(--uz-text); background: var(--uz-field-bg); }

.subnav__pill a.is-active {
    color: var(--uz-accent-ink);
    font-weight: 700;
    background: rgba(28, 157, 216, .10);
}

.subnav__sep { width: 1px; height: 16px; background: var(--uz-line); }

/* ===== Раскрываемые разделы пилюли (кабинет менеджера/админа) =====
   Кнопка выглядит как пункт пилюли, меню — как языковое меню топбара.
   Пункт навигации, не действие: без hover-подъёма (исключён в общих правилах кнопок). */

/* Пилюля — поверх контента: без своего z-index выпадающие меню разделов
   проваливаются под карточки (у контента свои стекинг-контексты) */
.subnav--cab { position: relative; z-index: 5; }

.cabnav__drop { position: relative; }

.cabnav__dropbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--uz-tap);
    padding: 8px 16px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-family: var(--uz-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--uz-text-dim);
    white-space: nowrap;
    cursor: pointer;
    transition: .18s;
}

.cabnav__dropbtn .ico {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform .2s;
}

.cabnav__drop.open .cabnav__dropbtn .ico { transform: rotate(180deg); }

.cabnav__dropbtn:hover { color: var(--uz-text); background: var(--uz-field-bg); }

.cabnav__drop.open .cabnav__dropbtn,
.cabnav__dropbtn.is-active {
    color: var(--uz-accent-ink);
    font-weight: 700;
    background: rgba(28, 157, 216, .10);
}

.cabnav__menu {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    min-width: 224px;
    padding: 6px;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    box-shadow: var(--uz-card-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: .18s;
    z-index: 30;
}

.cabnav__drop.open .cabnav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Пункты меню перекрывают общие стили ссылок пилюли (идут в файле ПОЗЖЕ .subnav__pill a) */
.cabnav__menu a {
    display: flex;
    align-items: center;
    min-height: var(--uz-tap);
    padding: 8px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--uz-text-dim);
    white-space: nowrap;
    transition: .15s;
}

.cabnav__menu a:hover { background: var(--uz-field-bg); color: var(--uz-text); }
.cabnav__menu a.is-active { color: var(--uz-accent-ink); font-weight: 600; background: transparent; }

/* Футер */
.uz-footer {
    position: relative;
    z-index: 1;
    margin-top: 64px;
    border-top: 1px solid var(--uz-line);
    background: var(--uz-surface);
}

.uz-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 44px 24px 28px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 32px;
}

.uz-footer__logo {
    height: 44px;
    width: auto;
    filter: var(--uz-logo-filter);
}

.uz-footer__tagline {
    margin-top: 12px;
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--uz-text-dimmer);
}

.uz-footer__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uz-footer__col a {
    font-size: 14px;
    color: var(--uz-text-dim);
    transition: color .18s;
}

.uz-footer__col a:hover { color: var(--uz-accent-ink); }
.uz-footer__addr { font-size: 14px; color: var(--uz-text-dimmer); }

.uz-footer__bottom {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 24px 28px;
    border-top: 1px solid var(--uz-line-soft);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--uz-text-dimmer);
}

@media (max-width: 900px) {
    .uz-footer__inner { grid-template-columns: 1fr 1fr; }
    .uz-footer__brand { grid-column: 1 / -1; }
}

/* Мобильная шапка (как на сайте): лого слева; трубка/язык/бургер справа;
   тумблер темы и «Главная» уезжают в бургер-меню, подхедер скрыт. */
@media (max-width: 680px) {
    .uz-back { display: none; }
    .topbar { gap: 8px; }

    /* Меню аккаунта на телефоне целиком уезжает в бургер (решение пользователя 2026-07-31):
       в шапке оно занимало ~90px, из-за чего на 375px бургер выдавливало за экран и вся
       страница ехала вбок. Раньше ради места прятали трубку и переносили телефоны пунктами
       в бургер — теперь наоборот: шапка вошедшего равна шапке гостя, телефон в неё вернулся,
       а пункты-телефоны из меню убраны. Состав меню аккаунта — в .mobmenu__acc. */
    .uz-acc { display: none; }
    /* Трубка стоит вплотную к логотипу (решение пользователя 2026-08-05): свободное место
       забирает язык, а не телефон, иначе между шариком и трубкой зияла пустая полоса. */
    .phones { margin-left: 0; padding-left: 0; position: relative; }
    .phones__list { display: none; }         /* текст прячем, трубку оставляем */
    .phones .ico { width: 22px; height: 22px; }

    /* Тап по трубке раскрывает оба номера (решение пользователя 2026-08-01): раньше она
       молча набирала первый, и до техподдержки с телефона было не добраться.
       Оформление — как у меню языков рядом, чтобы шапка вела себя единообразно. */
    .phones.open .phones__list {
        display: flex;
        position: absolute;
        /* Раскрываемся ВПРАВО от трубки: она теперь у логотипа, и прежний right:0
           уводил список за левый край экрана (при 390px левый край был -77px). */
        left: 0;
        top: calc(100% + 12px);
        z-index: 70;
        gap: 2px;
        /* по содержимому: номер моноширинным ~150px + паддинги. 232px растягивали меню
           почти во всю ширину экрана, и оно упиралось в левый край */
        min-width: 196px;
        padding: 6px;
        background: var(--uz-surface);
        border: 1px solid var(--uz-line);
        border-radius: var(--uz-r-ctl);
        box-shadow: var(--uz-card-shadow);
    }

    /* Номер и отдел — в две строки: подпись рядом с номером не влезала в ширину меню */
    .phones.open .phones__list a {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 1px;
        min-height: var(--uz-tap);
        padding: 4px 10px;
        border-radius: 8px;
    }
    .phones.open .phones__list a:active { background: var(--uz-field-bg); }
    .phones.open .phones__list i {
        font-family: var(--uz-sans);
        font-style: normal;
        font-size: 11.5px;
        color: var(--uz-text-dimmer);
    }
    .lang { margin-left: auto; }
    .topbar .theme-toggle { display: none; }
    .topbar__home { display: none; }
    .subnav { display: none; }
    .burger { display: flex; }
    .mobmenu { display: block; }
    .logo__img { height: 46px; }
    .uz-footer__inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 20px; }
}

@media (max-width: 360px) {
    .logo__img { height: 40px; }
}

/* ============================================================
   8. ЛЕНДИНГ И ПУБЛИЧНЫЙ КОНТЕНТ
   ============================================================ */
.uz-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.uz-wrap--narrow { max-width: 760px; }

/* Плашка окружения (dev/stage) — как testbar на сайте */
.uz-envbar {
    position: relative;
    z-index: 2;
    padding: 8px 16px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 10%, transparent);
    border-bottom: 1px solid color-mix(in oklch, var(--uz-warning) 25%, transparent);
}

.uz-envbar--stage {
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .10);
    border-bottom-color: rgba(28, 157, 216, .25);
}

.uz-hero { padding: 48px 0 24px; }

.uz-h1 {
    margin-top: 16px;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.uz-lead {
    max-width: var(--measure);
    margin: 16px auto 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-relaxed);
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

/* Полоса доверия — как .hero__trust на сайте */
.uz-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    list-style: none;
    padding: 0;
}

.uz-trust li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
}

.uz-trust b {
    font-family: var(--uz-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--uz-text);
}

.uz-trust span {
    font-size: 12.5px;
    color: var(--uz-text-dimmer);
}

.uz-check {
    max-width: 520px;
    margin: 28px auto 0;
    text-align: left;
}

.uz-check .label { display: flex; }

.uz-check__note {
    margin-top: 16px;
    text-align: center;
    font-size: 13.5px;
    color: var(--uz-text-dimmer);
}

.uz-section { padding: 56px 0; }

.uz-h2 {
    margin-bottom: 32px;
    text-align: center;
    font-size: clamp(1.5625rem, 1.05rem + 1.85vw, 1.9375rem);
    font-weight: 800;
    letter-spacing: -.015em;
}

/* Шаги */
.uz-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    counter-reset: step;
}

.uz-steps li {
    padding: 24px 20px;
    text-align: center;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-card-shadow);
}

.uz-steps__n {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: var(--uz-r-in);
    font-family: var(--uz-mono);
    font-size: 17px;
    font-weight: 700;
    color: var(--uz-text-dim);
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
}

.uz-steps h3 { font-size: 16px; font-weight: 700; }
.uz-steps p { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--uz-text-dimmer); }

/* Преимущества */
.uz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 32px;
}

.uz-adv {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.uz-adv .uz-feat__ico { margin: 0; flex-shrink: 0; }
.uz-adv h3 { font-size: 15.5px; font-weight: 700; }
.uz-adv p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--uz-text-dimmer); }

/* FAQ */
.uz-faq {
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-in);
    box-shadow: var(--uz-card-shadow);
}

.uz-faq .collapse-title { font-size: 15.5px; font-weight: 700; color: var(--uz-text); }
.uz-faq .collapse-content p { font-size: 14.5px; line-height: 1.65; color: var(--uz-text-dim); }

/* Финальный призыв */
.uz-cta {
    padding: 44px 32px;
    text-align: center;
    border-radius: var(--uz-r-card);
    background: linear-gradient(135deg, #1C9DD8, #0B5E8A);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(28,157,216,.35), 0 20px 40px -12px rgba(11,94,138,.45);
}

.uz-cta h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 1.875rem); font-weight: 800; }
.uz-cta p { margin-top: 8px; color: rgba(255, 255, 255, .85); }

.uz-cta__row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* На градиенте кнопки инвертируются: белая — действие, прозрачная — вторичная */
.uz-cta .btn.btn-primary {
    background: #fff;
    color: var(--uz-primary-d);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35);
}

.uz-cta .btn.btn-primary:hover { background: #fff; filter: brightness(.97); }

.uz-cta .btn.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}

.uz-cta .btn.btn-outline:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

@media (max-width: 980px) {
    .uz-steps { grid-template-columns: repeat(2, 1fr); }
    .uz-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .uz-hero { padding: 32px 0 16px; }
    .uz-section { padding: 40px 0; }
    .uz-lead { font-size: var(--fs-body); }   /* лид на мобиле опускается до тела, но не ниже 16px */
    .uz-steps { grid-template-columns: 1fr; }
    .uz-grid { grid-template-columns: 1fr; }
    .uz-cta { padding: 32px 20px; }
    .uz-cta__row .btn { width: 100%; }
}

/* ============================================================
   9. ЭКРАНЫ ВХОДА / РЕГИСТРАЦИИ
   ============================================================ */
/* Экраны входа/регистрации занимают ровно один экран (шапка + контент), футер уходит под сгиб:
   высота шапки меряется в рантайме и кладётся в --uz-hdr (site-chrome :: themeScript),
   поэтому раскладка одинаково честно ложится и на ноутбук, и на большой монитор. */
.uz-auth {
    display: flex;
    align-items: center;           /* одиночная карточка (вход, восстановление) — по центру экрана */
    justify-content: center;
    min-height: calc(100svh - var(--uz-hdr, 132px));
    padding: 40px 20px 56px;
}


/* Шапка страницы (H1 + лид) дышит на всю колонку, как в героя сайта,
   а карточка формы остаётся узкой — 52px заголовок в 440px просто не живёт. */
.uz-auth__box { width: 100%; max-width: 640px; }
.uz-auth__card { max-width: 440px; margin-inline: auto; }

/* Плашки над формой (сеанс истёк, ошибка входа, выход) выравниваем по КАРТОЧКЕ ФОРМЫ,
   а не по колонке: на 640px короткая фраза тонула в пустоте, а по содержимому капсула
   вставала уже формы и края не сходились. Совпадение краёв читается как один блок. */
.uz-auth__box > .alert {
    width: 100%;
    max-width: 440px;
    margin-inline: auto;
    padding: 10px 16px;
    /* daisyUI держит .alert на grid с колонками «иконка | текст», где текстовая колонка
       забирает весь остаток — иконка прилипала к левому краю. Переводим во flex, чтобы
       центрировать иконку и текст ОДНОЙ группой, а не каждый в своей колонке. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

/* Главное действие формы отделяем от полей: в общем шаге 16px кнопка читается
   как ещё одна строка ввода, а она — завершение, а не часть списка. */
.uz-auth__card form > .btn-primary { margin-top: 20px; }

/* Колонка страницы: форма узкая, шаги «Как это работает» — во всю ширину.
   Растягивается на высоту экрана: зазор между формой и шагами дышит вместе с монитором. */
.uz-auth__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;           /* колонка «форма + шаги» тянется на высоту экрана */
    gap: clamp(32px, 5vh, 56px);   /* нижняя граница 32px: на низком экране зазор до шагов
                                      сжимался до 20px и блок «прилипал» к форме */
    width: 100%;
    max-width: 940px;
}

.uz-auth__stack > .uz-how { margin-top: 0; }

.uz-auth__stack .uz-how { width: 100%; }

.uz-auth__logo {
    height: 56px;
    width: auto;
    margin: 0 auto 16px;
    display: block;
    filter: var(--uz-logo-filter);
}

/* Заголовок страницы набран как H1 героя сайта (.phero__title) — вес 800, плотный
   интерлиньяж, трекинг −.03em, — но на ступень тише: это форма, а не витрина. */
.uz-auth__title {
    font-size: var(--fs-title);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: -.03em;
    text-wrap: balance;
}

/* Лид под заголовком = .phero__lead сайта: 18px, вес тела (500), интерлиньяж 1.65 */
.uz-auth__sub {
    margin-top: 8px;
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--uz-text-dim);
}

.uz-auth__sub b { color: var(--uz-accent-ink); font-weight: 700; }

.uz-auth__card { box-shadow: var(--uz-card-shadow); }

.uz-auth__links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--uz-text-dimmer);
}

.uz-auth__links a:hover { color: var(--uz-text); }

/* Обязательный чекбокс согласия на обработку ПДн (анкета владельца) */
.uz-consent {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    color: var(--uz-text-dim);
    cursor: pointer;
    text-align: left;
}
.uz-consent input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--uz-primary);
    cursor: pointer;
}
.uz-consent__err {
    margin-top: 6px;
    font-size: var(--fs-caption);
    color: var(--uz-danger);
    text-align: center;
}

.uz-auth__consent {
    margin-top: 10px;
    font-size: var(--fs-caption);
    line-height: var(--lh-body);
    text-align: center;
    color: var(--uz-text-dimmer);
}

/* Информационная плашка (например, «домен будет зарезервирован») */
.uz-note {
    margin-bottom: 16px;
    padding: 12px 16px;
    text-align: center;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--uz-text-dim);
    background: rgba(28, 157, 216, .08);
    border: 1px solid rgba(28, 157, 216, .22);
    border-radius: var(--uz-r-in);
}

.uz-note b { color: var(--uz-accent-ink); font-weight: 700; }

/* ---------- Плашка-предупреждение: менеджер вернул шаг на доработку ----------
   Жёлтая, с иконкой слева и комментарием менеджера — клиент понимает, почему снова
   видит кнопку («Запросить договор» / «Я оплатил»). Показывается на договоре и оплате. */
.uz-note--warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    color: var(--uz-text);
    background: color-mix(in srgb, var(--uz-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--uz-warning) 40%, transparent);
}
.uz-note--warn > svg { flex: none; margin-top: .1em; color: var(--uz-warning); }
.uz-note--warn b { display: block; margin-bottom: 2px; color: var(--uz-warning); }

/* ---------- Плашка «живого» статуса: точка-индикатор + текст по левому краю ----------
   Пульсация говорит, что процесс идёт прямо сейчас (домен держится в реестре),
   а не просто сообщает факт. Строки разделены — каждая несёт свою мысль. */
.uz-note--live {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    /* Плашка брони — предупреждение (7 дней или домен вернётся в общий доступ):
       оранжевая, как «вернули на доработку» (.uz-note--warn), не голубая-инфо. */
    color: var(--uz-text);
    background: color-mix(in srgb, var(--uz-warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--uz-warning) 40%, transparent);
}
.uz-note--live b { color: var(--uz-warning); }

.uz-note__dot {
    flex: none;
    width: 9px;
    height: 9px;
    margin-top: .55em;                  /* точка садится на первую строку, а не на верх блока */
    border-radius: 50%;
    background: var(--uz-warning);
    animation: uzNotePulse 2.2s var(--uz-ease) infinite;
}

.uz-note__body p + p { margin-top: 4px; }

/* Вторая строка отделена полосой — тем же приёмом, что «ждём проверки» на экране
   «Данные на проверке» (.uz-review__wait): первая строка про факт брони, вторая
   про срок, и без разделителя они читались одним абзацем. Цвет берём от самой
   плашки: --uz-line-soft на оранжевой подложке почти не виден. */
.uz-note--live .uz-note__body p + p {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--uz-warning) 28%, transparent);
}

@keyframes uzNotePulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--uz-warning) 45%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .uz-note__dot { animation: none; }
}

/* ===== «Как это работает»: путь клиента слева направо =====
   Пройденные шаги — галочка, от активного к следующему бегут три точки. */
.uz-how {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--uz-line-soft);
}

.uz-how__title {
    margin-bottom: 32px;           /* шаги стоят заметно ниже заголовка */
    text-align: center;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--uz-text);
}

.uz-how__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
    padding: 0;
}

.uz-how__list li {
    position: relative;
    padding: 0 8px;
    text-align: center;
}

/* кружок шага */
.uz-how__n {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 50%;
    font-family: var(--uz-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--uz-text-dimmer);
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
    transition: background .3s, color .3s, border-color .3s;
}

.uz-how__check {
    display: none;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.uz-how__list h3 { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--uz-text); }
.uz-how__list p { margin-top: 4px; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--uz-text-dim); }

/* соединитель: три точки между кружками */
.uz-how__dots {
    position: absolute;
    top: 20px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translateY(-50%);
    pointer-events: none;
}

.uz-how__list li:last-child .uz-how__dots { display: none; }

.uz-how__dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uz-line);
    transition: background .3s;
}

/* текущий шаг: подсвеченный номер + точки, «перетекающие» в следующий пункт */
.uz-how__list li.is-active .uz-how__n {
    color: #fff;
    background: linear-gradient(180deg, #1C9DD8, #0B5E8A);
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(28, 157, 216, .14);
}

.uz-how__list li.is-active h3 { color: var(--uz-accent-ink); }

.uz-how__list li.is-active .uz-how__dots i {
    background: var(--uz-primary);
    animation: uzHowFlow 1.5s var(--uz-ease) infinite;
}

.uz-how__list li.is-active .uz-how__dots i:nth-child(1) { animation-delay: 0s; }
.uz-how__list li.is-active .uz-how__dots i:nth-child(2) { animation-delay: .18s; }
.uz-how__list li.is-active .uz-how__dots i:nth-child(3) { animation-delay: .36s; }

@keyframes uzHowFlow {
    0%, 100% { opacity: .25; transform: scale(.8); }
    40%      { opacity: 1;   transform: scale(1.25); }
}

/* пройденный шаг: галочка вместо номера, соединитель залит, анимации нет */
.uz-how__list li.is-done .uz-how__n {
    color: #fff;
    background: var(--uz-success);
    border-color: transparent;
}

.uz-how__list li.is-done .uz-how__num { display: none; }
.uz-how__list li.is-done .uz-how__check { display: block; }
.uz-how__list li.is-done .uz-how__dots i { background: var(--uz-success); opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    .uz-how__list li.is-active .uz-how__dots i { animation: none; opacity: .9; }
}

/* Мобила: шаги в столбик, точки перетекают сверху вниз */
@media (max-width: 680px) {
    .uz-how__list { grid-template-columns: 1fr; gap: 22px; }

    .uz-how__list li {
        padding: 0 0 0 56px;
        text-align: left;
    }

    .uz-how__n { position: absolute; left: 0; top: 0; margin: 0; }

    .uz-how__dots {
        top: 46px;
        left: 20px;
        right: auto;
        bottom: -20px;
        flex-direction: column;
        gap: 8px;
        transform: none;
    }
}

/* Шаги регистрации */
.uz-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    list-style: none;
    padding: 0;
}

.uz-stepper li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uz-text-dimmer);
}

.uz-stepper li:not(:last-child)::after {
    content: '';
    width: 18px;
    height: 2px;
    margin-left: 4px;
    border-radius: 2px;
    background: var(--uz-line);
}

.uz-stepper li span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--uz-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--uz-text-dimmer);
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
}

.uz-stepper li.is-active { color: var(--uz-text); }

.uz-stepper li.is-active span {
    color: #fff;
    background: linear-gradient(180deg, #1C9DD8, #0B5E8A);
    border-color: transparent;
}

@media (max-width: 560px) {
    .uz-stepper li:not(.is-active) { font-size: 0; gap: 0; }
    .uz-stepper li:not(:last-child)::after { width: 12px; }
}

/* ============================================================
   10. МОБИЛЬНЫЙ САЙДБАР (механика Дениса, оформление наше)
   ============================================================ */
.mobile-menu-btn { display: none; }

@media (max-width: 1024px) {
    .mobile-menu-btn { display: inline-flex; }

    .sidebar {
        position: fixed;
        z-index: 40;
        height: 100%;
        transform: translateX(-100%);
        transition: transform .3s var(--uz-ease);
        box-shadow: var(--uz-shadow-lg);
    }

    .sidebar.open { transform: translateX(0); }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(7, 10, 16, .55);
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.open { display: block; }
}

/* Поля 16px теперь в базе (--fs-body) — iOS не зумит их на любой ширине,
   отдельное мобильное правило больше не нужно. */

/* ============================================================
   11. ФИНАЛЬНЫЕ ПРАВИЛА (идут последними — перекрывают базовые)
   ============================================================ */

/* Выпадающий список: свой шеврон, чтобы было видно, что «1 год» — не единственный вариант */
.select,
select.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352606b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px 16px;
    cursor: pointer;
}

[data-theme="dark"] .select,
[data-theme="dark"] select.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a7bb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C9DD8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }


/* Экран «Проверьте почту» */
.uz-sent__ico {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .10);
    border: 1px solid rgba(28, 157, 216, .26);
}

.uz-sent__ico svg { width: 28px; height: 28px; }

.uz-sent__hint {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
    color: var(--uz-text-dimmer);
}


/* ===== Страницы кабинета в контентной колонке (контакты, договор и т.п.) ===== */
.uz-page {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.uz-page__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--uz-text);
}

.uz-page__lead {
    margin-top: 8px;
    max-width: var(--measure);
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--uz-text-dim);
}

/* шаги идут ПОД формой — как итог: «что будет дальше» */
.uz-page > .uz-how { margin-top: 32px; }
.uz-page > .flex + .alert,
.uz-page__card { margin-top: 24px; }

.uz-page__card .card-body { padding: 28px 30px; }

/* Внутренний двухшаговый переключатель формы */
.uz-page .steps .step { font-family: var(--uz-mono); font-size: 12px; color: var(--uz-text-dimmer); }
.uz-page .steps .step-primary { color: var(--uz-accent-ink); font-weight: 700; }
.uz-page .steps { margin-bottom: 24px; }

/* Разделители секций формы («Общие контактные данные», «Паспортные данные») */
.uz-page .divider {
    margin: 22px 0 16px;
    font-family: var(--uz-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uz-text-dimmer);
}

.uz-page .label span { font-size: 13px; font-weight: 600; color: var(--uz-text-dim); }
.uz-page .input, .uz-page .select { min-height: 44px; }

@media (max-width: 680px) {
    .uz-page__card .card-body { padding: 16px; }
    /* ⚠️ Парные поля (Страна+Регион, Индекс+Город и т.д.) лежат в сетке `grid-cols-2 gap-4`.
       На телефоне она схлопывается в одну колонку — и тогда к собственному `mb-4` поля
       (16px) добавлялся ещё и `gap` сетки (16px): ВНУТРИ пары получалось 32px, а между
       остальными полями 16px. Отсюда «разные отступы» при одинаковых классах.
       В одной колонке горизонтальный зазор не нужен, поэтому гасим gap — шаг везде
       задаёт только mb-4, и он одинаковый. */
    .uz-page .grid.grid-cols-2 { grid-template-columns: 1fr; gap: 0; }
    .uz-page__title { font-size: var(--fs-h3); }
}

/* Одиночная карточка (вход, восстановление, вход по домену) центрируется ПО ЭКРАНУ,
   а не по области под шапкой: поднимаем её на половину высоты шапки.
   Только когда экран достаточно высокий — иначе карточка уехала бы под шапку. */
@media (min-height: 820px) {
    .uz-auth > .uz-auth__box {
        margin-top: calc(-1 * var(--uz-hdr, 132px));
    }
}

/* «Главная | Войти/Кабинет» в шапке (страницы входа и регистрации) */
.topbar__sep {
    width: 1px;
    height: 18px;
    flex-shrink: 0;
    background: var(--uz-line);
}

.topbar__login {
    display: inline-flex;
    align-items: center;
    position: relative;
    min-height: var(--uz-tap);
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--uz-accent-ink);
    transition: color .2s;
}

.topbar__login::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 2px;
    background: var(--uz-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s;
}

.topbar__login:hover::after { transform: scaleX(1); }

@media (max-width: 680px) {
    .topbar__sep,
    .topbar__login { display: none; }
}

/* Страницы флоу регистрации на публичном хроме (контакты, ожидание проверки) */
.uz-flow {
    padding: 40px 20px 64px;
}

.uz-flow > .uz-page,
.uz-flow > section,
.uz-flow > .uz-auth__stack { margin: 0 auto; }   /* колонка по центру страницы */

@media (max-width: 680px) {
    .uz-flow { padding: 24px 16px 40px; }
}

/* ===== Экран «Данные на проверке» ===== */
.uz-review {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
}

.uz-review__ico {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--uz-warning) 30%, transparent);
}

.uz-review__ico svg { width: 30px; height: 30px; }

.uz-review__title { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--uz-text); }

.uz-review__sub {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--uz-text-dim);
}

.uz-review__card { margin-top: 24px; text-align: left; }

.uz-review__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    list-style: none;
    padding: 0;
}

.uz-review__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 16px;                 /* было 14px + --uz-text-dim — «едва видно» */
    font-weight: 600;
    line-height: 1.5;
    color: var(--uz-text);
}

.uz-review__n {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-family: var(--uz-mono);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--uz-text-dimmer);
    background: var(--uz-icon-bg);
    border: 1px solid var(--uz-line);
}

.uz-review__wait {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--uz-line-soft);
    font-size: 15px;                 /* было 13px + --uz-text-dimmer */
    font-weight: 500;
    line-height: 1.55;
    color: var(--uz-text-dim);
}

.uz-review__out { margin-top: 16px; }

/* ===== Меню аккаунта в шапке (как у Дениса: почта, роль, «Аккаунт», «Выйти») ===== */
.uz-acc { position: relative; }

.uz-acc__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 0;
    cursor: pointer;
}

.uz-acc__chev {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform .2s;
}

.uz-acc.open .uz-acc__chev { transform: rotate(180deg); }

.uz-acc__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    padding: 6px;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-in);
    box-shadow: var(--uz-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: .18s;
    z-index: 60;
}

.uz-acc.open .uz-acc__menu { opacity: 1; visibility: visible; transform: none; }

.uz-acc__head {
    display: flex;
    align-items: center;           /* роль стоит СПРАВА от логина, не под ним */
    flex-wrap: wrap;               /* длинный e-mail не выдавит чип за край — тот перенесётся */
    gap: 4px 8px;
    padding: 12px;
    border-bottom: 1px solid var(--uz-line-soft);
    margin-bottom: 8px;
}

.uz-acc__mail {
    font-size: 13px;
    font-weight: 700;
    color: var(--uz-text);
    word-break: break-all;
}

.uz-acc__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--uz-r-ctl);
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--uz-text-dim);
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.uz-acc__item:hover { background: var(--uz-field-bg); color: var(--uz-text); }
.uz-acc__item--out { color: var(--uz-danger); }
.uz-acc__item--out:hover { background: color-mix(in oklch, var(--uz-danger) 10%, transparent); color: var(--uz-danger); }

/* Первый экран = сама форма (карточка). Блок «Как это работает» уходит под сгиб —
   его видно только после прокрутки, как и просили. */
.uz-auth__stack > .uz-auth__box,
.uz-auth__stack > .uz-review {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--uz-hdr, 132px) - 90px);
}

.uz-auth__stack > .uz-how { margin-top: 8px; padding-top: 30px; }

/* Метка этапа над заголовком страницы кабинета */
.uz-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--uz-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--uz-text-dimmer);
}

.uz-page__eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--uz-primary);
}

.uz-page__title { margin-top: 8px; }

/* Плашка не должна липнуть к лиду */
.uz-page__note { margin-top: 24px; }

/* Внутренний переключатель формы: компактнее и с разведёнными подписями */
.uz-page .steps { margin: 0 auto 26px; }

.uz-page .steps .step {
    min-width: 132px;          /* иначе «Контакты» и «Документы» слипаются */
    font-size: 12px;
    gap: 4px;
}

.uz-page .steps .step::after {
    width: 22px;
    height: 22px;
    font-size: 11px;
    font-family: var(--uz-mono);
}

/* Воздух под карточкой формы — на любом экране */
.uz-page__card { margin-bottom: 44px; }

/* ===== Мини-футер страниц входа/регистрации =====
   Без фона и рамок: фон-«рэк» страницы просто продолжается — визуального перехода нет. */
.uz-foot {
    position: relative;
    z-index: 1;
    background: transparent;
    /* Нижний отступ 34px оставлял под «Политикой конфиденциальности» заметную полосу
       фона — футер выглядел висящим, а не прижатым к низу (решение пользователя 2026-08-01). */
    padding: 28px 20px 14px;
}

.uz-foot__in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--uz-text-dimmer);
}

.uz-foot__legal {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--uz-accent-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.uz-foot__legal:hover { color: var(--uz-primary-d); }

/* ============================================================
   ОТЗЫВ О СЕРВИСЕ (2026-08-14)
   ============================================================
   Кнопка над копирайтом: белая с серой окантовкой (решение пользователя) — тихое
   приглашение, а не действие экрана, поэтому брендового голубого здесь нет. */
.uz-fb__open {
    margin-bottom: 10px;
    /* Кегль и высота подняты по просьбе пользователя 2026-08-14: в первой версии кнопка
       была вровень с мелким текстом футера и терялась в нём. */
    padding: 11px 22px;
    min-height: 42px;
    border: 1px solid var(--uz-line);
    border-radius: 999px;
    background: var(--uz-card-bg, #fff);
    font-size: 14px;
    font-weight: 600;
    color: var(--uz-text-dim);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.uz-fb__open:hover {
    border-color: color-mix(in oklch, var(--uz-primary) 45%, var(--uz-line));
    color: var(--uz-text);
}

/* Текст окна по центру (решение пользователя 2026-08-14) — обращение к клиенту читается
   как записка, а не как форма. Само поле ввода остаётся с левым краем: набирать и править
   текст, который прыгает от центра, неудобно. */
/* Ширина 560px (решение пользователя 2026-08-14): при 460px строка «Мы хотим становиться
   лучше, и в этом нам нужна ваша помощь» ломалась пополам. */
.uz-fb { position: relative; max-width: 560px; text-align: center; }

/* Крестик в углу окна. Тап-таргет полный, видимый значок мельче. */
.uz-fb__close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--uz-tap);
    height: var(--uz-tap);
    padding: 0;
    border: 0;
    background: none;
    color: var(--uz-text-dimmer);
    cursor: pointer;
}

.uz-fb__close svg { width: 17px; height: 17px; }
.uz-fb__close:hover { color: var(--uz-text); }

/* Отступы с ОБЕИХ сторон: заголовок центрирован, и односторонний сдвиг под крестик
   увёл бы его влево от середины окна. */
.uz-fb__title { padding: 0 36px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.uz-fb__text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--uz-text-dim); }

.uz-fb__area {
    width: 100%;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    background: var(--uz-field-bg, #fff);
    /* 16px — иначе iOS зумит страницу при фокусе */
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    color: var(--uz-text);
    /* Поле пониже (решение пользователя 2026-08-14, уменьшали дважды): отзыв — пара строк,
       а высокий короб просил «полотно» и давил на остальное содержимое окна.
       Растянуть под длинный текст клиент может сам — resize оставлен. */
    min-height: 74px;
    text-align: left;
    resize: vertical;
}

.uz-fb__area:focus { outline: 2px solid color-mix(in oklch, var(--uz-primary) 55%, transparent); outline-offset: 1px; }

/* Dropdown для категории фидбека */
.uz-fb__select {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--uz-line);
    border-radius: 6px;
    font-size: 14px;
    background: var(--uz-bg);
    color: var(--uz-text);
}

.uz-fb__select:focus { outline: 2px solid color-mix(in oklch, var(--uz-primary) 55%, transparent); outline-offset: 1px; }

/* Honeypot-поля: убраны с глаз, но остаются в разметке — на них и ловится бот, который
   заполняет всё подряд. ⚠️ Именно уводом за пределы экрана, а не display:none: скрытые таким
   образом поля бот пропускает, и ловушка не срабатывает (правка 2026-08-16). Ширина/высота в
   нули не сводим по той же причине. */
.uz-fb__honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Подсказка о слишком коротком отзыве — показывается только после попытки отправить */
.uz-fb__hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--uz-warning);
    text-align: center;
}

/* Главное действие окна — сплошная кнопка во всю ширину, как на прочих формах */
.uz-fb__send { width: 100%; margin-top: 12px; min-height: var(--uz-tap); }

/* ===== Благодарность: покачивающаяся галочка с расходящимися волнами ===== */
.uz-fb__done { padding: 26px 0 10px; text-align: center; }

.uz-fb__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    color: var(--uz-primary);
}

.uz-fb__mark svg {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    transform-origin: 50% 60%;
    animation: uzFbSway 2.4s ease-in-out infinite;
}

/* Кольца расходятся по очереди — отсюда сдвиг задержки на треть цикла */
.uz-fb__wave {
    position: absolute;
    inset: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: 0;
    animation: uzFbWave 2.4s ease-out infinite;
}

.uz-fb__wave:nth-child(2) { animation-delay: .8s; }
.uz-fb__wave:nth-child(3) { animation-delay: 1.6s; }

.uz-fb__thanks { margin-top: 14px; font-size: 16px; font-weight: 700; color: var(--uz-text); }

@keyframes uzFbSway {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(9deg); }
}

@keyframes uzFbWave {
    0%   { transform: scale(.45); opacity: .55; }
    70%  { opacity: .12; }
    100% { transform: scale(1); opacity: 0; }
}

/* Движение по запросу системы гасим: остаётся статичная галочка и одно кольцо */
@media (prefers-reduced-motion: reduce) {
    .uz-fb__mark svg { animation: none; transform: none; }
    .uz-fb__wave { animation: none; opacity: .18; }
    .uz-fb__wave:nth-child(2), .uz-fb__wave:nth-child(3) { display: none; }
}

/* Политика конфиденциальности в модалке */
.uz-legal { max-width: 760px; max-height: 82vh; overflow-y: auto; }
.uz-legal__title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.uz-legal__updated { margin-top: 4px; font-size: 12.5px; color: var(--uz-text-dimmer); }
.uz-legal h3 { margin: 22px 0 6px; font-size: 15px; font-weight: 700; color: var(--uz-text); }
.uz-legal p, .uz-legal li, .uz-legal div { font-size: 14px; line-height: 1.6; color: var(--uz-text-dim); }
/* Абзацы внутри раздела разделяем воздухом: без него «Для физлиц…» и «Для юрлиц…»
   читались одним куском, а заголовок прилипал к первой строке текста. */
.uz-legal p + p { margin-top: 8px; }
.uz-legal ul { margin: 8px 0 0 18px; list-style: disc; }
.uz-legal li + li { margin-top: 6px; }

/* ===== Подсказка у поля («что от меня хотят») ===== */
.uz-hint {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    padding: 0;
    border: 1px solid var(--uz-line);
    border-radius: 50%;
    background: var(--uz-icon-bg);
    color: var(--uz-text-dimmer);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    position: relative;
    transition: border-color .18s, color .18s;
}

.uz-hint:hover,
.uz-hint:focus-visible {
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
}

.uz-hint::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: var(--uz-r-ctl);
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    box-shadow: var(--uz-shadow-lg);
    color: var(--uz-text-dim);
    font-family: var(--uz-sans);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    white-space: pre-line;   /* в data-hint есть переносы (примеры с новой строки) — уважаем их */
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 40;
}

.uz-hint:hover::after,
.uz-hint:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ===== Ошибка в поле ===== */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
    border-color: var(--uz-danger);
    background: color-mix(in oklch, var(--uz-danger) 7%, transparent);
}

.input.is-invalid:focus,
.select.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--uz-danger) 25%, transparent);
}

.uz-err {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 8px;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--uz-danger);
}

.uz-err::before {
    content: '!';
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--uz-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

/* Первый экран страницы флоу = контент. Шаги и футер всегда под сгибом —
   копирайт не должен маячить внизу, пока человек заполняет форму. */
.uz-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--uz-hdr, 132px) - 44px);   /* ровно один экран: 44px = верхний отступ .uz-flow */
}


/* Роль в меню аккаунта — читаемая, а не микроскопическая */
.uz-acc__head .uz-role-chip {
    font-size: 11.5px;
    letter-spacing: .04em;
    padding: 3px 10px;
}

/* Пояснение под пунктом (например, что такое DIDOX) */
.uz-review__hint {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--uz-text-dimmer);
}

/* ===== Страница на один экран (карточка + шаги видны сразу, футер — за кадром) ===== */
.uz-onescreen .uz-auth__stack {
    min-height: calc(100svh - var(--uz-hdr, 132px) - 44px);
    justify-content: center;
    gap: clamp(14px, 3vh, 34px);
}

.uz-onescreen .uz-auth__stack > .uz-review { min-height: 0; }
.uz-onescreen .uz-how { margin-top: 0; padding-top: 0; border-top: 0; }

/* Невысокие мониторы: ужимаем, чтобы всё влезло без прокрутки */
@media (max-height: 900px) {
    .uz-onescreen .uz-review__ico { width: 48px; height: 48px; margin-bottom: 8px; }
    .uz-onescreen .uz-review__ico svg { width: 24px; height: 24px; }
    .uz-onescreen .uz-review__title { font-size: var(--fs-h3); }
    .uz-onescreen .uz-review__sub { margin-top: 8px; font-size: var(--fs-caption); }
    .uz-onescreen .uz-review__card { margin-top: 16px; }
    .uz-onescreen .uz-review__card .card-body { padding: 16px 18px; }
    .uz-onescreen .uz-review__list { gap: 8px; margin-top: 8px; }
    .uz-onescreen .uz-review__list li { font-size: var(--fs-caption); }
    .uz-onescreen .uz-review__hint { font-size: var(--fs-2xs); }
    .uz-onescreen .uz-review__wait { margin-top: 12px; padding-top: 10px; font-size: var(--fs-caption); }
    .uz-onescreen .uz-review__out { margin-top: 8px; }

    /* Экран ужимаем ОТСТУПАМИ, а не кеглем: раньше подписи шагов падали до 12px.
       Размеры шагов не переопределяем — работает базовая шкала (16/14). */
    .uz-onescreen .uz-how__title { font-size: var(--fs-lead); margin-bottom: 16px; }
    .uz-onescreen .uz-how__n { width: 32px; height: 32px; margin-bottom: 8px; font-size: var(--fs-caption); }
    .uz-onescreen .uz-how__dots { top: 16px; left: calc(50% + 24px); right: calc(-50% + 24px); }
}

/* Ноутбучные высоты: добираем последние пиксели, чтобы карточка + шаги влезли без прокрутки */
@media (max-height: 850px) {
    .uz-onescreen { padding: 18px 20px 20px; }
    .uz-onescreen .uz-auth__stack {
        min-height: calc(100svh - var(--uz-hdr, 132px) - 22px);
        gap: clamp(8px, 2vh, 26px);
    }
    .uz-onescreen .uz-review__ico { width: 44px; height: 44px; margin-bottom: 8px; }
    .uz-onescreen .uz-review__title { font-size: var(--fs-h3); }
    .uz-onescreen .uz-review__sub { font-size: var(--fs-caption); line-height: var(--lh-body); }
    .uz-onescreen .uz-review__card { margin-top: 12px; }
    .uz-onescreen .uz-review__card .card-body { padding: 12px 16px; }
    .uz-onescreen .uz-review__list { gap: 8px; }
    .uz-onescreen .uz-review__wait { margin-top: 8px; padding-top: 8px; }
    .uz-onescreen .uz-how__title { margin-bottom: 12px; }   /* кегль не трогаем — только отступ */
    .uz-onescreen .uz-how__n { width: 30px; height: 30px; margin-bottom: 8px; }
    .uz-onescreen .uz-how__dots { top: 15px; }
}

/* Подсказка на слове в тексте (например DIDOX): пунктир + всплывающее пояснение */
.uz-tip {
    position: relative;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

.uz-tip::after {
    content: attr(data-hint);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    /* ⚠️ Сдвиг --uz-tip-shift ОБЯЗАН быть здесь. Его считает uz-tip.js, чтобы подсказка не
       вылезала за край (экрана, а внутри модалки — за край окна), но до 2026-09-01 переменную
       читали только .uz-tipcard и .uz-hint: у обычной подсказки на data-hint трансформ был
       простым translateX(-50%), и вычисленный сдвиг молча пропадал. */
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(4px);
    width: max-content;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: var(--uz-r-ctl);
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    box-shadow: var(--uz-shadow-lg);
    /* Жирным и основным цветом текста — как заголовок в подсказке с заголовком
       (.uz-tipcard__title, решение пользователя 2026-08-29). Подсказка это короткая
       команда глазу, а не сноска: полутонового 500-го веса ей не хватало. */
    color: var(--uz-text);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.55;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 40;
}

/* ⭐ ТОЛЬКО :hover — единственное условие показа подсказки (требование владельца 2026-09-02:
   «должны срабатывать исключительно когда на них наводятся и исчезать, когда мышка съезжает»).
   Что было и почему всплывало «само»: показ висел ещё и на фокусе (.uz-tip--btn:focus-within
   ниже по файлу — удалён). Клик мышью оставляет фокус НА КНОПКЕ, курсор при этом уезжает
   куда угодно — и подсказка продолжала гореть над списком, пока фокус не перехватит что-то
   другое. Так же она загоралась после закрытия модалки: браузер возвращает фокус на кнопку,
   которая окно открыла.
   ⚠️ Не возвращать :focus-visible / :focus-within «ради клавиатуры»: правило владельца
   однозначное. Если понадобится доступность с клавиатуры — имя кнопке даёт aria-label,
   а не всплывашка (у иконок его сейчас нет — это отдельная задача).
   ⚠️ Из-за этого же удалён весь механизм data-tip-stale: он гасил ровно тот показ по фокусу,
   которого больше нет. Пометка data-tip-nohover осталась — см. ниже, у неё другая причина. */
.uz-tip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(0);
}

/* Тултип на обёртке кнопки (не на слове в тексте): без пунктира и курсора-help */
.uz-tip--btn {
    text-decoration: none;
    cursor: default;
    display: inline-flex;
}

/* ⚠️ .uz-tip--btn задаёт display:inline-flex, и утилита .hidden (display:none) с ней
   на равной специфичности — кто позже в каскаде, тот и прав. Порядок стилей CDN-Tailwind
   не гарантирован, поэтому «спрятать» описываем явно и специфичнее. Нужно для карандаша
   в шапке модалки: он прячется на время правки. */
.uz-tip.hidden { display: none; }

/* ⚠️ Здесь стояло `.uz-tip--btn:focus-within::after` — показ подсказки по ФОКУСУ внутри
   обёртки. Удалено 2026-09-02 (см. правило показа выше): именно оно зажигало подсказку
   «само собой» — фокус остаётся на кнопке после клика и возвращается на неё после закрытия
   модалки, а курсор в этот момент может быть где угодно. Не добавлять обратно. */

/* ⭐ Хвостик подсказки — треугольник, указывающий на кнопку (решение пользователя 2026-09-01).
   Без него всплывашка висела просто «где-то рядом», и при трёх значках в ряд было не понять,
   к какому из них она относится.
   Как сделан: квадрат, повёрнутый на 45°, с двумя видимыми границами. При rotate(45deg) вниз
   смотрит угол между ПРАВОЙ и НИЖНЕЙ гранями — поэтому border-right + border-bottom, они и
   образуют треугольник. Верхняя половина ромба заходит внутрь пузыря и не видна.
   ⚠️ z-index ВЫШЕ пузыря (41 против 40) — это ключ к монолитности. Если положить хвостик под
   пузырь, нижняя граница пузыря прочерчивается прямо через место стыка, и получаются две
   склеенные фигуры с видимым швом (замечание пользователя 2026-09-01). Лёжа сверху, хвостик
   своим фоном перекрывает этот участок границы, а его собственные грани продолжают контур —
   выходит одна фигура с отростком.
   ⚠️ Фон и цвет границы обязаны совпадать с пузырём (--uz-surface / --uz-line), иначе стык
   проявится снова.
   ⚠️ Заходя внутрь пузыря, хвостик закрывает ~8px его нижнего поля. Это безопасно: у пузыря
   padding-bottom 12px, до текста остаётся зазор. Увеличите хвостик — проверьте, не залез ли
   он на последнюю строку подсказки.
   ⭐ Хвостик стоит по центру САМОЙ КНОПКИ и НЕ участвует в сдвиге --uz-tip-shift. Это главное:
   у края экрана пузырь уезжает вбок, чтобы не вылезти за окно, а хвостик остаётся над кнопкой
   и продолжает показывать на неё — ровно то, ради чего он и нужен.
   ⚠️ Геометрия завязана на пузырь: у него bottom: calc(100% + 8px), то есть до элемента 8px
   зазора. Квадрат 12px с bottom: calc(100% + 2px) центрирован РОВНО по нижней границе пузыря,
   а его диагональ (~17px) даёт треугольник высотой ~8px — он заполняет зазор целиком и почти
   касается кнопки. Меняете отступ пузыря — правьте и здесь.
   ⚠️ Первая версия была 10px с bottom: calc(100% + 3px): треугольник получался ~5px, приходился
   на белую кнопку и на светлом фоне просто не читался. Мельче 12px не делать. */
.uz-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--uz-surface);
    border-right: 1px solid var(--uz-line);
    border-bottom: 1px solid var(--uz-line);
    transform: translateX(-50%) translateY(4px) rotate(45deg);
    opacity: 0;
    visibility: hidden;
    /* Те же длительность и кривая, что у пузыря выше: они должны выезжать как одна фигура,
       иначе на глаз видно, что хвостик догоняет пузырь. */
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 41;
    pointer-events: none;
}

/* Условие показа дословно повторяет условие пузыря выше (только :hover) — иначе хвостик
   мог бы появиться там, где подсказки нет. Правки делать ПАРОЙ. */
.uz-tip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* ⭐ Подсказка ПОД кнопкой (решение пользователя 2026-09-01: «подсказка у кнопки редактировать
   уходит за пределы окна»).
   Обычная подсказка всегда висит СВЕРХУ (bottom: calc(100% + 8px)). Для кнопок в шапке
   модального окна это не работает по определению: над ними уже нет окна, и пузырь вылезал
   на затемнённую подложку. Сдвигом это не лечится — он горизонтальный.
   Здесь пузырь и хвостик переносятся вниз, а хвостик заодно разворачивается остриём ВВЕРХ:
   при rotate(45deg) вверх смотрит угол между ЛЕВОЙ и ВЕРХНЕЙ гранями, поэтому границы
   переставлены с right/bottom на left/top. Всё остальное — размеры, тайминги, z-index выше
   пузыря ради монолитности — наследуется от базовых правил.
   ⚠️ Правила показа продублированы намеренно: у базовых такая же специфичность, и переопределить
   их трансформ можно только правилом, стоящим НИЖЕ по файлу. Не переносить этот блок выше. */
.uz-tip--below::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(-4px);
}

.uz-tip--below:hover::after {
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(0);
}

.uz-tip--below::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--uz-line);
    border-top: 1px solid var(--uz-line);
    transform: translateX(-50%) translateY(-4px) rotate(45deg);
}

.uz-tip--below:hover::before {
    transform: translateX(-50%) translateY(0) rotate(45deg);
}

/* ⚠️ Здесь жил механизм data-tip-stale — он гасил подсказку, зажжённую ВОЗВРАЩЁННЫМ ФОКУСОМ
   после закрытия модалки (2026-09-01). Удалён 2026-09-02 целиком, вместе со своей половиной
   скрипта: показ по фокусу убран как таковой (см. правило показа выше), гасить стало нечего.
   Не воскрешать — если подсказка снова начнёт всплывать «сама», причина будет в вернувшемся
   :focus-within, а не в отсутствии этой заплатки. */

/* ⭐ Сразу после закрытия окна не показываем подсказку и по наведению (решение пользователя
   2026-09-02: «закрыл окно — подсказки быть вообще не должно»).
   Единственный случай, когда «наведение» ненастоящее: кнопку нажали мышью, окно открылось
   и закрылось, а курсор так и остался на кнопке. :hover при этом горит без единого движения
   мышью — подсказка вспыхнула бы сама, чего владелец и не хочет.
   Пометку data-tip-nohover снимает uz-tip.js, когда курсор УХОДИТ с кнопки, — после этого
   повторное, уже осознанное наведение показывает подсказку как обычно.
   ⚠️ Правило обязано стоять ПОСЛЕ правила показа: специфичность у него выше (добавлен
   атрибут), так что порядок тут не решает, но держим рядом со смыслом.
   ⚠️ Это ЕДИНСТВЕННОЕ, что осталось от заплаток 2026-09-01: механизм data-tip-stale
   (гашение по фокусу) удалён вместе с самим показом по фокусу. */
.uz-tip[data-tip-nohover]:hover::after,
.uz-tip[data-tip-nohover]:hover::before {
    opacity: 0;
    visibility: hidden;
}

.uz-tip--titled[data-tip-nohover]:hover > .uz-tipcard {
    opacity: 0;
    visibility: hidden;
}

/* ===== Подсказка С ЗАГОЛОВКОМ (2026-08-28) =====
   Обычная .uz-tip рисуется псевдоэлементом ::after с content: attr(data-hint) — там весь
   текст одного стиля, и заголовок в нём не выделить ничем. Поэтому карточка сделана
   НАСТОЯЩИМ элементом .uz-tipcard внутри обёртки .uz-tip--titled.
   Геометрия, тайминги и сдвиг --uz-tip-shift — те же, что у ::after выше: сдвиг считает
   uz-tip.js, чтобы подсказка не уехала за край экрана (он умеет мерить и этот элемент).
   ⚠️ pointer-events: none обязателен — карточка висит НАД кнопкой, и без этого она
   перехватывала бы клик, как только появится под курсором. */
.uz-tipcard {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(4px);
    width: max-content;
    /* ⚠️ 260px, а не 320px (просьба владельца 2026-09-02, дважды: «плашка слишком вытянута»,
       «здесь тоже аккуратнее»). На 320px подсказка ложилась в 2-3 строки, последняя из которых
       была почти пустой, и выходила широкая полоса поперёк списка. На 260px строки ровнее,
       карточка читается как компактный блок у кнопки.
       Ниже 240px не опускать: в заголовке «Повторить делегирование» появится перенос. */
    max-width: min(260px, calc(100vw - 24px));
    padding: 12px 16px;
    border-radius: var(--uz-r-ctl);
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    box-shadow: var(--uz-shadow-lg);
    color: var(--uz-text-dim);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s, transform .16s, visibility .16s;
    z-index: 40;
}

/* ⚠️ Псевдоэлемент базовой .uz-tip у этого варианта ОБЯЗАТЕЛЬНО гасим. Он объявлен как
   .uz-tip::after (без условия на data-hint), и когда атрибута нет, content: attr(data-hint)
   даёт пустую строку — но фон, рамка, тень и паддинг остаются. На :hover правило
   .uz-tip:hover::after проявляло эту пустую плашку поверх нашей карточки: в очереди она
   выглядела как белый прямоугольник, налезающий на текст подсказки. */
.uz-tip--titled::after { content: none; }

/* Условие показа — только :hover, как у пузыря выше. Показ по :focus-within убран
   2026-09-02 вместе с остальными: он зажигал карточку после клика и после закрытия окна. */
.uz-tip--titled:hover > .uz-tipcard {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(0);
}

/* ⭐ Карточка с заголовком ПОД кнопкой — то же, что .uz-tip--below делает с обычным пузырём,
   но для настоящего элемента .uz-tipcard (2026-09-02, кнопка «Удалить аккаунт» в шапке окна
   профиля). У пузыря-псевдоэлемента перенос вниз уже был, у карточки — нет, и она вылезала
   бы за верхний край окна на затемнённую подложку.
   ⚠️ Условия показа и трансформы дословно повторяют базовые правила .uz-tipcard выше —
   иначе карточка «поедет» при появлении. */
.uz-tip--below > .uz-tipcard {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(-4px);
}

.uz-tip--below:hover > .uz-tipcard {
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(0);
}

/* Заголовок называет действие, пояснение под ним — последствия. Кегль тот же, разделяет
   их вес и цвет: заголовок основным цветом текста, пояснение приглушённым. */
.uz-tipcard__title {
    display: block;
    margin-bottom: 4px;
    font-weight: 700;
    color: var(--uz-text);
}

/* Кнопка выхода на экране ожидания: заметная, а не «серый шёпот» */
.uz-review__logout {
    min-height: 44px;
    padding: 0 26px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--uz-text);
    border-color: var(--uz-line);
}

.uz-review__logout:hover {
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
}

/* Карточка первого экрана (регистрация, пароль, «проверьте почту») центрируется ПО ЭКРАНУ:
   компенсируем высоту шапки, иначе блок визуально проседает вниз.
   Только на достаточно высоких экранах — на низких контент упёрся бы в шапку. */
@media (min-height: 820px) {
    .uz-auth__stack > .uz-auth__box { padding-bottom: var(--uz-hdr, 132px); }
}

/* Одиночная ссылка под формой («Уже есть аккаунт? Войти») — по центру */
.uz-auth__links--center { justify-content: center; }

/* Страницы флоу: контент прижат к шапке, шаги идут сразу под ним.
   Футер за экраном не потому, что мы растянули контент, а потому что сама
   контентная область занимает минимум один экран. */
.uz-flow {
    min-height: calc(100svh - var(--uz-hdr, 132px));
    padding: 24px 20px 40px;
}

.uz-screen {
    display: block;
    min-height: 0;
    justify-content: flex-start;
}

.uz-page > .uz-how { margin-top: 32px; }

/* Шаги идут сразу под формой, без лишней пустоты */
.uz-page__card { margin-bottom: 24px; }
.uz-page > .uz-how { margin-top: 0; padding-top: 22px; }

/* ===== Полировка после аудита ===== */

/* Ссылка, оформленная кнопкой (согласие на обработку данных открывает модалку политики) */
.uz-linkbtn {
    /* ⚠️ Это <button> внутри предложения, а кнопка ЦЕНТРИРУЕТ своё содержимое. Текст
       согласия на ПДн длинный, переносится на две строки — и они вставали по центру,
       из-за чего блок выглядел рваным: «…и даю» слева, а текст ссылки посередине.
       Наследуем выравнивание у родителя (решение пользователя 2026-08-01).
       ⚠️ display:inline здесь НЕ помогает: браузер принудительно приводит кнопку к
       inline-block, поэтому ссылка всё равно начинается с новой строки — это нормально. */
    text-align: inherit;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--uz-accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.uz-linkbtn:hover { color: var(--uz-primary-d); }

/* Подсказки открываются по тапу — но только там, где курсора нет.
   На десктопе :focus держал бы подсказку открытой и после клика по «?» (фокус остаётся на кнопке). */
@media (hover: none) {
    .uz-hint:focus::after,
    .uz-tip:focus::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* Прежний фикс «на узком экране» жил здесь: сдвигал всплывашку к ЛЕВОМУ краю элемента
   (left: 0), из-за чего лечился только левый край — у кнопки в правой части строки
   подсказка всё равно уходила за экран. Заменён общим решением со сдвигом от uz-tip.js
   (см. секцию в конце файла), поэтому блок убран, чтобы правила не спорили. */

/* Единый внутренний отступ карточек на всём флоу (было 24 против 28/30) */
.uz-auth__card .card-body,
.uz-page__card .card-body { padding: 24px; }

@media (max-width: 680px) {
    .uz-auth__card .card-body,
    .uz-page__card .card-body { padding: 16px; }
}

/* ===== Экраны входа/регистрации: карточка + шаги как единый блок по центру ===== */
.uz-onescreen .uz-auth__stack > .uz-auth__box {
    min-height: 0;              /* больше не растягиваем карточку на весь экран */
    padding-bottom: 0;          /* центрирование делает JS-компенсация шапки */
    display: block;
}

.uz-onescreen.uz-auth {
    align-items: center;
    min-height: calc(100svh - var(--uz-hdr, 132px));
    padding: 24px 20px 32px;
}

.uz-onescreen .uz-auth__stack {
    align-self: center;
    min-height: 0;
    gap: clamp(18px, 3.5vh, 40px);
}

/* Невысокие экраны: ужимаем, чтобы карточка и шаги влезли без прокрутки */
@media (max-height: 880px) {
    /* Невысокий экран сжимаем отступами; кегль опускаем максимум на одну ступень */
    .uz-onescreen .uz-auth__title { font-size: var(--fs-h2); }
    .uz-onescreen .uz-auth__sub { margin-top: 8px; font-size: var(--fs-body); }
    .uz-onescreen .uz-auth__box > .text-center { margin-bottom: 16px; }
    .uz-onescreen .uz-auth__card .card-body { padding: 16px 20px; }
    .uz-onescreen .uz-auth__consent { margin-top: 8px; font-size: var(--fs-caption); }
    .uz-onescreen .uz-auth__links { margin-top: 12px; }

    .uz-onescreen .uz-how__title { font-size: var(--fs-lead); margin-bottom: 16px; }
    .uz-onescreen .uz-how__n { width: 32px; height: 32px; margin-bottom: 8px; }
    .uz-onescreen .uz-how__dots { top: 16px; left: calc(50% + 24px); right: calc(-50% + 24px); }
}

/* ===== Короткая подсказка (наведение): аккуратные переносы ===== */
.uz-hint::after,
.uz-tip::after {
    width: max-content;
    max-width: 300px;
    text-wrap: pretty;          /* не оставляем «висячих» слов в последней строке */
    hyphens: manual;
    overflow-wrap: break-word;
    line-height: 1.55;
}

/* Строка подписи: сам <label> больше не оборачивает «?».
   Раньше кнопка была первым управляемым элементом внутри label — и браузер отправлял
   в неё клик по ЛЮБОМУ месту подписи (а она во всю ширину поля). */
.uz-labelrow {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.uz-labelrow .label { margin: 0; }

/* «?» — это действие (открывает справку), поэтому он заметный и в брендовом цвете:
   крупнее кружок, читаемый знак, лёгкая заливка. Мимо такого уже не промахнёшься. */
.uz-hint {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    font-size: 12px;
    border-color: rgba(28, 157, 216, .38);
    background: rgba(28, 157, 216, .10);
    color: var(--uz-accent-ink);
    transition: border-color .18s, color .18s, background .18s, transform .18s;
}

.uz-hint[data-help] { cursor: pointer; }

.uz-hint:hover,
.uz-hint[data-help]:hover,
.uz-hint:focus-visible,
.uz-hint[data-help]:focus-visible {
    background: rgba(28, 157, 216, .20);
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
    transform: scale(1.08);
}

/* лёгкое «вдавливание» при нажатии — намёк на кликабельность без смены цвета */
.uz-hint[data-help]:active { transform: scale(.96); }

/* ===== Развёрнутая справка (клик) ===== */
/* Шире карточки под ней (решение пользователя 2026-07-16): на 620px из-за краёв
   выглядывал текст договора и мешал читать саму справку. */
.uz-help {
    max-width: 780px;
    max-height: 82vh;
    overflow-y: auto;
}

.uz-help__title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--uz-text);
}

.uz-help__body { margin-top: 16px; }

.uz-help__body h4 {
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--uz-text);
}

.uz-help__body p {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

.uz-help__body ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uz-help__body li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--uz-text-dim);
}

.uz-help__body li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uz-primary);
}

.uz-help__body b { color: var(--uz-text); font-weight: 700; }

/* важное примечание внизу справки */
.uz-help__note {
    margin-top: 16px !important;
    padding: 12px 16px;
    border-radius: var(--uz-r-ctl);
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    font-size: 13.5px !important;
}

/* В короткой подсказке уважаем переносы строк из data-hint (пример — на своей строке) */
.uz-hint::after,
.uz-tip::after {
    white-space: pre-line;
    pointer-events: none;   /* всплывашка не ловит курсор: ушли с «?» — она сразу скрылась */
}

/* Нативный список <select> в тёмной теме.
   Chrome красит выпадашку по background-color самого поля, а он у нас полупрозрачный
   белый (--uz-field-bg) — на белой подложке попапа это давало белый список. Задаём
   непрозрачный фон: то же, что поле даёт поверх карточки. */
[data-theme="dark"] select,
[data-theme="dark"] select.select { background-color: #181c22; }

[data-theme="dark"] select option,
[data-theme="dark"] select optgroup {
    background-color: #181c22;
    color: var(--uz-text);
}

/* ===== КАБИНЕТ КЛИЕНТА: хром сайта вместо сайдбара =====
   Подхедер-«пилюля» с разделами кабинета — та же геометрия, что у услуг на сайте. */
.uz-cab {
    width: 100%;
    padding: 0 20px 64px;
}

.uz-cab__in {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 24px;   /* воздух между пилюлей подхедера и контентом */
}

/* Страницы-списки на 9-10 колонок: 1080px им мало, правые колонки («Дата заявки»,
   «Действия») уезжали под край. Ограничитель ширины живёт на РОДИТЕЛЕ, до которого
   страница дотянуться не может, — поэтому снимаем его отсюда, через :has().
   Tailwind-класс max-w-6xl на этих страницах был мёртвым: 1152px шире родительских 1080px.
   Формы и прочий кабинет остаются узкими: длинная строка читается плохо. */
/* ⭐ 1180px — ровно ширина шапки (.topbar) и подхедера-«пилюли» (решение пользователя
   2026-08-29: «уменьшить до размеров хедера все таблицы»). Раньше здесь было 1440px, и списки
   заметно выпирали за хром страницы.
   ⚠️ Это не бесплатно: у широких списков («Клиенты», «Зарегистрированные домены», «Платежи»)
   набор колонок считался под 1382px содержимого, теперь его 1122px. Ширины ниже пересчитаны,
   но часть значений там теперь обрезается многоточием — см. комментарии у каждого списка. */
.uz-cab__in:has(> .uz-wide) { max-width: 1180px; }

.subnav--cab .subnav__pill a.is-active {
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .12);
}

/* Карточки кабинета — как на сайте: мягкая рамка, тень, скругление */
/* Карточки кабинета непрозрачны: под ними живой canvas-фон, сквозь него текст не читается */
.uz-cab .card {
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    box-shadow: var(--uz-card-shadow);
    border-radius: var(--uz-r-card);
}

.uz-cab .card + .card,
.uz-cab .card + h2,
.uz-cab h2 + .card { margin-top: 16px; }

/* Внутри сеток зазор задаёт gap — межкарточный margin сбрасываем,
   иначе все карточки ряда, кроме первой, съезжают вниз и становятся ниже */
.uz-cab .grid > .card { margin-top: 0; }

/* ===== Поисковая строка списков =====
   Тянется до правого края, «Найти» живёт ВНУТРИ поля, скругление-пилюля
   (решение пользователя 2026-07-15). Кнопка исключена из общего hover-подъёма:
   она позиционирована через translateY(-50%), сдвиг сломал бы центровку. */
.uz-search .input {
    height: 44px;
    border-radius: 999px;
    padding-right: 124px;   /* место под кнопку внутри поля (кнопка стала шире) */
}

/* Кнопка крупнее прежней и шире по бокам (решение пользователя 2026-08-20), а её отступы
   подобраны так, чтобы текст «Найти» заканчивался ровно на 29px от правого края поля — это тот
   же отступ, на который утоплены подписи колонок списка (.uz-dlist__head padding: 0 29px).
   Поле стоит вровень с капсулами, и последняя буква «Найти» встаёт под последней буквой
   «ДЕЙСТВИЯ».
   ⚠️ ИНВАРИАНТ: right + padding-right = 29px. Расширяешь кнопку вправо — на столько же
   уменьшай right, иначе текст уедет из-под «ДЕЙСТВИЯ». Вправо запас почти исчерпан (осталось
   2px до края поля), поэтому дальше кнопку растим ТОЛЬКО влево — отсюда и разные отступы
   слева и справа. */
.uz-search__btn {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 9px 27px 9px 37px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .12);
    cursor: pointer;
}

.uz-search__btn:hover {
    background: rgba(28, 157, 216, .18);
    box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Счётчик в шапке списка («N заявок») — крупнее и ярче: ключевая цифра страницы */
.uz-count {
    color: var(--uz-text);
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 14.5px;
    white-space: nowrap;
}

.uz-count > span {
    font-family: var(--uz-mono);
    font-size: 16px;
    font-weight: 700;
}

/* Вертикальные разделители колонок в таблицах-списках (решение пользователя 2026-07-15).
   Полосу рисует псевдоэлемент, а не border (решение пользователя 2026-08-14): границу
   нельзя укоротить — она упиралась в края таблицы и стыковалась с линиями строк, отчего
   таблица читалась решёткой. Отступы сверху и снизу оставляют полосу висеть внутри
   строки, не доходя до её краёв. */
.uz-table--divided th:not(:last-child),
.uz-table--divided td:not(:last-child) {
    position: relative;
    border-right: 0;
}

.uz-table--divided th:not(:last-child)::after,
.uz-table--divided td:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--uz-line-strong);
    pointer-events: none;
}

/* Колонка действий — по ширине содержимого (решение пользователя 2026-08-14): растянутая
   на весь свободный простор, она уводила разделитель далеко влево от самой кнопки.
   Только клиентские списки (.app-table): в таблицах менеджера раскладка своя. */
.app-table th:last-child,
.app-table td:last-child {
    width: 1%;
    white-space: nowrap;
}

/* Раз колонки разделены явно — горизонтальные линии строк подтягиваем к той же силе,
   иначе сетка перекошена: вертикали видно, горизонтали нет. Селектор повторяет daisyui:
   граница живёт на ЯЧЕЙКАХ, по <tr> её не покрасить. */
.uz-table--divided :where(thead tr :is(td, th), tbody tr:not(:last-child) :is(td, th)) {
    border-bottom-color: var(--uz-line-strong);
}

/* Воздух между строками: у table-sm padding-block всего .5rem, строки слипались
   (решение пользователя 2026-07-16). Правило неслоёное — перебивает @layer daisyui. */
.uz-table--divided :where(th, td) { padding-block: 11px; }

/* ============================================================================
   ЕДИНЫЙ ШРИФТОВОЙ СТАНДАРТ ПО ВСЕМУ РЕСКИНУ (решение пользователя 2026-07-23)
   Техстраницы Дениса (DNS/менеджер/sadmin) сидели на сырых tailwind-размерах
   (728× text-xs, десятки text-[10px], местами text-xl/2xl) и приглушённых цветах —
   отсюда разнобой «то плашка огромными буквами, то куча мелкого текста».
   Подтягиваем tailwind-утилиты к брендовой шкале --fs-*. Правила НЕслоёные →
   перебивают @layer-утилиты tailwind при любой специфичности. Компонентные
   классы (.dns-table, .uz-*) со своими --fs-* перебивают это по специфичности.
   ============================================================================ */
body .text-\[10px\],
body .text-\[11px\] { font-size: var(--fs-2xs); }       /* 10–11 → 11 */
body .text-xs   { font-size: var(--fs-caption); }         /* 12 → 13 */
body .text-sm   { font-size: var(--fs-small); }           /* 14 */
body .text-base { font-size: var(--fs-body); }            /* 16 */
body .text-lg   { font-size: var(--fs-lead); }            /* 18 */
body .text-xl   { font-size: var(--fs-h3); }              /* 20 */
body .text-2xl  { font-size: var(--fs-h2); }              /* 24 → 25–31: заголовки страниц = как наши .uz-page__title */
body .text-3xl  { font-size: var(--fs-h2); }              /* держим в h2, без «огромно» */
body .text-4xl  { font-size: var(--fs-h1); }              /* 36 → герой-шкала */

/* Блёклость: бледные тиры текста поднимаем до читаемого dimmer (решение пользователя
   «не должен быть блёклым»).
   ⚠️ /50 и /60 добавлены 2026-08-07 по замеру контраста. Причин две.
   1. КОНТРАСТ. В светлой теме /50 давал 3.47:1 при норме WCAG AA 4.5:1 — и это самый
      ходовой приглушённый класс в проекте (377 употреблений: подписи полей, «Дата»,
      «Оператор», вторичные строки карточек). /60 держался на 4.78:1, впритык.
   2. ШКАЛА БЫЛА ПЕРЕВЁРНУТА. /30 и /40 уже переопределялись здесь и давали 6.47:1,
      то есть БОЛЕЕ прозрачные классы рисовались ТЕМНЕЕ, чем /50 и /60. Порядок «чем
      меньше число, тем бледнее текст» не соблюдался, и выбор класса в шаблоне ничего
      не значил.
   Теперь тиров ровно два и они монотонны: /30–/60 → dimmer (6.47:1), /70 и выше
   остаются на своей прозрачности (6.76:1 и темнее). Тёмной темы это не касается:
   там /50 давал 4.72:1 и проходил, но var() переключается по теме сам. */
body .text-base-content\/30,
body .text-base-content\/40,
body .text-base-content\/50,
body .text-base-content\/60 { color: var(--uz-text-dimmer); }

/* ===== Таблица DNS: типографика по единому стандарту (как в кабинете) =====
   Было: text-xs (12px), тонко, приглушённый цвет (/40–/60) — «блёкло и мелко».
   Стало: брендовая шкала --fs-small/-caption, плотнее, полный контраст.
   Неслоёные правила перебивают tailwind-утилиты (text-xs/opacity) из @layer. */
.dns-table thead th {
    font-size: var(--fs-caption);      /* 13px, было 12px */
    font-weight: 600;
    color: var(--uz-text-dim);         /* было /60 — теперь не блёкло */
}
.dns-table tbody td {
    font-size: var(--fs-small);        /* 14px, было 12px */
    font-weight: 500;                  /* было 400 — плотнее */
    color: var(--uz-text);             /* было /40–/50 — полный контраст */
}

/* Разделители строк не доходят до краёв таблицы (решение пользователя): border с ячеек
   снят, линия — псевдоэлемент строки, вписанный в горизонтальные отступы (16px от краёв). */
.dns-table thead th,
.dns-table tbody td { border-bottom: 0; }
.dns-table thead tr,
.dns-table tbody tr:not(:last-child) { position: relative; }
.dns-table thead tr::after,
.dns-table tbody tr:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: var(--uz-line-strong);
}

/* Заголовок блока над списком капсул («История платежей» внизу кабинета).
   Карточки-обёртки у списка нет намеренно — капсула внутри карточки читалась бы как короб
   в коробе, — но два блока подряд без подписи слипаются в один. */
/* Отступ сверху крупный: от карточек с данными раздел отделяет ТОЛЬКО воздух, линии между
   ними нет (решение пользователя 2026-08-07) — без запаса заголовок прилипал к «Документам». */
/* Заголовок раздела вне карточки. Крупнее заголовков карточек (15px) намеренно
   (решение пользователя 2026-08-07): «История платежей» открывает свой раздел страницы,
   а не подписывает очередную карточку, и на голом фоне прежние 15px терялись. */
.uz-plist-title {
    margin: 44px 0 14px;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--uz-text);
}

/* ===== «Мои домены»: список капсул вместо таблицы =====
   Решение пользователя 2026-07-16: у каждого домена своя капсула, а подписи колонок —
   отдельной строкой на фоне страницы, без подложки и крупнее прежних табличных 11px.
   Колонки задаёт ОДНА переменная --uz-dcols: легенда и капсулы читают её же, иначе
   подписи разъезжаются со значениями. Капсулы ничего не обрезают — тултипы кнопок целы. */
/* ⚠️ Колонки ФИКСИРОВАННЫЕ, без auto/max-content. Каждая капсула — свой grid-контейнер
   (общей таблицы больше нет), поэтому любой трек, зависящий от содержимого, считается для
   каждой строки заново: у строки с двумя кнопками он широкий, у строки без кнопок узкий,
   у легенды — по слову «Действия». Остаток, который делят fr, выходил разный — и колонки
   разъезжались от строки к строке. Ширины, не зависящие от контента, держат сетку ровно. */
.uz-dlist {
    --uz-dcols: minmax(110px, 1fr) 200px minmax(200px, 2.3fr) 160px;
    --uz-dgap: 22px;
    --uz-dpy: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.uz-dlist__head,
.uz-dcard {
    display: grid;
    grid-template-columns: var(--uz-dcols);
    align-items: stretch;
    gap: var(--uz-dgap);
}

/* stretch + центровка внутри ячейки = та же вертикальная посадка, что и при align-items:center,
   но ячейка занимает всю высоту ряда — от неё отмеряется длина разделителя. */
.uz-dlist__head > *,
.uz-dcard > * {
    display: flex;
    align-items: center;
}

/* Ячейка не должна распирать свою колонку: ширины колонок заданы в --uz-dcols, и содержимое
   обязано в них вписываться, обрезаясь многоточием.
   ⚠️ Без min-width: 0 этого не происходит. У flex- и grid-элемента минимальная ширина по
   умолчанию равна ширине содержимого (min-width: auto), поэтому .truncate внутри НЕ срабатывал:
   длинное имя владельца выезжало из своей ячейки и наползало на соседний столбец «Статус»
   (замечено пользователем 2026-09-01 на странице «Заявки»: «Нурматова Дилноза Шухратовна» —
   226px содержимого в колонке шириной 180px). Явный min у трека (minmax(140px, 1fr)) отменяет
   автоминимум грида, поэтому колонка при этом не расширялась — элемент просто вылезал наружу.
   ⚠️ Снимать автоминимум нужно у ВСЕЙ цепочки предков обрезаемого текста, а не у самого
   .truncate: в contactCell он лежит на третьем уровне (ячейка → безклассовый div фрагмента →
   div.truncate), и промежуточный div, оставшись с min-width: auto, распирал ячейку как ни в чём
   не бывало. Отсюда селектор по всем потомкам — точечно перечислять уровни бессмысленно,
   глубина у каждого фрагмента своя.
   Элементам, которые сжиматься не должны (значки ФЛ/ЮЛ, кнопки действий), это не вредит:
   их держит собственный flex-shrink: 0 либо запас ширины колонки — проверено замерами по всем
   спискам менеджера после правки.
   Правило общее для всех списков намеренно: ловушка одна и та же везде, а частные заплатки
   на каждую колонку разъезжались бы при следующей правке состава колонок. */
.uz-dcard * { min-width: 0; }

/* Разделители рисуем псевдоэлементом, а не border/паддингами: он вне потока и не двигает
   ни колонки, ни текст — раскладка остаётся ровно прежней. Линия встаёт в середину зазора
   (половина gap). По высоте — только на ячейку: до краёв капсулы она не доходит, её
   вертикальный padding остаётся воздухом (решение пользователя 2026-07-16).
   --uz-line-strong, а не -soft: в тёмной теме soft — белый 5.5%, его не видно.
   Легенда без линий: её подписи и так разделены воздухом на фоне. */
.uz-dcard > :not(:last-child) { position: relative; }

/* Линию перед колонкой «Действия» здесь НЕ рисуем: она уезжала бы к левому краю широкой
   колонки, далеко от прижатой вправо кнопки. Её ставит .uz-dcard__actions::before вплотную
   к кнопке — так линия липнет к кнопке при любой её ширине.
   ⚠️ Исключаем по КЛАССАМ, а не по :nth-last-child(2). Между «Статусом» и «Действиями»
   лежит .uz-dcard__valid — на десктопе он display:none, но в подсчёте детей участвует.
   Поэтому у домена БЕЗ срока (зарезервирован) элемента нет и «Статус» был 2-м с конца,
   а у активного домена срок появляется, «Статус» становится 3-м с конца и получал свою
   линию — рядом с линией от ::before выходило ДВЕ полосы. */
.uz-dcard > :not(:last-child):not(.uz-dcard__status):not(.uz-dcard__valid):not(.uz-dcard__notice)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--uz-dgap) / -2);
    width: 1px;
    background: var(--uz-line-strong);
}

/* Разделитель вплотную слева от кнопки действия. Убирали 2026-08-03, вернули 2026-08-05
   по просьбе пользователя: без него строка распадалась — статус и кнопка висели рядом
   без границы колонки.
   Как flex-элемент ПЕРЕД содержимым ячейки, а ячейка прижата вправо (justify-content:
   flex-end) — линия встаёт сразу за кнопкой на фиксированном отступе, при любой её ширине.
   Рисовать её общим правилом ::after у предыдущей колонки нельзя: та колонка широкая,
   и линия уехала бы к её левому краю, далеко от кнопки. */
.uz-dcard__actions::before {
    content: '';
    align-self: stretch;
    width: 1px;
    margin-right: var(--uz-dgap);
    background: var(--uz-line-strong);
}

/* «Управление» до делегирования: место действия занято всегда, но вход закрыт.
   Размер и начертание — те же, что у активной ссылки (классы px-0 py-1 text-sm font-bold
   в разметке), меняем только цвет и курсор, чтобы строка не менялась после активации.
   Подсказку показывает обёртка .uz-tip — сама метка на события не реагирует. */
.uz-dcard__manage--off {
    color: var(--uz-text-dimmer);
    cursor: not-allowed;
    pointer-events: none;
}

/* Легенда: живёт на фоне — ни рамки, ни заливки. Отступ по бокам равен паддингу капсулы,
   чтобы подпись стояла ровно над своим значением. */
/* 29px = 28px паддинга капсулы + её рамка 1px: у легенды рамки нет, без этого подписи
   стояли бы на пиксель левее своих значений */
.uz-dlist__head {
    padding: 0 29px 2px;
    font-family: var(--uz-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--uz-text-dim);
}

/* К правому краю — над кнопками, которые тоже прижаты вправо. Через justify-content, а не
   text-align: ячейка легенды теперь flex-контейнер, и text-align на ней текст не двигал. */
.uz-dlist__head-act { justify-content: flex-end; }

/* Во всём списке нет ни одного действия — убираем и подпись «Действия» в легенде:
   без единой кнопки колонка-призрак с заголовком выглядела бы поломкой. */
.uz-dlist:not(:has(.uz-dcard__actions a, .uz-dcard__actions button, .uz-dcard__actions .uz-dcard__manage--off)) .uz-dlist__head-act { display: none; }

/* Радиус 999px = браузер ограничит его половиной высоты, торцы станут круглыми — это и есть
   капсула (решение пользователя 2026-07-16: углы круглее). Отсюда и паддинг 28px: у круглого
   торца текст вплотную к краю смотрелся бы вжатым. */
.uz-dcard {
    padding: var(--uz-dpy) 28px;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: 999px;
    box-shadow: var(--uz-card-shadow);
    transition: border-color .2s var(--uz-ease), background-color .2s var(--uz-ease);
}

.uz-dcard:hover { border-color: color-mix(in oklch, var(--uz-primary) 30%, var(--uz-line)); }

.uz-dcard__name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* Имя в ДВЕ строки (домен, под ним «дата · срок») нужно только списку платежей.
   ⚠️ Правка Дениса ставила flex-direction: column на ОБЩИЙ .uz-dcard__name, и от этого
   разъезжались «Мои домены»: там в ячейке один текст, колоночная раскладка прижимала его
   к верхнему краю, и имя переставало стоять на одной линии со статусом справа.
   Поэтому правило ограничено списком платежей (2026-08-07). */
.uz-dlist--pay .uz-dcard__name {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* ⚠️ Здесь был модификатор .uz-dcard__name--stack — колонка из двух строк для ячейки имени
   в очереди и ожидании. Удалён 2026-09-01: обе ветки этих списков (и аккаунт, и заявка)
   перешли на сетку --icon ниже, потому что домен должен стоять строго под именем, а не под
   значком, и в разметке класс не остался нигде. Правило в медиазапросе 680px убрано вместе
   с ним. Если понадобится двухстрочная ячейка БЕЗ значка — проще добавить её заново,
   чем держать мёртвый селектор. */

/* Ячейка имени со ЗНАЧКОМ ФЛ/ЮЛ (строки-аккаунты в очереди и ожидании): значок слева,
   имя справа от него, домен — СТРОГО ПОД ИМЕНЕМ (требование пользователя 2026-09-01).
   ⚠️ Сетка, а не колонка из двух строк, как у --stack. В колонке домен встал бы под ЗНАЧКОМ,
   у левого края ячейки, а сам значок пришлось бы либо уводить отдельной строкой над именем,
   либо центрировать сразу по двум строкам — то есть двигать относительно имени. Пользователь
   об этом сказал прямо: значок трогать не надо, домен должен стоять под именем. В гриде
   значок остаётся ровно там, где был до появления второй строки: своя колонка, строка имени,
   центровка по ней одной, размер прежний (18px задаёт правило .uz-dlist--mgr ... svg ниже).
   Отступ значка держит его собственный margin (mr-1.5 в разметке), а НЕ column-gap: у строк
   без значка (контакт не заполнен) колонка схлопывается в ноль и текст встаёт вплотную
   к левому краю — при column-gap там остался бы необъяснимый отступ.
   Селектор с .uz-dcard — чтобы наверняка перебить `display: flex` из правила
   `.uz-dcard > *` (у одного класса с ним равная специфичность, и всё решал бы порядок строк). */
.uz-dcard > .uz-dcard__name--icon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    row-gap: 2px;
}

/* Значок занимает ОБЕ строки и центрируется между ними (решение пользователя 2026-09-01:
   «иконка должна быть между названием и доменом»). Раньше стоял grid-row: 1 — значок был
   привязан к строке имени; пользователь попросил опустить его в середину пары. */
.uz-dcard__name--icon > svg { grid-column: 1; grid-row: 1 / span 2; }
.uz-dcard__name--icon > .uz-dcard__nametext { grid-column: 2; grid-row: 1; }
.uz-dcard__name--icon > .uz-dcard__namesub { grid-column: 2; grid-row: 2; }

/* Срок действия — только на телефоне (включается в медиазапросе 680px). На десктопе
   его роль играет колонка «Период», а пятый элемент сломал бы сетку из четырёх колонок:
   display:none убирает его из грид-потока целиком. */
.uz-dcard__valid { display: none; }

/* Компактный тег «есть открытая заявка» внутри статуса домена.
   Живёт в одной строке с бейджем статуса. */
.uz-dcard__notice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--uz-line-soft);
    background: color-mix(in oklch, var(--uz-warning) 6%, var(--uz-surface));
    font-size: 11px;
    font-weight: 500;
    color: var(--uz-text-dimmer);
    white-space: nowrap;
}
.uz-dcard__notice-dot {
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--uz-warning);
}
.uz-dcard__notice-text {
    line-height: 1.2;
}

/* Шестерёнка у «Управления»: размер по кеглю строки, чтобы не спорила со словом */
.uz-dcard__gear { width: 15px; height: 15px; flex-shrink: 0; }
/* Иконка действия в строке списка — тот же размер, что у шестерёнки «Управления»:
   действия в списках должны выглядеть одинаково, в какой бы таблице ни стояли. */
.uz-actlink__ico { width: 15px; height: 15px; flex-shrink: 0; }
/* Кегль и начертание как у кнопки «Управление» в той же строке (решение пользователя
   2026-08-03): срок домена — такая же значимая величина, как действие, и мельче он
   читался как служебная подпись. */
.uz-dcard__period { font-size: 14px; font-weight: 700; color: var(--uz-text); }

/* Сумма платежа («Платежи»). Отдельный класс, а не __period: тот на телефоне скрывается —
   для домена срок там второстепенен, а для платежа сумма и есть главное число карточки. */
.uz-dcard__amount { font-size: 14px; font-weight: 700; color: var(--uz-text); }
/* wrap — чтобы в узкой колонке кнопки перенеслись, а не распирали её и не ломали сетку */
/* ===== Списки «Заявки» и «Счета» тем же капсульным шаблоном (2026-08-14) =====
   Отличаются только числом колонок, поэтому переопределяем ОДНУ переменную --uz-dcols:
   и легенда, и капсулы читают её же. Ширины фиксированные, без auto/max-content — каждая
   капсула сама себе grid-контейнер, и трек «по содержимому» считался бы для каждой строки
   заново, отчего колонки разъезжались бы от строки к строке. */
.uz-dlist--app { --uz-dcols: minmax(110px, 1fr) 170px minmax(180px, 1.6fr) 130px 170px; }
/* Колонка «№ счёта» убрана (решение пользователя 2026-08-14): номер клиенту ни о чём не
   говорит, он опознаёт счёт по домену и дате. Состав стал зеркальным «Заявкам». */
.uz-dlist--inv { --uz-dcols: minmax(110px, 1fr) 140px minmax(180px, 1.5fr) 120px 150px; }
/* Списки менеджера: тот же вид капсул, что у клиента, но свой состав колонок —
   «Домен · Владелец · Статус · Дата · Действия» («№» убран 2026-08-20: номер менеджер
   узнаёт в карточке заявки). Колонок пять, как у клиента, но «Статус» тут заметно шире:
   в нём бейдж стадии с длинными формулировками вроде «Клиент запросил электронный договор».
   ⚠️ Класс идёт ВМЕСТЕ с .uz-dlist--app и переопределяет только --uz-dcols: все остальные
   правила (разделители, поведение на телефоне) написаны на --app, и дублировать их нельзя —
   разъедутся при первой же правке. Отсюда и парный селектор: он специфичнее одиночного
   .uz-dlist--app, иначе ширины остались бы клиентскими.
   ⭐ 2026-08-29: первой колонкой добавлен «Договор» — номер договора теперь показан во ВСЕХ
   списках менеджера, а не только в очереди (просьба пользователя). Ширина везде одна и та же,
   72px.
   ⚠️ История ширины: 72px заводились под полный номер («1204/D-26» ≈ 71px). 2026-09-01 номер
   на экране укоротили до «1204», подпись легенды убрали, и колонку сузили до 40px.
   ⭐ 2026-09-03 владелец вернул полный номер — вместе с ним вернулись и 72px, во всех шести
   списках сразу. Ширина у них общая намеренно: колонка одна и та же, и разная её ширина
   при переходе между списками читалась бы как съехавшая вёрстка.
   Разделитель после номера рисует общее правило .uz-dcard, отдельного CSS не нужно. */
.uz-dlist--app.uz-dlist--mgr {
    /* 16px вместо базовых 22px: при 22px между номером договора и доменом оставалась полоса
       в 31px — заметно шире, чем те же 23px в очереди, откуда колонка и пришла. */
    --uz-dgap: 16px;
    --uz-dcols: 72px minmax(130px, 1fr) minmax(140px, 1fr) minmax(230px, 1.9fr) 120px 180px;
}

/* Остальные списки менеджера — тот же вид капсул, свои наборы колонок.
   ⚠️ Все ширины — фиксированные или minmax, ни одной auto: треки, зависящие от содержимого,
   считаются для каждой капсулы отдельно (общей таблицы нет), и колонки разъезжались бы от
   строки к строке. Причина подробно расписана у .uz-dlist выше. */

/* Очередь действий: «№ договора · Клиент · Статус · Ждёт · Действия».
   Номер договора добавлен первой колонкой 2026-08-28: он опознаёт клиента в переписке и в
   бухгалтерии, а разделитель между ним и именем рисуется сам — общим правилом .uz-dcard.
   ⚠️ Ширину держит сам номер: 72px — это «1204/D-26» плюс запас. Замер 2026-09-03 в живом
   DOM: трёхзначный «104/D-26» занимает 62.9px при кегле 14px/600 (Manrope), четырёхзначный
   выходит ≈71px. То есть 72px — потолок, а не округление: ниже номер начнёт наезжать на
   разделитель, и сужать колонку нельзя.
   Подпись легенды над колонкой убрана 2026-09-01 (пустой span, см. шаблоны), поэтому спорить
   за ширину ей больше нечем; до этого она диктовала минимум («№ ДОГОВОРА» — 83px, из-за чего
   между номером и именем зияла пустота, замечание 2026-08-29, дважды).
   ⭐ 2026-09-03: номер снова показывается целиком по просьбе владельца, и колонка вернулась
   с 40px к историческим 72px.
   Зазор списка ужат с 22 до 14px, он же задаёт положение разделителей.
   Из шести колонок Дениса осталось пять: «Тип» убран — значок аккаунт/заявка ничего не
   добавлял (у аккаунта в «Клиенте» и так иконка ФЛ/ЮЛ рядом с именем, у заявки — домен с
   владельцем под ним); «Действие» убрано — подпись вроде «Проверить анкету» дублировала
   статус и кнопку рядом с ним. «Ждёт» убрана — история в правиле ниже.
   ⭐ 2026-09-02: сюда же вернулось «Ожидание». Оно расходилось с очередью двумя колонками —
   «Кого ждём» (плашка «Клиент»/«CCTLD») и «Ждёт» (длительность); обе владелец убрал, наборы
   совпали, и правило у них общее. Так они и должны жить: страницы открывают из одного
   меню и смотрят подряд, а колонки, прыгающие при переключении, читаются как другая таблица.
   ⚠️ Разъединять обратно — только если у одного из списков появится своя колонка. Держать
   два одинаковых набора в двух правилах нельзя: они уже разъезжались так однажды. */
.uz-dlist--queue,
.uz-dlist--waiting {
    --uz-dgap: 14px;
    /* Колонок четыре. ⚠️ «Ждёт» (90px, между «Статусом» и «Действиями») владелец убирал
       ДВАЖДЫ: 2026-08-29 при обратном порядке сортировки, и ещё раз 2026-09-03 — в тот же
       день, когда попросил её вернуть и посмотрел на результат. Не возвращать без просьбы.
       Размен известен и принят: списки идут NEWEST_ACTIVITY_FIRST, сверху самое свежее,
       поэтому давность ожидания теперь не видна ни здесь, ни где-либо ещё.
       ⭐ Положение «Статуса» правится долями СОСЕДА СЛЕВА, а не своими: плашка прижата к левому
       краю колонки, поэтому колонка начинается там, где кончается «Клиент».
       История подгонки (вся — по просьбам пользователя): 2026-08-29 статус двигали влево
       (0.6fr / 1.4fr, начало ~358px), 2026-09-01 вправо (1fr / 1fr, ~534px), затем чуть назад
       влево (0.85fr / 1.15fr, ~469px), 2026-09-02 — ещё левее, текущие 0.72fr / 1.28fr.
       Замер после правки (окно 1234px, капсула 1180px): «Клиент» 325px, «Статус» начинается
       на 449px против прежних 507px — то есть уехал влево на 58px, ровно половина пути
       к самому левому варианту из истории.
       ⚠️ Ниже 375px «Статус» опускать нельзя: столько занимает самая длинная подпись словаря
       («Подписал договор, ожидает подтверждения», замерено при кегле 14px). Сейчас у него
       ~577px — запас есть. Двигать статус правее — наращивать долю «Клиента», левее —
       уменьшать, но не до потери этих 375px, иначе подписи поедут на две строки.
       Имени хватает 232px («Тошматов Бекзод Улугбекович»), при 0.72fr выходит ~325px.
       ⚠️ Доли 0.72/1.28 переживают появление и снятие «Ждёт» без правки: колонка забирает
       свои 90px + 14px зазора у общего свободного места, а не у кого-то одного. Замеры
       при окне 1280px (капсула 1180px): с «Ждёт» — «Клиент» 275px / «Статус» 489px,
       без неё — 275px / 489px + 104px, оба варианта выше минимумов (232px и 375px). */
    /* ⭐ Колонка «Ждёт» (90px) — пятой, между «Статусом» и «Действиями». Владелец
       возвращал её и убирал несколько раз в начале сентября; с 2026-09-04 она ЗДЕСЬ.
       90px хватает: самое длинное значение formatWaitingTime вида «120 д 23 ч» —
       ~76px при кегле 14px. Доли соседей не трогаем: колонка берёт своё из общего
       свободного места, минимумы 232px и 375px остаются с запасом. */
    /* ⚠️ «Действия» — 160px, а не прежние 140 (2026-09-04). На стадии «Клиент не запросил
       договор» кнопок стало ЧЕТЫРЕ (подтвердить подписание, договор отправлен, загрузить
       договор, профиль), и в 140px они ужимались с 40 до 35px по ширине — замер показал
       35x40 против нормальных 40x40 у соседних строк. 200px = 4 кнопки по 44 + три зазора
       по 4px + запас. Заодно «Ждёт» сдвинулся левее, как и просил владелец.
       ⚠️ Доли соседей не трогаем: 40px берутся из общего свободного места. Замер после
       правки: «Клиент» ~264px, «Статус» ~460px — оба выше минимумов 232 и 375. */
    /* ⚠️ «Ждёт» 80px и «Действия» 152px (2026-09-04, просьба владельца сдвинуть «Ждёт»
       правее). Сдвинуть его можно только сузив то, что стоит СПРАВА: сама колонка и ряд
       кнопок. 80px хватает — самое длинное реальное значение «7 д 19 ч» занимает ~55px
       (замер), а формат formatWaitingTime длиннее «120 д 23 ч» (~76px) не бывает.
       152px = 3 кнопки по 44 + два зазора по 4px, ровно под нынешний максимум в ряду. */
    --uz-dcols: 72px minmax(232px, 0.72fr) minmax(375px, 1.28fr) 80px 152px;
}

/* Клиенты: «Договор · Имя/Организация · Статус · Действия».
   ⭐ 2026-08-30: колонок стало ЧЕТЫРЕ вместо восьми, убирали по частям одной правкой
   пользователя (сессия): «Телефон» → «E-mail» → «ПИНФЛ/ИНН» и «Тип». Предыстория:
   2026-08-29 контейнер сузили до ширины хедера (1180px → 1122px содержимого капсулы),
   и восемь колонок в него не раскладывались вообще — суммарная потребность колонок была
   ~1275px против 1122px. Ужимать было нечего: каждая из ПИНФЛ, кнопок действий и бейджа
   ФЛ/ЮЛ занимала ровно свой текст, поэтому резать пришлось составом, не шириной.
   Из ужатого не переносится ни ПИНФЛ/ИНН, ни телефон, ни e-mail — все трое целиком видны
   в карточке клиента («Просмотреть» → fragments/contact-readonly и accountReadOnly),
   подробности и оговорка про поиск по e-mail — в разметке, у места вырезанных ячеек.
   Тип клиента (ФЛ/ЮЛ) — не выброшен, а перенесён значком перед именем, как в «Очереди»
   (manager-queue.html) — тоже в разметке.
   Освободившееся отдано имени и статусу: имя — гибкая minmax(232px, 1fr) (232px — реальная
   длина «Тошматов Бекзод Улугбекович», тот же замер, что и в очереди), статус — фиксированные
   384px, которых хватает самой длинной подписи словаря с запасом (см. правило ниже).
   Гэп и ширина номера договора приведены к соседям — 14px и 72px, как в «Очереди»/«Ожидании». */
.uz-dlist--clients {
    --uz-dgap: 14px;
    --uz-dcols: 72px minmax(232px, 1fr) 384px 170px;
}

/* ⭐ 2026-08-30: отсюда УБРАНО правило `font-size: 12.5px` для плашек статуса этого списка.
   Оно было вынужденным: статусу удавалось выделить лишь ~220px, и в общий кегль 14px длинные
   подписи туда не вставали. С шестью колонками статусу отдано 384px, и мельчить больше незачем —
   список вернулся к общему кеглю 14px, как в «Очереди» и «Ожидании». Замеры на живой странице
   (шрифт плашек — моноширинный JetBrains Mono, ширина растёт строго по числу знаков):
   самая длинная подпись словаря — «Подписал договор, ожидает подтверждения», 375px при 14px
   (338px при 12.5px); следующая за ней — 279px. Запас колонки — 9px.
   ⚠️ Если словарь в fragments/status-badge :: clientStageBadge пополнится подписью длиннее
   39 знаков — не возвращать мелкий кегль, а расширить колонку: 384px тут не сакральны,
   имя отдаёт ширину до 232px без потерь (сейчас у него 268px). */

/* Плашке статуса разрешён перенос. Названия стадий — целые фразы («Клиент подписал договор,
   ожидает подтверждения» — 425px), а .badge по умолчанию nowrap: в узкой колонке текст не
   переносился, а выезжал за неё и наползал на соседнюю («Ждёт»).
   Где это проявляется: в «Клиентах» — всегда, там колонок восемь и шире 277px статусу не дать,
   не порезав имя клиента и e-mail; в «Очереди» и «Ожидании» — только когда окно уже ~1300px.
   Две строки в самых длинных статусах лучше, чем наложение текста.
   ⚠️ Правило перебивает и утилиту whitespace-nowrap на плашках статусов заявки (селектор
   специфичнее) — так и задумано, они переносятся по тем же причинам. */
/* ⚠️ Цепочка обёрток между ячейкой и плашкой (ячейка → .flex из разметки → <div> фрагмента
   status-badge) по умолчанию раздувается до max-content своего содержимого. Из-за этого
   max-width:100% на самой плашке ничего не ограничивал: «100%» считался от раздутой обёртки,
   то есть от неё же самой, и длинная подпись выезжала за колонку на ~90px (найдено 2026-08-29).
   min-width:0 снимает автоминимум флекс-элемента, max-width привязывает каждое звено к
   родителю — только после этого плашка знает настоящую ширину колонки. */
.uz-dlist--mgr .uz-dcard__status,
.uz-dlist--mgr .uz-dcard__status > *,
.uz-dlist--mgr .uz-dcard__status > * > * {
    min-width: 0;
    max-width: 100%;
}

.uz-dlist--mgr .uz-dcard__status .badge {
    white-space: normal;
    text-align: left;
    /* width: max-content обязателен вместе с white-space: normal: потеряв nowrap, плашка
       растягивалась на всю колонку и переносила текст даже когда места хватало (ряд выходил
       88px вместо 65). max-width держит её в границах колонки — если подпись реально длиннее,
       перенос остаётся, но за колонку она не вылезает. */
    width: max-content;
    max-width: 100%;
}

/* Зарегистрированные домены — одиннадцать колонок: «Договор · Заявка · Домен · Владелец ·
   Клиент · CCTLD ID · Статус заявки · Статус CCTLD · WHOIS · Дата · Действия».
   ⚠️ Зазор сжат до 14px ЛОКАЛЬНО, а не колонки выброшены: при базовых 22px десять зазоров
   съедали ~220px, и колонки переставали помещаться в 1440px контейнера. Убирать
   что-то из состава — решение не про вид, поэтому сохранён весь набор таблицы.
   ⭐ 2026-08-29: прежняя колонка «№» показывала склейку «договор-заявка» одной строкой
   («102/D-26-3»), и номер договора в ней не читался. Разнесена на две — «Договор» (72px, как
   в остальных списках) и «Заявка» (56px, там 1-3 цифры; ширину держит подпись «ЗАЯВКА»).
   Данные те же, просто врозь: +43px к минимальной ширине списка. */
.uz-dlist--regdom {
    /* ⚠️ Пересчитано под ширину хедера (2026-08-29): 1124px вместо 1382px, а колонок здесь
       одиннадцать — самый плотный список панели. Зазор 10px, ширины срезаны по замерам
       (номер договора 66, номер заявки 46, CCTLD ID 76, WHOIS 70, дата 86, «Открыть» 92).
       Домен, владелец и клиент — доли: остаток делится между ними, они же и обрезаются
       многоточием первыми. Убирать колонки не стал: это решение о содержании, не о виде. */
    --uz-dgap: 10px;
    --uz-dcols: 72px 46px minmax(100px, 1.1fr) minmax(100px, 1fr) minmax(95px, 1fr) 76px 130px 92px 70px 86px 92px;
}

/* Платежи — десять колонок: «Договор · № счёта · Домен · Клиент · Сумма · Статус · Попыток ·
   Оплачено через · Дата · Действия». Зазор сжат по той же причине, что и у доменов.
   ⭐ «Договор» добавлен 2026-08-29 первой колонкой — 72px, как в остальных списках. Номер
   счёта остался: это разные номера, счёт опознают по нему, а клиента — по договору. */
.uz-dlist--minv {
    /* ⚠️ Пересчитано под ширину хедера (2026-08-29): 1124px содержимого вместо 1382px.
       Десять колонок ужаты по замерам содержимого: номер счёта («105/D-26-302-1») — 110px,
       сумма — 98px, «Попыток» — одна цифра, 62px, дата — 86px, «Детали» — 84px.
       «Оплачено через» держит 118px не ради значения, а ради подписи в легенде: у́же она
       ломается на две строки и задирает высоту всего ряда.
       Домен и e-mail клиента — доли: им достаётся остаток, и они же первыми обрезаются. */
    --uz-dgap: 12px;
    --uz-dcols: 72px 110px minmax(95px, 1fr) minmax(115px, 1.2fr) 98px 150px 62px 118px 86px 84px;
}

/* Капсула статуса в списке менеджера крупнее базовой: после того как из колонки убрали
   «Зарезервирован», статус остался ЕДИНСТВЕННЫМ, и по нему список читают первым делом
   (решение пользователя 2026-08-20). Кегль — 14px, ровно как у имени владельца в соседней
   колонке: две главные величины строки должны звучать одинаково, а базовые 12px рядом с
   именем выглядели сноской. Высота — auto: фиксированная высота daisyUI при большем кегле
   обрезала бы текст. */
.uz-dlist--mgr .uz-dcard__status .badge {
    height: auto;
    padding: 5px 12px;
    font-size: 14px;
}

/* ===== Модалка анкеты клиента из «Очереди»/«Ожидания» (2026-08-29) =====
   Окно расширено с max-w-md (448px) до max-w-4xl (896px) по просьбе пользователя. Ширина сама
   по себе делу не помогает: строки «подпись — значение» разведены по краям, и на широком окне
   между ними встала бы полоса пустоты в пол-экрана. Поэтому данные разложены в две колонки —
   анкета целиком видна без прокрутки, а строка остаётся читаемой длины.
   ⚠️ Колонки CSS-сеткой, а не columns: сетка не рвёт группы полей между колонками. Расстояние
   между блоками задаёт row-gap — в разметке у них поэтому сняты space-y-3/pt-2/border-t. */
/* Обёртка «данные + форма проверки»: форма всегда во всю ширину под данными — это действие,
   а не ещё одна колонка справочных полей. Расстояние здесь, потому что space-y-3 из разметки
   пришлось снять (он мешал сетке ниже). */
.uz-cmodal__view > * + * { margin-top: 16px; }

/* ⚠️ Горизонтальная прокрутка у окна профиля (найдено замером 2026-09-02: scrollWidth 808
   против clientWidth 766). Виновата подсказка-карточка кнопки «Удалить аккаунт» в шапке:
   .uz-tipcard абсолютная и в скрытом состоянии НЕ убрана из раскладки (visibility: hidden,
   а не display: none), поэтому её правый край, пока сдвиг не посчитан, торчит за окно.
   Сдвиг --uz-tip-shift uz-tip.js считает только в момент показа — до первого наведения его нет.
   Ровно этот случай уже описан в граблях проекта для .uz-tip::after, и лечится так же.
   ⚠️ Пишем clip (он не создаёт контейнер прокрутки), но браузер вычисляет здесь hidden:
   у окна по вертикали стоит overflow-y: auto, а с прокруткой по одной оси clip по другой
   несовместим. Проверено замером: computed overflow-x = hidden, полосы нет. Для нас разницы
   нет — прилипающих блоков внутри окна не осталось, они вынесены наружу.
   Показанную подсказку это не режет: скрипт держит её внутри границ окна (boundsFor считает
   по .modal-box с отступом 8px) — замер после наведения: сдвиг −49px, карточка 673…993
   при окне 233…1001. */
.uz-cmodal { overflow-x: clip; }

/* ⭐ ПОЛОСЫ КНОПОК ОТДЕЛЕНЫ ОТ ОБЛАСТИ ДАННЫХ (2026-09-05: «отдели как-нибудь вот эти панели
   с кнопками, чтобы они объёмнее были или как-то ещё, чтобы было понятно, что они не часть
   страницы с данными»).
   ⚠️ Приём ОБРАТНЫЙ отвергнутому. Заходом раньше подложку дали САМИМ полосам — получились
   капсулы вокруг кнопок, и владелец отказался («не нужно помещать кнопки в капсулы»).
   Теперь подложку получает ТЕЛО со списком карточек, а полосы остаются на белом фоне окна.
   Результат тот же — граница видна, — но кнопки ни во что не завёрнуты.
   Побочная польза: белые карточки на подкрашенном фоне стали контрастнее, ровно как список
   на странице.
   ⚠️ Тон --uz-bg — тот же, что у фона страницы за окном, и у него есть вариант для тёмной
   темы (#070a10). Разовый rgba здесь дал бы дыру в тёмной теме.
   ⚠️ Разделительной ЛИНИИ здесь нет намеренно: её уже снимали по просьбе владельца
   2026-09-01, и возвращать её — значит идти по кругу. Границу держат подложка и кромка-тень
   (следующее правило). */
/* ⚠️ Скругление — на ТЕЛЕ, а не на полосах (2026-09-05: «углы у панелей с кнопками должны
   быть скруглёнными», владелец отчеркнул четыре угла на стыке полос с боковыми стенками окна).
   Скруглять сами полосы бессмысленно: они белые на белом окне, и срезанный угол там нечем
   показать. Углы видны на границе ПОДЛОЖКИ — стоит скруглить её, и белое поле полосы само
   заходит в угол закруглением. --uz-r-card, как у карточек внутри, чтобы формы перекликались.
   ⚠️ Скругление на блоке с overflow-y: auto заодно обрезает по этой форме и содержимое —
   карточка, подъезжающая к кромке, повторяет изгиб, а не торчит углом. */
/* ⭐ ОБЛАСТЬ ДАННЫХ НА СЕРОЙ ПОДЛОЖКЕ, ПОЛОСЫ КНОПОК — НА БЕЛОМ ФОНЕ ОКНА.
   ⚠️ Скругления у подложки НЕТ и белых плашек под кнопками НЕТ — оба варианта пробовали
   2026-09-05 и оба владелец отменил: «убирай скруглённые углы, верни как было просто
   с тенью». Разделение держат подложка и кромка-тень (следующее правило). Не возвращать
   ни скругление подложки, ни белые плашки на сером — по кругу это ходило дважды.
   ⚠️ Тон: подмешиваем 6% цвета текста к --uz-bg (выходит ≈ #e9ecef). Чистый --uz-bg
   (#f7fafd) здесь уже пробовали, и владелец сказал, что не видит разницы — замер по
   отрендеренному скриншоту подтвердил: 8 единиц из 255, около 3% светлоты, да ещё почти
   вся подложка закрыта белыми карточками и видна лишь в щелях. С 6% разница с белым стала
   22 единицы, то есть втрое заметнее.
   ⚠️ Смесь с --uz-text, а не жёсткий серый: в тёмной теме --uz-text светлый (#e8eef6),
   и подложка станет чуть СВЕТЛЕЕ почти чёрного окна — контраст будет в обеих темах. */
.uz-cmodal__body { background: color-mix(in srgb, var(--uz-text) 6%, var(--uz-bg)); }

/* ⭐ КРОМКА-ТЕНЬ У ПОЛОС: содержимое видимо уходит ПОД них.
   ⚠️ ПОЧЕМУ НЕ inset box-shadow НА ТЕЛЕ — так было сделано сначала, и владелец сразу поймал
   дефект: «тень не работает, когда панель с кнопками заезжает на плитку с данными».
   Внутренняя тень принадлежит ТЕЛУ и рисуется вместе с его фоном, то есть ПОД потомками:
   пока у кромки был просвет между карточками, тень было видно, а как только под полосу
   подъезжала сама карточка, её белый фон закрывал тень целиком.
   Лечение: тень рисует не тело, а САМА ПОЛОСА — псевдоэлементом, свисающим в область данных.
   Псевдоэлемент позиционированный, а позиционированное рисуется ПОВЕРХ обычного потока,
   поэтому карточка его не перекрывает.
   ⚠️ z-index ОБЯЗАТЕЛЕН, без него верхняя тень не работала (вторая жалоба владельца:
   «проблема с тенью у панели с кнопками сверху осталась»). Карточки — это
   <details class="uz-data--fold">, а у .uz-data--fold стоит position: relative. То есть
   и полосы, и карточки — позиционированные элементы с z-index: auto, а такие рисуются
   в ПОРЯДКЕ ДЕРЕВА: верхняя полоса стоит в разметке ДО тела, и карточка ложилась поверх
   её псевдоэлемента; нижняя идёт ПОСЛЕ тела и потому работала сразу. z-index: 1 выводит
   обе полосы над содержимым независимо от порядка в разметке.
   ⚠️ Значение маленькое намеренно: модалка daisyUI и её меню живут выше, и перебивать их
   эта единица не должна.
   ⚠️ У ВЕРХНЕЙ полосы тень снизу (::after), у нижних — сверху (::before). Нижних две,
   и они взаимоисключающие: .uz-cmodal__verify на проверке анкеты и
   .uz-cmodal__foot[data-place="bottom"] в профиле клиента.
   ⚠️ pointer-events: none обязателен: полоса свисает поверх содержимого, и без этого она
   перехватывала бы клики по верхней кромке первой карточки.
   ⚠️ Цвет из --uz-line-strong: в тёмной теме токен становится светлым, и кромка остаётся
   заметной; чёрная тень там просто исчезла бы. */
.uz-cmodal__foot,
.uz-cmodal__verify {
    position: relative;
    z-index: 1;
}

.uz-cmodal__foot[data-place="top"]::after,
.uz-cmodal__foot[data-place="bottom"]::before,
.uz-cmodal__verify::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    /* ⚠️ 6px и 30% — приглушено по просьбе владельца («тень должна быть поменьше и менее
       заметной»). Было 10px при 55%: полоса читалась как нарисованная линия под кнопками,
       а нужна лишь подсказка, что содержимое уходит под панель. Ниже 4px спад перестаёт
       быть заметен вовсе. */
    height: 6px;
    pointer-events: none;
}

.uz-cmodal__foot[data-place="top"]::after {
    top: 100%;
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--uz-line-strong) 30%, transparent), transparent);
}

.uz-cmodal__foot[data-place="bottom"]::before,
.uz-cmodal__verify::before {
    bottom: 100%;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--uz-line-strong) 30%, transparent), transparent);
}

/* ⭐ УГЛЫ ОКНА КРУГЛЕЕ (2026-09-05: «я имел ввиду вот тут углы загнуть» — владелец отчеркнул
   все четыре угла самого окна). База .modal-box — --uz-r-card, 22px; здесь 32px.
   ⚠️ Это про углы ОКНА, а не про полосы кнопок. Заходом раньше просьбу «закруглить» поняли
   как «сделать полосы с кнопками панелями» — им дали подложку и скругление, и владелец
   отказался: «не нужно помещать кнопки в капсулы». Полосы остались прозрачными, гнётся
   только рамка окна.
   ⚠️ Правило на .uz-cmodal, поэтому действует и на три маленьких окна (доработка, одобрение,
   удаление) — они тоже .uz-cmodal. Так и надо: разные скругления у окон одного экрана
   читались бы как рассинхрон.
   ⚠️ Голое число, а не токен: между --uz-r-card (22px) и стадионом --uz-r-pill ступени
   в системе нет, а заводить токен ради одного места незачем.
   ⚠️ Содержимое углы не режет: у нижней полосы 16px отступа снизу, а кривая в 32px забирает
   у горизонтали на этой высоте около 4px — кнопка «Одобрить» стоит дальше. */
.uz-cmodal { border-radius: 32px; }

/* ⭐ ПОЛОСЫ КНОПОК ВЫРАВНЕНЫ ПО КАРТОЧКАМ (2026-09-05, «криво расположены кнопки, сдвинь
   левее»). Обе полосы — верхняя (.uz-cmodal__foot) и нижняя (.uz-cmodal__verify) — лежат
   СНАРУЖИ прокручиваемого тела: их для того и вынесли, чтобы до кнопок не нужно было
   прокручивать. Побочный эффект: когда у тела появляется полоса прокрутки, она съедает
   ширину у КАРТОЧЕК, а полосы кнопок остаются на месте — и кнопки повисают правее карточек.
   Замер: в режиме чтения правый край карточки и группы действий совпадал (1087), при входе
   в правку карточки уезжали на 1073 (полоса прокрутки 15px), а кнопки оставались на 1087.
   ⚠️ Величину НЕ хардкодим: ширина полосы прокрутки зависит от системы и браузера —
   на Windows это ~15px, а при оверлейных полосах (macOS, мобильные) ровно 0, и вшитое
   число сдвинуло бы кнопки не туда. Число приходит из замера живого блока: его кладёт
   в --uz-cmodal-gutter функция syncQueueModalGutter (queue-contact-modal.html).
   ⚠️ Запасное значение 0px обязательно: до первого замера (и если скрипт не отработал)
   отступ должен остаться прежним, а не схлопнуться в none.
   ⚠️ Для .uz-cmodal__verify тот же отступ задан НЕ здесь, а в его собственном правиле ниже
   по файлу: там стоит СОКРАЩЁННЫЙ padding, и он идёт позже — объявление отсюда он бы просто
   перекрыл. */
/* ⚠️ ПОЛОСЫ КНОПОК ОСТАЮТСЯ ПРОЗРАЧНЫМИ. 2026-09-05 их на один заход сделали панелями —
   подложка --uz-bg, скругление --uz-r-card, внутренние отступы (просьба «у вот этих панелей
   с кнопками должны быть закруглённые углы и чуть больше пространства от слов к краям»).
   Владелец, увидев результат, отказался: «не нужно помещать кнопки в капсулы». Откачено
   в тот же день. НЕ предлагать заново без просьбы.
   Здесь остаётся только поправка правого края — она к капсулам отношения не имеет,
   см. следующий комментарий. */

/* ⭐ ПРАВЫЙ КРАЙ ПОЛОС ВЫРАВНЕН ПО КАРТОЧКАМ (2026-09-05). Обе полосы — верхняя
   (.uz-cmodal__foot) и нижняя (.uz-cmodal__verify) — лежат СНАРУЖИ прокручиваемого тела:
   их для того и вынесли, чтобы до кнопок не нужно было прокручивать. Побочный эффект:
   когда у тела появляется полоса прокрутки, она съедает ширину у КАРТОЧЕК, а полосы кнопок
   остаются на месте — и кнопки повисают правее карточек.
   Замер: в режиме чтения правый край карточки и группы действий совпадал (1087), при входе
   в правку карточки уезжали на 1073 (полоса прокрутки 15px), а кнопки оставались на 1087.
   ⚠️ Величину НЕ хардкодим: ширина полосы прокрутки зависит от системы и браузера —
   на Windows это ~15px, а при оверлейных полосах (macOS, мобильные) ровно 0, и вшитое
   число сдвинуло бы кнопки не туда. Число приходит из замера живого блока: его кладёт
   в --uz-cmodal-gutter функция syncQueueModalGutter (queue-contact-modal.html).
   ⚠️ Запасное значение 0px обязательно: до первого замера (и если скрипт не отработал)
   отступ должен остаться прежним, а не схлопнуться в none.
   ⚠️ Для .uz-cmodal__verify тот же отступ задан НЕ здесь, а в его собственном правиле ниже
   по файлу: там стоит СОКРАЩЁННЫЙ padding, и он идёт позже — объявление отсюда он бы просто
   перекрыл. */
/* ⚠️ Справа не 16px, а 16px + ширина полосы прокрутки тела: полоса стоит СНАРУЖИ прокрутки,
   и без поправки её кнопки висели бы правее карточек. Число кладёт syncQueueModalGutter
   (queue-contact-modal.html). Слева 16px даёт Tailwind-класс px-4 на самом теге. */
.uz-cmodal__foot { padding-right: calc(16px + var(--uz-cmodal-gutter, 0px)); }

/* ⭐ Промежуток МЕЖДУ колонками значений в окне профиля/проверки — шире базового
   (2026-09-05, просьба владельца: он отчеркнул красным ровно эти зазоры и попросил
   «преимущественно увеличить пространство в указанных местах»). База .uz-data__grid —
   28px, здесь 44px.
   ⚠️ Правило scoped на .uz-cmodal, а НЕ поднято в общий .uz-data__grid: та же сетка
   рисует данные в КАБИНЕТЕ клиента (cab-data.html, contact-readonly.html), а его карточки
   заметно уже окна — там 44px съели бы ширину у самих значений. Окно с 2026-09-05
   растянуто до max-w-5xl, и запас на промежутки в нём есть.
   ⚠️ Меняем только column-gap: расстояние между СТРОКАМИ (20px) владелец не трогал,
   и общий gap здесь перебил бы его вслепую. */
.uz-cmodal .uz-data__grid { column-gap: 44px; }

/* ⭐ ЛИНИИ В ОКНЕ ЗАМЕТНЕЕ (2026-09-05: «все разделительные полосы и границы капсул должны
   быть более явными» — владелец обвёл рамки трёх карточек и линии под их заголовками).
   Рамка карточки: --uz-line (16% чёрного) → --uz-line-strong (26%).
   Линия под заголовком: --uz-line-soft (11%) → --uz-line (16%).
   ⚠️ Берём ГОТОВЫЕ токены, а не разовые rgba: у каждого есть свой вариант для тёмной темы
   (на тёмном фоне линия «съедается» сильнее, и там доли другие — 15/10/28%). Вписанное
   вручную значение работало бы только в светлой.
   ⚠️ Ступеньку между рамкой и внутренней линией СОХРАНЯЕМ: обе подняты на один шаг, но
   рамка остаётся темнее линии. Если сделать их одинаковыми, карточка перестанет читаться
   как отдельная капсула — заголовок будет отчёркнут так же жирно, как её собственный край.
   ⚠️ Scoped на .uz-cmodal, а не поднято в общие .uz-data/.uz-data__title: те же карточки
   рисуют КАБИНЕТ клиента (cab-data.html, contact-readonly.html), а он клиентский и его вид
   владелец отдельно не пересматривал. Понадобится там — переносить осознанно. */
.uz-cmodal .uz-data { border-color: var(--uz-line-strong); }
.uz-cmodal .uz-data__title { border-bottom-color: var(--uz-line); }

/* ⭐ КРУПНЕЕ ТОЛЬКО ПОДПИСИ ПОЛЕЙ — «E-MAIL», «ТЕЛЕФОН», «ИНН» и прочие: 10.5 → 12.5px.
   Они набраны моноширинным в разрядку и капителью, и на 10.5px читались как мелкий шум над
   значением, особенно длинные («ДАТА РЕГИСТРАЦИИ», «РАСЧЁТНЫЙ СЧЁТ»).
   ⚠️ ОСТАЛЬНОЙ КЕГЛЬ ОКНА — ПРЕЖНИЙ, и это отдельное решение владельца (2026-09-05).
   Заходом раньше по просьбе «у всего в этом окне шрифт должен быть крупнее» подняли всё:
   значения и поля 14.5 → 16px, заголовок карточки 16 → 17px, заголовок окна 14 → 15px,
   кнопки полос 14 → 15px. Владелец посмотрел и попросил вернуть: «верни тот же шрифт,
   который был, всему кроме типа ИНН, имейл, телефон и т.д.». Прибавка осталась ровно
   у подписей. Не поднимать остальное заново без просьбы.
   ⚠️ Если когда-нибудь всё же будете менять значения (dd), меняйте ВМЕСТЕ с ними
   .uz-cmodal__inp: поле правки в режиме чтения притворяется обычным текстом, и разъехавшийся
   кегль выдал бы подмену — строка дёргалась бы при входе в правку.
   ⚠️ Scoped на .uz-cmodal: те же .uz-data рисуют кабинет клиента, а его владелец
   не пересматривал. */
.uz-cmodal .uz-data__item dt { font-size: 12.5px; }

/* Шапка карточки внутри окна профиля держит кнопку правки справа. Правило scoped на .uz-cmodal:
   в кабинете клиента те же .uz-data__title — обычные заголовки, и превращать их во флекс-строку
   там незачем. */
.uz-cmodal .uz-data__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Кнопка правки — 36px (значок 20 + паддинг 8): заметно крупнее той, что стояла в шапке окна
   (28px), по просьбе пользователя. */
.uz-cmodal__edit { padding: 8px; }
.uz-cmodal__edit svg { width: 20px; height: 20px; }

/* Группа кнопок отодвинута от правого края карточки (просьба пользователя 2026-08-29:
   «чуть левее»). Заодно это условие того, чтобы подсказка вставала РОВНО НАД кнопкой:
   центрированная всплывашка шириной ~140px требует ~70px справа от центра кнопки, иначе
   она вылезает за окно и добавляет ему горизонтальную прокрутку. 16px отступа + 26px
   паддинга карточки + 16px паддинга тела как раз дают этот запас. */
/* Группа «Доступные действия · Сохранить · Отмена» — в полосе с номером договора, у правого
   края (переехала из шапки окна 2026-09-03).
   ⚠️ order: -1 остался от жизни в шапке, где группа шла в разметке ПОСЛЕ крестика и должна
   была рисоваться перед ним. В полосе соседей с явным order нет, и на одиночном flex-элементе
   отрицательный order ничего не меняет — но убирать его нельзя бездумно: вернут группу в шапку,
   и без него подсказка кнопки развернётся сама при открытии окна (фокус после showModal()
   достаётся первой кнопке в РАЗМЕТКЕ). */
.uz-cmodal__acts {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    order: -1;
    margin-right: 4px;
}


/* ⚠️ Показ/скрытие кнопок описываем здесь, а не утилитами Tailwind. `hidden` (display:none)
   и `inline-flex` — обе утилиты одного свойства и одной специфичности, и кто победит, решает
   порядок в сгенерированном CDN-файле, а он не гарантирован: «Сохранить» из-за этого висела
   в режиме чтения (найдено 2026-08-29). Здесь порядок наш и однозначный. */
.uz-cmodal__acts > span { display: inline-flex; }
.uz-cmodal__acts > span.hidden { display: none; }

/* ⚠️ Здесь жил блок .uz-cmodal__menu — собственное положение и анимация раскрытия меню
   кнопки «Доступные действия», плюс position: relative у .uz-cmodal__head/__foot (якорь
   этого меню) и position: static у .dropdown внутри группы.
   Удалено 2026-09-05 вместе с самим меню: владелец попросил вынести обе его кнопки
   («Редактировать анкету», «Удалить аккаунт») прямо в полосу, и раскрывающегося списка
   в окне не осталось ни одного.
   ⚠️ Правила якоря убраны намеренно, а не забыты: абсолютно позиционированных потомков
   у шапки и полосы больше нет. Подсказки .uz-tip себе не якорь не ищут — у них своё
   position: relative на самом элементе.
   ⚠️ Вернёте меню — возвращать придётся ВСЁ перечисленное: без якоря daisyUI раскроет
   .dropdown-content поверх самой кнопки (замер 2026-09-02: верх меню на 216px при нижней
   границе кнопки 252px). */

/* ⚠️ В ПОЛОСЕ с номером договора (куда группа вернулась 2026-09-03) сбрасываем order и
   отступ: order:-1 выше нужен только в шапке — там он ставит группу слева от крестика.
   В полосе тот же order выбросил бы кнопки в самое начало строки, к номеру договора,
   хотя место им — у правого края.
   ⚠️ К правому краю группу прижимает НЕ это правило, а ml-auto соседней .uz-cmodal__docacts:
   она стоит перед группой и съедает всё свободное место (в режиме проверки анкеты она пустая
   и потому невидима — ширина 0). Своего margin-left: auto здесь ставить НЕ надо: два auto
   в одной строке делят свободное место пополам, и в профиле клиента, где выгрузки не пустые,
   они уехали бы в середину полосы. Замер 2026-09-03: правый край группы 966px — вровень
   с крестиком в шапке. */
.uz-cmodal__foot .uz-cmodal__acts {
    order: 0;
    margin-right: 0;
    margin-left: 8px;
}

/* Блок проверки анкеты — теперь в нём ОДНИ кнопки «На доработку»/«Одобрить»: номер договора
   с 2026-09-01 живёт наверху окна, в полосе выгрузки.
   Без верхней линейки (решение пользователя 2026-08-29): карточки выше и так отделены
   собственными рамками, и ещё одна черта поперёк окна выглядела лишней перегородкой.
   ⭐ Блок ЗАКРЕПЛЁН — вынесен из прокручиваемого тела наружу (просьба пользователя 2026-09-01,
   «чтобы до кнопок не нужно было прокручивать»), и поэтому боковые отступы задаёт себе сам:
   16px, ровно та вертикаль, на которой стоят рамки карточек, крестик в шапке и «Загрузить
   анкету». Пока блок лежал внутри тела, эти 16px ему давал его px-4, а собственные боковые
   отступы были обнулены (просьба сдвинуть кнопки правее, 2026-09-01: до того тут стояли 26px
   и кнопки оказывались в 41px от края).
   ⚠️ Сверху НОЛЬ. Зазор до последней карточки даёт padding-bottom тела (16px) — те же ~15px,
   что и у полосы с номером договора сверху, симметрия сохранена. Добавите отступ здесь —
   верх и низ окна разъедутся.
   ⚠️ Снизу 16px: под кнопками у modal-box своего паддинга нет (p-0), взять воздух больше
   неоткуда.
   ⚠️ Это НЕ возврат отменённого .uz-cmodal__edge: тот равнял края по СОДЕРЖИМОМУ карточек
   (42px, отступ внутри рамки), здесь же равняем по самим РАМКАМ (16px). Цель другая.
   ⚠️ Справа не 16px, а 16px + ширина полосы прокрутки тела: блок стоит СНАРУЖИ прокрутки,
   и без поправки его кнопки висели бы правее карточек. Разбор и замеры — у правила
   .uz-cmodal__foot выше, число кладёт в переменную syncQueueModalGutter. */
/* ⚠️ Сверху 10px, а НЕ ноль (2026-09-05: «добавь немного пространства… немного сверху для
   кнопок внизу»). Разбор — у такого же padding-bottom верхней полосы: этот воздух принадлежит
   ПОЛОСЕ, остаётся белым и отодвигает кромку подложки от кнопок. */
/* ⚠️ Сверху 10px — воздух над кнопками, он принадлежит ПОЛОСЕ (просьба владельца).
   Справа 16px + поправка на полосу прокрутки, как у .uz-cmodal__foot выше. */
.uz-cmodal__verify { padding: 10px calc(16px + var(--uz-cmodal-gutter, 0px)) 16px 16px; }

/* Блок проверки стал СТРОКОЙ: слева «Войти как клиент», справа «На доработку»/«Одобрить»
   (решение пользователя 2026-09-01). Раскладка нужна именно на контейнере — внутри две
   САМОСТОЯТЕЛЬНЫЕ формы, а <form> блочный, и без flex они встали бы друг под другом.
   Двумя формами, а не одной, потому что вложенные <form> браузер выбрасывает (грабли проекта),
   а объединить вход и одобрение в одну форму нельзя: у них разные action. */
.uz-cmodal__verifybar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* ⚠️ Найдено замером 2026-09-03: на время правки анкеты toggleQueueModalEdit вешает на этот
   блок класс .hidden, а он НЕ срабатывал — display оставался flex, и кнопки «Одобрить» /
   «На доработку» продолжали висеть под открытой на правку формой. Причина — специфичность
   слоёв: утилита .hidden приходит из @layer utilities, а правило выше живёт вне слоёв и
   потому выигрывает (та же грабля описана в CLAUDE.md). Лечится своим правилом — ровно так же,
   как уже сделано для .uz-cmodal__acts > span.hidden.
   ⚠️ Дефект не новый: он появился 2026-09-01 вместе с display:flex на этой строке и всё это
   время был незаметен, потому что блок просто оставался на экране. */
.uz-cmodal__verifybar.hidden { display: none; }

.uz-cmodal__verifyrow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

/* ⚠️ Здесь был модификатор .uz-cmodal__verifyrow--end (justify-content: flex-end) — на случай,
   когда в нижней строке окна остаются одни кнопки. Удалён 2026-09-02: после переезда номера
   договора наверх модификатор в разметку так и не попал ни разу, а мёртвый селектор при
   следующей правке строки читается как действующий.
   ⚠️ Не путать с --push ниже: --end правил бы раскладку ВНУТРИ формы одобрения, а нужно было
   держать саму форму у правого края СТРОКИ — это разные вещи, и первое второго не заменяет. */

/* ⭐ 2026-09-03: кнопки одобрения прижаты вправо своим margin-left, а не space-between строки.
   Понадобилось после обмена «Войти как клиент» ↔ «Загрузить анкету»: слева теперь стоит
   выгрузка анкеты, а она УСЛОВНАЯ — у клиента без заявки (applicationId == null) её нет.
   space-between с единственным ребёнком прижал бы «На доработку»/«Одобрить» к левому краю,
   и на таких клиентах кнопки прыгали бы через всю строку. */
.uz-cmodal__verifyrow--push { margin-left: auto; }

/* Подпись и сам номер — в одну строку (решение пользователя 2026-08-29): это одна короткая
   величина, и разносить её на два этажа, как поля в карточках, незачем. */
.uz-cmodal__cn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* ⭐ Номер договора стоит В ПОЛОСЕ ВЫГРУЗКИ, вровень с «Загрузить анкету» (решение пользователя
   2026-09-01). Своей строкой над полосой он был весь предыдущий заход — от неё остался только
   этот модификатор, правило .uz-cmodal__verify--top удалено вместе с той строкой.
   Отступ 12px — не «на глаз»: справа текст «Загрузить анкету» утоплен ровно на столько же
   внутренним паддингом своей кнопки (px-3), и без этих 12px слева подпись липла бы к краю,
   пока правый край держит воздух. Собственного паддинга у полосы менять нельзя — по нему
   выровнены её рамка и подсветка ховера у кнопок. */
.uz-cmodal__cn--foot { margin-left: 12px; }

/* Подпись — как заголовок карточки («Данные учётной записи»), а не как мелкая мононадпись над
   значением (решение пользователя 2026-08-29): номер договора здесь не справочное поле, а то,
   ради чего открыли окно, и по весу он должен звучать наравне с названиями блоков. */
.uz-cmodal__cnlabel {
    flex: none;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--uz-text);
}

/* Номер договора показан как значение, а не как поле (решение пользователя 2026-08-29):
   рамку и фон он получает только после нажатия карандаша рядом. Базовый вид берёт от
   .uz-cmodal__inp — того же, которым нарисованы значения в карточках. */
/* Номер и карандаш — вплотную, по той же причине, что и у кнопок копирования: поле сжато
   по содержимому, иначе значок отъезжал к краю колонки.
   ⭐ 2026-09-01: карандаш всё равно стоял в 50px от номера (замер на живой модалке: текст 64px,
   поле 111px). Причина — атрибут size: у паспортных полей он равен ТОЧНОЙ длине значения
   (ПИНФЛ size=14, серия size=2), и там значок прижат, а номер договора переменной длины
   («107/D-26» — 8 знаков, «1204/D-26» — 9), под него стоял запас size=12. Разницу в ~4 знака
   поле и держало пустой справа.
   Лечится field-sizing: content — поле меряется по содержимому, а не по size, и зазор
   становится 5px при любой длине номера. size в разметке уменьшен до 9 (самый длинный
   реальный номер) — это фолбэк для браузеров без field-sizing, там останется прежнее
   поведение, только без лишнего запаса.
   ⚠️ Только для чтения. В правке поле остаётся прежней ширины по size, чтобы было куда
   печатать, — там field-sizing возвращается в fixed.
   ⚠️ Сбрасывать нужно именно в fixed: у field-sizing всего два значения (fixed | content),
   fixed — начальное. Написанное по привычке `auto` браузер отбрасывает как невалидное,
   и правка молча остаётся content (проверено — объявление не доезжает до элемента). */
.uz-cmodal__cnrow { display: flex; align-items: center; gap: 4px; }
.uz-cmodal__cnrow .uz-cmodal__cninp { width: auto; max-width: 100%; field-sizing: content; }
.uz-cmodal__cnrow.is-editing .uz-cmodal__cninp { width: 100%; field-sizing: fixed; }

.uz-cmodal__cnrow.is-editing .uz-cmodal__cninp {
    padding: 6px 10px;
    border-color: var(--uz-line);
    background: var(--uz-surface);
}

.uz-cmodal__cnrow.is-editing .uz-cmodal__cninp:focus { outline: none; border-color: var(--uz-primary); }

.uz-cmodal__verifyacts { display: flex; align-items: center; gap: 8px; }

/* «Сохранить» — текстовая кнопка вровень со значком отмены (34px по высоте). Зелёная заливка
   у неё та же, что у подтверждающих действий в списках. */
.uz-cmodal__save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--uz-r-ctl);
    font-size: 13px;
    font-weight: 600;
    color: var(--uz-success);
    background: color-mix(in oklch, var(--uz-success) 12%, transparent);
    transition: background .16s;
}

.uz-cmodal__save:hover { background: color-mix(in oklch, var(--uz-success) 20%, transparent); }
.uz-cmodal__save svg { width: 15px; height: 15px; }

/* «Отмена» — пара к «Сохранить» (решение пользователя 2026-09-01, раньше была крестиком).
   Та же высота, кегль и форма капсулы, чтобы кнопки читались как один переключатель
   «применить / откатить»: зелёная капсула слева, красная справа.
   ⚠️ Красная заливка — ЯВНОЕ решение пользователя (2026-09-01). Промежуточный вариант был
   нейтральным, серым, из соображения «отмена лишь возвращает поля, пугать не за что»;
   пользователь попросил именно красную капсулу — не возвращать серый без просьбы.
   Проценты заливки взяты те же, что у «Сохранить» (12% в покое, 20% на ховере), и тот же
   приём color-mix, что уже применён у предупреждающих плашек ниже по файлу, — чтобы обе
   кнопки были одинаковой плотности и не спорили друг с другом. */
.uz-cmodal__cancel {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--uz-r-ctl);
    font-size: 13px;
    font-weight: 600;
    color: var(--uz-danger);
    background: color-mix(in oklch, var(--uz-danger) 12%, transparent);
    transition: background .16s;
}

.uz-cmodal__cancel:hover { background: color-mix(in oklch, var(--uz-danger) 20%, transparent); }

/* «Войти как клиент» в подвале окна профиля: вид у неё теперь как у соседних ссылок выгрузки —
   без капсулы, нейтральным текстом и без значка (решение пользователя 2026-09-01).
   ⚠️ Отступ слева 21px — не «на глаз», а условие «текст не двигать». Со значком текст начинался
   на 33px от левого края кнопки: 12px паддинга + 15px значка + 6px зазора (замерено на живой
   модалке). Значок убрали, паддинг остался 12px — недостающие 21px и добавлены отступом.
   ⚠️ Именно margin, а не padding: паддингом подсветка ховера растянулась бы на 33px левее
   текста и висела бы «пустым крылом», а отступом она обнимает текст ровно так же, как у
   соседних ссылок. */
.uz-cmodal__loginas { margin-left: 21px; }

/* ⚠️ Здесь недолго жило правило .uz-cmodal__edge { padding-right: 42px } — оно выравнивало
   правый край шапки и подвала по содержимому карточек (крестик, карандаш и «Загрузить анкету»
   вставали в одну линию с «Одобрить»). ОТМЕНЕНО по просьбе пользователя 2026-09-01 в тот же
   день: край шапки и подвала снова совпадает с краем КОРОБКИ карточек, то есть с их же px-4.
   Не возвращать без просьбы. */

/* Полоса с номером договора и выгрузкой: прижата к карточкам, БЕЗ воздушной прослойки под
   шапкой (решение пользователя 2026-09-01).
   ⚠️ История этого числа за один день: 8px → 22px → 36px → 52px («опусти ниже» четыре раза)
   и обратно к 12px. Опускать полосу можно было только отступом сверху, а он же и есть та
   пустота — на 52px под шапкой открывалась заметная дыра, и пользователь, увидев её, выбрал
   убрать пустоту совсем, приняв, что полоса поднимется примерно на 40px. То есть «ниже» и
   «без пустоты» здесь взаимоисключающи, и выбран второй вариант. НЕ наращивать этот отступ
   снова без просьбы: каждый добавленный пиксель — это ровно тот зазор, который просили убрать.
   ⚠️ Снизу НОЛЬ — это подогнанное число, а не «забыли отступ». Зазор от полосы до первой
   карточки должен быть ТОЧНО таким же, как от последней карточки до кнопок «На доработку»/
   «Одобрить» внизу окна (просьба пользователя 2026-09-01). Тот зазор складывается из
   space-y-3 тела (12px) и padding-top блока проверки (4px) — 15px по замеру между краями
   рамок. Сверху те же 15px даёт padding-top тела (16px) при нулевом отступе полосы; с прежними
   4px выходило 19px, и низ с верхом не совпадали. Менять это число — значит разъехаться с
   нижним зазором: если правите отступы тела или .uz-cmodal__verify, пересчитайте и здесь.
   ⚠️ Плата за ноль: тело окна прокручивается, и у высоких анкет (юрлицо) карточка при
   прокрутке проходит под полосой вплотную. Признано терпимым — совпадение зазоров важнее.
   ⚠️ Разделительная линия под полосой снята в тот же день и не возвращается — см. комментарий
   в queue-contact-modal.html.
   ⚠️ Исходные 8px пришли из времён, когда полоса стояла ВНИЗУ окна, под карточками. Сейчас она
   наверху, и нынешние 12px к той давней правке отношения не имеют. */
/* ⚠️ Снизу 10px, а НЕ ноль (2026-09-05: «добавь немного пространства, ещё принадлежащего
   панели, немного снизу для кнопок вверху»). Ноль стоял, пока полоса была прозрачной: зазор
   до первой карточки давал padding-top тела, и лишний отступ здесь просто раздвинул бы окно.
   Теперь у тела своя подложка, и граница проходит ровно по краю полосы — кнопки упирались
   в неё вплотную. Эти 10px принадлежат ПОЛОСЕ (остаются белыми) и отодвигают кромку вниз.
   ⚠️ Прежний разбор симметрии верхнего и нижнего зазоров (15px, считались от padding тела)
   этой правкой отменён: теперь воздух под кнопками задают сами полосы, по 10px с внутренней
   стороны каждая — см. такой же padding-top у .uz-cmodal__verify. */
/* ⚠️ Снизу 10px — воздух под кнопками, принадлежит ПОЛОСЕ (просьба владельца). */
.uz-cmodal__foot[data-place="top"] { padding-top: 12px; padding-bottom: 10px; }

/* То же самое, зеркально, для полосы ВНИЗУ окна — в профиле клиента она стоит под карточками
   (просьба пользователя 2026-09-01 «опусти эти кнопки вниз»).
   ⚠️ Сверху 12px, а НЕ ноль, как у верхнего варианта: там ноль работает, потому что зазор даёт
   padding-bottom тела, а тело — контейнер с прокруткой, и его нижний паддинг виден только когда
   прокрутка догнана до конца. У полосы ВНИЗУ этот паддинг оказывается по ту сторону края:
   у трёх профилей из пяти на стенде карточки не помещаются в max-h-[70vh], и при прокрутке они
   упирались в кнопки без просвета (замерено: зазор 0). Собственный отступ полосы от прокрутки
   не зависит.
   Снизу 16px — столько же воздуха под полосой, сколько тело оставляет под кнопками «Одобрить»
   в окне проверки; у самой modal-box паддинга нет (p-0), взять его больше неоткуда.
   ⚠️ Место вставки различается по data-place, а не по классу-модификатору: имя класса с двойным
   подчёркиванием пришлось бы писать внутри выражения Thymeleaf, а там __ — это синтаксис
   препроцессинга, и шаблон падает (подробности — в комментарии у фрагмента docRow).
   Побочная польза: селектор «класс + атрибут» перебивает Tailwind py-3 специфичностью, а не
   порядком правил — иначе всё зависело бы от того, как встанут CDN-стили Tailwind и main.css. */
.uz-cmodal__foot[data-place="bottom"] { padding-top: 12px; padding-bottom: 16px; }

/* Поля прямо в карточках: в режиме чтения неотличимы от текста значения (те же 14.5px/600),
   в режиме правки получают рамку и фон. Так окно не перестраивается при входе в правку —
   меняется только вид полей (решение пользователя 2026-08-29). */
.uz-cmodal__inp {
    width: 100%;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--uz-r-ctl);
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--uz-text);
    /* ⚠️ appearance сбрасываем ради <select>: иначе в режиме чтения у него остаётся
       системная стрелка, и «Регион» выглядит как активный список, хотя он отключён. */
    appearance: none;
    -webkit-appearance: none;
}

.uz-cmodal__inp:read-only,
.uz-cmodal__inp:disabled {
    cursor: default;
    /* Отключённый <select> браузер красит своим фоном и приглушает текст — в режиме чтения
       из-за этого «Регион» выглядел как серая плашка среди обычных значений. */
    opacity: 1;
    background: transparent;
    color: var(--uz-text);
}

.uz-cmodal__form.is-editing .uz-cmodal__inp {
    padding: 6px 10px;
    border-color: var(--uz-line);
    background: var(--uz-surface);
}

.uz-cmodal__form.is-editing .uz-cmodal__inp:focus {
    outline: none;
    border-color: var(--uz-primary);
}

/* ⚠️ На время правки карточки НЕ сворачиваются: внутри поля с required, а на скрытом поле
   браузер не может показать ошибку — форма молча не отправляется. Скрипт раскрывает все
   <details> при входе в правку, а это правило не даёт закрыть их обратно.
   Шеврон при этом гасим, чтобы не обещал действие, которого нет. */
.uz-cmodal__form.is-editing .uz-data--fold > summary {
    pointer-events: none;
    cursor: default;
}

.uz-cmodal__form.is-editing .uz-data--fold > summary .uz-data__chev {
    opacity: .25;
}

/* ⭐ Пояснения в окне «Отправить на доработку» — набраны ТОЧНО ТАК ЖЕ, как значения анкеты
   в карточках рядом (требование владельца 2026-09-02: «жирность как у улица Чингиза
   Айтматова…», эталон — .uz-cmodal__inp).
   ⚠️ Вес у них совпадал и раньше (600 против 600) — по замеру отличались ЦВЕТ (у пояснений
   стоял приглушённый text-base-content/70) и кегль (14px против 14.5px). Именно цвет и читался
   как «бледнее», хотя буквы были той же жирности. Поэтому здесь заданы все три свойства сразу,
   а утилиты Tailwind с прозрачностью из разметки убраны.
   ⚠️ Значение языка (.uz-fixnote__lang) НЕ трогаем — владелец просил «кроме языка».
   Оно и так набрано этим же весом и цветом; отдельного правила ему не нужно, но и приглушать
   соседний текст обратно ради контраста не надо — решение владельца. */
.uz-fixnote {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--uz-text);
}

/* Подпись поля остаётся ПОДПИСЬЮ: тот же вес и цвет, что у пояснений выше, но мельче —
   иначе она сравнялась бы с текстом и перестала читаться как заголовок поля. */
.uz-fixnote--label {
    font-size: 13px;
}

/* ⭐ Значение языка — ТОНЬШЕ соседнего текста (решение владельца 2026-09-02).
   Пояснения вокруг набраны 600-м, поэтому значение выделяется теперь обычным начертанием:
   светлее фона фразы, а не темнее. Прежний полужирный 600 после того, как весь текст окна
   стал 600, всё равно перестал что-либо выделять. */
.uz-fixnote__lang {
    font-weight: 400;
}

/* ⭐ Заголовок окна замечаний — как заголовки карточек анкеты («Данные учётной записи»,
   решение владельца 2026-09-02: «толщина как тут»).
   ⚠️ Вес там и здесь БЫЛ ОДИНАКОВЫМ — 700 против 700 (замер). Тоньше заголовок выглядел
   из-за прописных букв, кегля 14px и разрядки: капитель при равном весе всегда читается
   легче строчных. Поэтому копируем именно то, что отличалось, — кегль 16px (--fs-body,
   как у .uz-data__title) и обычный регистр, а разрядку снимаем.
   ⚠️ Родной .uz-data__title не переиспользуем: у него сверху свои отступы и линия снизу,
   а в шапке окна свой макет со значком и кнопкой. */
.uz-fixnote__head {
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--uz-text);
    text-transform: none;
    letter-spacing: normal;
}

/* ⭐ Поле замечаний в окне «Отправить на доработку» (требование владельца 2026-09-02:
   «границы должны быть более явными»).
   Что было: утилиты Tailwind `border-base-300/60` — светло-серая линия яркостью 0.93 при
   прозрачности 60%. На белом фоне карточки она почти не читалась, и поле выглядело просто
   пустым местом под текстом, хотя писать нужно именно туда.
   Стало: наш токен --uz-line-strong (rgba(17,24,39,.26) в светлой теме, rgba(255,255,255,.28)
   в тёмной) — та же линия, которой в дизайн-системе обводят элементы, требующие внимания.
   ⚠️ Токен, а не «покрасить потемнее»: у него есть пара для тёмной темы, а у утилиты с
   прозрачностью — нет.
   На фокусе рамка становится цветом предупреждения — окно жёлтое, и поле должно отзываться
   в его же цвете. Прежний вариант брал warning на 50% прозрачности и на фокусе бледнел
   сильнее, чем в покое. */
.uz-fixarea {
    border: 1px solid var(--uz-line-strong);
}

.uz-fixarea:focus {
    outline: none;
    border-color: var(--uz-warning);
}

/* Серия и номер паспорта — два поля в одной ячейке: на чтение читаются как «AA 8814205». */
.uz-cmodal__pair { display: flex; align-items: center; gap: 6px; }
.uz-cmodal__pair .uz-cmodal__inp--series { width: 3.5em; flex: none; }
.uz-cmodal__copyrow--series { flex: none; }

/* Значение + кнопка «скопировать» в одной строке ячейки (2026-08-29). Кнопка не занимает
   место в потоке чтения: она бледная и того же роста, что строка значения.
   ⚠️ В режиме чтения поле сжимается по содержимому (width:auto + size в разметке), иначе
   input тянулся на всю ячейку и кнопка уезжала к дальнему краю — просьба пользователя
   поставить её рядом со значением. В правке поле снова занимает всю ширину: там важно
   попасть по нему мышью и видеть границы. */
.uz-cmodal__copyrow { display: flex; align-items: center; gap: 0; }

/* field-sizing: content — поле ровно по тексту, значок вплотную к значению (просьба придвинуть
   ближе, 2026-08-29). Свойство поддерживают свежие Chrome и Edge, а панель менеджера только
   для них и делается. Там, где его нет, работает запасной путь: width:auto + size в разметке —
   поле встанет по числу символов, чуть шире текста, но не на всю ячейку. */
.uz-cmodal__copyrow .uz-cmodal__inp {
    width: auto;
    max-width: 100%;
    field-sizing: content;
    min-width: 2ch;
}
.uz-cmodal__form.is-editing .uz-cmodal__copyrow { gap: 6px; }
.uz-cmodal__form.is-editing .uz-cmodal__copyrow .uz-cmodal__inp { width: 100%; }

/* 32px и значок 18px (просьба «побольше», 2026-08-29). Прежние 26/15 терялись рядом со
   значением: кнопку приходилось выцеливать. Больше делать нельзя — она станет выше строки
   значения (21px) настолько, что начнёт задирать высоту карточек. */
.uz-copy {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--uz-text-dimmer);
    transition: color .16s, background .16s;
}

.uz-copy:hover { color: var(--uz-text); background: var(--uz-icon-bg); }
.uz-copy svg { width: 18px; height: 18px; }

/* Подтверждение копирования — сменой значка на галочку на 1.2 секунды. Всплывающего
   сообщения нет намеренно: оно перекрывало бы соседние значения. */
.uz-copy__ok { display: none; }
.uz-copy.is-copied { color: var(--uz-success); }
.uz-copy.is-copied .uz-copy__ico { display: none; }
.uz-copy.is-copied .uz-copy__ok { display: block; }

/* Подсказки в окне профиля — РОВНО НАД своей кнопкой (просьба пользователя 2026-08-29),
   то есть по центру, как везде в интерфейсе. Раньше они были прижаты к правому краю: у самого
   края окна центрированная всплывашка вылезала за него и добавляла окну горизонтальную полосу
   прокрутки (скрытая, она всё равно участвует в расчёте scrollWidth). Теперь это решено иначе —
   отступом .uz-cmodal__acts от края, см. выше. Отдельного правила положения не нужно вовсе,
   работает общее .uz-tip::after. */

/* ⚠️ Здесь был .uz-cmodal__fields — сетка полей анкеты в две колонки (+ схлопывание в одну
   на 900px). Удалён 2026-09-02: окно переработано на карточки .uz-data со своей раскладкой,
   и класс в разметке не остался нигде. Правило висело мёртвым и при следующей правке окна
   читалось бы как действующее. */

/* Значок ФЛ/ЮЛ слева от имени клиента — 18px вместо 16 (решение пользователя 2026-08-29:
   «немного крупнее»). Заодно в разметке взяты более подробные рисунки: у физлица портрет
   в круге вместо силуэта, у юрлица здание с дверью и окнами вместо пустого прямоугольника —
   на 16px прежний читался как безликая рамка.
   Размер здесь, а не классом в разметке: значков четыре (две страницы × два типа), и при
   правке по месту они разъезжаются. */
.uz-dlist--mgr .uz-dcard__name svg {
    width: 18px;
    height: 18px;
}

/* Кнопки-иконки в «Очереди» и «Ожидании» крупнее (решение пользователя 2026-08-29): было
   28px (padding 6px + иконка 16px) — меньше пальца и мельче всего остального в строке.
   Стало 40px, вплотную к --tap: 44px из дизайн-системы; больше не даёт колонка, там их бывает три.
   ⚠️ Размер задан ЗДЕСЬ, а не классами в разметке: кнопок в двух шаблонах два десятка, у каждой
   свой th:if и свой цвет, и правка по месту означала бы двадцать одинаковых диффов — при
   следующей правке размера они бы разъехались. Разметку Дениса при этом не трогаем вовсе. */
/* ⭐ 2026-09-04: кнопки действий чуть крупнее (просьба владельца) — 44x44 вместо 40x40,
   значок 22px вместо 20. 44px это --uz-tap из дизайн-системы, тот же размер, что у главных
   действий в кабинете; мельче тап-таргета кнопки в этом ряду теперь не бывают.
   ⚠️ Колонка «Действия» расширена под них до 200px: четыре кнопки по 44 плюс три зазора
   по 4px дают 188, и в прежних 180 они снова ужимались бы (замер 2026-09-04 показал ровно
   такую усадку — 35px вместо 40 — когда кнопок стало четыре). */
.uz-dlist--queue .uz-dcard__actions a,
.uz-dlist--queue .uz-dcard__actions button,
.uz-dlist--waiting .uz-dcard__actions a,
.uz-dlist--waiting .uz-dcard__actions button {
    padding: 11px;
    border-radius: 12px;
}

.uz-dlist--queue .uz-dcard__actions svg,
.uz-dlist--waiting .uz-dcard__actions svg {
    width: 22px;
    height: 22px;
}

/* Вертикальная полоса вплотную к кнопке действия — только у «Моих доменов»: там строка
   без неё распадалась. В этих двух списках колонок больше, и лишняя черта перед кнопкой
   загромождала конец капсулы (решение пользователя 2026-08-14). */
.uz-dlist--app .uz-dcard__actions::before,
.uz-dlist--inv .uz-dcard__actions::before,
.uz-dlist--mgr .uz-dcard__actions::before { content: none; }

/* В «Моих доменах» у «Статуса» разделителя нет намеренно — там он последний перед
   действиями, и линию рисует .uz-dcard__actions::before вплотную к кнопке. Здесь «Статус»
   стоит в СЕРЕДИНЕ ряда, и без своей линии колонка выглядела бы слипшейся с датой. */
.uz-dlist--app .uz-dcard > .uz-dcard__status:not(:last-child)::after,
.uz-dlist--inv .uz-dcard > .uz-dcard__status:not(:last-child)::after,
.uz-dlist--mgr .uz-dcard > .uz-dcard__status:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: calc(var(--uz-dgap) / -2);
    width: 1px;
    background: var(--uz-line-strong);
}

/* Статус оплаты в «Заявках» — текстом, а не бейджем (решение пользователя 2026-08-14).
   Кегль и вес как у суммы и срока: это такая же величина строки, а не ярлык. Цвет
   оставлен только там, где он что-то требует от клиента: «не оплачена» — жёлтым,
   «оплачена» — зелёным, остальные состояния нейтральны. */
.uz-paytxt { font-size: 14px; font-weight: 600; color: var(--uz-text-dim); white-space: nowrap; }
.uz-paytxt--warn { color: var(--uz-warning); }
.uz-paytxt--ok { color: var(--uz-success); }

.uz-dcard__num { font-size: 14px; font-weight: 600; color: var(--uz-text-dim); }
.uz-dcard__date { font-size: 14px; color: var(--uz-text-dim); }
/* Длительность ожидания — вид как у «Даты заявки»: справочная величина, не спорит
   со статусом рядом. nowrap обязателен: значение приходит с пробелами («5 д 23 ч»),
   и без запрета переноса растягивало бы капсулу на две строки. */
.uz-dcard__wait { font-size: 14px; color: var(--uz-text-dim); white-space: nowrap; }


.uz-dcard__actions { display: flex; justify-content: flex-end; }
.uz-dcard__actions > .flex { flex-wrap: wrap; justify-content: flex-end; }

/* ⭐ Кнопки действий придвинуты к правому краю капсулы (решение пользователя 2026-09-01).
   ⚠️ Выравнивать было нечего: ячейка уже стоит justify-content: flex-end, и кнопки прижаты
   к её правому краю вплотную (замер: 0px). Отступ в 29px давал СОБСТВЕННЫЙ padding капсулы
   (28px + рамка), поэтому единственный способ сдвинуть кнопки — дать ячейке залезть в этот
   padding отрицательным margin. Берём 12px из 28px: кнопки заметно ближе к краю, но не
   упираются в него.
   ⚠️ Тем же правилом двигается подпись «ДЕЙСТВИЯ» в легенде: у легенды и капсулы правые края
   ячеек совпадают (обе на 1178px до правки), и сдвинув только кнопки, мы бы оставили подпись
   висеть левее них.
   ⚠️ Только для списков менеджера (.uz-dlist--mgr): у клиента свои списки с той же разметкой,
   и трогать их без просьбы незачем.
   Отрицательный margin безопасен: колонка фиксированной ширины, трек от него не съезжает,
   а 12px < 28px padding — за пределы капсулы ячейка не выходит. */
.uz-dlist--mgr .uz-dcard__actions,
.uz-dlist--mgr .uz-dlist__head-act {
    margin-right: -12px;
}

/* Планшет: те же колонки, но теснее — иначе фиксированные ширины не влезают в 1080px
   контейнера и капсула переполняется вправо */
@media (min-width: 681px) and (max-width: 980px) {
    .uz-dlist {
        --uz-dcols: minmax(80px, 1fr) 176px minmax(140px, 2fr) 150px;
        --uz-dgap: 12px;
    }
    .uz-dcard { padding-inline: 22px; }
    .uz-dlist__head { padding-inline: 23px; }
}

/* Фильтр и пустой список: фильтр — просто ряд на фоне, «нет доменов» — одна капсула */
.uz-dfilter { margin-bottom: 12px; }

.uz-dempty {
    padding: 32px 20px;
    text-align: center;
    background: var(--uz-surface);
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    box-shadow: var(--uz-card-shadow);
}

/* Подсказка кнопки действия прижата к правому краю: действия стоят у правого края капсулы,
   и центрированный тултип уходил бы за край окна. */
.uz-dcard__actions .uz-tip::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}

.uz-dcard__actions .uz-tip:hover::after,
.uz-dcard__actions .uz-tip:focus-visible::after,
.uz-dcard__actions .uz-tip--btn:focus-within::after {
    transform: translateX(0) translateY(0);
}

/* Мобила: колонок нет — капсула разворачивается в столбик, и легенда там не нужна.
   Подписи возвращаются к значениям из data-label, иначе «1 год» и дата висят без смысла. */
@media (max-width: 680px) {
    .uz-dlist__head { display: none; }

    /* Радиус снова карточный: «половина высоты» превратила бы торцы в полукруги.
       Раскладка (решение пользователя 2026-07-26): домен слева, статус справа в ОДНОЙ
       строке, кнопка — строкой ниже, за разделителем. Период на телефоне убран: важно,
       что с доменом происходит сейчас, а срок есть на десктопе и на карточке домена. */
    .uz-dcard {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 12px;
        padding: 14px 18px;
        border-radius: var(--uz-r-card);
        align-items: center;
    }

    /* Колонок-разделителей десктопной капсулы тут нет.
       ⚠️ Селектор ПОВТОРЯЕТ десктопный один в один — иначе тот специфичнее и побеждает.
       Именно это и было: в мобильной версии стояло :not(:nth-last-child(2)) — три :not()
       против четырёх, — и вертикальная чёрточка от «Домена» оставалась висеть посреди
       строки, слева от статуса (найдено 2026-08-07). */
    .uz-dcard > :not(:last-child):not(.uz-dcard__status):not(.uz-dcard__valid):not(.uz-dcard__notice)::after { content: none; }
    .uz-dcard__actions::before { content: none; }

    .uz-dcard__period { display: none; }

    /* Имя домена крупнее (решение пользователя 2026-07-31): это заголовок карточки,
       на 15px он читался наравне с подписями. */
    .uz-dcard__name { grid-column: 1; font-size: 17px; }

    /* Статус прижат к правому краю; подпись «СТАТУС» не нужна — рядом стоит имя домена,
       и строка читается как заголовок со значением */
    .uz-dcard__status { grid-column: 2; justify-self: end; }

    /* ЗАПАСНАЯ РАСКЛАДКА: имя во всю ширину, статус под ним, оба по центру.
       Включается ТОЛЬКО когда имя и статус не встают в одну строку (решение пользователя
       2026-08-03) — тогда имя ломалось переносом и налезало на бейдж. Класс вешает
       uz-dcard.js: перенос зависит от длины имени, а не от ширины экрана, и медиазапросом
       такое не поймать. Без JS остаётся рядная раскладка — она читаема в любом случае.
       ⚠️ justify-content обязателен вместе с text-align: ячейка карточки — flex-контейнер
       (.uz-dcard > * выше), и текст в ней это анонимный flex-элемент; одним text-align он
       остался бы у левого края. text-align нужен, когда имя всё же занимает две строки:
       он центрирует строки внутри самого блока текста. */
    .uz-dcard--stack .uz-dcard__name {
        grid-column: 1 / -1;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .uz-dcard--stack .uz-dcard__status {
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: 6px;
    }

    /* Бейдж статуса подрастает вместе с именем, чтобы строка выглядела как пара */
    .uz-dcard__status .badge {
        height: auto;
        padding: 4px 10px;
        font-size: 12.5px;
    }

    /* Срок действия — своей строкой во всю ширину, по центру, за тонкой линией:
       это справка о домене, а не действие, поэтому отделяем от строки «имя + статус». */
    .uz-dcard__valid {
        display: block;
        grid-column: 1 / -1;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--uz-line-soft);
        text-align: center;
        font-size: 12.5px;
        color: var(--uz-text-dim);
    }
    /* Сумма на телефоне — своей строкой за тонкой линией, подпись слева, число справа:
       «Сумма ——— 45 000 сум». Подпись берём из data-label, как в легенде на десктопе. */
    .uz-dcard__amount {
        grid-column: 1 / -1;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--uz-line-soft);
        justify-content: space-between;
        font-size: 15px;
    }

    .uz-dcard__amount::before {
        content: attr(data-label);
        font-size: 12.5px;
        font-weight: 600;
        color: var(--uz-text-dim);
    }

    .uz-dcard__status::before { content: none; }
    .uz-dcard__status > .flex { align-items: flex-end; text-align: right; }
    /* В центрированной раскладке бейдж и комментарий менеджера под ним — тоже по центру */
    .uz-dcard--stack .uz-dcard__status > .flex { align-items: center; text-align: center; }

    /* Кнопка — во всю ширину следующей строкой, отделена полосой.
       display:block обязателен: на десктопе ячейка — flex с justify-content:flex-end,
       и её содержимое осталось бы прижатым вправо. */
    .uz-dcard__actions {
        grid-column: 1 / -1;
        display: block;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--uz-line-strong);
    }

    /* Совсем пустая ячейка не должна оставлять за собой ни разделителя, ни отступа.
       Погашенное «Управление» пустой ячейкой не считается — оно видимое. */
    .uz-dcard__actions:not(:has(a, button, .uz-dcard__manage--off)) { display: none; }

    /* Подписей из data-label здесь больше нет: период скрыт, а статус стоит в одной строке
       с именем домена — строка читается сама, без ярлыка «СТАТУС» над бейджем. */

    /* «Управление» на телефоне — крупная кнопка во всю ширину строки (решение пользователя
       2026-07-26). В разметке это текстовая ссылка (px-0 py-1 text-sm hover:underline) —
       на десктопе так и остаётся, а здесь одевается в кнопку. Скругление обычное
       (--uz-r-ctl), не капсульное: капсула у нас — форма мелких утилитарных кнопок. */
    .uz-dcard__actions > .flex { display: block; }

    /* Обёртка подсказки на телефоне тянется на всю строку, иначе погашенная кнопка
       осталась бы по содержимому: .uz-tip--btn — inline-flex. */
    .uz-dcard__actions .uz-tip--btn { display: block; width: 100%; }

    .uz-dcard__actions a,
    .uz-dcard__actions .uz-dcard__manage--off {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--uz-tap);
        padding: 10px 16px;
        border: 1px solid var(--uz-line);
        border-radius: var(--uz-r-ctl);
        background: var(--uz-surface);
        font-size: var(--fs-body);
        font-weight: var(--fw-bold);
        color: var(--uz-text);
    }

    /* Погашенный вариант одет в ту же кнопку, но цвет остаётся приглушённым:
       правило выше специфичнее базового и перебило бы его. */
    .uz-dcard__actions .uz-dcard__manage--off { color: var(--uz-text-dimmer); }

    .uz-dcard__actions a:hover { text-decoration: none; }
    .uz-dcard__actions a:active { transform: translateY(1px); }
    .uz-dcard__actions .uz-tip::after { left: 50%; right: auto; transform: translateX(-50%) translateY(4px); }
}

/* Список «параметр — значение»: строки разделены линиями, а не слипаются в кашу.
   Зазоры задаём здесь, а не gap'ом: горизонтальный gap разрывал бы линию посередине строки. */
.uz-params { row-gap: 0; column-gap: 0; }

.uz-params > * {
    padding: 9px 0;
    border-top: 1px solid var(--uz-line-strong);
}

.uz-params > *:nth-child(odd) { padding-right: 12px; }   /* колонка подписи не липнет к значению */
.uz-params > *:nth-child(-n+2) { border-top: 0; padding-top: 0; }  /* над первой строкой линия ни к чему */

/* Пагинация. Была «серым шёпотом» из 12px-текста цветом /50 — её не замечали
   (решение пользователя 2026-07-16). Крупнее, контрастнее, кнопки — тап-таргеты. */
.uz-pager {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--uz-line-strong);
}

.uz-pager__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.uz-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap, 44px);
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    background: var(--uz-field-bg);
    color: var(--uz-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color .18s var(--uz-ease), color .18s var(--uz-ease),
                background-color .18s var(--uz-ease);
}

.uz-pager__btn--num { padding: 0 10px; }

.uz-pager__btn:hover:not(.is-disabled) {
    border-color: var(--uz-primary);
    color: var(--uz-accent-ink);
}

/* Текущая страница — тем же приёмом, что активный пункт пилюли подхедера */
.uz-pager__btn.is-active {
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .14);
    border-color: rgba(28, 157, 216, .45);
}

.uz-pager__btn.is-disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* Панель действий: кнопки сгруппированы по смыслу, группы разделены линией.
   Пустых групп не бывает — обёртка висит на тех же th:if, что и её кнопки. */
.uz-actgroup { padding: 14px 0; }
.uz-actgroup:first-child { padding-top: 0; }
.uz-actgroup:last-child { padding-bottom: 0; }
.uz-actgroup + .uz-actgroup { border-top: 1px solid var(--uz-line-strong); }

/* Строка над списком: слева счётчик, справа компактный поиск (решение пользователя 2026-08-20).
   Поиск больше не растягивается во всю ширину — он вспомогательный, а место отдано данным. */
.uz-listbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

/* Это и есть ЗАГОЛОВОК списка (решение пользователя 2026-08-20): прежний h1 с подзаголовком
   с экрана убран, и счётчик занял его место — значит и кегль у него заголовочный, тот же
   text-xl/700, каким набраны заголовки остальных менеджерских страниц («Ожидают делегирования»).
   Мелким полужирным он читался как подпись к таблице, а не как название раздела. */
.uz-listbar__count {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--uz-text);
    white-space: nowrap;
}

.uz-listbar__count b { margin-left: 4px; }

/* Ширина под самый длинный плейсхолдер («Поиск по домену, ИНН или ПИНФЛ...») — при 360px
   он обрезался на середине слова. Правым краем поле стоит вровень с капсулами списка, а под
   подписи колонок подведён не сам блок, а текст кнопки «Найти» (см. .uz-search__btn). */
.uz-listbar__search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(440px, 100%);
}

.uz-listbar__search .uz-search { flex: 1; }

/* Правая группа строки над списком (очередь и ожидание).
   ⚠️ Заводилась под ДВА элемента — поиск и переход к парному списку: без обёртки третий
   элемент попал бы в space-between самой .uz-listbar и встал бы посередине, между счётчиком
   и поиском. Ссылки убирали (с очереди 2026-08-29, с ожидания 2026-09-02), 2026-09-03
   переход между списками живёт в подхедере, и в группе остался ОДИН поиск (решение владельца
   2026-09-04). Группа нужна: прижимает поиск к правому краю и держит ему 440px (правило ниже). */
.uz-listbar__tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* ⚠️ Внутри группы у поиска СВОЯ ширина, без процентов. Базовая .uz-listbar__search задана
   как min(440px, 100%), и эти 100% считаются от ширины группы, которую сама группа берёт
   по содержимому — круг замыкался, и ссылка рядом уезжала на вторую строку. */
.uz-listbar__tools .uz-listbar__search {
    /* 440px — ровно как у поиска на остальных списках (базовая .uz-listbar__search):
       вид у него должен быть один и тот же везде. Не в процентах, см. предупреждение выше. */
    width: 440px;
    max-width: 100%;
    min-width: 0;
}

/* На телефоне группа занимает всю строку и переносится: поиск сверху, ссылка под ним. */
@media (max-width: 680px) {
    .uz-listbar__tools {
        flex-wrap: wrap;
        width: 100%;
        justify-content: stretch;
    }
    .uz-listbar__tools .uz-listbar__search { width: 100%; }
}

/* Строка, не прошедшая фильтр. !important — потому что .uz-dcard задаёт display: grid
   (и display: block в мобильной раскладке), и обычным display:none её не перебить. */
.uz-dcard--filtered { display: none !important; }

/* ⭐ Строка, не попавшая на текущую страницу (2026-09-02). Отдельный класс от фильтра:
   причины скрытия разные, и по классу в инспекторе видно, что именно спрятало строку.
   !important — по той же причине, что у фильтра выше. */
.uz-dcard--paged { display: none !important; }

/* ⭐ Клиентский перелистыватель списков «Очередь» и «Ожидание» (требование владельца
   2026-09-02: «после 10 клиентов должен появляться перелистыватель»).
   ⚠️ ВИД НЕ СВОЙ: переиспользуем .uz-pager/.uz-pager__nav/.uz-pager__btn серверной пагинации
   (fragments/pagination.html, «Заявки»/«Клиенты»/«Домены») — перелистыватель в панели должен
   выглядеть одинаково везде. Здесь только два отличия, оба по просьбе владельца:
     • НЕТ верхней линии — список из капсул уже кончается видимой границей, и черта поперёк
       читалась как ещё один разделитель ни к чему;
     • меньше воздуха сверху и снизу: 14px вместо 16px padding-top и прижатый низ.
   ⚠️ Первая версия этого блока объявляла СВОИ .uz-pager и .uz-pager__btn — они молча
   переопределяли серверные (кнопки становились 36px вместо 44px). Не повторять: имена
   .uz-pager* заняты, для отличий заводить модификатор. */
.uz-pager--live {
    padding-top: 0;
    border-top: 0;
    margin-top: 14px;
}

/* ⚠️ Под перелистывателем было слишком пусто (замечание владельца 2026-09-02): от кнопок до
   футера 84px. Это НЕ отступ перелистывателя, а нижнее поле страницы — main.uz-main держит
   padding-bottom: 64px, и на списке, который кончается кнопками, оно читается как провал.
   Ужимаем до 20px, но ТОЛЬКО на странице с показанным перелистывателем: :has() смотрит на
   :not([hidden]), поэтому при десяти строках и меньше (перелистывателя нет) поле страницы
   остаётся прежним, как на всех остальных экранах панели.
   ⚠️ Глобально 64px не трогаем: это общий воздух под содержимым всех страниц кабинета. */
.uz-main:has(.uz-pager--live:not([hidden])) {
    padding-bottom: 20px;
}

/* Разрыв «…» между далеко отстоящими номерами. У серверной пагинации его нет — она печатает
   все страницы подряд, но там их единицы; здесь список может вырасти. */
.uz-pager__gap {
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
    color: var(--uz-text-dimmer);
    font-size: 14px;
    font-weight: 600;
}

/* На телефоне поиск занимает всю ширину: 360px там всё равно вся строка, а прижимать его
   вправо не к чему — счётчик уходит на строку выше. */
@media (max-width: 680px) {
    .uz-listbar__search { width: 100%; }
}

.uz-actgroup__cap {
    display: block;
    margin-bottom: 8px;
    font-family: var(--uz-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--uz-text-dimmer);
}

.uz-actgroup__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* «Следующий шаг» без кнопки: ход за клиентом или за реестром. Говорим об этом словами —
   пустая группа читалась бы как поломка (решение пользователя 2026-07-16). */
.uz-actgroup__wait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--uz-text-dim);
}

.uz-actgroup__wait::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--uz-text-dimmer);
    flex-shrink: 0;
}

/* Шапка страницы кабинета — та же типографика, что во флоу регистрации */
.uz-cab__head { margin: 6px 0 22px; }
.uz-cab__head .uz-page__lead { margin-top: 8px; }

/* Пустая страница договора: кроме заголовка с пояснением на ней ничего нет,
   поэтому прижимать их к левому краю незачем — ставим по центру
   (решение пользователя 2026-07-16). */
.uz-cab__head--empty {
    margin-top: 10vh;
    text-align: center;
}

.uz-cab__head--empty .uz-page__lead {
    margin-left: auto;
    margin-right: auto;   /* max-width: var(--measure) не даст строке растянуться */
}

/* Плашка «Доступ ограничен» не должна прилипать к карточкам */
.uz-cab .alert { margin-bottom: 16px; }

@media (max-width: 680px) {
    .uz-cab { padding: 0 14px 44px; }
}

/* «Что дальше» — без нумерации: это не пронумерованная инструкция, а перечень.
   Порядок шагов человек уже видит в блоке «Как это работает» ниже. */
.uz-review__list li::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--uz-text-dimmer);
}

/* Экран ожидания дышит: на нормальных высотах он был сплюснут.
   Низкие экраны не трогаем — там своя компрессия в @media (max-height: …). */
.uz-review__sub { margin-top: 8px; }
.uz-review__card { margin-top: 24px; }
.uz-review__card .card-body { padding: 24px; }
.uz-review__list { gap: 16px; margin-top: 16px; }
.uz-review__list li { line-height: 1.6; }
.uz-review__wait { margin-top: 20px; padding-top: 16px; }
.uz-review__out { margin-top: 24px; }

/* ===== Шапка страницы (плашка шага → заголовок → лид → карточка): воздух =====
   Было тесно: строки лида шли впритык к заголовку, а карточка — к тексту. */
.uz-page__eyebrow { margin-bottom: 2px; }
.uz-page__title { margin-top: 16px; line-height: 1.25; }
.uz-page__lead {
    margin-top: 12px;
    line-height: 1.65;
    text-wrap: pretty;      /* не оставляем «висячее» слово в последней строке */
}
/* Один шаг между блоками страницы (решение пользователя 2026-08-01): лид -> плашка брони
   и плашка -> карточка формы теперь одинаковые 24px, раньше было 24 и 32 — ступенька
   бросалась в глаза. Заголовок и лид намеренно ближе (12px): это пара «заголовок с
   подзаголовком», один блок, а не два соседних. Классы uz-page__note/__card живут
   ТОЛЬКО на register-contacts.html, другие экраны правка не задевает. */
.uz-page__card { margin-top: 24px; }

/* ============================================================
   12. ДИЗАЙН-ПАСС ПО ФЛОУ (шаги, лиды, ссылки, согласие)
   ============================================================ */

/* ===== «Как это работает»: без подложки =====
   Шаги лежат прямо на canvas-фоне: ни рамки, ни размытого слоя, ни линии сверху —
   блок не читается как отдельное «окно» и не спорит по весу с формой. */
.uz-how {
    position: relative;
    margin-top: 56px;              /* внешний зазор больше внутреннего (32px) — иначе заголовок
                                      липнет к форме выше и отрывается от собственных шагов */
    padding: 0;
    border: 0;
    background: none;
}

/* Заголовок секции был 23px против 26px у H1 страницы — два почти равных голоса.
   Шаги — это подпорка, а не второй герой: уводим на полтона вниз. */
.uz-how__title {
    margin-bottom: 32px;
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-snug);
    color: var(--uz-text-dim);
}

/* Мера строки: без неё описания рвались как попало («на 7 дней» уезжало в третью строку).
   Подложки под блоком больше нет — текст лежит на canvas-фоне, поэтому кегль крупнее,
   а цвет плотнее: подписи не должны спорить с рисунком стоек. */
.uz-how__list p {
    max-width: 28ch;               /* колонка узкая — мера считается по ней, не по 46ch */
    margin-inline: auto;
    margin-top: 8px;
    font-size: var(--fs-small);
    line-height: var(--lh-body);
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

.uz-how__list h3 {
    font-size: var(--fs-body);
    line-height: var(--lh-snug);
    letter-spacing: 0;
}

/* ===== Лид под заголовком: спокойная мера вместо рваных трёх строк ===== */
.uz-auth__sub {
    max-width: 54ch;          /* мера сайта (.phero__lead) */
    margin-inline: auto;
    text-wrap: pretty;
}

/* ===== Ссылки под формой =====
   Было: «Создать аккаунт» синей ссылкой в левом углу, «Забыли пароль?» серым текстом
   в правом — разный вес у равнозначных путей и дыра между ними. Ставим парой по центру,
   с широким зазором: две ссылки не должны слипаться в одно пятно. */
.uz-auth__links {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 26px;
    font-size: var(--fs-small);
}

.uz-auth__links a,
.uz-auth__links a.link {
    color: var(--uz-accent-ink);
    text-decoration: none;
    font-weight: 600;
}

.uz-auth__links a:hover,
.uz-auth__links a.link:hover {
    color: var(--uz-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Разделитель между равнозначными ссылками: точка стоит ровно посередине зазора */
.uz-auth__links > a + a::before {
    content: '·';
    margin-right: 24px;
    color: var(--uz-text-dimmer);
    font-weight: 400;
}

/* ===== Согласие на обработку данных: сноска, а не абзац ===== */
.uz-auth__consent {
    max-width: 42ch;
    margin-inline: auto;
    font-size: 11.5px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* В широкой карточке флоу (880px) мера 42ch рвёт сноску на три строки. Здесь она
   тянется во всю строку — читается одной фразой, а не столбиком. */
.uz-page__card .uz-auth__consent {
    max-width: none;
    text-wrap: balance;
}

/* ============================================================
   13. КАБИНЕТ: КАРТОЧКИ ДАННЫХ И ПЛАШКА СОСТОЯНИЯ
   ============================================================ */

/* Данные владельца читаются парами «подпись → значение», а не таблицей на шесть колонок:
   подписи выстроены в одну сетку, значение — то, за чем человек сюда пришёл, и оно крупнее. */
.uz-data {
    padding: 22px 26px 24px;
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    background: var(--uz-surface);
    box-shadow: var(--uz-card-shadow);
}

.uz-data + .uz-data { margin-top: 16px; }

/* Заголовок карточки — на шкале (--fs-body), а не отдельный 15px в стороне от неё.
   Так в кабинете появляется настоящая ступень: заголовок страницы -> раздел (--fs-h3,
   20px) -> карточка (16px) -> текст (14px). Ровно 1.25 между разделом и карточкой. */
.uz-data__title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--uz-line-soft);
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--uz-text);
}

.uz-data__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
    margin: 0;
}

.uz-data__item--wide { grid-column: 1 / -1; }

/* ⭐ Поле на ДВЕ колонки из трёх. Заведено под «Банк» (2026-09-04): у настоящих
   реквизитов там строка вроде «ТОШКЕНТ Ш., "АСАКАБАНК" АТБ ТОШКЕНТ ШАХАР ФИЛИАЛИ» —
   в треть карточки она не помещалась и обрывалась многоточием. Соседний «Код банка»
   при этом уезжает в третью колонку, под «ОКЭД», и остаётся на виду.
   ⚠️ На телефоне не действует: там сетка и так в одну колонку (медиазапрос ниже). */
.uz-data__item--2col { grid-column: span 2; }

.uz-data__item dt {
    font-family: var(--uz-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uz-text-dimmer);
}

.uz-data__item dd {
    margin: 6px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--uz-text);
    overflow-wrap: anywhere;
}

.uz-data__mono { font-family: var(--uz-mono); letter-spacing: .02em; }

.uz-data__empty { font-size: 14px; color: var(--uz-text-dim); }

/* ===== Плашка состояния аккаунта =====
   Это не ошибка и не запрет, а «вы вот здесь» + следующий шаг. Поэтому спокойный янтарный
   фон, заголовок-состояние и настоящая кнопка справа: действие не прячем в текстовую ссылку. */
.uz-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px 20px;
    border: 1px solid color-mix(in oklch, var(--uz-warning) 34%, transparent);
    border-radius: var(--uz-r-card);
    background: color-mix(in oklch, var(--uz-warning) 10%, var(--uz-surface));
}

.uz-callout__ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 16%, transparent);
}

.uz-callout__ico svg { width: 22px; height: 22px; }

.uz-callout__body { flex: 1; min-width: 0; }

.uz-callout__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--uz-text);
}

.uz-callout__text {
    margin-top: 4px;
    max-width: 68ch;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

/* Размер не задаём: кнопка идёт с btn-sm и должна выглядеть ровно как «Зарегистрировать
   новый домен» на «Моих доменах» — один вид у главных действий кабинета
   (решение пользователя 2026-07-16). Прежние min-height/padding/font-size перебивали btn-sm. */
.uz-callout__cta {
    flex-shrink: 0;
}

/* Кнопка плашки повторяет то же действие из списка доменов: янтарный текст и рамка
   на едва тёплой подложке (решение пользователя 2026-07-16). Сплошная заливка
   btn-warning спорила с самой плашкой — она уже янтарная. Красим здесь, а не
   Tailwind-утилитами на кнопке: те лежат в @layer и проиграли бы нашим .btn-правилам. */
.btn.uz-callout__cta {
    border: 1px solid color-mix(in oklch, var(--uz-warning) 55%, transparent);
    background: color-mix(in oklch, var(--uz-warning) 10%, transparent);
    color: var(--uz-warning);
}

.btn.uz-callout__cta:hover {
    border-color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 18%, transparent);
    color: var(--uz-warning);
}

/* «Я подписал договор» после нажатия: кнопка НЕ меняет форму и цвет — просто текст скрывается
   (его ширину держит невидимый span), а по центру плавно вырисовывается галочка. Цвет галочки =
   currentColor кнопки (амбер на профиле, белый на btn-primary). is-signed делает кнопку
   некликабельной БЕЗ :disabled — иначе daisyui посерил бы её. */
.uz-signbtn { position: relative; }
.uz-signbtn.is-signed { pointer-events: none; }
.uz-signbtn.is-signed .uz-signbtn__txt { visibility: hidden; }
.uz-signbtn__check {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 22px;
    height: 22px;
    opacity: 0;
}
.uz-signbtn.is-signed .uz-signbtn__check { opacity: 1; }
.uz-signbtn__check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.uz-signbtn.is-signed .uz-signbtn__check path {
    animation: uzCheckDraw .5s var(--uz-ease) .05s forwards;
}
@keyframes uzCheckDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .uz-signbtn.is-signed .uz-signbtn__check path { animation: none; stroke-dashoffset: 0; }
}

/* Обратный отсчёт брони внутри плашки-напоминания */
.uz-callout__timer {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

/* Разделитель перед строкой о брони: линия ярче всего по центру и растворяется к краям
   (решение пользователя 2026-08-01). Сплошная граница обрывалась резко и делила плашку
   пополам жёстче, чем нужно. Псевдоэлемент, а не border: границу нельзя залить градиентом.
   Выносы по 10px в стороны — линия чуть шире текста, но остаётся внутри полей плашки (20px). */
.uz-callout__timer::before {
    content: '';
    position: absolute;
    top: 0;
    /* -20px = ровно внутренние поля плашки: линия тянется от края до края.
       Дальше уже нельзя — вылезет за рамку; но это и не нужно: концы прозрачные,
       поэтому обрыва не видно, линия «растворяется» ровно у бортов. */
    left: -20px;
    right: -20px;
    height: 2px;
    border-radius: 2px;      /* концы не выглядят обрубленными при толщине 2px */
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in oklch, var(--uz-warning) 40%, transparent) 50%,
        transparent 100%);
}

.uz-callout__timer b { color: var(--uz-text); font-weight: 700; }

@media (max-width: 680px) {
    .uz-data { padding: 16px 16px 20px; }
    .uz-data__grid { grid-template-columns: 1fr; gap: 16px; }

    /* Плашка на телефоне: иконка ОБТЕКАЕТСЯ текстом справа сверху (решение пользователя
       2026-07-31). Раньше блок просто стекался в колонку, и кружок занимал отдельную
       строку — справа от него оставалась пустая полоса во всю ширину.
       Почему float, а не absolute: строки рядом с иконкой укорачиваются, а те, что ниже
       её, идут во всю ширину — при absolute пришлось бы вечно держать отступ справа
       у всего текста. display:flow-root вместо block — он удерживает float внутри плашки
       БЕЗ overflow:hidden, который порезал бы подсказку у кнопки. */
    /* Заголовок и часы — одной парой слева, текст ниже во всю ширину
       (решение пользователя 2026-08-01: «циферблат придвинуть к заголовку»).
       ⚠️ Иконка и заголовок лежат в РАЗНЫХ контейнерах (.uz-callout__ico — сосед
       .uz-callout__body), поэтому поставить их в один ряд обычным flex нельзя.
       display:contents у .uz-callout__body растворяет обёртку, и заголовок с текстом
       становятся прямыми ячейками сетки — тогда иконку можно положить во второй столбец
       той же строки, а всё остальное растянуть на всю ширину.
       Прежний вариант с float ставил кружок к ПРАВОМУ краю — это и не понравилось. */
    .uz-callout {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        /* ⚠️ Именно `gap`, а не только column-gap: у десктопного flex стоит gap:16px, и
           строковая часть наследовалась в сетку — между ВСЕМИ рядами висело лишних 16px.
           Отступы между абзацами задают сами абзацы своими margin. */
        gap: 0 10px;
        padding-top: 10px;
    }
    .uz-callout__body { display: contents; }

    .uz-callout__title { grid-column: 1; grid-row: 1; margin-top: 0; }
    .uz-callout__ico {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        width: 30px;
        height: 30px;
    }
    .uz-callout__ico svg { width: 16px; height: 16px; }

    /* Всё, что ниже заголовка, — во всю ширину плашки */
    .uz-callout__text,
    .uz-callout__timer { grid-column: 1 / -1; }

    /* Плотнее (решение пользователя 2026-08-01). Первый зазор был не только из margin
       абзаца: строку заголовка растягивал кружок (align-items:center центрирует заголовок
       в высоте иконки), поэтому уменьшаем и его. Второй — отбивка перед строкой брони. */
    .uz-callout__ico { width: 26px; height: 26px; }
    .uz-callout__ico svg { width: 15px; height: 15px; }
    .uz-callout__text { margin-top: 2px; }
    .uz-callout__timer { margin-top: 8px; padding-top: 8px; }
    .uz-callout__cta { grid-column: 1 / -1; display: flex; width: 100%; margin-top: 14px; }

    /* ⚠️ Часть кнопок приходит ЗАВЁРНУТОЙ: сначала .uz-tip--btn (подсказка), внутри иногда
       ещё <form>. Обёртки шириной по содержимому, и кнопка оставалась короче плашки
       (259 из 305px). grid-column на самой кнопке не работал — она не ячейка сетки, а
       вложена в обёртку. Поэтому ширину тянем по ВСЕЙ цепочке (решение пользователя
       2026-08-01: кнопки в плашке — во всю ширину, как «Управление»). */
    .uz-callout > .uz-tip--btn {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 14px;
    }
    .uz-callout > .uz-tip--btn > form { width: 100%; }
    .uz-callout .uz-signbtn { width: 100%; }
}

/* ============================================================
   14. КАБИНЕТ: ДОГОВОР И ЭКРАНЫ-СОСТОЯНИЯ
   ============================================================ */

/* Договор — текст для чтения, а не сетка данных: колонка уже, чем на «Кабинете» */
.uz-cab__narrow { max-width: 780px; margin-inline: auto; }

/* ===== Анкета в кабинете (вернули на доработку) =====
   Поля живут в той же сетке .uz-data__grid, что и читаемые значения, — кабинет не
   «прыгает» между режимами. Ширину держит сетка, поэтому полю нужен только 100%. */
.uz-data__grid .field {
    width: 100%;
    margin-top: 2px;
}

/* Панель с кнопкой: появляется после первой правки (hidden снимает скрипт) */
.uz-editbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 16px;
    /* без короба, но подпись отодвинута от левого края, а кнопка — от правого */
    padding: 0 16px;
}

.uz-editbar[hidden] { display: none; }

.uz-editbar__note {
    margin-right: auto;
    font-size: 15px;
    color: var(--uz-text-dim);
}

@media (max-width: 680px) {
    .uz-editbar .btn { width: 100%; }
}

.uz-contract__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--uz-line-soft);
}

/* Кнопка держится правого края сама: слева в шапке больше ничего нет,
   а space-between с единственным ребёнком прижал бы её влево */
.uz-contract__dl {
    margin-left: auto;
    min-height: 38px;
    padding: 0 14px;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--uz-accent-ink);
    border: 1px solid var(--uz-line);
}

.uz-contract__dl svg { width: 16px; height: 16px; }
.uz-contract__dl:hover { border-color: var(--uz-primary); background: rgba(28, 157, 216, .10); }

/* Статус-чипы: смысл несёт цвет, но приглушённый — это метка, а не кнопка */
.uz-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-family: var(--uz-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    border: 1px solid transparent;
}

.uz-chip--info {
    color: var(--uz-accent-ink);
    background: rgba(28, 157, 216, .12);
    border-color: rgba(28, 157, 216, .30);
}

.uz-chip--warn {
    color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 12%, transparent);
    border-color: color-mix(in oklch, var(--uz-warning) 30%, transparent);
}

.uz-chip--ok {
    color: var(--uz-success);
    background: color-mix(in oklch, var(--uz-success) 12%, transparent);
    border-color: color-mix(in oklch, var(--uz-success) 30%, transparent);
}

/* ===== Просмотр договора: Shadow DOM, нативный скролл =====
   Договор рендерится через Shadow DOM (uz-doc-pager.js): стили шаблона изолированы,
   скролл работает нативно через overflow:auto. На телефоне — только кнопка PDF. */

.uz-docbox .uz-docview {
    height: clamp(420px, 68vh, 760px);
    overflow: auto;
    border-radius: var(--uz-r-in);
    background: #fff;
    color-scheme: light;
    padding: 24px 28px;
    scroll-behavior: smooth;
    /* Тени по краям скролла: показывают, что текст продолжается выше и ниже.
       mask-image рисует градиентную маску — контент плавно затухает у краёв,
       не обрываясь жёсткой границей. Скролл всё ещё виден, тени не блокируют клик. */
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.uz-docbox .uz-docview:focus-visible {
    outline: 2px solid var(--uz-primary);
    outline-offset: 2px;
}

#docHost { min-height: 100%; }

/* Мобильная карточка «открыть договор» — на ПК её нет. */
.uz-docmob { display: none; }

.uz-doc--err { color: var(--uz-text-dim); }

/* Подвал договора: пояснение слева, действие справа */
.uz-contract__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--uz-line-soft);
}

.uz-contract__hint {
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

/* Заголовок статуса — отдельной строкой, как в плашке кабинета (решение пользователя
   2026-07-24). Инлайном он сливался с текстом в один абзац, и стадия не читалась. */
.uz-contract__hint b { display: block; color: var(--uz-text); font-weight: 700; }

/* Подпись действия не переносим: «Запросить электронный / договор» в две строки читается как ошибка */
.uz-contract__foot .btn {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding: 0 22px;
}

/* ОПЛАТА ПО ССЫЛКЕ В UZUM BANK (решение пользователя 2026-08-03; заменила QR-код
   и пошаговый поиск компании в приложении).
   Кнопка — главное действие страницы, поэтому крупная и с иконкой внешней ссылки:
   она уводит в стороннее приложение, и об этом честно предупреждаем значком. */
.uz-paybtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    min-height: var(--uz-tap);
}

.uz-paybtn__ico {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: .85;
}

/* Поля, которые клиент вбивает в приложении: слева подпись, справа готовое значение
   с кнопкой «скопировать». Строки разделены линиями — так блок читается как выписка,
   а не как ещё один абзац текста. */
.uz-payfields {
    margin: 0;
    max-width: var(--measure);
}

.uz-payfield {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--uz-line-soft);
}
.uz-payfield:last-child { border-bottom: 0; }

.uz-payfield dt {
    font-size: 13px;
    color: var(--uz-text-dim);
}

.uz-payfield dd {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--uz-text);
    /* Длинное ФИО переносим по словам, а не рвём посередине */
    overflow-wrap: break-word;
}

/* Номера договора ещё нет — значение справочное, не выделяем его как данные */
.uz-payfield__dim { font-weight: 500; color: var(--uz-text-dim); }

/* Юрлицу вместо ссылки — одно пояснение (решение пользователя 2026-07-24): платит бухгалтерия
   со счёта организации, реквизиты и сумма лежат в договоре. Кегль тот же, что у текста физлица,
   чтобы карточка оплаты читалась одинаково в обоих сценариях. */
/* Разделитель — НА ОБЁРТКЕ, не на самом абзаце (решение пользователя 2026-08-08): текст
   ограничен по ширине строки (--measure, 66ch) ради читаемости, а карточка шире этого
   измерения — граница на самом <p> получилась бы короче ширины карточки.
   Линза, а не ровная черта (решение пользователя 2026-08-08) — та же форма, что уже
   стоит в .uz-payaction::before над кнопкой оплаты физлица: полные 2px в середине,
   к торцам сходит на нет через border-radius:50% и градиент-затухание, чтобы кончики
   не обрывались резко. Тут — обычный блок (не флекс), поэтому просто ::before на всю
   ширину обёртки, без align-self. */
.uz-paytext-wrap {
    margin-top: 16px;
}

.uz-paytext-wrap::before {
    content: '';
    display: block;
    height: 2px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: linear-gradient(to right,
                transparent 0%,
                color-mix(in oklch, var(--uz-text-dim) 42%, transparent) 20%,
                color-mix(in oklch, var(--uz-text-dim) 42%, transparent) 80%,
                transparent 100%);
}

.uz-paytext {
    margin: 0 auto;
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1.85;
    color: var(--uz-text);
    max-width: var(--measure);
    text-align: center;
}

/* Крупная центрированная фраза над кнопкой (.uz-paytext--center) УБРАНА 2026-08-07:
   она дословно повторяла надпись на кнопке под собой и тянула на себя вес заголовка
   страницы. Пояснение теперь мелкой строкой ПОД кнопкой — см. .uz-payhint ниже. */

/* Итого по счёту: подпись слева, сумма справа, за линией — так читаются чеки.
   Показывается только при двух и более доменах (шаблон), иначе повторяло бы строку выше. */
.uz-paytotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--uz-line);
    font-size: 14px;
    color: var(--uz-text-dim);
}

.uz-paytotal b {
    font-size: 17px;
    font-weight: 700;
    color: var(--uz-text);
}

/* Действие в карточке счёта: кнопка по центру, под ней — мелкая подпись.
   Отделено линией от списка доменов: выше «за что и сколько», ниже «что делать». */
.uz-payaction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

/* Разделитель — не ровный бордер во всю ширину, а линза: в середине полные 4px,
   к торцам сходит на нет (решение пользователя 2026-08-07). Так линия читается
   как акцент под суммой, а не как ещё одна граница карточки.
   Форму даёт border-radius: 50% — на полосе 700×4 это сильно сплюснутый эллипс,
   он и сужается к краям. Градиент добавляет мягкое затухание, чтобы острые кончики
   эллипса не обрывались резко.
   ::before — обычный flex-элемент колонки, поэтому просто занимает первую строку. */
/* Разделитель-линза над кнопкой оплаты: в середине полные 2px, к торцам сходит на нет.
   Форму даёт border-radius: 50% — на широкой полосе это сплюснутый эллипс; градиент гасит
   кончики, чтобы они не обрывались резко. */
.uz-payaction::before {
    content: '';
    align-self: stretch;
    height: 2px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: linear-gradient(to right,
                transparent 0%,
                color-mix(in oklch, var(--uz-text-dim) 42%, transparent) 20%,
                color-mix(in oklch, var(--uz-text-dim) 42%, transparent) 80%,
                transparent 100%);
}

/* Кнопка — главное действие экрана: во всю ширину блока, но не шире 360px,
   высота не ниже тап-таргета. Отступ сверху снимаем: его держит .uz-payaction. */
.uz-payaction .uz-paybtn {
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin-top: 0;
    padding: 10px 16px;
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
}

/* Подпись под кнопкой оплаты: справка, а не заголовок — мелко, приглушённо, по центру.
   Крупная фраза НАД кнопкой (.uz-paytext--center) отсюда убрана 2026-08-07: она повторяла
   надпись на самой кнопке. */
.uz-payhint {
    margin: 0;
    max-width: 420px;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--uz-text-dim);
}

/* «Связаться» — альтернатива оплате через Uzum Bank, ведёт в Telegram менеджера.
   Нейтральная пилюля, а не btn-primary: это запасной путь, а не действие экрана —
   акцент должен остаться у кнопки оплаты выше. min-height — сразу на всех виджетах
   (не только на мобиле): ссылка ведёт во внешнее приложение, тап должен быть точным. */
.uz-payalt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--uz-tap);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--uz-text-dim);
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    transition: color .18s, background-color .18s, border-color .18s;
}

.uz-payalt:hover {
    color: var(--uz-text);
    background: var(--uz-line-soft);
    border-color: var(--uz-line-strong);
}


/* Кнопка копирования (иконка «два листочка»). Нейтральная — акцент только у действий;
   на успехе на секунду превращается в галочку и зеленеет. */
.uz-copybtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--uz-line-strong);
    border-radius: var(--uz-r-ctl);
    background: var(--uz-surface);
    color: var(--uz-text-dim);
    cursor: pointer;
    flex: 0 0 auto;
    transition: color .15s var(--uz-ease), border-color .15s var(--uz-ease), background .15s var(--uz-ease), transform .06s var(--uz-ease);
}
.uz-copybtn:hover { color: var(--uz-text); border-color: var(--uz-primary); }
.uz-copybtn:active { transform: translateY(1px); }
.uz-copybtn__done { display: none; }
.uz-copybtn.is-done { color: var(--uz-success); border-color: var(--uz-success); }
.uz-copybtn.is-done .uz-copybtn__copy { display: none; }
.uz-copybtn.is-done .uz-copybtn__done { display: block; }

/* Кнопка «Я оплатил» переехала в конец инструкции (решение пользователя 2026-07-20) —
   отделяем её от шагов и стопкой укладываем баннер/кнопку/сообщение. */
.uz-payact {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
/* Кнопку «Я оплатил» — вправо (решение пользователя 2026-07-20); баннер «оплата не
   подтверждена» остаётся слева. Селектор по .uz-tip ловит и активную форму, и статичную
   кнопку-галочку (стадия «на проверке») — обе обёрнуты в .uz-tip. */
.uz-payact > .uz-tip { align-self: flex-end; margin-right: 40px; }

/* Договор запрошен: действий у клиента нет, и кнопка-справка остаётся в футере ОДНА.
   Тогда она не «вторая рядом с главной», а единственное, что тут можно нажать, —
   поэтому крупнее (решение пользователя 2026-07-17).
   ⚠️ Место — справа, как было, когда рядом стояла строка-статус: единственный ребёнок
   при space-between уехал бы влево, поэтому задаём flex-end явно. */
.uz-contract__foot--solo {
    justify-content: flex-end;
}

.uz-contract__foot--solo .btn {
    font-size: var(--fs-body);
    min-height: 48px;
    padding: 0 28px;
    gap: 10px;
}

.uz-contract__foot--solo .btn svg {
    width: 20px;
    height: 20px;
}

/* ===== Экран-состояние (ждём договор / договор подписан) ===== */
.uz-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 42px 28px 44px;
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-card);
    background: var(--uz-surface);
    box-shadow: var(--uz-card-shadow);
}

.uz-state__ico {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    color: var(--uz-warning);
    background: color-mix(in oklch, var(--uz-warning) 12%, transparent);
}

.uz-state__ico svg { width: 28px; height: 28px; }

.uz-state--ok .uz-state__ico {
    color: var(--uz-success);
    background: color-mix(in oklch, var(--uz-success) 12%, transparent);
}

.uz-state__title { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--uz-text); }

.uz-state__text {
    margin-top: 8px;
    max-width: 52ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--uz-text-dim);
    text-wrap: pretty;
}

@media (max-width: 680px) {
    .uz-contract__head { flex-direction: column; align-items: flex-start; }

    /* Телефон: текста договора нет вовсе, вместо него одна карточка-документ (решение
       пользователя 2026-08-05). Шесть страниц с телефона всё равно не читают, а простыня
       отодвигала кнопки подписания на километр вниз. */
    .uz-docbox { display: none; }

    .uz-docmob {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid var(--uz-line);
        border-radius: var(--uz-r-in);
        background: var(--uz-field-bg);
        color: inherit;
        text-decoration: none;
        min-height: var(--uz-tap);
    }

    .uz-docmob:active { background: var(--uz-surface); }

    .uz-docmob__ico {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: var(--uz-r-ctl);
        background: color-mix(in oklch, var(--uz-primary) 10%, transparent);
        color: var(--uz-primary);
    }

    .uz-docmob__ico svg { width: 26px; height: 26px; }
    .uz-docmob__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .uz-docmob__txt b { font-size: 15px; font-weight: 600; color: var(--uz-text); }
    .uz-docmob__txt i { font-style: normal; font-size: 13px; color: var(--uz-text-dimmer); }
    /* В столбик кнопки стоят одна под другой, и десктопные отступы читаются как провалы:
       сверху 20+18px от текста договора и 20px между кнопками. Ужимаем (решение
       пользователя 2026-08-01) — на десктопе они разнесены по горизонтали, там 20px уместны. */
    .uz-contract__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 12px;
        padding-top: 12px;
    }
    .uz-contract__foot .btn { width: 100%; }
}

/* ============================================================
   АДАПТИВ КЛИЕНТСКИХ СТРАНИЦ (проход 2026-07)
   ============================================================ */

/* ⚠️ БАГ, который чинит это правило: общее `.subnav { display:none }` на ≤680px пряталo
   ВСЮ подшапку, включая кабинетную (`subnav--cab`). А в бургер-меню лежат только разделы
   САЙТА (услуги) — пунктов кабинета там нет. Итог: с телефона клиент терял единственный
   вход в «Мои домены», «Договор» и «Оплату». Возвращаем пилюлю кабинета: она узкая
   (2-3 пункта), при нехватке ширины едет горизонтально. Специфичность (.subnav--cab)
   выше общего .subnav, поэтому порядок правил роли не играет. */
@media (max-width: 680px) {
    .subnav--cab { display: flex; padding: 8px 12px 0; }
    .subnav--cab .subnav__pill {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .subnav--cab .subnav__pill::-webkit-scrollbar { display: none; }
    .subnav--cab .subnav__pill a { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
}

/* Планшет: три колонки «подпись → значение» на 700-980px слишком тесные —
   значения переносились по слогам. Даём две; на телефоне ниже уже одна. */
@media (min-width: 681px) and (max-width: 980px) {
    .uz-data__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* `.field` (поля формы правки анкеты в кабинете) базовых стилей НЕ имел: они лежат в
   styles.css, а он подключён только на лендинге — в кабинете грузится лишь main.css.
   Поле рендерилось нативным: мелкий шрифт (iOS зумит страницу при фокусе) и низкий
   тап-таргет. Приводим к тем же правилам, что .input/.select — 16px и 44px. */
.field {
    width: 100%;
    min-height: var(--uz-tap);
    padding: 10px 14px;
    font-family: var(--uz-sans);
    font-size: var(--fs-body);
    color: var(--uz-text);
    background: var(--uz-field-bg);
    border: 1px solid var(--uz-line);
    border-radius: 10px;
    transition: border-color .2s var(--uz-ease), background-color .2s var(--uz-ease);
}
select.field { cursor: pointer; }
.field:focus {
    outline: none;
    border-color: var(--uz-primary);
    box-shadow: 0 0 0 3px rgba(28, 157, 216, .2);
}

/* Таблица DNS-записей на мобиле: 6 колонок в 360px не помещаются, оставался только
   горизонтальный скролл. Разворачиваем строки в карточки — тем же приёмом, что список
   доменов (.uz-dcard): шапка прячется, подпись берётся из data-label над значением. */
@media (max-width: 680px) {
    .dns-table thead { display: none; }
    .dns-table,
    .dns-table tbody,
    .dns-table tr,
    .dns-table td { display: block; width: 100%; }

    .dns-table tr {
        margin-bottom: 10px;
        padding: 10px 12px;
        border: 1px solid var(--uz-line);
        border-radius: var(--uz-r-card);
        background: var(--uz-surface);
    }

    .dns-table td {
        padding: 5px 0;
        border: 0;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* ⚠️ Подписи над КАЖДОЙ ячейкой (ТИП/ИМЯ/ЗНАЧЕНИЕ/TTL/СТАТУС/ДЕЙСТВИЯ) раздували запись
       до ~330px: шесть строк-заголовков на три полезных значения, и смысл записи тонул.
       Оставляем подпись только у TTL — и ту в строку. Остальное читается само:
       тип — бейджем, имя и значение — моноширинным, статус и действия — иконками. */
    .dns-table td::before { content: none; }

    /* Запись = три ряда: «тип · имя · статус · действия», под ними значение, под ним TTL.
       Колонки задаём по nth-child: у ячеек нет своих классов, а data-label локализован
       (селектор по его значению сломался бы в en/uz). Порядок колонок в шаблоне
       фиксирован: 1 тип · 2 имя · 3 значение · 4 TTL · 5 статус · 6 действия. */
    .dns-table tr {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            "type name status actions"
            "value value value value"
            "ttl ttl ttl ttl";
        align-items: center;
        gap: 6px 8px;
        padding: 12px 14px;
    }

    .dns-table td:nth-child(1) { grid-area: type; }
    .dns-table td:nth-child(2) { grid-area: name; font-weight: 600; }
    .dns-table td:nth-child(3) { grid-area: value; }
    .dns-table td:nth-child(4) { grid-area: ttl; }
    .dns-table td:nth-child(5) { grid-area: status; }
    .dns-table td:nth-child(6) { grid-area: actions; }

    /* Значение — единственное, что бывает длинным: отделяем линией, чтобы не слипалось
       с именем, и разрешаем перенос в любом месте (ключи DKIM/TXT не имеют пробелов). */
    .dns-table td:nth-child(3) {
        padding-top: 8px;
        border-top: 1px solid var(--uz-line-soft);
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    /* TTL без подписи-заголовка выглядел бы «голым числом» — возвращаем метку в строку */
    .dns-table td:nth-child(4) {
        text-align: left;
        font-size: 11.5px;
        color: var(--uz-text-dimmer);
    }
    .dns-table td:nth-child(4)::before {
        content: attr(data-label) ' ';
        font-family: var(--uz-mono);
        letter-spacing: .04em;
    }

    /* Статус и действия — в правом верхнем углу карточки, как у строки таблицы */
    .dns-table td:nth-child(5),
    .dns-table td:nth-child(6) { text-align: right; justify-self: end; }

    /* «СИСТЕМНАЯ» вместо кнопок: на всю ширину строки это выглядело как заголовок раздела */
    .dns-table td.dns-actions-cell > div { white-space: nowrap; }

    /* Вертикальные разделители колонок таблицы в карточке превращались в обрывок линии
       у правого края — в сетке колонок больше нет, делить нечего.
       ⚠️ Гасим ТЕМ ЖЕ селектором с :not(:last-child): у исходного правила специфичность
       (0,2,1), и вариант через :where() ему проигрывал — граница оставалась на месте. */
    .uz-table--divided.dns-table td:not(:last-child),
    .uz-table--divided.dns-table th:not(:last-child) { border-right: 0; }
    /* Полосу теперь рисует ::after (см. .uz-table--divided выше) — гасим и его,
       иначе обрывок линии вернулся бы на прежнее место. */
    .uz-table--divided.dns-table td:not(:last-child)::after,
    .uz-table--divided.dns-table th:not(:last-child)::after { display: none; }
}

/* ===== Карточка домена на телефоне (2026-07-31) =====
   Три блока страницы верстались под десктоп и на 390px читались как каша. */
@media (max-width: 680px) {
    /* Мета-строка «Оплачено · 1 год · 31.07.2026 · CCTLD: …»: точки-разделители при переносе
       оставались висеть в конце строки, а последний пункт уезжал вниз без них. На узком
       экране разделяем пробелами, а не пунктуацией. */
    .dns-meta { gap: 2px 12px; }
    .dns-meta__sep { display: none; }

    /* Ряд действий (Назад · Субдомены · Сброс · Контакты) шёл вперемешку текстовыми ссылками
       и читался как случайный набор слов. Делаем сеткой из двух настоящих кнопок в ряд:
       одинаковый размер, рамка, тап-таргет 40px. `display: contents` у формы «Сброса» —
       чтобы её кнопка встала в сетку сама, а не одним широким блоком. */
    .dns-actbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }
    .dns-actbar > form { display: contents; }
    .dns-actbar > a,
    .dns-actbar > form > button,
    .dns-actbar > button {
        justify-content: center;
        min-height: 40px;
        border: 1px solid var(--uz-line);
        border-radius: var(--uz-r-ctl);
    }
    /* «Сброс» — единственное необратимое действие в ряду, уводим его в конец сетки:
       рядом с «Назад» опасная кнопка стоять не должна. Порядок задаём кнопке, а не форме:
       у формы display:contents, и её собственный order сетка не читает. */
    .dns-actbar > form > button { order: 9; }

    /* Панель «есть несинхронизированные изменения»: текст сверху, кнопки во всю ширину.
       Это парное действие (отменить/применить) — на телефоне обе кнопки должны быть
       одинаково доступны, а не жаться в правый край. */
    /* Кнопки в столбик, а не парой: «Применить изменения» в половину ширины 390px
       ломалось на две строки и вставало выше соседней кнопки. */
    .dns-applybar > div:last-child {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }
    .dns-applybar > div:last-child > form { display: contents; }
    .dns-applybar > div:last-child button { width: 100%; justify-content: center; min-height: 40px; }
}

/* ===== Страница «Оплата» на телефоне (2026-07-31) =====
   Мобильных правил у страницы не было — в узкой колонке десктопная раскладка комкалась,
   а «Я оплатил» с десктопным `flex-end + margin-right 40px` повисала ближе к центру
   и читалась как съехавшая. */
@media (max-width: 680px) {
    /* «Я оплатил» — во всю ширину, как «Управление» в списке доменов: главная кнопка
       экрана = крупный тап-таргет, а не маленькая капсула в случайном месте. */
    .uz-payact > .uz-tip { align-self: stretch; margin-right: 0; }
    .uz-payact .uz-signbtn { width: 100%; min-height: var(--uz-tap); }

    /* Кегль на телефоне мельче (решение пользователя 2026-08-01): 16px в узкой колонке
       давали по 4-5 слов в строке, текст расползался на пол-экрана. */
    .uz-paytext { font-size: 13px; }
    .uz-payfield dd { font-size: 14px; }

    /* «Оплатить через Uzum Bank» — во всю ширину: это главное действие страницы,
       и на телефоне оно должно быть таким же крупным, как «Я оплатил». */
    .uz-paybtn { display: flex; width: 100%; justify-content: center; }

    /* Примечание «После оплаты дождитесь…» тоже отбито линией — это смена темы:
       инструкция закончилась, дальше «что будет потом» и кнопка. Селектор по
       data-signed-hide: внутри карточки он только у этого абзаца. */
    .uz-paycard > [data-signed-hide] {
        margin-top: 20px;
        padding-top: 14px;
        border-top: 1px solid var(--uz-line-soft);
    }
}

/* ===== «Как это работает» на мобиле: подсказка вместо схемы (2026-07-26) =====
   Четыре шага в столбик занимали пол-экрана и отжимали форму вниз, а описания
   разъезжались вправо от заголовков: у `.uz-how__list p` стоит `max-width: 28ch;
   margin-inline: auto` — на десктопе это центрирует подпись в узкой колонке,
   а в столбике уводит её от номера. На <=680px схему со страницы убираем целиком
   и показываем по кнопке — на весь экран, шаги строго по левому краю. */
/* Без подложки и рамки (решение пользователя): это подсказка, а не действие —
   капсула тянула на себя внимание рядом с главной кнопкой формы. Тап-таргет
   держим высотой, а не рамкой. */
.uz-howbtn {
    display: none;                      /* на десктопе схема на виду, подсказка не нужна */
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-inline: auto;
    min-height: var(--uz-tap);
    padding: 10px 8px;
    border: 0;
    background: none;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    color: var(--uz-text-dim);
    transition: color .2s var(--uz-ease);
}

.uz-howbtn:active { transform: translateY(1px); }
.uz-howbtn svg { color: var(--uz-primary); }

/* Модалка-подсказка: каркас daisyUI (modal + modal-box) и класс .uz-help — тот же,
   что у справок «физлицо или юрлицо». Карточка по центру экрана, а не страница
   во весь экран (решение пользователя). Габариты чуть уже 780px .uz-help:
   четыре коротких шага в широкой карточке смотрелись пустовато. */
.uz-howmodal {
    max-width: 520px;
}

/* Шаги в модалке — всегда столбиком и по левому краю */
.uz-howmodal .uz-how__list {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 18px;               /* отступ от заголовка, как у .uz-help__body */
}

.uz-howmodal .uz-how__list li {
    padding: 0 0 0 52px;
    text-align: left;
}

.uz-howmodal .uz-how__n {
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    margin: 0;
}

/* Тот самый фикс: заголовок и описание начинаются от одной левой границы */
.uz-howmodal .uz-how__list h3,
.uz-howmodal .uz-how__list p {
    max-width: none;
    margin-inline: 0;
}

.uz-howmodal .uz-how__dots {
    top: 44px;
    left: 19px;
    right: auto;
    bottom: -20px;
    flex-direction: column;
    gap: 7px;
    transform: none;
}

@media (max-width: 680px) {
    .uz-how { display: none; }
    .uz-howbtn { display: flex; }

    /* Зазор в колонке рассчитан на БОЛЬШУЮ схему шагов (clamp(32px, 5vh, 56px) — на телефоне
       около 42px). Схемы тут нет, вместо неё одна строка-кнопка, и такой отступ отрывал её
       от формы. Подтягиваем ближе (решение пользователя 2026-08-01). */
    /* ⚠️ Второй селектор обязателен: у страниц «на один экран» (.uz-onescreen — «Данные на
       проверке» и пр.) свой зазор clamp(14px, 3vh, 34px) со специфичностью (0,2,0),
       и правило по одному классу ему проигрывало — кнопка там оставалась внизу. */
    .uz-auth__stack,
    .uz-onescreen .uz-auth__stack { gap: 18px; }

    /* То же самое на страницах флоу (.uz-page — «Данные владельца» и т.п.): под карточкой
       24px были рассчитаны на схему шагов, а на телефоне под ней одна кнопка-подсказка,
       у которой есть свои 10px паддинга и тап-таргет 44px. Итого кнопка висела заметно
       ниже формы (решение пользователя 2026-08-01). */
    .uz-page__card { margin-bottom: 10px; }

    /* Кнопки шага анкеты — в столбик во всю ширину (решение пользователя 2026-08-01):
       парой они делили ширину пополам, и «Отправить на проверку» ломалось на две строки.
       Порядок берётся из разметки: сверху «Назад», под ней «Отправить».
       flex:none обязателен — в колонке flex-1 растянул бы кнопки ПО ВЫСОТЕ. */
    .uz-formnav { flex-direction: column; }
    .uz-formnav > .btn { flex: none; width: 100%; }

    /* Согласие мельче, чтобы ссылка вставала ОДНОЙ строкой (решение пользователя 2026-08-01).
       Замер на 390px: под текст остаётся 273px, ссылке «согласие на обработку персональных
       данных» нужно 295px при 13px и 251px при 11px — отсюда 11.5px, влезает с запасом.
       ⚠️ Вся фраза целиком в одну строку не помещается физически: ей нужно 474px при 13px
       и даже при 9px — 332px. Одной строкой она возможна только с более коротким текстом. */
    .uz-consent { font-size: 11.5px; gap: 8px; }

    /* если схему когда-нибудь вернут на страницу — подписи не должны уезжать вправо */
    .uz-how__list p { max-width: none; margin-inline: 0; }
}

/* ===== Подсказки: остаются у своей кнопки, но не вылезают за экран (2026-07-26) =====
   Подсказка — это комментарий К КНОПКЕ, поэтому она висит над ней, а не прилипает к краю
   экрана (вариант «плашка внизу» был и отвергнут пользователем). Чтобы она при этом не
   уезжала за край, `uz-tip.js` перед показом считает нужный сдвиг и кладёт его в
   --uz-tip-shift на самом элементе; все трансформы ниже читают эту переменную.
   В CSS такое не вычислить: положение кнопки на экране движку недоступно.
   Ширина ограничена шириной экрана минус поля — иначе на узком телефоне сдвигать было бы
   нечего. Селекторы дублируем вместе с частными (.uz-dcard__actions), иначе те специфичнее. */
.uz-hint::after,
.uz-tip::after,
.uz-dcard__actions .uz-tip::after {
    left: 50%;
    right: auto;
    max-width: min(300px, calc(100vw - 24px));
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(4px);
}

/* ⚠️ У .uz-tip здесь остался ТОЛЬКО :hover — фокусные селекторы убраны 2026-09-02 вместе
   с показом по фокусу (см. правило показа в начале блока подсказок). Само по себе это
   правило задаёт лишь трансформ, зажечь подсказку оно не могло, но перечисление условий
   обязано совпадать с настоящими — иначе следующий читатель решит, что фокус ещё в игре.
   ⚠️ У .uz-hint (клиентские «?») фокус НАМЕРЕННО оставлен: это кнопка, её открывают
   с клавиатуры и тапом, наведения там может не быть вовсе. */
.uz-hint:hover::after,
.uz-hint:focus::after,
.uz-tip:hover::after,
.uz-dcard__actions .uz-tip:hover::after {
    transform: translateX(calc(-50% + var(--uz-tip-shift, 0px))) translateY(0);
}

/* ============================================================
   ПЛОСКИЙ ВИД: ТЕНЬ ТОЛЬКО У ШАПКИ (решение пользователя 2026-08-01)
   ============================================================
   Тени сняты со всего, кроме .topbar и подхедера-«пилюли» (ей объём вернули
   2026-08-07): карточки, панели, выпадающие меню,
   подсказки, модалки и заливки кнопок теперь держатся на рамке и подложке.
   Блок стоит В КОНЦЕ файла намеренно — он перекрывает 19 правил выше одним местом,
   вместо правки каждого; и видно, что именно осталось с тенью.
   ⚠️ НЕ трогаем: кольца фокуса (box-shadow 0 0 0 3px — это индикатор фокуса, а не тень),
   обводку `inset 0 0 0 1.5px currentColor` у мелких кнопок и пульсирующие точки
   (у них тень — сама анимация). */
.card,
.uz-cab .card,
.uz-auth__card,
.uz-dcard,
.uz-dempty,
.uz-data,
.uz-state,
.uz-steps li,
.uz-faq,
/* .subnav__pill убран из списка 2026-08-07: подхедеру вернули объём (см. правило
   .subnav__pill выше). Пока он стоял здесь, тень оттуда не работала — этот блок
   идёт позже и перекрывал её. */
.modal-box,
.sidebar,
.lang__menu,
.mobmenu,
.cabnav__menu,
.uz-acc__menu,
.dropdown-content,
.phones.open .phones__list,
.uz-hint::after,
.uz-tip::after,
.uz-dcard__actions .uz-tip::after,
/* Tailwind-классы теней из разметки: shadow-sm встречается 116 раз, плюс md/lg/xl */
[class*="shadow-"],
/* Заливка главной кнопки давала цветное свечение — тоже тень */
.btn, .btn:hover, .btn:active,
.btn-primary, .btn-primary:hover, .btn-primary:active {
    box-shadow: none;
}

/* ============================================================
   БЕЗ ЛИШНЕГО ЭКРАНА ПУСТОТЫ (решение пользователя 2026-08-01)
   ============================================================
   Контентная область (.uz-auth / .uz-flow) держала min-height = «экран минус шапка».
   Футер прибавлялся к этому СВЕРХУ, поэтому короткая страница всегда была выше экрана:
   появлялась прокрутка, полоса пустоты и футер уезжал за сгиб.
   Высота тут не нужна вовсе: body — flex с min-height 100svh, а main — flex:1, он и так
   занимает всё свободное место МЕЖДУ шапкой и футером. Центрирование карточки при этом
   сохраняется (align-items/justify-content остаются), но считается уже от реального
   остатка экрана, а не от вымышленного. Футер остаётся прижатым к низу экрана. */
.uz-auth,
.uz-flow,
.uz-onescreen.uz-auth { min-height: 0; }

/* ============================================================
   НЕТ БОКОВОЙ ПРОКРУТКИ НИ НА ОДНОМ ЭКРАНЕ (2026-08-01)
   ============================================================
   ⚠️ Причина, которую долго не было видно: пузырь подсказки (.uz-tip::after) —
   абсолютно позиционированный элемент, и он раздувает scrollWidth предков ДАЖЕ когда
   скрыт (visibility:hidden места не освобождает). На 360px обёртка «Новый домен» давала
   scrollWidth 214 при ширине 127, страница уезжала вбок на 72px.
   overflow-x: clip, а НЕ hidden: hidden сделал бы элемент контейнером прокрутки и сломал
   position:sticky у шапки. clip просто обрезает и на липкость не влияет.
   Подсказки при этом не страдают: uz-tip.js перед показом сдвигает пузырь внутрь экрана. */
html,
body {
    overflow-x: clip;
}

/* Правило заливки для btn-outline в шапке списка удалено: «Новый домен» вернули к
   сплошной синей кнопке (решение пользователя 2026-08-01), полых кнопок там больше нет. */

/* ============================================================
   ПОДХЕДЕР КАБИНЕТА: РАЗНАЯ РОЛЬ НА ДЕСКТОПЕ И ТЕЛЕФОНЕ (2026-08-03)
   ============================================================
   Решение пользователя: на десктопе подхедер есть ВСЕГДА и держит три раздела —
   Кабинет · Мои домены · Договор. На телефоне клиентского подхедера НЕТ ВОВСЕ
   (решение пользователя 2026-08-14 — отменяет прежнее скрытие только у «прошедшего
   всё» клиента): те же разделы лежат в бургер-меню, и пилюля дублировала их.
   ⚠️ Гасим subnav--client, а НЕ subnav--cab: последний носят и пилюли менеджера с
   супер-админом, а у них бургер-меню своих разделов не содержит — останутся без навигации. */
@media (max-width: 680px) {
    .subnav--client { display: none; }
}

/* Обратная сторона того же решения: на десктопе «Договор» живёт в подхедере,
   поэтому дубль из меню аккаунта убираем. На телефоне он остаётся единственным
   входом в договор — там подхедера в этом состоянии нет. */
@media (min-width: 681px) {
    .uz-acc__item--contract { display: none; }
}

/* ============================================================
   СВОРАЧИВАЕМЫЕ КАРТОЧКИ ДАННЫХ (2026-08-03)
   ============================================================
   «Данные владельца» и «Документы» в кабинете свёрнуты: клиент их заполнил один раз и
   смотрит редко, а занимали они два экрана (решение пользователя). Размеры и оформление
   карточки не меняются — .uz-data остаётся, к нему добавлен только раскрывающий заголовок.
   Нативный <details>: без своего JS, работает с клавиатуры и со скринридером.
   ⚠️ У менеджера те же фрагменты раскрыты (параметр open=true при вызове): он этими
   данными проверяет анкету, и лишние клики ему ни к чему.
   ⚠️ Одно исключение с 2026-09-01: в окне проверки анкеты карточка «Данные учётной записи»
   свёрнута (решение пользователя) — почта и дата регистрации при проверке нужны редко.
   Там .uz-data--fold стоит прямо в разметке окна, без параметра open. */
.uz-data--fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;                 /* убираем штатный треугольник... */
}
.uz-data--fold > summary::-webkit-details-marker { display: none; }   /* ...и его вебкитную версию */

/* Свой треугольник справа: поворачивается, когда карточка раскрыта */
.uz-data__chev {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--uz-text-dimmer);
    transition: transform .18s var(--uz-ease, ease);
}
.uz-data--fold[open] .uz-data__chev { transform: rotate(180deg); }

/* В свёрнутом виде заголовок — единственное содержимое карточки: ни отступа, ни линии
   под ним не нужно, иначе черта висела бы у самого низа пустой карточки. */
.uz-data--fold:not([open]) > summary {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ⭐ 2026-09-03: СВЁРНУТАЯ карточка раскрывается кликом в ЛЮБОЕ место плитки, а не только
   по строке заголовка (просьба владельца).
   Что мешало: паддинг (22px сверху, 26px по бокам, 24px снизу) принадлежит самому <details>,
   а кликабелен только <summary> внутри него. Замер до правки: плитка 730x69, summary 678x23 —
   мимо цели уходило больше половины площади, и клик у края просто ничего не делал.
   ⚠️ Растягиваем ПСЕВДОЭЛЕМЕНТОМ на весь <details> (inset: 0), а не отрицательными margin
   у самого summary: margin пришлось бы задавать теми же числами, что паддинг карточки, и они
   разъехались бы при первой же правке .uz-data — в том числе в мобильных медиазапросах
   кабинета клиента, где у карточек свои отступы. Псевдоэлемент чисел не знает вовсе.
   ⚠️ Клик по ::before засчитывается его хозяину, то есть summary, — <details> открывается
   штатно, без своего JS, и клавиатура со скринридером работают как раньше.
   ⚠️ Только :not([open]). У РАСКРЫТОЙ карточки такой слой лёг бы поверх полей анкеты, и клик
   по значению сворачивал бы карточку вместо того, чтобы поставить курсор в поле.
   ⚠️ position: relative — на .uz-data--fold, иначе inset считался бы от окна. Абсолютных
   потомков у карточек нет (проверено), новый якорь ничего не перехватывает.
   ⚠️ В режиме правки растяжка сама себя выключает: правило .uz-cmodal__form.is-editing
   .uz-data--fold > summary { pointer-events: none } наследуется и псевдоэлементом. */
.uz-data--fold { position: relative; }
.uz-data--fold:not([open]) > summary::before {
    content: '';
    position: absolute;
    inset: 0;
}

/* ============================================================
   СТРАНИЦА «НОВЫЙ ДОМЕН» НА ТЕЛЕФОНЕ (2026-08-04)
   ============================================================
   Мобильных правил у страницы не было: она собрана на утилитах и рассчитана на
   широкую колонку. На 360px это давало два неработающих места. */
@media (max-width: 680px) {
    /* NS-строка в столбик: имя сервера и IP делили одну строку и ужимались до 100px —
       в такое поле не влезает даже «ns1.example.uz», клиент печатал вслепую.
       Метка (NS1) и звёздочка остаются в первой строке, поля идут под ними. */
    .dreg-nsrow { flex-wrap: wrap; row-gap: 6px; }
    .dreg-nsrow .ns-name-input,
    .dreg-nsrow .ns-ip-input { flex: 1 1 100%; }

    /* Главное действие страницы — сплошная кнопка в полный тап-таргет (--uz-tap).
       Бледная заливка primary/10 при высоте 33px читалась как второстепенная ссылка,
       хотя это единственное завершающее действие формы. */
    .dreg-submit {
        min-height: var(--uz-tap);
        background: var(--uz-primary);
        color: #fff;
        font-size: 14px;
    }
    .dreg-submit:hover,
    .dreg-submit:focus-visible { background: var(--uz-primary-d); color: #fff; }
    .dreg-submit:active { transform: translateY(1px); }
}

/* Пометка «договор на русском» на не-русских локалях (2026-08-04): тело документа
   остаётся русским, и клиенту надо сказать об этом до того, как он начнёт его читать. */
.uz-ct__rumark {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--uz-line);
    border-radius: var(--uz-r-ctl);
    background: var(--uz-surface);
    font-size: 13px;
    line-height: 1.55;
    color: var(--uz-text-dim);
}

/* Кнопка выхода с пустых экранов «Оплачивать нечего» / «Договоров нет» (2026-08-04):
   раньше там был тупик — заголовок, строка и ни одного действия. */
.uz-empty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    min-height: var(--uz-tap);
}
@media (max-width: 680px) {
    .uz-empty__btn { display: flex; width: 100%; }
}

/* ===== Проверка домена в модалке «Новый домен» (Мои домены) =====
   Разметку и скрипт берём с витрины один в один, а стили — НЕТ: те живут в pages.css
   на токенах сайта (--card-bg, --text-dim, --success-bg), а в кабинет pages.css не
   подключён. Поэтому здесь свой компактный набор на токенах кабинета, ровно под те
   классы, которые рисует domcheck.js. */
.domcheck--modal { display: flex; flex-direction: column; }

.domcheck--modal .domcheck__row { display: flex; gap: 12px; margin-top: 20px; }
.domcheck--modal .domcheck__field { position: relative; display: flex; flex: 1; min-width: 0; }

/* 16px обязателен: на меньшем iOS зумит страницу при фокусе. Справа — место под «.uz». */
.domcheck--modal .domcheck__input { padding-right: 56px; font-size: 16px; }

.domcheck--modal .domcheck__tld {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-family: var(--uz-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--uz-primary);
    background: var(--uz-field-bg);
    border-left: 1px solid var(--uz-line);
    border-radius: 0 var(--uz-r-in) var(--uz-r-in) 0;
    pointer-events: none;     /* суффикс — подпись, а не поле: клик должен попадать в input */
}

.domcheck--modal .domcheck__row .btn {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 44px;
    padding-inline: 22px;
    font-size: 15px;
}

.domcheck--modal .domcheck__result {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--uz-line);
    border-radius: 13px;
    background: var(--uz-field-bg);
}

/* Цвет — по смыслу ответа, а не «фирменный»: свободен, занят, ошибка.
   Мягкая заливка, как на витрине: там она из --success-bg (styles.css), у нас таких
   токенов нет — берём тот же цвет через color-mix. */
.domcheck--modal .domcheck__result--free {
    border-color: color-mix(in oklch, var(--uz-success) 34%, transparent);
    background: color-mix(in oklch, var(--uz-success) 10%, transparent);
}
.domcheck--modal .domcheck__result--taken {
    border-color: color-mix(in oklch, var(--uz-warning) 34%, transparent);
    background: color-mix(in oklch, var(--uz-warning) 10%, transparent);
}
.domcheck--modal .domcheck__result--error {
    border-color: color-mix(in oklch, var(--uz-danger) 34%, transparent);
    background: color-mix(in oklch, var(--uz-danger) 10%, transparent);
}

.domcheck--modal .domcheck__title { font-weight: 700; font-size: var(--fs-body); }
.domcheck--modal .domcheck__result--free .domcheck__title { color: var(--uz-success); }
.domcheck--modal .domcheck__result--taken .domcheck__title { color: var(--uz-warning); }
.domcheck--modal .domcheck__result--error .domcheck__title { color: var(--uz-danger); }

.domcheck--modal .domcheck__sub { margin-top: 3px; font-size: 14px; color: var(--uz-text-dim); line-height: 1.5; }
/* Кнопку результата рисует domcheck.js с классом btn--primary — это модификатор из CSS
   САЙТА (styles.css), которого в кабинете нет: кнопка выходила без заливки и переносилась
   в две строки. Скрипт не трогаем (он общий с витриной) — задаём вид здесь. */
.domcheck--modal .domcheck__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 22px;
    min-height: 44px;
    border: 0;
    border-radius: var(--uz-r-ctl);
    /* Градиент вертикальный, как на витрине: с 135deg оттенок читался иначе.
       Тень — оттуда же: внутренний блик сверху + мягкая подсветка снизу. */
    background: linear-gradient(var(--uz-primary), #0B5E8A);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .18), 0 6px 16px -6px rgba(11, 94, 138, .55);
    color: #fff;
    font-size: 15px;
    font-weight: var(--fw-bold);
    white-space: nowrap;
    text-decoration: none;
}

.domcheck--modal .domcheck__cta .ico { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 2.2; }
.domcheck--modal .domcheck__cta:hover { filter: brightness(1.06); }
.domcheck--modal .domcheck__hint { margin-top: 14px; font-size: 13px; color: var(--uz-text-dimmer); line-height: 1.5; }

@media (max-width: 680px) {
    /* Кнопка «Проверить» под полем: рядом им тесно, поле сжимается до пары символов. */
    .domcheck--modal .domcheck__row { flex-direction: column; }
}

/* Второй шаг модалки «Новый домен»: подтверждение имени и срок. */

/* Модалка «Новый домен» под витринный блок проверки: те же пропорции и воздух
   (решение пользователя 2026-08-05). Кегли берём из общей шкалы, а не из pages.css —
   он в кабинет не подключён. */
/* Ширина как у блока проверки на витрине: там он стоит в .uz-wrap (1180px минус
   поля 24px с каждой стороны). Класс max-w-3xl с разметки снят — он резал окно
   до 768px, и оно было заметно уже витринного. */
.uz-ndbox {
    width: 100%;
    max-width: min(1132px, calc(100vw - 32px));
    padding: 34px 40px;
}

.uz-ndbox__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--uz-text);
}

.uz-ndbox__lead {
    margin-top: 8px;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--uz-text-dim);
}

.uz-ndbox .domcheck--modal { margin-top: 0; }

@media (max-width: 680px) {
    .uz-ndbox { padding: 22px 18px; }
}

/* Крестик окна «Новый домен». Абсолютом, а не в потоке: заголовок должен начинаться
   с той же линии, что и на витрине, где крестика нет вовсе. */
.uz-ndbox { position: relative; }

.uz-ndbox__x {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--uz-text-dim);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.uz-ndbox__x svg { width: 18px; height: 18px; }
.uz-ndbox__x:hover { background: var(--uz-field-bg); color: var(--uz-text); }

/* Заголовок не должен подъезжать под крестик на узком окне. */
.uz-ndbox__title { padding-right: 44px; }

/* «Стоимость по годам» — тихая ссылка под подсказкой, как на витрине. */
.uz-ndbox__pricelink {
    align-self: flex-start;
    margin-top: 10px;
    padding: 0;
    font-size: 13px;
    color: var(--uz-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.uz-ndprice { margin-top: 16px; }
.uz-ndprice__cap {
    padding-bottom: 8px;
    font-size: 12px;
    text-align: left;
    color: var(--uz-text-dimmer);
}
.uz-ndprice__foot { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--uz-text-dimmer); }

/* ⚠️ Иконки внутри окна «Новый домен». Стрелку в кнопке результата рисует domcheck.js
   разметкой БЕЗ атрибутов fill/stroke — на витрине их задаёт styles.css, а в кабинете
   такого правила нет, и путь заливался чёрным: вместо стрелки выходил треугольник. */
.uz-ndbox svg.ico {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Шаги «срок» и «цены» — узкое окно: карточка формы 440px, и в широком окне она
   висела посреди пустоты. Ширину переключает showStep() в user-domains.html. */
.uz-ndbox.is-narrow { max-width: min(560px, calc(100vw - 32px)); }


/* ============================================================================
   ТАП-ТАРГЕТЫ НА ТЕЛЕФОНЕ (замер 2026-08-07)
   Система объявила --uz-tap: 44px, но мелкие утилитарные кнопки и ссылки внутри
   кабинета верстались Tailwind-классом py-1.5 и выходили ~30px по высоте — ниже
   собственного правила. Это «Открыть страницу оплаты», «Отменить оплату», «Назад»,
   действия на карточке домена и в DNS-панели: 42 таких элемента на клиентских
   экранах, ещё больше у персонала.
   Поднимаем только на телефоне: на мыши 30px попадаются нормально, а плотность
   десктопных панелей ломать незачем. inline-flex нужен потому, что у голой
   строчной ссылки min-height не работает вовсе.
   ⚠️ Элементы, которые скрипт показывает и прячет (#uzum-cancel-btn,
   #uzum-reopen-link), задают display инлайновым стилем — он сильнее этого правила,
   так что их логика показа не ломается.
   ⚠️ Кнопки в .uz-dcard__actions сюда не попадают: там своя мобильная раскладка
   во всю ширину строки, и py-1.5 в них не используется (проверено).
   ============================================================================ */
@media (max-width: 680px) {
    .uz-cab__in a[class*="py-1.5"],
    .uz-cab__in button[class*="py-1.5"] {
        display: inline-flex;
        align-items: center;
        min-height: var(--uz-tap);
    }
}

/* ============================================================
   ТЕЛЕФОН: СПИСКИ «ЗАЯВКИ» И «СЧЕТА» (2026-08-14)
   ============================================================
   Блок стоит в самом конце файла НАМЕРЕННО. Мобильная раскладка «Моих доменов» выше
   раскладывает любую .uz-dcard в две колонки (имя слева, статус справа), одевает действие
   в кнопку и раздаёт ячейкам grid-column. Для списка из пяти колонок это давало кашу:
   статус улетал во вторую колонку, между ячейками висела вертикальная черта, а подписи
   разъезжались. Правила ниже перекрывают те по специфичности И по порядку — так их не
   придётся держать в голове при следующей правке соседнего списка. */
@media (max-width: 680px) {
    /* Капсула — столбик строк «подпись — значение» */
    .uz-dlist--app .uz-dcard,
    .uz-dlist--inv .uz-dcard {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 15px 18px;
        border-radius: var(--uz-r-card);
    }

    .uz-dlist--app .uz-dcard > *,
    .uz-dlist--inv .uz-dcard > * {
        grid-column: auto;
        justify-self: stretch;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Вертикальных разделителей на телефоне нет — колонок нет.
       ⚠️ Линию у «Статуса» гасим ТЕМ ЖЕ селектором, что её рисует (см. .uz-dlist--app выше):
       у того четыре класса, и короткое `> *::after` ему проигрывало — чёрточка оставалась
       висеть справа от бейджа. */
    .uz-dlist--app .uz-dcard > *::after,
    .uz-dlist--inv .uz-dcard > *::after,
    .uz-dlist--app .uz-dcard > .uz-dcard__status:not(:last-child)::after,
    .uz-dlist--inv .uz-dcard > .uz-dcard__status:not(:last-child)::after { content: none; }

    /* Подпись строки берём из data-label: в разметке текст не дублируется.
       Имя домена — заголовок карточки, действию подпись тоже ни к чему. */
    .uz-dlist--app .uz-dcard > *:not(.uz-dcard__name):not(.uz-dcard__actions)::before,
    .uz-dlist--inv .uz-dcard > *:not(.uz-dcard__name):not(.uz-dcard__actions)::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-family: var(--uz-mono);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--uz-text-dimmer);
    }

    /* Имя домена — заголовок карточки, по центру (решение пользователя 2026-08-14).
       Центрируем через justify-content, а не text-align: ячейка .uz-dcard > * — это
       flex-контейнер, и текст в нём анонимный flex-элемент, text-align его не двигает. */
    .uz-dlist--app .uz-dcard__name,
    .uz-dlist--inv .uz-dcard__name {
        justify-content: center;
        margin-bottom: 4px;
        font-size: 17px;
    }

    /* Значение прижато к правому краю строки — подпись слева, значение справа */
    .uz-dlist--app .uz-dcard__status > .flex,
    .uz-dlist--inv .uz-dcard__status > .flex,
    .uz-dlist--app .uz-dcard__pay > .flex { justify-content: flex-end; }

    /* Действие — кнопка во всю ширину следующей строкой, как на карточке домена.
       display:block обязателен: иначе ячейка остаётся flex-контейнером с прижатым
       вправо содержимым и кнопка не растянется. */
    .uz-dlist--app .uz-dcard__actions,
    .uz-dlist--inv .uz-dcard__actions {
        display: block;
        margin-top: 6px;
        padding-top: 11px;
        border-top: 1px solid var(--uz-line-strong);
    }

    .uz-dlist--app .uz-dcard__actions a,
    .uz-dlist--inv .uz-dcard__actions a { width: 100%; }

    /* Лесенку из <br> держим только на широком экране: на телефоне принудительные
       переносы рвали бы абзац посреди строки. */
    .uz-fb__text br { display: none; }
}

/* ============================================================
   ТЕЛЕФОН: ОСТАЛЬНЫЕ СПИСКИ МЕНЕДЖЕРА (2026-08-28)
   ============================================================
   Очередь, Ожидание, Клиенты, Зарегистрированные домены, Платежи — та же раскладка
   «подпись — значение», что у «Заявок» и «Счетов» выше. Блок отдельный и ПОСЛЕ того,
   потому что у списков менеджера колонок больше (до десяти) и действия у половины из них —
   ряд значков, а не одна текстовая ссылка; разводить это внутри чужого блока значило бы
   утяжелить его условиями. Общий маркер .uz-dlist--mgr есть у всех пяти. */
@media (max-width: 680px) {
    /* Капсула — столбик строк */
    .uz-dlist--mgr .uz-dcard {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding: 15px 18px;
        border-radius: var(--uz-r-card);
    }

    .uz-dlist--mgr .uz-dcard > * {
        grid-column: auto;
        justify-self: stretch;
        justify-content: space-between;
        gap: 12px;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* Колонок нет — нет и вертикальных разделителей.
       ⚠️ Линию у «Статуса» гасим ТЕМ ЖЕ селектором, что её рисует (см. .uz-dlist--mgr выше):
       у того четыре класса, и короткое `> *::after` ему проигрывает — чёрточка оставалась
       висеть справа от бейджа (та же грабля, что была у «Заявок» 2026-08-07). */
    .uz-dlist--mgr .uz-dcard > *::after,
    .uz-dlist--mgr .uz-dcard > .uz-dcard__status:not(:last-child)::after { content: none; }

    /* Подпись строки берём из data-label: в разметке текст не дублируется.
       Имя объекта — заголовок карточки, действию подпись тоже ни к чему. */
    .uz-dlist--mgr .uz-dcard > *:not(.uz-dcard__name):not(.uz-dcard__actions)::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-family: var(--uz-mono);
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--uz-text-dimmer);
    }

    /* Имя объекта — заголовок карточки, по центру. Через justify-content, а не text-align:
       ячейка .uz-dcard > * это flex-контейнер, и текст в ней анонимный flex-элемент.
       У двухстрочного имени (объект + владелец) --stack уже ставит колонку, ему нужен
       align-items, иначе строки прижмутся влево. */
    .uz-dlist--mgr .uz-dcard__name {
        justify-content: center;
        margin-bottom: 4px;
        font-size: 17px;
    }

    /* Значение прижато к правому краю строки — подпись слева, значение справа */
    .uz-dlist--mgr .uz-dcard__status > .flex { justify-content: flex-end; }

    /* Действия — отдельной строкой за полосой */
    .uz-dlist--mgr .uz-dcard__actions {
        display: flex;
        justify-content: center;
        margin-top: 6px;
        padding-top: 11px;
        border-top: 1px solid var(--uz-line-strong);
    }

    .uz-dlist--mgr .uz-dcard__actions > .flex,
    .uz-dlist--mgr .uz-dcard__actions > .inline-flex { display: flex; justify-content: center; }

    /* Одна текстовая ссылка растягивается в кнопку во всю ширину — как у «Заявок». */
    .uz-dlist--regdom .uz-dcard__actions a,
    .uz-dlist--minv .uz-dcard__actions a { width: 100%; }

    /* ⚠️ А ряд ЗНАЧКОВ (очередь, ожидание, клиенты) — наоборот, значками и остаётся.
       Общее правило «Моих доменов» одевает ЛЮБУЮ ссылку внутри действий в кнопку во всю
       ширину с рамкой, и ряд распадался: <a> превращался в широкую рамку, а стоявшие
       рядом <button> оставались мелкими значками. Возвращаем ссылке исходный вид кнопки-значка. */
    .uz-dlist--queue .uz-dcard__actions a,
    .uz-dlist--waiting .uz-dcard__actions a,
    .uz-dlist--clients .uz-dcard__actions a {
        display: inline-flex;
        width: auto;
        min-height: 0;
        border: 0;
    }

    .uz-dlist--queue .uz-dcard__actions a,
    .uz-dlist--waiting .uz-dcard__actions a { padding: 6px; }
}