/* =============================================================================
VPN Backend — Дизайн-система (единый источник истины)
-----------------------------------------------------------------------------
Один файл = все токены + все компоненты. Подключается на любой странице:
(иконки + поведение + бренд)
БРЕНДЫ. Акцент переключается атрибутом на :
→ синий #7DA2D0
→ бирюза #2CD4C4
Все остальные цвета — общий канон WellWon (тёмные поверхности, статусы).
ЦВЕТ — ТОЛЬКО через переменные (никаких hex во вью).
Опасные действия — всегда --danger (#FF4857), независимо от бренда.
КАРТА РАЗДЕЛОВ (ищите по банеру «=== NN ==="):
00 Токены 05 Формы и поля 10 Оверлеи (modal/drawer/menu)
01 База 06 Таблицы/данные 11 Обратная связь (toast/alert/empty)
02 Типографика 07 Key-Value / meter 12 Загрузка (spinner/skeleton)
03 Кнопки 08 Навигация 13 Чат и сообщения
04 Бейджи/статус 09 Сегменты/табы 14 Утилиты
============================================================================= */
/* === 00 · ТОКЕНЫ ========================================================== */
:root{
/* Поверхности (тёмная лестница) */
--bg:#0F0F11; /* фон приложения / внешняя рамка окна */
--content:#1A1A1D; /* рабочая область (правая часть страниц), панели, модалки, меню */
--surface:#202024; /* карточки, плашки, дефолтные кнопки, ячейки таблиц */
--surfaceRaised:#26262A; /* hover и нажатые кнопки, поля ввода, теги, приподнятые плашки */
--border:#2C2C31; /* hairline-разделители 1px */
--borderStrong:#3A3A41; /* заметный бордер (hover инпута, активный) */
/* Текст */
--text:#F2F2F3; /* основной */
--text2:#9C9CA3; /* вторичный */
--text3:#6E6E75; /* третичный / плейсхолдеры / микро-лейблы */
--textDisabled:#54545B; /* выключенные состояния */
/* Бренд-метки для одновременного показа в общих списках (это НЕ акцент UI) */
--brandAll:#D97857; --brandTribe:#7DA2D0; --brandZanaves:#2CD4C4;
/* Статусы (не зависят от бренда) */
--ok:#00D7C2; --ok12:rgba(0,215,194,.13); --ok-ink:#00D7C2;
--warn:#FFA504; --warn12:rgba(255,165,4,.13); --warn-ink:#FFB733;
--danger:#FF4857; --danger12:rgba(255,72,87,.13); --dangerPressed:#E23C4A;
--info:#7DA2D0; --info12:rgba(125,162,208,.13);
/* Акцент — разрез «Все проекты» (коралл) по умолчанию (переопределяется ниже) */
--accent:#D97857;
--accentPressed:#C56646;
--accentText:#FFFFFF; /* текст поверх заливки акцентом */
--accent12:rgba(217,120,87,.12);
--accent14:rgba(217,120,87,.16);
--accent24:rgba(217,120,87,.26);
/* Типографика */
--font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Inter","Helvetica Neue",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono","Menlo","Monaco","Cascadia Code",monospace;
--fs-display:28px; --fs-title:20px; --fs-h:16px; --fs-body:13.5px;
--fs-sm:12.5px; --fs-xs:11.5px; --fs-label:11px;
/* Отступы (4-пиксельная сетка) */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;
/* Скругления */
--r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:16px; --r-pill:999px;
/* Тени / высоты */
--shadow-1:0 1px 2px rgba(0,0,0,.35);
--shadow-2:0 12px 30px rgba(0,0,0,.5); /* меню, поповеры */
--shadow-3:0 24px 60px rgba(0,0,0,.55); /* модалки, drawer */
/* Слои (z-index) */
--z-sticky:20; --z-drawer:40; --z-scrim:45; --z-modal:50; --z-menu:60; --z-toast:80; --z-tooltip:90;
/* Тайминги анимаций */
--dur-1:.12s; --dur-2:.16s; --dur-3:.22s; --ease:cubic-bezier(.2,.7,.2,1);
}
/* Разрез «Все проекты» (коралл) — агрегат всех данных, дефолт (НЕ «бренд WellWon») */
:root, [data-brand="all"]{
--accent:#D97857; --accentPressed:#C56646; --accentText:#FFFFFF;
--accent12:rgba(217,120,87,.12); --accent14:rgba(217,120,87,.16); --accent24:rgba(217,120,87,.26);
}
/* Разрез проекта TRIBE (синий) */
[data-brand="tribe"]{
--accent:#7DA2D0; --accentPressed:#6B8FBF; --accentText:#0E1116;
--accent12:rgba(125,162,208,.12); --accent14:rgba(125,162,208,.16); --accent24:rgba(125,162,208,.26);
}
/* Разрез проекта ZANAVES (бирюза/зелёный) */
[data-brand="zanaves"]{
--accent:#2CD4C4; --accentPressed:#22B8AA; --accentText:#062120;
--accent12:rgba(44,212,196,.12); --accent14:rgba(44,212,196,.16); --accent24:rgba(44,212,196,.26);
}
/* === 01 · БАЗА ============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-body);
line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:var(--accent); text-decoration:none;} a:hover{color:var(--accentPressed);}
button,input,textarea,select{font-family:inherit; color:inherit;}
::selection{background:var(--accent24);}
:focus-visible{outline:2px solid color-mix(in srgb, var(--accent) 72%, transparent); outline-offset:2px; border-radius:4px;}
input:focus-visible,textarea:focus-visible,select:focus-visible,.input:focus-visible{outline:none;}
/* Скроллбары */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:var(--surface); border:3px solid transparent; background-clip:padding-box; border-radius:8px;}
*::-webkit-scrollbar-thumb:hover{background:var(--surfaceRaised); background-clip:padding-box;}
*::-webkit-scrollbar-track{background:transparent;}
/* Иконки: — SVG подставляет vpn-backend.js */
.ic{display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 auto; color:currentColor;}
.ic svg{width:100%; height:100%; display:block;}
.ic--sm{width:15px;height:15px;} .ic--lg{width:22px;height:22px;}
/* Табличные цифры — везде, где есть числа/время/id */
.tnum,.num,.mono{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono);}
@keyframes ww-pop{from{transform:scale(.98);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes ww-slide-r{from{transform:translateX(16px);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes ww-slide-u{from{transform:translateY(8px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes ww-spin{to{transform:rotate(360deg);}}
@keyframes ww-shimmer{0%{background-position:-460px 0;}100%{background-position:460px 0;}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important; transition-duration:.001ms!important;}}
/* === 02 · ТИПОГРАФИКА ===================================================== */
.t-display{font-size:var(--fs-display); font-weight:800; letter-spacing:-.025em; line-height:1.15;}
.t-title{font-size:var(--fs-title); font-weight:750; letter-spacing:-.02em; line-height:1.2;}
.t-h{font-size:var(--fs-h); font-weight:700; letter-spacing:-.01em;}
.t-body{font-size:var(--fs-body); font-weight:400;}
.t-sm{font-size:var(--fs-sm);} .t-xs{font-size:var(--fs-xs);}
.t-muted{color:var(--text2);} .t-faint{color:var(--text3);}
.t-label{font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3);}
.t-mono{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums;}
.eyebrow{display:inline-flex; align-items:center; gap:var(--s2); font-size:12px; font-weight:600; color:var(--accent); white-space:nowrap;
background:var(--accent12); border:1px solid var(--accent24); border-radius:var(--r-pill); padding:4px 12px;}
code.tok,.code-inline{font-family:var(--mono); font-size:.86em; background:var(--surfaceRaised); border:1px solid var(--border); border-radius:6px; padding:1px 6px; color:var(--text);}
kbd{font-family:var(--mono); font-size:12px; background:var(--surface); border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; padding:1px 7px; color:var(--text2);}
/* === 03 · КНОПКИ ========================================================== */
.btn{
--_bg:var(--surface); --_bd:var(--border); --_fg:var(--text);
display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
height:36px; padding:0 14px; border-radius:var(--r-md); border:1px solid var(--_bd);
background:var(--_bg); color:var(--_fg); font-size:var(--fs-sm); font-weight:600; line-height:1;
cursor:pointer; white-space:nowrap; user-select:none; transition:background var(--dur-1), border-color var(--dur-1), color var(--dur-1), opacity var(--dur-1);
}
.btn .ic{width:16px;height:16px;}
.btn:hover{--_bg:var(--surfaceRaised); --_bd:var(--borderStrong);}
.btn:active{transform:translateY(.5px);}
.btn:disabled,.btn.is-disabled{opacity:.45; cursor:not-allowed; pointer-events:none;}
/* Варианты */
.btn--primary{--_bg:var(--accent); --_bd:transparent; --_fg:var(--accentText);}
.btn--primary:hover{--_bg:var(--accentPressed); --_bd:transparent;}
.btn--danger{--_bg:var(--danger); --_bd:transparent; --_fg:#fff;}
.btn--danger:hover{--_bg:var(--dangerPressed); --_bd:transparent;}
.btn--danger-soft{--_bg:transparent; --_bd:var(--border); --_fg:var(--danger);}
.btn--danger-soft:hover{--_bg:var(--danger12); --_bd:transparent; --_fg:var(--danger);}
.btn--ghost{--_bg:transparent; --_bd:transparent; --_fg:var(--text2);}
.btn--ghost:hover{--_bg:var(--surface); --_fg:var(--text);}
.btn--accent-soft{--_bg:var(--accent12); --_bd:transparent; --_fg:var(--accent);}
.btn--accent-soft:hover{--_bg:var(--accent14);}
.btn--link{--_bg:transparent; --_bd:transparent; --_fg:var(--accent); height:auto; padding:2px 4px;}
.btn--link:hover{--_bg:transparent; --_fg:var(--accentPressed); text-decoration:underline;}
/* Размеры */
.btn--sm{height:30px; padding:0 11px; font-size:var(--fs-xs); border-radius:var(--r-sm);}
.btn--lg{height:44px; padding:0 20px; font-size:var(--fs-body); border-radius:var(--r-lg);}
.btn--block{display:flex; width:100%;}
/* Иконочная кнопка (квадрат) */
.btn-icon{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:0 0 auto;
border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text2); cursor:pointer;
transition:background var(--dur-1), color var(--dur-1), border-color var(--dur-1);}
.btn-icon:hover{background:var(--surfaceRaised); color:var(--text); border-color:var(--borderStrong);}
.btn-icon:disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
.btn-icon--sm{width:30px;height:30px;} .btn-icon--lg{width:40px;height:40px;}
.btn-icon--plain{border-color:transparent; background:transparent;}
.btn-icon--danger:hover{color:var(--danger); background:var(--danger12); border-color:transparent;}
.btn-icon.is-active{background:var(--accent12); color:var(--accent); border-color:transparent;}
.btn-icon--round{border-radius:var(--r-pill);}
/* Загрузка: */
.btn.is-loading{color:transparent!important; pointer-events:none; position:relative;}
.btn.is-loading::after{content:""; position:absolute; width:15px; height:15px; border-radius:50%;
border:2px solid color-mix(in srgb, var(--_fg,#fff) 40%, transparent); border-top-color:var(--_fg,#fff); animation:ww-spin .6s linear infinite;}
.btn--primary.is-loading::after{border-color:color-mix(in srgb, var(--accentText) 35%, transparent); border-top-color:var(--accentText);}
/* Группа кнопок / FAB */
.btn-group{display:inline-flex; gap:var(--s2);}
.fab{width:44px;height:44px;border-radius:var(--r-pill); border:none; background:var(--accent); color:var(--accentText);
display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-2);}
.fab:hover{background:var(--accentPressed);}
/* === 04 · БЕЙДЖИ И СТАТУСЫ ================================================ */
/* Статус-пилюля с точкой: active */
.status{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--r-pill);
font-size:var(--fs-xs); font-weight:600; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums;
background:var(--surfaceRaised); color:var(--text2);}
.status .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.status--ok{background:var(--ok12); color:var(--ok);}
.status--warn{background:var(--warn12); color:var(--warn-ink);}
.status--danger{background:var(--danger12); color:var(--danger);}
.status--info{background:var(--info12); color:var(--info);}
.status--accent{background:var(--accent12); color:var(--accent);}
.status--neutral{background:var(--surfaceRaised); color:var(--text2);}
.status--live .dot{box-shadow:0 0 0 0 currentColor; animation:ww-pulse 1.6s infinite;}
@keyframes ww-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent);}70%{box-shadow:0 0 0 5px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
/* Счётчик (непрочитанные / кол-во) */
.badge{display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px;
border-radius:var(--r-pill); font-size:var(--fs-label); font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
background:var(--surfaceRaised); color:var(--text2);}
.badge--accent{background:var(--accent); color:var(--accentText);}
.badge--danger{background:var(--danger); color:#fff;}
.badge--dot{min-width:8px; width:8px; height:8px; padding:0; border-radius:50%;}
/* Тег (бренд, платформа, страна, роль): tribe */
.tag{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--r-pill);
font-size:var(--fs-xs); font-weight:600; background:var(--surface); border:1px solid var(--border); color:var(--text2);}
.tag--accent{background:var(--accent12); border-color:transparent; color:var(--accent);}
.tag--mono{font-family:var(--mono); font-size:12px;}
.tag--square{border-radius:var(--r-sm);}
.tag .flag{width:16px;height:16px;border-radius:50%;overflow:hidden;flex:0 0 auto;}
/* Автономная точка-индикатор */
.dot-ind{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--text3);}
.dot-ind--ok{background:var(--ok);} .dot-ind--warn{background:var(--warn);} .dot-ind--danger{background:var(--danger);}
.dot-ind--ring{border:2px solid var(--bg);}
/* === 05 · ФОРМЫ И ПОЛЯ ==================================================== */
/* Обёртка поля: label + control + hint/error */
.field{display:flex; flex-direction:column; gap:6px;}
.field-label{font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3);}
.field-label .req{color:var(--danger); margin-left:2px;}
.field-hint{font-size:var(--fs-xs); color:var(--text3);}
.field-error{font-size:var(--fs-xs); color:var(--danger); display:flex; align-items:center; gap:5px;}
.field-error .ic{width:13px;height:13px;}
/* Текстовое поле */
.input,.textarea,.select{
width:100%; height:38px; padding:0 12px; border-radius:var(--r-md);
background:var(--surfaceRaised); border:1px solid var(--border); color:var(--text);
font-size:var(--fs-body); outline:none; transition:border-color var(--dur-1), background var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder,.textarea::placeholder{color:var(--text3);}
.input:hover,.textarea:hover,.select:hover{border-color:var(--borderStrong);}
.input:focus,.textarea:focus,.select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent12); background:var(--content);}
.input:disabled,.textarea:disabled,.select:disabled{opacity:.5; cursor:not-allowed; background:var(--surface);}
.input[readonly]{color:var(--text2);}
.input--sm{height:32px; font-size:var(--fs-sm); border-radius:var(--r-sm);}
.input--lg{height:44px; border-radius:var(--r-lg);}
.textarea{height:auto; min-height:88px; padding:9px 12px; line-height:1.5; resize:vertical;}
/* Ошибка / успех на поле */
.field--error .input,.field--error .textarea,.field--error .select,.input.is-error{border-color:var(--danger)!important; box-shadow:0 0 0 3px var(--danger12);}
.field--ok .input,.input.is-ok{border-color:var(--ok); box-shadow:0 0 0 3px var(--ok12);}
/* Селект со стрелкой */
.select{appearance:none; -webkit-appearance:none; padding-right:34px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E6E75' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 11px center;}
.select option{background:var(--content); color:var(--text);}
/* Поле с иконкой/аддоном:
*/
.input-group{display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; border-radius:var(--r-md);
background:var(--surfaceRaised); border:1px solid var(--border); transition:border-color var(--dur-1), box-shadow var(--dur-1);}
.input-group:hover{border-color:var(--borderStrong);}
.input-group:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent12); background:var(--content);}
.input-group .ic{color:var(--text3);}
.input-group .input-bare{flex:1; min-width:0; height:100%; border:none; background:transparent; color:var(--text); font-size:var(--fs-body); outline:none;}
.input-group .input-bare::placeholder{color:var(--text3);}
.input-group .addon{font-size:var(--fs-sm); color:var(--text3); flex:0 0 auto;}
.input-group--sm{height:32px;} .input-group--lg{height:44px;}
/* Поиск = input-group с иконкой лупы (семантический алиас) */
.search{max-width:100%;}
/* Чекбокс / радио (кастом) */
.check{display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:var(--fs-body); color:var(--text); user-select:none;}
.check input{position:absolute; opacity:0; width:0; height:0;}
.check .box{width:18px;height:18px;flex:0 0 auto;border-radius:6px;border:1.5px solid var(--borderStrong);background:var(--surfaceRaised);
display:inline-flex;align-items:center;justify-content:center;color:transparent;transition:background var(--dur-1),border-color var(--dur-1);}
.check .box .ic{width:12px;height:12px;}
.check input:checked + .box{background:var(--accent); border-color:transparent; color:var(--accentText);}
.check input:focus-visible + .box{box-shadow:0 0 0 3px var(--accent12);}
.check input:disabled + .box{opacity:.45;}
.check.check--radio .box{border-radius:50%;}
.check.check--radio input:checked + .box{background:var(--accent);}
.check.check--radio input:checked + .box::after{content:""; width:7px;height:7px;border-radius:50%;background:var(--accentText);}
.check.check--radio .box .ic{display:none;}
/* Переключатель (switch) */
.switch{position:relative; display:inline-flex; align-items:center; cursor:pointer;}
.switch input{position:absolute; opacity:0; width:0; height:0;}
.switch .track{width:38px;height:22px;border-radius:var(--r-pill);background:var(--surfaceRaised); border:1px solid var(--border); transition:background var(--dur-2), border-color var(--dur-2); position:relative;}
.switch .track::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text2); transition:transform var(--dur-2), background var(--dur-2);}
.switch input:checked + .track{background:var(--accent); border-color:transparent;}
.switch input:checked + .track::after{transform:translateX(16px); background:var(--accentText);}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--accent12);}
.switch input:disabled + .track{opacity:.45;}
/* Степпер числа */
.stepper{display:inline-flex; align-items:center; height:38px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surfaceRaised); overflow:hidden;}
.stepper button{width:34px;height:100%;border:none;background:transparent;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.stepper button:hover{background:var(--surface); color:var(--text);}
.stepper input{width:52px;height:100%;border:none;background:transparent;text-align:center;color:var(--text);font-variant-numeric:tabular-nums;outline:none;border-left:1px solid var(--border);border-right:1px solid var(--border);}
/* Сегментированный выбор радио-кнопками (pill segmented) */
.radio-seg{display:inline-flex; padding:3px; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
.radio-seg label{padding:6px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--text2); cursor:pointer; white-space:nowrap;}
.radio-seg label:hover{color:var(--text);}
.radio-seg input{position:absolute; opacity:0;}
.radio-seg input:checked + label,.radio-seg label.is-active{background:var(--accent12); color:var(--accent); font-weight:600;}
/* Формовые сетки */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);}
.form-grid--3{grid-template-columns:1fr 1fr 1fr;}
.form-grid .span-2{grid-column:span 2;}
.form-actions{display:flex; align-items:center; justify-content:flex-end; gap:var(--s2); margin-top:var(--s5);}
/* Фильтр-бар (стек «микро-лейбл + контрол») */
.filterbar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--s3); padding:var(--s4) var(--s5);
background:var(--content); border:1px solid var(--border); border-radius:var(--r-lg);}
.filter{display:flex; flex-direction:column; gap:5px; min-width:130px;}
.filter > .field-label{margin:0;}
.filterbar .filter-reset{margin-left:auto;}
/* Инлайн-форма создания (строка «поля + Создать») */
.inline-form{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);}
.inline-form .input,.inline-form .select{height:38px; width:auto;}
.inline-form .grow{flex:1; min-width:160px;}
/* Чипы быстрого выбора / фильтры-теги */
.chip{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-pill);
background:var(--surface); border:1px solid var(--border); color:var(--text2); font-size:var(--fs-sm); cursor:pointer; transition:background var(--dur-1), color var(--dur-1);}
.chip:hover{background:var(--surfaceRaised); color:var(--text);}
.chip.is-active{background:var(--accent12); border-color:transparent; color:var(--accent); font-weight:600;}
.chip .x{color:var(--text3); display:inline-flex;} .chip .x:hover{color:var(--text);}
/* === 06 · ТАБЛИЦЫ И ДАННЫЕ =============================================== */
.table-wrap{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface);}
.table{width:100%; border-collapse:collapse; font-size:var(--fs-sm);}
.table thead th{position:sticky; top:0; background:var(--surface); text-align:left; padding:12px 16px; z-index:1;
font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); border-bottom:1px solid var(--border); white-space:nowrap;}
.table tbody td{padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text);}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr{transition:background var(--dur-1);}
.table tbody tr:hover{background:var(--surfaceRaised);}
.table tbody tr.is-selected{background:var(--accent12);}
.table tbody tr.is-clickable{cursor:pointer;}
/* Ячейки-хелперы */
.cell-mono{font-family:var(--mono); font-size:12.5px; color:var(--text2); font-variant-numeric:tabular-nums;}
.cell-strong{font-weight:600; color:var(--text);}
.cell-muted{color:var(--text2);}
.cell-danger{color:var(--danger);}
.cell-2{display:flex; flex-direction:column; gap:2px;}
.cell-2 .sub{font-size:var(--fs-xs); color:var(--text3);}
.cell-link{color:var(--accent);} .cell-link:hover{color:var(--accentPressed); text-decoration:underline;}
.num-cell{text-align:right; font-variant-numeric:tabular-nums;}
/* Сортируемый заголовок */
.th-sort{cursor:pointer; user-select:none;} .th-sort:hover{color:var(--text2);}
.th-sort .ic{width:13px;height:13px;vertical-align:-2px;margin-left:3px; opacity:.6;}
.th-sort.is-asc .ic,.th-sort.is-desc .ic{opacity:1; color:var(--accent);}
/* Строка действий */
.row-actions{display:inline-flex; gap:6px; align-items:center;}
/* Вариант «строки-карточки» (как в списках нод/юзеров): без внешней рамки, крупные строки */
.table--rows tbody td{padding:16px;}
.table--tight tbody td{padding:9px 14px;}
.table--tight thead th{padding:9px 14px;}
/* Пустое / загрузка таблицы */
.table-empty{padding:48px 24px; text-align:center; color:var(--text3);}
.table-skel td{padding:16px;}
.skel-line{height:12px; border-radius:6px; background:linear-gradient(90deg,var(--surface) 0,var(--surfaceRaised) 40px,var(--surface) 80px);
background-size:600px 100%; animation:ww-shimmer 1.2s infinite linear;}
/* Пагинация */
.pagination{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); color:var(--text2);}
.pagination .range{font-variant-numeric:tabular-nums;}
.page-list{display:inline-flex; gap:4px;}
.page-list .pg{min-width:32px; height:32px; padding:0 8px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text2); font-size:var(--fs-sm); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;}
.page-list .pg:hover{background:var(--surfaceRaised); color:var(--text);}
.page-list .pg.is-active{background:var(--accent12); border-color:transparent; color:var(--accent); font-weight:700;}
.page-list .pg:disabled{opacity:.4; cursor:not-allowed;}
/* === 07 · KEY-VALUE / МЕТРИКИ ============================================ */
/* Сетка «телеметрии»: ячейки с микро-лейблом и значением */
.kv-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;}
.kv-grid--3{grid-template-columns:1fr 1fr 1fr;}
.kv{background:var(--surface); padding:12px 14px; display:flex; flex-direction:column; gap:4px;}
.kv .k{font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3);}
.kv .v{font-size:var(--fs-body); color:var(--text); font-weight:600;}
.kv .v .sub{font-weight:400; color:var(--text3); font-size:var(--fs-xs); margin-left:6px;}
/* Ряд «ключ — значение» (карточка клиента) */
.kv-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:8px 0; font-size:var(--fs-body);}
.kv-row + .kv-row{border-top:1px solid var(--border);}
.kv-row .k{color:var(--text2);} .kv-row .v{color:var(--text); font-weight:600; text-align:right;}
.kv-row .v.muted{color:var(--text3); font-weight:400;}
/* Копи-поле (public key, id, uuid) */
.copy-field{display:flex; align-items:center; gap:10px; height:36px; padding:0 6px 0 12px; border-radius:var(--r-md); background:var(--surfaceRaised); border:1px solid var(--border);}
.copy-field .k{font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3); flex:0 0 auto;}
.copy-field .v{flex:1; min-width:0; font-family:var(--mono); font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* Прогресс / трафик-метр */
.meter{height:6px; border-radius:var(--r-pill); background:var(--surfaceRaised); overflow:hidden;}
.meter .fill{height:100%; border-radius:inherit; background:var(--accent); transition:width var(--dur-3) var(--ease);}
.meter--ok .fill{background:var(--ok);} .meter--warn .fill{background:var(--warn);} .meter--danger .fill{background:var(--danger);}
.progress{height:4px; border-radius:var(--r-pill); background:var(--surfaceRaised); overflow:hidden;}
.progress .fill{height:100%; background:var(--accent); border-radius:inherit;}
.progress--indeterminate .fill{width:35%; animation:ww-indeterminate 1.2s infinite var(--ease);}
@keyframes ww-indeterminate{0%{margin-left:-35%;}100%{margin-left:100%;}}
/* Тонкая шкала-таймлайн (выдан → истёк) */
.timeline{display:flex; flex-direction:column; gap:6px;}
.timeline .bar{height:4px; border-radius:var(--r-pill); background:var(--surfaceRaised); position:relative;}
.timeline .bar .seg{position:absolute; top:0; left:0; height:100%; border-radius:inherit; background:var(--danger);}
.timeline .ends{display:flex; justify-content:space-between; font-size:var(--fs-xs); color:var(--text3);}
/* === 08 · НАВИГАЦИЯ ====================================================== */
/* Сайдбар приложения */
.sidebar{display:flex; flex-direction:column; width:240px; flex:0 0 240px; height:100%; padding:14px 12px; border-right:1px solid var(--border); background:var(--bg);}
.brand{display:flex; align-items:center; gap:11px; padding:6px 8px 12px;}
.brand .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto;}
.brand .name{font-weight:700; font-size:14px; letter-spacing:-.01em; line-height:1.1;}
.brand .sub{font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3);}
/* Переключатель бренда (пилюли) */
.brand-switch{display:inline-flex; gap:4px; padding:4px; margin:0 6px 12px;}
.brand-switch .bs{flex:1; height:28px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface); color:var(--text2); font-size:var(--fs-xs); font-weight:600; cursor:pointer;}
.brand-switch .bs:hover{background:var(--surfaceRaised); color:var(--text);}
.brand-switch .bs.is-active{background:var(--accent12); border-color:transparent; color:var(--accent);}
/* Пункты навигации */
.nav{display:flex; flex-direction:column; gap:2px;}
.nav-section{padding:14px 10px 5px; font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3);}
.nav-item{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px; color:var(--text); font-size:var(--fs-body); cursor:pointer; border:none; background:transparent; text-align:left; width:100%; transition:background var(--dur-1), color var(--dur-1);}
.nav-item .ic{color:var(--text2); width:18px; height:18px;}
.nav-item:hover{background:var(--surface);}
.nav-item.is-active{background:var(--accent12); color:var(--accent); font-weight:600;}
.nav-item.is-active .ic{color:var(--accent);}
.nav-item .nav-badge{margin-left:auto;}
.nav-item .chevron{margin-left:auto; color:var(--text3);}
/* Низ сайдбара: версия, сервисы, юзер */
.sidebar-foot{margin-top:auto; padding-top:12px; display:flex; flex-direction:column; gap:10px;}
.svc-dots{display:flex; gap:8px;}
.svc{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:var(--r-pill); background:var(--ok12); color:var(--ok); font-size:var(--fs-xs); font-weight:600;}
.svc.is-down{background:var(--danger12); color:var(--danger);}
.svc .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.userchip{display:flex; align-items:center; gap:10px; padding:8px; border-top:1px solid var(--border);}
.userchip .ava{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accentText);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;position:relative;flex:0 0 auto;}
.userchip .ava .dot{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--ok);border:2px solid var(--bg);}
.userchip .who{flex:1;min-width:0;} .userchip .who .n{font-size:12.5px;font-weight:600;} .userchip .who .r{font-size:11px;color:var(--text3);}
.userchip .role{font-size:10px; font-weight:800; letter-spacing:.05em; color:var(--danger); border:1px solid var(--danger); border-radius:6px; padding:2px 7px;}
/* Шапка страницы */
.pagehead{display:flex; align-items:center; gap:var(--s4); padding:16px 24px; border-bottom:1px solid var(--border);}
.pagehead h1{font-size:var(--fs-title); font-weight:750; letter-spacing:-.02em; margin:0;}
.pagehead .actions{margin-left:auto; display:flex; align-items:center; gap:var(--s2);}
.section-label{font-size:var(--fs-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text3); margin:0 0 8px;}
/* Хлебные крошки */
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text3);}
.breadcrumb a{color:var(--text2);} .breadcrumb a:hover{color:var(--text);}
.breadcrumb .sep{color:var(--text3);}
.breadcrumb .cur{color:var(--text);}
/* === 09 · СЕГМЕНТЫ И ТАБЫ ================================================= */
/* Сегментированный контрол (Устройства/Аккаунты, Обычный/Биллинг) */
.segmented{display:inline-flex; padding:3px; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);}
.segmented .seg{height:30px; padding:0 14px; border:none; background:transparent; color:var(--text2); font-size:var(--fs-sm); font-weight:600; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap;}
.segmented .seg:hover{color:var(--text);}
.segmented .seg.is-active{background:var(--accent); color:var(--accentText);}
.segmented--soft .seg.is-active{background:var(--accent12); color:var(--accent);}
/* Табы (подчёркивание) */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border);}
.tab{padding:10px 14px; border:none; background:transparent; color:var(--text2); font-size:var(--fs-body); font-weight:600; cursor:pointer; position:relative;}
.tab:hover{color:var(--text);}
.tab.is-active{color:var(--text);}
.tab.is-active::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; border-radius:2px; background:var(--accent);}
.tab .badge{margin-left:7px;}
.tab-panel{display:none;} .tab-panel.is-active{display:block; animation:ww-slide-u var(--dur-2) var(--ease);}
/* === 10 · ОВЕРЛЕИ ======================================================== */
.scrim{position:fixed; inset:0; background:rgba(8,8,10,.62); backdrop-filter:blur(2px); z-index:var(--z-scrim); opacity:0; pointer-events:none; transition:opacity var(--dur-2);}
.scrim.is-open{opacity:1; pointer-events:auto;}
/* Модалка */
.modal{position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity var(--dur-2);}
.modal.is-open{opacity:1; pointer-events:auto;}
.modal-card{width:100%; max-width:480px; max-height:88vh; display:flex; flex-direction:column; background:var(--content); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-3); overflow:hidden;}
.modal.is-open .modal-card{animation:ww-pop var(--dur-2) var(--ease);}
.modal--sm .modal-card{max-width:380px;} .modal--lg .modal-card{max-width:680px;}
.modal-head{display:flex; align-items:center; gap:12px; padding:20px 22px 6px;}
.modal-head h2{font-size:var(--fs-title); font-weight:750; letter-spacing:-.02em; margin:0;}
.modal-head .modal-close{margin-left:auto;}
.modal-body{padding:16px 22px; overflow-y:auto; display:flex; flex-direction:column; gap:var(--s4);}
.modal-foot{display:flex; align-items:center; justify-content:flex-end; gap:var(--s2); padding:14px 22px 20px;}
.modal-foot .spread{margin-right:auto;}
/* Drawer (slide-over) */
.drawer{position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw; z-index:var(--z-modal); display:flex; flex-direction:column;
background:var(--content); border-left:1px solid var(--border); box-shadow:var(--shadow-3); transform:translateX(100%); transition:transform var(--dur-3) var(--ease);}
.drawer.is-open{transform:translateX(0);}
.drawer--wide{width:460px;}
.drawer-head{display:flex; align-items:flex-start; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border);}
.drawer-head .drawer-close{margin-left:auto;}
.drawer-body{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:var(--s5);}
.drawer-foot{padding:14px 18px; border-top:1px solid var(--border); display:flex; gap:var(--s2);}
.drawer-section > .section-label{margin-bottom:10px;}
/* Меню (dropdown / context) */
.menu{position:absolute; min-width:210px; padding:5px; border-radius:var(--r-lg); background:var(--content); border:1px solid var(--border); box-shadow:var(--shadow-2); z-index:var(--z-menu);}
.menu[hidden]{display:none;}
.menu.is-open{animation:ww-pop var(--dur-1) var(--ease);}
.menu-label{padding:6px 9px 4px; font-size:var(--fs-label); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text3);}
.menu-item{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:none; background:transparent; color:var(--text); font-size:var(--fs-body); border-radius:var(--r-sm); cursor:pointer; text-align:left;}
.menu-item .ic{color:var(--text2); width:16px; height:16px;}
.menu-item:hover{background:var(--surfaceRaised);}
.menu-item .kbd-hint{margin-left:auto; font-size:var(--fs-xs); color:var(--text3);}
.menu-item .check-mark{margin-left:auto; color:var(--accent);}
.menu-item.is-danger{color:var(--danger);} .menu-item.is-danger .ic{color:var(--danger);}
.menu-item:disabled{color:var(--textDisabled); cursor:not-allowed;} .menu-item:disabled .ic{color:var(--textDisabled);}
.menu-sep{height:1px; background:var(--border); margin:4px 6px;}
/* Дропдаун-обёртка для позиционирования */
.dropdown{position:relative; display:inline-block;}
.dropdown > .menu{top:calc(100% + 6px); left:0;}
.dropdown--right > .menu{left:auto; right:0;}
/* Тултип: … */
[data-tip]{position:relative;}
[data-tip]::after{content:attr(data-tip); position:absolute; z-index:var(--z-tooltip); bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(3px);
background:#000; color:var(--text); font-size:var(--fs-xs); font-weight:500; line-height:1.3; white-space:nowrap; padding:5px 9px; border-radius:7px; border:1px solid var(--border);
opacity:0; pointer-events:none; transition:opacity var(--dur-1), transform var(--dur-1);}
[data-tip]:hover::after{opacity:1; transform:translateX(-50%) translateY(0);}
[data-tip-pos="right"]::after{bottom:auto; top:50%; left:calc(100% + 7px); transform:translateY(-50%) translateX(-3px);}
[data-tip-pos="right"]:hover::after{transform:translateY(-50%) translateX(0);}
[data-tip-pos="bottom"]::after{bottom:auto; top:calc(100% + 7px); transform:translateX(-50%) translateY(-3px);}
[data-tip-pos="bottom"]:hover::after{transform:translateX(-50%) translateY(0);}
/* Поповер (богаче тултипа) */
.popover{position:absolute; min-width:220px; padding:12px 14px; border-radius:var(--r-lg); background:var(--content); border:1px solid var(--border); box-shadow:var(--shadow-2); z-index:var(--z-menu); font-size:var(--fs-sm); color:var(--text2);}
/* === 11 · ОБРАТНАЯ СВЯЗЬ ================================================= */
/* Тосты */
.toaster{position:fixed; right:20px; bottom:20px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.toast{display:flex; align-items:flex-start; gap:11px; width:340px; max-width:90vw; padding:12px 14px; border-radius:var(--r-lg);
background:var(--content); border:1px solid var(--border); box-shadow:var(--shadow-2); animation:ww-slide-r var(--dur-3) var(--ease);}
.toast .ic{margin-top:1px; color:var(--text2); width:18px; height:18px;}
.toast .body{flex:1; min-width:0;} .toast .title{font-size:var(--fs-body); font-weight:600;} .toast .desc{font-size:var(--fs-xs); color:var(--text2); margin-top:2px;}
.toast .toast-close{margin:-4px -4px 0 0;}
.toast--ok{border-left:3px solid var(--ok);} .toast--ok .ic{color:var(--ok);}
.toast--warn{border-left:3px solid var(--warn);} .toast--warn .ic{color:var(--warn);}
.toast--danger{border-left:3px solid var(--danger);} .toast--danger .ic{color:var(--danger);}
.toast--accent{border-left:3px solid var(--accent);} .toast--accent .ic{color:var(--accent);}
.toast.is-leaving{opacity:0; transform:translateX(16px); transition:opacity var(--dur-2), transform var(--dur-2);}
/* Инлайн-уведомление / заметка */
.alert{display:flex; align-items:flex-start; gap:11px; padding:12px 15px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border);}
.alert .ic{margin-top:1px; width:18px; height:18px; color:var(--text2);}
.alert .title{font-weight:600; margin-bottom:2px;} .alert .desc{font-size:var(--fs-sm); color:var(--text2);}
.alert--info{border-left:3px solid var(--info);} .alert--info .ic{color:var(--info);}
.alert--ok{border-left:3px solid var(--ok);} .alert--ok .ic{color:var(--ok);}
.alert--warn{border-left:3px solid var(--warn);} .alert--warn .ic{color:var(--warn);}
.alert--danger{border-left:3px solid var(--danger);} .alert--danger .ic{color:var(--danger);}
/* Мягкая заметка-подсказка */
.note{border-left:2px solid var(--accent); background:var(--accent12); border-radius:0 var(--r-md) var(--r-md) 0; padding:11px 15px; font-size:var(--fs-sm); color:var(--text2);}
.note b{color:var(--text);}
/* Баннер (широкая полоса) */
.banner{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-lg); background:var(--accent12); border:1px solid var(--accent24); color:var(--text);}
.banner .ic{color:var(--accent);} .banner .actions{margin-left:auto; display:flex; gap:var(--s2);}
/* Пустое состояние */
.empty-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 24px; gap:6px;}
.empty-state .ic-box{width:56px;height:56px;border-radius:var(--r-xl);background:var(--surfaceRaised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3);margin-bottom:10px;}
.empty-state .ic-box .ic{width:24px;height:24px;}
.empty-state h3{font-size:var(--fs-h); font-weight:700; margin:0;}
.empty-state p{font-size:var(--fs-sm); color:var(--text2); margin:0; max-width:320px; line-height:1.5;}
.empty-state .actions{margin-top:12px; display:flex; gap:var(--s2);}
.empty-state--inline{padding:26px 16px;} .empty-state--inline .ic-box{width:44px;height:44px;}
/* Опасная зона */
.danger-zone{border:1px solid var(--danger12); border-radius:var(--r-lg); padding:16px 18px; background:var(--danger12);}
.danger-zone .section-label{color:var(--danger); margin-bottom:10px;}
.danger-zone .row{display:flex; align-items:center; gap:12px;}
.danger-zone .row .hint{font-size:var(--fs-xs); color:var(--text3);}
/* === 12 · ЗАГРУЗКА ======================================================= */
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--surfaceRaised); border-top-color:var(--accent); animation:ww-spin .6s linear infinite; display:inline-block;}
.spinner--lg{width:28px;height:28px;border-width:3px;}
.skeleton{background:linear-gradient(90deg,var(--surface) 0,var(--surfaceRaised) 40px,var(--surface) 80px); background-size:600px 100%; animation:ww-shimmer 1.2s infinite linear; border-radius:var(--r-sm);}
.skeleton--text{height:12px; border-radius:6px;} .skeleton--title{height:18px; border-radius:7px;} .skeleton--circle{border-radius:50%;} .skeleton--block{height:80px; border-radius:var(--r-md);}
.loading-row{display:flex; align-items:center; gap:10px; color:var(--text3); font-size:var(--fs-sm);}
/* Карточка-контейнер (общий блок) */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px 20px;}
.card--surface{background:var(--surface);}
.card-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.card-head h3{font-size:var(--fs-h); font-weight:700; margin:0;} .card-head .actions{margin-left:auto;}
.divider{height:1px; background:var(--border); border:none; margin:var(--s4) 0;}
/* === 13 · ЧАТ И СООБЩЕНИЯ ================================================ */
.msg-row{display:flex; gap:9px; align-items:flex-end; margin-bottom:10px;}
.msg-row.me{flex-direction:row-reverse;}
.msg-av{width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:var(--surfaceRaised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:11.5px;font-weight:600;}
.msg-col{display:flex; flex-direction:column; max-width:560px; min-width:0;} .msg-col.me{align-items:flex-end;}
.bubble{padding:8px 12px; border-radius:12px 12px 12px 4px; background:var(--surface); border:1px solid var(--border); font-size:13.5px; line-height:1.5; word-break:break-word; color:var(--text);}
.bubble.me{border-radius:12px 12px 4px 12px; background:var(--accent12); border-color:var(--accent24);}
.bubble-name{font-size:12.5px; font-weight:600; color:var(--accent); margin-bottom:2px;}
.msg-meta{display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--text3); margin-top:4px; font-variant-numeric:tabular-nums;}
.msg-meta.me{justify-content:flex-end;}
/* Быстрые ответы (chips над композером) */
.quickreplies{display:flex; flex-wrap:wrap; gap:8px;}
/* Композер */
.composer{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surfaceRaised); transition:border-color var(--dur-1);}
.composer:focus-within{border-color:var(--borderStrong);}
.composer textarea{width:100%; resize:none; border:none; background:transparent; color:var(--text); font-size:13.5px; line-height:1.5; padding:12px 14px 4px; outline:none; min-height:24px; max-height:140px;}
.composer textarea::placeholder{color:var(--text3);}
.composer-bar{display:flex; align-items:center; gap:4px; padding:4px 8px 8px;}
.composer-bar .send{margin-left:auto;}
.composer.is-focus-danger{border-color:var(--danger);}
/* Тикет-шапка (support) */
.ticket-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.ticket-head .id-chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); font-family:var(--mono); font-size:12px; color:var(--text2);}
/* Цитата в пузыре */
.quote{display:flex; gap:8px; padding:5px 9px; margin-bottom:6px; border-radius:8px; background:rgba(255,255,255,.045);}
.quote .qbar{width:2px; border-radius:2px; background:var(--accent); flex:0 0 auto;}
.quote .qname{font-size:11.5px; font-weight:600; color:var(--accent);} .quote .qtext{font-size:12px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px;}
/* Код-блок */
.code-block{margin-top:6px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:var(--bg);}
.code-block .cb-head{display:flex; align-items:center; justify-content:space-between; padding:6px 10px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--text3);}
.code-block .cb-body{padding:10px 12px; font-family:var(--mono); font-size:12px; line-height:1.6; color:var(--text2); white-space:pre; overflow-x:auto;}
/* Файл / изображение */
.file-card{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-md); background:var(--surfaceRaised); border:1px solid var(--border); min-width:240px; cursor:pointer;}
.file-card .file-ic{width:36px;height:36px;border-radius:8px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--text2);}
.file-card .file-name{font-size:13px;font-weight:600;} .file-card .file-size{font-size:11.5px;color:var(--text3);}
.image-card{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); width:320px; max-width:100%;}
.image-card .ph{height:170px; display:flex; align-items:center; justify-content:center; color:var(--text3); font-family:var(--mono); font-size:11px;
background:var(--surfaceRaised); background-image:repeating-linear-gradient(45deg,transparent,transparent 9px,rgba(255,255,255,.02) 9px,rgba(255,255,255,.02) 18px);}
/* Печатает… */
.typing{display:inline-flex; align-items:center; gap:5px; padding:11px 14px; border-radius:12px 12px 12px 4px; background:var(--surface); border:1px solid var(--border);}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--text3); animation:ww-blink 1.2s infinite;}
.typing span:nth-child(2){animation-delay:.2s;} .typing span:nth-child(3){animation-delay:.4s;}
@keyframes ww-blink{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
/* === 14 · УТИЛИТЫ ======================================================== */
.row{display:flex; align-items:center; gap:var(--s2);} .row-wrap{flex-wrap:wrap;}
.col{display:flex; flex-direction:column; gap:var(--s2);}
.between{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);}
.grow{flex:1; min-width:0;} .ml-auto{margin-left:auto;} .center{align-items:center; justify-content:center;}
.gap-1{gap:var(--s1);} .gap-2{gap:var(--s2);} .gap-3{gap:var(--s3);} .gap-4{gap:var(--s4);}
.muted{color:var(--text2);} .faint{color:var(--text3);} .danger{color:var(--danger);} .accent{color:var(--accent);}
.hidden{display:none!important;}