/* ============================================================
   SUPERADMIN — Nuit & Jour × Wizz (2026-10)
   Accent violet interne (un seul) ; couleurs par domaine = signal fonctionnel.
   Thème : Auto par défaut (theme-switcher.js dans le <head>), Nuit sur :root,
   Jour sur :root[data-theme="light"]. Les jetons --sa-* sont bâtis sur base.css ;
   les variables CSS traversent le shadow DOM des composants sa-*.
   Aucune couleur en dur hors de ce bloc de jetons (exceptions listées en fin de fichier).
   ============================================================ */

/* ── 1. JETONS ───────────────────────────────────────────── */
:root {
  /* Neutres : bâtis sur base.css (Nuit sur :root, Jour sur [data-theme="light"]) */
  --sa-bg:        var(--bg);
  --sa-sunken:    var(--bg3);
  --sa-surface:   var(--surface);
  --sa-surface2:  var(--surface2);
  --sa-surface3:  #242244;
  --sa-text:      var(--text);
  --sa-text2:     var(--text2);
  --sa-muted:     var(--muted);
  --sa-muted2:    var(--muted2);
  --sa-faint:     #86809C;   /* ex-#6B6585 (3,2:1) : 4,71:1 sur --surface, 4,34:1 sur --surface2 */
  --sa-border:    var(--border);
  --sa-border2:   var(--border2);
  --sa-border3:   var(--border3);
  --sa-line-strong: var(--line-strong);
  --sa-paper:     #FFFFFF;   /* papier constant (QR, aperçus) */
  --sa-on-fill:   #FFFFFF;   /* texte sur aplat coloré, constant */
  --sa-on-fill-dark: #09090E;/* texte sombre sur aplat clair, constant */
  --sa-chrome-bg: color-mix(in srgb, var(--bg) 84%, transparent);
  /* Barre latérale : encre dans les deux thèmes (Jour = pilule encre de base.css) */
  --sa-side-bg:   #0D0D16;
  --sa-side-line: rgba(237,233,246,.08);
  --sa-side-text: #EDE9F6;
  --sa-side-text2:#ABA3C2;
  --sa-side-muted:#8A839E;
  --sa-side-hover:rgba(237,233,246,.06);
  --sa-side-active-bg: rgba(167,139,250,.16);
  --sa-side-active: #C4B5FD;

  /* Échelle de transparences neutres : blanc en Nuit, encre recalibrée en Jour (contraste à parité) */
  --sa-fg-a-02: rgba(255,255,255,0.02);
  --sa-fg-a-03: rgba(255,255,255,0.03);
  --sa-fg-a-04: rgba(255,255,255,0.04);
  --sa-fg-a-05: rgba(255,255,255,0.05);
  --sa-fg-a-06: rgba(255,255,255,0.06);
  --sa-fg-a-07: rgba(255,255,255,0.07);
  --sa-fg-a-08: rgba(255,255,255,0.08);
  --sa-fg-a-10: rgba(255,255,255,0.10);
  --sa-fg-a-12: rgba(255,255,255,0.12);
  --sa-fg-a-14: rgba(255,255,255,0.14);
  --sa-fg-a-16: rgba(255,255,255,0.16);
  --sa-fg-a-18: rgba(255,255,255,0.18);
  --sa-fg-a-20: rgba(255,255,255,0.20);
  --sa-fg-a-25: rgba(255,255,255,0.25);
  --sa-fg-a-30: rgba(255,255,255,0.30);
  --sa-fg-a-35: rgba(255,255,255,0.35);
  --sa-fg-a-40: rgba(255,255,255,0.40);
  --sa-fg-a-45: rgba(255,255,255,0.45);
  --sa-fg-a-50: rgba(255,255,255,0.50);
  --sa-fg-a-55: rgba(255,255,255,0.55);
  --sa-fg-a-60: rgba(255,255,255,0.60);
  --sa-fg-a-65: rgba(255,255,255,0.65);
  --sa-fg-a-70: rgba(255,255,255,0.70);
  --sa-fg-a-75: rgba(255,255,255,0.75);
  --sa-fg-a-80: rgba(255,255,255,0.80);
  --sa-fg-a-85: rgba(255,255,255,0.85);
  --sa-fg-a-90: rgba(255,255,255,0.90);
  /* Ombres et voiles : noir en Nuit, encre adoucie en Jour */
  --sa-shadow-a-02: rgba(0,0,0,0.02);
  --sa-shadow-a-03: rgba(0,0,0,0.03);
  --sa-shadow-a-04: rgba(0,0,0,0.04);
  --sa-shadow-a-05: rgba(0,0,0,0.05);
  --sa-shadow-a-06: rgba(0,0,0,0.06);
  --sa-shadow-a-07: rgba(0,0,0,0.07);
  --sa-shadow-a-08: rgba(0,0,0,0.08);
  --sa-shadow-a-10: rgba(0,0,0,0.10);
  --sa-shadow-a-12: rgba(0,0,0,0.12);
  --sa-shadow-a-14: rgba(0,0,0,0.14);
  --sa-shadow-a-16: rgba(0,0,0,0.16);
  --sa-shadow-a-18: rgba(0,0,0,0.18);
  --sa-shadow-a-20: rgba(0,0,0,0.20);
  --sa-shadow-a-25: rgba(0,0,0,0.25);
  --sa-shadow-a-30: rgba(0,0,0,0.30);
  --sa-shadow-a-35: rgba(0,0,0,0.35);
  --sa-shadow-a-40: rgba(0,0,0,0.40);
  --sa-shadow-a-45: rgba(0,0,0,0.45);
  --sa-shadow-a-50: rgba(0,0,0,0.50);
  --sa-shadow-a-55: rgba(0,0,0,0.55);
  --sa-shadow-a-60: rgba(0,0,0,0.60);
  --sa-shadow-a-65: rgba(0,0,0,0.65);
  --sa-shadow-a-70: rgba(0,0,0,0.70);
  --sa-shadow-a-75: rgba(0,0,0,0.75);
  --sa-shadow-a-80: rgba(0,0,0,0.80);
  --sa-shadow-a-85: rgba(0,0,0,0.85);
  --sa-shadow-a-90: rgba(0,0,0,0.90);
  --sa-scrim-a-02: rgba(0,0,0,0.02);
  --sa-scrim-a-03: rgba(0,0,0,0.03);
  --sa-scrim-a-04: rgba(0,0,0,0.04);
  --sa-scrim-a-05: rgba(0,0,0,0.05);
  --sa-scrim-a-06: rgba(0,0,0,0.06);
  --sa-scrim-a-07: rgba(0,0,0,0.07);
  --sa-scrim-a-08: rgba(0,0,0,0.08);
  --sa-scrim-a-10: rgba(0,0,0,0.10);
  --sa-scrim-a-12: rgba(0,0,0,0.12);
  --sa-scrim-a-14: rgba(0,0,0,0.14);
  --sa-scrim-a-16: rgba(0,0,0,0.16);
  --sa-scrim-a-18: rgba(0,0,0,0.18);
  --sa-scrim-a-20: rgba(0,0,0,0.20);
  --sa-scrim-a-25: rgba(0,0,0,0.25);
  --sa-scrim-a-30: rgba(0,0,0,0.30);
  --sa-scrim-a-35: rgba(0,0,0,0.35);
  --sa-scrim-a-40: rgba(0,0,0,0.40);
  --sa-scrim-a-45: rgba(0,0,0,0.45);
  --sa-scrim-a-50: rgba(0,0,0,0.50);
  --sa-scrim-a-55: rgba(0,0,0,0.55);
  --sa-scrim-a-60: rgba(0,0,0,0.60);
  --sa-scrim-a-65: rgba(0,0,0,0.65);
  --sa-scrim-a-70: rgba(0,0,0,0.70);
  --sa-scrim-a-75: rgba(0,0,0,0.75);
  --sa-scrim-a-80: rgba(0,0,0,0.80);
  --sa-scrim-a-85: rgba(0,0,0,0.85);
  --sa-scrim-a-90: rgba(0,0,0,0.90);

  /* Teintes encre (texte, bordures, indicateurs) — Jour ≥ 4,5:1 sur #FFF et #F1EFF6 */
  --sa-violet: #A78BFA;
  --sa-violet-strong: #8B5CF6;
  --sa-violet-deep: #7C3AED;
  --sa-violet-soft: #C4B5FD;
  --sa-indigo: #818CF8;
  --sa-indigo-deep: #4F46E5;
  --sa-gold: #F8BF45;
  --sa-gold-soft: #FCCF70;
  --sa-amber: #FBBF24;
  --sa-amber-strong: #F59E0B;
  --sa-orange: #FB923C;
  --sa-orange-strong: #F97316;
  --sa-rose: #E0527A;
  --sa-rose-soft: #EE7A97;
  --sa-rose-deep: #BF3B63;
  --sa-pink: #F472B6;
  --sa-red: #F87171;
  --sa-red-strong: #EF4444;
  --sa-red-deep: #DC2626;
  --sa-red-soft: #FCA5A5;
  --sa-green: #34D399;
  --sa-green-2: #4ADE80;
  --sa-green-strong: #10B981;
  --sa-green-3: #22C55E;
  --sa-green-soft: #6EE7B7;
  --sa-blue: #60A5FA;
  --sa-blue-strong: #3B82F6;
  --sa-blue-soft: #93C5FD;
  --sa-teal: #2DD4BF;
  --sa-cyan: #06B6D4;
  /* Aplats (fonds de pastilles et boutons pleins) : constants, texte posé dessus inchangé */
  --sa-violet-fill: #A78BFA;
  --sa-violet-strong-fill: #8B5CF6;
  --sa-violet-deep-fill: #7C3AED;
  --sa-violet-soft-fill: #C4B5FD;
  --sa-indigo-fill: #818CF8;
  --sa-indigo-deep-fill: #4F46E5;
  --sa-gold-fill: #F8BF45;
  --sa-gold-soft-fill: #FCCF70;
  --sa-amber-fill: #FBBF24;
  --sa-amber-strong-fill: #F59E0B;
  --sa-orange-fill: #FB923C;
  --sa-orange-strong-fill: #F97316;
  --sa-rose-fill: #E0527A;
  --sa-rose-soft-fill: #EE7A97;
  --sa-rose-deep-fill: #BF3B63;
  --sa-pink-fill: #F472B6;
  --sa-red-fill: #F87171;
  --sa-red-strong-fill: #EF4444;
  --sa-red-deep-fill: #DC2626;
  --sa-red-soft-fill: #FCA5A5;
  --sa-green-fill: #34D399;
  --sa-green-2-fill: #4ADE80;
  --sa-green-strong-fill: #10B981;
  --sa-green-3-fill: #22C55E;
  --sa-green-soft-fill: #6EE7B7;
  --sa-blue-fill: #60A5FA;
  --sa-blue-strong-fill: #3B82F6;
  --sa-blue-soft-fill: #93C5FD;
  --sa-teal-fill: #2DD4BF;
  --sa-cyan-fill: #06B6D4;
}
:root[data-theme="light"] {
  --sa-surface3:  #E9E6F0;
  --sa-sunken:    #F1EFF6;
  --sa-faint:     #6E6883;   /* 5,3:1 sur blanc, 4,6:1 sur --surface2 */
  --sa-chrome-bg: color-mix(in srgb, var(--bg) 90%, transparent);
  --sa-side-bg:   #1A1A2E;   /* = --nav-bg Jour */
  --sa-side-line: rgba(250,249,252,.08);
  --sa-side-text: #FAF9FC;
  --sa-side-text2:#C9C4D8;
  --sa-side-muted:#A49FB6;
  --sa-side-hover:rgba(250,249,252,.07);
  --sa-side-active-bg: rgba(196,181,253,.18);
  --sa-side-active: #DDD6FE;
  --sa-fg-a-02: rgba(26,26,46,0.024);
  --sa-fg-a-03: rgba(26,26,46,0.037);
  --sa-fg-a-04: rgba(26,26,46,0.050);
  --sa-fg-a-05: rgba(26,26,46,0.064);
  --sa-fg-a-06: rgba(26,26,46,0.078);
  --sa-fg-a-07: rgba(26,26,46,0.093);
  --sa-fg-a-08: rgba(26,26,46,0.108);
  --sa-fg-a-10: rgba(26,26,46,0.138);
  --sa-fg-a-12: rgba(26,26,46,0.168);
  --sa-fg-a-14: rgba(26,26,46,0.199);
  --sa-fg-a-16: rgba(26,26,46,0.230);
  --sa-fg-a-18: rgba(26,26,46,0.260);
  --sa-fg-a-20: rgba(26,26,46,0.290);
  --sa-fg-a-25: rgba(26,26,46,0.362);
  --sa-fg-a-30: rgba(26,26,46,0.429);
  --sa-fg-a-35: rgba(26,26,46,0.490);
  --sa-fg-a-40: rgba(26,26,46,0.546);
  --sa-fg-a-45: rgba(26,26,46,0.597);
  --sa-fg-a-50: rgba(26,26,46,0.645);
  --sa-fg-a-55: rgba(26,26,46,0.688);
  --sa-fg-a-60: rgba(26,26,46,0.729);
  --sa-fg-a-65: rgba(26,26,46,0.767);
  --sa-fg-a-70: rgba(26,26,46,0.803);
  --sa-fg-a-75: rgba(26,26,46,0.838);
  --sa-fg-a-80: rgba(26,26,46,0.872);
  --sa-fg-a-85: rgba(26,26,46,0.905);
  --sa-fg-a-90: rgba(26,26,46,0.939);
  --sa-shadow-a-02: rgba(26,26,46,0.006);
  --sa-shadow-a-03: rgba(26,26,46,0.010);
  --sa-shadow-a-04: rgba(26,26,46,0.013);
  --sa-shadow-a-05: rgba(26,26,46,0.016);
  --sa-shadow-a-06: rgba(26,26,46,0.019);
  --sa-shadow-a-07: rgba(26,26,46,0.022);
  --sa-shadow-a-08: rgba(26,26,46,0.026);
  --sa-shadow-a-10: rgba(26,26,46,0.032);
  --sa-shadow-a-12: rgba(26,26,46,0.038);
  --sa-shadow-a-14: rgba(26,26,46,0.045);
  --sa-shadow-a-16: rgba(26,26,46,0.051);
  --sa-shadow-a-18: rgba(26,26,46,0.058);
  --sa-shadow-a-20: rgba(26,26,46,0.064);
  --sa-shadow-a-25: rgba(26,26,46,0.080);
  --sa-shadow-a-30: rgba(26,26,46,0.096);
  --sa-shadow-a-35: rgba(26,26,46,0.112);
  --sa-shadow-a-40: rgba(26,26,46,0.128);
  --sa-shadow-a-45: rgba(26,26,46,0.144);
  --sa-shadow-a-50: rgba(26,26,46,0.160);
  --sa-shadow-a-55: rgba(26,26,46,0.176);
  --sa-shadow-a-60: rgba(26,26,46,0.192);
  --sa-shadow-a-65: rgba(26,26,46,0.208);
  --sa-shadow-a-70: rgba(26,26,46,0.220);
  --sa-shadow-a-75: rgba(26,26,46,0.220);
  --sa-shadow-a-80: rgba(26,26,46,0.220);
  --sa-shadow-a-85: rgba(26,26,46,0.220);
  --sa-shadow-a-90: rgba(26,26,46,0.220);
  --sa-scrim-a-02: rgba(26,26,46,0.012);
  --sa-scrim-a-03: rgba(26,26,46,0.019);
  --sa-scrim-a-04: rgba(26,26,46,0.025);
  --sa-scrim-a-05: rgba(26,26,46,0.031);
  --sa-scrim-a-06: rgba(26,26,46,0.037);
  --sa-scrim-a-07: rgba(26,26,46,0.043);
  --sa-scrim-a-08: rgba(26,26,46,0.050);
  --sa-scrim-a-10: rgba(26,26,46,0.062);
  --sa-scrim-a-12: rgba(26,26,46,0.074);
  --sa-scrim-a-14: rgba(26,26,46,0.087);
  --sa-scrim-a-16: rgba(26,26,46,0.099);
  --sa-scrim-a-18: rgba(26,26,46,0.112);
  --sa-scrim-a-20: rgba(26,26,46,0.124);
  --sa-scrim-a-25: rgba(26,26,46,0.155);
  --sa-scrim-a-30: rgba(26,26,46,0.186);
  --sa-scrim-a-35: rgba(26,26,46,0.217);
  --sa-scrim-a-40: rgba(26,26,46,0.248);
  --sa-scrim-a-45: rgba(26,26,46,0.279);
  --sa-scrim-a-50: rgba(26,26,46,0.310);
  --sa-scrim-a-55: rgba(26,26,46,0.341);
  --sa-scrim-a-60: rgba(26,26,46,0.372);
  --sa-scrim-a-65: rgba(26,26,46,0.403);
  --sa-scrim-a-70: rgba(26,26,46,0.434);
  --sa-scrim-a-75: rgba(26,26,46,0.465);
  --sa-scrim-a-80: rgba(26,26,46,0.496);
  --sa-scrim-a-85: rgba(26,26,46,0.500);
  --sa-scrim-a-90: rgba(26,26,46,0.500);

  --sa-violet: #6D28D9;
  --sa-violet-strong: #6D28D9;
  --sa-violet-deep: #5B21B6;
  --sa-violet-soft: #5B21B6;
  --sa-indigo: #4338CA;
  --sa-indigo-deep: #4338CA;
  --sa-gold: #805A00;
  --sa-gold-soft: #7A5600;
  --sa-amber: #92400E;
  --sa-amber-strong: #92400E;
  --sa-orange: #C2410C;
  --sa-orange-strong: #C2410C;
  --sa-rose: #A33252;
  --sa-rose-soft: #A33252;
  --sa-rose-deep: #A33252;
  --sa-pink: #BE185D;
  --sa-red: #B91C1C;
  --sa-red-strong: #B91C1C;
  --sa-red-deep: #991B1B;
  --sa-red-soft: #991B1B;
  --sa-green: #047857;
  --sa-green-2: #166534;
  --sa-green-strong: #047857;
  --sa-green-3: #166534;
  --sa-green-soft: #065F46;
  --sa-blue: #1D4ED8;
  --sa-blue-strong: #1D4ED8;
  --sa-blue-soft: #1E40AF;
  --sa-teal: #0F766E;
  --sa-cyan: #0E7490;
}
:root {
  /* Accent violet interne */
  --sa-accent:       var(--sa-violet);
  --sa-accent-dark:  var(--sa-violet-strong);
  --sa-accent-light: var(--sa-violet-soft);
  --sa-accent-fill:  #7C3AED;   /* blanc dessus 5,70:1 */
  --sa-on-accent:    #FFFFFF;
  --sa-accent-soft:  color-mix(in srgb, var(--sa-accent) 14%, transparent);
  --sa-accent-line:  color-mix(in srgb, var(--sa-accent) 34%, transparent);

  /* Couleurs par domaine (signal fonctionnel) */
  --sa-domain-platform:   var(--sa-violet);
  --sa-domain-organizers: var(--sa-gold);
  --sa-domain-community:  var(--sa-rose);
  --sa-domain-content:    var(--sa-blue);
  --sa-domain-security:   var(--sa-green);
  --sa-domain-system:     var(--sa-red);

  /* Cartes : surface + bordure en Nuit, aplat + ombre légère en Jour */
  --sa-card-bg:     rgba(255,255,255,.03);
  --sa-card-line:   rgba(255,255,255,.08);
  --sa-card-shadow: none;

  /* Rayons 8 / 12 / 16 / 24 / 999 */
  --sa-r-sm: var(--r-sm, 8px);
  --sa-r-md: var(--r-md, 12px);
  --sa-r-lg: var(--r-lg, 16px);
  --sa-r-xl: var(--r-xl, 24px);
  --sa-r-full: var(--r-full, 999px);

  /* Typo */
  --sa-font: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sa-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Mise en page */
  --sa-sidebar-collapsed: 60px;
  --sa-sidebar-expanded:  260px;
  --sa-slideover-width:   480px;
  --sa-topbar-h: 60px;

  /* Transitions */
  --sa-t:      200ms ease-out;
  --sa-t-slow: 300ms ease-out;
  --sa-t-fast: 120ms ease-out;

  /* Jetons de base.css réalignés sur le superadmin (violet, rayons) */
  --accent:       var(--sa-accent);
  --accent-dark:  var(--sa-accent-dark);
  --accent-light: var(--sa-accent-light);
  --accent-glow:  color-mix(in srgb, var(--sa-accent) 18%, transparent);
  --accent-text:  #0D0D16;      /* texte SUR --accent (#A78BFA) : 7,6:1 */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  24px;
  --radius-pill: 999px;
  --gradient-rose: linear-gradient(135deg, var(--sa-accent-fill), #6D28D9);
  --shadow-rose-sm: 0 4px 16px color-mix(in srgb, var(--sa-accent-fill) 28%, transparent);
  --shadow-rose:    0 8px 28px color-mix(in srgb, var(--sa-accent-fill) 34%, transparent);
}
:root[data-theme="light"] {
  --sa-accent-fill:  #6D28D9;   /* blanc dessus 7,10:1 */
  --sa-card-bg:     #FFFFFF;
  --sa-card-line:   transparent;
  --sa-card-shadow: 0 1px 10px rgba(26,26,46,.06), inset 0 0 0 1px #E6E2EE;
  --accent-text:    #FFFFFF;    /* blanc sur #6D28D9 : 7,10:1 */
  --gradient-rose: linear-gradient(135deg, #6D28D9, #5B21B6);
}

/* ── 2. FOND ─────────────────────────────────────────────── */
body {
  background: var(--sa-bg);
  color: var(--sa-text);
}

/* ── 3. GRAIN (Nuit seulement) ───────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}
:root[data-theme="light"] body::before { opacity: 0 !important; }

/* ── 4. APP SHELL LAYOUT ──────────────────────────────────── */
.sa-app {
  display: flex;
  min-height: 100vh;
}

.sa-main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sa-sidebar-expanded);
  transition: margin-left var(--sa-t-slow);
}
.sa-main.sidebar-collapsed {
  margin-left: var(--sa-sidebar-collapsed);
}

.sa-topbar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1.5rem;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: color-mix(in srgb, var(--sa-bg) 80%, transparent);
  border-bottom: 1px solid var(--sa-border);
}
.sa-topbar-spacer { flex: 1; }

.sa-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem;
}

/* ── 5. SECTION FADE-IN ───────────────────────────────────── */
@keyframes sa-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-content,
.page-section,
[data-section] {
  animation: sa-fade-in 220ms ease-out both;
}

/* ── 6. LOGIN SCREEN ──────────────────────────────────────── */
.login-screen {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--sa-violet-deep) 18%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%, color-mix(in srgb, var(--sa-indigo) 9%, transparent) 0%, transparent 55%),
    var(--sa-bg) !important;
}
.login-logo .icon {
  background: linear-gradient(145deg, var(--sa-violet-fill), var(--sa-violet-deep-fill)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sa-violet-fill) 40%, transparent),
    0 8px 32px color-mix(in srgb, var(--sa-violet-deep-fill) 55%, transparent),
    0 0 60px color-mix(in srgb, var(--sa-violet-deep-fill) 15%, transparent) !important;
}
.login-logo h1 span { color: var(--sa-accent-light) !important; }

/* ── 7. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

/* ── 8. SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  background: color-mix(in srgb, var(--sa-bg) 90%, transparent) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
.sidebar-logo .badge {
  display: inline-block; margin-top: .5rem;
  font-size: .62rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sa-accent-light);
  background: color-mix(in srgb, var(--sa-violet) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent);
  padding: .2rem .55rem; border-radius: var(--sa-r-full);
}

/* Active nav item */
.nav-item.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sa-violet-strong) 17%, transparent), color-mix(in srgb, var(--sa-violet-strong) 6%, transparent)) !important;
  border: 1px solid color-mix(in srgb, var(--sa-violet-strong) 22%, transparent) !important;
  color: var(--sa-accent-light) !important;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sa-violet-strong) 10%, transparent) !important;
}
.nav-item.active::before { display: none !important; }

/* Nav groups */
.nav-group { margin-bottom: .25rem; }
.nav-group + .nav-group {
  border-top: 1px solid var(--sa-border);
  padding-top: .25rem;
}

.nav-group-header {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .55rem .65rem;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius, var(--sa-r-sm));
  transition: background var(--sa-t-fast);
  -webkit-tap-highlight-color: transparent;
}
.nav-group-header:hover { background: var(--sa-border); }

.nav-group-icon {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sa-r-sm);
  background: color-mix(in srgb, var(--group-color) 12%, transparent);
  color: var(--group-color);
  transition: all var(--sa-t-fast);
}
.nav-group-header:hover .nav-group-icon {
  background: color-mix(in srgb, var(--group-color) 18%, transparent);
}

.nav-group-title {
  flex: 1; text-align: left;
  font-size: .78rem; font-weight: 700; letter-spacing: .3px;
  color: var(--sa-text2);
  transition: color var(--sa-t-fast);
}
.nav-group-header:hover .nav-group-title { color: var(--sa-text); }

.nav-group-chevron {
  flex-shrink: 0; color: var(--sa-muted);
  transition: transform .2s ease-out, color var(--sa-t-fast);
}
.nav-group-header:hover .nav-group-chevron { color: var(--sa-text2); }
.nav-group-header[aria-expanded="false"] .nav-group-chevron { transform: rotate(-90deg); }

.nav-group-items {
  overflow: hidden;
  transition: max-height .25s ease-out, opacity .2s ease-out;
  opacity: 1; padding-left: .25rem;
}
.nav-group-items.collapsed {
  max-height: 0 !important; opacity: 0; pointer-events: none;
}

.nav-sub-label {
  font-size: .6rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--sa-muted);
  padding: .5rem .75rem .15rem; opacity: .45;
}

.nav-group.has-active > .nav-group-header .nav-group-icon {
  background: color-mix(in srgb, var(--group-color) 20%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--group-color) 15%, transparent);
}
.nav-group.has-active > .nav-group-header .nav-group-title { color: var(--sa-text); }

.nav-item.nav-locked { opacity: .35; cursor: default; pointer-events: auto; }
.nav-item.nav-locked::after { content: '\1F512'; font-size: .6rem; margin-left: auto; opacity: .6; }
.nav-item.nav-locked:hover { background: transparent; }
.nav-item-help {
  margin-top: 8px;
  border-top: 1px solid var(--sa-border);
  padding-top: 8px !important;
}

/* ── 9. SKELETON LOADING ──────────────────────────────────── */
@keyframes sa-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--sa-surface) 25%,
    var(--sa-surface2) 50%,
    var(--sa-surface) 75%
  );
  background-size: 800px 100%;
  animation: sa-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--sa-r-sm);
}

/* ── 10. OVERLAY (slide-overs) ────────────────────────────── */
.sa-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: var(--sa-scrim-a-55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--sa-t);
}
.sa-overlay.open { display: block; opacity: 1; }

/* ── 11. QUILL EDITOR DARK OVERRIDES ─────────────────────── */
.ql-toolbar.ql-snow {
  background: var(--sa-surface2);
  border-color: var(--sa-border2);
}
.ql-container.ql-snow {
  background: var(--sa-surface);
  border-color: var(--sa-border2);
  color: var(--sa-text);
}
.ql-editor { color: var(--sa-text); }
.ql-toolbar .ql-stroke { stroke: var(--sa-text2); }
.ql-toolbar .ql-fill   { fill:   var(--sa-text2); }
.ql-toolbar button:hover .ql-stroke { stroke: var(--sa-accent-light); }
.ql-toolbar button.ql-active .ql-stroke { stroke: var(--sa-accent-light); }
#wb-panel-visual .ql-toolbar.ql-snow  { border-radius: 0; }
#wb-panel-visual .ql-container.ql-snow { border-radius: 0 0 var(--radius, var(--sa-r-sm)) var(--radius, var(--sa-r-sm)); }

/* ── 12. BADGE STATUS PILLS ───────────────────────────────── */
.badge.badge-green  { background: color-mix(in srgb, var(--sa-green) 15%, transparent); color: var(--sa-green-strong); border: 1px solid color-mix(in srgb, var(--sa-green) 30%, transparent); }
.badge.badge-yellow { background: color-mix(in srgb, var(--sa-amber) 15%, transparent);  color: var(--sa-amber-strong); border: 1px solid color-mix(in srgb, var(--sa-amber) 30%, transparent); }
.badge.badge-blue   { background: color-mix(in srgb, var(--sa-blue) 15%, transparent);  color: var(--sa-blue-strong); border: 1px solid color-mix(in srgb, var(--sa-blue) 30%, transparent); }
.badge.badge-green,
.badge.badge-yellow,
.badge.badge-blue {
  display: inline-block; font-size: .7rem; font-weight: 600;
  padding: .15rem .5rem; border-radius: var(--sa-r-full);
}

/* ── 13. STRESS BANNER ────────────────────────────────────── */
.stress-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(90deg, var(--sa-violet-deep-fill), var(--sa-red-deep-fill));
  color: var(--sa-on-fill); text-align: center;
  font-size: .75rem; font-weight: 700; letter-spacing: .8px;
  padding: .45rem .75rem; display: none;
}
.stress-banner.active { display: block; }

/* ── 14. LOGO ANIMATION ───────────────────────────────────── */
@keyframes logoR {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-4px); }
  60%     { transform: translateY(1px); }
}
.logo-rrr { color: var(--sa-accent-light); display: inline-flex; gap: 0; }
.logo-rrr i { font-style: normal; display: inline-block; animation: logoR 2.8s ease-in-out infinite; }
.logo-rrr i:nth-child(1) { animation-delay: 0s; }
.logo-rrr i:nth-child(2) { animation-delay: .18s; }
.logo-rrr i:nth-child(3) { animation-delay: .36s; }

/* ── 15. STATS ROW ────────────────────────────────────────── */
.stats-row {
  display: flex; gap: .875rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.stat-chip {
  background: linear-gradient(135deg, var(--sa-surface) 0%, var(--sa-card-bg) 100%);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.1rem 1.375rem;
  flex: 1; min-width: 110px; text-align: center;
  cursor: default; transition: all var(--sa-t);box-shadow:var(--sa-card-shadow)}
.stat-chip:hover {
  border-color: color-mix(in srgb, var(--sa-violet-strong) 38%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--sa-shadow-a-50), 0 0 0 1px color-mix(in srgb, var(--sa-violet-strong) 18%, transparent);
}
.stat-chip .val {
  font-size: 2.25rem; font-weight: 900; line-height: 1;
  color: var(--sa-accent-light);
  text-shadow: 0 0 24px color-mix(in srgb, var(--sa-violet-strong) 25%, transparent);
}
.stat-chip .lbl {
  font-size: .68rem; font-weight: 700; color: var(--sa-muted2);
  margin-top: .35rem; text-transform: uppercase; letter-spacing: .8px;
}

/* ── 16. HEALTH GRID ──────────────────────────────────────── */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .875rem; margin-bottom: 1.25rem;
}
.health-card {
  background: linear-gradient(135deg, var(--sa-surface) 0%, var(--sa-card-bg) 100%);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.1rem 1.25rem;
  transition: all var(--sa-t);box-shadow:var(--sa-card-shadow)}
.health-card:hover {
  border-color: color-mix(in srgb, var(--sa-violet-strong) 30%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--sa-shadow-a-45);
}
.health-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--sa-muted); margin-bottom: .35rem;
}
.health-val {
  font-size: 1.55rem; font-weight: 900; line-height: 1; margin-bottom: .1rem;
}
.health-val.ok       { color: var(--sa-green-2); }
.health-val.warning  { color: var(--sa-amber); }
.health-val.critical {
  color: var(--sa-red);
  animation: healthPulse 1.5s ease-in-out infinite;
}
@keyframes healthPulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ── 17. ADMIN CARDS ──────────────────────────────────────── */
.admin-card {
  background: linear-gradient(135deg, var(--sa-surface) 0%, var(--sa-card-bg) 100%);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.1rem 1.25rem;
  margin-bottom: .625rem;
  transition: all 180ms cubic-bezier(0.4,0,0.2,1);box-shadow:var(--sa-card-shadow)}
.admin-card:hover {
  border-color: color-mix(in srgb, var(--sa-violet-strong) 30%, transparent);
  box-shadow: 0 12px 32px var(--sa-shadow-a-50), 0 0 0 1px color-mix(in srgb, var(--sa-violet-strong) 10%, transparent);
  transform: translateY(-2px);
}
.admin-card--clickable { cursor: pointer; }
.admin-email { font-weight: 700; font-size: .9rem; color: var(--sa-text); }
.admin-meta  { font-size: .75rem; color: var(--sa-muted2); margin-top: .2rem; }
.admin-quota-bar {
  height: 4px; background: var(--sa-border);
  border-radius: var(--sa-r-full); overflow: hidden; margin: .625rem 0 .25rem;
}
.admin-quota-fill {
  height: 100%; border-radius: var(--sa-r-full);
  background: linear-gradient(90deg, var(--sa-accent), var(--sa-violet-strong-fill));
  box-shadow: 0 0 12px color-mix(in srgb, var(--sa-violet-strong-fill) 40%, transparent);
  transition: width .4s;
}

/* ── 18. KPI BAR ──────────────────────────────────────────── */
.adm-kpi-bar {
  display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.adm-kpi {
  flex: 1; min-width: 90px;
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: .85rem 1.1rem; text-align: center;box-shadow:var(--sa-card-shadow)}
.adm-kpi .kpi-val { font-size: 1.6rem; font-weight: 900; color: var(--sa-accent-light); line-height: 1; }
.adm-kpi .kpi-lbl { font-size: .65rem; color: var(--sa-muted2); text-transform: uppercase; letter-spacing: .5px; margin-top: .25rem; }

/* ── 19. ADMIN TOOLBAR ────────────────────────────────────── */
.adm-toolbar {
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem;
}
.adm-filter-tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.adm-filter-tab {
  padding: .35rem .75rem; border-radius: var(--sa-r-full); font-size: .78rem; font-weight: 600;
  background: var(--sa-surface); border: 1px solid var(--sa-border); color: var(--sa-muted2);
  cursor: pointer; transition: all var(--sa-t-fast);box-shadow:var(--sa-card-shadow)}
.adm-filter-tab:hover { color: var(--sa-text); border-color: var(--sa-border2); }
.adm-filter-tab.active { background: color-mix(in srgb, var(--sa-violet-strong) 12%, transparent); border-color: color-mix(in srgb, var(--sa-violet-strong) 28%, transparent); color: var(--sa-accent-light); }

.adm-search-input {
  flex: 1; min-width: 180px; max-width: 320px;
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .45rem .8rem;
  color: var(--sa-text); font-size: .83rem; font-family: inherit;box-shadow:var(--sa-card-shadow)}
.adm-search-input:focus { outline: none; border-color: color-mix(in srgb, var(--sa-violet-strong) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet-strong) 8%, transparent); }
.adm-plan-filter-select {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .38rem .65rem;
  color: var(--sa-text); font-size: .8rem; font-family: inherit; cursor: pointer;box-shadow:var(--sa-card-shadow)}
.adm-plan-filter-select:focus { outline: none; border-color: color-mix(in srgb, var(--sa-violet-strong) 45%, transparent); }

/* ── 20. BULK BAR ─────────────────────────────────────────── */
.adm-bulk-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .55rem .9rem;
  background: color-mix(in srgb, var(--sa-violet-strong) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet-strong) 20%, transparent);
  border-radius: var(--radius-lg, var(--sa-r-md)); margin-bottom: .75rem; font-size: .82rem;
}
.adm-bulk-bar.hidden { display: none; }
.adm-bulk-count { font-weight: 700; color: var(--sa-accent-light); }
.adm-bulk-cancel { margin-left: auto; }

/* ── 21. ADMIN TABLE ──────────────────────────────────────── */
.adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md));
  background: var(--sa-surface);box-shadow:var(--sa-card-shadow)}
.adm-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.adm-table th, .adm-table td {
  padding: .55rem .85rem; text-align: left;
  border-bottom: 1px solid var(--sa-border); white-space: nowrap;
}
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table thead th {
  font-size: .68rem; font-weight: 700; color: var(--sa-muted2);
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--sa-fg-a-02); user-select: none;
}
.adm-table thead th.sortable { cursor: pointer; }
.adm-table thead th.sortable:hover { color: var(--sa-text); }
.adm-table thead th.sort-asc::after  { content: ' ↑'; color: var(--sa-accent-light); }
.adm-table thead th.sort-desc::after { content: ' ↓'; color: var(--sa-accent-light); }
.adm-table tbody tr { cursor: pointer; transition: background var(--sa-t-fast); }
.adm-table tbody tr:hover { background: color-mix(in srgb, var(--sa-violet-strong) 4%, transparent); }
.adm-table tbody tr.selected { background: color-mix(in srgb, var(--sa-violet-strong) 9%, transparent); }
.adm-td-name { font-weight: 600; color: var(--sa-text); font-size: .82rem; }
.adm-td-sub  { font-size: .7rem; color: var(--sa-muted2); margin-top: .1rem; }
.adm-mfa-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .12rem .4rem; border-radius: var(--sa-r-full); font-size: .65rem; font-weight: 700;
}
.adm-mfa-chip.totp  { background: color-mix(in srgb, var(--sa-green-2) 12%, transparent); color: var(--sa-green-2); }
.adm-mfa-chip.email { background: color-mix(in srgb, var(--sa-blue) 12%, transparent);  color: var(--sa-blue); }
.adm-mfa-chip.none  { color: var(--sa-faint); }

/* Plan pills */
.adm-plan-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .65rem; font-weight: 800; letter-spacing: .3px;
  padding: .18rem .55rem; border-radius: var(--sa-r-full);
  border: 1px solid transparent;
}
.adm-plan-pill.solo   { background: color-mix(in srgb, var(--sa-green-2) 12%, transparent);  color: var(--sa-green-2);  border-color: color-mix(in srgb, var(--sa-green-2) 20%, transparent); }
.adm-plan-pill.etoile { background: color-mix(in srgb, var(--sa-amber) 12%, transparent);  color: var(--sa-amber);  border-color: color-mix(in srgb, var(--sa-amber) 20%, transparent); }
.adm-plan-pill.pro    { background: color-mix(in srgb, var(--sa-indigo) 12%, transparent); color: var(--sa-indigo);  border-color: color-mix(in srgb, var(--sa-indigo) 20%, transparent); }
.adm-plan-pill.elite  { background: color-mix(in srgb, var(--sa-amber-strong) 15%, transparent);  color: var(--sa-amber-strong);  border-color: color-mix(in srgb, var(--sa-amber-strong) 20%, transparent); }
.adm-plan-pill.demo   { background: var(--sa-fg-a-10);  color: var(--sa-muted); }

/* ── 22. ADMIN DETAIL PANEL / SLIDE-OVER ─────────────────── */
#dialog-overlay { z-index: 500; }

.adm-panel-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: var(--sa-scrim-a-55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 200ms;
}
.adm-panel-overlay.open { display: block; opacity: 1; }

.adm-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--sa-slideover-width); max-width: 100vw; z-index: 301;
  background: var(--sa-surface);
  border-left: 1px solid var(--sa-border2);
  box-shadow: -20px 0 60px var(--sa-shadow-a-60);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1), visibility 280ms;
  display: flex; flex-direction: column; overflow: hidden;
  visibility: hidden; pointer-events: none;
}
.adm-panel.open { visibility: visible; pointer-events: auto; transform: translateX(0); }
@media (max-width: 600px) { .adm-panel { width: 100vw; } }

.adm-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--sa-border);
  background: var(--sa-surface2); flex-shrink: 0;
}
.adm-panel-identity { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.adm-panel-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sa-violet-deep-fill), var(--sa-indigo-deep-fill));
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.1rem; color: var(--sa-on-fill); flex-shrink: 0;
}
.adm-panel-name  { font-weight: 700; font-size: .95rem; }
.adm-panel-email {
  font-size: .78rem; color: var(--sa-muted2); margin-top: .1rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.adm-panel-close {
  background: var(--sa-surface3); border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--sa-r-full);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--sa-text2); transition: background var(--sa-t-fast);
}
.adm-panel-close:hover { background: color-mix(in srgb, var(--sa-violet-strong) 12%, transparent); }
.adm-panel-close svg { width: 14px; height: 14px; }

.adm-panel-tabs {
  display: flex; border-bottom: 1px solid var(--sa-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; flex-shrink: 0;
}
.adm-panel-tabs::-webkit-scrollbar { display: none; }
.adm-panel-tab {
  padding: .7rem 1rem; font-size: .82rem; font-weight: 600;
  color: var(--sa-muted2); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: all var(--sa-t-fast); white-space: nowrap; flex-shrink: 0;
}
.adm-panel-tab:hover { color: var(--sa-text); }
.adm-panel-tab.active { color: var(--sa-accent-light); border-bottom-color: var(--sa-accent-light); }

.adm-panel-body { flex: 1; overflow-y: auto; padding: 0; }
.adm-panel-tab-content { display: none; padding: 1.25rem 1.5rem; }
.adm-panel-tab-content.active { display: block; }

/* Community user panel */
.cu-tabs { display:flex; gap:0; border-bottom:1px solid var(--sa-border); margin-bottom:1.5rem; }
.cu-tab-btn { padding:.6rem 1.2rem; background:none; border:none; color:var(--sa-muted2); cursor:pointer; border-bottom:2px solid transparent; font-size:.85rem; }
.cu-tab-btn.active { color:var(--sa-accent); border-bottom-color:var(--sa-accent); }
.cu-tab-btn:hover { color:var(--sa-text); }
.cu-field { margin-bottom:.75rem; }
.cu-field label { display:block; font-size:.75rem; color:var(--sa-muted2); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.5px; }
.cu-field .input { width:100%; }
.cu-field-row   { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.cu-field-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.75rem; }
.cu-readonly { color:var(--sa-muted2); font-size:.9rem; }
.cu-section-title { font-size:.85rem; font-weight:600; color:var(--sa-text); margin:1.5rem 0 .75rem; padding-bottom:.25rem; border-bottom:1px solid var(--sa-border); }

/* Info rows */
.adm-info-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--sa-border); font-size: .85rem;
}
.adm-info-row:last-child { border-bottom: none; }
.adm-info-label { color: var(--sa-muted2); font-size: .78rem; flex-shrink: 0; }
.adm-info-value { color: var(--sa-text); text-align: right; word-break: break-word; }

.adm-section-title {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sa-muted2); margin: 1.25rem 0 .75rem;
}
.adm-section-title:first-child { margin-top: 0; }

/* Plan cards */
.adm-plan-card {
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1rem 1.25rem; margin-bottom: 1rem;
  border: 1px solid var(--sa-border);
}
.adm-plan-card.solo   { border-color: color-mix(in srgb, var(--sa-green-2) 25%, transparent);  background: color-mix(in srgb, var(--sa-green-2) 5%, transparent); }
.adm-plan-card.etoile { border-color: color-mix(in srgb, var(--sa-amber) 25%, transparent);  background: color-mix(in srgb, var(--sa-amber) 5%, transparent); }
.adm-plan-card.pro    { border-color: color-mix(in srgb, var(--sa-blue) 25%, transparent);  background: color-mix(in srgb, var(--sa-blue) 5%, transparent); }
.adm-plan-card.elite  { border-color: color-mix(in srgb, var(--sa-violet-soft) 25%, transparent); background: color-mix(in srgb, var(--sa-violet-soft) 5%, transparent); }
.adm-plan-card.demo   { border-color: var(--sa-border2); background: var(--sa-fg-a-02); }

.adm-plan-features { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin-top: .6rem; font-size: .75rem; color: var(--sa-muted2); }
.adm-plan-feature  { display: flex; align-items: center; gap: .3rem; }

.adm-billing-field { margin-bottom: .875rem; }
.adm-billing-field label { display: block; font-size: .75rem; color: var(--sa-muted2); margin-bottom: .3rem; }
.adm-billing-field input,
.adm-billing-field select,
.adm-billing-field textarea {
  width: 100%; background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .5rem .75rem;
  color: var(--sa-text); font-size: .875rem; font-family: inherit;
}
.adm-billing-field textarea { resize: vertical; min-height: 70px; }
.adm-billing-field input:focus,
.adm-billing-field select:focus,
.adm-billing-field textarea:focus { outline: none; border-color: color-mix(in srgb, var(--sa-violet-strong) 50%, transparent); }

.adm-mrr-chip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  background: color-mix(in srgb, var(--sa-green-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sa-green-2) 25%, transparent);
  border-radius: var(--sa-r-sm); padding: .35rem .75rem; margin-bottom: .75rem;
}
.adm-mrr-chip .mrr-val { font-size: 1.3rem; font-weight: 900; color: var(--sa-green-2); }
.adm-mrr-chip .mrr-lbl { font-size: .72rem; color: var(--sa-muted2); }

.adm-event-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 0; border-bottom: 1px solid var(--sa-border); gap: .75rem; flex-wrap: wrap;
}
.adm-event-row:last-child { border-bottom: none; }
.adm-event-name { font-size: .87rem; font-weight: 600; }
.adm-event-meta { font-size: .72rem; color: var(--sa-muted2); margin-top: .15rem; }

/* ── 23. EVENT ADMIN PANEL ────────────────────────────────── */
.event-admin-panel {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); margin-top: 1.25rem; overflow: hidden;box-shadow:var(--sa-card-shadow)}
.event-admin-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--sa-border);
  background: var(--sa-surface2);
}
.event-admin-panel-title { font-weight: 700; font-size: .95rem; }

.admin-tabs {
  display: flex; border-bottom: 1px solid var(--sa-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
  padding: .75rem 1rem; font-size: .82rem; font-weight: 600;
  color: var(--sa-muted2); background: transparent; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: all var(--sa-t-fast); white-space: nowrap; flex-shrink: 0;
}
.admin-tab:hover  { color: var(--sa-text); }
.admin-tab.active { color: var(--sa-accent-light); border-bottom-color: var(--sa-accent-light); }
.admin-tab-content { display: none; padding: 1.25rem; }
.admin-tab-content.active { display: block; }

/* ── 24. REDIS / MYSQL BROWSERS ───────────────────────────── */
.redis-key-item,
.mysql-row-item {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .75rem 1rem; margin-bottom: .375rem;
  cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; transition: all var(--sa-t); font-size: .85rem;box-shadow:var(--sa-card-shadow)}
.redis-key-item:hover,
.mysql-row-item:hover {
  border-color: color-mix(in srgb, var(--sa-violet-strong) 30%, transparent);
  background: color-mix(in srgb, var(--sa-violet-strong) 4%, transparent);
  transform: translateX(2px);
}
.redis-key-name { font-family: ui-monospace, monospace; color: var(--sa-text2); word-break: break-all; }
.redis-key-type {
  font-size: .68rem; font-weight: 700; padding: .18rem .55rem; border-radius: 4px; flex-shrink: 0;
  background: color-mix(in srgb, var(--sa-violet-strong) 12%, transparent); color: var(--sa-accent-light);
}
.redis-search-card { margin-bottom: 1rem; }
.redis-search-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.redis-search-input { flex: 1; min-width: 150px; }

/* ── 25. OVERVIEW EVENTS ──────────────────────────────────── */
.overview-event {
  background: linear-gradient(135deg, var(--sa-surface) 0%, var(--sa-card-bg) 100%);
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1rem 1.25rem;
  margin-bottom: .625rem; display: flex; align-items: center;
  gap: 1rem; flex-wrap: wrap; transition: all var(--sa-t);box-shadow:var(--sa-card-shadow)}
.overview-event:hover {
  border-color: color-mix(in srgb, var(--sa-violet-strong) 35%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--sa-shadow-a-45);
}

/* ── 26. SECURITY / 2FA ───────────────────────────────────── */
.totp-qr-box {
  background: linear-gradient(135deg, var(--sa-surface) 0%, color-mix(in srgb, var(--sa-violet-strong) 4%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--sa-violet-strong) 20%, transparent);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.5rem;
  text-align: center; margin-bottom: 1rem;
}
.totp-qr-box img { background: var(--sa-on-fill); padding: .75rem; border-radius: var(--radius, var(--sa-r-sm)); max-width: 180px; }

/* ── 27. STRESS MODE ──────────────────────────────────────── */
.stress-mode-card {
  border: 1px solid color-mix(in srgb, var(--sa-red-strong) 20%, transparent);
  background: color-mix(in srgb, var(--sa-red-strong) 4%, transparent);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.5rem; margin-bottom: 1rem;
}
.stress-mode-active { animation: stressPulse 2s ease-in-out infinite !important; }
@keyframes stressPulse {
  0%,100% { border-color: color-mix(in srgb, var(--sa-red-strong) 30%, transparent); box-shadow: 0 0 0 transparent; }
  50%     { border-color: color-mix(in srgb, var(--sa-red-strong) 70%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--sa-red-strong) 15%, transparent); }
}

/* ── 28. AUDIT LOG ────────────────────────────────────────── */
.audit-toolbar {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem;
}
.audit-toolbar input, .audit-toolbar select {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .45rem .75rem;
  color: var(--sa-text); font-size: .83rem;box-shadow:var(--sa-card-shadow)}
.audit-toolbar select { min-width: 200px; cursor: pointer; }
.audit-search-input { flex: 1; min-width: 160px; }

.audit-list {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); overflow: hidden;box-shadow:var(--sa-card-shadow)}
.audit-entry {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--sa-border);
  transition: background var(--sa-t-fast);
}
.audit-entry:last-child { border-bottom: none; }
.audit-entry:hover { background: var(--sa-fg-a-02); }
.audit-icon {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: .9rem;
}
.audit-icon.actor-admin      { background: color-mix(in srgb, var(--sa-violet-strong) 15%, transparent); }
.audit-icon.actor-superadmin { background: color-mix(in srgb, var(--sa-red-strong) 15%, transparent); }
.audit-icon.actor-badge      { background: color-mix(in srgb, var(--sa-green-3) 15%, transparent); }
.audit-icon.actor-stripe     { background: color-mix(in srgb, var(--sa-indigo) 15%, transparent); }
.audit-body   { flex: 1; min-width: 0; }
.audit-email  { font-weight: 700; font-size: .85rem; color: var(--sa-text); }
.audit-action { font-size: .82rem; color: var(--sa-muted2); margin-top: .1rem; }
.audit-action strong { color: var(--sa-text2); }
.audit-meta {
  display: flex; gap: .75rem; margin-top: .25rem;
  font-size: .7rem; color: var(--sa-muted); flex-wrap: wrap;
}
.audit-meta span { display: flex; align-items: center; gap: .2rem; }
.audit-empty { padding: 2rem; text-align: center; color: var(--sa-muted2); font-size: .85rem; }

/* ── 29. TICKET CENTER ────────────────────────────────────── */
.tc-nav-badge {
  background: var(--sa-accent); color: var(--sa-text); font-size: .6rem; font-weight: 900;
  min-width: 16px; height: 16px; border-radius: var(--sa-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 3px; margin-left: .3rem; vertical-align: middle;
}
.tc-stats-bar {
  display: flex; align-items: stretch; gap: 0;
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); margin-bottom: .75rem; overflow: hidden; flex-shrink: 0;box-shadow:var(--sa-card-shadow)}
.tc-sbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .12rem; padding: .6rem 1.25rem; flex: 1;
}
.tc-sbar-val          { font-size: 1.4rem; font-weight: 900; line-height: 1; color: var(--sa-text); }
.tc-sbar-val.tc-sbar-accent { color: var(--sa-accent-light); }
.tc-sbar-val.tc-sbar-urgent { color: var(--sa-orange-strong); }
.tc-sbar-val.tc-sbar-muted  { color: var(--sa-muted2); }
.tc-sbar-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .5px; color: var(--sa-muted2); font-weight: 600; }
.tc-sbar-sep { width: 1px; background: var(--sa-border); flex-shrink: 0; }

.tc-wrap {
  display: grid; grid-template-columns: 290px 1fr;
  height: min(76vh, 720px);
  border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md));
  overflow: hidden; background: var(--sa-bg);
}
.tc-left  { border-right: 1px solid var(--sa-border); display: flex; flex-direction: column; overflow: hidden; }
.tc-right { display: flex; flex-direction: column; overflow: hidden; }

.tc-toolbar {
  padding: .625rem; border-bottom: 1px solid var(--sa-border);
  display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0;
}
.tc-search {
  width: 100%; background: var(--sa-surface2); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .375rem .6rem;
  font-size: .8rem; color: var(--sa-text); font-family: inherit;
}
.tc-search:focus { outline: none; border-color: var(--sa-accent); }
.tc-filter-bar { display: flex; gap: .25rem; }
.tc-filter-btn {
  flex: 1; padding: .28rem .3rem; border: 1px solid var(--sa-border2);
  border-radius: var(--sa-r-full); background: transparent; color: var(--sa-text2);
  font-size: .7rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.tc-filter-btn.tc-active { background: var(--sa-accent-fill); border-color: var(--sa-accent-fill); color: var(--sa-on-accent); }

.tc-prio-filter-bar { display: flex; gap: .2rem; flex-wrap: wrap; }
.tc-prio-filter-btn {
  display: inline-flex; align-items: center; gap: .22rem;
  padding: .2rem .45rem; border: 1px solid var(--sa-border2);
  border-radius: var(--sa-r-full); background: transparent; color: var(--sa-text2);
  font-size: .67rem; font-weight: 600; cursor: pointer; transition: all .15s;
}
.tc-prio-filter-btn.tc-active { background: var(--sa-surface2); border-color: var(--sa-border2); color: var(--sa-text); }

.tc-prio-dot    { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tc-prio-urgent { background: var(--sa-orange-strong-fill); }
.tc-prio-high   { background: var(--sa-red-fill); }
.tc-prio-normal { background: var(--sa-blue-fill); }
.tc-prio-low    { background: var(--sa-faint); }
.tc-prio-label  { font-size: .64rem; font-weight: 700; }
.tc-prio-label-urgent { color: var(--sa-orange-strong); }
.tc-prio-label-high   { color: var(--sa-red); }
.tc-prio-label-normal { color: var(--sa-blue); }
.tc-prio-label-low    { color: var(--sa-muted2); }

.tc-list { flex: 1; overflow-y: auto; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.tc-card {
  padding: .65rem .8rem; border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--sa-surface);box-shadow:var(--sa-card-shadow)}
.tc-card:hover  { border-color: var(--sa-accent); }
.tc-card.tc-card-active  { border-color: var(--sa-accent); background: var(--sa-surface2); }
.tc-card.tc-card-unread  { border-left: 3px solid var(--sa-accent); }
.tc-card-head    { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.tc-card-email   { font-size: .78rem; font-weight: 700; color: var(--sa-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.tc-card-meta    { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.tc-card-topic   { margin-bottom: .22rem; }
.tc-card-preview { font-size: .75rem; color: var(--sa-muted2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .22rem; }
.tc-card-foot    { display: flex; align-items: flex-end; justify-content: space-between; gap: .25rem; }
.tc-card-prio    { display: flex; align-items: center; gap: .22rem; }
.tc-card-time    { font-size: .68rem; color: var(--sa-muted2); }
.tc-card-assignee { font-size: .63rem; color: var(--sa-muted2); font-style: italic; }
.tc-plan-badge { font-size: .62rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; padding: .1rem .3rem; border-radius: .2rem; background: var(--sa-surface2); color: var(--sa-muted2); }
.tc-plan-pro   { background: color-mix(in srgb, var(--sa-indigo-deep) 13%, transparent); color: var(--sa-indigo); }
.tc-plan-elite { background: color-mix(in srgb, var(--sa-amber-strong) 13%, transparent); color: var(--sa-amber); }
.tc-unread-dot {
  min-width: 17px; height: 17px; border-radius: var(--sa-r-full);
  background: var(--sa-accent-fill); color: var(--sa-on-accent); font-size: .62rem; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}
.tc-status-open     { font-size: .68rem; color: var(--sa-green-3); font-weight: 700; }
.tc-status-resolved { font-size: .68rem; color: var(--sa-muted2); font-weight: 700; }
.tc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--sa-muted2); gap: .5rem; }
.tc-empty-icon  { font-size: 2rem; }

.tc-conv-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--sa-border);
  background: var(--sa-surface); flex-shrink: 0;
}
.tc-conv-header-left  { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.tc-conv-header-info  { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.tc-conv-email        { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-conv-header-tags  { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tc-conv-actions      { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

.tc-conv-body { flex: 1; display: grid; grid-template-columns: 1fr 238px; overflow: hidden; }
.tc-conv-main { display: flex; flex-direction: column; overflow: hidden; }

.tc-messages {
  flex: 1; overflow-y: auto; padding: .875rem 1rem;
  display: flex; flex-direction: column; gap: .5rem; background: var(--sa-bg);
}
.tc-no-msgs { text-align: center; color: var(--sa-muted2); font-size: .82rem; padding: 2rem; }

.support-msg         { display: flex; flex-direction: column; }
.support-msg-admin   { align-items: flex-start; }
.support-msg-support { align-items: flex-end; }
.support-msg-note    { align-items: center; }
.support-msg-bubble {
  max-width: 80%; padding: .5rem .75rem;
  border-radius: 1rem; font-size: .82rem; line-height: 1.45;
  word-break: break-word; white-space: pre-wrap;
}
.support-msg-admin   .support-msg-bubble { background: var(--sa-surface2); color: var(--sa-text); border-bottom-left-radius: .25rem; }
.support-msg-support .support-msg-bubble { background: var(--sa-accent); color: var(--sa-text); border-bottom-right-radius: .25rem; }
.support-msg-meta { font-size: .68rem; color: var(--sa-muted2); margin-top: .2rem; padding: 0 .25rem; }

.support-note-label {
  font-size: .63rem; font-weight: 700; color: var(--sa-amber);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: .2rem; text-align: center;
}
.support-msg-bubble-note {
  max-width: 85%; padding: .45rem .85rem;
  border-radius: var(--radius, var(--sa-r-sm)); font-size: .82rem; line-height: 1.45;
  word-break: break-word; white-space: pre-wrap;
  background: color-mix(in srgb, var(--sa-amber) 7%, transparent); border: 1.5px dashed color-mix(in srgb, var(--sa-amber) 35%, transparent); color: var(--sa-text2);
}

.tc-reply-bar { display: flex; flex-direction: column; border-top: 1px solid var(--sa-border); background: var(--sa-surface); flex-shrink: 0; }
.tc-reply-mode-tabs { display: flex; border-bottom: 1px solid var(--sa-border); }
.tc-mode-tab {
  padding: .35rem .875rem; font-size: .74rem; font-weight: 600;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--sa-text2); cursor: pointer; transition: all .15s;
  font-family: inherit; margin-bottom: -1px;
}
.tc-mode-tab.tc-mode-active { color: var(--sa-accent-light); border-bottom-color: var(--sa-accent-light); }
.tc-reply-input-row { display: flex; gap: .5rem; align-items: flex-end; padding: .5rem .75rem; }
.tc-reply-bar-note .tc-reply-input-row { background: color-mix(in srgb, var(--sa-amber) 4%, transparent); }
.tc-reply-input {
  flex: 1; resize: none; background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .45rem .6rem;
  font-size: .82rem; color: var(--sa-text); font-family: inherit; max-height: 100px;
}
.tc-reply-input:focus { outline: none; border-color: var(--sa-accent); }
.tc-reply-bar-note .tc-reply-input       { border-color: color-mix(in srgb, var(--sa-amber) 30%, transparent); }
.tc-reply-bar-note .tc-reply-input:focus { border-color: var(--sa-amber); }
.tc-resolved-info { padding: .625rem 1rem; font-size: .8rem; color: var(--sa-muted2); border-top: 1px solid var(--sa-border); background: var(--sa-surface); text-align: center; flex-shrink: 0; }
.tc-btn-link { background: none; border: none; color: var(--sa-accent-light); cursor: pointer; font-size: .8rem; padding: 0; font-family: inherit; }
.tc-btn-link:hover { text-decoration: underline; }

.tc-conv-sidebar { display: flex; flex-direction: column; overflow-y: auto; background: var(--sa-surface); border-left: 1px solid var(--sa-border); }
.tc-sidebar-section { padding: .75rem 1rem; border-bottom: 1px solid var(--sa-border); }
.tc-sidebar-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--sa-muted); margin-bottom: .4rem; }
.tc-sidebar-select {
  width: 100%; background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .32rem .55rem;
  font-size: .8rem; color: var(--sa-text); font-family: inherit; cursor: pointer;
}
.tc-sidebar-select:focus { outline: none; border-color: var(--sa-accent); }
.tc-sidebar-assign-row { display: flex; gap: .3rem; align-items: center; }
.tc-sidebar-input {
  flex: 1; min-width: 0; background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .3rem .5rem;
  font-size: .8rem; color: var(--sa-text); font-family: inherit;
}
.tc-sidebar-input:focus { outline: none; border-color: var(--sa-accent); }

.support-topic-tag {
  display: inline-block; font-size: .72rem; font-weight: 700;
  padding: .15rem .5rem; border-radius: var(--sa-r-full);
  background: var(--sa-surface2); color: var(--sa-text2); border: 1px solid var(--sa-border2);
}
.tc-back-btn { display: none; }

/* ── 30. SITE CONFIG EDITOR ───────────────────────────────── */
.sc-card {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.25rem 1.375rem; margin-bottom: 1rem;
  transition: all var(--sa-t);box-shadow:var(--sa-card-shadow)}
.sc-card:hover { border-color: color-mix(in srgb, var(--sa-violet-strong) 25%, transparent); box-shadow: 0 4px 16px var(--sa-shadow-a-30); transform: translateY(-1px); }
.sc-card-header { display: flex; align-items: flex-start; gap: .875rem; margin-bottom: 1.125rem; }
.sc-card-icon   { font-size: 1.375rem; flex-shrink: 0; margin-top: .1rem; }
.sc-card-title  { font-size: .9rem; font-weight: 700; color: var(--sa-text); margin-bottom: .2rem; }
.sc-card-sub    { font-size: .78rem; color: var(--sa-muted2); }
.sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.sc-field  { display: flex; flex-direction: column; gap: .35rem; }
.sc-label  { font-size: .75rem; font-weight: 600; color: var(--sa-muted2); text-transform: uppercase; letter-spacing: .4px; }
.sc-input {
  background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .5rem .625rem;
  font-size: .875rem; color: var(--sa-text); font-family: inherit;
  transition: border-color .15s; width: 100%; box-sizing: border-box;
}
.sc-input:focus { outline: none; border-color: var(--sa-accent); }
.sc-input--sm   { max-width: 120px; }

.sc-reason-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .375rem; border-bottom: 1px solid var(--sa-border); transition: background .1s;
}
.sc-reason-row:last-child { border-bottom: none; }
.sc-reason-row:hover { background: var(--sa-fg-a-02); }
.sc-reason-inactive { opacity: .45; }
.sc-reason-toggle { cursor: pointer; flex-shrink: 0; position: relative; }
.sc-reason-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-reason-toggle-dot {
  display: block; width: 28px; height: 16px; border-radius: var(--sa-r-sm);
  background: var(--sa-border); transition: background .2s; position: relative;
}
.sc-reason-toggle-dot::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--sa-on-fill); transition: transform .2s;
}
.sc-reason-toggle input:checked + .sc-reason-toggle-dot { background: var(--sa-accent); }
.sc-reason-toggle input:checked + .sc-reason-toggle-dot::after { transform: translateX(12px); }
.sc-order-btn {
  background: none; border: 1px solid var(--sa-border); border-radius: .25rem;
  padding: .1rem .3rem; font-size: .75rem; cursor: pointer; color: var(--sa-muted2);
  line-height: 1; transition: border-color .15s, color .15s;
}
.sc-order-btn:hover:not(:disabled) { border-color: var(--sa-accent); color: var(--sa-accent-light); }
.sc-order-btn:disabled { opacity: .25; cursor: default; }
.sc-reason-order { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sc-reason-label-input { flex: 1; min-width: 0; }
.sc-reason-value-input { width: 90px; flex-shrink: 0; font-size: .75rem; color: var(--sa-muted2); font-family: 'Courier New', monospace; }
.sc-reason-del {
  background: none; border: none; cursor: pointer;
  color: var(--sa-muted2); font-size: 1.1rem; line-height: 1;
  padding: .2rem .35rem; border-radius: .25rem;
  transition: color .15s, background .15s; flex-shrink: 0;
}
.sc-reason-del:hover { color: var(--sa-rose); background: color-mix(in srgb, var(--sa-rose) 10%, transparent); }
.sc-add-btn {
  margin-top: .875rem; background: none; border: 1px dashed var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); color: var(--sa-muted2); font-size: .82rem;
  padding: .5rem 1rem; cursor: pointer; width: 100%; transition: border-color .15s, color .15s;
}
.sc-add-btn:hover { border-color: var(--sa-accent); color: var(--sa-accent-light); }

.sc-toggle-wrap { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; margin-top: .25rem; }
.sc-toggle-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }
.sc-toggle-track {
  position: relative; display: inline-block; width: 36px; height: 20px;
  border-radius: var(--sa-r-md); background: var(--sa-border); transition: background .2s; flex-shrink: 0;
}
.sc-toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--sa-on-fill); transition: transform .2s;
}
.sc-toggle-wrap input:checked ~ .sc-toggle-track { background: var(--sa-accent); }
.sc-toggle-wrap input:checked ~ .sc-toggle-track .sc-toggle-thumb { transform: translateX(16px); }
.sc-toggle-lbl { font-size: .82rem; color: var(--sa-muted2); }
.sc-save-row { display: flex; align-items: center; gap: .75rem; padding: 1.25rem 0 .5rem; flex-wrap: wrap; }

/* ── 31. HEALTH MONITORING ────────────────────────────────── */
@keyframes hmPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.75)} }

.hm-topbar { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-bottom: .875rem; }
.hm-ts { font-size: .7rem; color: var(--sa-muted); }
.hm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sa-green-fill); animation: hmPulse 2s ease-in-out infinite; }

.hm-chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: 1.25rem; }
.hm-chart-card {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1rem 1.25rem; transition: border-color var(--sa-t-fast);box-shadow:var(--sa-card-shadow)}
.hm-chart-card:hover { border-color: var(--sa-border2); }
.hm-chart-title { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--sa-muted2); margin-bottom: .75rem; }
.hm-chart-sub   { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .62rem; color: var(--sa-muted); }
.hm-chart-wrap  { position: relative; height: 160px; }

.hm-section-hdr { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--sa-muted2); margin: 1.25rem 0 .75rem; }

.hm-docker-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.hm-docker-item {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: .875rem 1.1rem; transition: border-color var(--sa-t-fast);box-shadow:var(--sa-card-shadow)}
.hm-docker-item:hover { border-color: var(--sa-border2); }
.hm-docker-name { font-size: .8rem; font-weight: 700; color: var(--sa-text); margin-bottom: .6rem; }
.hm-docker-metrics { display: flex; flex-direction: column; gap: .4rem; }
.hm-docker-metric  { display: flex; align-items: center; gap: .6rem; }
.hm-dlbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sa-muted2); width: 2.25rem; flex-shrink: 0; }
.hm-dpct { font-size: .75rem; font-weight: 700; width: 4rem; text-align: right; flex-shrink: 0; line-height: 1; }
.hm-prog { flex: 1; height: 5px; background: var(--sa-border); border-radius: 3px; overflow: hidden; }
.hm-prog-fill { height: 100%; border-radius: 3px; transition: width .5s ease; }
.hm-prog-fill.ok       { background: var(--sa-green-fill); }
.hm-prog-fill.warning  { background: var(--sa-amber-fill); }
.hm-prog-fill.critical { background: var(--sa-red-fill); }

.hm-net-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.hm-net-iface { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm)); padding: .75rem 1rem;box-shadow:var(--sa-card-shadow)}
.hm-net-iname { font-size: .75rem; font-weight: 700; color: var(--sa-text); margin-bottom: .35rem; }
.hm-net-stats { display: flex; gap: .875rem; font-size: .75rem; color: var(--sa-muted2); flex-wrap: wrap; }

.hm-log-tabs { display: flex; gap: .35rem; margin-bottom: .5rem; flex-wrap: wrap; }
.hm-log-tab {
  background: var(--sa-surface2); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .3rem .75rem;
  font-size: .7rem; font-weight: 600; color: var(--sa-muted2); cursor: pointer; transition: all var(--sa-t-fast);
}
.hm-log-tab:hover  { color: var(--sa-text); border-color: var(--sa-border2); }
.hm-log-tab.active { color: var(--sa-text); border-color: var(--sa-border3); background: var(--sa-surface3); }
.hm-log-body {
  background: var(--sa-scrim-a-35); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); padding: .75rem 1rem;
  max-height: 280px; overflow-y: auto;
  font-family: 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  font-size: .7rem; line-height: 1.6; margin-bottom: 1.5rem;
}
.hm-log-line { color: var(--sa-muted2); white-space: pre-wrap; word-break: break-all; }
.hm-log-err  { color: var(--sa-red); }
.hm-log-warn { color: var(--sa-amber); }
.hm-log-info { color: var(--sa-blue-soft); }

/* ── 32. THREAT INTELLIGENCE ──────────────────────────────── */
.ti-score-card {
  display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem;
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md)); margin-bottom: 1rem;box-shadow:var(--sa-card-shadow)}
.ti-score-ring {
  width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--score-color) calc(var(--score-pct) * 1%), var(--sa-fg-a-06) 0);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.ti-score-ring::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--sa-surface);
}
.ti-score-value { position: relative; z-index: 1; font-size: 1.6rem; font-weight: 900; line-height: 1; }
.ti-score-info  { flex: 1; }
.ti-score-label { font-size: 1.1rem; font-weight: 800; margin-bottom: .15rem; }

.ti-kpi-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.ti-kpi {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .75rem; text-align: center; transition: border-color .15s;box-shadow:var(--sa-card-shadow)}
.ti-kpi:hover { border-color: var(--sa-border3); }

.ti-trend-chart { display: flex; align-items: flex-end; gap: .5rem; height: 90px; padding-bottom: 1.5rem; position: relative; }
.ti-trend-bar   { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; position: relative; }
.ti-trend-stack { display: flex; flex-direction: column; width: 100%; border-radius: 3px; overflow: hidden; min-height: 2px; }
.ti-trend-label { font-size: .65rem; color: var(--sa-muted); position: absolute; bottom: -18px; white-space: nowrap; }
.ti-trend-total { font-size: .65rem; color: var(--sa-muted2); font-weight: 700; position: absolute; top: -14px; }

.ti-threat-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 0; border-bottom: 1px solid var(--sa-border); font-size: .82rem; flex-wrap: wrap;
}
.ti-threat-row:last-child { border-bottom: none; }
.ti-sev { font-size: .62rem; font-weight: 800; letter-spacing: .5px; padding: .15rem .4rem; border-radius: 4px; flex-shrink: 0; line-height: 1.3; }
.ti-threat-type { font-weight: 600; color: var(--sa-text); font-family: ui-monospace, 'SF Mono', 'Fira Code', monospace; font-size: .78rem; }
.ti-threat-meta { font-size: .75rem; color: var(--sa-muted2); background: var(--sa-surface2); padding: .1rem .35rem; border-radius: 4px; }
.ti-threat-time { margin-left: auto; font-size: .72rem; color: var(--sa-muted); flex-shrink: 0; }

.ti-session-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--sa-border); }
.ti-session-row:last-child { border-bottom: none; }
.ti-session-info { flex: 1; min-width: 0; }
.ti-session-info strong { font-size: .85rem; }

/* ── 33. SW UPDATE BANNER ─────────────────────────────────── */
.sw-update-banner {
  display: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sa-violet) 10%, transparent), color-mix(in srgb, var(--sa-violet-strong) 8%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--sa-violet) 18%, transparent);
}
.sw-update-banner.visible { display: block; }
.sw-update-inner {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .55rem 1rem; font-size: .8rem; font-weight: 600; color: var(--sa-accent-light);
}
.sw-update-icon { flex-shrink: 0; opacity: .8; }
.sw-update-btn {
  background: var(--sa-accent); border: none; color: var(--sa-text);
  padding: .3rem .85rem; border-radius: var(--sa-r-full); cursor: pointer;
  font-weight: 700; font-size: .75rem; letter-spacing: .3px;
  transition: all var(--sa-t-fast); box-shadow: 0 2px 8px color-mix(in srgb, var(--sa-violet-strong) 25%, transparent);
}
.sw-update-btn:hover { background: var(--sa-violet-strong-fill); box-shadow: 0 4px 14px color-mix(in srgb, var(--sa-violet-strong-fill) 35%, transparent); transform: translateY(-1px); }
.sw-update-close {
  background: none; border: none; color: var(--sa-muted2); cursor: pointer;
  font-size: 1.1rem; padding: 0 .25rem; line-height: 1;
  transition: color var(--sa-t-fast); margin-left: .25rem;
}
.sw-update-close:hover { color: var(--sa-text); }

/* ── 34. TOPBAR ELEMENTS ──────────────────────────────────── */
.topbar-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.topbar-user { font-size: .8rem; color: var(--sa-muted2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.topbar-role-badge {
  font-size: .65rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--sa-accent-light); background: color-mix(in srgb, var(--sa-violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent);
  padding: .15rem .55rem; border-radius: var(--sa-r-full); white-space: nowrap;
}
.topbar-notif-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1.15rem; padding: .3rem .5rem; color: var(--sa-muted2);
  -webkit-tap-highlight-color: transparent; border-radius: var(--radius, var(--sa-r-sm)); transition: all var(--sa-t-fast);
}
.topbar-notif-btn:hover { background: var(--sa-border); color: var(--sa-text); }

.notif-backdrop {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: var(--sa-scrim-a-50); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.notif-backdrop.open { display: block; }

.topbar-section-info { display: flex; align-items: baseline; gap: .5rem; margin-left: .75rem; overflow: hidden; }
.topbar-section-title { font-size: .82rem; font-weight: 700; color: var(--sa-text); white-space: nowrap; }
.topbar-section-desc  { font-size: .72rem; color: var(--sa-muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 35. CONTENT LAYOUT ───────────────────────────────────── */
.content {
  background: radial-gradient(ellipse 70% 30% at 50% 0%, color-mix(in srgb, var(--sa-violet-strong) 4%, transparent) 0%, transparent 70%) !important;
}
.page-header { border-left-color: var(--sa-accent) !important; }
.page-header--sub { margin-top: 2.5rem; }
.page-header--sub h3 { font-size: 1rem; font-weight: 700; color: var(--sa-text); letter-spacing: -.2px; }
.page-header-hint { font-size: .78rem; color: var(--sa-muted2); font-weight: 400; }
.req { color: var(--sa-rose); font-weight: 700; }

/* ── 36. NOTIFICATION PREFERENCES PANEL ──────────────────── */
.notif-prefs-panel {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 491;
  background: var(--sa-surface); border-radius: 1.25rem 1.25rem 0 0;
  border-top: 1px solid var(--sa-border);
  padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto;
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,1,.23,1);
}
.notif-prefs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.notif-prefs-title  { font-size: .95rem; font-weight: 800; }
.notif-prefs-close  { background: var(--sa-fg-a-07); border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; color: var(--sa-muted2); display: flex; align-items: center; justify-content: center; }
.notif-pref-row { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; border-bottom: 1px solid var(--sa-border); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.notif-pref-row:last-child { border-bottom: none; }
.notif-pref-info  { display: flex; align-items: center; gap: .75rem; }
.notif-pref-icon  { font-size: 1.25rem; width: 28px; text-align: center; flex-shrink: 0; }
.notif-pref-label { font-size: .88rem; font-weight: 600; }
.notif-pref-desc  { font-size: .75rem; color: var(--sa-muted2); margin-top: .1rem; }
.notif-toggle { width: 42px; height: 24px; border-radius: var(--sa-r-full); background: var(--sa-fg-a-12); position: relative; transition: background .2s; flex-shrink: 0; }
.notif-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--sa-fg-a-50); transition: transform .2s, background .2s; }
.notif-toggle.on { background: var(--sa-accent); }
.notif-toggle.on::after { transform: translateX(18px); background: var(--sa-on-fill); }
.notif-disable-btn { margin-top: 1.25rem; font-size: .82rem; color: var(--sa-muted2) !important; opacity: .7; }

/* ── 37. CREATE ADMIN MODAL ───────────────────────────────── */
.ca-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--sa-scrim-a-65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ca-overlay.hidden { display: none; }
.ca-modal {
  background: var(--sa-surface); border: 1px solid var(--sa-border2);
  border-radius: var(--sa-r-lg); width: 100%; max-width: 720px; max-height: 92vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 64px var(--sa-shadow-a-60);
  animation: dialogIn .22s ease;
}
.ca-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem 1.5rem 0; flex-shrink: 0; }
.ca-title    { font-size: 1.1rem; font-weight: 800; color: var(--sa-text); }
.ca-subtitle { font-size: .78rem; color: var(--sa-muted2); margin-top: .2rem; }
.ca-close {
  background: var(--sa-fg-a-07); border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer; color: var(--sa-muted2);
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s;
}
.ca-close:hover { background: var(--sa-fg-a-12); }
.ca-body    { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.ca-section { background: var(--sa-bg); border: 1px solid var(--sa-border); border-radius: var(--sa-r-md); padding: 1rem 1.125rem; }
.ca-section-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--sa-muted2); margin-bottom: .875rem; }
.ca-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.ca-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.ca-plan-info { font-size: .78rem; color: var(--sa-muted2); margin-top: .5rem; padding: .5rem .75rem; border-radius: var(--sa-r-sm); background: color-mix(in srgb, var(--sa-violet-strong) 7%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet-strong) 15%, transparent); display: none; }
.ca-plan-info.visible { display: block; }
.ca-payment-confirm { margin-top: .75rem; background: color-mix(in srgb, var(--sa-green-strong) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sa-green-strong) 20%, transparent); border-radius: var(--sa-r-md); padding: .875rem 1rem; }
.ca-checkbox-row { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.ca-checkbox-row input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--sa-green); margin-top: .15rem; flex-shrink: 0; cursor: pointer; }
.ca-checkbox-row strong { font-size: .88rem; color: var(--sa-text); display: block; }
.ca-checkbox-row small  { font-size: .75rem; color: var(--sa-muted2); }
.ca-email-preview { font-size: .78rem; color: var(--sa-muted2); margin-top: .5rem; line-height: 1.55; }
.ca-footer { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--sa-border); flex-shrink: 0; }

/* ── 38. ROADMAP ──────────────────────────────────────────── */
.roadmap-version-badge {
  font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--sa-accent-light); background: color-mix(in srgb, var(--sa-violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent);
  padding: .2rem .6rem; border-radius: var(--sa-r-full);
}
.rm-vision {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sa-violet) 8%, transparent), color-mix(in srgb, var(--sa-rose) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--sa-violet) 18%, transparent); border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.75rem 2rem; margin-bottom: 1.5rem; position: relative; overflow: hidden;
}
.rm-vision::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 200px; height: 200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--sa-violet) 10%, transparent) 0%, transparent 70%); border-radius: 50%;
}
.rm-vision-tagline { font-size: 1.3rem; font-weight: 800; color: var(--sa-text); line-height: 1.3; margin-bottom: .5rem; position: relative; }
.rm-vision-tagline span { color: var(--sa-accent-light); }
.rm-vision-sub { font-size: .88rem; color: var(--sa-muted2); line-height: 1.5; position: relative; max-width: 600px; }

.rm-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.rm-pillar { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.25rem; transition: border-color .2s, transform .2s;box-shadow:var(--sa-card-shadow)}
.rm-pillar:hover { border-color: color-mix(in srgb, var(--sa-violet) 30%, transparent); transform: translateY(-2px); }
.rm-pillar-icon  { font-size: 1.5rem; margin-bottom: .5rem; }
.rm-pillar-title { font-size: .92rem; font-weight: 700; color: var(--sa-text); margin-bottom: .35rem; }
.rm-pillar-desc  { font-size: .78rem; color: var(--sa-muted2); line-height: 1.5; }

.rm-timeline { position: relative; padding-left: 2rem; margin-bottom: 2rem; }
.rm-timeline::before {
  content: ''; position: absolute; left: .6rem; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--sa-accent) 0%, var(--sa-rose-fill) 50%, var(--sa-blue-fill) 100%); border-radius: 2px;
}
.rm-phase { position: relative; margin-bottom: 1.75rem; }
.rm-phase-dot { position: absolute; left: -1.65rem; top: .25rem; width: 14px; height: 14px; border-radius: 50%; border: 2px solid; background: var(--sa-bg); }
.rm-phase-dot.purple { border-color: var(--sa-accent-light); box-shadow: 0 0 8px color-mix(in srgb, var(--sa-violet) 30%, transparent); }
.rm-phase-dot.pink   { border-color: var(--sa-rose); box-shadow: 0 0 8px color-mix(in srgb, var(--sa-rose) 30%, transparent); }
.rm-phase-dot.blue   { border-color: var(--sa-blue); box-shadow: 0 0 8px color-mix(in srgb, var(--sa-blue) 30%, transparent); }
.rm-phase-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.rm-phase-title { font-size: 1rem; font-weight: 700; color: var(--sa-text); }
.rm-phase-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: .15rem .5rem; border-radius: var(--sa-r-full); }
.rm-phase-badge.purple { color: var(--sa-accent-light); background: color-mix(in srgb, var(--sa-violet) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent); }
.rm-phase-badge.pink   { color: var(--sa-rose); background: color-mix(in srgb, var(--sa-rose) 12%, transparent); border: 1px solid color-mix(in srgb, var(--sa-rose) 20%, transparent); }
.rm-phase-badge.blue   { color: var(--sa-blue);  background: color-mix(in srgb, var(--sa-blue) 12%, transparent);  border: 1px solid color-mix(in srgb, var(--sa-blue) 20%, transparent); }
.rm-phase-desc { font-size: .82rem; color: var(--sa-muted2); margin-bottom: .75rem; line-height: 1.5; }
.rm-feature-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.rm-feature-tag { font-size: .68rem; font-weight: 600; padding: .2rem .55rem; border-radius: var(--sa-r-sm); background: var(--sa-surface2); border: 1px solid var(--sa-border); color: var(--sa-text2); }

.rm-strategy { margin-bottom: 2rem; }
.rm-strategy-title { font-size: 1rem; font-weight: 700; color: var(--sa-text); margin-bottom: .75rem; display: flex; align-items: center; gap: .4rem; }
.rm-strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; }
.rm-strategy-card { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm)); padding: 1rem 1.15rem; display: flex; gap: .75rem; align-items: flex-start;box-shadow:var(--sa-card-shadow)}
.rm-strategy-card-icon  { font-size: 1.2rem; flex-shrink: 0; margin-top: .1rem; }
.rm-strategy-card-title { font-size: .82rem; font-weight: 700; color: var(--sa-text); margin-bottom: .2rem; }
.rm-strategy-card-desc  { font-size: .75rem; color: var(--sa-muted2); line-height: 1.45; }

.rm-kpi-row { display: flex; gap: .875rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.rm-kpi { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.1rem 1.375rem; flex: 1; min-width: 130px; text-align: center;box-shadow:var(--sa-card-shadow)}
.rm-kpi .val { font-size: 1.6rem; font-weight: 900; color: var(--sa-accent-light); line-height: 1; }
.rm-kpi .lbl { font-size: .65rem; color: var(--sa-muted2); margin-top: .25rem; text-transform: uppercase; letter-spacing: .5px; }

.rm-positioning { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.5rem; margin-bottom: 1.5rem;box-shadow:var(--sa-card-shadow)}
.rm-vs-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
.rm-vs-col h4 { font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.rm-vs-col ul { list-style: none; padding: 0; }
.rm-vs-col ul li { font-size: .75rem; color: var(--sa-muted2); padding: .25rem 0; }
.rm-vs-divider { font-size: 1.2rem; font-weight: 900; color: var(--sa-muted); align-self: center; }

/* ── 39. AI ASSISTANT ─────────────────────────────────────── */
.ai-intro-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sa-violet) 8%, transparent), color-mix(in srgb, var(--sa-blue) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--sa-violet) 18%, transparent); border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.15rem 1.5rem; margin-bottom: 1.25rem; font-size: .85rem;
  color: var(--sa-text2); line-height: 1.6;
}
.ai-intro-card strong { color: var(--sa-text); }
.ai-suggestions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .65rem; margin-bottom: 1.5rem; }
.ai-suggestion-card {
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm));
  padding: .9rem 1rem; cursor: pointer; transition: all .15s; text-align: left;
  display: flex; flex-direction: column; gap: .25rem;box-shadow:var(--sa-card-shadow)}
.ai-suggestion-card:hover   { border-color: color-mix(in srgb, var(--sa-violet) 30%, transparent); transform: translateY(-2px); box-shadow: 0 4px 12px var(--sa-shadow-a-14); }
.ai-suggestion-card.selected { border-color: var(--sa-accent); background: color-mix(in srgb, var(--sa-violet) 6%, transparent); }
.ai-suggestion-card-icon  { font-size: 1.15rem; }
.ai-suggestion-card-title { font-size: .82rem; font-weight: 700; color: var(--sa-text); }
.ai-suggestion-card-desc  { font-size: .7rem; color: var(--sa-muted2); line-height: 1.4; }

.ai-compose-area { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius-lg, var(--sa-r-md)); padding: 1.25rem 1.5rem;box-shadow:var(--sa-card-shadow)}
.ai-compose-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--sa-muted2); display: block; margin-bottom: .4rem; }
.ai-compose-textarea {
  width: 100%; resize: vertical; border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm));
  background: var(--sa-bg); color: var(--sa-text); padding: .75rem 1rem;
  font-size: .88rem; font-family: inherit; line-height: 1.5; min-height: 80px; outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.ai-compose-textarea:focus { border-color: color-mix(in srgb, var(--sa-violet) 40%, transparent); }
.ai-compose-actions { display: flex; gap: .5rem; margin-top: .85rem; flex-wrap: wrap; }
.ai-launch-btn { display: flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: var(--radius, var(--sa-r-sm)); border: none; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .15s; text-decoration: none; }
.ai-launch-btn:hover { transform: translateY(-1px); }
.ai-launch-claude     { background: linear-gradient(135deg, var(--sa-accent), var(--sa-violet-deep-fill)); color: var(--sa-on-fill); box-shadow: 0 2px 8px color-mix(in srgb, var(--sa-violet-fill) 30%, transparent); }
.ai-launch-claude:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--sa-violet) 40%, transparent); }
.ai-launch-perplexity { background: linear-gradient(135deg, var(--sa-blue-fill), var(--sa-blue-strong-fill)); color: var(--sa-on-fill); box-shadow: 0 2px 8px color-mix(in srgb, var(--sa-blue-fill) 30%, transparent); }
.ai-launch-perplexity:hover { box-shadow: 0 4px 16px color-mix(in srgb, var(--sa-blue) 40%, transparent); }
.ai-launch-copy       { background: var(--sa-surface2); color: var(--sa-text2); border: 1px solid var(--sa-border); }
.ai-launch-copy:hover { border-color: var(--sa-border2); }
.ai-launch-icon { font-size: .95rem; }
.ai-prompt-preview-toggle { margin-top: .75rem; }
.ai-prompt-preview {
  margin-top: .5rem; padding: 1rem; border-radius: var(--radius, var(--sa-r-sm));
  background: var(--sa-bg); border: 1px solid var(--sa-border);
  font-size: .72rem; color: var(--sa-muted2); line-height: 1.6;
  max-height: 350px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}

/* ── 40. WEBSITE CMS ──────────────────────────────────────── */
.wb-toolbar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; padding: .75rem 1rem;
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm));box-shadow:var(--sa-card-shadow)}
.wb-status { margin-left: auto; font-size: .75rem; color: var(--sa-muted2); }
.wb-status.saved   { color: var(--sa-green); }
.wb-status.unsaved { color: var(--sa-amber); }

.wb-section-item {
  display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; margin-bottom: .5rem;
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm));
  cursor: grab; transition: all .15s ease;box-shadow:var(--sa-card-shadow)}
.wb-section-item:hover { border-color: var(--sa-border2); }
.wb-section-item.dragging  { opacity: .5; border-color: var(--sa-rose); box-shadow: 0 4px 20px color-mix(in srgb, var(--sa-rose) 15%, transparent); }
.wb-section-item.drag-over { border-color: var(--sa-rose); border-style: dashed; }
.wb-drag-handle   { cursor: grab; color: var(--sa-muted2); font-size: .9rem; user-select: none; flex-shrink: 0; }
.wb-section-info  { flex: 1; min-width: 0; }
.wb-section-name  { font-weight: 600; font-size: .88rem; color: var(--sa-text); display: flex; align-items: center; gap: .5rem; }
.wb-section-name .badge { font-size: .65rem; }
.wb-section-meta  { font-size: .72rem; color: var(--sa-muted2); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-section-actions { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.wb-section-toggle { position: relative; width: 36px; height: 20px; background: var(--sa-surface2); border-radius: var(--sa-r-md); border: 1px solid var(--sa-border2); cursor: pointer; transition: all .2s; }
.wb-section-toggle.active { background: var(--sa-accent); border-color: var(--sa-accent); }
.wb-section-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--sa-on-fill); transition: transform .2s; }
.wb-section-toggle.active::after { transform: translateX(16px); }

.wb-tabs { display: flex; gap: 0; margin-bottom: 0; }
.wb-tab {
  padding: .5rem 1.25rem; font-size: .82rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--sa-border2); border-bottom: none;
  border-radius: var(--radius, var(--sa-r-sm)) var(--radius, var(--sa-r-sm)) 0 0;
  background: var(--sa-surface); color: var(--sa-muted2); transition: all .15s;box-shadow:var(--sa-card-shadow)}
.wb-tab.active          { background: var(--sa-surface2); color: var(--sa-accent); }
.wb-tab:hover:not(.active) { color: var(--sa-text); }
.wb-tab-panel        { display: none; }
.wb-tab-panel.active { display: block; }
.wb-code-editor {
  width: 100%; min-height: 300px; padding: 1rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: .82rem; line-height: 1.6; tab-size: 2;
  background: var(--sa-bg); color: var(--sa-text);
  border: 1px solid var(--sa-border2);
  border-radius: 0 0 var(--radius, var(--sa-r-sm)) var(--radius, var(--sa-r-sm));
  resize: vertical; white-space: pre; overflow-x: auto;
}
.wb-code-editor:focus { outline: none; border-color: var(--sa-rose); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sa-rose) 15%, transparent); }
.wb-toggle-row { display: flex; align-items: center; gap: .75rem; cursor: pointer; font-size: .88rem; color: var(--sa-text2); }
.wb-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.wb-template-card {
  padding: 1.25rem 1rem; text-align: center; background: var(--sa-surface2);
  border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm)); cursor: pointer; transition: all .2s;
}
.wb-template-card:hover { border-color: var(--sa-rose); transform: translateY(-2px); box-shadow: 0 4px 16px color-mix(in srgb, var(--sa-rose) 10%, transparent); }
.wb-template-ico  { font-size: 1.5rem; margin-bottom: .5rem; }
.wb-template-name { font-size: .82rem; font-weight: 600; color: var(--sa-text); }
.wb-template-desc { font-size: .7rem; color: var(--sa-muted2); margin-top: .25rem; }

/* ── 41. TESTIMONIALS ─────────────────────────────────────── */
.testi-actions-card { padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.testi-actions-col       { flex: 1; min-width: 200px; }
.testi-actions-col--wide { min-width: 280px; }
.testi-actions-label { display: block; font-size: .78rem; font-weight: 600; color: var(--sa-muted2); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .5px; }
.testi-actions-row { display: flex; gap: .5rem; }
.testi-actions-input { flex: 1; padding: .5rem .75rem; background: var(--sa-bg); border: 1px solid var(--sa-border); border-radius: var(--sa-r-sm); color: var(--sa-text); font-size: .85rem; }
.testi-actions-input--name { width: 140px; flex: 0 0 auto; }
.testi-actions-sep { border-left: 1px solid var(--sa-border); height: 40px; margin: 0 .25rem; align-self: center; }

.ct-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: var(--sa-scrim-a-60); align-items: center; justify-content: center; }
.ct-overlay.open { display: flex; }
.ct-modal {
  background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md); padding: 2rem; width: 95%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px var(--sa-shadow-a-50); animation: dialogIn .22s ease;
}
.ct-modal-title { margin-bottom: 1.2rem; font-size: 1rem; font-weight: 800; }
.ct-rating-input { width: 80px; }
.ct-modal-footer { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* ── 42. INSTAGRAM ────────────────────────────────────────── */
.ig-add-card { padding: 1.25rem; margin-bottom: 1.5rem; display: none; }
.ig-add-title { margin: 0 0 1rem 0; font-size: .95rem; font-weight: 700; }
.ig-add-row   { display: flex; gap: .75rem; flex-wrap: wrap; }
.ig-add-input {
  background: var(--sa-surface2); border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm); color: var(--sa-text); padding: .6rem .9rem;
  font-size: .85rem; outline: none; font-family: inherit; transition: border-color var(--sa-t);
}
.ig-add-input:focus      { border-color: color-mix(in srgb, var(--sa-violet-strong) 50%, transparent); }
.ig-add-input--url       { flex: 1; min-width: 250px; }
.ig-add-input--caption   { width: 100%; margin-top: .75rem; }
.ig-add-select { background: var(--sa-surface2); border: 1px solid var(--sa-border); border-radius: var(--sa-r-sm); color: var(--sa-text); padding: .6rem .9rem; font-size: .85rem; font-family: inherit; cursor: pointer; }
.ig-add-error  { display: none; margin-top: .5rem; color: var(--sa-red); font-size: .82rem; font-weight: 600; }

.ig-guide-details { margin-top: 2rem; }
.ig-guide-summary { cursor: pointer; font-weight: 600; font-size: .95rem; color: var(--sa-text); padding: .5rem 0; transition: color var(--sa-t-fast); }
.ig-guide-summary:hover { color: var(--sa-accent-light); }
.ig-guide-body    { margin-top: 1rem; }
.ig-guide-toolbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.ig-guide-status  { display: none; margin-bottom: 1rem; padding: .6rem 1rem; border-radius: var(--sa-r-sm); font-size: .82rem; font-weight: 600; }
.ig-guide-textarea {
  width: 100%; background: var(--sa-surface2); border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm); color: var(--sa-text);
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: .8rem; line-height: 1.65; padding: 1rem; resize: vertical; min-height: 300px; outline: none; tab-size: 2;
}
.ig-guide-textarea:focus { border-color: color-mix(in srgb, var(--sa-violet-strong) 50%, transparent); }
.ig-guide-charcount { font-size: .72rem; color: var(--sa-muted2); }
.sidebar-ig-link { display: flex; align-items: center; justify-content: center; gap: .35rem; color: var(--sa-rose); font-size: .75rem; font-weight: 600; text-decoration: none; padding: .3rem 0; margin-bottom: .4rem; opacity: .8; transition: opacity .2s; }
.sidebar-ig-link:hover, .sidebar-ig-link:focus-visible { opacity: 1; }

/* ── 43. ONBOARDING — WELCOME MODAL ──────────────────────── */
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}
.welcome-backdrop {
  position: absolute; inset: 0; background: var(--sa-scrim-a-70);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.welcome-card {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--sa-sunken) 92%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent); border-radius: var(--sa-r-lg);
  padding: 2.5rem 2rem 2rem; max-width: 520px; width: 90vw;
  box-shadow: 0 24px 80px var(--sa-shadow-a-50), 0 0 0 1px color-mix(in srgb, var(--sa-violet) 8%, transparent);
  animation: welcomeFadeIn .4s ease-out;
}
@keyframes welcomeFadeIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.welcome-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--sa-muted2); font-size: 1.2rem; cursor: pointer; padding: .25rem; border-radius: 4px; transition: color var(--sa-t-fast); }
.welcome-close:hover { color: var(--sa-text); }
.welcome-header { text-align: center; margin-bottom: 1.5rem; }
.welcome-logo   { font-size: 2.5rem; margin-bottom: .5rem; animation: welcomePulse 2s ease-in-out infinite; }
@keyframes welcomePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.welcome-header h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 800; color: var(--sa-text); margin: 0 0 .5rem; }
.welcome-role-badge { display: inline-block; background: color-mix(in srgb, var(--sa-violet) 15%, transparent); color: var(--sa-accent-light); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .65rem; border-radius: var(--sa-r-xl); margin-bottom: .5rem; }
.welcome-subtitle { color: var(--sa-muted2); font-size: .9rem; margin: .5rem 0 0; }
.welcome-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.welcome-feature-card { background: color-mix(in srgb, var(--sa-violet) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet) 12%, transparent); border-radius: var(--sa-r-sm); padding: 1rem .75rem; text-align: center; transition: border-color var(--sa-t), background var(--sa-t); }
.welcome-feature-card:hover { border-color: color-mix(in srgb, var(--sa-violet) 25%, transparent); background: color-mix(in srgb, var(--sa-violet) 10%, transparent); }
.welcome-feature-icon  { font-size: 1.5rem; margin-bottom: .35rem; }
.welcome-feature-title { font-size: .82rem; font-weight: 700; color: var(--sa-text); margin-bottom: .2rem; }
.welcome-feature-desc  { font-size: .72rem; color: var(--sa-muted2); line-height: 1.4; }
.welcome-actions { display: flex; gap: .75rem; justify-content: center; }
.welcome-actions .btn { min-width: 140px; }

/* ── 44. GUIDED TOUR ──────────────────────────────────────── */
.tour-backdrop { position: fixed; inset: 0; z-index: 9990; background: var(--sa-scrim-a-55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.tour-highlight { position: fixed; z-index: 9991; border: 2px solid var(--sa-accent-light); border-radius: var(--radius, var(--sa-r-sm)); box-shadow: 0 0 0 4000px var(--sa-shadow-a-50), 0 0 20px color-mix(in srgb, var(--sa-violet) 30%, transparent); pointer-events: none; transition: all .3s ease; }
.tour-tooltip {
  position: fixed; z-index: 9992; background: color-mix(in srgb, var(--sa-sunken) 95%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--sa-violet) 25%, transparent); border-radius: var(--radius-lg, var(--sa-r-md));
  padding: 1.25rem; width: 360px; max-width: 90vw; box-shadow: 0 16px 48px var(--sa-shadow-a-50);
  animation: tourSlideIn .25s ease-out;
}
@keyframes tourSlideIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.tour-close { position: absolute; top: .6rem; right: .6rem; background: none; border: none; color: var(--sa-muted2); font-size: 1rem; cursor: pointer; padding: .2rem; transition: color var(--sa-t-fast); }
.tour-close:hover { color: var(--sa-text); }
.tour-icon-wrap { font-size: 1.8rem; margin-bottom: .5rem; }
.tour-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 700; color: var(--sa-text); margin-bottom: .4rem; }
.tour-body  { font-size: .82rem; color: var(--sa-text2); line-height: 1.55; margin-bottom: .75rem; }
.tour-progress { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.tour-progress-track { flex: 1; height: 3px; background: color-mix(in srgb, var(--sa-violet) 15%, transparent); border-radius: 2px; overflow: hidden; }
.tour-progress-bar   { height: 100%; background: var(--sa-accent-light); border-radius: 2px; transition: width .3s ease; }
.tour-step-indicator { font-size: .7rem; color: var(--sa-muted2); white-space: nowrap; }
.tour-nav { display: flex; gap: .5rem; justify-content: flex-end; }

/* ── 45. HELP FAB & SMART TIP ─────────────────────────────── */
.help-fab {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--sa-accent-light); color: var(--sa-text);
  border: none; font-size: 1.3rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--sa-violet) 35%, transparent), 0 0 0 3px color-mix(in srgb, var(--sa-violet) 10%, transparent);
  transition: transform var(--sa-t), box-shadow var(--sa-t);
  display: flex; align-items: center; justify-content: center;
}
.help-fab:hover  { transform: scale(1.08); box-shadow: 0 6px 24px color-mix(in srgb, var(--sa-violet) 45%, transparent), 0 0 0 4px color-mix(in srgb, var(--sa-violet) 15%, transparent); }
.help-fab:active { transform: scale(.95); }

.smart-tip-banner {
  position: fixed; bottom: 5rem; right: 1.5rem; z-index: 899;
  max-width: 380px; width: calc(100vw - 3rem);
  background: color-mix(in srgb, var(--sa-sunken) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--sa-violet) 20%, transparent); border-radius: var(--radius, var(--sa-r-sm));
  padding: .75rem 1rem; display: flex; align-items: center; gap: .6rem;
  box-shadow: 0 8px 32px var(--sa-shadow-a-40); animation: tipSlideIn .35s ease-out;
}
@keyframes tipSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.smart-tip-icon   { font-size: 1.2rem; flex-shrink: 0; }
.smart-tip-text   { font-size: .78rem; color: var(--sa-text2); flex: 1; line-height: 1.4; }
.smart-tip-action { background: none; border: none; color: var(--sa-accent-light); font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; padding: 0; transition: opacity var(--sa-t-fast); }
.smart-tip-action:hover { opacity: .8; }
.smart-tip-close  { background: none; border: none; color: var(--sa-muted2); font-size: .9rem; cursor: pointer; padding: .15rem; transition: color var(--sa-t-fast); flex-shrink: 0; }
.smart-tip-close:hover { color: var(--sa-text); }

/* ── 46. QUICK ACTIONS ────────────────────────────────────── */
.sa-quick-actions   { margin-top: 24px; }
.quick-actions-title { font-size: .82rem; font-weight: 700; color: var(--sa-muted2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.quick-actions-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.quick-action-card {
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm));
  padding: 1rem .75rem; text-align: center; cursor: pointer; transition: all var(--sa-t);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;box-shadow:var(--sa-card-shadow)}
.quick-action-card:hover { border-color: var(--sa-accent-light); background: color-mix(in srgb, var(--sa-violet) 6%, transparent); transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--sa-violet) 10%, transparent); }
.quick-action-icon  { font-size: 1.4rem; }
.quick-action-label { font-size: .78rem; font-weight: 600; color: var(--sa-text2); }

/* ── 47. CHECKLIST ────────────────────────────────────────── */
.sa-checklist { margin-top: 24px; background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm)); padding: 1rem 1.25rem;box-shadow:var(--sa-card-shadow)}
.checklist-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.checklist-title  { font-size: .82rem; font-weight: 700; color: var(--sa-text); flex: 1; }
.checklist-progress-text { font-size: .72rem; font-weight: 600; color: var(--sa-accent-light); }
.checklist-dismiss { background: none; border: none; color: var(--sa-muted2); font-size: .85rem; cursor: pointer; padding: .1rem; transition: color var(--sa-t-fast); }
.checklist-dismiss:hover { color: var(--sa-text); }
.checklist-progress { height: 3px; background: color-mix(in srgb, var(--sa-violet) 12%, transparent); border-radius: 2px; overflow: hidden; margin-bottom: .75rem; }
.checklist-progress-bar { height: 100%; background: var(--sa-accent-light); border-radius: 2px; transition: width .4s ease; }
.checklist-items { display: flex; flex-direction: column; gap: .25rem; }
.checklist-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 4px; cursor: pointer; transition: background var(--sa-t-fast); font-size: .82rem; color: var(--sa-text2); }
.checklist-item:hover { background: color-mix(in srgb, var(--sa-violet) 6%, transparent); }
.checklist-item.done .checklist-label { text-decoration: line-through; }
.checklist-item.done { opacity: .5; }
.checklist-check { width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--sa-border2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--sa-accent-light); font-weight: 700; transition: all var(--sa-t-fast); }
.checklist-item.done .checklist-check { background: var(--sa-accent-light); color: var(--sa-text); border-color: var(--sa-accent-light); }
.checklist-icon  { font-size: .9rem; flex-shrink: 0; }
.checklist-label { flex: 1; }

/* ── 48. SECTION HELP BANNERS ─────────────────────────────── */
.section-help-banner {
  display: flex; align-items: flex-start; gap: .6rem;
  background: color-mix(in srgb, var(--sa-violet) 6%, transparent); border: 1px solid color-mix(in srgb, var(--sa-violet) 12%, transparent);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .75rem 1rem; margin-bottom: 16px;
  animation: helpBannerIn .3s ease-out;
}
@keyframes helpBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-help-icon  { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }
.section-help-text  { font-size: .8rem; color: var(--sa-text2); line-height: 1.5; flex: 1; }
.section-help-close { background: none; border: none; color: var(--sa-muted2); font-size: .85rem; cursor: pointer; padding: .1rem; flex-shrink: 0; transition: color var(--sa-t-fast); }
.section-help-close:hover { color: var(--sa-text); }

/* ── 49. HELP CENTER ──────────────────────────────────────── */
.help-header h2  { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; color: var(--sa-text); margin: 0 0 .25rem; }
.help-subtitle   { font-size: .85rem; color: var(--sa-muted2); margin: 0; }
.help-search-box { margin-bottom: 16px; }
.help-search-box input {
  width: 100%; padding: .6rem 1rem; background: var(--sa-surface); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); color: var(--sa-text); font-size: .85rem; transition: border-color var(--sa-t);box-shadow:var(--sa-card-shadow)}
.help-search-box input:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet-strong) 10%, transparent); }
.help-search-box input::placeholder { color: var(--sa-muted2); }
.help-categories { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 16px; }
.help-cat-btn {
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--sa-r-xl);
  padding: .3rem .75rem; font-size: .75rem; font-weight: 600; color: var(--sa-text2);
  cursor: pointer; transition: all var(--sa-t); white-space: nowrap;box-shadow:var(--sa-card-shadow)}
.help-cat-btn:hover { border-color: var(--sa-accent); color: var(--sa-text); }
.help-cat-btn.active { background: color-mix(in srgb, var(--sa-violet) 15%, transparent); border-color: var(--sa-accent); color: var(--sa-accent-light); }
.help-articles  { display: flex; flex-direction: column; gap: .5rem; }
.help-article   { background: var(--sa-surface); border: 1px solid var(--sa-border); border-radius: var(--radius, var(--sa-r-sm)); overflow: hidden; transition: border-color var(--sa-t);box-shadow:var(--sa-card-shadow)}
.help-article:hover { border-color: color-mix(in srgb, var(--sa-violet) 15%, transparent); }
.help-article-header { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .75rem 1rem; background: none; border: none; cursor: pointer; color: var(--sa-text); font-size: .85rem; font-weight: 600; text-align: left; transition: background var(--sa-t-fast); }
.help-article-header:hover { background: color-mix(in srgb, var(--sa-violet) 4%, transparent); }
.help-article-icon    { font-size: 1rem; flex-shrink: 0; }
.help-article-title   { flex: 1; }
.help-article-chevron { font-size: .75rem; color: var(--sa-muted2); transition: transform var(--sa-t); }
.help-article.open .help-article-chevron { transform: rotate(90deg); }
.help-article-body { display: none; padding: 0 1rem 1rem; font-size: .82rem; color: var(--sa-text2); line-height: 1.6; }
.help-article.open .help-article-body { display: block; }
.help-article-body p  { margin: 0 0 .6rem; }
.help-article-body ul,
.help-article-body ol { margin: .4rem 0 .6rem 1.25rem; }
.help-article-body li { margin-bottom: .25rem; }
.help-article-body strong { color: var(--sa-text); }

/* ── 50. GLOBAL SEARCH ────────────────────────────────────── */
.sa-search-item:hover { background: color-mix(in srgb, var(--sa-rose) 8%, transparent); }
#sa-global-search:focus { outline: none; border-color: var(--sa-accent); }

/* ── 51. COMMUNITY ANALYTICS ──────────────────────────────── */
.ca-grid   { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.ca-block  { background:var(--sa-surface); border-radius:var(--sa-r-md); padding:1.25rem; }
.ca-block h3 { font-size:.9rem; margin:0 0 .75rem; color:var(--sa-text); }
.ca-chart  { min-height:120px; }
.ca-bar    { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; font-size:.8rem; }
.ca-bar-fill { height:6px; border-radius:3px; background:var(--sa-rose-fill); transition:width .3s; }
.ca-period { background:var(--sa-surface); border:1px solid var(--sa-border); color:var(--sa-muted2); cursor:pointer; }
.ca-period.active { background:var(--sa-rose-fill); color:var(--sa-on-fill); border-color:var(--sa-rose-fill); }
.ca-sparkline     { display:flex; align-items:flex-end; gap:1px; height:40px; }
.ca-sparkline-bar { background:var(--sa-rose-fill); border-radius:1px 1px 0 0; min-width:3px; flex:1; transition:height .3s; }

/* ── 52. MISC ─────────────────────────────────────────────── */
#blog-err      { margin-top: .75rem; }
#nav-label-primary + button .icon { color: var(--sa-accent-light); }

/* ── 53. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .sa-content { padding: 1.25rem 1.25rem; }
  .hm-chart-row { grid-template-columns: 1fr; }
  .health-grid  { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .ti-kpi-row   { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .tc-conv-body    { grid-template-columns: 1fr; }
  .tc-conv-sidebar { display: none; }
  .ca-grid         { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .tc-wrap   { grid-template-columns: 1fr; height: auto; }
  .tc-left   { max-height: 70vh; }
  .tc-right  { border-top: 1px solid var(--sa-border); min-height: 70vh; }
  .tc-back-btn { display: inline-flex !important; }
  .tc-stats-bar { padding: .4rem .5rem; }
  .tc-sbar-item { padding: .4rem .5rem; }
  .tc-sbar-val  { font-size: 1.1rem; }
  .ti-score-card { flex-direction: column; text-align: center; }
  .ti-threat-row { font-size: .78rem; }
  .topbar-user       { display: none; }
  .topbar-role-badge { display: none; }
  #sa-global-search  { display: none; }
}

@media (max-width: 640px) {
  .sa-content          { padding: 1rem; }
  .topbar-section-info { display: none; }
  .tour-tooltip {
    position: fixed !important; bottom: 0; left: 0; right: 0; top: auto !important;
    width: 100%; max-width: 100%;
    border-radius: var(--sa-r-md) var(--sa-r-md) 0 0;
    padding: 1.25rem 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }
  .sc-grid-2, .sc-grid-3 { grid-template-columns: 1fr; }
  .rm-vs-grid { grid-template-columns: 1fr; }
  .rm-vs-divider { display: none; }
  .testi-actions-card { flex-direction: column; }
  .testi-actions-sep  { display: none; }
  .testi-actions-input--name { width: 100%; flex: 1; }
  .ca-2col { grid-template-columns: 1fr; }
  .ca-3col { grid-template-columns: 1fr 1fr; }
  .ca-header, .ca-body, .ca-footer { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 600px) {
  .adm-panel   { width: 100vw; }
  .tc-conv-body { grid-template-columns: 1fr; }
  .tc-conv-sidebar { display: none; }
}

/* ── 54b. MOBILE SIDEBAR ─────────────────────────────────── */

/* Hamburger hidden on desktop, shown on mobile */
.sa-hamburger {
  display: none;
}

/* Dedicated overlay for mobile sidebar (does not conflict with slideover overlay) */
.sa-mobile-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 399;
  background: var(--sa-scrim-a-60);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity var(--sa-t);
}
.sa-mobile-overlay.open { display: block; }

@media (max-width: 768px) {
  /* Remove sidebar push — sidebar overlays content */
  .sa-main                  { margin-left: 0 !important; }
  .sa-main.sidebar-collapsed { margin-left: 0 !important; }

  /* Topbar above overlay so hamburger stays accessible */
  .sa-topbar { z-index: 401; padding: .6rem 1rem; }

  /* Empêche le débordement horizontal (cause du "je dois dézoomer") */
  html, body { overflow-x: hidden; }
  .sa-topbar sa-breadcrumb { display: none; }   /* fil d'ariane masqué sur mobile */
  .sa-topbar > * { min-width: 0; }               /* enfants flex rétrécissent au lieu de déborder */

  /* Hamburger button */
  .sa-hamburger {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: none;
    border: 1px solid var(--sa-border2);
    border-radius: var(--sa-r-sm);
    color: var(--sa-text2);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    transition: background var(--sa-t-fast);
  }
  .sa-hamburger:hover { background: var(--sa-surface2); }

  /* Sidebar slides in from left; hidden by default */
  sa-sidebar {
    transform: translateX(-100%);
    transition: transform 200ms ease-out;
    z-index: 460 !important; /* au-dessus overlay(399)+topbar(401) ; !important bat le shadow :host */
  }
  sa-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Tighten content padding on small screens */
  .sa-content { padding: .875rem; }

}

/* ── 54c. MOBILE BOTTOM-TAB BAR ──────────────────────────── */

/* Hidden on desktop; shown < 768px */
.sa-bottom-nav { display: none; }
/* Masquée quand le drawer est ouvert (laisse la place à la sidebar) */
body.sa-drawer-open .sa-bottom-nav { display: none !important; }

@media (max-width: 767px) {
  .sa-bottom-nav {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 390; /* sous overlay(399)+drawer(450) : le drawer ouvert recouvre la bottom-nav */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--sa-sunken) 96%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--sa-fg-a-08);
  }

  .sa-bn-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--sa-muted);
    font-family: 'DM Sans', sans-serif;
    position: relative;
    transition: color 150ms;
    -webkit-tap-highlight-color: transparent;
  }

  .sa-bn-item .sa-bn-icon { font-size: 1.15rem; line-height: 1; }
  .sa-bn-item .sa-bn-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sa-bn-item:hover,
  .sa-bn-item:focus-visible { color: var(--sa-text2); }

  .sa-bn-item.active { color: var(--sa-violet); }
  .sa-bn-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--sa-violet-fill);
    box-shadow: 0 0 8px color-mix(in srgb, var(--sa-violet-fill) 60%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sa-bn-item { transition: none; }
  .sa-bn-item.active::before { box-shadow: none; }
}

/* ── 54. REDUCED-MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 55. DOMAIN MODULE COMPONENTS ─────────────────────────── */

/* -- Section headers -- */
.sa-section-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.sa-section-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700; color: var(--sa-text);
  letter-spacing: -.2px; margin: 0;
}

/* -- Page layout -- */
.sa-page {
  display: flex; flex-direction: column; gap: 0;
}
.sa-page__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.sa-page__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 800; color: var(--sa-text);
  letter-spacing: -.3px; margin: 0;
}
.sa-page__actions {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.sa-page__body {
  flex: 1;
}

/* -- Buttons -- */
.sa-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1rem; border-radius: var(--radius, var(--sa-r-sm));
  font-size: .82rem; font-weight: 700; letter-spacing: .2px;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit; line-height: 1.3; white-space: nowrap;
  transition: all var(--sa-t-fast);
  text-decoration: none;
}
.sa-btn:disabled { opacity: .45; cursor: not-allowed; }

.sa-btn--primary {
  background: var(--sa-accent);
  border-color: var(--sa-accent);
  color: var(--sa-text);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sa-violet-strong) 25%, transparent);
}
.sa-btn--primary:hover:not(:disabled) {
  background: var(--sa-accent-dark);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sa-violet-strong) 35%, transparent);
  transform: translateY(-1px);
}

.sa-btn--purple {
  background: color-mix(in srgb, var(--sa-violet-strong) 12%, transparent);
  border-color: color-mix(in srgb, var(--sa-violet-strong) 30%, transparent);
  color: var(--sa-accent-light);
}
.sa-btn--purple:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sa-violet-strong) 20%, transparent);
  border-color: color-mix(in srgb, var(--sa-violet-strong) 45%, transparent);
  transform: translateY(-1px);
}

.sa-btn--green {
  background: color-mix(in srgb, var(--sa-green) 12%, transparent);
  border-color: color-mix(in srgb, var(--sa-green) 30%, transparent);
  color: var(--sa-green);
}
.sa-btn--green:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sa-green) 20%, transparent);
  border-color: color-mix(in srgb, var(--sa-green) 45%, transparent);
  transform: translateY(-1px);
}

.sa-btn--red {
  background: color-mix(in srgb, var(--sa-red) 12%, transparent);
  border-color: color-mix(in srgb, var(--sa-red) 30%, transparent);
  color: var(--sa-red);
}
.sa-btn--red:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sa-red) 20%, transparent);
  border-color: color-mix(in srgb, var(--sa-red) 45%, transparent);
  transform: translateY(-1px);
}

.sa-btn--yellow {
  background: color-mix(in srgb, var(--sa-amber) 12%, transparent);
  border-color: color-mix(in srgb, var(--sa-amber) 30%, transparent);
  color: var(--sa-amber);
}
.sa-btn--yellow:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sa-amber) 20%, transparent);
  border-color: color-mix(in srgb, var(--sa-amber) 45%, transparent);
  transform: translateY(-1px);
}

.sa-btn--danger {
  background: color-mix(in srgb, var(--sa-red-deep) 12%, transparent);
  border-color: color-mix(in srgb, var(--sa-red-deep) 30%, transparent);
  color: var(--sa-red);
}
.sa-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sa-red-deep) 22%, transparent);
  border-color: color-mix(in srgb, var(--sa-red-deep) 50%, transparent);
  transform: translateY(-1px);
}

.sa-btn--ghost {
  background: transparent;
  border-color: var(--sa-border2);
  color: var(--sa-text2);
}
.sa-btn--ghost:hover:not(:disabled) {
  background: var(--sa-surface2);
  border-color: var(--sa-border3);
  color: var(--sa-text);
}

/* -- Status badges -- */
.sa-badge {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .3px;
  padding: .15rem .5rem; border-radius: var(--sa-r-full);
  border: 1px solid transparent; line-height: 1.4;
}

.sa-badge--green {
  background: color-mix(in srgb, var(--sa-green) 12%, transparent);
  color: var(--sa-green);
  border-color: color-mix(in srgb, var(--sa-green) 25%, transparent);
}
.sa-badge--red {
  background: color-mix(in srgb, var(--sa-red) 12%, transparent);
  color: var(--sa-red);
  border-color: color-mix(in srgb, var(--sa-red) 25%, transparent);
}
.sa-badge--yellow {
  background: color-mix(in srgb, var(--sa-amber) 12%, transparent);
  color: var(--sa-amber);
  border-color: color-mix(in srgb, var(--sa-amber) 25%, transparent);
}
.sa-badge--blue {
  background: color-mix(in srgb, var(--sa-blue) 12%, transparent);
  color: var(--sa-blue);
  border-color: color-mix(in srgb, var(--sa-blue) 25%, transparent);
}
.sa-badge--purple {
  background: color-mix(in srgb, var(--sa-violet-strong) 12%, transparent);
  color: var(--sa-accent-light);
  border-color: color-mix(in srgb, var(--sa-violet-strong) 25%, transparent);
}

/* -- Forms -- */
.sa-form {
  display: flex; flex-direction: column; gap: .875rem;
}
.sa-form__field {
  display: flex; flex-direction: column; gap: .3rem;
}
.sa-form__label {
  font-size: .75rem; font-weight: 600; color: var(--sa-muted2);
  text-transform: uppercase; letter-spacing: .4px;
}
.sa-form__input,
.sa-form__select {
  width: 100%; background: var(--sa-bg); border: 1px solid var(--sa-border);
  border-radius: var(--radius, var(--sa-r-sm)); padding: .5rem .75rem;
  color: var(--sa-text); font-size: .875rem; font-family: inherit;
  transition: border-color .15s; box-sizing: border-box;
}
.sa-form__input:focus,
.sa-form__select:focus {
  outline: none; border-color: color-mix(in srgb, var(--sa-violet-strong) 50%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-violet-strong) 8%, transparent);
}
.sa-form__select { cursor: pointer; }

/* -- Detail tables -- */
.sa-detail-table {
  width: 100%; border-collapse: collapse; font-size: .83rem;
}
.sa-detail-table th,
.sa-detail-table td {
  padding: .5rem .75rem; text-align: left;
  border-bottom: 1px solid var(--sa-border);
}
.sa-detail-table tbody tr:last-child td { border-bottom: none; }
.sa-detail-table th {
  font-size: .67rem; font-weight: 700; color: var(--sa-muted2);
  text-transform: uppercase; letter-spacing: .4px;
  background: var(--sa-fg-a-02); white-space: nowrap;
}
.sa-detail-table td { color: var(--sa-text); }
.sa-detail-table--full { min-width: 100%; }

/* -- Danger zone -- */
.sa-danger-zone {
  margin-top: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: color-mix(in srgb, var(--sa-red-strong) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa-red-strong) 20%, transparent);
  border-radius: var(--radius-lg, var(--sa-r-md));
}
.sa-danger-zone__warning {
  font-size: .82rem; color: var(--sa-red); line-height: 1.55; margin: 0 0 .75rem;
}

/* -- State messages -- */
.sa-loading,
.sa-empty,
.sa-error {
  display: block; padding: 2rem 1.25rem;
  text-align: center; font-size: .85rem; border-radius: var(--radius, var(--sa-r-sm));
}
.sa-loading {
  color: var(--sa-muted2);
  animation: sa-fade-in 300ms ease-out both;
}
.sa-loading::before {
  content: ''; display: inline-block;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--sa-border2);
  border-top-color: var(--sa-accent-light);
  animation: sa-spin 600ms linear infinite;
  vertical-align: middle; margin-right: .5rem;
}
@keyframes sa-spin { to { transform: rotate(360deg); } }

.sa-empty {
  color: var(--sa-muted2);
  background: var(--sa-fg-a-02);
  border: 1px dashed var(--sa-border2);
}
.sa-error {
  color: var(--sa-red);
  background: color-mix(in srgb, var(--sa-red) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa-red) 20%, transparent);
}

/* -- Generic sa-table web component host -- */
sa-table {
  display: block;
  overflow-x: auto;
  border: 1px solid var(--sa-border);
  border-radius: var(--radius-lg, var(--sa-r-md));
  background: var(--sa-surface);box-shadow:var(--sa-card-shadow)}

/* -- Slide-over panel -- */
#sa-slideover {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--sa-slideover-width); max-width: 100vw; z-index: 400;
  background: var(--sa-surface);
  border-left: 1px solid var(--sa-border2);
  box-shadow: -20px 0 60px var(--sa-shadow-a-60);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1), visibility 280ms;
  display: flex; flex-direction: column; overflow: hidden;
  visibility: hidden; pointer-events: none;
}
#sa-slideover.open {
  visibility: visible; pointer-events: auto; transform: translateX(0);
}

/* -- Toast notifications -- */
#sa-toast {
  position: fixed; bottom: 1.5rem; left: 50%; z-index: 9000;
  transform: translateX(-50%) translateY(20px);
  background: var(--sa-surface2); border: 1px solid var(--sa-border2);
  border-radius: var(--radius, var(--sa-r-sm));
  padding: .6rem 1.25rem; font-size: .85rem; font-weight: 600; color: var(--sa-text);
  box-shadow: 0 8px 32px var(--sa-shadow-a-40);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  white-space: nowrap; max-width: 90vw;
}
#sa-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
#sa-toast.toast-success { border-color: color-mix(in srgb, var(--sa-green) 35%, transparent); color: var(--sa-green); }
#sa-toast.toast-error   { border-color: color-mix(in srgb, var(--sa-red) 35%, transparent); color: var(--sa-red); }
#sa-toast.toast-warning { border-color: color-mix(in srgb, var(--sa-amber) 35%, transparent);  color: var(--sa-amber); }

/* -- Pulse animation (platform live-dot) -- */
@keyframes sa-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.75); }
}
.sa-pulse {
  animation: sa-pulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════════
   46. CRM MODULE — DESIGN.md compliant (gold accent = B-side)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────────────────────── */
.crm-layout {
  display: flex;
  min-height: calc(100vh - 56px);
  width: 100%;
  position: relative;
  background: var(--sa-bg);
}

.crm-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  min-width: 0;
}

.crm-sidebar-wrap { flex-shrink: 0; }
.crm-mobile-wrap  { display: none; }

/* ── Desktop sidebar ───────────────────────────────────────────────────────── */
.crm-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: var(--sa-sunken);
  border-right: 1px solid var(--sa-fg-a-06);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: calc(100vh - 56px);
  position: sticky;
  top: 0;
}

.crm-sidebar__header {
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--sa-fg-a-06);
  margin-bottom: 8px;
}

.crm-sidebar__title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--sa-gold);
  padding: 0 16px 12px;
  letter-spacing: 0.04em;
}

.crm-sidebar__divider {
  height: 1px;
  background: var(--sa-fg-a-06);
  margin: 8px 12px;
}

.crm-sidebar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: none;
  border: none;
  color: var(--sa-text2);
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  border-radius: 0;
  transition: all 0.15s ease;
}

.crm-sidebar__item:hover {
  background: color-mix(in srgb, var(--sa-gold) 6%, transparent);
  color: var(--sa-text);
}

.crm-sidebar__item--active {
  background: color-mix(in srgb, var(--sa-gold) 10%, transparent);
  color: var(--sa-gold);
  font-weight: 600;
  border-right: 2px solid var(--sa-gold);
}

.crm-sidebar__icon { font-size: 1rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
.crm-sidebar__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Mobile bottom tabs ────────────────────────────────────────────────────── */
.crm-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-around;
  align-items: center;
  background: color-mix(in srgb, var(--sa-sunken) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--sa-fg-a-08);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 500;
}

.crm-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--sa-muted);
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.65rem;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.15s ease;
}

.crm-tab__icon { font-size: 1.15rem; }
.crm-tab__label { white-space: nowrap; }

.crm-tab--active {
  color: var(--sa-gold);
}

/* ── More overlay (mobile) ─────────────────────────────────────────────────── */
.crm-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 299;
  background: var(--sa-scrim-a-50);
}

.crm-more-overlay {
  position: fixed;
  bottom: 60px;
  left: 8px;
  right: 8px;
  z-index: 301;
  background: color-mix(in srgb, var(--sa-sunken) 97%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--sa-fg-a-08);
  border-radius: var(--sa-r-md);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  animation: crmOverlayIn 0.2s ease-out;
}

@keyframes crmOverlayIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.crm-more-overlay__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-radius: var(--sa-r-sm);
  background: transparent;
  color: var(--sa-text2);
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.crm-more-overlay__item:hover {
  background: color-mix(in srgb, var(--sa-gold) 6%, transparent);
  color: var(--sa-text);
}

.crm-more-overlay__item--active {
  background: color-mix(in srgb, var(--sa-gold) 10%, transparent);
  color: var(--sa-gold);
}

/* ── CRM detail panel (slide-in drawer) — glass morphism ──────────────────── */
.crm-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60vw;
  min-width: 600px;
  max-width: 900px;
  background: color-mix(in srgb, var(--sa-sunken) 95%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid var(--sa-fg-a-08);
  box-shadow: -8px 0 40px var(--sa-shadow-a-50);
  z-index: 550;
  overflow-y: auto;
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.crm-detail-panel.open {
  transform: translateX(0);
}

/* ── CRM Kanban ────────────────────────────────────────────────────────────── */
.crm-kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  min-height: 400px;
}

.crm-kanban__column {
  flex: 0 0 240px;
  background: var(--sa-sunken);
  border-radius: var(--sa-r-md);
  border: 1px solid var(--sa-fg-a-06);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crm-kanban__column-title {
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--sa-text2);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crm-kanban__column-count {
  font-size: 0.7rem;
  background: color-mix(in srgb, var(--sa-gold) 10%, transparent);
  color: var(--sa-gold);
  padding: 2px 8px;
  border-radius: var(--sa-r-md);
  font-weight: 600;
}

.crm-kanban__card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-fg-a-08);
  border-radius: var(--sa-r-md);
  padding: 12px;
  margin-bottom: 0;
  cursor: grab;
  transition: all 0.15s ease;
}

.crm-kanban__card:hover {
  border-color: color-mix(in srgb, var(--sa-gold) 20%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--sa-gold) 8%, transparent);
}

/* ── CRM KPI card ──────────────────────────────────────────────────────────── */
.crm-kpi-card {
  transition: border-color 0.2s ease;
}
.crm-kpi-card:hover {
  border-color: color-mix(in srgb, var(--sa-gold) 20%, transparent) !important;
}

/* ── CRM badges ────────────────────────────────────────────────────────────── */
.crm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  padding: 2px 8px;
  border-radius: var(--sa-r-xl);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── CRM section label ─────────────────────────────────────────────────────── */
.crm-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--sa-muted);
  margin-bottom: 12px;
}

/* ── CRM card base ─────────────────────────────────────────────────────────── */
.crm-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-fg-a-06);
  border-radius: var(--sa-r-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.crm-card:hover {
  border-color: var(--sa-fg-a-12);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--sa-shadow-a-30);
}

/* ── CRM loading ───────────────────────────────────────────────────────────── */
.crm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--sa-muted);
}

/* ── CRM placeholder ──────────────────────────────────────────────────────── */
.crm-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
  color: var(--sa-muted);
}

.crm-placeholder h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--sa-text2);
  margin-bottom: 8px;
}

.crm-placeholder p {
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.88rem;
}

/* ── Mobile responsive ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .crm-sidebar-wrap { display: none; }
  .crm-mobile-wrap  { display: block; }
  .crm-bottom-tabs  { display: flex; }

  .crm-content {
    padding: 16px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .crm-detail-panel {
    width: 100vw;
    max-width: 100vw;
    min-width: unset;
  }

  .crm-kanban {
    gap: 8px;
  }

  .crm-kanban__column {
    flex: 0 0 240px;
  }
}

/* ── HEALTH DASHBOARD ────────────────────────────────────── */

.health-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.health-status-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.health-status-dot.ok       { background: var(--sa-green-3-fill); color: var(--sa-green-3-fill); }
.health-status-dot.warning  { background: var(--sa-amber-strong-fill); color: var(--sa-amber-strong-fill); }
.health-status-dot.critical { background: var(--sa-red-strong-fill); color: var(--sa-red-strong-fill); }

.health-range-btns {
  display: flex; gap: 4px;
  background: var(--sa-surface);
  border-radius: var(--sa-r-sm);
  padding: 3px;
  border: 1px solid var(--sa-border);box-shadow:var(--sa-card-shadow)}

.health-range-btns button {
  background: none; border: none;
  color: var(--sa-muted);
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.78rem; font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: var(--sa-r-sm);
  cursor: pointer;
  transition: all 150ms;
}

.health-range-btns button.active {
  background: color-mix(in srgb, var(--sa-violet-strong) 20%, transparent);
  color: var(--sa-accent-light);
}

.health-range-btns button:hover:not(.active) {
  color: var(--sa-text2);
}

.health-refresh-label {
  font-size: 0.72rem;
  color: var(--sa-muted);
  margin-left: auto;
}

.health-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.health-kpi-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  padding: 1rem;
  border-left: 3px solid var(--sa-green-3);
  transition: border-color 200ms;box-shadow:var(--sa-card-shadow)}

.health-kpi-card.warning { border-left-color: var(--sa-amber-strong); }
.health-kpi-card.critical { border-left-color: var(--sa-red-strong); }

.health-kpi-label {
  font-size: 0.72rem;
  color: var(--sa-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.health-kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sa-text);
}

.health-kpi-sub {
  font-size: 0.72rem;
  color: var(--sa-muted);
  margin-top: 0.2rem;
}

.health-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .health-charts-grid {
    grid-template-columns: 1fr;
  }
}

.health-chart-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  padding: 1rem;box-shadow:var(--sa-card-shadow)}

.health-chart-card.full-width {
  grid-column: 1 / -1;
}

.health-chart-title {
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sa-text2);
  margin-bottom: 0.75rem;
}

.health-chart-canvas {
  width: 100% !important;
  height: 200px !important;
}

.health-docker-section {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  overflow: hidden;box-shadow:var(--sa-card-shadow)}

.health-docker-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sa-text2);
  border-bottom: 1px solid var(--sa-border);
  transition: background 150ms;
}

.health-docker-header:hover {
  background: var(--sa-fg-a-03);
}

.health-docker-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}

.health-docker-body.open {
  max-height: 600px;
  overflow-y: auto;
}

.health-docker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.health-docker-table th,
.health-docker-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--sa-border);
}

.health-docker-table th {
  color: var(--sa-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.health-logs-pre {
  background: var(--sa-bg);
  color: var(--sa-muted2);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.68rem;
  padding: 0.75rem;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0.5rem 0.75rem;
  border-radius: var(--sa-r-sm);
}

/* ── BIZ HEALTH ────────────────────────────────────────────── */

.biz-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.biz-live-card {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  padding: 1rem;box-shadow:var(--sa-card-shadow)}

.biz-live-label {
  font-size: 0.72rem;
  color: var(--sa-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.biz-live-value {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--sa-text);
}

.biz-sparkline-canvas {
  width: 100% !important;
  height: 40px !important;
  margin-top: 0.5rem;
}

/* ───────────────────────────────────────────────────────────────────────────
   TUNABLES — Page « Réglages avancés » (mobile-first)
   ─────────────────────────────────────────────────────────────────────────── */

.tun-head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.tun-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sa-text);
  margin: 0;
}
.tun-search {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .85rem;
  background: var(--sa-surface2, var(--sa-surface));
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm);
  color: var(--sa-text);
  font-size: .9rem;box-shadow:var(--sa-card-shadow)}
.tun-search:focus {
  outline: none;
  border-color: var(--sa-domain-organizers, var(--sa-gold));
}

.tun-group {
  margin-bottom: 1rem;
  padding: 1.125rem 1.25rem;
}
.tun-group > summary {
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--sa-muted);
  margin-bottom: 1rem;
  list-style: none;
}
.tun-group > summary::-webkit-details-marker { display: none; }
.tun-group > summary::before { content: '▸ '; color: var(--sa-domain-organizers, var(--sa-gold)); }
.tun-group[open] > summary::before { content: '▾ '; }

.tun-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 640px) {
  .tun-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

.tun-row {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.tun-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--sa-text2, var(--sa-text));
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.tun-row input[type="number"],
.tun-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .6rem;
  background: var(--sa-bg);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm);
  color: var(--sa-text);
  font-size: .85rem;
}
.tun-row input:focus { outline: none; border-color: var(--sa-domain-organizers, var(--sa-gold)); }
.tun-row input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--sa-domain-organizers, var(--sa-gold));
  cursor: pointer;
}

.tun-inputwrap {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tun-unit {
  font-size: .78rem;
  color: var(--sa-muted);
  flex-shrink: 0;
}

.tun-badge-sensitive {
  display: inline-block;
  padding: .08rem .45rem;
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sa-on-fill-dark);
  background: var(--sa-domain-organizers, var(--sa-gold-fill));
  border-radius: var(--sa-r-full);
}
.tun-reco {
  font-size: .72rem;
  color: var(--sa-muted);
}

.tun-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
.tun-status {
  font-size: .8rem;
  color: var(--sa-muted2, var(--sa-muted));
}

.tun-loading,
.tun-error {
  padding: 1.5rem;
  font-size: .9rem;
  color: var(--sa-muted);
}
.tun-error { color: var(--sa-red); }


/* ─────────────────────────────────────────────────────────────
   Security / IP / Threat-Intel pages (.sec-*) — readability + mobile-first
   Static-only styles. Computed values (bar heights, severity colors,
   score-ring color) stay inline in security.js.
   ───────────────────────────────────────────────────────────── */
.sec-ips-help {
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted2, var(--sa-muted));
  margin: 0 0 .65rem;
}
.sec-table { display: block; }

/* KPI grid: 2 columns on mobile, auto-fill on wider screens */
.sec-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
  margin-bottom: 1rem;
}
@media (min-width: 600px) {
  .sec-kpi-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

.sec-score-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--sa-card-bg);
  border: 1px solid var(--sa-card-line);
  border-radius: var(--sa-r-lg);
  margin-bottom: 1rem;box-shadow:var(--sa-card-shadow)}
.sec-score-ring {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent; /* border-color set inline (computed score color) */
}

.sec-card-title {
  font-size: .85rem;
  font-weight: 700;
}
.sec-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.sec-sev-badge {
  font-weight: 700;
  border-radius: 4px;
  /* font-size, padding and colors (sevStyle) stay inline */
}

/* Loading state distinct from empty state */
.sec-spinner {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  font-size: .82rem;
  color: var(--muted2, var(--sa-muted));
}
.sec-spinner::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: .7;
  animation: sec-spin .7s linear infinite;
}
@keyframes sec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sec-spinner::before { animation: none; }
}

/* Warning callout (stress mode scope) — gold = B-side superadmin accent */
.sec-warn {
  margin-bottom: 1rem;
  padding: .6rem .75rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--gold, var(--sa-gold));
  background: color-mix(in srgb, var(--sa-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--sa-gold) 35%, transparent);
  border-radius: var(--sa-r-md);
}

/* ── Phase mobile / PWA : correctifs responsive (aligne DESIGN.md) ── */
@media (max-width: 768px) {
  /* Le slideover ne doit pas deborder l'ecran sur mobile */
  .sa-slideover, sa-slideover { width: 92vw !important; max-width: 92vw !important; }
  /* Tables scrollables horizontalement plutot que de deborder le viewport */
  .sa-main table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .sa-main .adm-table-wrap, .sa-main .sa-partners-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Phase mobile : touch targets 44px (skill UX) ── */
@media (max-width: 768px) {
  .sa-main button, .sa-main .sa-btn, .sa-main a.btn { min-height: 44px; touch-action: manipulation; }
}
/* ── Accessibilite : reduced-motion (DESIGN.md) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══ Sécurité : IP ↔ badges (onglets IPs bloquées + SSH) — light DOM, mobile-first ══ */
.sa-iplist          { display: flex; flex-direction: column; gap: .6rem; }
.sa-iplist__empty   { color: var(--muted2); font-size: .85rem; }
.sa-iplist__toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
/* Spécificité (0,2,0) volontaire : bat input[type="search"] de components.css (width:100%, bordure rose) */
.sa-iplist__toolbar .sa-iplist__search { flex: 1 1 200px; width: auto; min-width: 0; min-height: 0; }
.sa-iplist__toolbar .sa-iplist__sort   { flex: 0 1 auto; width: auto; }
.sa-iplist__toolbar .sa-iplist__search, .sa-iplist__toolbar .sa-iplist__sort {
  background: var(--sa-card-bg); border: 1px solid var(--sa-card-line); border-radius: var(--sa-r-sm);
  padding: .45rem .65rem; color: inherit; font-size: 16px; /* 16px : pas d'auto-zoom iOS */;box-shadow:var(--sa-card-shadow)}
.sa-iplist__toolbar .sa-iplist__search:focus, .sa-iplist__toolbar .sa-iplist__sort:focus { outline: none; border-color: color-mix(in srgb, var(--sa-violet-strong) 50%, transparent); }
.sa-ipcard {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between;
  padding: .85rem 1rem; background: var(--sa-surface); border: 1px solid var(--sa-card-line); border-radius: var(--sa-r-md);box-shadow:var(--sa-card-shadow)}
.sa-ipcard--live     { border-color: color-mix(in srgb, var(--sa-red) 45%, transparent); }
.sa-ipcard__main     { flex: 1 1 240px; min-width: 0; }
.sa-ipcard__ip       { font-family: monospace; font-size: .95rem; font-weight: 700; word-break: break-all; }
.sa-ipcard__meta     { font-size: .72rem; color: var(--muted2); }
.sa-ipcard__badges   { margin-top: .4rem; }
.sa-ipcard__actions  { display: flex; gap: .4rem; flex-wrap: wrap; }
.sa-ipb__head        { display: flex; flex-wrap: wrap; gap: .3rem .4rem; align-items: center; }
.sa-ipb__seen, .sa-ipb__none { font-size: .72rem; color: var(--muted2); }
.sa-ipb__details     { margin-top: .25rem; }
.sa-ipb__details summary { cursor: pointer; font-size: .72rem; color: var(--sa-muted); }
.sa-ipb__event       { margin-top: .35rem; }
.sa-ipb__event strong { font-size: .78rem; }
.sa-ipb__list        { display: flex; flex-wrap: wrap; gap: .2rem .5rem; margin-top: .2rem; font-family: monospace; font-size: .74rem; }
.sa-ipb__badge       { color: var(--muted2); }
.sa-ipb__badge.is-online { color: var(--sa-green); font-weight: 700; }
@media (max-width: 640px) {
  .sa-ipcard { flex-direction: column; align-items: stretch; }
  /* En colonne, flex-basis devient une hauteur : neutraliser la base fixée pour le desktop */
  .sa-ipcard__main { flex: 0 0 auto; }
  .sa-ipcard__actions .btn { flex: 1 1 auto; }
  .sa-iplist__toolbar .sa-iplist__sort { flex: 1 1 100%; }
}