/* ═══════════ NEXLY UI — ADDITIONS ═══════════
   Подключается ПОСЛЕ base.css. Содержит:
     1. Auth-page фикс ширины + canvas-фон + правая визуальная сторона
     2. UIKit — модалы / тосты
     3. Виртуализированный список профилей
     4. Уточнения навигации (выравнивание по центру)
     5. Иконки внутри inputs
*/

/* ───────── 1. AUTH PAGE — фон, фикс ширины, правая сторона ───────── */

.auth-bg-canvas{
  position:fixed;
  inset:0;
  width:100vw;height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:.85;
}

/* auth-container: гарантирует, что карточка ВСЕГДА одной ширины */
.auth-container{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* override auth-card: фиксируем размер и НЕ даём ужиматься */
.auth-page .auth-card{
  width:920px;
  max-width:100%;
  min-height:580px;
  /* Стекло-эффект поверх анимированного фона */
  background:linear-gradient(180deg, rgba(17,24,39,.92), rgba(13,21,37,.92));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(99,102,241,.18);
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(99,102,241,.06) inset;
}

/* Левая часть — уравниваем все секции (login/register/verify/reset) */
.auth-page .auth-left{
  min-height:580px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.auth-section-body{ display:flex; flex-direction:column; }

/* auth-brand stack: оборачиваем лого, glow и партиклы */
.auth-brand-stack{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.auth-brand .auth-logo{
  width:62px;height:62px;border-radius:16px;
  background:linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  box-shadow:
    0 0 32px rgba(99,102,241,.45),
    0 0 60px rgba(139,92,246,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.auth-brand .auth-logo svg{ width:32px; height:32px; }

/* Поля ввода с иконкой слева */
.field .input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.field .input-wrap .input-icon{
  position:absolute;
  left:12px;
  color:var(--t4);
  pointer-events:none;
  transition:.2s;
}
.field .input-wrap input{
  padding-left:36px;
  width:100%;
}
.field .input-wrap input:focus + .input-icon,
.field .input-wrap:focus-within .input-icon{ color:var(--accent2); }

/* Auth or-divider — было inline, выносим */
.auth-or-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 4px;
}
.auth-or-divider .auth-or-line{
  flex:1; height:1px; background:var(--border);
}
.auth-or-divider span{
  font-size:11px;
  color:var(--t4);
  letter-spacing:.5px;
  text-transform:uppercase;
}

.auth-google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; }

.auth-switch{ text-align:center; margin-top:14px; }
.auth-switch .auth-forgot-link{
  display:inline-block;
  font-size:12px;
  color:var(--t4);
  cursor:pointer;
  margin-bottom:10px;
  transition:.15s;
}
.auth-switch .auth-forgot-link:hover{ color:var(--accent2); }
.auth-switch-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
  color:var(--t4);
}
.auth-switch-row a{ color:var(--accent2); cursor:pointer; font-weight:600; }

/* ═══ AUTH RIGHT — насыщенный визуал ═══ */
.auth-page .auth-right{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 10%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(ellipse at 70% 90%, rgba(99,102,241,.15), transparent 60%),
    linear-gradient(135deg, #0F0B2E 0%, #0B1120 50%, #0A1628 100%);
  min-height:580px;
  display:flex;
  flex-direction:column;
}
.auth-fp-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}
.auth-right-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%, black, transparent);
  pointer-events:none;
  z-index:0;
}
.auth-right-glow{
  position:absolute;
  width:280px;height:280px;
  border-radius:50%;
  filter:blur(60px);
  z-index:0;
  pointer-events:none;
}
.auth-right-glow-1{
  background:rgba(99,102,241,.35);
  top:-80px; right:-60px;
  animation:fpGlow1 9s ease-in-out infinite;
}
.auth-right-glow-2{
  background:rgba(236,72,153,.20);
  bottom:-80px; left:-50px;
  animation:fpGlow2 11s ease-in-out infinite;
}
@keyframes fpGlow1{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.7; }
  50%{ transform:translate(20px,30px) scale(1.1); opacity:1; }
}
@keyframes fpGlow2{
  0%,100%{ transform:translate(0,0) scale(1); opacity:.6; }
  50%{ transform:translate(-15px,-25px) scale(1.08); opacity:.9; }
}

.auth-right-content{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:36px 32px;
}

/* Live fingerprint card — стекло сверху на canvas */
.auth-fp-card{
  background:rgba(17,24,39,.55);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:18px 18px 14px;
  box-shadow:0 12px 36px rgba(0,0,0,.35);
}
.auth-fp-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.auth-fp-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:100px;
  background:rgba(34,197,94,.12);
  color:#86efac;
  font:600 10px var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.auth-fp-pill-dot{
  width:6px; height:6px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px rgba(34,197,94,.7);
  animation:fpPulse 1.6s ease-in-out infinite;
}
@keyframes fpPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(.85); }
}
.auth-fp-meta{
  font:600 9px var(--mono);
  color:var(--t4);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.auth-fp-rows{ display:flex; flex-direction:column; gap:8px; }
.auth-fp-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:500 11px var(--f);
  color:var(--t3);
}
.auth-fp-mono{ font-family:var(--mono); color:var(--t2); font-weight:600; font-size:11px; }
.auth-fp-val{ display:flex; align-items:center; gap:6px; }
.auth-fp-badge{
  font:600 9px var(--f);
  padding:2px 7px;
  border-radius:4px;
  letter-spacing:.05em;
}
.auth-fp-badge.ok{ color:#86efac; background:rgba(34,197,94,.14); }

.auth-right-bottom{
  margin-top:auto;
  padding-top:24px;
}
.auth-right-bottom h3{
  font:700 18px var(--f);
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-.01em;
}
.auth-right-bottom p{
  font:400 13px/1.55 var(--f);
  color:rgba(255,255,255,.7);
  margin-bottom:14px;
  max-width:340px;
}

/* Mobile: правый блок прячем (как и раньше), форма по центру */
@media (max-width: 768px){
  .auth-page .auth-card{
    width:100%;
    max-width:480px;
    grid-template-columns:1fr;
    min-height:auto;
  }
  .auth-page .auth-left{ min-height:auto; padding:32px 24px; }
  .auth-page .auth-right{ display:none; }
  .auth-bg-canvas{ opacity:.55; }
}

/* ───────── 2. UI KIT — модалы и тосты ───────── */

.uikit-root{ position:relative; z-index:9000; }

.uikit-overlay{
  position:fixed;
  inset:0;
  background:rgba(8,14,26,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9000;
  opacity:0;
  transition:opacity .18s ease-out;
  padding:20px;
}
.uikit-overlay.is-open{ opacity:1; }

.uikit-dialog{
  width:100%;
  max-width:460px;
  background:linear-gradient(180deg, #131C2D 0%, #0E1626 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.04) inset;
  transform:translateY(8px) scale(.97);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.uikit-overlay.is-open .uikit-dialog{ transform:translateY(0) scale(1); }
.uikit-dialog--danger{ border-color:rgba(239,68,68,.25); }

.uikit-dialog__head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.uikit-dialog__icon{
  width:42px; height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.uikit-dialog__icon.is-info{
  background:rgba(99,102,241,.12);
  color:var(--accent2);
}
.uikit-dialog__icon.is-danger{
  background:rgba(239,68,68,.12);
  color:#fca5a5;
}
.uikit-dialog__title-wrap{ flex:1; min-width:0; }
.uikit-dialog__title{
  font:700 16px var(--f);
  color:var(--t);
  margin:0 0 4px;
  line-height:1.3;
}
.uikit-dialog__message{
  font:400 13px/1.55 var(--f);
  color:var(--t2);
  margin:0;
  word-wrap:break-word;
}

.uikit-dialog__type{ margin-bottom:16px; }
.uikit-dialog__type label{
  display:block;
  font:500 12px var(--f);
  color:var(--t3);
  margin-bottom:6px;
}
.uikit-dialog__type label code{
  font:700 11px var(--mono);
  background:rgba(239,68,68,.12);
  color:#fca5a5;
  padding:2px 8px;
  border-radius:4px;
  letter-spacing:.04em;
}
.uikit-dialog__type-input{
  width:100%;
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--elevated);
  color:var(--t);
  font:500 13px var(--mono);
  outline:none;
  transition:.2s;
}
.uikit-dialog__type-input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(239,68,68,.1);
}

.uikit-dialog__actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:8px;
}
.uikit-dialog__cancel{ min-width:90px; }

/* Опасная кнопка */
.uikit-btn-danger{
  background:#EF4444;
  color:#fff;
  box-shadow:0 0 20px rgba(239,68,68,.25);
  border:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 16px;
  border-radius:8px;
  font:600 12px var(--f);
  cursor:pointer;
  transition:.2s;
}
.uikit-btn-danger:hover{
  background:#DC2626;
  box-shadow:0 0 24px rgba(239,68,68,.35);
  transform:translateY(-1px);
}
.uikit-btn-danger:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
}

/* Toasts */
.uikit-toasts{
  position:fixed;
  bottom:20px;
  right:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:9100;
  pointer-events:none;
  max-width:calc(100vw - 40px);
}
.uikit-toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:linear-gradient(180deg, #1A2338, #131B2A);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);
  min-width:280px;
  max-width:380px;
  opacity:0;
  transform:translateX(20px);
  transition:opacity .22s, transform .22s;
}
.uikit-toast.is-open{ opacity:1; transform:translateX(0); }
.uikit-toast__icon{ flex-shrink:0; display:flex; }
.uikit-toast__text{
  font:500 13px/1.4 var(--f);
  color:var(--t);
}
.uikit-toast--success{ border-color:rgba(34,197,94,.3); }
.uikit-toast--success .uikit-toast__icon{ color:#22c55e; }
.uikit-toast--error{ border-color:rgba(239,68,68,.3); }
.uikit-toast--error .uikit-toast__icon{ color:#ef4444; }
.uikit-toast--info{ border-color:rgba(99,102,241,.3); }
.uikit-toast--info .uikit-toast__icon{ color:var(--accent2); }

@media (max-width: 480px){
  .uikit-toasts{ bottom:12px; right:12px; left:12px; }
  .uikit-toast{ min-width:0; max-width:none; }
  .uikit-dialog{ padding:20px; border-radius:14px; }
  .uikit-dialog__actions{ flex-direction:column-reverse; }
  .uikit-dialog__actions .btn{ width:100%; }
}

/* ───────── 3. PROFILES VIRTUAL LIST ───────── */

.pf-list{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border-s);
  border-radius:var(--r-lg);
  overflow:hidden;
}

.pf-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border-s);
  background:rgba(11,17,32,.5);
}
.pf-search{
  flex:1;
  position:relative;
  display:flex;
  align-items:center;
  max-width:380px;
}
.pf-search > svg{
  position:absolute;
  left:12px;
  color:var(--t4);
  pointer-events:none;
}
.pf-search-input{
  width:100%;
  padding:9px 12px 9px 34px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--elevated);
  color:var(--t);
  font:400 13px var(--f);
  outline:none;
  transition:.15s;
}
.pf-search-input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}
.pf-search-input::-webkit-search-cancel-button{ filter:invert(.6); }

.pf-stats{
  font:500 12px var(--f);
  color:var(--t3);
  margin-left:auto;
  white-space:nowrap;
}
.pf-delete-all{
  border-color:rgba(239,68,68,.4);
  color:#fca5a5;
}
.pf-delete-all:hover{
  background:rgba(239,68,68,.06);
  border-color:#ef4444;
  color:#ef4444;
}
.pf-delete-all svg{ display:inline-block; vertical-align:middle; }

/* Bulk bar — появляется когда есть выделенные */
.pf-bulk{
  display:none;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  background:linear-gradient(90deg, rgba(99,102,241,.10), rgba(139,92,246,.06));
  border-bottom:1px solid rgba(99,102,241,.18);
}
.pf-bulk.is-active{ display:flex; }
.pf-bulk-label{
  font:600 12px var(--f);
  color:var(--accent2);
}
.pf-bulk button{ margin-left:auto; }
.pf-bulk button + button{ margin-left:8px; }

/* Header */
.pf-header{
  display:grid;
  grid-template-columns:32px 38px 1fr 160px 38px;
  gap:12px;
  align-items:center;
  padding:10px 16px;
  background:rgba(11,17,32,.3);
  border-bottom:1px solid var(--border-s);
  font:600 10px var(--f);
  color:var(--t4);
  letter-spacing:.06em;
  text-transform:uppercase;
  position:sticky;
  top:0;
  z-index:1;
}
.pf-h-name{ grid-column:3 / 4; }
.pf-h-meta{ display:none; }
.pf-h-date{ grid-column:4 / 5; text-align:right; }
.pf-h-act{ grid-column:5 / 6; }

/* Viewport — фиксированная высота, скроллится */
.pf-viewport{
  position:relative;
  height:520px;
  max-height:60vh;
  overflow-y:auto;
  overflow-x:hidden;
}
.pf-viewport::-webkit-scrollbar{ width:6px; }
.pf-viewport::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.pf-spacer{ position:relative; width:100%; }
.pf-window{
  position:absolute;
  top:0; left:0; right:0;
  will-change:transform;
}

/* Row */
.pf-row{
  display:grid;
  grid-template-columns:32px 38px 1fr 160px 38px;
  gap:12px;
  align-items:center;
  padding:0 16px;
  border-bottom:1px solid var(--border-s);
  transition:background .12s;
  cursor:default;
}
.pf-row:hover{ background:var(--hover); }
.pf-row.is-selected{ background:rgba(99,102,241,.06); }
.pf-row.is-selected:hover{ background:rgba(99,102,241,.10); }

.pf-cb{
  width:16px; height:16px;
  accent-color:var(--accent);
  cursor:pointer;
}
.pf-cb-all{ margin:0; }

.pf-avatar{
  width:34px; height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:700 13px var(--f);
  flex-shrink:0;
}

.pf-main{ min-width:0; }
.pf-name{
  display:flex;
  align-items:center;
  gap:8px;
  font:600 13px var(--f);
  color:var(--t);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:3px;
}
.pf-hash{
  font:500 10px var(--mono);
  color:var(--t4);
  background:var(--elevated);
  padding:1px 6px;
  border-radius:4px;
  letter-spacing:.02em;
  flex-shrink:0;
}
.pf-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.pf-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:500 10px var(--f);
  padding:2px 7px;
  border-radius:4px;
  border:1px solid transparent;
  white-space:nowrap;
}
.pf-chip svg{ flex-shrink:0; }
.pf-chip--fp{ color:var(--accent2); background:rgba(99,102,241,.10); }
.pf-chip--proxy{ color:var(--t3); background:var(--elevated); max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.pf-chip--proxy span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.pf-chip--cookies{ color:#86efac; background:rgba(34,197,94,.10); }
.pf-chip--encrypted{ color:#fde68a; background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.25); }

.pf-date{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  font:500 11px var(--mono);
  color:var(--t4);
  text-align:right;
}
.pf-date-icon{ display:flex; color:var(--t4); }

.pf-actions{ display:flex; gap:4px; justify-content:flex-end; }
.pf-action-btn{
  width:32px; height:32px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--t4);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s;
}
.pf-action-btn:hover{ background:var(--hover); color:var(--t2); }
.pf-action-del:hover{ background:rgba(239,68,68,.10); color:#ef4444; }

.pf-empty{
  padding:60px 20px;
  text-align:center;
  color:var(--t4);
  font:500 13px var(--f);
}

@media (max-width: 768px){
  .pf-header{
    grid-template-columns:28px 34px 1fr 38px;
    padding:8px 12px;
  }
  .pf-h-date{ display:none; }
  .pf-h-act{ grid-column:4 / 5; }
  .pf-row{
    grid-template-columns:28px 34px 1fr 38px;
    padding:10px 12px;
  }
  .pf-date{ display:none; }
  .pf-toolbar{
    flex-wrap:wrap;
    padding:12px;
  }
  .pf-search{ max-width:none; flex-basis:100%; }
  .pf-stats{ margin-left:0; font-size:11px; }
  .pf-viewport{ height:440px; }

  /* ═══ Bulk-bar на мобиле ═══
     На десктопе bar один ряд: «Выбрано: 1 | Снять выделение | Удалить
     выбранные». На 380px (Android) три блока + gap + padding не помещаются —
     кнопка «Удалить выбранные» уезжала за правый край и обрезалась
     overflow:hidden у родителя (см. скрин #4 от юзера).

     Решение: переключаем .pf-bulk в двухстрочный layout. Label наверху,
     кнопки внизу — обе на одинаковую долю ширины через flex:1, gap:8.
     `margin-left:auto` у кнопок убираем (он работает только в одну
     строку и ломает wrap). */
  .pf-bulk{
    flex-wrap:wrap;
    padding:10px 12px;
    gap:8px;
  }
  .pf-bulk-label{ flex-basis:100%; }
  .pf-bulk button{
    margin-left:0;
    flex:1 1 0;
    min-width:0;          /* разрешаем кнопке сжиматься без overflow */
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .pf-bulk button + button{ margin-left:0; }

  /* ═══ Чипы профиля (Custom / proxy / cookies / E2E) ═══
     На мобиле `1fr` колонка ~220px — два-три чипа с прокси не помещаются
     и проксиChip обрезается справа БЕЗ ellipsis (overflow обрезает
     просто визуально). Делаем pf-chip--proxy ужимаемым через max-width
     до доступной ширины + min-width:0 на родителе. */
  .pf-main{ min-width:0; max-width:100%; }
  .pf-meta{ max-width:100%; }
  .pf-chip{ max-width:100%; }
  .pf-chip--proxy{
    max-width:100%;
    min-width:0;
  }
  .pf-chip--proxy span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
  }
}

/* ───────── 4. NAV — выравнивание по центру ───────── */

/* nav-in уже имеет align-items:center, но nav-links имел flex:1 что прижимало
   логотип к левому краю и кнопки к правому, между ними была пустая зона.
   Делаем так чтобы логотип был слева, ссылки центрированы, кнопки справа. */
.nav-in{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}
.nav-in .logo{ grid-column:1 / 2; }
.nav-in .nav-links{
  grid-column:2 / 3;
  flex:0 1 auto;
  justify-content:center;
  gap:24px;
  flex-wrap:nowrap;
  min-width:0;
  overflow:hidden;
}
.nav-in .nav-right{ grid-column:3 / 4; }

/* Tabletы — навигация может не помещаться, скрываем менее важные */
@media (max-width: 1180px){
  .nav-in .nav-links{ gap:18px; }
  .nav-in .nav-links a{ font-size:12px; }
}
@media (max-width: 1024px){
  .nav-in{ grid-template-columns:auto auto; }
  .nav-in .nav-links{ display:none; }
  .nav-in .nav-right{ grid-column:2 / 3; margin-left:auto; }
}

/* ───────── 5. PRIVACY — стиль для подсветки security-call-out ───────── */
.privacy-callout{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  margin:14px 0;
  border-radius:10px;
  border:1px solid rgba(34,197,94,.25);
  background:rgba(34,197,94,.06);
}
.privacy-callout svg{
  flex-shrink:0;
  color:#22c55e;
  margin-top:2px;
}
.privacy-callout strong{ color:#86efac; }

/* ───────── 6. Pages — общий полу-прозрачный фон под канвас ───────── */
.with-bg-canvas{ position:relative; z-index:1; }

/* ───────── 7. DASHBOARD overview cards с иконками ───────── */
.dcard.dcard-with-icon{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  position:relative;
  overflow:hidden;
}
.dcard.dcard-with-icon::after{
  content:'';
  position:absolute;
  top:-30%; right:-30%;
  width:120px; height:120px;
  background:radial-gradient(circle, var(--ic, var(--accent2)) 0%, transparent 70%);
  opacity:.06;
  pointer-events:none;
}
.dcard-icon{
  flex-shrink:0;
  width:40px; height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--ic, var(--accent)) 12%, transparent);
  color:var(--ic, var(--accent2));
}
@supports not (background: color-mix(in srgb, red, blue)){
  .dcard-icon{ background:rgba(99,102,241,.12); }
}

/* ───────── 8. DOWNLOAD page — карточки требований ───────── */
.dl-req-card{
  margin-top:48px;
  padding:24px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(11,17,32,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.dl-req-card h3{
  margin:0 0 16px;
  font:600 16px var(--f);
  color:var(--t);
  display:flex;
  align-items:center;
}
.dl-req-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.dl-req-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:8px;
  background:var(--elevated);
  color:var(--t2);
  font:400 13px/1.4 var(--f);
}
.dl-req-item svg{ color:var(--accent2); flex-shrink:0; }
.dl-req-item strong{ color:var(--t); font-weight:600; margin-right:4px; }

.dl-version-card{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:32px;
  padding:18px 20px;
  border-radius:12px;
  border:1px solid rgba(99,102,241,.22);
  background:rgba(99,102,241,.06);
  color:var(--t2);
  font-size:13px;
  text-align:center;
}
.dl-version-card svg{ color:var(--accent2); flex-shrink:0; }
.dl-version-card p{ margin:0; }
.dl-version-card strong{ color:var(--accent2); font-weight:700; }

.dl-sha-card{
  margin-top:16px;
  padding:16px 20px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(11,17,32,.6);
}
.dl-sha-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--t3);
  font-size:13px;
}
.dl-sha-head strong{ color:var(--t); }
.dl-sha-head svg{ color:var(--accent2); flex-shrink:0; }
.dl-sha-card code{
  display:block;
  font:500 12px var(--mono);
  word-break:break-all;
  color:var(--t);
  line-height:1.5;
  letter-spacing:.02em;
}

@media (max-width:560px){
  .dl-req-grid{ grid-template-columns:1fr; }
  .dl-version-card{ flex-direction:column; gap:6px; }
}

/* ───────── 9. Verify code input — крупная цифровая стилизация ───────── */
.verify-code-input{
  text-align:center;
  letter-spacing:.5em;
  font-family:var(--mono) !important;
  font-size:18px !important;
  font-weight:600 !important;
}
.verify-icon-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

/* ═══════════════════════════════════════════════════════════
   10. SECURITY PANEL — hero-shield + плотная сетка карточек
   ═══════════════════════════════════════════════════════════ */

.sec-hero{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  padding:24px 28px;
  margin-bottom:24px;
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 30%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(139,92,246,.10), transparent 60%),
    linear-gradient(180deg, #131C2D 0%, #0E1626 100%);
  border:1px solid rgba(99,102,241,.25);
  position:relative;
  overflow:hidden;
}
.sec-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent);
  pointer-events:none;
}
.sec-hero > *{ position:relative; z-index:1; }
.sec-shield{
  width:64px; height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  box-shadow:
    0 12px 32px rgba(99,102,241,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
  position:relative;
}
.sec-shield::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:22px;
  border:1px solid rgba(99,102,241,.3);
  animation:secShieldPulse 3s ease-in-out infinite;
}
@keyframes secShieldPulse{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.9; transform:scale(1.08); }
}
.sec-hero-text h2{
  font:700 22px var(--f);
  color:var(--t);
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.sec-hero-text p{
  font:400 13px/1.5 var(--f);
  color:var(--t3);
  margin:0;
}
.sec-score{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.sec-score-ring{
  position:relative;
  width:74px; height:74px;
}
.sec-score-ring svg{
  transform:rotate(-90deg);
}
.sec-score-bg{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:6;
}
.sec-score-fg{
  fill:none;
  stroke:url(#secScoreGrad);
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.34,1.4,.64,1);
}
.sec-score-val{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:800 18px var(--f);
  color:var(--t);
}
.sec-score-label{
  font:600 10px var(--f);
  color:var(--t4);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Сетка карточек — улучшенная вёрстка */
.sec-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}
@media (max-width:920px){
  .sec-grid{ grid-template-columns:1fr; }
  .sec-hero{ grid-template-columns:auto 1fr; }
  .sec-score{ grid-column:1 / 3; flex-direction:row; gap:12px; padding-top:8px; border-top:1px solid var(--border-s); width:100%; justify-content:center; }
}

/* Карточка — улучшенный полишинг */
.sec-card{
  background:linear-gradient(180deg, rgba(19,28,45,.85) 0%, rgba(14,22,38,.85) 100%);
  border:1px solid var(--border-s);
  border-radius:14px;
  overflow:hidden;
  transition:.2s;
  display:flex;
  flex-direction:column;
}
.sec-card:hover{
  border-color:rgba(99,102,241,.25);
  transform:translateY(-1px);
}
.sec-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--border-s);
}
.sec-card-icon{
  width:36px; height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--sc, #6366f1) 18%, transparent);
  color:var(--sc, #6366f1);
  flex-shrink:0;
}
@supports not (background: color-mix(in srgb, red, blue)){
  .sec-card-icon{ background:rgba(99,102,241,.18); }
}
.sec-card-head h3{
  font:600 15px var(--f);
  color:var(--t);
  margin:0;
  letter-spacing:-.005em;
}
.sec-card-body{
  padding:18px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.sec-info-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  font:400 13px var(--f);
  color:var(--t3);
}
.sec-info-row + .sec-info-row{
  border-top:1px solid var(--border-s);
}
.sec-info-row > span:last-child{
  color:var(--t);
  font-weight:600;
  font-family:var(--mono);
  font-size:12px;
}
.sec-status{
  font:600 13px var(--f);
  padding:8px 12px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.sec-status::before{
  content:'';
  width:8px; height:8px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 8px currentColor;
}
/* ═══ Цветовые модификаторы для .sec-status ═══
   Раньше тут был селектор `.sec-status:has(+ p)`, который красил статус
   в красный фон, если у него был sibling-<p>. Это срабатывало даже на
   успешных состояниях (например, «✓ Привязан: @username» — у него
   следующим идёт <p class="sec-hint">). Получался зелёный текст на
   красном фоне — UX-баг.

   Теперь цвет управляется ТОЛЬКО через классы `.is-good` / `.is-bad`,
   которые явно ставятся из JS (Auth.renderTelegram, _setSecStatus и т.д.).
   Атрибутные селекторы [data-i18n*="Disabled"] тоже убрал — они хрупкие
   (не работают, если data-i18n переключился из JS) и легко ломаются при
   изменении ключей локализации. */
.sec-status.is-bad,
#tfa-disabled .sec-status{
  color:#fca5a5;
  background:rgba(239,68,68,.10);
}
.sec-status.is-good,
.sec-status.verified{
  color:#86efac;
  background:rgba(34,197,94,.10);
}
.sec-status.is-neutral{
  color:var(--t3);
  background:rgba(255,255,255,.04);
}
.sec-hint{
  font:400 12px/1.5 var(--f);
  color:var(--t4);
  margin:0;
}

/* Ref-card "Реферальная программа" — добавим декоративный header */
#panel-security .sec-card:has(#refLinkInput) .sec-card-body{
  position:relative;
}
.ref-link-wrap{
  margin-top:14px;
  padding:12px;
  background:rgba(139,92,246,.06);
  border:1px solid rgba(139,92,246,.18);
  border-radius:10px;
}
.ref-link-wrap > div:first-child{
  font:600 10px var(--f);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--t4);
  margin-bottom:6px;
}
.sec-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:8px;
}

/* ═══════════════════════════════════════════════════════════
   11. TELEGRAM PANEL — hero + features + steps
   ═══════════════════════════════════════════════════════════ */

.tg-hero{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  padding:28px;
  margin-bottom:24px;
  border-radius:18px;
  background:
    radial-gradient(circle at 0% 100%, rgba(0,136,204,.18), transparent 50%),
    radial-gradient(circle at 100% 0%, rgba(34,158,217,.10), transparent 50%),
    linear-gradient(180deg, #0F1B2E 0%, #0E1626 100%);
  border:1px solid rgba(0,136,204,.30);
  position:relative;
  overflow:hidden;
}
.tg-hero::after{
  content:'';
  position:absolute;
  right:-30px; top:-30px;
  width:200px; height:200px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,136,204,.18), transparent 70%);
  pointer-events:none;
}
.tg-hero > *{ position:relative; z-index:1; }
.tg-hero-icon{
  width:72px; height:72px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #229ED9 0%, #0088CC 100%);
  box-shadow:
    0 12px 32px rgba(0,136,204,.35),
    inset 0 1px 0 rgba(255,255,255,.20);
  color:#fff;
  flex-shrink:0;
}
.tg-hero-text h2{
  font:700 22px var(--f);
  color:var(--t);
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.tg-hero-text p{
  font:400 13px/1.55 var(--f);
  color:var(--t3);
  margin:0;
  max-width:520px;
}
.tg-hero-status{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.tg-hero-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:100px;
  font:600 11px var(--f);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.tg-hero-status-pill.is-linked{
  color:#86efac;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);
}
.tg-hero-status-pill.is-unlinked{
  color:#fca5a5;
  background:rgba(239,68,68,.10);
  border:1px solid rgba(239,68,68,.20);
}
.tg-hero-status-pill > span:first-child{
  width:7px; height:7px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 6px currentColor;
}
.tg-hero-status-handle{
  font:600 12px var(--mono);
  color:var(--accent2);
}

/* Features grid — что даёт привязка */
.tg-features{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:24px 0;
}
@media (max-width:768px){
  .tg-features{ grid-template-columns:1fr; }
  .tg-hero{ grid-template-columns:auto 1fr; }
  .tg-hero-status{ grid-column:1 / 3; flex-direction:row; align-items:center; padding-top:8px; border-top:1px solid var(--border-s); width:100%; justify-content:space-between; }
}
.tg-feature{
  background:var(--card);
  border:1px solid var(--border-s);
  border-radius:14px;
  padding:18px;
  transition:.2s;
}
.tg-feature:hover{
  border-color:rgba(0,136,204,.30);
  transform:translateY(-2px);
}
.tg-feature-icon{
  width:38px; height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  background:rgba(0,136,204,.10);
  color:#229ED9;
}
.tg-feature h4{
  font:600 14px var(--f);
  color:var(--t);
  margin:0 0 6px;
  letter-spacing:-.005em;
}
.tg-feature p{
  font:400 12.5px/1.55 var(--f);
  color:var(--t3);
  margin:0;
}

/* Steps — как привязать */
.tg-steps-card{
  background:var(--card);
  border:1px solid var(--border-s);
  border-radius:14px;
  padding:22px 24px;
  margin-top:18px;
}
.tg-steps-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  font:600 16px var(--f);
  color:var(--t);
  margin:0 0 16px;
}
.tg-steps-card h3 svg{ color:var(--accent2); }
.tg-steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  position:relative;
}
.tg-steps::before{
  content:'';
  position:absolute;
  top:18px;
  left:11%;
  right:11%;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 12px);
  z-index:0;
}
.tg-step{
  position:relative;
  z-index:1;
  text-align:center;
}
.tg-step-num{
  width:36px; height:36px;
  border-radius:50%;
  background:linear-gradient(135deg, #229ED9, #0088CC);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 15px var(--f);
  margin:0 auto 10px;
  box-shadow:0 4px 12px rgba(0,136,204,.30);
  border:3px solid var(--card);
}
.tg-step h5{
  font:600 13px var(--f);
  color:var(--t);
  margin:0 0 4px;
}
.tg-step p{
  font:400 11.5px/1.5 var(--f);
  color:var(--t4);
  margin:0;
}
@media (max-width:768px){
  .tg-steps{ grid-template-columns:1fr; }
  .tg-steps::before{ display:none; }
  .tg-step{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; text-align:left; }
  .tg-step-num{ margin:0; }
}

/* ═══════════════════════════════════════════════════════════
   12. OVERVIEW PANEL — hero, статистика, банеры
   ═══════════════════════════════════════════════════════════ */

.dash-hero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:24px 28px;
  margin-bottom:24px;
  border-radius:18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(99,102,241,.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(139,92,246,.12), transparent 50%),
    linear-gradient(180deg, #131C2D 0%, #0E1626 100%);
  border:1px solid rgba(99,102,241,.20);
  position:relative;
  overflow:hidden;
}
.dash-hero::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 60% at 30% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 50%, black, transparent);
  pointer-events:none;
}
.dash-hero > *{ position:relative; z-index:1; }
.dash-hero-text h1{
  font:800 28px var(--f);
  color:var(--t);
  margin:0 0 6px;
  letter-spacing:-.02em;
  background:linear-gradient(135deg, #fff 30%, rgba(255,255,255,.65) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.dash-hero-text .dash-hero-email{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font:500 13px var(--f);
  color:var(--t3);
  padding:4px 10px;
  border-radius:6px;
  background:var(--elevated);
}
.dash-hero-text .dash-hero-email svg{ color:var(--accent2); }
.dash-hero-stats{
  display:flex;
  gap:16px;
  flex-shrink:0;
}
.dash-hero-stat{
  text-align:right;
}
.dash-hero-stat-label{
  font:600 10px var(--f);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--t4);
  margin-bottom:2px;
}
.dash-hero-stat-value{
  font:800 18px var(--f);
  color:var(--accent2);
  font-family:var(--mono);
}

/* Расширенный grid карточек */
.dash-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-bottom:24px;
}
@media (max-width:1024px){
  .dash-cards{ grid-template-columns:repeat(2, 1fr); }
  .dash-hero{ grid-template-columns:1fr; }
  .dash-hero-stats{ display:flex; }
  .dash-hero-text h1{ font-size:24px; }
}
@media (max-width:560px){
  .dash-cards{ grid-template-columns:1fr; }
  .dash-hero-stats{ flex-wrap:wrap; }
}

/* Activity widgets row */
.dash-widgets{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:18px;
  margin-bottom:24px;
}
@media (max-width:920px){ .dash-widgets{ grid-template-columns:1fr; } }
.dash-widget{
  background:linear-gradient(180deg, rgba(19,28,45,.85) 0%, rgba(14,22,38,.85) 100%);
  border:1px solid var(--border-s);
  border-radius:14px;
  padding:20px 22px;
}
.dash-widget-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.dash-widget-head h3{
  font:600 14px var(--f);
  color:var(--t);
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-.005em;
}
.dash-widget-head h3 svg{ color:var(--accent2); }

/* Чек-лист "Что улучшить" */
.dash-checklist{ display:flex; flex-direction:column; gap:10px; }
.dash-check-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  border-radius:10px;
  background:var(--elevated);
  border:1px solid transparent;
  transition:.15s;
}
.dash-check-item:hover{
  border-color:var(--border);
  background:rgba(99,102,241,.04);
}
.dash-check-item.is-done{
  background:rgba(34,197,94,.05);
  border-color:rgba(34,197,94,.18);
}
.dash-check-mark{
  width:22px; height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--card);
  border:1px solid var(--border);
  color:transparent;
  flex-shrink:0;
}
.dash-check-item.is-done .dash-check-mark{
  background:#22c55e;
  border-color:#22c55e;
  color:#fff;
}
.dash-check-text{
  font:500 13px var(--f);
  color:var(--t2);
}
.dash-check-item.is-done .dash-check-text{
  color:var(--t3);
  text-decoration:line-through;
  text-decoration-color:rgba(255,255,255,.2);
}
.dash-check-action{
  font:600 11px var(--f);
  color:var(--accent2);
  cursor:pointer;
  padding:4px 10px;
  border-radius:6px;
  background:rgba(99,102,241,.10);
  text-decoration:none;
  white-space:nowrap;
  transition:.15s;
}
.dash-check-action:hover{ background:rgba(99,102,241,.20); }
.dash-check-item.is-done .dash-check-action{ display:none; }

/* Quick actions — grid 3 шт. с большими тайлами */
.dash-actions{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
@media (max-width:560px){ .dash-actions{ grid-template-columns:1fr; } }
.dash-actions .dact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding:16px 18px;
  border-radius:12px;
  background:var(--elevated);
  border:1px solid var(--border-s);
  color:var(--t2);
  text-decoration:none;
  font:600 13px var(--f);
  transition:.15s;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.dash-actions .dact::before{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0;
  transition:.2s;
}
.dash-actions .dact:hover{
  border-color:rgba(99,102,241,.30);
  color:var(--t);
  transform:translateY(-2px);
}
.dash-actions .dact:hover::before{ opacity:1; }
.dash-actions .dact svg{
  width:22px; height:22px;
  color:var(--accent2);
}
.dash-actions .dact span{ font-size:13px; }

/* ═══════════════════════════════════════════════════════════
   13. DASHBOARD — глобальный фон с плавными вспышками
   ═══════════════════════════════════════════════════════════ */
.dash-aurora{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  /* база */
  background:
    radial-gradient(ellipse 800px 600px at 10% -10%, rgba(99,102,241,.08), transparent 50%),
    radial-gradient(ellipse 600px 800px at 100% 100%, rgba(139,92,246,.06), transparent 50%);
}
.dash-aurora::before,
.dash-aurora::after{
  content:'';
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:.18;
}
.dash-aurora::before{
  width:520px; height:520px;
  background:radial-gradient(circle, #6366F1, transparent 70%);
  top:-100px; left:-100px;
  animation:dashAurora1 28s ease-in-out infinite;
}
.dash-aurora::after{
  width:600px; height:600px;
  background:radial-gradient(circle, #EC4899, transparent 70%);
  bottom:-200px; right:-150px;
  animation:dashAurora2 32s ease-in-out infinite;
}
@keyframes dashAurora1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(120px, 80px) scale(1.15); }
}
@keyframes dashAurora2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-100px, -60px) scale(1.1); }
}
/* Поверх — едва заметная сетка точек */
.dash-aurora-grid{
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, black, transparent);
}

/* Поднять контент над фоном */
.dash-grid, .dash-side, .dash-topbar{ position:relative; z-index:1; }
.dash-content{ position:relative; z-index:1; }


/* ═══════════════════════════════════════════════════════════════════════
   SECURITY SPOTLIGHT (home page) — секция про E2E-шифрование cookies.
   Идёт между TWO PILLARS и STATS. Сделана как «открыточная» карточка с
   фоном, glow-овалами и сеткой; внутри — две колонки (текст + демо).
   На мобилке схлопывается в одну колонку.

   Все цвета берутся из переменных base.css (--surface, --border, --accent…)
   чтобы автоматически наследовать тему, если когда-нибудь сделаем светлую.
   ═══════════════════════════════════════════════════════════════════════ */
.sec-spotlight{
  position:relative;
  border:1px solid var(--border-s);
  border-radius:24px;
  padding:56px 48px;
  background:
    radial-gradient(ellipse at top left, rgba(99,102,241,.07), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(34,197,94,.05), transparent 55%),
    linear-gradient(180deg, var(--card) 0%, var(--base) 100%);
  overflow:hidden;
  isolation:isolate;
}
.sec-spot-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:inherit}
.sec-spot-grid{
  position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(rgba(99,102,241,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,.18) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 70%);
          mask-image:radial-gradient(ellipse at center, #000 30%, transparent 70%);
}
.sec-spot-glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
.sec-spot-glow-a{
  width:340px;height:340px;
  background:radial-gradient(circle, rgba(129,140,248,.6), transparent 60%);
  top:-80px;left:-80px;
}
.sec-spot-glow-b{
  width:280px;height:280px;
  background:radial-gradient(circle, rgba(34,197,94,.45), transparent 60%);
  bottom:-60px;right:-40px;
}

.sec-spot-grid-wrap{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  align-items:center;
}

/* ── Левая колонка (текст) ── */
.sec-spot-text{min-width:0}
.sec-spot-tag{margin-bottom:18px}
.sec-spot-text h2{
  font-size:clamp(26px,2.6vw,34px);font-weight:900;
  line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;color:var(--t)
}
.sec-spot-text h2 em{
  font-style:normal;
  background:linear-gradient(135deg,var(--accent2),var(--purple,#a78bfa));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text
}
.sec-spot-text > p{
  color:var(--t2);font-size:14.5px;line-height:1.65;
  margin:0 0 26px;max-width:520px
}

/* ── Список фич ── */
.sec-spot-features{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.sec-spot-feat{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.04);
  transition:background .2s ease, border-color .2s ease;
}
.sec-spot-feat:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.sec-spot-feat-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--ssc) 14%, transparent);
  color:var(--ssc);
  border:1px solid color-mix(in srgb, var(--ssc) 25%, transparent);
}
.sec-spot-feat-title{font-size:13.5px;font-weight:700;color:var(--t);margin-bottom:2px;letter-spacing:-.005em}
.sec-spot-feat-desc{font-size:12.5px;color:var(--t2);line-height:1.5}

/* ── CTA-кнопки внизу ── */
.sec-spot-cta{display:flex;gap:8px;flex-wrap:wrap}

/* ── Правая колонка (визуальный карточка-демо) ── */
.sec-spot-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:320px;
}
.sec-spot-card{
  width:100%;max-width:440px;
  background:linear-gradient(180deg, var(--surface) 0%, var(--card) 100%);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5), 0 0 0 1px rgba(99,102,241,.08);
  overflow:hidden;
  position:relative;
}
.sec-spot-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, rgba(129,140,248,.5), transparent)
}
.sec-spot-card-head{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(0,0,0,.2);
  border-bottom:1px solid var(--border-s);
}
.sec-spot-card-dots{display:flex;gap:5px}
.sec-spot-card-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.sec-spot-card-title{
  font:600 11px var(--mono);color:var(--t3);
  text-transform:uppercase;letter-spacing:.07em;
  margin-left:6px;
}
.sec-spot-card-body{padding:18px 16px;display:flex;flex-direction:column;gap:10px}

.sec-spot-row{display:flex;flex-direction:column;gap:6px}
.sec-spot-row-label{font:600 10px var(--mono);color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.sec-spot-row-val{
  display:block;
  background:var(--base);
  border:1px solid var(--border-s);
  border-radius:8px;
  padding:10px 12px;
  font:500 12px var(--mono);
  word-break:break-all;
  line-height:1.5;
}
.sec-spot-plain{color:#fbbf24;border-color:rgba(251,191,36,.15)}
.sec-spot-cipher{color:#86efac;border-color:rgba(134,239,172,.15);letter-spacing:.02em}

.sec-spot-arrow{
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:var(--accent2);
  padding:2px 0 2px;
}
.sec-spot-arrow svg{flex-shrink:0;opacity:.85}
.sec-spot-arrow-lbl{font:700 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;opacity:.85}

.sec-spot-promise{
  margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;
  background:rgba(34,197,94,.08);
  border:1px solid rgba(34,197,94,.22);
  border-radius:10px;
  font-size:12.5px;color:#86efac;
}
.sec-spot-promise b{color:#bbf7d0;font-weight:800}
.sec-spot-promise svg{stroke:#22c55e;flex-shrink:0}

/* ── Адаптив ── */
@media (max-width: 900px){
  .sec-spotlight{padding:40px 28px;border-radius:20px}
  .sec-spot-grid-wrap{grid-template-columns:1fr;gap:36px}
  .sec-spot-visual{min-height:auto}
  .sec-spot-card{max-width:100%}
}
@media (max-width: 520px){
  .sec-spotlight{padding:32px 20px}
  .sec-spot-text > p{font-size:13.5px}
  .sec-spot-feat{padding:10px 12px}
  .sec-spot-glow-a{width:240px;height:240px}
  .sec-spot-glow-b{width:200px;height:200px}
}