/* ── Шрифты: свои файлы, вариативные оси (перенесено из админки 2026-08-28) ──
   ⚠️ У SORA НЕТ КИРИЛЛИЦЫ (Google отдаёт только latin/latin-ext), а кабинет
   держал на ней все заголовки: русские слова рисовались фолбэком, а цифры рядом
   приходили из Sora — внутри одной строки жили два шрифта. Плюс Google Fonts —
   внешняя зависимость у сервиса, которым чинят блокировки: не достучались до
   fonts.gstatic.com, и кабинет садится на системный шрифт.
   Теперь Inter (текст), Manrope (заголовки) и JetBrains Mono лежат рядом с
   кабинетом, каждый ВАРИАТИВНЫЙ: промежуточные веса 560/620/650 наконец
   работают. Подмножества режутся unicode-range — браузер качает только нужное.
   Замена шрифта = новая версия в имени файла (v1 → v2), иначе кеш отдаст старый. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-v1-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-v1-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('assets/fonts/inter-v1-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: 400 800; font-display: swap;
  src: url('assets/fonts/manrope-v1-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/manrope-v1-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: 400 800; font-display: swap;
  src: url('assets/fonts/manrope-v1-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;
}
/* Oswald — узкий «карточный» гротеск для карт серверов (28.08). ⚠️ Взят вместо
   техно-гарнитур вроде Chakra Petch именно из-за КИРИЛЛИЦЫ: у тех её нет, и
   русские имена ветров рисовались бы фолбэком, а цифры рядом — самой гарнитурой
   (та же беда, из-за которой из кабинета ушла Sora). */
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('assets/fonts/oswald-v1-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('assets/fonts/oswald-v1-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: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('assets/fonts/oswald-v1-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 600; font-display: swap;
  src: url('assets/fonts/jbmono-v1-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 600; font-display: swap;
  src: url('assets/fonts/jbmono-v1-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 600; font-display: swap;
  src: url('assets/fonts/jbmono-v1-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;
}

/* ── akonit · личный кабинет · дизайн-система ────────────────────────────────
   Вдохновлено apple.com: много воздуха, плотная типографика, технологичный
   насыщенный синий, мягкие тени, скруглённые «пилюли».                          */
:root {
  --blue:        #0a84ff;   /* технологичный vivid blue */
  --blue-600:    #0066ff;   /* насыщенный для градиента */
  --blue-700:    #0a4fd6;   /* глубокий */
  --blue-50:     #eef4ff;
  --blue-100:    #dbe7ff;
  --ink:         #1d1d1f;   /* near-black */
  --ink-2:       #424245;
  --muted:       #5f5f68;   /* 6.4:1 к белому и 4.7:1 к самому тёмному участку
                              стекла; #86868b давал 3.55:1, #6e6e76 — 3.7:1 на стекле */
  --line:        #e8e8ed;
  --line-2:      #d2d2d7;
  --bg:          #f5f5f7;   /* светло-серый фон */
  --surface:     #ffffff;
  --surface-2:   #fbfbfd;
  --green:       #34c759;
  --amber:       #ff9f0a;
  --red:         #ff3b30;
  --slate:       #a1a1a6;
  /* Лендинговый бренд-синий — только логотип и раздел серверов (остальной кабинет на --blue) */
  --blue-brand:     #1a7fff;
  --blue-brand-50:  #eef5ff;
  --blue-brand-100: #dbe9ff;
  --violet:         #7c6cff;
  --brand-grad:     linear-gradient(100deg, #1a7fff 8%, #4f9bff 55%, #7c6cff 100%);
  --radius:      20px;
  --radius-sm:   12px;
  --shadow:      0 1px 2px rgba(0,0,0,.03), 0 14px 36px -18px rgba(0,20,60,.18);
  --shadow-lg:   0 30px 70px -24px rgba(0,30,80,.30);
  --ring:        0 0 0 4px rgba(10,132,255,.18);
  /* Амбиент-блики фона — постоянный синий фон кабинета; статус его не меняет
     (цвет статуса живёт на плашке профиля, не на фоне). */
  --amb-1:       rgba(10,132,255,.34);
  --amb-2:       rgba(124,108,255,.30);
  --amb-3:       rgba(0,196,255,.22);
  --amb-base:    #e6ecf7;
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --brand:       'Manrope', 'Inter', sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  /* мягкий синий амбиент — постоянный фон кабинета (едва заметный) */
  background:
    radial-gradient(820px 560px at 6% -8%,  var(--amb-1), transparent 55%),
    radial-gradient(760px 600px at 104% 2%, var(--amb-2), transparent 52%),
    radial-gradient(720px 640px at 50% 118%, var(--amb-3), transparent 55%),
    var(--amb-base);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.01em;
}
a { color: inherit; text-decoration: none; }
/* Клавиатурный фокус. Вся навигация кабинета — ссылки и кнопки, поэтому кольцо
   нужно глобально: без него Tab «проваливается» без единого визуального следа. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
button { font-family: inherit; }

/* Заголовки — системный шрифт с плотным трекингом (как у Apple) */
.apps-title, .sec-title, .profile-name, .node-detail-name, .app-detail-name, .crop-title {
  font-family: var(--font); letter-spacing: -.022em;
}

/* ── Кнопки / поля (стеклянные) ──────────────────────────────────────────── */
.btn {
  appearance: none; border: 1px solid rgba(255,255,255,.6);
  /* стеклянный блик сверху + полупрозрачная подложка */
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18) 48%, rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(16px) saturate(165%);
  backdrop-filter: blur(16px) saturate(165%);
  color: var(--ink); font-weight: 500; font-size: 15px; letter-spacing: -.01em;
  padding: 12px 22px; border-radius: 980px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px -12px rgba(20,40,90,.28);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .06s, opacity .2s;
}
.btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.32)); }
/* .btn живёт и на <a> — шаги настройки, «Продолжить», «Открыть в приложении».
   Без display строчному элементу не применятся ни ширина, ни вертикальные поля. */
a.btn { display: inline-block; box-sizing: border-box; text-align: center; text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-primary {
  border-color: rgba(255,255,255,.5); color: #fff;
  /* верхний слой — стеклянный блик, нижний — менее насыщенный синий */
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(58,148,255,.82), rgba(12,108,244,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px -12px rgba(0,40,120,.5),
    0 10px 26px -14px rgba(10,90,255,.45);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(78,162,255,.88), rgba(26,122,250,.88));
}
.btn-ghost { border: none; background: transparent; box-shadow: none; backdrop-filter: none;
  -webkit-backdrop-filter: none; color: var(--muted); }
.btn-ghost:hover { background: rgba(255,255,255,.45); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
/* Кнопка Google: не синяя, но заметная. У базовой .btn фон стеклянный, а рамка
   белая (rgba .6) → на светло-сером фоне карточки терялась. Даём непрозрачную
   белую заливку + видимую рамку + тень-подъём; цвет несёт многоцветная «G». */
.btn-google {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px -14px rgba(20,40,90,.30);
}
.btn-google:hover {
  background: var(--surface);
  border-color: var(--slate);
  box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 12px 26px -14px rgba(20,40,90,.38);
}
.btn-google svg { flex: 0 0 auto; }

.field { position: relative; }
.field > label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  margin: 0 0 7px 2px; letter-spacing: .2px;
}
.input {
  width: 100%; padding: 14px 16px; font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: #b0b0b8; }
.input:focus { border-color: var(--blue); box-shadow: var(--ring); }
/* поле с ошибкой — красная рамка + мягкое свечение */
.input.invalid, .input.invalid:focus {
  border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,59,48,.14);
}

/* ── Поле пароля с кнопкой-«глазиком» ─────────────────────────────────────── */
.pw-field { position: relative; }
.pw-field .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 30px;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); border-radius: 9px;
  transition: color .15s, background .15s;
}
.pw-toggle:hover { color: var(--ink-2); background: var(--surface-2); }
.pw-toggle svg { display: block; }

/* ── Логотип (inline SVG) ────────────────────────────────────────────────── */
.logo { display: block; }
/* Цветок — сине-фиолетовый бренд-градиент как на лендинге (url(#lg) внутри SVG) */
.logo .petal { fill: none; stroke: url(#lg); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round; }
.logo .stem  { stroke: url(#lg); stroke-width: 2.4; stroke-linecap: round; }
.logo .node  { fill: url(#lg); }
.logo .core  { fill: url(#lg); }
.logo .core-ring { fill: none; stroke: url(#lg); stroke-width: 2.6; }

/* раскрытие лепестков */
.logo.bloom .petal-g {
  transform-box: view-box; transform-origin: 100px 100px;
  opacity: 0; animation: bloom .9s cubic-bezier(.34,1.56,.64,1) forwards;
}
.logo.bloom .petal-g:nth-child(1) { animation-delay: .15s; }
.logo.bloom .petal-g:nth-child(2) { animation-delay: .27s; }
.logo.bloom .petal-g:nth-child(3) { animation-delay: .39s; }
.logo.bloom .petal-g:nth-child(4) { animation-delay: .51s; }
.logo.bloom .petal-g:nth-child(5) { animation-delay: .63s; }
.logo.bloom .core-ring { transform-box: view-box; transform-origin: 100px 100px;
  opacity: 0; animation: pop .5s ease-out .02s forwards; }
.logo.bloom .core    { transform-box: view-box; transform-origin: 100px 100px;
  opacity: 0; animation: pop .5s ease-out .12s forwards; }
@keyframes bloom {
  0%   { opacity: 0; transform: scale(.04) rotate(-55deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes pop {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Экран входа ─────────────────────────────────────────────────────────── */
.login-wrap {
  min-height: 100%; display: grid; place-items: center; padding: 32px 20px;
  position: relative;
}
/* Возврат на лендинг (корень сайта) — кабинет висит под /app/, «/» = главная */
.login-home {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  padding: 8px 16px 8px 11px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}
.login-home .back-chev { width: 17px; height: 17px; flex: none; transition: transform .16s ease; }
.login-home:hover { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.login-home:hover .back-chev { transform: translateX(-2px); }
.login-home:active { transform: scale(.97); }
.login-card {
  width: 100%; max-width: 384px; text-align: center;
}
.brand { display: grid; place-items: center; margin-bottom: 6px; }
.brand .wordmark {
  margin-top: 16px; font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 500;
  font-size: 30px; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand .wordmark b { color: inherit; font-weight: 700; }
.login-sub { color: var(--muted); font-size: 14px; margin: 4px 0 26px; }
.login-consent { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2); cursor: pointer; text-align: left; }
.login-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px;
  accent-color: var(--blue); cursor: pointer; }
.login-consent a { color: var(--blue); text-decoration: none; }
.login-consent a:hover { text-decoration: underline; }
.login-hint {
  color: var(--ink-2); font-size: 13.5px; line-height: 1.55; text-align: left;
  margin: 0 0 18px;
}

/* появление формы под логотипом */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .7s ease forwards; }
.login-form .field        { animation-delay: .95s; }
.login-form .field-2      { animation-delay: 1.07s; }
.login-form .btn-primary  { animation-delay: 1.2s; }
.login-form .login-or     { animation-delay: 1.32s; }
.login-form .btn-telegram { animation-delay: 1.44s; }
.login-links.reveal       { animation-delay: 1.56s; }
.login-sub.reveal         { animation-delay: .85s; }
.brand .wordmark.reveal   { animation-delay: .75s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

.login-form { display: grid; gap: 14px; text-align: left; }
.login-form .btn-primary { margin-top: 6px; width: 100%; justify-self: stretch;
  padding: 13px; font-size: 15px; }
.login-error {
  min-height: 18px; font-size: 13px; color: var(--red); font-weight: 500;
  margin-top: 2px; text-align: center;
}

/* ── Разделитель «или» + кнопка «Войти через Telegram» ───────────────────── */
.login-or {
  display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 12.5px; margin: 2px 0;
  animation-delay: 1.32s;
}
.login-or::before, .login-or::after {
  content: ''; height: 1px; flex: 1; background: var(--line-2);
}
.btn-telegram {
  width: 100%; justify-self: stretch; display: inline-flex;
  align-items: center; justify-content: center; gap: 9px;
  border-color: rgba(255,255,255,.5); color: #fff; padding: 13px; font-size: 15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(70,186,238,.82), rgba(42,166,220,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px -12px rgba(0,70,110,.45),
    0 10px 24px -14px rgba(34,158,217,.45);
  animation-delay: 1.44s;
}
.btn-telegram:disabled { opacity: .6; }
.btn-telegram:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(92,200,248,.88), rgba(58,180,234,.88));
}
.btn-telegram svg { flex: 0 0 auto; }

/* Ряд социальных кнопок входа: Telegram (синяя) + Email (стеклянная) поровну. */
.login-social { display: flex; gap: 10px; align-items: stretch; }
.login-form .login-social { animation-delay: 1.44s; }
.login-social .btn {
  flex: 1 1 0; width: auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; font-size: 15px;
}
/* Перебиваем глобальное .btn + .btn (margin-top для вертикального стека) в ряду. */
.login-card .login-social .btn + .btn { margin-top: 0; }
/* Наша кнопка Email — синяя заливка в духе Telegram, но в брендовом синем. */
.btn-email {
  border-color: rgba(255,255,255,.5); color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(56,150,255,.88), rgba(10,132,255,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 18px -12px rgba(0,48,120,.45),
    0 10px 24px -14px rgba(10,132,255,.5);
}
.btn-email:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(74,165,255,.92), rgba(31,141,255,.92));
}
.btn-email svg { flex: 0 0 auto; color: #fff; }

/* ── Ссылки под формой ───────────────────────────────────────────────────── */
.login-links {
  margin-top: 16px; font-size: 13.5px; color: var(--muted); text-align: center;
}
.login-links a { color: var(--blue); cursor: pointer; }
/* Две ссылки колонками под кнопками Telegram | Email — каждая по центру своей кнопки. */
.login-links.split { display: flex; gap: 10px; }
.login-links.split a { flex: 1 1 0; text-align: center; }
.login-links a:hover { text-decoration: underline; }
.login-links .dot { margin: 0 8px; color: var(--line-2); }
/* Неактивная ссылка (напр. «Отправить повторно» на кулдауне). */
.login-links a.disabled { color: var(--muted); cursor: default; pointer-events: none; }
.login-links a.disabled:hover { text-decoration: none; }

/* Поле ввода кода из письма — крупное, моноширинное, с трекингом. */
.code-input {
  text-align: center;
  font-size: 26px;
  letter-spacing: .5em;
  font-variant-numeric: tabular-nums;
  padding-left: .5em; /* компенсация трекинга последнего символа */
  font-weight: 600;
}

/* ── Капча ───────────────────────────────────────────────────────────────── */
.captcha-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.captcha-img {
  height: 56px; width: auto; border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); background: var(--surface-2); flex: 1; object-fit: contain;
}
.captcha-refresh { font-size: 18px; padding: 8px 12px; flex: 0 0 auto; line-height: 1; }

/* ── Код восстановления ──────────────────────────────────────────────────── */
.recovery-warn {
  font-size: 13px; color: var(--ink-2); text-align: left; line-height: 1.5;
  background: #fff8ed; border: 1px solid #f6dcae; border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 14px;
}
.recovery-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 16px; text-align: left;
}
.rec-word {
  display: flex; align-items: baseline; gap: 8px; padding: 9px 11px;
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); font-weight: 600; color: var(--ink);
}
.rec-word i { color: var(--muted); font-style: normal; font-size: 11px; min-width: 14px; }
.login-card .recovery-box + .btn { width: 100%; }
.login-card .btn + .btn { margin-top: 10px; width: 100%; }

/* ── Кабинет: топбар ─────────────────────────────────────────────────────── */
.cab-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.cab-topbar .brand-row {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
}
/* Вордмарк как в шапке лендинга: Montserrat 500, разрядка, синий→фиолетовый градиент */
.cab-topbar .cab-title {
  font-family: 'Montserrat', 'Inter', sans-serif; font-weight: 500; font-size: 16.5px;
  text-transform: uppercase; letter-spacing: .16em;
  background: linear-gradient(100deg, #1a7fff 8%, #4f9bff 55%, #7c6cff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cab-topbar .spacer { flex: 1; }
.cab-user { color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.cab-nav { display: flex; gap: 4px; margin-left: 18px; }
.cab-navlink {
  padding: 7px 13px; border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.cab-navlink:hover { background: var(--surface-2); color: var(--ink); }
.cab-navlink.active { background: var(--blue-50); color: var(--blue); }

/* ── Профиль ─────────────────────────────────────────────────────────────── */
/* Шапка без карточки: личность — не объект управления, ей не нужна рамка.
   Аватар 72px вместо 104 — фото меняют раз в жизни, первый экран не про него. */
.prof-head { text-align: center; padding: 6px 0 18px; }
.avatar-wrap { position: relative; width: 72px; height: 72px; margin: 0 auto 12px; }
.avatar {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-family: var(--brand); font-weight: 700;
  font-size: 28px; color: #fff;
  background: linear-gradient(155deg, #2b95ff, var(--blue-700));
  box-shadow: 0 10px 22px -12px rgba(10,90,255,.55);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-edit {
  position: absolute; right: -2px; bottom: 0; width: 26px; height: 26px; padding: 0;
  border-radius: 50%; background: var(--blue); color: #fff; border: 2px solid var(--bg);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(26,127,255,.55); transition: background .15s;
}
.avatar-edit:hover { background: var(--blue-600); }
.avatar-edit svg { width: 13px; height: 13px; }
.avatar-msg { min-height: 16px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ── Окно кропа фото ──────────────────────────────────────────────────────── */
.crop-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: rgba(12,20,36,.55); padding: 20px;
  animation: modal-fade .15s ease;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.crop-modal {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 20px; width: min(340px, 92vw); text-align: center;
}
.crop-title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 14px; }
.crop-stage {
  position: relative; margin: 0 auto 16px; border-radius: 14px; overflow: hidden;
  background: #0c1424; touch-action: none;
}
.crop-canvas { display: block; cursor: grab; }
.crop-canvas:active { cursor: grabbing; }
/* прозрачный предпросмотр круга: затемняем всё, кроме центрального круга */
.crop-mask { position: absolute; inset: 0; pointer-events: none; }
.crop-mask::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(12,20,36,.5); border: 2px solid rgba(255,255,255,.85);
}
.crop-zoom { width: 100%; margin-bottom: 16px; accent-color: var(--blue); }
.crop-actions { display: flex; gap: 10px; }
.crop-actions .btn { flex: 1; padding: 12px; }
.profile-name { font-family: var(--brand); font-size: 20px; font-weight: 700; color: var(--ink); }
.profile-handle { color: var(--muted); font-size: 14px; margin-top: 3px; }
.prof-out { margin-top: 26px; display: grid; }
/* Слот баннера с зарезервированной высотой: он наполняется асинхронно и стоит
   выше всего контента — без резерва его появление сдвигало бы весь экран. */
.slot-banner:empty { min-height: 0; }

/* ── Секции и карточки-списки (общий кирпич кабинета) ─────────────────────── */
.sec-label {
  margin: 26px 2px 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.list-card { overflow: hidden; }   /* заливка — на стеклянном слое ниже */
.list-card:empty { min-height: 64px; }

/* Разделитель — не сплошная серая линия (на стекле она читается как наклейка),
   а полупрозрачная пара «тень + блик»: так шов выглядит частью самой панели. */
.row-link, .row-static, .row-action {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 14px 16px; border: none;
  border-top: 1px solid rgba(120,145,185,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  background: transparent; font: inherit; color: var(--ink); text-decoration: none;
}
.row-link:first-child, .row-static:first-child, .row-action:first-child {
  border-top: none; box-shadow: none;
}
.row-link, .row-action { cursor: pointer; transition: background .15s; }
.row-link:hover, .row-action:hover { background: rgba(255,255,255,.45); }
.row-link:active, .row-action:active { background: rgba(10,132,255,.09); }
.row-ico {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-sm); color: var(--blue);
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(10,132,255,.12));
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -3px rgba(10,90,255,.35);
}
.row-ico svg { width: 20px; height: 20px; }
.row-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.row-t { font-weight: 600; font-size: 15px; color: var(--ink); }
.row-d { font-size: 13px; line-height: 1.4; color: var(--muted); }
.row-k { flex: 1; color: var(--muted); font-size: 14px; }
.row-v { font-weight: 600; font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.row-v.ok { color: var(--green); display: inline-flex; align-items: center; gap: 6px; }
.row-v.link { color: var(--blue); }

.connect-actions { display: grid; gap: 10px; margin-top: 18px; }
.connect-actions .btn { width: 100%; padding: 13px; font-size: 15px; }

/* Мягкая красная — только для действительно опасного (снос данных, отказ от
   запасного входа). Выход из аккаунта к таким НЕ относится: он ничего не рушит. */
.btn-soft-danger { color: var(--red); background: rgba(255,59,48,.10); border-color: rgba(255,59,48,.26); }
.btn-soft-danger:hover { background: rgba(255,59,48,.16); border-color: rgba(255,59,48,.45); }

/* Выход ничего не разрушает — красный тут значил бы «потеряешь данные». */
.btn-quiet {
  color: var(--ink-2); background: transparent; border-color: var(--line-2);
}
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.acct-del { margin-top: 8px; }
.acct-del svg { width: 15px; height: 15px; }
.acct-del[hidden] { display: none; }


/* Подтверждение удаления фото (в строке-сообщении) */
.avatar-del-ask { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--ink-2); font-size: 13px; }
.avatar-del-yes, .avatar-del-no {
  font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer;
  padding: 5px 13px; border-radius: 980px; border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .06s;
}
.avatar-del-yes { color: #fff; background: linear-gradient(180deg, #ff5a52, #e5322b);
  box-shadow: 0 6px 16px -10px rgba(229,50,43,.85); }
.avatar-del-yes:hover { background: linear-gradient(180deg, #ff6b63, #ef3a33); }
.avatar-del-no { color: var(--ink-2); background: var(--surface-2); border-color: var(--line-2); }
.avatar-del-no:hover { background: #ececf0; }
.avatar-del-yes:active, .avatar-del-no:active { transform: scale(.96); }

/* точка статуса (вместо эмодзи) */
.dot-ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); margin-right: 7px; vertical-align: middle; }

/* ── Геймификация «Глубина сети» ───────────────────────────────────────────────
   Статус окрашивает плашку профиля, ободок аватара и бейдж под именем. Фон
   кабинета, кнопки и бренд остаются синими — минимализм не ломается. Значение
   приходит в data-status на <body> (см. api.js). --star — акцент, --star-2 —
   второй стоп ободка, --star-glow — мягкое свечение плашки. */
body[data-status="guest"]     { --star: #8e8e93; --star-2: #c3c3c8; --star-glow: rgba(142,142,147,.5); }
body[data-status="signal"]    { --star: #0a84ff; --star-2: #7cbcff; --star-glow: rgba(10,132,255,.5); }
body[data-status="echo"]      { --star: #00b5d8; --star-2: #7fe4f7; --star-glow: rgba(0,181,216,.5); }
body[data-status="glitch"]    { --star: #00c08e; --star-2: #79ecc9; --star-glow: rgba(0,192,142,.5); }
body[data-status="mirage"]    { --star: #69bd12; --star-2: #c2f07a; --star-glow: rgba(105,189,18,.5); }
body[data-status="shade"]     { --star: #e2921a; --star-2: #ffd98a; --star-glow: rgba(226,146,26,.5); }
body[data-status="phantom"]   { --star: #ff5c8a; --star-2: #ffb3cb; --star-glow: rgba(255,92,138,.5); }
body[data-status="wraith"]    { --star: #ff2d95; --star-2: #ff96cd; --star-glow: rgba(255,45,149,.5); }
body[data-status="daemon"]    { --star: #a855f7; --star-2: #d8b4fe; --star-glow: rgba(168,85,247,.5); }
body[data-status="legend"]    { --star: #8b7bff; --star-2: #ffd36e; --star-glow: rgba(139,123,255,.5); }


/* Ободок вокруг аватара — рисуется только когда статус выдан */
body[data-status] .avatar-wrap::before {
  content: ''; position: absolute; inset: -8px; border-radius: 50%; z-index: 0;
  background: conic-gradient(from 220deg, var(--star), var(--star-2), var(--star));
  box-shadow: 0 0 34px -6px var(--star-glow);
}
body[data-status] .avatar {
  position: relative; z-index: 1;
  box-shadow: 0 0 0 3px #fff, 0 10px 26px -8px var(--star-glow);
}
.avatar-edit { z-index: 2; }

/* Бейдж-статус под именем (в профиле) */
.star-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 5px 13px 5px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--star, var(--blue));
  background: color-mix(in srgb, var(--star, var(--blue)) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--star, var(--blue)) 32%, transparent);
  box-shadow: 0 4px 14px -9px var(--star-glow, transparent);
}
.star-badge svg { width: 13px; height: 13px; }

/* Шкала ступеней: непрерывная полоса, залитая до текущей ступени. Ни числа, ни
   остатка до следующей — видно только «где я на лестнице». */
.rank-scale {
  height: 8px; border-radius: 999px; overflow: hidden; margin-top: 10px;
  background: rgba(20,40,90,.09);
}
.rank-scale i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--star, var(--blue)) 45%, transparent), var(--star, var(--blue)));
  box-shadow: 0 0 12px -2px var(--star-glow, transparent);
}

/* Карточка звания в профиле: название, подпись ступени и шкала. Ни очков, ни
   «осталось N до следующей» — подниматься пока негде, и это часть замысла. */
.rank-plate { padding: 16px 18px; }
.rank-plate-head { display: flex; align-items: center; gap: 10px; }
.rank-plate-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: conic-gradient(from 220deg,
    var(--star, var(--blue)), var(--star-2, var(--blue-100)), var(--star, var(--blue)));
  box-shadow: 0 0 14px -3px var(--star-glow, transparent);
}
.rank-plate-name {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--star, var(--blue));
}
.rank-plate-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.rank-plate .rank-scale { margin-top: 14px; }

/* Плашка прогресса «до следующего уровня». --star задаётся инлайн = цвет цели
   (следующего уровня), поэтому бар и подпись окрашены в него. */
.level-card {
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 46px -24px rgba(15,35,90,.34);
  padding: 16px 18px; margin-bottom: 18px;
}
.lvl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lvl-k { color: var(--muted); font-size: 13px; font-weight: 600; }
.lvl-next {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--star, var(--blue)); font-weight: 700; font-size: 14px;
}
.lvl-next svg { width: 14px; height: 14px; }
.lvl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--star, var(--blue));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lvl-bar { height: 8px; border-radius: 999px; background: rgba(20,40,90,.09);
  overflow: hidden; margin: 12px 0 8px; }
.lvl-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--star) 55%, #fff), var(--star));
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--star) 70%, transparent);
  transition: width .5s ease;
}
.lvl-need { color: var(--muted); font-size: 12.5px; }
.lvl-need b { color: var(--ink); font-variant-numeric: tabular-nums; }
.level-card.is-max .lvl-bar { margin-bottom: 0; }

/* Реферальная карточка (профиль, под плашкой прогресса) */
.ref-card { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; }
.ref-head { display: flex; align-items: flex-start; gap: 12px; }
.ref-ico { margin-top: 1px; }
.ref-ico {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--blue-50); color: var(--blue);
}
.ref-ico svg { width: 19px; height: 19px; }
.ref-meta { flex: 1; min-width: 0; }
.ref-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.ref-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
/* Выделенная кнопка копирования реф-ссылки — синий стеклянный акцент */
.ref-copy {
  width: 100%; margin-top: 14px; padding: 12px; font-size: 14.5px; font-weight: 600;
  color: var(--blue); border-color: var(--blue-100);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.16) 48%, rgba(255,255,255,.05)),
    linear-gradient(180deg, rgba(10,132,255,.13), rgba(10,132,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 20px -12px rgba(10,110,255,.5);
}
.ref-copy:hover {
  border-color: var(--blue);
  background:
    linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,.22) 48%, rgba(255,255,255,.07)),
    linear-gradient(180deg, rgba(10,132,255,.2), rgba(10,132,255,.1));
}

/* Страница «Приглашённые» (#/referrals) */
.ref-people { display: flex; flex-direction: column; gap: 10px; }
.ref-person {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-radius: 16px;
}
.ref-p-ava {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  color: #fff; background: linear-gradient(135deg, #6ab2ff, var(--blue));
}
.ref-p-meta { flex: 1; min-width: 0; }
.ref-p-name {
  font-weight: 650; font-size: 14.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ref-p-date { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* ── Экран #/account ──────────────────────────────────────────────────────── */
.acct-card { border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.acct-title { font-weight: 700; font-size: 15.5px; color: var(--ink); }
.acct-desc { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 3px 0 14px; }
.acct-card .field { margin-bottom: 12px; }
.acct-msg { min-height: 16px; font-size: 12.5px; color: var(--red); margin: 2px 0 10px; }
.acct-msg.ok { color: var(--green); }
.acct-save { width: 100%; padding: 12px; font-size: 14.5px; }
.acct-actions2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-actions2 .btn { padding: 12px; }
.acct-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 2px 4px 0; text-align: center; }

.acct-item { display: flex; align-items: center; gap: 12px; }
.acct-card .acct-title + .acct-item { margin-top: 14px; }
.acct-ico { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: var(--blue-50); color: var(--blue); }
.acct-ico.tg { background: #e8f3ff; color: #229ED9; }
.acct-ico svg { width: 19px; height: 19px; }
.acct-meta { flex: 1; min-width: 0; }
.acct-k { color: var(--muted); font-size: 12px; }
.acct-v { font-weight: 600; font-size: 14.5px; color: var(--ink); word-break: break-all; }
.acct-v.muted { color: var(--muted); font-weight: 500; }
.acct-badge {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.acct-badge.ok { color: var(--green); background: rgba(52,199,89,.10); border-color: rgba(52,199,89,.28); }
.acct-badge.warn { color: #b45309; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.32); }
.acct-item + .acct-save { margin-top: 14px; }
.acct-soon { opacity: .85; }

/* ── Нижняя навигация (Профиль / Сообщество / Серверы) ────────────────────── */
.cab-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.bnav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1 1 0; max-width: 128px;
  padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--muted); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  transition: color .15s, background .15s;
}
.bnav-item:hover { color: var(--ink); }
.bnav-item.active { color: var(--blue); background: var(--blue-50); }
.bnav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1.5px solid transparent; display: block; }
.bnav-avatar.active { border-color: var(--blue); }
/* Бейдж очереди модерации на вкладке «Сообщество» (только у админа) */
.bnav-badge {
  position: absolute; top: 2px; left: 50%; margin-left: 4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px;
  text-align: center; box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}

/* ── Кабинет: контейнер и секции ─────────────────────────────────────────── */
.cab-container { max-width: 560px; margin: 0 auto; padding: 26px 20px 96px; }
.sec-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 2px 14px; }
.sec-title { font-family: var(--brand); font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.sec-count {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums;
}
.cab-loading, .cab-empty { color: var(--muted); font-size: 14px; padding: 20px 4px; text-align: center; }

/* ── Кабинет: список серверов (отдельные карточки в серых рамках) ─────────── */
.node-list { display: grid; gap: 10px; }
.node-item {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  cursor: pointer; transition: border-color .18s, box-shadow .2s, transform .06s;
}
.node-item:hover { border-color: #c2c2c9; box-shadow: var(--shadow); }
.node-item:active { transform: scale(.99); }
.node-item-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15.5px;
  color: var(--ink); letter-spacing: -.012em; }
/* Шеврон — SVG (а не текстовый «›»): у символа кегль и базовая линия гуляют
   между шрифтами, рядом со штриховыми иконками это заметно. */
.node-chev { flex: 0 0 auto; width: 18px; height: 18px; color: var(--slate);
  transition: transform .15s, color .15s; }
.node-item:hover .node-chev { color: var(--blue); transform: translateX(2px); }
.row-link:hover .node-chev, .row-action:hover .node-chev { color: var(--blue); transform: translateX(2px); }
.warn-plate .node-chev { color: var(--amber); }

/* флаг — скруглённая картинка с тонкой рамкой (фолбэк: код страны) */
.flag-wrap { flex: 0 0 auto; width: 30px; height: 22px; display: block; }
.flag {
  width: 30px; height: 22px; border-radius: 5px; object-fit: cover; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}
.flag-fb {
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .3px;
}

/* ── Кабинет: возврат + шапка ноды ───────────────────────────────────────── */
.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-size: 14px; font-weight: 600;
  cursor: pointer; margin-bottom: 16px;
  padding: 7px 15px 7px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease;
}
.back-link .back-chev { width: 17px; height: 17px; flex: none; transition: transform .16s ease; }
.back-link:hover { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.back-link:hover .back-chev { transform: translateX(-2px); }
.back-link:active { transform: scale(.97); }
.node-detail-head {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 22px;
}
.node-detail-head .flag-wrap { width: 40px; height: 29px; }
.node-detail-head .flag { width: 40px; height: 29px; border-radius: 7px; }
.node-detail-name { font-family: var(--font); font-size: 21px; font-weight: 700;
  color: var(--ink); letter-spacing: -.022em; }

/* ── Кабинет: список сервисов ────────────────────────────────────────────── */
.svc-list {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.svc-item { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-top: 1px solid var(--line); }
.svc-item:first-child { border-top: none; }
.svc-ico {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--blue-50); border-radius: 11px; color: var(--blue);
}
.svc-ico svg { width: 19px; height: 19px; }
.svc-name { font-weight: 600; font-size: 14.5px; color: var(--ink); }

/* ── Кабинет: бейдж нагрузки ноды (Низкая/Средняя/Высокая) ────────────────── */
.load-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 650; letter-spacing: -.01em;
  padding: 3px 10px 3px 8px; border-radius: 999px;
}
.load-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.load-low  { color: #1f8f42; background: rgba(52,199,89,.12); }
.load-low  .load-dot { background: var(--green); }
.load-med  { color: #b56a00; background: rgba(255,159,10,.15); }
.load-med  .load-dot { background: var(--amber); }
.load-high { color: #c62a22; background: rgba(255,59,48,.12); }
.load-high .load-dot { background: var(--red); }
/* Легенда нагрузки над списком серверов — расшифровка цветов бейджей */
.load-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: -8px 0 16px;
}
.load-legend-lbl { font-size: 13px; font-weight: 600; color: var(--muted); }

/* строка списка: имя + подстрока с нагрузкой в колонку */
.node-item-main { flex: 1; min-width: 0; }
.node-item-sub { margin-top: 5px; }
/* шапка ноды: имя + бейдж нагрузки */
.node-detail-meta { display: flex; flex-direction: column; gap: 9px;
  align-items: flex-start; min-width: 0; }

/* ── Кабинет: сетка разблокировки сервисов (бренд-иконки) ─────────────────── */
.av-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.av-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 14px 8px 11px; text-align: center;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.av-logo { width: 32px; height: 32px; object-fit: contain; display: block; }
.av-fb {
  display: grid; place-items: center; border-radius: 8px;
  background: var(--blue-50); color: var(--blue); font-weight: 700; font-size: 15px;
}
.av-name {
  max-width: 100%; font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-st { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; }
.av-mark { font-weight: 800; }
.av-region { font-size: 12px; }
.av-ok { border-color: #bfe8cd; }
.av-ok .av-st { color: var(--green); }
.av-blocked .av-logo { filter: grayscale(1); opacity: .4; }
.av-blocked .av-st { color: var(--red); }
.av-unknown .av-logo { filter: grayscale(.6); opacity: .55; }
.av-unknown .av-st { color: var(--muted); }

/* ── Онбординг: витрина клиентов ─────────────────────────────────────────── */
.apps-intro { margin: 4px 2px 18px; }
.apps-title { font-family: var(--brand); font-size: 22px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.apps-desc { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.client-grid {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.client-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-top: 1px solid var(--line); cursor: pointer; transition: background .15s;
}
.client-card:first-child { border-top: none; }
.client-card:hover { background: var(--blue-50); }
.client-logo-wrap { flex: 0 0 auto; width: 48px; height: 48px; }
.client-logo-wrap.big { width: 80px; height: 80px; margin: 0 auto 14px; }
.client-logo {
  width: 100%; height: 100%; border-radius: 13px; object-fit: cover;
  border: 1px solid var(--line-2); box-shadow: 0 2px 6px -2px rgba(16,24,40,.18);
}
.client-logo-fb {
  width: 100%; height: 100%; border-radius: 13px; place-items: center;
  background: var(--blue-50); color: var(--blue); font-family: var(--brand);
  font-weight: 700; font-size: 22px;
}
.client-meta { flex: 1; min-width: 0; }
.client-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.client-sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.apps-continue { width: 100%; margin-top: 18px; padding: 13px; font-size: 15px; }

/* ── Клиент: шапка + кнопки скачивания ───────────────────────────────────── */
.app-detail-head {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 22px; margin-bottom: 22px; text-align: center;
}
.app-detail-name { font-family: var(--brand); font-size: 22px; font-weight: 700; color: var(--ink); }
.app-detail-desc { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.dl-list {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.dl-btn {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  border-top: 1px solid var(--line); cursor: pointer; transition: background .15s; color: var(--ink);
}
.dl-btn:first-child { border-top: none; }
.dl-btn:hover { background: var(--blue-50); }
.dl-ico {
  flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
  font-size: 18px; background: var(--blue-50); border-radius: 10px;
}
.dl-label { flex: 1; font-weight: 600; font-size: 14.5px; }

/* ── Клиент: плитки выбора устройства (иконки вместо текста) ──────────────── */
.dev-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 12px;
}
.dev-tile {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 12px 18px; text-align: center; color: var(--ink);
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-sm);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 18px 46px -24px rgba(15,35,90,.34),
    0 0 0 1px rgba(120,145,185,.10);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dev-tile:hover {
  transform: translateY(-3px); border-color: rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 26px 54px -22px rgba(15,45,110,.42),
    0 0 0 1px rgba(120,145,185,.14);
}
.dev-tile:active { transform: translateY(-1px); }
.dev-ico {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 17px; color: #fff; box-shadow: 0 8px 18px -8px rgba(16,24,40,.5);
}
.dev-ico svg { width: 30px; height: 30px; display: block; }
.dev-name { font-family: var(--brand); font-weight: 600; font-size: 14.5px; }
/* бренд-акценты чипов устройств */
.dev-ios     .dev-ico { background: linear-gradient(160deg, #3a3a3c, #1d1d1f); }
.dev-android .dev-ico { background: linear-gradient(160deg, #43e08a, #12b76a); }
.dev-windows .dev-ico { background: linear-gradient(160deg, #2aa4ff, #0a84ff); }

/* ── Кабинет: создание подписки (крутящийся цветок) ──────────────────────── */
.prov-loader {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 60px 0 12px;
}
.prov-loader .logo {
  margin-bottom: 18px; transform-origin: center;
  animation: prov-spin 7s linear infinite; will-change: transform;
}
/* отключаем покадровое раскрытие лепестков — крутим весь цветок целиком */
.prov-loader .logo.bloom .petal-g,
.prov-loader .logo.bloom .core,
.prov-loader .logo.bloom .core-ring { opacity: 1; animation: none; transform: none; }
.prov-loader.failed .logo { animation: none; }
.prov-cur { font-family: var(--brand); font-weight: 600; font-size: 17px; color: var(--ink); margin: 6px 0 8px; }
.prov-hint { color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
@keyframes prov-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .cab-topbar { padding: 12px 16px; }
  .cab-container { padding: 20px 14px 92px; }
  /* Экран входа: не центрируем карточку вертикально и резервируем место сверху,
     иначе на низких экранах логотип наезжает на absolute-кнопку «На главную» */
  .login-wrap { align-items: start; padding-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo.bloom .petal-g, .logo.bloom .core, .logo.bloom .core-ring,
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── Frosted glass (apple-стиль): полупрозрачные панели с blur ─────────────── */
.login-card, .list-card, .hero, .node-item, .client-grid,
.svc-list, .dl-list, .app-detail-head, .node-detail-head, .adm-user, .ref-card, .ref-person,
.acct-card, .prop-card, .mod-card, .seg-type, .comm-done {
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 18px 46px -24px rgba(15,35,90,.34),
    0 0 0 1px rgba(120,145,185,.10);
}
.login-card { padding: 34px 26px; border-radius: 28px; }
.node-item:hover {
  background: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 22px 50px -22px rgba(15,45,110,.4),
    0 0 0 1px rgba(120,145,185,.12);
}
/* топбар и нижняя навигация — более выраженное стекло */
.cab-topbar, .cab-bottomnav {
  background: rgba(244,247,251,.62);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
  backdrop-filter: blur(24px) saturate(185%);
}
/* Карточки «Главной» — плотнее остального стекла: под ними течёт canvas «нитей»,
   и при .58 фон просвечивает сквозь текст и «дрожит» на периферии зрения.
   Стеклянность (блюр, блик, рамка) остаётся — уходит только шум под буквами.

   Читаемость поверх движущихся «нитей» держим НЕ непрозрачностью (от неё стекло
   умирает и карточка становится плоской белой плашкой), а глубоким блюром: он
   размазывает нити в мягкую заливку, и текст перестаёт «дрожать», при этом фон
   продолжает просвечивать и играть. Плюс два блика — верхний specular и нижний
   отражённый, — которые и читаются глазом как толщина стекла. */
.hero, .list-card {
  position: relative;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  /* brightness тут — главный «забеливатель»: он осветляет ВЕСЬ фон под панелью,
     поэтому держим его чуть выше единицы. Прозрачность даёт связка низкой альфы
     и умеренного блюра, а не подсветка. */
  -webkit-backdrop-filter: blur(15px) saturate(190%) brightness(1.02);
  backdrop-filter: blur(15px) saturate(190%) brightness(1.02);
  border: 1px solid rgba(255,255,255,.34);
  /* Кант по всем четырём сторонам с разным весом: верх ярче, низ слабее, бока
     ещё слабее. Именно эта асимметрия читается как толщина и как свет, упавший
     сверху; одинаковая рамка по периметру даёт плоский матовый пластик. */
  box-shadow:
    inset 0  1px 1px rgba(255,255,255,.80),
    inset 0 -1px 1px rgba(255,255,255,.42),
    inset  1px 0 1px rgba(255,255,255,.26),
    inset -1px 0 1px rgba(255,255,255,.26),
    0 1px 2px rgba(16,32,72,.05),
    0 22px 46px -26px rgba(15,40,95,.42);
}
/* Диагональный глянец — свет, скользнувший по выпуклой поверхности. Режим
   screen (а не обычная белая заливка) осветляет фон, не забеливая его: под
   бликом по-прежнему виден рисунок, что и отличает стекло от молочной плёнки. */
.hero::before, .list-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(135deg,
    rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 24%,
    transparent 52%, transparent 84%, rgba(255,255,255,.12) 100%);
}
/* Фаска: узкая полоса по периметру, где фон преломляется ИНАЧЕ, чем в центре
   (свой backdrop-filter, вырезанный маской в рамку через mask-composite). Именно
   разница между краем и серединой читается как толщина стекла — у плёнки такой
   разницы нет. Настоящее рефракционное искажение (SVG feDisplacementMap внутри
   backdrop-filter) даёт только Chromium и требует пересборки карты смещений на
   каждый ресайз — для кабинета оно того не стоит, этот приём кросс-браузерный. */
.hero::after, .list-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; padding: 7px;
  -webkit-backdrop-filter: blur(5px) brightness(1.09) saturate(155%);
  backdrop-filter: blur(5px) brightness(1.09) saturate(155%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hero > *, .list-card > * { position: relative; z-index: 1; }

/* строки внутри стеклянных панелей — прозрачны; hover — лёгкий синий тинт */
.row-static, .row-link, .row-action, .svc-item, .dl-btn, .client-card { background: transparent; }
.dl-btn:hover, .client-card:hover { background: rgba(10,132,255,.07); }

/* ── Админ: выдача статусов «Свет звезды» ─────────────────────────────────── */
.admin-search { margin: 0 0 14px; }
.admin-intro { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 2px 14px; }
.admin-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 2px 18px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.leg-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.admin-results { display: grid; gap: 12px; }
.adm-user { padding: 14px 15px; }
.adm-user-head { display: flex; align-items: center; gap: 12px; }
.adm-avatar {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--brand); font-weight: 700; font-size: 16px;
  color: #fff; background: linear-gradient(155deg, #2b95ff, var(--blue-700));
}
.adm-user-meta { flex: 1; min-width: 0; }
.adm-user-name { font-weight: 600; font-size: 15px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user-sub { color: var(--muted); font-size: 12px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-cur { flex: 0 0 auto; }
.adm-cur-none { font-size: 12px; color: var(--slate); font-weight: 600; white-space: nowrap; }
.adm-picker {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.adm-sw {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  transition: border-color .15s, background .15s, box-shadow .2s, transform .06s;
}
.adm-sw:hover { border-color: #c2c2c9; }
.adm-sw:active { transform: scale(.97); }
.adm-sw .sw-dot {
  width: 14px; height: 14px; border-radius: 50%; background: currentColor;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.adm-sw.active { border-color: currentColor; background: color-mix(in srgb, currentColor 13%, #fff);
  box-shadow: 0 4px 14px -9px currentColor; }
.adm-sw.sw-none { color: var(--muted); }
.adm-sw.sw-none .sw-dot {
  background: repeating-linear-gradient(45deg, #e6e6ea, #e6e6ea 3px, #fff 3px, #fff 6px);
}
.adm-busy { opacity: .55; pointer-events: none; }

/* Степпер очков в карточке админки */
.adm-points { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.adm-points-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.pt-btn {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  font-size: 17px; line-height: 1; display: grid; place-items: center;
  transition: border-color .15s, background .15s, transform .06s;
}
.pt-btn:hover { border-color: #c2c2c9; }
.pt-btn:active { transform: scale(.94); }
.pt-in {
  width: 74px; padding: 7px 10px; font-size: 14px; font-weight: 700; text-align: center;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 9px; outline: none; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.pt-in:focus { border-color: var(--blue); box-shadow: var(--ring); }
.pt-in::-webkit-outer-spin-button, .pt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Passwordless-входы, гейт безопасности, привязка Telegram ─────────────── */
.login-methods { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
/* Иконка + текст в одну центрированную строку — иначе SVG садится на baseline
   и визуально «съезжает» относительно надписи (email/фраза без своего flex). */
.login-methods .btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.login-methods .btn svg { flex: 0 0 auto; }

/* Мелкая инлайн-кнопка в строках аккаунта/гейта (Привязать / Добавить). */
.btn-inline {
  flex: 0 0 auto; border: 1px solid var(--blue); color: var(--blue);
  background: var(--blue-50); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-inline:hover { background: var(--blue-100); }

/* Баннер режима Б в профиле. */
.sec-banner {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding: 13px 15px; border-radius: var(--radius-sm); cursor: pointer;
  background: rgba(255,159,10,.10); border: 1px solid rgba(255,159,10,.30);
}
.sec-banner:hover { background: rgba(255,159,10,.16); }
.sec-banner-ico { font-size: 20px; flex: 0 0 auto; }
.sec-banner-tx { flex: 1; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.sec-banner-tx b { color: var(--ink); }

/* Экран-гейт #/secure. */
.secure-hero { text-align: center; margin: 8px 0 18px; }
.secure-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.secure-hero .sec-title { justify-content: center; }

/* ── Экран выбора при слиянии двух подписок (#/merge) ────────────────────────── */
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 8px; }
@media (max-width: 520px) { .mc-grid { grid-template-columns: 1fr; } }
.mc-card {
  position: relative; text-align: left; cursor: pointer; width: 100%;
  padding: 16px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.58);
  -webkit-backdrop-filter: blur(20px) saturate(175%);
  backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: border-color .15s, box-shadow .15s, transform .05s;
}
.mc-card:hover { border-color: var(--blue); }
.mc-card:active { transform: scale(.99); }
.mc-card:disabled { opacity: .55; cursor: default; }
.mc-card.rec { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), inset 0 1px 0 rgba(255,255,255,.6); }
.mc-rec {
  position: absolute; top: 10px; right: 10px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--blue);
  padding: 3px 8px; border-radius: 999px;
}
.mc-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 10px; padding-right: 88px; }
.mc-facts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mc-fact { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink); word-break: break-all; }
.mc-fact svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mc-fact.muted { color: var(--muted); }
.mc-meta { font-size: 12.5px; color: var(--muted); }

/* ── «Сообщество»: доска предложений/багов + голосование ──────────────────── */
.comm-intro { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 2px 16px; }
.comm-top { display: flex; gap: 10px; margin-bottom: 16px; }
.comm-top .btn { flex: 1 1 auto; }
.comm-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 2px 0; text-align: center; }
/* Карточка суточной квоты форм (антиабуз): остаток заявок + время сброса */
.quota-card {
  margin: 0 0 16px; padding: 10px 13px; border-radius: 12px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.quota-card b { color: var(--ink); font-weight: 700; }
.quota-card .quota-reset { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.quota-card.quota-empty { color: #c2352c; background: #fff2f1; border-color: #ffd7d3; }
.quota-card.quota-empty b { color: #c2352c; }
.comm-done .quota-card { margin: 16px auto 0; max-width: 340px; text-align: left; }

/* Пустое состояние ленты — дружелюбный блок вместо голой строки */
.comm-empty { text-align: center; padding: 40px 24px 44px; }
.comm-empty-ico {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 16px;
  display: grid; place-items: center; color: var(--blue);
  background: var(--blue-50); border: 1px solid var(--blue-100);
}
.comm-empty-ico svg { width: 26px; height: 26px; }
.comm-empty-title { font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 5px; }
.comm-empty-sub { color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 300px; margin: 0 auto; }

/* Табы фильтра/сортировки (Популярные / Новые / Мои) */
.comm-tabs { display: flex; gap: 6px; margin: 0 0 16px; }
.comm-tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.comm-tabs-scroll::-webkit-scrollbar { display: none; }
.comm-tab {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s;
}
.comm-tabs:not(.comm-tabs-scroll) .comm-tab { flex: 1 1 0; text-align: center; }
.comm-tab:hover { border-color: #c2c2c9; }
.comm-tab.active { color: #fff; border-color: transparent; background: linear-gradient(150deg, #2b95ff, var(--blue-700)); }

/* Лента карточек */
/* Одна колонка minmax(0,1fr): трек не раздувается шире контейнера даже при длинном
   неразрывном контенте (имя автора, ссылка) — карточка ужимается, текст — многоточием.
   Десктоп перекрывает на многоколоночную сетку (.cab-wide .prop-list ниже). */
.prop-list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.prop-card {
  position: relative;
  display: flex; gap: 13px; padding: 16px 17px; border-radius: 18px; cursor: pointer;
  transition: transform .16s ease, box-shadow .26s ease, border-color .18s;
}
.prop-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.prop-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 24px 50px -22px rgba(15,45,110,.42),
    0 0 0 1px rgba(120,145,185,.12);
}
.prop-card.is-done { opacity: .72; }

/* Кнопка голоса (палец вверх + счётчик). Живёт в подвале карточки/модалки справа. */
.prop-vote { flex: none; }
.vote-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  min-width: 50px; padding: 9px 6px 8px; border-radius: 14px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .15s, background .15s, color .15s, box-shadow .2s, transform .06s;
}
.vote-btn svg { width: 15px; height: 15px; }
.vote-btn .vote-n { font-size: 14.5px; line-height: 1; }
.vote-btn:hover { border-color: var(--blue); color: var(--blue); }
.vote-btn:active { transform: scale(.95); }
.vote-btn.voted {
  border-color: transparent; color: #fff;
  background: linear-gradient(155deg, #2b95ff, var(--blue-700));
  box-shadow: 0 8px 18px -10px var(--blue-600);
}
.vote-btn.locked { cursor: default; opacity: .8; }
.vote-btn.locked:hover { border-color: var(--line-2); color: var(--ink-2); }
/* В подвале ленты и модалки — компактная горизонтальная «пилюля» (палец + число) */
.prop-foot .vote-btn, .pm-foot .vote-btn {
  flex-direction: row; gap: 6px; min-width: 0; padding: 8px 13px; border-radius: 999px;
}
.prop-foot .vote-btn svg, .pm-foot .vote-btn svg { width: 15px; height: 15px; }

.prop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Тип/статус — под текстом карточки (заголовок стал «героем») */
.prop-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; }
.prop-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1px solid;
}
.prop-badge .pb-ico { width: 13px; height: 13px; }
.prop-badge.type-idea { color: #b26a00; background: #fff6e6; border-color: #ffe0a3; }
.prop-badge.type-bug  { color: #c2352c; background: #ffeceb; border-color: #ffcac6; }

.prop-status {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
}
.prop-status.st-approved    { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); }
.prop-status.st-in_progress { color: #0a66d6; background: #e2eeff; border-color: #b8d4ff; }
.prop-status.st-done        { color: #1a7a3a; background: #e4f8ea; border-color: #b7e6c6; }
.prop-status.st-pending     { color: var(--muted); background: var(--surface-2); border-color: var(--line-2); }
.prop-status.st-rejected    { color: #c2352c; background: #ffeceb; border-color: #ffcac6; }

.prop-title { font-weight: 700; font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; line-height: 1.3;
  word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prop-body {
  margin-top: 5px; color: var(--ink-2); font-size: 13.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
/* в ленте тело короче — карточки ровнее по высоте (в модерации остаётся 5 строк) */
.prop-card .prop-body { -webkit-line-clamp: 3; }
/* Равную высоту карточек одного ряда даёт align-items:stretch грида + margin-top:auto
   подвала (ниже). Фиксированный min-height у заголовка/тела убран намеренно: он
   оставлял «фантомную» пустую строку под короткими заголовками — текст отрывался от
   тела и карточка выглядела рыхло. */
.prop-foot { margin-top: 9px; display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
/* Подвал карточки ленты: автор слева (растёт, имя — многоточием), справа — корзина
   (на своих) и компактная кнопка голоса. Разделитель — во всю ширину карточки.
   margin-top:auto прижимает подвал к низу, чтобы карточки ряда были ровными. */
.prop-card .prop-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); gap: 10px; }
.foot-author { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.foot-author .prop-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-avatar {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--brand); font-weight: 700; font-size: 10.5px; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.prop-author { font-weight: 600; color: var(--ink-2); }
.prop-dot { opacity: .6; }
.prop-modnote {
  margin-top: 10px; padding: 8px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.45;
  color: #c2352c; background: #fff2f1; border: 1px solid #ffd7d3;
}

/* Форма создания: сегмент-переключатель типа + текстовое поле */
.seg-type { display: flex; gap: 6px; padding: 5px; border-radius: 16px; margin-bottom: 14px; }
.seg-opt {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer; padding: 11px 10px; border-radius: 12px; font-size: 14px; font-weight: 700;
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  transition: background .15s, color .15s, box-shadow .2s;
}
.seg-opt svg { width: 17px; height: 17px; }
.seg-opt:hover { color: var(--ink); }
.seg-opt.active {
  color: var(--blue); background: var(--surface);
  box-shadow: 0 6px 16px -10px rgba(15,45,110,.4), inset 0 0 0 1px var(--line-2);
}

/* ── Цвет типа: контур карточки + заголовок + активный сегмент формы ──────────
   Идея — янтарь, Баг — красный, Безопасность — фиолетовый (совпадают с бейджами). */
.prop-card.t-idea,     .mod-card.t-idea     { --tc: #e0a020; --tc-bd: #eec36a; --tc-tt: #986110; }
.prop-card.t-bug,      .mod-card.t-bug      { --tc: #e2564b; --tc-bd: #f2a49b; --tc-tt: #c2352c; }
.prop-card.t-security, .mod-card.t-security { --tc: #8a63e8; --tc-bd: #c9b4f3; --tc-tt: #6a3fd0; }
.prop-card.t-idea, .prop-card.t-bug, .prop-card.t-security,
.mod-card.t-idea,  .mod-card.t-bug,  .mod-card.t-security { border-color: var(--tc-bd); }
.prop-card.t-idea:hover, .prop-card.t-bug:hover, .prop-card.t-security:hover { border-color: var(--tc); }
.prop-card.t-idea .prop-title, .prop-card.t-bug .prop-title, .prop-card.t-security .prop-title,
.mod-card.t-idea .prop-title,  .mod-card.t-bug .prop-title,  .mod-card.t-security .prop-title { color: var(--tc-tt); }

/* Иконки типов в переключателе — всегда в своём цвете; активный сегмент — тинт типа */
.seg-opt[data-t="idea"] svg     { color: #e0a020; }
.seg-opt[data-t="bug"] svg      { color: #e2564b; }
.seg-opt[data-t="security"] svg { color: #8a63e8; }
.seg-opt[data-t="idea"].active     { color: #986110; background: #fff6e6; box-shadow: 0 6px 16px -10px rgba(224,160,32,.5),  inset 0 0 0 1px #eec36a; }
.seg-opt[data-t="bug"].active      { color: #c2352c; background: #ffeceb; box-shadow: 0 6px 16px -10px rgba(226,86,75,.5),  inset 0 0 0 1px #f2a49b; }
.seg-opt[data-t="security"].active { color: #6a3fd0; background: #f4efff; box-shadow: 0 6px 16px -10px rgba(138,99,232,.5), inset 0 0 0 1px #c9b4f3; }

/* ── Статус карточки крупным планом: «В работе» — синяя, «Завершена» — зелёная ──
   Идёт ПОСЛЕ правил типа → перебивает цвет-контур типа (статус важнее для ленты):
   вся карточка получает цветной фон-стекло + рамку + заголовок в тон. */
.prop-card.s-in_progress {
  border-color: #9cc4ff;
  background: rgba(224,238,255,.72);
}
.prop-card.s-in_progress:hover { border-color: var(--blue); }
.prop-card.s-in_progress .prop-title { color: #0d54b8; }

.prop-card.s-done {
  opacity: 1;
  border-color: #93d6a9;
  background: rgba(221,243,229,.78);
}
.prop-card.s-done:hover { border-color: #2fa15c; }
.prop-card.s-done .prop-title { color: #177a3c; padding-right: 30px; }

/* Явная отметка «завершена»: зелёная галочка в углу карточки + подсказка о результате */
.prop-done-mark {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: linear-gradient(150deg, #34c759, #1a9e42);
  box-shadow: 0 6px 14px -6px rgba(26,158,66,.7), inset 0 0 0 1px rgba(255,255,255,.35);
}
.prop-done-mark svg { width: 14px; height: 14px; }
.prop-result-hint {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 12px; font-weight: 650; color: #177a3c;
}
.prop-result-hint svg { width: 13px; height: 13px; }

.prop-textarea { resize: vertical; min-height: 120px; line-height: 1.5; font-family: var(--font); }

/* Экран «отправлено» */
.comm-done { text-align: center; padding: 34px 24px; border-radius: 24px; }
.comm-done-ico {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(155deg, #34c759, #1a9e42);
}
.comm-done-ico svg { width: 28px; height: 28px; }
.comm-done .btn { margin-top: 18px; }

/* Карточка модерации */
.mod-card { padding: 15px 16px; border-radius: 18px; }
/* Кликабельная область карточки модерации — открывает полный текст в модалке.
   Кнопки статусов и поле комментария лежат вне неё, поэтому не перехватываются. */
.mod-open { cursor: pointer; border-radius: 12px; }
.mod-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.mod-votes {
  margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.mod-votes svg { width: 13px; height: 13px; }
.mod-card .prop-title { margin-top: 2px; }
.mod-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.mod-set {
  cursor: pointer; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s, transform .06s;
}
.mod-set:hover { border-color: #c2c2c9; }
.mod-set:active { transform: scale(.97); }
.mod-set.active { color: #fff; border-color: transparent; background: linear-gradient(150deg, #2b95ff, var(--blue-700)); }
/* Тумблер «не видна всем» — нейтрально-серый active (не путать со статус-кнопками). */
.mod-hide.active { color: #fff; border-color: transparent; background: linear-gradient(150deg, #8a909b, #565c66); }
.mod-hide.active:hover { border-color: transparent; }
/* Маркер в шапке карточки: карточка скрыта из общей ленты. */
.mod-hidden-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; color: #5b6270; background: #eceef2; border: 1px solid #d7dbe2;
}
.mod-hidden-badge[hidden] { display: none; }
/* Скрытая карточка в модерации — пунктирная рамка + лёгкое приглушение. */
.mod-card.is-hidden { border-style: dashed; opacity: .85; }
.mod-comment { margin-top: 10px; }

/* ── Адаптивная сетка ленты ──────────────────────────────────────────────────
   Мобайл — один столбец (список); десктоп — несколько карточек в ряд. Тулбар
   (интро/кнопки/табы) держим узким для читаемости, сетку пускаем во всю ширину. */
@media (min-width: 720px) {
  .cab-container.cab-wide { max-width: 960px; }
  .cab-wide .comm-intro,
  .cab-wide .comm-top,
  .cab-wide .comm-tabs { max-width: 544px; }
  .cab-wide .comm-top .btn { flex: 0 1 auto; }
  .cab-wide .prop-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: stretch; gap: 14px;   /* карточки в ряду одной высоты */
  }
}

/* ── Фото на карточках ───────────────────────────────────────────────────────
   Миниатюры в карточке (1–3 в ряд), лайтбокс на весь экран, пикер в форме. */
.prop-imgs { margin-top: 11px; display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
.prop-imgs.n1 { grid-template-columns: 1fr; }
.prop-imgs.n2 { grid-template-columns: 1fr 1fr; }
.prop-img {
  position: relative; margin: 0; padding: 0; cursor: zoom-in; overflow: hidden;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.prop-imgs.n1 .prop-img { aspect-ratio: 16 / 10; }
.prop-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.prop-img:hover img { transform: scale(1.03); }
.prop-img.adm-busy { opacity: .5; pointer-events: none; }
/* крестик удаления фото в модерации */
.mod-img-del {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: 17px; line-height: 1;
  display: grid; place-items: center; background: rgba(20,25,40,.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mod-img-del:hover { background: rgba(210,45,40,.9); }

/* Лайтбокс */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; cursor: zoom-out;
  display: grid; place-items: center; padding: 24px;
  background: rgba(8,12,26,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: lb-in .16s ease;
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 30px 90px -20px rgba(0,0,0,.7); }
.lightbox-close {
  position: absolute; top: 16px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox-close:hover { background: rgba(255,255,255,.28); }

/* Пикер фото в форме создания */
.img-pick-list { display: flex; flex-wrap: wrap; gap: 10px; }
.img-pick-list:not(:empty) { margin-bottom: 11px; }
.img-thumb {
  position: relative; width: 86px; height: 86px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-rm {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%;
  border: none; cursor: pointer; color: #fff; font-size: 15px; line-height: 1;
  display: grid; place-items: center; background: rgba(20,25,40,.66);
}
.img-rm:hover { background: rgba(20,25,40,.85); }
.img-add {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 11px 16px; border-radius: 13px; font-size: 14px; font-weight: 600;
  color: var(--ink-2); background: var(--surface-2); border: 1px dashed var(--line-2);
  transition: border-color .15s, color .15s, background .15s;
}
.img-add:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-50); }
.img-add svg { width: 18px; height: 18px; }
.img-hint { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 9px 2px 0; }

/* ── Форма создания: крупные группы полей ────────────────────────────────────
   Раньше поля липли друг к другу без подписей — добавили лейблы и воздух. */
.field-lg { margin-bottom: 18px; }
.lbl-opt { color: var(--muted); font-weight: 500; }
.seg-type .seg-opt { padding: 10px 6px; font-size: 13.5px; gap: 6px; }
.seg-type .seg-opt span { white-space: nowrap; }
.btn-block { display: block; width: 100%; }

/* Тип «Безопасность» — фиолетовый бейдж (щит) */
.prop-badge.type-security { color: #6d3bd0; background: #f2ecff; border-color: #ddccff; }

/* Кнопка голоса = знакомый лайк: контур пальца, при голосе заливается */
.vote-btn svg { fill: none; }
.vote-btn.voted svg { fill: currentColor; }

/* Чип «анонимно» (виден автору и модератору) */
.prop-anon {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--line-2);
}
/* Аватар-силуэт анонима */
.prop-avatar-anon { background: #b9bece !important; }
.prop-avatar-anon svg { width: 15px; height: 15px; color: #fff; }

/* Кнопка «удалить свою карточку» в подвале ленты (клик-подтверждение) */
.prop-del {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted);
  transition: border-color .15s, color .15s, background .15s;
}
.prop-del svg { width: 15px; height: 15px; }
.prop-del .prop-del-lbl { display: none; }
.prop-del:hover { color: var(--red); border-color: #ffc9c6; background: #fff2f1; }
.prop-del.armed { color: #fff; border-color: transparent; background: var(--red); }
.prop-del.armed .prop-del-lbl { display: inline; }
/* Удаление в модерации (та же логика клик-подтверждения) */
.mod-del { display: inline-flex; align-items: center; gap: 5px; }
.mod-del svg { width: 15px; height: 15px; }
.mod-del .prop-del-lbl { display: none; }
.mod-del:hover { color: var(--red); border-color: #ffc9c6; background: #fff2f1; }
.mod-del.armed { color: #fff; border-color: transparent; background: var(--red); }
.mod-del.armed .prop-del-lbl { display: inline; }

/* Кастомный чекбокс «Опубликовать анонимно» */
.anon-check {
  position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 14px 15px; border-radius: 14px; margin-bottom: 18px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.anon-check:hover { border-color: #c2c2c9; }
.anon-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.anon-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: grid; place-items: center; color: #fff;
  transition: background .15s, border-color .15s;
}
.anon-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .1s; }
.anon-check input:checked + .anon-box { background: var(--blue); border-color: var(--blue); }
.anon-check input:checked + .anon-box svg { opacity: 1; }
.anon-check input:focus-visible + .anon-box { box-shadow: var(--ring); }
.anon-text { font-size: 13.5px; color: var(--ink); line-height: 1.4; }
.anon-text b { font-weight: 700; }
.anon-sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   РАЗДЕЛ СЕРВЕРОВ — чистые карточки в стиле лендинга (бренд-синий #1a7fff).
   Идёт ПОСЛЕ frosted-glass-слоя, поэтому перебивает его для .node-item и др.
   node-chev-кружок ограничен .node-item — чтобы не трогать шевроны настроек/подписки.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Список серверов — чистые белые карточки, тонкая рамка, мягкая тень */
.node-list { gap: 12px; }
.node-item {
  gap: 14px; padding: 14px 14px 14px 16px; border-radius: 18px;
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 26px -20px rgba(16,40,90,.28);
  transition: border-color .18s, box-shadow .2s, transform .12s, background .18s;
}
.node-item:hover {
  transform: translateY(-2px); background: #fff;
  border-color: var(--blue-brand-100);
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 20px 40px -22px rgba(26,80,200,.42);
}
.node-item:active { transform: scale(.99); }

/* Имя сервера — бренд-шрифт */
.node-item-name { font-family: var(--brand); font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.node-item-sub { margin-top: 6px; }

/* Флаг крупнее, со скруглением и мягким кольцом */
.node-item .flag-wrap { width: 38px; height: 27px; }
.node-item .flag { width: 38px; height: 27px; border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 2px 5px rgba(16,40,90,.14); }

/* Шеврон — в мягком кружке; на hover карточки — бренд-синий (только в списке серверов) */
.node-item .node-chev {
  width: 30px; height: 30px; padding: 6px; box-sizing: border-box;
  border-radius: 50%; background: var(--surface-2); color: var(--slate);
}
.node-item:hover .node-chev {
  background: var(--blue-brand-50); color: var(--blue-brand); transform: none;
}

/* Шапка карточки сервера — белая, с лёгким бренд-градиентным вошем сверху */
.node-detail-head {
  position: relative; overflow: hidden; background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 16px 40px -24px rgba(16,40,90,.3);
}
.node-detail-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 150px at 12% -40%, rgba(26,127,255,.12), transparent 70%);
}
.node-detail-head > * { position: relative; }
.node-detail-head .flag-wrap { width: 44px; height: 32px; }
.node-detail-head .flag { width: 44px; height: 32px; border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 3px 8px rgba(16,40,90,.16); }
.node-detail-name { font-family: var(--brand); font-weight: 700; }

/* Список протоколов — белая непрозрачная карточка, иконки бренд-синие */
.svc-list {
  background: #fff;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 14px 34px -24px rgba(16,40,90,.28);
}
.svc-ico { background: var(--blue-brand-50); color: var(--blue-brand); border-radius: 12px; }
.svc-name { font-family: var(--brand); font-weight: 600; }

/* Сетка разблокировки сервисов — чуть современнее + hover-подъём */
.av-grid { gap: 12px; }
.av-card {
  gap: 8px; padding: 15px 8px 12px; border-radius: 16px;
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -20px rgba(16,40,90,.24);
  transition: transform .14s, box-shadow .2s, border-color .18s;
}
.av-card:hover { transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 16px 32px -20px rgba(16,40,90,.34); }
.av-fb { background: var(--blue-brand-50); color: var(--blue-brand); }

/* ═══ МОДАЛКА «СЕРВЕР НЕ РАБОТАЕТ» (glass) ══════════════════════════════════════
   Изолированный блок фичи жалоб. Акценты через var(--blue-brand, var(--blue)) —
   работает и на проде (Apple-синий), и с лендинг-токенами. Границы блока — для
   хирургического наложения на прод без блока редизайна серверов выше. */
/* Кнопка-жалоба стоит первой над списком серверов — подсвечена янтарным
   (палитра «проблема с сервером»: warn-badge/warn-row), чтобы не терялась. */
.report-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 2px 0 18px;
  font-weight: 600; color: #b56a00;
  border-color: rgba(255,159,10,.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.14) 48%, rgba(255,255,255,.04)),
    linear-gradient(180deg, rgba(255,159,10,.20), rgba(255,159,10,.11));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 18px -12px rgba(255,159,10,.55);
}
.report-btn:hover {
  border-color: rgba(255,159,10,.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2) 48%, rgba(255,255,255,.06)),
    linear-gradient(180deg, rgba(255,159,10,.28), rgba(255,159,10,.17));
}
.report-overlay {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: 18px; overflow-y: auto;
  background: rgba(12,20,36,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: modal-fade .16s ease;
}
.report-modal {
  width: min(460px, 96vw); max-height: 92vh; overflow-y: auto;
  border-radius: 22px; padding: 22px 22px 24px;
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 30px 70px -24px rgba(15,35,90,.5);
}
.rep-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.rep-head h3 { font-family: var(--brand); font-weight: 700; font-size: 19px; margin: 0; color: var(--ink); }
.rep-close {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(120,130,150,.14); color: var(--ink-2); font-size: 14px; display: grid; place-items: center;
  transition: background .15s;
}
.rep-close:hover { background: rgba(120,130,150,.24); }
.rep-sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 0 0 16px; }
.rep-field { margin-bottom: 14px; }
.rep-field > label { display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin: 0 0 6px; }
.rep-opt { color: var(--muted); font-weight: 500; }
.rep-field select, .rep-field input {
  width: 100%; padding: 11px 13px; border-radius: 12px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line-2);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.rep-field select:focus, .rep-field input:focus {
  border-color: var(--blue-brand, var(--blue)); box-shadow: var(--ring);
}
.rep-hidden { display: none; }
.rep-apps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 420px) { .rep-apps { grid-template-columns: repeat(3, 1fr); } }
.rep-app {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 4px; cursor: pointer;
  border-radius: 13px; border: 1px solid var(--line-2); background: rgba(255,255,255,.6);
  transition: border-color .15s, background .15s, transform .1s;
}
.rep-app img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.rep-app span { font-size: 10.5px; font-weight: 600; color: var(--ink-2); }
.rep-app:hover { transform: translateY(-1px); }
.rep-app.active {
  border-color: var(--blue-brand, var(--blue));
  background: var(--blue-brand-50, var(--blue-50)); box-shadow: var(--ring);
}
.rep-app.active span { color: var(--blue-brand, var(--blue)); }
.rep-nets { display: flex; gap: 8px; }
.rep-net {
  flex: 1; padding: 11px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.6); color: var(--ink-2); transition: all .15s;
}
.rep-net.active {
  border-color: var(--blue-brand, var(--blue));
  background: var(--blue-brand-50, var(--blue-50)); color: var(--blue-brand, var(--blue));
}
.rep-msg { min-height: 18px; color: var(--red); font-size: 13px; font-weight: 600; margin: 4px 0 8px; }
.rep-submit { width: 100%; }
.rep-done { text-align: center; padding: 14px 6px; }
.rep-done-ic {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; color: #fff; background: linear-gradient(150deg, #34c759, #16a34a);
  box-shadow: 0 12px 28px -10px rgba(22,163,74,.6);
}
.rep-done h3 { font-family: var(--brand); font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.rep-done p { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }

/* Модалка подтверждения (тот же стеклянный шелл .report-*): заголовок-вопрос,
   поясняющий текст, две кнопки в ряд. */
.confirm-modal { width: min(420px, 96vw); }
.confirm-body { color: var(--ink-2); font-size: 14px; line-height: 1.55; margin: 6px 0 20px; }
.confirm-body p { margin: 0; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; padding: 12px; margin-top: 0; }

/* ── Модалка карточки «Сообщества»: полное описание в стеклянном окне ────────────
   Тот же шелл, что «Сервер не работает» (.report-overlay/.report-modal). Добавочные
   классы pm-* дают крупный заголовок с иконкой типа, полное (необрезанное) тело,
   бейджи типа/статуса и подвал автор + голос. Цвет заголовка — в тон типа/статуса. */
.pm-type-ic { flex: none; display: inline-flex; }
.pm-type-ic svg { width: 22px; height: 22px; }
.pm-title {
  font-family: var(--brand); font-weight: 700; font-size: 19px; line-height: 1.25;
  margin: 0; color: var(--ink); word-break: break-word; min-width: 0;
}
.pm-modal.t-idea     .pm-type-ic { color: #e0a020; }
.pm-modal.t-bug      .pm-type-ic { color: #e2564b; }
.pm-modal.t-security .pm-type-ic { color: #8a63e8; }
.pm-modal.t-idea     .pm-title { color: #986110; }
.pm-modal.t-bug      .pm-title { color: #c2352c; }
.pm-modal.t-security .pm-title { color: #6a3fd0; }
.pm-modal.s-in_progress .pm-title { color: #0d54b8; }
.pm-modal.s-done        .pm-title { color: #177a3c; }
.pm-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0 14px; }
.pm-body {
  color: var(--ink-2); font-size: 14.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin: 0 0 4px;
}
.pm-modal .prop-modnote { margin-top: 14px; }
.pm-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pm-author {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; row-gap: 6px; color: var(--muted); font-size: 12.5px;
}
.pm-author .prop-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-foot .prop-vote { flex: none; margin-left: auto; align-self: center; }

/* Блок «Результат» в модалке карточки — публичный итог работы, виден всем участникам */
.pm-result {
  margin: 14px 0 4px; padding: 13px 15px; border-radius: 14px;
  background: rgba(221,243,229,.6); border: 1px solid #b7e6c6;
}
.pm-result-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-weight: 700; font-size: 13px; color: #177a3c;
}
.pm-result-h svg { width: 16px; height: 16px; }
.pm-result-body {
  color: #1c4a30; font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}

/* Панель действий администратора внизу модалки карточки (двинуть в работу / завершить) */
.pm-admin {
  display: flex; flex-wrap: wrap; gap: 9px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
}
.pm-admin-label {
  flex: 1 0 100%; margin-bottom: 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.pm-admin .btn { flex: 1 1 auto; min-width: 150px; margin-top: 0; }
.pm-admin-err { flex: 1 0 100%; min-height: 0; margin: 2px 0 0; }
.pm-admin-err:empty { display: none; }

/* Окно ввода результата (поверх модалки карточки) */
.result-editor .res-text { width: 100%; margin-bottom: 6px; }
.result-editor .res-err { min-height: 0; margin: 0 0 10px; }
.result-editor .res-err:empty { display: none; }
/* Краудсорс-предупреждения на нодах (Фаза 2): бейдж в списке + блок в карточке */
.warn-badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 650; letter-spacing: -.01em;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  color: #b56a00; background: rgba(255,159,10,.15);
}
.warn-badge svg { flex: none; }
.warn-badge.warn-high { color: #c62a22; background: rgba(255,59,48,.13); }
.warn-list { display: grid; gap: 10px; margin-bottom: 22px; }
.warn-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px;
  border-radius: 16px; border: 1px solid rgba(255,159,10,.35); background: rgba(255,159,10,.08);
}
.warn-row.warn-high { border-color: rgba(255,59,48,.4); background: rgba(255,59,48,.07); }
.warn-row-ic {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; color: #b56a00; background: rgba(255,159,10,.2);
}
.warn-row.warn-high .warn-row-ic { color: #c62a22; background: rgba(255,59,48,.16); }
.warn-row-ic svg { width: 16px; height: 16px; }
.warn-row-main { min-width: 0; }
.warn-row-title { font-family: var(--brand); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.warn-row-cnt { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
/* ═══ конец блока «СЕРВЕР НЕ РАБОТАЕТ» ══════════════════════════════════════════ */

/* ── «Сообщество»: рельс секций + «Посоветовать хостера» ─────────────────────────
   Рельс-переключатель разделов (communityRail в cabinet.js). Мобайл — горизонтальный
   ряд над контентом; десктоп (≥720px) — вертикальная колонка слева (sticky). */
.comm-layout { display: flex; flex-direction: column; gap: 14px; }
.comm-rail { display: flex; flex-direction: row; gap: 8px; margin-bottom: 2px; }
.comm-rail-item {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; user-select: none; position: relative;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.comm-rail-item:hover { color: var(--ink); border-color: var(--line-2); }
.comm-rail-item.active { color: var(--blue); border-color: var(--blue-100); background: var(--blue-50); }
.comm-rail-item .cr-ico { display: inline-flex; flex: none; }
.comm-rail-item .cr-ico svg { width: 18px; height: 18px; display: block; }
.comm-rail-item .cr-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; margin-left: auto;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.comm-main { min-width: 0; }

@media (min-width: 720px) {
  .comm-layout { flex-direction: row; gap: 26px; align-items: flex-start; }
  .comm-rail {
    flex-direction: column; gap: 6px; margin: 0;
    width: 208px; flex: 0 0 208px; position: sticky; top: 82px;
  }
  .comm-rail-item { flex: none; justify-content: flex-start; padding: 11px 14px; }
  .comm-main { flex: 1 1 auto; }
  .cab-wide .comm-main .field,
  .cab-wide .comm-main .login-error,
  .cab-wide .comm-main > .btn,
  .cab-wide .comm-main .comm-done { max-width: 544px; }
}
@media (max-width: 380px) {
  .comm-rail-item { font-size: 13px; padding: 9px 8px; gap: 6px; }
}

/* Метки полей формы совета по хостеру. */
.fld-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 2px 6px; }
.fld-opt { color: var(--slate); font-weight: 500; }

/* Карточка совета по хостеру в админ-инбоксе (внутри .prop-list). */
.host-card {
  padding: 15px 16px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.host-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.host-name { font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.3; }
.host-st {
  flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.host-st.st-pending  { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); }
.host-st.st-done     { color: #1a7a3a; background: #e4f8ea; border-color: #b7e6c6; }
.host-st.st-rejected { color: #c2352c; background: #ffeceb; border-color: #ffcac6; }
.host-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0 2px; }
.host-link {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  color: var(--blue); font-weight: 600; font-size: 13px; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.host-link:hover { text-decoration: underline; }
.host-price {
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2);
}
.host-card .prop-body { margin-top: 8px; }
.host-card .prop-foot { margin-top: 10px; }
.host-card.adm-busy { opacity: .55; pointer-events: none; }


/* ── Главная: приветствие + герой-карточка состояния ──────────────────────────
   Один цветной объект на экран — герой. Всё остальное белое на сером: так видно,
   куда смотреть. Фон — диагональные «нити» с лендинга (canvas .home-flow): они
   лежат ПОД контентом (z −1), а карточки над ними непрозрачные, поэтому текст
   ни на чём движущемся не лежит. */
.home-flow {
  position: fixed; inset: 0; width: 100%; height: 100%;
  /* На мобильных height:100% у fixed-элемента следует за адресной строкой: при
     скролле она прячется, высота растёт, и холст пересобирается. lvh — высота при
     ПОЛНОСТЬЮ развёрнутом интерфейсе браузера, она постоянна. Строка ниже
     перекрывает 100% там, где lvh поддерживается; где нет — работает JS-порог. */
  height: 100lvh;
  z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .6s ease;
}
/* Приветствие: аватар слева, имя и подпись справа. Аватар 44px — меньше, чем в
   профиле (72): здесь он опознаёт «это мой кабинет», а не является объектом
   экрана; главный объект — герой ниже. Кружок и градиент-заглушка те же, что в
   профиле и в нижней навигации: одна личность — один вид. */
.hi { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; }
.hi-av {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; text-decoration: none;
  font-family: var(--brand); font-weight: 700; font-size: 18px; color: #fff;
  background: linear-gradient(155deg, #2b95ff, var(--blue-700));
  box-shadow: 0 8px 18px -10px rgba(10,90,255,.55);
  transition: transform .15s;
}
.hi-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hi-av:active { transform: scale(.96); }
.hi-tx { min-width: 0; }   /* иначе длинное имя распирает флекс и режет подпись */
.hi-name {
  font-family: var(--brand); font-size: 22px; font-weight: 700; line-height: 1.2;
  color: var(--ink); margin: 0; letter-spacing: -.02em;
}
.hi-sub { margin: 5px 0 0; font-size: 14.5px; color: var(--muted); }
.hi-sub:empty { display: none; }

.hero-slot { min-height: 210px; }   /* резерв под герой — страница не прыгает */
/* Только геометрия. Заливку/кант/тень задаёт стеклянный слой выше — иначе это
   правило (оно ниже по файлу) перебивало его сплошным белым, и герой оставался
   матовой плашкой, пока список рядом был стеклянным. */
.hero { padding: 18px; }

/* Чек-лист настройки. Подпись и кнопка есть только у текущего шага — иначе
   экран превращается в три одинаково громких предложения. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.step { display: flex; gap: 13px; padding: 10px 0; }
.step-mark {
  flex: none; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.step-mark.is-now { background: var(--blue); color: #fff; }
.step-mark.is-next { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); }
.step-mark.is-done { background: rgba(52,199,89,.14); color: var(--green); }
.step-mark.is-done svg { width: 15px; height: 15px; }
.step-body { flex: 1; min-width: 0; }
.step-t { font-weight: 600; font-size: 15.5px; color: var(--ink); line-height: 1.35; }
.step.is-done .step-t { color: var(--muted); }
.step.is-next .step-t { color: var(--slate); }
.step-d { margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.step-cta { display: block; width: 100%; margin-top: 12px; text-align: center; }

/* Выход из чек-листа для тех, у кого VPN уже работает. Тихая кнопка системы
   (.btn-quiet), а не синяя: рядом стоит CTA текущего шага, и два одинаково
   громких призыва снова сделали бы из экрана развилку вместо «делай вот это».
   Чуть мельче CTA (14.5/11 против 15/12) — иерархия держится на размере.
   Отделена линией: это выход из списка, а не четвёртый шаг. */
.steps-skip {
  display: block; width: 100%; margin-top: 14px; padding: 11px 16px; font-size: 14.5px;
}
.hero-setup .steps { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.steps-skip-note {
  margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center;
}
.steps-skip-note a { color: var(--blue); text-decoration: none; white-space: nowrap; }
.steps-skip-note a:hover { text-decoration: underline; }

/* Установившийся режим. «Доступ активен» — про подписку, а не про включённый
   VPN: этого кабинет не знает (см. heroLive в cabinet.js). */
.hero-live { display: grid; gap: 0; }
.live-top {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--brand); font-weight: 700; font-size: 17px; color: var(--ink);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px rgba(52,199,89,.16);
}
.live-meta { margin-top: 5px; font-size: 13.5px; color: var(--muted); }
.live-stat { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 4px; min-height: 40px; }
.live-num {
  font-family: var(--brand); font-weight: 700; font-size: 34px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.live-lbl { font-size: 14px; color: var(--muted); }
.hero-actions { display: grid; gap: 9px; margin-top: 14px; }
.hero-actions .btn { width: 100%; padding: 13px; font-size: 15px; text-align: center; }

/* Скелетоны — фиксированной высоты, чтобы подстановка данных ничего не двигала */
.hero-skel { display: grid; gap: 12px; }
.skel-line, .skel-btn, .skel-num {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, var(--line) 25%, var(--surface-2) 50%, var(--line) 75%);
  background-size: 400% 100%; animation: skel 1.4s ease infinite;
}
.skel-line { height: 14px; }
.skel-line.w40 { width: 40%; }
.skel-line.w70 { width: 70%; }
.skel-btn { height: 46px; border-radius: var(--radius-sm); margin-top: 6px; }
.skel-num { width: 96px; height: 32px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel-line, .skel-btn, .skel-num { animation: none; } }

/* Плашка сбоев — появляется только когда жалобы есть */
.warn-plate {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 12px 14px; border-radius: var(--radius-sm); text-decoration: none;
  background: rgba(255,159,10,.10); border: 1px solid rgba(255,159,10,.28);
  color: var(--ink-2); transition: background .15s;
}
.warn-plate:hover { background: rgba(255,159,10,.16); }
.warn-plate-ic { flex: none; display: grid; place-items: center; color: var(--amber); }
.warn-plate-ic svg { width: 16px; height: 16px; }
.warn-plate-tx { flex: 1; font-size: 13.5px; line-height: 1.4; }

/* Каналы: запасной путь на случай, когда Telegram недоступен */
.chan-note { margin: 14px 2px 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.chan-note a { color: var(--blue); }

/* ── Чат поддержки ──────────────────────────────────────────────────────────
   Дизайн треда взят из админки (admin/static/styles.css, блок .sup-*): у
   поддержки по обе стороны один и тот же диалог, и он должен выглядеть одним
   и тем же. Отличие одно и осознанное: стороны зеркальны. В админке слева
   реплики юзера ('in'), справа ответы поддержки; здесь человек смотрит на
   СВОЙ диалог, поэтому справа синим — он сам (.me), слева — мы (.op).       */
.sup-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
/* Высота фиксирована, а не по содержимому: иначе короткая переписка жмётся в
   полоску, а длинная растит страницу и уводит поле ввода за экран. */
.sup-msgs {
  flex: none; overflow-y: auto; height: clamp(320px, 52vh, 620px);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
}
/* Прижимает короткую переписку к низу — как в мессенджере. */
.sup-msgs::before { content: ''; margin-top: auto; margin-bottom: -12px; }
/* overflow-wrap: anywhere — сплошная строка без пробелов (ссылка, токен
   подписки) иначе распирает пузырь и даёт горизонтальную прокрутку. */
.sup-msg {
  max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px;
  line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere;
}
.sup-msg.me {
  align-self: flex-end; color: #fff; border-bottom-right-radius: 6px;
  background: linear-gradient(100deg, var(--blue) 10%, #4f9bff 90%);
}
/* Ответ поддержки. Фон заметно плотнее панели: сама карточка — полупрозрачное
   стекло, и белый пузырь на ней читался бы как пустое место. */
.sup-msg.op {
  align-self: flex-start; background: #eaeef5; color: var(--ink);
  border: 1px solid rgba(12,20,36,.10); border-bottom-left-radius: 6px;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.sup-msg-meta { margin-top: 5px; font-size: 11px; opacity: .72; font-variant-numeric: tabular-nums; }
.sup-msg.me .sup-msg-meta { text-align: right; }
.sup-clip { display: block; margin-bottom: 4px; font-size: 12.5px; opacity: .8; }
/* Системная строка (закрытие обращения) и разделитель обращений — по центру и
   нейтрально: пузырь читался бы как реплика человека. */
.sup-note, .sup-sep {
  align-self: center; max-width: 88%; text-align: center; font-size: 12.5px;
  color: var(--muted); background: rgba(12,20,36,.035);
  border: 1px dashed rgba(12,20,36,.10); border-radius: 12px; padding: 7px 14px;
}
.sup-sep { font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; }
.sup-note-t { display: block; margin-top: 3px; font-size: 11px; opacity: .75;
  font-variant-numeric: tabular-nums; }
.sup-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 22px; text-align: center; color: var(--muted);
  font-size: 14px; line-height: 1.5;
}
.sup-gate p { margin: 0; max-width: 34ch; }
.sup-gate .btn { min-width: 210px; }

.sup-compose { padding: 14px 18px 16px; border-top: 1px solid rgba(12,20,36,.06); }
.sup-compose:empty { display: none; }
.sup-compose textarea {
  width: 100%; resize: vertical; min-height: 66px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.85);
  font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--ink);
}
.sup-compose textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
.sup-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sup-msg-status { font-size: 12.5px; color: var(--muted); }

@media (max-width: 560px) {
  .sup-msgs { height: clamp(300px, 46vh, 520px); padding: 14px; }
  .sup-msg { max-width: 88%; }
  /* 16px — порог, ниже которого iOS зумит страницу при фокусе в поле. */
  .sup-compose textarea { font-size: 16px; }
  .sup-actions .btn { width: 100%; }
}

/* Нижняя навигация из 4 вкладок — чуть плотнее, чтобы «Сообщество» помещалось */
.cab-bottomnav:has(.bnav-item:nth-child(4)) .bnav-item { font-size: 11px; padding: 6px 4px; }

/* ── Документация (#/docs) ─────────────────────────────────────────────────────
   Этот раздел ЧИТАЮТ подряд, а не сканируют, как остальной кабинет: длинные
   инструкции, широкие таблицы, куски конфига. Отсюда три сознательных отличия
   от общей дизайн-системы (это не расхождение, а другой режим чтения):
     1) статья лежит на СВОЕЙ плотной карточке — на амбиент-градиенте кабинета
        сплошной текст «плавает» и рябит;
     2) колонка ограничена МЕРОЙ СТРОКИ (~70 знаков): на общих 960px строка
        уходила за 90 знаков, и глаз терял начало следующей;
     3) кегль/интерлиньяж крупнее (16.5→17px / 1.72) и трекинг НЕ сжат: общий
        letter-spacing −.01em из body хорош для коротких подписей интерфейса и
        вреден кириллице в сплошном тексте.
   Мобила: рельс скрыт, раскрывается тумблером. Десктоп (≥720px): рельс — липкий
   сайдбар слева, тумблер скрыт. Нижнюю навигацию раздел не трогает. */
.doc-layout { display: flex; flex-direction: column; gap: 14px; }

.doc-navtoggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.doc-navtoggle .doc-burger { width: 20px; height: 20px; flex: none; color: var(--muted); }
.doc-navtoggle .doc-cur { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-navtoggle .doc-chev { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s; }
.doc-layout.nav-open .doc-navtoggle .doc-chev { transform: rotate(180deg); }

.doc-rail { display: none; flex-direction: column; gap: 2px; }
.doc-layout.nav-open .doc-rail {
  display: flex; padding: 8px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow);
}
.doc-sec { display: flex; flex-direction: column; gap: 2px; }
.doc-sec + .doc-sec { margin-top: 10px; }
.doc-sec-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px 4px;
}
.doc-rail-item {
  display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink-2);
  font-size: 14.5px; line-height: 1.4; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.doc-rail-item:hover { color: var(--ink); background: var(--surface-2); }
.doc-rail-item.active { color: var(--blue); background: var(--blue-50); border-color: var(--blue-100); font-weight: 600; }

/* ── Сама статья ────────────────────────────────────────────────────────────── */
.doc-body {
  min-width: 0;
  /* Почти непрозрачная поверхность: стекло кабинета сохранено, но длинный текст
     не должен просвечивать фон — от просвета он «рябит». */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 20px 17px 26px;
  color: var(--ink-2);
  font-size: 16.5px; line-height: 1.72; letter-spacing: normal;
  overflow-wrap: break-word;
}
/* Заголовок статьи и заголовки внутри — системным шрифтом, а НЕ var(--brand).
   Sora self-host'ится только в latin: в «ClashMi — параметры приложения» латиница
   бралась из Sora, кириллица из Inter — одна строка двумя гарнитурами. */
.doc-title {
  font-family: var(--font); font-size: 26px; line-height: 1.18; font-weight: 700;
  letter-spacing: -.022em; color: var(--ink); margin: 2px 0 14px; text-wrap: balance;
}
/* Первый абзац — лид: чуть крупнее и спокойнее, задаёт вход в текст. */
.doc-title + p { font-size: 1.06em; line-height: 1.65; margin-bottom: 1.3em; }

.doc-body .md-h1, .doc-body .md-h2, .doc-body .md-h3,
.doc-body .md-h4, .doc-body .md-h5, .doc-body .md-h6 {
  font-family: var(--font); color: var(--ink); font-weight: 700;
  line-height: 1.28; letter-spacing: -.018em; text-wrap: balance;
  /* Переход по якорю оглавления: заголовок не должен прятаться под липким .cab-topbar. */
  scroll-margin-top: 84px;
}
.doc-body .md-h1 { font-size: 1.36em; margin: 2.1em 0 .6em; }
.doc-body .md-h2 {
  font-size: 1.26em; margin: 2.2em 0 .7em; padding-top: 1.6em;
  border-top: 1px solid var(--line);
}
.doc-body .md-h3 { font-size: 1.15em; margin: 1.95em 0 .5em; }
.doc-body .md-h4, .doc-body .md-h5, .doc-body .md-h6 { font-size: 1em; margin: 1.6em 0 .45em; }
/* `---` в тексте и черта над h2 — одно средство: две подряд читаются как сбой. */
.doc-body .md-hr + .md-h2 { border-top: 0; padding-top: 0; margin-top: .3em; }
.doc-body .doc-title + .md-h2, .doc-body > .md-h2:first-child { border-top: 0; padding-top: 0; margin-top: .6em; }

/* Якорь у заголовка — «поделиться разделом». Проявляется на наведении, на
   тач-устройствах скрыт (наведения нет, а место занимал бы). */
.doc-body .md-anchor {
  margin-left: .35em; color: var(--line-2); font-weight: 400; text-decoration: none;
  opacity: 0; transition: opacity .15s;
}
.doc-body .md-h1:hover .md-anchor, .doc-body .md-h2:hover .md-anchor,
.doc-body .md-h3:hover .md-anchor, .doc-body .md-h4:hover .md-anchor { opacity: 1; }
.doc-body .md-anchor:hover, .doc-body .md-anchor:focus-visible { color: var(--blue); opacity: 1; }
@media (hover: none) { .doc-body .md-anchor { display: none; } }

.doc-body p { margin: 0 0 1.05em; text-wrap: pretty; }
.doc-body a {
  color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--blue-100); text-underline-offset: 3px;
}
.doc-body a:hover { text-decoration-color: var(--blue); }
.doc-body strong { color: var(--ink); font-weight: 600; }
/* Ссылка на параграф («§4.8») — синяя и кликабельная, но без подчёркивания:
   в таблице-шпаргалке их по две-три на ячейку, и подчёркнутые они превращали бы
   строку в рябь. Неразрывная — номер не должен отрываться от знака. */
.doc-body a.md-sect {
  color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.doc-body a.md-sect:hover { text-decoration: underline; text-decoration-color: var(--blue); }
.doc-body .md-list { margin: 0 0 1.15em; padding-left: 1.35em; }
.doc-body .md-list li { margin: .42em 0; }
.doc-body ul.md-list > li::marker { color: var(--blue); }
.doc-body ol.md-list > li::marker { color: var(--muted); font-weight: 700; }
.doc-body .md-list .md-list { margin: .45em 0 .1em; }

/* Оглавление длинной инструкции — панель, а не «ещё один список»: страница
   открывается на 30 буллитах, и они выглядели как начало текста. */
.doc-body .md-toc {
  margin: 0 0 1.6em; padding: 14px 18px 16px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2);
}
.doc-body .md-toc-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.doc-body .md-toc .md-list { margin: 0; padding-left: 0; list-style: none; font-size: .93em; line-height: 1.4; }
.doc-body .md-toc .md-list li { margin: 0 0 .3em; break-inside: avoid; }
.doc-body .md-toc .md-list .md-list { padding-left: 1.05em; margin: .3em 0 .1em; }
.doc-body .md-toc a { display: inline-block; padding: 2px 0; color: var(--ink-2); text-decoration: none; }
.doc-body .md-toc a:hover { color: var(--blue); }

.doc-body code {
  /* Плашка нейтральная, а не синяя: в этих текстах `код` идёт по 5-6 штук на
     абзац — цветные чипы превращали абзац в рябь. */
  font-family: var(--mono); font-size: .87em; background: rgba(20,26,45,.055);
  border: 0; border-radius: 5px; padding: .08em .24em; color: #2c3140;
}
.doc-body .md-code {
  margin: 0 0 1.3em; padding: 14px 16px; overflow-x: auto; background: #f7f8fb;
  border: 1px solid var(--line); border-radius: 14px; line-height: 1.6; tab-size: 2;
}
.doc-body .md-code code { background: none; padding: 0; font-size: 13.5px; color: var(--ink); }

/* Цитата = врезка-примечание. Класс q-* ставит md.js по ведущему значку самого
   текста (⚠️ / 💡 / ⛔), чтобы предупреждение читалось как предупреждение. */
.doc-body .md-quote {
  margin: 1.2em 0; padding: 13px 16px; color: var(--ink-2);
  border: 1px solid var(--blue-100); border-left: 3px solid var(--blue);
  border-radius: 12px; background: var(--blue-50);
}
.doc-body .md-quote > :last-child { margin-bottom: 0; }
.doc-body .md-quote.q-warn { background: #fff8ec; border-color: #ffe4b8; border-left-color: var(--amber); }
.doc-body .md-quote.q-tip  { background: #f2faf4; border-color: #d2ecda; border-left-color: var(--green); }
.doc-body .md-quote.q-stop { background: #fff3f2; border-color: #ffd9d6; border-left-color: var(--red); }

.doc-body .md-hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }

/* Таблицы: сетка из линий на каждой ячейке дробила текст — оставляем только
   горизонтальные линии + зебру, рамка живёт на обёртке (она же скроллит). */
.doc-body .md-tablewrap {
  margin: 0 0 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
.doc-body .md-table { border-collapse: collapse; width: 100%; font-size: .93em; line-height: 1.55; }
.doc-body .md-table th, .doc-body .md-table td {
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 14px;
  text-align: left; vertical-align: top;
}
.doc-body .md-table thead th {
  background: var(--surface-2); color: var(--muted); font-weight: 700;
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.doc-body .md-table tbody tr:nth-child(even) { background: #fcfcfe; }
/* Длинный `код`/URL в ячейке нерастяжим: своей минимальной шириной он забирал
   место у колонки с описанием (та схлопывалась в «по слову в строке»). */
.doc-body .md-table code { overflow-wrap: anywhere; }
.doc-body .md-table tbody tr:last-child td { border-bottom: 0; }
.doc-body .md-table td:first-child { color: var(--ink); }
.doc-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Обсуждение под статьёй: внутри карточки статьи стекло на стекле смотрелось бы
   слоями — здесь это спокойная врезка, но всё ещё отдельная секция. */
.doc-body .doc-comments:not(:empty) {
  margin: 34px 0 0; padding: 20px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}

@media (max-width: 719px) {
  /* На узком экране колонки таблицы схлопываются в «по слову в строке» — пусть
     лучше таблица скроллится вбок целиком, но кегль поменьше: чем уже полоса
     прокрутки по горизонтали, тем реже за ней вообще идут. */
  .doc-body .md-table { min-width: 420px; font-size: .88em; }
  .doc-body .md-table th, .doc-body .md-table td { padding: 9px 11px; }
}

@media (min-width: 720px) {
  /* Разделу нужно больше общих 960px: рельсу — свои 240, колонке текста — своя
     мера строки; из 960 они делят ширину пополам и обе проигрывают. */
  .cab-container.cab-wide:has(.doc-layout) { max-width: 1060px; }
  .doc-layout { flex-direction: row; gap: 32px; align-items: flex-start; }
  .doc-navtoggle { display: none; }
  .doc-rail {
    /* 77px = высота липкого .cab-topbar (57) + воздух: иначе верх колонки
       уезжает ПОД шапку и первый пункт не прочитать. */
    display: flex !important; width: 240px; flex: none; position: sticky; top: 77px;
    /* overscroll-behavior здесь тоже auto — иначе, когда разделов станет много и
       рельс начнёт прокручиваться, курсор над ним так же «выключит» страницу. */
    max-height: calc(100vh - 97px); overflow-y: auto; overscroll-behavior: auto;
    padding: 0; border: 0; background: none; box-shadow: none;
  }
  .doc-body { flex: 1; padding: 34px 40px 40px; font-size: 17px; }
  .doc-title { font-size: 32px; margin-bottom: 18px; }
  .doc-body .md-toc > .md-list { columns: 2; column-gap: 30px; }
}

/* ── Документация: навигация по длинной статье ────────────────────────────────
   «На этой странице» (правая колонка) — стандарт жанра: длинную инструкцию
   читают не подряд, а прыжками, и без неё непонятно, где ты и сколько осталось.
   Появляется только с 1180px, где для третьей колонки есть место БЕЗ ущерба мере
   строки; ниже — ручное оглавление в тексте (.md-toc), выше — оно лишнее и
   прячется, чтобы не дублировать одно и то же двумя списками. */
.doc-toc-col { display: none; }
.doc-toc-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 0 10px 8px;
}
.doc-toc-link {
  display: block; padding: 5px 10px; border-left: 2px solid var(--line);
  color: var(--muted); font-size: 13.5px; line-height: 1.35; text-decoration: none;
}
.doc-toc-link.lvl3 { padding-left: 22px; font-size: 13px; }
.doc-toc-link:hover { color: var(--ink); }
.doc-toc-link.active { color: var(--blue); border-left-color: var(--blue); font-weight: 600; }

/* Копирование кода: на телефоне выделить многострочный конфиг мышью нечем. */
.doc-body .md-code { position: relative; }
.md-copy {
  position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,.92); color: var(--muted);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s;
}
.doc-body .md-code:hover .md-copy, .md-copy:focus-visible { opacity: 1; }
.md-copy:hover { color: var(--ink); }
.md-copy.done { opacity: 1; color: var(--green); border-color: var(--green); }
/* На тач-устройствах наведения нет — кнопка должна быть видна сразу. */
@media (hover: none) { .md-copy { opacity: 1; } }

/* Соседние страницы: дочитал — видно, что дальше, без возврата в сайдбар. */
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.doc-pg {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
  text-decoration: none; min-width: 0;
}
.doc-pg:hover { border-color: var(--blue-100); background: var(--blue-50); }
.doc-pg.next { text-align: right; }
.doc-pg-cap { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.doc-pg-name { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* «Наверх»: на длинной инструкции возврат к оглавлению — это иначе долгий свайп.
   Над нижней навигацией, чтобы не перекрывать вкладки. */
/* Шапка раздела «Документация»: в ней, в отличие от прочих, справа стоят
   кнопки — выравниваем содержимое по центру строки, а не по базовой линии.
   flex-wrap: строка обязана переноситься целиком (см. .sec-head-acts), иначе
   при нехватке места сжимается группа кнопок и ряд рассыпается в столбик. */
.sec-head-doc { align-items: center; flex-wrap: wrap; row-gap: 8px; }

/* Правая группа шапки: вики-действия + «Поделиться». Одна флекс-строка на все
   кнопки сразу — поэтому .wiki-nav внутри неё display: contents (её пилюли
   становятся прямыми элементами группы). Иначе получаются две вложенные
   строки с разными правилами переноса, и «Поделиться» встаёт по центру
   столбика из вики-кнопок, а не в один ряд с ними. */
.sec-head-acts {
  /* Компенсируем боковой margin самой шапки (.sec-head margin: 4px 2px) — без
     этого правый край кнопки не доходит до края контента ровно на эти 2px и
     она смотрится сдвинутой внутрь. */
  margin-left: auto; margin-right: -2px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
}
.sec-head-acts .wiki-nav { display: contents; }

/* ── «Поделиться»: кнопка в шапке раздела + подтверждение копирования ─────────
   Кнопка живёт в .sec-head (шапка каркаса), а не в статье: так она переживает
   переход между страницами и не втискивается в заголовок, у которого свой
   text-wrap: balance. Прижата вправо — рядом с заголовком раздела. */
.doc-share {
  /* Метрики один в один с .wiki-act (padding, кегль, радиус, line-height по
     умолчанию): кнопки стоят в одном ряду, и любое расхождение читается как
     кривой ряд. Было 5/11 при line-height: 1 → 26px против 29px у соседей.
     Вертикальное выравнивание — на .sec-head-doc: центрировать надо ОБА
     элемента строки, иначе по базовой линии заголовок кегля 18 и кнопка
     кегля 12.5 всё равно расходятся центрами. */
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line-2);
  transition: color .15s, border-color .15s, background .15s;
}
.doc-share svg { width: 14px; height: 14px; }
.doc-share:hover { color: var(--blue); border-color: var(--blue); background: #fff; }
.doc-share:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Подпись прячем только на совсем узких экранах: на типовых 390px «Документация»
   и «Поделиться» стоят в одну строку свободно, а голая иконка читается хуже. */
@media (max-width: 359px) { .doc-share span { display: none; } .doc-share { padding: 6px 8px; } }

/* Узкий экран: вики-кнопок трое, и рядом с заголовком они переносятся рваным
   столбиком. Отдаём группе всю ширину под заголовком — ряд выстраивается слева
   и переносится ровно; -2px слева ставит его вровень с краем статьи. Условие
   :has() — когда вики недоступна, в группе одна кнопка, и ей отдельная строка
   не нужна: она спокойно стоит справа от заголовка. */
@media (max-width: 719px) {
  .sec-head-doc .sec-head-acts:has(.wiki-nav) {
    flex-basis: 100%; margin-left: -2px; justify-content: flex-start;
  }
}

.doc-toast {
  position: fixed; left: 50%; bottom: 92px; z-index: 60; transform: translateX(-50%);
  max-width: min(90vw, 340px); padding: 9px 16px; border-radius: 999px;
  font: 600 13px/1.3 var(--font); color: #fff; text-align: center;
  background: rgba(20, 22, 28, .93); box-shadow: var(--shadow);
  animation: docToastIn .18s ease-out;
}
@keyframes docToastIn { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .doc-toast { animation: none; } }

.doc-top {
  position: fixed; right: 16px; bottom: 84px; z-index: 40;
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.9);
  color: var(--ink-2); box-shadow: var(--shadow); cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s;
}
.doc-top svg { width: 20px; height: 20px; }
.doc-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .doc-top { transition: none; } }

@media (min-width: 720px) {
  /* Нижняя навигация (68px) видна и на десктопе — кнопка встаёт НАД ней. */
  .doc-top { bottom: 88px; right: 24px; }
}

@media (min-width: 1180px) {
  /* Три колонки: разделы · статья · «на этой странице». Ширина контейнера
     подобрана так, чтобы колонка текста осталась в пределах ~60–70 знаков. */
  .cab-container.cab-wide:has(.doc-layout) { max-width: 1240px; }
  .doc-layout { gap: 28px; }
  .doc-rail { width: 230px; }
  .doc-toc-col {
    display: block; width: 190px; flex: none; position: sticky; top: 77px;
    max-height: calc(100vh - 97px); overflow-y: auto;
    /* Без цепочки прокрутки колесо над колонкой упиралось в её конец и страница
       не двигалась вовсе — курсор в правой трети экрана «выключал» скролл. */
    overscroll-behavior: auto;
  }
  /* Ручное оглавление внутри текста дублировало бы правую колонку. */
  .doc-body .md-toc { display: none; }
}

/* Комментарии (.cmt-*, .pm-comments, .doc-comments, .prop-cmt) вынесены в
   web/comments.css — тот же набор нужен статическим страницам «Технологий».
   Подключается вторым <link> в index.html, ПОСЛЕ этого файла. */

/* Переключатель «Карточки | Комментарии» над табами модерации */
.mod-scope { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 4px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); }
.mod-scope-btn {
  border: none; background: none; cursor: pointer; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--muted); padding: 6px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mod-scope-btn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Лента очереди комментариев */
.modc-list { display: flex; flex-direction: column; gap: 12px; }
.modc-card {
  position: relative; padding: 15px 16px; border-radius: var(--radius);
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.modc-card.s-hidden { opacity: .8; }
.modc-card.s-pending { border-color: #f2d48a; }
.modc-card.adm-busy { opacity: .5; pointer-events: none; }
.modc-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.modc-target { font-size: 12.5px; font-weight: 700; color: var(--blue-700); }
.modc-when { font-size: 11.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
.modc-body {
  font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere; margin-bottom: 10px;
}
.modc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.modc-author { font-weight: 700; color: var(--ink-2); }
.modc-uid { font-variant-numeric: tabular-nums; }
.modc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.modc-chip {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2);
}
.modc-chip.warn { color: #b23; background: #fff2f1; border-color: #ffc9c6; }
.modc-chip.muted { color: var(--muted); }
.modc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modc-acts .btn { padding: 7px 14px; font-size: 13px; }
.modc-block:hover { color: var(--red); border-color: #ffc9c6; background: #fff2f1; }
.modc-block .modc-blk-b { display: none; }
.modc-block.armed { color: #fff; border-color: transparent; background: var(--red); }
.modc-block.armed .modc-blk-a { display: none; }
.modc-block.armed .modc-blk-b { display: inline; }
.modc-toast {
  margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2);
}

/* ── Вики-документация: плашка происхождения, редактор, дифф, очередь ревью ──
   Плашка намеренно спокойная: это подпись под инструкцией, а не баннер. Зато
   «командой ещё не проверялась» и «здесь сообщили об ошибке» — заметные: это
   единственное, что отличает выверенный текст от чужого черновика. */
.wiki-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin: 0 0 18px; padding: 10px 14px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.wiki-bar-info, .wiki-bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wiki-origin { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.wiki-origin.community { color: var(--blue-700); }
.wiki-meta { font-size: 12px; color: var(--muted); }
.wiki-meta.warn { color: #a8630a; font-weight: 600; }
.wiki-act {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2);
  text-decoration: none;
}
.wiki-act:hover { border-color: var(--blue); color: var(--blue-700); }
.wiki-act b { color: var(--red); }
.wiki-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

.wiki-chip {
  padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2);
}
.wiki-chip.ok   { color: #14663a; background: #e8f8ee; border-color: #b9e6cb; }
.wiki-chip.wait { color: #8a5a00; background: #fff6e5; border-color: #ffdca8; }
.wiki-chip.no   { color: #b23;    background: #fff2f1; border-color: #ffc9c6; }
.wiki-chip.new  { color: var(--blue-700); background: var(--blue-50); border-color: var(--blue-100); }
.wiki-chip.old  { color: var(--muted); }

/* ── Форма правки ────────────────────────────────────────────────────────── */
.wiki-form { display: block; }
.wiki-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 2px 14px; }
.wiki-label { display: block; margin: 14px 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wiki-label .input { margin-top: 6px; }
.wiki-label.hidden, .hidden { display: none; }
.wiki-area { font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; }
.wiki-rules {
  margin: 6px 0 14px; padding: 10px 14px; border-radius: 14px;
  background: var(--blue-50); border: 1px solid var(--blue-100); font-size: 13px; color: var(--ink-2);
}
.wiki-rules summary { cursor: pointer; font-weight: 700; color: var(--blue-700); }
.wiki-rules ul { margin: 10px 0 0; padding-left: 20px; }
.wiki-rules li { margin: 6px 0; line-height: 1.5; }
.wiki-tabs { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; }
.wiki-tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--line-2);
}
.wiki-tab.active { color: #fff; background: var(--blue); border-color: transparent; }
.wiki-counter { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wiki-counter.over { color: var(--red); font-weight: 700; }
.wiki-preview {
  padding: 18px 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.wiki-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.wiki-note { font-size: 12.5px; color: var(--muted); }
.wiki-error {
  margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-size: 13px;
  color: #b23; background: #fff2f1; border: 1px solid #ffc9c6;
}
.wiki-hard { margin: 8px 0 0; padding-left: 20px; }
.wiki-hard li { margin: 4px 0; line-height: 1.5; }
.wiki-done { padding: 24px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.wiki-done h2 { margin: 0 0 8px; font-size: 20px; }
.wiki-done p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.6; }
.wiki-done-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Списки правок и очередь ─────────────────────────────────────────────── */
.wiki-list { display: flex; flex-direction: column; gap: 10px; }
.wiki-item, .wiki-qitem {
  display: block; padding: 14px 16px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
}
.wiki-item:hover { border-color: var(--blue); }
.wiki-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wiki-item-title { font-weight: 700; color: var(--ink); text-decoration: none; }
.wiki-item-sum { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.wiki-item-meta { margin-top: 6px; font-size: 12px; color: var(--muted); }
.wiki-item-note {
  margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line-2);
}
.wiki-rev-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.wiki-rev-flags { margin: 10px 0; font-size: 12.5px; color: var(--ink-2); }
.wiki-flags b {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; color: #8a5a00; background: #fff6e5; border: 1px solid #ffdca8;
}
.wiki-flags.none { color: var(--muted); }
.wiki-qtabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wiki-qtab {
  padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2);
}
.wiki-qtab.active { color: #fff; background: var(--blue); border-color: transparent; }
.wiki-qacts, .wiki-review { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wiki-qacts .btn, .wiki-review .btn { padding: 7px 14px; font-size: 13px; }
.wiki-editor-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; align-items: center; }
.wiki-editor-form .input { width: auto; min-width: 140px; }

/* ── Дифф ────────────────────────────────────────────────────────────────────
   Моноширинный, с номерами строк и без переносов внутри строки: перенос в диффе
   мешает увидеть, что именно изменилось. Горизонтальная прокрутка — у контейнера,
   страница по горизонтали не едет. */
.wiki-diff-cap { margin: 10px 0 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wiki-diff {
  overflow-x: auto; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.wiki-diff-line { display: flex; gap: 8px; padding: 1px 10px; white-space: pre; }
.wiki-diff-line.add { background: #e8f8ee; }
.wiki-diff-line.del { background: #fff2f1; }
.wiki-diff-n { min-width: 42px; text-align: right; color: var(--slate); user-select: none; }
.wiki-diff-op { width: 10px; font-weight: 700; color: var(--muted); }
.wiki-diff-line.add .wiki-diff-op { color: #14663a; }
.wiki-diff-line.del .wiki-diff-op { color: #b23; }
.wiki-diff-t { flex: 1; }

@media (max-width: 720px) {
  .wiki-bar { flex-direction: column; align-items: flex-start; }
  .wiki-nav { margin-left: 0; }
  .wiki-form-head { flex-wrap: wrap; }
}

/* Пояснение в редакторе, когда правится ОФИЦИАЛЬНАЯ инструкция: человек должен
   понимать, что его текст не заменит документ немедленно. */
.wiki-origin-note {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: 14px; font-size: 13px;
  color: #8a5a00; background: #fff6e5; border: 1px solid #ffdca8;
}

/* Подсказка про ведущий «# …»: он не попадает в статью (заголовок берётся из
   поля «Название»), и это надо сказать прямо — иначе выглядит как пропавший текст. */
.wiki-lead-hint {
  margin-top: 10px; padding: 10px 14px; border-radius: 14px; font-size: 13px;
  line-height: 1.55; color: #8a5a00; background: #fff6e5; border: 1px solid #ffdca8;
}

/* ── Трафик LTE ─────────────────────────────────────────────────────────────
   Каркас раздела — штатные .sec-label / .list-card / .row-static / .back-link.
   Своё тут только полотно графика. */
.lte-chart-card { padding: 16px 16px 10px; }
.lte-chart { position: relative; }
.lte-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Сетка и оси — хайрлайны на тон от поверхности, сплошные: пунктир читался бы
   как «порог» или «прогноз», хотя это просто сетка. */
.lte-grid { stroke: var(--line); stroke-width: 1; }
.lte-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.lte-ytick { text-anchor: end; }

.lte-line { fill: none; stroke: var(--blue); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.lte-area { fill: url(#lteFill); stroke: none; }
.lte-fill-a { stop-color: var(--blue); stop-opacity: .22; }
.lte-fill-b { stop-color: var(--blue); stop-opacity: 0; }

.lte-cross { stroke: var(--muted); stroke-width: 1; opacity: .45; }
/* Кольцо цветом поверхности вместо обводки — точка не «обрисована», а приподнята. */
.lte-dot { fill: var(--blue); stroke: #fff; stroke-width: 2; }

.lte-tip {
  position: absolute; top: 2px; pointer-events: none; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--ink);
  background: rgba(255,255,255,.92); border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgba(20,30,60,.10);
}
.lte-note { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.lte-empty { padding: 18px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* Разбивка расхода CDN по нодам: строка итога раскрывается по клику.
   Постоянно показывать разбивку нельзя — у большинства нода одна, и список
   дублировал бы итог; прятать совсем тоже нельзя — тогда непонятно, из чего он
   сложился. Отсюда раскрытие. */
.cdn-row { cursor: pointer; user-select: none; }
.cdn-row:focus-visible { outline: 2px solid var(--accent, #6aa); outline-offset: -2px; }
.cdn-caret { display: inline-block; margin-left: 6px; font-size: .75em; opacity: .5;
             transition: transform .15s ease; }
.cdn-row.open .cdn-caret { transform: rotate(180deg); }
.cdn-sub { display: none; }
.cdn-sub.open { display: block; }
.cdn-subrow .row-k { padding-left: 18px; opacity: .75; font-size: 13px; }
.cdn-subrow .row-v { opacity: .85; font-size: 13px; }
/* Пометка источника у ноды без логов CDN: там цифра со счётчика xray, и она
   завышена относительно соседних строк. Молча смешивать их нельзя. */
.cdn-src { margin-left: 6px; font-size: 11px; opacity: .55; white-space: nowrap; }
/* Примечания, стоящие не внутри карточки, а под ней: отступы карточки им нужно
   повторить руками, иначе текст прижимается к краю контейнера. */
.cdn-note, .spend-note { padding: 0 16px 4px; }

/* Плашка «Подозрительная активность» (proxyware). Отдельно от .warn-plate:
   там сообщение о чужой проблеме (сбои на серверах), тут — требование действия
   со сроком, поэтому и цвет тревожнее, и раскрытие внутри плашки.
   Цвета берём токенами: страница живёт и в тёмной теме. */
/* Отступ снизу — не косметика: плашка стоит вплотную над hero-блоком, и без
   зазора «Написать в поддержку» читается как часть карточки ниже. */
.pw-plate {
  margin: 12px 0 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(255,159,10,.10); border: 1px solid rgba(255,159,10,.34);
  color: var(--ink-2);
}
.pw-plate.pw-blocked {
  background: rgba(255,69,58,.10); border-color: rgba(255,69,58,.38);
}
.pw-head { font-size: 14.5px; line-height: 1.35; }
.pw-sub { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
/* <details>, а не кнопка: строгий CSP запрещает инлайновые обработчики. */
.pw-more { margin-top: 10px; }
.pw-more > summary {
  cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding: 4px 0; list-style: none;
}
.pw-more > summary::-webkit-details-marker { display: none; }
.pw-more > summary::before { content: '▸ '; }
.pw-more[open] > summary::before { content: '▾ '; }
.pw-more p { margin: 8px 0; font-size: 13.5px; line-height: 1.5; }
.pw-more ol { margin: 6px 0 8px 18px; font-size: 13.5px; line-height: 1.55; }
.pw-more li { margin: 3px 0; }
.pw-cta {
  display: inline-block; margin-top: 10px; padding: 8px 14px;
  border-radius: var(--radius-sm); text-decoration: none; font-size: 13.5px;
  font-weight: 600; background: var(--ink); color: var(--surface);
}

/* Развилка очередей в поддержке — та же, что в боте. Показывается только когда
   открытого обращения нет (вид применяется лишь к новому обращению). */
.sup-kind { margin-bottom: 10px; }
.sup-kind-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sup-kind-btn {
  flex: 1 1 180px; text-align: left; cursor: pointer;
  padding: 8px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; transition: border-color .15s, background .15s;
}
.sup-kind-btn b { display: block; font-size: 13px; font-weight: 600; }
.sup-kind-btn span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.sup-kind-btn:hover { border-color: var(--blue); }
.sup-kind-btn.on { border-color: var(--blue); background: var(--blue-50); }

/* ═══ Лента сообщества: «жидкое стекло» на карточке + сетка до четырёх в ряд ══
   Раскатано 2026-08-11 из отчёта «Карточка сообщества: пять направлений» (04).
   Блок стоит последним намеренно: он перебивает прежние правила .prop-card
   равной специфичности (заливка статусом, контур типа) порядком, а не !important —
   откат это удаление блока целиком, без разбора чужих строк.
   Трогает ТОЛЬКО ленту предложений: .mod-card (модерация) и .host-card (инбокс
   хостеров) лежат в такой же .prop-list, но у них свои классы, а сетка сужена
   до #commList. Разметка и cabinet.js не меняются. */

/* — материал карточки: подложка 16% вместо 58%, блюр 16 px, кант по четырём
     сторонам разного веса (асимметрия и читается как толщина стекла) — */
.prop-card {
  padding: 19px 18px; border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px) saturate(190%) brightness(1.03);
  backdrop-filter: blur(16px) saturate(190%) brightness(1.03);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85), inset 0 -1px 1px rgba(255,255,255,.42),
    inset 1px 0 1px rgba(255,255,255,.26), inset -1px 0 1px rgba(255,255,255,.26),
    0 1px 2px rgba(16,32,72,.05), 0 22px 46px -26px rgba(15,40,95,.42);
}
/* Диагональный глянец: mix-blend-mode:screen осветляет фон под карточкой,
   но не забеливает его — иначе стекло превращается в матовый пластик. */
.prop-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.05) 26%,
    rgba(255,255,255,0) 52%, rgba(255,255,255,.14) 100%);
}
/* Свечение в цвет типа за верхним краем — сюда ушёл цвет, который раньше красил
   рамку и заголовок. Усиление при наведении = отклик материала. */
.prop-card::after {
  content: ""; position: absolute; inset: -40% -30% auto -30%; height: 150%;
  pointer-events: none; opacity: .75; transition: opacity .3s ease;
  background: radial-gradient(46% 60% at 22% 0%,
    color-mix(in srgb, var(--tc, #6f8fd0) 26%, transparent), transparent 70%);
}
.prop-card:hover::after { opacity: 1; }
.prop-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.72); }
/* Текст поверх глянца и свечения. */
.prop-card .prop-main { position: relative; z-index: 1; }
.prop-card .prop-done-mark {
  z-index: 2; background: linear-gradient(150deg, rgba(52,199,89,.9), rgba(26,158,66,.9));
}

/* — иерархия: заголовок герой, бейджи над ним — */
.prop-card .prop-title {
  font-size: 17px; font-weight: 680; line-height: 1.28; letter-spacing: -.022em; color: var(--ink);
}
.prop-card .prop-body { -webkit-line-clamp: 2; color: #4a5260; }
.prop-card .prop-badges { order: -1; margin: 0 0 11px; }

/* Цвет типа больше не красит ни рамку, ни заголовок: он живёт в бейдже и свечении. */
.prop-card.t-idea, .prop-card.t-bug, .prop-card.t-security { border-color: rgba(255,255,255,.4); }
.prop-card.t-idea:hover, .prop-card.t-bug:hover, .prop-card.t-security:hover { border-color: rgba(255,255,255,.72); }
.prop-card.t-idea .prop-title, .prop-card.t-bug .prop-title, .prop-card.t-security .prop-title { color: var(--ink); }

/* Заливка статусом снята — состояние несёт светящаяся пилюля, а не фон карточки:
   в ленте из двадцати штук заливка давала лоскутное одеяло и убивала стекло. */
.prop-card.s-in_progress, .prop-card.s-done {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4);
}
.prop-card.s-in_progress:hover, .prop-card.s-done:hover { border-color: rgba(255,255,255,.72); }
.prop-card.s-in_progress .prop-title { color: var(--ink); }
/* padding-right оставлен: заголовок не должен заезжать под угловую галочку. */
.prop-card.s-done .prop-title { color: var(--ink); padding-right: 30px; }

/* — бейдж и статус: стекло вместо плашек — */
.prop-card .prop-badge {
  background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.8); color: var(--tc-tt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.prop-card .prop-badge .pb-ico { color: var(--tc); }
.prop-card .prop-status {
  background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -8px rgba(15,45,110,.6);
}
.prop-card .prop-status.st-in_progress {
  color: #0a5fce; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 14px -4px rgba(10,132,255,.55);
}
.prop-card .prop-status.st-done {
  color: #17803e; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 14px -4px rgba(52,199,89,.55);
}

/* — подвал и голос — */
.prop-card .prop-foot { border-top: 1px solid rgba(255,255,255,.6); padding-top: 13px; }
.prop-card .prop-foot .vote-btn {
  background: rgba(255,255,255,.5); border-color: rgba(255,255,255,.85);
  min-height: 42px; padding: 0 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.prop-card .prop-foot .vote-btn.voted {
  background: linear-gradient(155deg, rgba(64,161,255,.92), rgba(10,79,214,.92));
  border-color: rgba(255,255,255,.5);
}

/* ── Сетка ленты: 1 → 2 → 3 → 4 ──────────────────────────────────────────────
   Ступени фиксированные, а не auto-fill: auto-fill считает колонки от minmax(300px)
   и меняет их число от любой правки отступов или ширины рельса — сколько карточек
   в ряду, должно быть решением, а не следствием.
   Арифметика ширины: контейнер − 40 (падинги .cab-container) − 208 (рельс)
   − 26 (гэп .comm-layout) = ширина ленты. 1240 → 3×312 px, 1400 → 4×271 px,
   1560 → 4×311 px. Ниже 1240 контейнер остаётся прежним (960 → 2×336 px).
   Сужено до #commList: ту же .prop-list используют модерация и инбокс хостеров. */
/* Каждое правило ступени написано через `:has(#commList)` — тем же селектором,
   что расширяет контейнер, и это не стилистика. Браузер без поддержки :has()
   отбрасывает такой селектор целиком: контейнер остаётся 960 И колонки остаются
   прежними (auto-fill). Напиши я колонки просто через `#commList`, там четыре
   колонки встали бы в контейнер 960 — по 157 px на карточку.
   Порог 900, а не 720: при рельсе 208 и гэпе 26 лента на 760 px шириной всего
   486 — две колонки дали бы 236 px. Две умещаются от 900 (306 px). */
@media (min-width: 900px) {
  .cab-container.cab-wide:has(#commList) .prop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px;
  }
}
@media (min-width: 1240px) {
  .cab-container.cab-wide:has(#commList) { max-width: 1240px; }
  .cab-container.cab-wide:has(#commList) .prop-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .cab-container.cab-wide:has(#commList) { max-width: 1400px; }
  .cab-container.cab-wide:has(#commList) .prop-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* На четырёх в ряд карточка ~271 px, и шесть полей подвала в неё не влезают:
     дата — самое дешёвое из них, точная дата есть в модалке карточки. */
  .cab-container.cab-wide:has(#commList) .prop-date,
  .cab-container.cab-wide:has(#commList) .prop-dot { display: none; }
}
@media (min-width: 1600px) {
  .cab-container.cab-wide:has(#commList) { max-width: 1560px; }
}
/* Композитор: два блюра на карточку × четыре в ряд — уважаем системную настройку. */
@media (prefers-reduced-motion: reduce) {
  .prop-card::after { transition: none; }
  .prop-card:hover { transform: none; }
}

/* ═══ Уведомления: колокол в шапке + лента (#/notices) ══════════════════════
   Кнопка стоит в .cab-topbar, а не пятой вкладкой внизу: там уже четыре, и
   пятая на 360 px ужимает подписи до нечитаемых (см. правило
   .cab-bottomnav:has(.bnav-item:nth-child(4)) выше — оно и появилось ради
   четвёртой). Шапка липкая, поэтому колокол доступен с любого экрана.        */

.top-bell {
  position: relative; display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; margin-right: -6px; border-radius: 50%;
  color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
}
.top-bell svg { width: 21px; height: 21px; }
.top-bell:hover { background: var(--blue-50); color: var(--blue); }
.top-bell.has-new { color: var(--blue); }

/* Бейдж — тот же красный, что у очереди модерации на «Сообществе»
   (.bnav-badge): один и тот же смысл «тебя ждут» обязан выглядеть одинаково. */
.top-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(255,255,255,.92);
}

/* Лента. Карточка-список как у остальных разделов, но строки кликабельны
   целиком: у уведомления одна цель, и попадать в мелкую ссылку незачем.       */
.nt-list {
  background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius); overflow: hidden;
  -webkit-backdrop-filter: blur(20px) saturate(175%);
          backdrop-filter: blur(20px) saturate(175%);
  box-shadow: var(--shadow);
}
.nt-row {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px 13px 12px; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: background .15s;
}
.nt-row:last-child { border-bottom: 0; }
.nt-row:hover { background: rgba(255,255,255,.5); }

/* Точка непрочитанного слева — состояние строки, а не украшение: прочитанные
   держат её место пустым, поэтому список не «прыгает» после отметки.          */
.nt-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 15px; background: transparent; }
.nt-row.unread .nt-dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(10,132,255,.16); }

.nt-ico {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; margin-top: 1px;
}
.nt-ico svg { width: 17px; height: 17px; }
/* Тон = смысл события, а не тип: одобрено — зелёное, отклонено — красное,
   движение и ответы — синие, поток изменений для админа — нейтральный. */
.nt-ico.t-good { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.nt-ico.t-bad  { color: var(--red);   background: color-mix(in srgb, var(--red) 12%, transparent); }
.nt-ico.t-info { color: var(--blue);  background: var(--blue-50); }
.nt-ico.t-mute { color: var(--muted); background: rgba(120,130,150,.10); }

.nt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nt-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.nt-row.unread .nt-t { font-weight: 700; }
.nt-d {
  font-size: 12.5px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nt-w { font-size: 11px; color: var(--slate); margin-top: 2px; }

/* ── Карта ветра: сервер как персонаж (канарейка NODE_STATS_VIEWERS) ──────────
   Серверы у нас названы ветрами, поэтому карточка сделана коллекционной картой:
   рейтинг в углу, флаг и протокол справа, портрет-поток, имя, шесть
   характеристик и эффекты состояния снизу. Референс композиции — карточка
   футболиста (рейтинг + позиция + флаг одним блоком, шесть статов, имя под
   портретом).
   ⚠️ Металл карты (бронза/серебро/золото) идёт от РЕЙТИНГА, а не от состояния:
   класс карты говорит о качестве машины, а сиюминутная беда живёт эффектом.
   Поэтому золотая карта с меткой «Канал зажат» — не противоречие, а точная
   картина: машина хорошая, но сейчас её режут.
   Откат = снять этот блок (разметка без него просто не получит вида).          */
.ns-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); }
.ns-card {
  --steel: #111A2F; --frost: #E8EEFA; --dim: #6E7E9C;
  --gust: #5FE3D8; --ember: #FFA84C; --alarm: #FF6363;
  position: relative; overflow: hidden; border-radius: 18px; isolation: isolate;
  display: flex; flex-direction: column; color: var(--frost);
  background: linear-gradient(168deg, #18243F, var(--steel) 46%, #0D1526);
  border: 1px solid #26334F;
  box-shadow: 0 26px 52px -30px rgba(6, 14, 32, .75), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.ns-card:hover { transform: translateY(-3px); box-shadow: 0 34px 64px -28px rgba(6,14,32,.85); }
/* Металл: бронза / серебро / золото / особая. */
.ns-card.bronze { --rar: rgba(201,131,78,.85); --metal: #C9834E; --tint: rgba(201,131,78,.10); }
.ns-card.silver { --rar: rgba(197,208,222,.85); --metal: #D7DEE7; --tint: rgba(197,208,222,.09); }
.ns-card.gold   { --rar: rgba(232,192,121,.9);  --metal: #F2D48A; --tint: rgba(232,192,121,.10); }
.ns-card.icon   { --rar: rgba(159,231,255,.95); --metal: #BFE9FF; --tint: rgba(120,205,255,.12); }
/* Кант в цвет металла — тонкая рамка градиентом, без «наклеенной» обводки. */
.ns-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px; padding: 1px; z-index: 3;
  background: linear-gradient(160deg, var(--rar), transparent 42%, transparent 62%, var(--rar));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.ns-card::after {
  content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(168deg, var(--tint), transparent 40%);
}
.ns-head {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; padding: 0 0 12px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ns-head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(95,227,216,.4); border-radius: 18px; }

/* ── Шапка: рейтинг, флаг, протокол ──────────────────────────────────────── */
.ns-top {
  position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto;
  gap: 8px 12px; align-items: start; padding: 13px 15px 0;
}
.ns-ovr { font-family: 'Oswald', var(--font); line-height: .92; }
.ns-ovr b { display: block; font-size: 38px; font-weight: 600; color: var(--metal); }
.ns-ovr span { font-size: 9.5px; letter-spacing: .16em; color: var(--dim); }
.ns-role { justify-self: end; text-align: right; }
.ns-role .flag-wrap { width: 26px; height: 19px; }
.ns-proto { display: block; font-family: 'Oswald', var(--font); font-size: 9.5px;
  letter-spacing: .13em; color: #A8B6D0; margin-top: 5px; }
.ns-grade { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-family: 'Oswald', var(--font); font-size: 9.5px; letter-spacing: .18em; color: var(--metal); opacity: .8; }
.ns-grade i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--rar), transparent); }

/* ── Портрет: поток, нарисованный по имени сервера ───────────────────────── */
.ns-art { position: relative; height: 132px; margin: -38px 0 0; }
.ns-art canvas { display: block; width: 100%; height: 100%; }
.ns-art::after { content: ''; position: absolute; inset: auto 0 0; height: 54px;
  background: linear-gradient(180deg, transparent, var(--steel) 92%); }
.ns-name { position: relative; z-index: 2; margin-top: -28px; padding: 0 14px; text-align: center; }
.ns-name b { display: block; font-family: 'Oswald', var(--font); font-size: 23px; font-weight: 600;
  letter-spacing: .02em; color: var(--metal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-name span { font-size: 11px; color: var(--dim); }

/* ── Характеристики ──────────────────────────────────────────────────────── */
.ns-stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px 12px; padding: 12px 15px 4px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
.ns-st { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; }
.ns-st span { font-family: 'Oswald', var(--font); font-size: 10px; letter-spacing: .12em; color: var(--dim); }
.ns-st b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-st b i { font-style: normal; font-size: 9.5px; font-weight: 500; color: var(--dim); margin-left: 2px; }
.ns-st.hi b { color: var(--gust); } .ns-st.mid b { color: #E8C079; } .ns-st.low b { color: var(--ember); }
.ns-st.none b { color: var(--dim); font-weight: 600; }

/* ── Эффекты состояния ───────────────────────────────────────────────────── */
.ns-eff { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 0; }
.eff { display: inline-flex; align-items: center; gap: 6px; border: 1px solid; border-radius: 3px;
  font-family: 'Oswald', var(--font); font-size: 10.5px; letter-spacing: .07em; padding: 4px 9px; }
.eff::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.eff.ok   { color: var(--gust);  border-color: rgba(95,227,216,.32); background: rgba(95,227,216,.07); }
.eff.warn { color: var(--ember); border-color: rgba(255,168,76,.4);  background: rgba(255,168,76,.09); }
.eff.bad  { color: var(--alarm); border-color: rgba(255,99,99,.4);   background: rgba(255,99,99,.09); }
.eff.idle { color: var(--dim);   border-color: rgba(168,182,208,.25); background: rgba(168,182,208,.06); }

/* ── Раскрытие ───────────────────────────────────────────────────────────── */
.ns-fold { position: relative; z-index: 2; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.ns-card.is-open .ns-fold { grid-template-rows: 1fr; }
.ns-fold > div { overflow: hidden; }
.ns-open { padding: 12px 15px 14px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.ns-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0;
  font-size: 12px; color: var(--dim); }
.ns-row span { min-width: 0; }
.ns-row + .ns-row { border-top: 1px solid rgba(255,255,255,.05); }
.ns-row b { font-size: 13px; font-weight: 700; color: #E8EEFA; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-probe { margin-top: 10px; font-size: 11px; line-height: 1.5; color: #A8B6D0;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; }
.ns-probe b { font-weight: 700; color: #E8EEFA; }
.ns-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  font-family: 'Oswald', var(--font); font-size: 12px; letter-spacing: .08em; color: var(--gust); }
.ns-more .node-chev { width: 15px; height: 15px; color: currentColor; }
.ns-more:hover .node-chev { transform: translateX(2px); }
.ns-hint { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--muted); text-align: center; }