:root {
  /* Surfaces */
  --bg:#f7f7fb; --card:#ffffff; --surface:#f8fafc; --surface-2:#f1f5f9;
  /* Text */
  --fg:#1f2937; --fg-2:#0f172a; --muted:#6b7280; --muted-2:#94a3b8; --muted-3:#64748b; --muted-4:#475569; --muted-5:#cbd5e1;
  /* Brand */
  --brand:#0d6efd; --brand-2:#6366f1; --brand-bg:#eef2ff;
  /* Border */
  --border:#e5e7eb; --border-2:#e2e8f0;
  /* Shadow */
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 24px 60px rgba(15,23,42,.2);
  --shadow-overlay:rgba(15,23,42,.45);
  /* Status colors */
  --c-pending-bg:#fffbeb;   --c-pending:#d97706;
  --c-info-bg:#fef2f2;      --c-info:#dc2626;
  --c-uploaded-bg:#eff6ff;  --c-uploaded:#2563eb;
  --c-review-bg:#f5f3ff;    --c-review:#7c3aed;
  --c-accepted-bg:#f0fdf4;  --c-accepted:#16a34a;
  --c-rejected-bg:#fef2f2;  --c-rejected:#dc2626;
  --c-orange-bg:#fff7ed;    --c-orange:#ea580c;
  --c-red-bg:#fef2f2;       --c-red:#dc2626;
  /* Status gradients */
  --g-pending:linear-gradient(90deg,#f59e0b,#fbbf24);
  --g-info:linear-gradient(90deg,#ef4444,#f87171);
  --g-uploaded:linear-gradient(90deg,#3b82f6,#60a5fa);
  --g-review:linear-gradient(90deg,#8b5cf6,#a78bfa);
  --g-accepted:linear-gradient(90deg,#22c55e,#4ade80);
  --g-rejected:linear-gradient(90deg,#ef4444,#f87171);
  --g-brand:linear-gradient(90deg,#22c55e,#0ea5e9,#4f46e5);
  --g-green:linear-gradient(135deg,#22c55e,#16a34a);
  /* Progress */
  --progress-bg:#e2e8f0;
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.container{max-width:1240px;margin:0 auto;padding:0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.card{display:block;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-decoration:none;color:inherit;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card h3{margin:0 0 8px}
.stats{display:flex;gap:12px;margin:16px 0}
.stat{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;min-width:0;font-weight:700}
.stat .label{color:var(--muted)}
.checkbox{display:flex;align-items:center;gap:8px}


/* ===== HEADER ===== */

/* RESET TOP OFFSET — чтобы шапка прилипала без белой полосы */
body, html{ margin:0; padding:0; }
body > .site-header:first-child,
.site-header:first-child{
  margin-top:0 !important;
}
.container:first-child{
  margin-top:0 !important;
}

/* HEADER LAYOUT FIX — чтобы логотип и кнопки стояли строго по краям */
.site-header .header__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1240px;
  margin:0 auto;
  padding:0 18px;
  height:68px;
}

/* убираем фоновый просвет при прилипающем header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg,#5a6bff 0%, #4b59e6 100%);
  border:none;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}


.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#fff 65%,rgba(255,255,255,.7));backdrop-filter:saturate(1.3) blur(6px);border-bottom:1px solid var(--border)}
.header__inner{display:flex;justify-content:space-between;align-items:center;height:64px}
.logo{display:flex;gap:10px;align-items:center;font-weight:800}
.topnav{display:flex;align-items:center;flex-wrap:nowrap;gap:0;}
.topnav a{margin:0 12px}
.topnav .btn{margin-left:6px}

/* ===== HERO ===== */
.hero-wrap{position:relative;background:linear-gradient(135deg,rgba(90,107,255,.22),rgba(0,227,255,.15));padding:36px 0 80px;overflow:hidden}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
@media (max-width:1100px){.hero{grid-template-columns:1fr}}
.hero__img{width:100%;height:auto;border-radius:24px;border:1px solid var(--border)}
.hero__bubble{max-width:720px;border-radius:28px}
.display{font-size:48px;line-height:1.05;margin:0 0 12px}
@media (max-width:1100px){.display{font-size:34px}}
.lead{font-size:18px;margin:6px 0 10px}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{display:inline-block;border-radius:999px;border:1px solid var(--border);padding:6px 10px;background:#fff;font-weight:700}

/* WAVES */
.wave{position:relative;height:80px}
.wave--bottom{margin-top:36px;background:
 radial-gradient(100% 80% at 50% 0, rgba(10,20,70,.12) 0, rgba(10,20,70,0) 70%)}
.cta-wrap{position:relative;background:linear-gradient(180deg,rgba(0,227,255,.12),rgba(90,107,255,.18));padding:40px 0}
.wave--top{background:
 radial-gradient(100% 80% at 50% 100%, rgba(10,20,70,.12) 0, rgba(10,20,70,0) 70%)}

/* STRIP */
.strip-section{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:14px 0}
@media (max-width:900px){.strip{grid-template-columns:1fr}}
.strip__item{background:#fff;border:1px solid var(--border);border-radius:999px;text-align:center;padding:10px 14px;font-weight:700}

/* STEPS */
.section{padding:46px 0}
.section.alt{background:var(--bg-alt)}
.section-title{margin:0 0 14px;font-size:30px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:8px}
.step__num{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.step__img{width:100%;height:auto;border:1px solid var(--border);border-radius:14px}

/* FEATURES */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1100px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.features{grid-template-columns:1fr}}
.feature{display:flex;gap:14px;align-items:flex-start;padding:22px}
.feature__icon{width:64px;height:64px;object-fit:contain;flex:0 0 64px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.1))}

/* TRUST */
.trust{background:linear-gradient(180deg,#fff, #f7f9ff)}
.trust__row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.trust__row{grid-template-columns:1fr}}
.trust__badge{display:flex;gap:12px;align-items:center}
.trust__badge img{width:32px;height:32px}

/* FAQ */
.faq details{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin:10px 0;background:#fff}
.faq summary{cursor:pointer;font-weight:700}
.faq p{margin:8px 0 0}

/* CTA */
.cta{text-align:center;padding:28px}
.cta h2{margin-top:0}

/* FOOTER */
.site-footer{background:#0b1020;color:#c8d2ff;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:32px 0}
.footer__grid a{color:#e7ecff;margin:6px 0;display:block}
.logo--footer{font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.footer__bar{border-top:1px solid rgba(255,255,255,.12);padding:12px 0;text-align:center;color:#a9b4ff}
.social .chip{background:#111733;color:#c8d2ff;border-color:#2a335a}

/* ==== HEADER BLUE THEME (overrides) ==== */
.site-header{
  background:linear-gradient(180deg,#5a6bff 0%, #4b59e6 100%) !important;
  border-bottom:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
}
.site-header .logo,
.site-header .logo span{ color:#fff !important; }
.site-header .logo img{ filter: none !important; }

.topnav a{
  color:#eaf0ff !important;
  text-decoration:none;
  transition:opacity .15s ease;
}
.topnav a:hover{ color:#ffffff !important; opacity:1; }

/* кнопка в шапке — под синий фон */
.topnav .btn{
  background:linear-gradient(90deg,#00e3ff,#48b7ff) !important;
  color:#07203a !important;
  border:none !important;
  border-radius:50px !important;
  box-shadow:none !important;
  font-weight:700 !important;
  font-size:0.72rem !important;
  padding:3px 10px !important;
}
.topnav .btn:hover{ opacity:0.9; }
.topnav .btn.outline{
  background:transparent !important;
  color:#eaf0ff !important;
  border:1px solid rgba(255,255,255,.65) !important;
}

/* чуть плотнее отступы, чтобы шапка «держала» фон */
.header__inner{ height:68px !important; }

/* на мобильных — ссылки и кнопка в одну строку */
@media (max-width:720px){
  .topnav a{ margin:0 8px; }
  .topnav .btn{ padding:10px 14px; }
}

.btn:disabled,.btn.disabled,fieldset:disabled .btn{cursor:not-allowed;pointer-events:none;opacity:.65}
.card{border-radius:12px}

/* --- Consent document styles --- */
.consent-wrap { padding: 2rem 1rem; }
.doc-card {
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(16,24,40,.08);
  padding:clamp(1.25rem,2.5vw,2.25rem);
  position:relative;
}
.doc-header {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
}
.doc-badge {
  font-weight:700; font-size:.9rem; letter-spacing:.06em;
  text-transform:uppercase; color:#7f56d9; background:#f4ebff;
  border:1px solid #e9d7ff; border-radius:999px; padding:.3rem .7rem;
}
.doc-title { font-size:clamp(1.4rem,2.6vw,2rem); margin:0; }
.doc-meta { color:#667085; font-size:.925rem; margin-bottom:1rem; }
.doc-body { font-size:1rem; line-height:1.7; color:#1f2937; }
.doc-body ol { counter-reset:item; padding-left:1.2rem; }
.doc-body li { margin:.65rem 0; }
.doc-panel {
  background:#fafafa; border:1px dashed #e5e7eb; border-radius:12px; padding:1rem 1.1rem;
  color:#374151; margin:1rem 0 1.25rem;
}
.doc-sign { display:flex; gap:1rem; align-items:center; margin-top:1.25rem; }
.doc-rule { height:1px; background:#eee; margin:1rem 0 1.25rem; }

/* Красная печать (SVG) */
.seal {
  position:absolute; right:20px; bottom:20px;
  width:120px; height:120px; opacity:.9;
  filter: drop-shadow(0 6px 14px rgba(220,38,38,.25));
  user-select:none; pointer-events:none;
}
@media (max-width: 480px) { .seal{ width:88px; height:88px; } }


/* === Papyrus / Scroll look for consent page === */
.consent-wrap{ padding:2rem 1rem; }
.scroll-shell{
  background: #f3efe6;
  border-radius: 16px;
  padding: clamp(1rem,2vw,1.5rem);
}
.parchment{
  position: relative;
  padding: clamp(1.5rem,3vw,2.25rem) clamp(1.2rem,2.2vw,2rem);
  color:#2b2620;
  font-size:1rem;
  line-height:1.8;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(130% 80% at 50% 110%, rgba(0,0,0,.05), rgba(0,0,0,0) 60%),
    linear-gradient(#f6f1e3,#f0ebdb);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 10px 25px rgba(0,0,0,.18);
  border: 1px solid #e3dcc8;
  border-radius: 10px;
  /* лёгкая «бумажная» текстура */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    radial-gradient(130% 80% at 50% 110%, rgba(0,0,0,.05), rgba(0,0,0,0) 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0 2px, rgba(0,0,0,0) 2px 6px),
    linear-gradient(#f6f1e3,#efe8d6);
}
.parchment:before, .parchment:after{
  content:""; position:absolute; left:0; right:0; height:18px; z-index:0;
  background: radial-gradient(70% 140% at 50% -40%, rgba(0,0,0,.18), transparent 60%);
  filter: blur(6px); opacity:.25;
}
.parchment:before{ top:-12px; }
.parchment:after{ bottom:-12px; transform: scaleY(-1); }

/* Верх/низ свитка (ролики) */
.scroll-ends{
  position: relative; height:22px; margin:0 auto 8px; width:auto;
}
.scroll-ends .rod{
  position:absolute; left:0; right:0; height:100%;
  background: linear-gradient(90deg,#caa76f,#e9c98b 40%, #b88f58 60%, #e9c98b 90%, #caa76f);
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.12);
}
.scroll-ends .rod:before, .scroll-ends .rod:after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background: linear-gradient(#d6b381,#b18750);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.2);
}
.scroll-ends .rod:before{ left:-8px; }
.scroll-ends .rod:after{ right:-8px; }

/* заголовки в документе */
.doc-title{ font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size:clamp(1.3rem,2.2vw,1.8rem); margin:0 0 .25rem; }
.doc-sub{ color:#6b5f4b; margin-bottom:.75rem; font-size:.95rem; }
.doc-body ol{ padding-left:1.1rem; }
.doc-body li{ margin:.55rem 0; }

/* печать */
.seal{
  position:absolute; right:16px; bottom:16px; width:120px; height:120px; opacity:.9;
  filter: drop-shadow(0 6px 16px rgba(220,38,38,.25));
  user-select:none; pointer-events:none;
}
@media (max-width:520px){ .seal{ width:86px; height:86px; } }

/* панель-предупреждение */
.notice{
  background:#fff4f4; border:1px solid #ffd4d4; color:#7a1e1e;
  padding:.75rem .9rem; border-radius:8px; margin:.5rem 0 1rem;
}

/* подписи */
.sign-lines{ display:flex; gap:1rem; margin-top:1.25rem; }
.sign-col{ flex:1; }
.sign-line{ height:40px; border-bottom:1px solid rgba(0,0,0,.15); }
.sign-hint{ color:#7c7567; font-size:.8rem; }




/* на всякий случай перебиваем "глобальные disable-стили" для активной кнопки */
button.btn.btn-primary#btnNext:not([disabled]),
a.btn.btn-primary#btnNext:not([disabled]){
  pointer-events:auto !important;
  cursor:pointer !important;
}

/* свиток оставляем как есть */

/* anchor-look disabled state for consent CTA */
a.btn.btn-primary.btn-link-disabled{
  pointer-events:none !important;
  opacity:.55 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}

/* Consent CTA (anchor) — по умолчанию блокирована, включается классом .is-enabled */
#btnNext{ transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease; }
#btnNext.is-disabled{
  pointer-events: none !important;
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
#btnNext.is-enabled{
  pointer-events: auto !important;
  opacity: 1 !important;
  cursor: pointer !important;
  transform: translateY(-1px);
}

/* Печать крупнее */
.seal{ width: 180px; height: 180px; }
@media (max-width:520px){ .seal{ width: 120px; height: 120px; } }

/* Consent CTA states */
#btnNext:disabled{
  opacity:.55 !important;
  filter:saturate(.7) brightness(.95);
  pointer-events:none !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
}
#btnNext:not(:disabled){
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  transform:translateY(-1px);
}
/* На случай старых глобальных стилей, добьём специфичностью */
button.btn.btn-primary#btnNext:not(:disabled){ pointer-events:auto ; cursor:pointer ; }

/* усиление приоритета для активной кнопки согласия */
form#consentForm button.btn.btn-primary#btnNext:not(:disabled){
  opacity:1 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  transform:translateY(-1px);
}
.seal{ pointer-events:none !important; } /* на всякий */

/* --- FIX: ничего не должно перекрывать контент свитка --- */
.parchment{ position:relative; z-index:0; }
.parchment::before, .parchment::after{
  z-index:-1 !important;           /* под контент */
  pointer-events:none !important;   /* не ловят клики */
}
.seal{ pointer-events:none !important; }

/* Ряд с кнопкой + сама кнопка наверху и кликабельна */
.cta-row{ position:relative; z-index:5; }
#btnNext{
  position:relative; z-index:10;
  pointer-events:auto !important;
}
#btnNext:disabled{
  opacity:.55 !important; cursor:not-allowed !important; pointer-events:none !important; box-shadow:none !important;
}
#btnNext:not(:disabled){
  opacity:1 !important; cursor:pointer !important; pointer-events:auto !important;
  transform:translateY(-1px);
  box-shadow:0 0 0 .36rem rgba(13,110,253,.35) !important;
}

/* --- Consent CTA look without relying on disabled --- */
form#consentForm #btnNext{
  transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}

/* до галочки: визуально блеклая, но кликабельная (submit заблокирует required) */
form#consentForm:not(:has(#agree:checked)) #btnNext{
  opacity:.55; filter:saturate(.7) brightness(.95);
  box-shadow:none;
}

/* после галочки: яркая и «ожившая» */
form#consentForm:has(#agree:checked) #btnNext{
  opacity:1; filter:none;
  transform:translateY(-1px);
}

/* подстраховка для старых браузеров без :has() — класс .on на форме */
form#consentForm:not(.on) #btnNext{
  opacity:.55; filter:saturate(.7) brightness(.95);
  box-shadow:none;
}
form#consentForm.on #btnNext{
  opacity:1; filter:none; transform:translateY(-1px);
}

/* печать не перехватывает клики */
.seal{ pointer-events:none !important; }
.parchment{ position:relative; }
.parchment::before,.parchment::after{ pointer-events:none !important; }

/* Consent CTA: сильная визуалка */
form#consentForm button#btnNext.btn.btn-primary{
  transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
}

/* до галки — блеклая */
form#consentForm:not(.on) button#btnNext.btn.btn-primary{
  opacity:.55 !important;
  filter:saturate(.7) brightness(.95) !important;
  box-shadow:none !important;
}

/* после галки — яркая */
form#consentForm.on button#btnNext.btn.btn-primary{
  opacity:1 !important;
  filter:none !important;
  transform:translateY(-1px);
}

/* печать/декор не перехватывают клики */
.seal{ pointer-events:none !important; }
.parchment{ position:relative; }
.parchment::before,.parchment::after{ pointer-events:none !important; z-index:-1 !important; }

/* ---- Consent: простая и надёжная визуалка ---- */
.parchment{ position:relative; }
.parchment::before,.parchment::after{ pointer-events:none !important; z-index:-1 !important; }
.seal{ pointer-events:none !important; }

/* Кнопка всегда кликабельна. Визуально бледная пока нет галки */
form#consentForm #btnNext{
  transition: box-shadow .18s ease, transform .18s ease, opacity .18s ease, filter .18s ease;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* До галки — бледная (только визуально) */
@supports(selector(:has(*))){
  form#consentForm:not(:has(#agree:checked)) #btnNext{
    opacity:.55; filter:saturate(.7) brightness(.95); box-shadow:none;
  }
  form#consentForm:has(#agree:checked) #btnNext{
    opacity:1; filter:none; transform:translateY(-1px);
    box-shadow:0 0 0 .36rem rgba(13,110,253,.35);
  }
}

/* Фолбэк для старых браузеров: всегда яркая (главное — работает) */

/* ===== Auth Register Styles ===== */
.auth-wrap { padding: 2.25rem 1rem; }
.auth-card {
  background:#fff; border:1px solid #eef0f3; border-radius:16px;
  box-shadow:0 14px 44px rgba(16,24,40,.08);
  padding:clamp(1.25rem,2.2vw,2rem);
}
.auth-head { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.auth-kicker {
  font-weight:700; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  color:#7f56d9; background:#f4ebff; border:1px solid #e9d7ff; border-radius:999px; padding:.25rem .55rem;
}
.auth-title { margin:0; font-size:clamp(1.4rem,2.4vw,1.9rem); }
.auth-sub { color:#475467; margin:.25rem 0 1rem; }

.form-label { font-weight:600; color:#101828; }
.form-text { color:#667085; }

.pass-toggle:focus { outline:2px solid rgba(127,86,217,.35); }

.meter { height:6px; border-radius:999px; background:#f1f5f9; overflow:hidden; margin:.35rem 0 .25rem; }
.meter > i { display:block; height:100%; width:0%; transition:width .25s ease; }
.meter-1 > i { background:#ef4444; } /* weak */
.meter-2 > i { background:#f59e0b; } /* ok */
.meter-3 > i { background:#10b981; } /* good */

.help-box{
  background:#f8fafc; border:1px dashed #e5e7eb; border-radius:12px;
  padding:.75rem .9rem; color:#374151; font-size:.95rem;
}
.auth-actions{ display:flex; gap:.6rem; align-items:center; margin-top:.75rem; }
.auth-actions .btn-primary{
  box-shadow:0 0 0 .28rem rgba(13,110,253,.20);
}

/* Поля в auth-карточках уже и не на всю ширину */
.auth-card .form-control,
.auth-card .form-select {
  max-width: 360px;     /* можно 340–380 по вкусу */
  width: 100%;
}

.auth-card .mb-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


/* ====== REG PAGE – COMFORT UI UPLIFT ====== */

/* 1) Базовая типографика: крупнее и чище */
html { font-size: 18px; }                /* было 16 → стало 18 */
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }
h1,h2,h3 { letter-spacing:-.01em; }

/* 2) Карточка формы: больше «воздуха» */
.auth-wrap { padding: clamp(1.25rem, 4vw, 2.25rem) 1rem; }
.auth-card {
  border-radius: 18px;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
  border: 1px solid #e9eef5;
  box-shadow: 0 18px 50px rgba(16,24,40,.10);
}
.auth-title { font-size: clamp(2rem, 3vw, 2.35rem); font-weight: 800; }
.auth-sub   { font-size: 1.05rem; color:#475467; }

/* 3) Поля ввода*/
.form-label { font-weight: 650; color:#111827; font-size:1.02rem; }

/* базовый вид всех инпутов */
.form-control,
.form-select {
  font-size: 1.05rem;
  padding: .55rem .8rem;          /* чуть компактнее, чем было */
  line-height: 1.25;
  border-radius: 12px;
  border: 1px solid #c3cff8;      /* более насыщённая рамка */
  background: #fff;
}

/* фокус — только рамка, без ореола и без !important */
.form-control:focus,
.form-select:focus {
  border-color: #6366f1;
  box-shadow: none;
  outline: none;
}




/* 4) Подсказки и интервалы между блоками */
.form-text { font-size:.84rem; color:#64748b; }
.auth-card .mb-3{ margin-bottom: 1.1rem; }
.help-box{
  font-size: 1rem; border-radius: 12px;
  background:#f8fafc; border:1px dashed #dfe5ec;
}

/* 6) Индикатор силы пароля: толще */
.meter{ height:8px; border-radius:999px; }
.meter > i{ transition: width .25s ease; }

/* 7) Небольшая адаптация под мобильные */
@media (max-width: 480px){
  html{ font-size: 17px; }              /* чуть меньше, чтобы всё помещалось */
  .auth-card{ padding: 1.25rem; }
}

/* === Center the register card and limit width === */
.auth-page { display:flex; justify-content:center; }
.auth-shell { width:auto; max-width: 640px; margin: 0 auto; }
@media (max-width: 420px){ .auth-shell{ max-width: 100%; } }



/* Глаз pw-eye styles (add to main CSS) */

/* контейнер поля пароля */
.auth-pass{
  /* чтобы блок не растягивался шире самих полей */
  max-width: 360px;
}

/* обёртка только вокруг input и глаза */
.auth-pass .input-wrap{
  position: relative;
  display: inline-block;   /* ширина = ширине инпута, не всей строки */
  width: auto;
}

/* поле с запасом справа под глаз */
.auth-pass .input-wrap > input{
  display: block;
  width: 100%;
  max-width: 360px;        /* под ту же ширину, что и в реге */
  padding-right: 2.8rem;
  box-sizing: border-box;
}

/* кнопка-глаз, позиционируем относительно input-wrap */
.auth-pass .input-wrap > .pass-eye{
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
  height: 1.7rem;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #475467;
}

.auth-pass .input-wrap > .pass-eye .pw-eye-icon{
  width: 1.2rem;
  height: 1.2rem;
  display: block;
}

/* --- Состояния иконки глаза (открыт / закрыт) --- */

/* по умолчанию — только «открытый» глаз, слэш скрыт */
.pass-eye .pw-eye-slash{
  display: none;
  stroke: currentColor;      /* делаем линию видимой */
  stroke-width: 2;
}

/* когда пароль Показан, pw-eye.js добавляет .pw-showing —
   включаем слэш и чуть приглушаем сам глаз */
.pass-eye.pw-showing .pw-eye-slash{
  display: block;
}

.pass-eye.pw-showing .pw-eye-icon{
  opacity: .35;              /* чтобы «зачёркнуто» выглядело логичнее */
}


/* === FINAL LOGO MIRROR FIX === */
.site-header .logo img,
.logo--footer img {
  transform: scaleX(1) !important;
  -webkit-transform: scaleX(1) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
/* === FIX: prevent mirrored S in trust badges === */
.trust__badge img,
.trust__badge .feature__icon,
img[src*="favicon.svg"] {
  transform: scaleX(1) !important;
  -webkit-transform: scaleX(1) !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* === Design tokens / surfaces === */
:root{
  --ui-bg: #f5f7fb;
  --ui-surface: #fff;
  --ui-muted: #667085;
  --ui-text: #1f2937;
  --ui-primary: #4f6bff;
  --ui-ring:  rgba(79,107,255,.35);
  --ui-border: rgba(15, 23, 42, .06);
  --ui-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --ui-shadow-lg: 0 12px 30px rgba(31,41,55,.10);
  --radius-lg: 16px;
}

/* общий фон и текст */
body{ background: var(--ui-bg); color: var(--ui-text); }

/* «карточка»-поверхность */
.surface{
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--ui-shadow-sm);
}

/* секционные заголовки */
.section-title{
  font-weight: 700; letter-spacing:.2px; margin: 0 0 .5rem;
}
.section-sub{
  color: var(--ui-muted); margin: 0 0 1rem;
}

/* лёгкая таблица без «досовских» линий */
.table-modern{
  width:auto; border-collapse: separate; border-spacing: 0;
}
.table-modern thead th{
  font-weight: 600; font-size: .9rem; color: #111827;
  background: #f3f5ff; border-bottom: 1px solid var(--ui-border);
  padding: .65rem .8rem;
}
.table-modern tbody td{
  padding: .65rem .8rem; border-bottom: 1px solid var(--ui-border);
  color: #334155; font-size: .92rem;
}
.table-modern tbody tr:last-child td{ border-bottom: 0; }
.table-modern tbody tr:hover td{ background: #fafbff; }

/* баджи и прогресс */
.badge-pill{
  display:inline-block; padding:.25rem .6rem; border-radius:999px;
  background:#e8f7ee; color:#0a7a3f; font-weight:600; font-size:.8rem;
}
.progress-line{
  height: 6px; background:#eef0f6; border-radius: 999px; overflow:hidden;
}
.progress-line > span{
  display:block; height:100%; background:#22c55e; border-radius:999px; width:auto;
}

/* карточки-меню слева — чуть легче и современнее */
.dashboard .nav-card{
  border: 1px solid var(--ui-border);
  background: #fbfcff;
}
.dashboard .nav-card:hover{ background:#f4f6ff; }
.dashboard .nav-card.is-active{ background:#eaf0ff; }
.dashboard .nav-card.is-active::before{ background: var(--ui-primary); }

/* правая колонка — чистая поверхность */
.dashboard .dash-right{
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border);
}
/* ==== Dashboard polish (gap, центр заголовков, чистая поверхность справа) ==== */
.dashboard .dash-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  min-height: 60vh;
}
@media (max-width: 992px){
  .dashboard .dash-grid{ grid-template-columns: 1fr; gap: 12px; }
  .dashboard .dash-right{ display:none; }
}

.dashboard .dash-left{ border-right:none; padding-right:0; }
.dashboard .dash-right{
  border-left:none;
  background: transparent;
  padding-left:0;
  font-size:.98rem;
  line-height:1.6;
}

.dashboard .dash-right .section-title,
.dashboard .dash-right h3,
.dashboard .dash-right h4,
.dashboard .dash-right h5{ text-align:center; }
.dashboard .dash-right .surface .d-flex{ justify-content:center; }
.dashboard .dash-right .section-sub{ text-align:center; font-size:.84rem; }
/* ===== DASHBOARD PRO UI POLISH (overrides at the end) ===== */

/* дизайн-токены — чуть спокойнее палитра и единый радиус */
:root{
  --ui-bg:#f6f8fc;
  --ui-surface:#ffffff;
  --ui-text:#1f2430;
  --ui-muted:#6b7280;
  --ui-primary:#4963ff;
  --ui-primary-600:#3b57ff;
  --ui-border:rgba(25, 33, 55, .08);
  --ui-radius:14px;
  --ui-shadow:0 4px 14px rgba(15, 23, 42, .06);
}

/* базовая типографика — чище и компактнее */
.dashboard{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dashboard h2{ font-weight:800; letter-spacing:-.01em; }
.dashboard .text-muted{ color: var(--ui-muted)!important; }

/* сетка: явный зазор между колонками */
.dash-grid{ gap:24px !important; }

/* левая колонка — карточки-меню */
.nav-card{
  border:1px solid var(--ui-border) !important;
  background:#fbfcff !important;
  border-radius: var(--ui-radius) !important;
  padding:12px 14px !important;
  box-shadow:0 1px 3px rgba(15,23,42,.04) !important;
}
.nav-card .nav-title{ font-weight:650; font-size:1rem; }
.nav-card .nav-desc{ font-size:.84rem; color:var(--ui-muted); }
.nav-card .nav-icon{ font-size:1.1rem; color:var(--ui-primary-600); }
.nav-card.is-active{ background:#eef3ff !important; }
.nav-card.is-active::before{ background: var(--ui-primary) !important; }

/* правая колонка — единая «поверхность» */
.dash-right{ background:transparent !important; }
.dash-right .surface{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
}

/* заголовки секций по центру и компактные подзаголовки */
.dash-right .section-title,
.dash-right h3, .dash-right h4, .dash-right h5{
  text-align:center; margin:0 0 .35rem;
}
.dash-right .section-sub{ text-align:center; color:var(--ui-muted); margin:0 0 1rem; }

/* таблицы/списки — без «досовских» линий */
.table-modern thead th{
  background:#f2f5ff; border-bottom:1px solid var(--ui-border);
}
.table-modern tbody td{ border-bottom:1px solid var(--ui-border); }
.table-modern tbody tr:hover td{ background:#fafbff; }


/* карточные блоки внутри секций */
.section-card{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  padding:16px 18px;
  box-shadow: var(--ui-shadow);
}

/* отступы между компонентами в правой колонке */
.dash-right .surface + .surface,
.dash-right .section-card + .section-card{ margin-top:16px; }

/* выравнивание «Сохранить» — не монстр-кнопка */
.dash-right .actions-row{ display:flex; gap:10px; justify-content:flex-end; }

/* Левые карточки-меню — мягкий modern look */
.nav-card{
  border:1px solid var(--border) !important;
  background:linear-gradient(180deg,#fff,#fafbff) !important;
  border-radius:var(--radius) !important;
  padding:12px 14px !important;
  box-shadow:var(--shadow-sm) !important;
  transition:transform .12s ease, background .18s ease, box-shadow .18s ease;
}
.nav-card .nav-title{ font-weight:650; font-size:1rem; }
.nav-card .nav-desc{ font-size:.84rem; color:var(--muted); }
.nav-card .nav-icon{ color:var(--brand); font-size:1.1rem; }
.nav-card:hover{ transform:translateY(-1px); box-shadow:0 4px 16px rgba(16,24,40,.06); }
.nav-card.is-active{ background:linear-gradient(180deg,#eef2ff,#e9edff) !important; }
.nav-card.is-active::before{ background:var(--brand) !important; }

/* Правая колонка — аккуратные «поверхности» */
.dash-right{ background:transparent !important; }
.dash-right .surface, .section-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.dash-right .section-title{ text-align:center; font-weight:800; letter-spacing:-.01em; font-size:1.15rem; }
.dash-right .section-sub{ text-align:center; color:var(--muted); font-size:.84rem; margin-bottom:1rem; }

/* Таблицы — лёгкие линии, без «досовщины» */
.table-modern thead th{
  background:#f2f5ff; border-bottom:1px solid var(--border);
}
.table-modern tbody td{ border-bottom:1px solid var(--border); }
.table-modern tbody tr:hover td{ background:#fafbff; }

/* Утилиты для профиля */
.icon-accent{ color:var(--brand); font-size:1.1rem; line-height:1; }
.actions-row{ display:flex; gap:10px; justify-content:flex-end; }
.avatar-preview{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--border); background:#f2f4f8;
  flex:0 0 64px;
}
/* ==== DASHBOARD LAYOUT RESTORE (left 1/3, right 2/3) ==== */
.dashboard .dash-grid{
  display:grid;
  grid-template-columns: 1fr 2fr;  /* левая 1/3, правая 2/3 */
  gap:28px;
  align-items:start;
  min-height:60vh;
}

/* левая колонка и список карточек */
.dashboard .dash-left{ padding-right:12px; border-right:1px solid var(--ui-border); }
.dashboard .nav-cards{
  display:flex; flex-direction:column; gap:12px;
  position:sticky; top:88px;           /* «прилипает» под шапкой */
}

/* карточки-меню слева */
.dashboard .nav-card{
  display:flex; align-items:flex-start; gap:12px;
  text-decoration:none; border-radius:14px;
  padding:12px 14px;
}
.dashboard .nav-icon{ font-size:1.1rem; line-height:1; flex:0 0 20px; color:var(--brand); margin-top:.1rem; }
.dashboard .nav-content{ min-width:0; }
.dashboard .nav-title{ font-weight:600; }
.dashboard .nav-desc{ color:var(--muted); font-size:.84rem; line-height:1.45; }

/* правая колонка */
.dashboard .dash-right{ padding-left:12px; }

/* визуал активной карточки */
.dashboard .nav-card.is-active{ background:#eaf0ff; }
.dashboard .nav-card.is-active::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:14px 0 0 14px; background:var(--brand);
}
/* === Dashboard right gutter fix === */
.dashboard .dash-right{
  /* мягкий внутренний отступ от разделительной линии слева */
  padding-left: 28px;      /* было 12px — мало */
  padding-right: 8px;      /* чтобы контент не прилипал к правой кромке */
}

.dashboard .dash-left{
  /* чуть больше воздуха справа от левой колонки,
     чтобы линия/тень визуально не давила на текст */
  padding-right: 16px;
}

/* у первых заголовков чуть отступ сверху, чтобы не "упирались" */
.dashboard .dash-right > *:first-child{
  margin-top: 4px;
}
/* === Verify success page === */
.verify-page{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.verify-card{
  max-width:760px;
  width:auto;
  border-radius:16px;
  padding:28px;
  background:#fff;
}
.btn-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
}
.verify-btn{
  display:inline-flex;          /* центрируем содержимое */
  align-items:center;           /* по вертикали */
  justify-content:center;       /* по горизонтали */
  min-height:44px;
  line-height:1.2;
  padding:10px 18px;
}

/* утилиты, если их нет */
.text-muted-700{ color:#374151; }
.mb-2{ margin-bottom:.5rem; }
.mb-4{ margin-bottom:1rem; }
/* ===== HEADER HAMBURGER — 2025-11-01 ===== */
.menu-toggle{
  display:none; width:42px; height:42px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px; background:#fff; cursor:pointer;
}
.menu-toggle .line{display:block;width:22px;height:2px;margin:5px auto;background:#111}

.mobile-menu{ background:#fff; border-top:1px solid #e5e7eb; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:10px; padding:12px 16px; }
.mobile-menu a.btn{ border-radius:10px; }

/* Мобайл: показываем кнопку, прячем десктоп-нав */
@media (max-width: 820px){
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .topnav{ display:none; }              /* скрываем верхнее меню */
  .header__inner{ height:auto !important; padding:8px 0; }
  .site-header{ position:sticky !important; top:0 !important; z-index:9999 !important; }
}

/* Супер-узкие — чуть компактнее */
@media (max-width: 420px){
  .logo span{ display:none; }           /* только иконка */
  .menu-toggle{ width:40px; height:40px; }
}

/* Когда меню открыто — показываем панель */
body.menu-open #mobile-menu{ display:block; }
/* === Mobile: show brand text === */
@media (max-width: 420px){
  .site-header .logo span{ display:inline !important; } /* вернуть "Steuerapp" */
}

/* === HEADER BUTTONS — single source of truth === */
.site-header .topnav a.btn,
.site-header .topnav button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  height: 38px;
  line-height: 38px;
  padding: 0 14px;

  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;

  background: linear-gradient(180deg, #00e3ff, #48b7ff);
  color: #07203a;

  /* 🔹 убираем подчеркивание у ссылок-кнопок */
  text-decoration: none !important;

  /* 🔹 тонкий двойной ободок вокруг кнопки */
  border: 2px double rgba(255,255,255,.65);

  /* можно чуть мягче тень, чтобы не спорила с ободком */
  box-shadow: 0 6px 16px rgba(0,227,255,.30);

  transition: transform .12s ease, filter .12s ease, opacity .15s ease;
}

.site-header .topnav a.btn:hover,
.site-header .topnav button.btn:hover {
  transform: translateY(-1px);
  filter: brightness(.98);
}

/* вариант outline в шапке */
.site-header .topnav .btn-outline {
  background: transparent;
  color: #eaf0ff;
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: none;
}

/* Reusable centered card */
.centered-card {
  width: 100%;
  max-width: 680px;   /* или 50vw/560px — как нужно */
  margin: 32px auto;
}

/* === BUTTONS FINAL OVERRIDE 2025-11-13 === */

/* базовая геометрия для всех кнопок (кроме шапки, там свои !important) */
.btn,
button.btn,
a.btn,
input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;

  border-radius: 999px;
  padding: .32rem .90rem;   /* компактно, как у красных */

  border-width: 2px;
  border-style: solid;

  background: transparent;
  color: inherit;

  text-decoration: none;
  cursor: pointer;

  transition: transform .12s ease,
              filter .12s ease,
              box-shadow .18s ease;
}

/* маленькая кнопка */
.btn.btn-sm{
  padding: .26rem .70rem;
  font-size: .86rem;
}

/* общий ховер */
.btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

/* disabled */
.btn[disabled],
button[disabled]{
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ===== Контурные кнопки: прозрачная заливка, ободок в цвет ===== */

/* ============================================================
   НОВЫЙ ФИРМЕННЫЙ БЛОК: СИНЯЯ КНОПКА (НАСЫЩЕННАЯ)
   ============================================================ */

/* === BLUE OUTLINE PRIMARY (вместо заливки) === */

body .btn.btn-primary,
body a.btn.btn-primary,
body button.btn.btn-primary {
  --btn-color: #4f46e5;

  background: transparent !important;              /* без заливки */
  border-width: 2px;
  border-style: solid;
  border-color: var(--btn-color) !important;
  color: var(--btn-color) !important;

  border-radius: 999px;
  box-shadow: none !important;
  transform: translateY(0);
}

/* активная — насыщенный контур */
body .btn.btn-primary:not(:disabled),
body a.btn.btn-primary:not(:disabled),
body button.btn.btn-primary:not(:disabled) {
  opacity: 1 !important;
}

/* отключённая — бледный контур + текст */
body .btn.btn-primary:disabled,
body a.btn.btn-primary:disabled,
body button.btn.btn-primary:disabled,
body a.btn.btn-primary.disabled {
  border-color: rgba(79,70,229,.45) !important;
  color: rgba(79,70,229,.6) !important;
  opacity: .55 !important;
}

/* лёгкий hover только для активной */
body .btn.btn-primary:not(:disabled):hover,
body a.btn.btn-primary:not(:disabled):hover,
body button.btn.btn-primary:not(:disabled):hover {
  transform: translateY(-1px);
  filter: brightness(1.02);
}



/* КРАСНАЯ – обычная и outline */
.btn-danger,
.btn-outline-danger{
  --btn-color: #dc2626;

  border-color: var(--btn-color) !important;
  background: transparent !important;
  color: var(--btn-color) !important;

  box-shadow: none !important;
}

/* СЕРАЯ / светлая – обычная и outline/secondary */
.btn-light,
.btn-outline-light,
.btn-secondary,
.btn-outline-secondary{
  --btn-color: #64748b;

  border-color: var(--btn-color) !important;
  background: transparent !important;
  color: var(--btn-color) !important;

  box-shadow: none !important;
}

/* «монетка» остаётся как есть */
@keyframes btn-coin{
  0%   { transform: translateX(-130%); }
  55%  { transform: translateX(130%); }
  100% { transform: translateX(130%); }
}
/* === Coin shine for blue outline buttons (btn-primary) === */

.btn-primary,
.btn-outline-primary {
  position: relative;
  overflow: hidden;                         /* блик внутри кнопки */
}

.btn-primary::after,
.btn-outline-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 120%;
  height: 100%;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.22) 40%,
    rgba(255,255,255,0.65) 55%,
    rgba(255,255,255,0.22) 70%,
    rgba(255,255,255,0) 100%
  );

  animation: btn-coin 2.8s ease-in-out infinite;
  opacity: .9;
  mix-blend-mode: screen;
}

/* === Consent: без синей тени вокруг кнопки === */
form#consentForm #btnNext {
  box-shadow: none !important;
}

/* Кнопка мобильного меню — только на мобильных */
#mobile-menu-btn { display: none !important; }
@media (max-width: 768px) { #mobile-menu-btn { display: flex !important; } }

/* Минимальная высота контентной области для корректного скролла */
#contentArea { min-height: 100vh; }

@media (max-width: 768px) {
  .inbox-panel-wrap {
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    top: 70px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 992px) {
  header.site-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
  }
}


/* ===== Card UI — общие карточки (используется в Sicherheit, Dokumente и др.) ===== */

/* шрифт секции — Inter, чтобы не пробивался "машинописный" */
.sec-section,
.sec-section * {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* отступы секции */
.sec-section {
  margin-top: 20px;
  margin-bottom: 32px;
}

/* сетка 2×2 как в overview */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* базовая карточка в стиле overview */
.security-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  min-height: 170px;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease;
}

/* цветная полоска сверху, как в Übersicht */
.security-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #4f46e5, #22c55e, #0ea5e9);
}

/* hover — только для обычных карточек, не hero */
.security-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .10);
}

/* ===== HERO-карточка (верхняя, только заголовок) ===== */

.security-card--hero {
  grid-column: 1 / -1;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.security-card--hero:hover {
  transform: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}

.security-card--hero .sec-hero-inner {
  max-width: 540px;
}

.security-card--hero .sec-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.security-card--hero .sec-subtitle {
  margin: .25rem 0 0;
  font-size: .9rem;
  color: #6b7280;
}

/* ===== Шапка обычных карточек (иконка + заголовок) ===== */

.sec-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.sec-icon {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 20%, #f5f3ff, #dde4ff);
  box-shadow: 0 10px 20px rgba(79, 70, 229, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sec-icon i {
  font-size: 1.1rem;
  color: #4338ca;
}

.sec-headings {
  min-width: 0;
}

.sec-eyebrow {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 2px;
}

.sec-card-title {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
  color: #0f172a;
}

/* текст в карточках */
.sec-text {
  margin: 4px 0 10px;
  font-size: .9rem;
  color: #4b5563;
}

/* линия статуса под текстом (для 2FA и сессий) */
.sec-status-line {
  margin: 4px 0 10px;
}

/* ===== статус-бейдж 2FA (bank-like pulse) ===== */

.sec-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.sec-status i {
  font-size: 1.05rem;
}

/* АКТИВНО */
.sec-status--on {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.35),
    0 0 10px rgba(34, 197, 94, 0.30);
  animation: sec-aktiv-pulse 4.5s ease-in-out infinite;
}

/* НЕ АКТИВНО */
.sec-status--off {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.25),
    0 0 6px rgba(220, 38, 38, 0.15);
}

@keyframes sec-aktiv-pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.30),
      0 0 6px rgba(34, 197, 94, 0.25);
  }
  35% {
    transform: scale(1.02);
    box-shadow:
      0 0 0 2px rgba(34, 197, 94, 0.40),
      0 0 12px rgba(34, 197, 94, 0.40);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.30),
      0 0 6px rgba(34, 197, 94, 0.25);
  }
}

/* ===== Футер карточки: слева метрика, справа кнопка/кнопки ===== */

.sec-footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.sec-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sec-metric-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #9ca3af;
}

.sec-metric-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: #111827;
}

/* обёртка для кнопок справа внизу карточки */
.sec-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* кнопки внутри футера не ломают строку */
.sec-footer .btn {
  white-space: nowrap;
}

/* адаптив: одна колонка на узких экранах */
@media (max-width: 900px) {
  .security-grid {
    grid-template-columns: 1fr;
  }
  .security-card--hero {
    grid-column: 1 / 2;
  }
}