/* =============================================================
   LiveGuard OS — dashboard.css
   Design system vanilla (nessun framework, nessun build).
   Sostituisce direttamente il file esistente.
   Tema scuro di default · tema chiaro con :root[data-theme="light"]
   ============================================================= */

/* --- Google Fonts (Inter + Space Grotesk + JetBrains Mono) ---
   NOTA: il font Outfit resta caricato da index.html; qui aggiungiamo
   Space Grotesk come display senza toccare index.html. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root {
  /* — Semantica (identica in entrambi i temi) — */
  --brand:      #10d989;
  --brand-600:  #0ec079;
  --brand-050:  color-mix(in oklab, #10d989 14%, transparent);
  --brand-100:  color-mix(in oklab, #10d989 22%, transparent);

  --danger:     #f2555a;
  --danger-050: color-mix(in oklab, #f2555a 14%, transparent);
  --danger-100: color-mix(in oklab, #f2555a 24%, transparent);

  --warning:    #f59e0b;
  --warning-050:color-mix(in oklab, #f59e0b 16%, transparent);
  --warning-100:color-mix(in oklab, #f59e0b 26%, transparent);

  --info:       #4b8bf5;
  --info-050:   color-mix(in oklab, #4b8bf5 16%, transparent);
  --info-100:   color-mix(in oklab, #4b8bf5 26%, transparent);

  --ai:         #9b7cf6;
  --ai-050:     color-mix(in oklab, #9b7cf6 16%, transparent);
  --ai-100:     color-mix(in oklab, #9b7cf6 26%, transparent);

  --voice:      #4ade80;
  --twitch:     #9146ff;

  /* Ruoli spettatori (distinguibili tra loro) */
  --role-streamer: #ff4d67;
  --role-mod:      #10d989;
  --role-vip:      #ff5ec4;
  --role-sub:      #4b8bf5;
  --role-sub-gold: #f5c542;
  --role-bot:      #7c8798;
  --role-viewer:   #9aa4b2;

  /* — Sfondi & superfici (SCURO — default) — */
  --bg-0: #0b0f16;
  --bg-1: #0f1520;
  --bg-2: #141b28;
  --surface-1: #171f2e;
  --surface-2: #1d2637;
  --surface-3: #232d40;
  --overlay:   rgba(6,10,17,.72);

  --text-1: #eef2f8;
  --text-2: #b7c1d1;
  --text-3: #8a95a8;
  --text-inv:#0b0f16;

  --border-1: rgba(255,255,255,.08);
  --border-2: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.22);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.5);
  --glow-brand:
    0 0 0 1px color-mix(in oklab, var(--brand) 40%, transparent),
    0 8px 28px color-mix(in oklab, var(--brand) 22%, transparent);

  /* Raggi */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--info);

  /* Font */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "Outfit", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scala tipografica */
  --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem;
  --fs-14: .875rem;  --fs-15: .9375rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem;
  --fs-28: 1.75rem;  --fs-32: 2rem;
  --lh-tight: 1.2;   --lh-normal: 1.5;
  --tracking-caps: .06em;

  /* Spaziatura scala 4 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Sidebar */
  --sidebar-w: 260px;
  --topbar-h: 60px;
}

/* — Tema chiaro — */
:root[data-theme="light"] {
  --bg-0: #eef2f8;
  --bg-1: #f6f8fc;
  --bg-2: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f7fc;
  --surface-3: #e9eef6;
  --overlay:   rgba(20,27,40,.45);

  --text-1: #0f1729;
  --text-2: #3b465a;
  --text-3: #6b7688;
  --text-inv:#ffffff;

  --border-1: rgba(15,23,41,.08);
  --border-2: rgba(15,23,41,.14);
  --border-strong: rgba(15,23,41,.22);

  /* semantici leggermente scuriti per contrasto AA su sfondo chiaro */
  --brand:   #0aa86a;
  --brand-600: #099560;
  --danger:  #d0353b;
  --warning: #b76e00;
  --info:    #2f6fe0;
  --ai:      #7a58e6;

  --shadow-sm: 0 1px 2px rgba(15,23,41,.06);
  --shadow-md: 0 8px 24px rgba(15,23,41,.08);
  --shadow-lg: 0 24px 60px rgba(15,23,41,.14);
  --glow-brand:
    0 0 0 1px color-mix(in oklab, var(--brand) 45%, transparent),
    0 6px 22px color-mix(in oklab, var(--brand) 25%, transparent);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--text-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* app-shell */
}
:root[data-theme="light"] body { background: var(--bg-0); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-1);
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* Skip link */
.skip-link {
  position: absolute; top: -100px; left: 8px;
  background: var(--brand); color: var(--text-inv);
  padding: 8px 14px; border-radius: var(--r-sm);
  font-weight: 600; z-index: 9999;
}
.skip-link:focus { top: 8px; }

/* Anti-flash gating */
.dashboard-container { position: relative; z-index: 1; visibility: hidden; }
html.app-ready .dashboard-container { visibility: visible; }
html.app-ready #login-overlay { display: none; }

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--text-3); }
.text-green { color: var(--brand); }
.text-red   { color: var(--danger); }
.flex-1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; }

/* Scrollbar sobria */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; border: 2px solid transparent; }

/* =========================================================
   3. LAYOUT
   ========================================================= */
.dashboard-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background: var(--bg-1);
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5);
  border-bottom: 1px solid var(--border-1);
  min-height: var(--topbar-h);
}
.brand-logo {
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), color-mix(in oklab, var(--brand) 55%, var(--info)));
  color: var(--text-inv);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--brand) 35%, transparent);
}
.brand-logo-lg { width: 56px; height: 56px; border-radius: var(--r-md); }
.shield-icon { width: 22px; height: 22px; }
.brand-logo-lg .shield-icon { width: 30px; height: 30px; }
.brand-text {
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-18);
  letter-spacing: -0.01em;
}
.neon-text {
  background: linear-gradient(90deg, var(--brand), var(--info));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sidebar-menu {
  flex: 1; overflow-y: auto;
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.menu-section {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0;
}
.menu-section::before {
  content: attr(data-title);
  display: block;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4) var(--sp-1);
}
.menu-section:first-child::before { padding-top: 0; }

.menu-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4);
  margin: 0 var(--sp-1);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  font-size: var(--fs-14);
  font-weight: 500;
  text-align: left;
  width: calc(100% - var(--sp-2));
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  position: relative;
}
.menu-item:hover { background: var(--surface-2); color: var(--text-1); }
.menu-item.active {
  background: linear-gradient(90deg, var(--brand-050), transparent 70%);
  border-left-color: var(--brand);
  color: var(--text-1);
  font-weight: 600;
}
.menu-item.active .menu-icon { color: var(--brand); }
.menu-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
}

.sidebar-footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-1);
  background: var(--bg-2);
}
.user-profile {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--r-sm);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ai), var(--info));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: var(--fs-14);
  flex-shrink: 0;
}
.user-info { display: flex; flex-direction: column; min-width: 0; }
.username { font-weight: 600; color: var(--text-1); font-size: var(--fs-14); }
.user-info small { color: var(--text-3); font-size: var(--fs-12); }

.btn-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  margin-top: var(--sp-3);
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}
.btn-logout:hover { background: var(--danger-050); color: var(--danger); border-color: var(--danger-100); }

/* --- Main + Topbar --- */
.main-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-1);
}
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-6);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
  box-shadow: var(--shadow-sm);
  z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: var(--sp-2); }
.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.channel-selector {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-13); font-weight: 600;
  color: var(--text-2);
}
.channel-selector::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 25%, transparent);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.55;transform:scale(.85);} }

.theme-toggle, .theme-toggle-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border-1);
  color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 140ms ease;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-2); }

/* Area contenuti */
.tab-panels {
  flex: 1; overflow-y: auto;
  padding: var(--sp-6);
  scroll-behavior: smooth;
}
.tab-panel { display: none; animation: fadeIn 160ms ease; }
.tab-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.panel-intro {
  color: var(--text-2); font-size: var(--fs-14);
  margin: 0 0 var(--sp-4);
}

/* =========================================================
   4. LOGIN OVERLAY
   ========================================================= */
.login-overlay {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 20% 10%, color-mix(in oklab, var(--brand) 14%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 90%, color-mix(in oklab, var(--info) 14%, transparent), transparent 60%),
    var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  padding: var(--sp-6);
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: var(--sp-6); }
.login-brand .brand-logo-lg { margin: 0 auto var(--sp-4); }
.login-title {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: 700;
  margin: 0 0 var(--sp-2);
}
.login-subtitle { color: var(--text-2); font-size: var(--fs-14); margin: 0; }
.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-footer { margin-top: var(--sp-5); text-align: center; color: var(--text-3); font-size: var(--fs-12); }
.login-error {
  padding: 10px 14px;
  background: var(--danger-050);
  border: 1px solid var(--danger-100);
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: var(--fs-13); font-weight: 600;
}

/* =========================================================
   5. FORM
   ========================================================= */
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: var(--fs-12); font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
}
.input-field, .form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: var(--fs-14);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.input-field-sm { padding: 6px 10px; font-size: var(--fs-13); border-radius: var(--r-xs); }
.input-field:hover, .form-group input:hover, .form-group select:hover, .form-group textarea:hover {
  border-color: var(--border-strong);
}
.input-field:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface-1);
  box-shadow: 0 0 0 3px var(--brand-050);
}
.input-field::placeholder { color: var(--text-3); }
select.input-field { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(-45deg, transparent 50%, var(--text-3) 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* =========================================================
   6. BUTTONS
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 16px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--surface-2);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-14); font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sm { height: 30px; padding: 0 12px; font-size: var(--fs-13); border-radius: var(--r-sm); }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--brand);
  color: #052015;
  border-color: color-mix(in oklab, var(--brand) 70%, black);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-600); box-shadow: var(--glow-brand); }

.btn-secondary {
  background: var(--surface-2);
  color: var(--text-1);
  border-color: var(--border-2);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); }

.btn-danger {
  background: var(--danger); color: #fff;
  border-color: color-mix(in oklab, var(--danger) 70%, black);
}
.btn-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--danger) 88%, black); box-shadow: 0 8px 24px color-mix(in oklab, var(--danger) 30%, transparent); }

.btn-twitch {
  background: var(--twitch); color: #fff;
  border-color: color-mix(in oklab, var(--twitch) 70%, black);
}
.btn-twitch:hover:not(:disabled) { background: color-mix(in oklab, var(--twitch) 88%, black); box-shadow: 0 8px 24px color-mix(in oklab, var(--twitch) 30%, transparent); }

.btn-glow { box-shadow: var(--glow-brand); }
.glow-green { box-shadow: var(--glow-brand); }
.twitch-icon { width: 18px; height: 18px; }

/* =========================================================
   7. CARDS (panel / split / stat / health)
   ========================================================= */
.panel-card, .split-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--sp-5);
  transition: border-color 160ms ease, transform 160ms ease;
}
.panel-card:hover { border-color: var(--border-2); }

.card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  flex-wrap: wrap;
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-16); font-weight: 600;
  color: var(--text-1);
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
}

.content-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 1100px) { .content-split { grid-template-columns: 1fr; } }

/* --- stats grid & stat-card --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.stat-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.stat-card:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow-md); }
.stat-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--brand);
  opacity: .9;
}
.stat-card.info::before    { background: var(--info); }
.stat-card.warning::before { background: var(--warning); }
.stat-card.danger::before  { background: var(--danger); }
.stat-card.ai::before      { background: var(--ai); }

.stat-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.stat-icon {
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand);
  flex-shrink: 0;
}
.stat-card.info    .stat-icon { background: var(--info-050); color: var(--info); }
.stat-card.warning .stat-icon { background: var(--warning-050); color: var(--warning); }
.stat-card.danger  .stat-icon { background: var(--danger-050); color: var(--danger); }
.stat-card.ai      .stat-icon { background: var(--ai-050); color: var(--ai); }

.stat-label {
  font-size: var(--fs-11); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-3);
  margin-bottom: 4px;
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-32); font-weight: 700;
  line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.stat-subtext { color: var(--text-2); font-size: var(--fs-13); margin-top: 6px; }

/* --- health-card --- */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.health-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.health-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-1);
}
.health-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-15); color: var(--text-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.health-status-text {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-12); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand);
  border: 1px solid var(--brand-100);
}
.health-status-text::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent);
}
.health-card.warning .health-status-text { background: var(--warning-050); color: var(--warning); border-color: var(--warning-100); }
.health-card.danger  .health-status-text { background: var(--danger-050);  color: var(--danger);  border-color: var(--danger-100); }
.health-card.offline .health-status-text { background: var(--surface-3); color: var(--text-3); border-color: var(--border-2); }

.health-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.health-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-1);
  font-size: var(--fs-13);
}
.health-item:last-child { border-bottom: none; }
.health-item-label { color: var(--text-3); }
.health-item-val { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }

/* =========================================================
   8. DATA TABLE
   ========================================================= */
.table-responsive { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border-1); }
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-13);
  background: var(--surface-1);
}
.data-table thead th {
  position: sticky; top: 0;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: var(--fs-11); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-1);
  color: var(--text-1);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.data-table tbody tr { transition: background 120ms ease; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr.danger { box-shadow: inset 3px 0 0 var(--danger); }
.data-table tbody tr.success { box-shadow: inset 3px 0 0 var(--brand); }
.data-table tbody tr.warning { box-shadow: inset 3px 0 0 var(--warning); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td .btn-sm + .btn-sm { margin-left: 6px; }

.table-search {
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: var(--fs-13);
  min-width: 240px;
}
.table-pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 4px 0;
  color: var(--text-3); font-size: var(--fs-12);
}
.pager-info { margin-right: auto; }
.pager-prev, .pager-next { padding: 6px 10px; }

/* =========================================================
   9. BADGES (semantici + ruoli)
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-12); font-weight: 700;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--border-2);
  line-height: 1.4;
  white-space: nowrap;
}
.badge.success, .badge-green,
.badge.attivo, .badge.ok, .badge.online {
  background: var(--brand-050); color: var(--brand); border-color: var(--brand-100);
}
.badge.danger, .badge-red, .danger {
  background: var(--danger-050); color: var(--danger); border-color: var(--danger-100);
}
.badge.warning, .badge-orange, .warning {
  background: var(--warning-050); color: var(--warning); border-color: var(--warning-100);
}
.badge.info, .badge-blue, .info {
  background: var(--info-050); color: var(--info); border-color: var(--info-100);
}
.badge.ai {
  background: var(--ai-050); color: var(--ai); border-color: var(--ai-100);
}
.badge.neutral, .badge-neutral {
  background: var(--surface-3); color: var(--text-2); border-color: var(--border-2);
}
/* utility color words used in JS templates */
.success { color: var(--brand); }
.warning { color: var(--warning); }
.info    { color: var(--info); }
.danger  { color: var(--danger); }

/* Role badges (rb = role-badge shortcut used in JS) */
.role-badge, .rb {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-11); font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.rb-caster,   .role-streamer { background: color-mix(in oklab, var(--role-streamer) 18%, transparent); color: var(--role-streamer); border-color: color-mix(in oklab, var(--role-streamer) 40%, transparent); }
.rb-mod,      .role-mod      { background: color-mix(in oklab, var(--role-mod) 18%, transparent);      color: var(--role-mod);      border-color: color-mix(in oklab, var(--role-mod) 40%, transparent); }
.rb-vip,      .role-vip      { background: color-mix(in oklab, var(--role-vip) 18%, transparent);      color: var(--role-vip);      border-color: color-mix(in oklab, var(--role-vip) 40%, transparent); }
.rb-sub,      .role-sub      { background: color-mix(in oklab, var(--role-sub) 18%, transparent);      color: var(--role-sub);      border-color: color-mix(in oklab, var(--role-sub) 40%, transparent); }
.rb-sub.gold, .role-sub-gold { background: color-mix(in oklab, var(--role-sub-gold) 18%, transparent); color: var(--role-sub-gold); border-color: color-mix(in oklab, var(--role-sub-gold) 40%, transparent); }
.rb-bot,      .role-bot      { background: color-mix(in oklab, var(--role-bot) 22%, transparent);      color: var(--role-bot);      border-color: color-mix(in oklab, var(--role-bot) 40%, transparent); }

/* Nick spettatore (colore stabile applicato via style dal JS) */
.nick { font-weight: 700; }
.nick-sep { color: var(--text-3); margin: 0 4px; }

/* =========================================================
   10. SWITCH / TOGGLE
   ========================================================= */
.switch {
  position: relative; display: inline-block;
  width: 42px; height: 24px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider, .slider {
  position: absolute; inset: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.switch .slider::before, .slider::before {
  content: ""; position: absolute;
  left: 2px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: left 180ms cubic-bezier(.2,.7,.2,1);
}
.switch input:checked + .slider {
  background: var(--brand);
  border-color: color-mix(in oklab, var(--brand) 70%, black);
  box-shadow: var(--glow-brand);
}
.switch input:checked + .slider::before { left: 20px; }
.switch input:focus-visible + .slider { outline: none; box-shadow: var(--focus-ring); }

/* =========================================================
   11. CHAN-CARD (canali gestiti dal bot)
   ========================================================= */
.chan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.chan-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--sp-3);
  transition: border-color 160ms ease, transform 160ms ease;
}
.chan-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.chan-card.live { border-color: color-mix(in oklab, var(--danger) 45%, transparent); }
.chan-card.live::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--danger);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.chan-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.chan-name {
  font-family: var(--font-display);
  font-size: var(--fs-16); font-weight: 700;
  color: var(--text-1);
}
.chan-game {
  display: inline-block;
  font-size: var(--fs-12); font-weight: 600;
  color: var(--info);
  background: var(--info-050);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.chan-title { color: var(--text-2); font-size: var(--fs-13); line-height: 1.4; }
.chan-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chan-meta-empty { color: var(--text-3); font-size: var(--fs-12); font-style: italic; }
.chan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chan-actions { display: flex; align-items: center; gap: 6px; }
.chan-remove {
  background: transparent; border: 1px solid var(--border-2);
  color: var(--text-3); border-radius: var(--r-sm);
  padding: 4px 8px; font-size: var(--fs-12); cursor: pointer;
  transition: all 140ms ease;
}
.chan-remove:hover { background: var(--danger-050); color: var(--danger); border-color: var(--danger-100); }

/* =========================================================
   12. LEARN-CARD (Conoscenza)
   ========================================================= */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.learn-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.learn-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-1);
}
.learn-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-14); font-weight: 600;
  color: var(--text-1);
  display: inline-flex; align-items: center; gap: 8px;
}
.learn-card-count {
  padding: 2px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700;
  background: var(--surface-3); color: var(--text-2);
  border: 1px solid var(--border-2);
}
/* Fonti (visione/voce/chat) */
.learn-card[data-source="vision"]  .learn-card-title,
.learn-card.vision  .learn-card-title { color: var(--info); }
.learn-card[data-source="voice"]   .learn-card-title,
.learn-card.voice   .learn-card-title { color: var(--voice); }
.learn-card[data-source="chat"]    .learn-card-title,
.learn-card.chat    .learn-card-title { color: var(--ai); }

.learn-card[data-source="vision"] .learn-card-count { background: var(--info-050); color: var(--info); border-color: var(--info-100); }
.learn-card[data-source="voice"]  .learn-card-count { background: color-mix(in oklab, var(--voice) 16%, transparent); color: var(--voice); border-color: color-mix(in oklab, var(--voice) 30%, transparent); }
.learn-card[data-source="chat"]   .learn-card-count { background: var(--ai-050); color: var(--ai); border-color: var(--ai-100); }

.learn-card-body {
  padding: var(--sp-2) var(--sp-4);
  max-height: 420px; overflow-y: auto;
}
.learn-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-13);
}
.learn-row:last-child { border-bottom: none; }
.learn-meta { color: var(--text-3); font-size: var(--fs-12); }
.learn-empty { color: var(--text-3); padding: var(--sp-6) 0; text-align: center; font-size: var(--fs-13); }

/* =========================================================
   13. CTX (Contesto del bot)
   ========================================================= */
.ctx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.ctx-cell {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 4px;
}
.ctx-row { display: flex; align-items: center; gap: var(--sp-3); }
.ctx-label {
  font-size: var(--fs-11); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--text-3);
}
.ctx-val {
  font-family: var(--font-display);
  font-size: var(--fs-18); font-weight: 600;
  color: var(--text-1);
}
.ctx-text { color: var(--text-2); font-size: var(--fs-14); line-height: 1.5; }

/* =========================================================
   14. FEED / ATTIVITÀ
   ========================================================= */
.activity-feed { display: flex; flex-direction: column; gap: 2px; max-height: 480px; overflow-y: auto; }
.feed-item {
  display: flex; gap: var(--sp-3);
  padding: 10px 4px;
  border-bottom: 1px solid var(--border-1);
}
.feed-item:last-child { border-bottom: none; }
.feed-item-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2);
  flex-shrink: 0;
}
.feed-item.success .feed-item-icon { background: var(--brand-050); color: var(--brand); }
.feed-item.info    .feed-item-icon { background: var(--info-050);  color: var(--info); }
.feed-item.warning .feed-item-icon { background: var(--warning-050); color: var(--warning); }
.feed-item.danger  .feed-item-icon { background: var(--danger-050); color: var(--danger); }
.feed-item.ai      .feed-item-icon { background: var(--ai-050); color: var(--ai); }
.feed-item-content { flex: 1; min-width: 0; }
.feed-item-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 2px;
}
.feed-item-time { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-12); }
.feed-item-msg { color: var(--text-1); font-size: var(--fs-14); line-height: 1.4; }
.feed-empty { color: var(--text-3); padding: var(--sp-6) 0; text-align: center; }

/* =========================================================
   15. GRAFICI (barre di gravità Analytics)
   ========================================================= */
.chart-bars { display: flex; flex-direction: column; gap: 10px; }
.chart-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center; gap: var(--sp-3);
}
.chart-label { color: var(--text-2); font-size: var(--fs-13); font-weight: 500; }
.chart-track {
  background: var(--surface-3);
  border-radius: var(--r-pill);
  height: 10px;
  overflow: hidden;
  position: relative;
}
.chart-fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--info), var(--warning) 55%, var(--danger));
  transition: width 400ms cubic-bezier(.2,.7,.2,1);
}
.chart-row.low  .chart-fill { background: var(--info); }
.chart-row.mid  .chart-fill { background: var(--warning); }
.chart-row.high .chart-fill { background: var(--danger); }
.chart-val { text-align: right; color: var(--text-1); font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-13); }

/* =========================================================
   16. FAQ · Escalation · Templates · Feature toggles
   ========================================================= */
.faq-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-5); }
@media (max-width: 1100px) { .faq-split { grid-template-columns: 1fr; } }
.faq-form-row, .faq-matcher, .faq-matcher-row {
  display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.faq-esc-box {
  border: 1px dashed var(--border-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--surface-2);
  margin-top: var(--sp-4);
}
.faq-esc-box-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.faq-esc-box-head::before {
  content: "⚠"; color: var(--warning); margin-right: 6px;
}
.faq-esc-row {
  display: grid;
  grid-template-columns: 60px 1fr 1fr auto;
  gap: 8px; align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-1);
}
.faq-esc-num { font-weight: 700; color: var(--warning); font-variant-numeric: tabular-nums; text-align: center; }
.faq-esc-remove { padding: 4px 8px; }
.faq-toggle { display: inline-flex; align-items: center; gap: 8px; }

.action-console-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.console-result { margin-top: var(--sp-3); padding: 10px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-13); font-family: var(--font-mono); }

.quick-action-block { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) 0; }
.quick-action-title { font-weight: 600; color: var(--text-1); font-size: var(--fs-14); display: inline-flex; align-items: center; gap: 6px; }
.quick-action-divider { border: none; border-top: 1px solid var(--border-1); margin: var(--sp-3) 0; }

.templates-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.template-card {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.template-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.template-key { font-family: var(--font-mono); color: var(--info); font-size: var(--fs-12); font-weight: 600; }
.template-body { color: var(--text-2); font-size: var(--fs-13); line-height: 1.4; }

/* feature toggles cards (fd-*) */
.feature-list, .fd-fields { display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-row, .fd-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
}
.feature-text, .fd-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feature-name, .fd-title { font-weight: 600; color: var(--text-1); font-size: var(--fs-14); }
.feature-desc { color: var(--text-3); font-size: var(--fs-13); }
.fd-input { max-width: 220px; }

/* --- FAQ / rule edit inline inputs --- */
.rule-edit-input, .rule-edit-select, .override-select {
  padding: 6px 8px; border-radius: var(--r-xs);
  background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text-1); font-size: var(--fs-13);
}
.rule-edit-checkbox { accent-color: var(--brand); }

/* --- Access management --- */
.access-form-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) auto;
  gap: 8px; align-items: end; margin-bottom: var(--sp-3);
}
.emergency-controls { display: flex; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   17. ALERT BANNER · CONFIRM · SKELETON
   ========================================================= */
.alert-banner {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--info-050);
  border: 1px solid var(--info-100);
  color: var(--text-1);
  margin-bottom: var(--sp-4);
}
.alert-banner.banner-warning { background: var(--warning-050); border-color: var(--warning-100); }
.alert-icon { flex-shrink: 0; color: var(--info); }
.alert-banner.banner-warning .alert-icon { color: var(--warning); }
.banner-content { font-size: var(--fs-14); line-height: 1.5; }
.banner-content strong { color: var(--text-1); font-weight: 700; }

.confirm-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  max-width: 440px;
  box-shadow: var(--shadow-lg);
}
.confirm-icon { color: var(--warning); margin-bottom: var(--sp-3); }
.confirm-msg { color: var(--text-2); margin-bottom: var(--sp-4); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; }

.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; border-radius: var(--r-sm); min-height: 14px; }
.skeleton-row { height: 40px; margin-bottom: 8px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite; }
@keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =========================================================
   18. INDICATORS · PULSE
   ========================================================= */
.status-indicator, .pulse-indicator {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
}
.font-pulse { animation: pulse-dot 1.6s ease-in-out infinite; }

/* =========================================================
   19. TOAST (fallback stile per notifiche dinamiche)
   ========================================================= */
.toast, .lg-toast {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5);
  min-width: 260px; max-width: 380px;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-1);
  font-size: var(--fs-14);
  z-index: 300;
  animation: toast-in 200ms cubic-bezier(.2,.7,.2,1);
}
.toast.success, .lg-toast.success { border-left-color: var(--brand); }
.toast.danger,  .lg-toast.danger, .lg-toast.error { border-left-color: var(--danger); }
.toast.warning, .lg-toast.warning { border-left-color: var(--warning); }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* =========================================================
   20. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  :root { --sidebar-w: 72px; }
  .sidebar-brand .brand-text,
  .menu-item span:not(.menu-icon),
  .menu-section::before,
  .user-info { display: none; }
  .menu-item { justify-content: center; }
  .menu-item.active { border-left-width: 3px; }
  .topbar { padding: 0 var(--sp-4); }
  .tab-panels { padding: var(--sp-4); }
  .content-split, .faq-split { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: var(--fs-18); }
  .channel-selector span { display: none; }
}

/* =========================================================
   21. MOTION REDUCE
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .status-indicator, .pulse-indicator, .channel-selector::before { box-shadow: none; }
}

/* =========================================================
   22. UTILITY / MISC
   ========================================================= */
.owner-only { /* la gestione display è controllata dal JS/anti-flash */ }
.knowledge-custom-date { display: flex; gap: 8px; align-items: center; }
.rules-meta { color: var(--text-3); font-size: var(--fs-12); }

/* =========================================================
   23. POLISH & FIX (rifiniture di Pietro) — appeso in coda così
       vince sulle regole sopra. Corregge: overflow del testo,
       simmetria/allineamento card, etichette sezioni, più colore.
   ========================================================= */

/* --- (A) ANTI-OVERFLOW: nessuna parola/riga deve uscire dalle card --- */
/* i figli di flex/grid devono poter restringersi (altrimenti il testo sfonda) */
.content-split, .ctx-grid, .chan-grid, .learn-grid, .stats-grid, .health-grid { min-width: 0; }
.panel-card, .split-card, .stat-card, .health-card, .learn-card, .chan-card,
.ctx-cell { min-width: 0; }
.ctx-cell > *, .chan-card > *, .chan-card-top > * { min-width: 0; }

/* valori su UNA riga (titoli, nomi): troncati con "…", mai fuori dalla card */
.ctx-val, #ctx-title, #ctx-channel, #ctx-game, .chan-name, .chan-title, .chan-game {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* testo su più righe: va a capo anche senza spazi (titoli lunghissimi) */
.ctx-text, #ctx-scene, #ctx-speech, .learn-msg, .learn-row, .feed-item-msg,
.chan-meta-empty, .data-table td, .console-result, .learn-card-body {
  overflow-wrap: anywhere; word-break: break-word;
}
/* meta del canale: gioco e titolo su due righe, ognuno troncato pulito */
.chan-meta { flex-direction: column; align-items: flex-start; gap: 2px; }

/* --- (B) SIMMETRIA: card della stessa riga tutte alte uguali --- */
.stats-grid, .learn-grid, .ctx-grid, .chan-grid, .health-grid { align-items: stretch; }
.stat-card, .learn-card, .chan-card, .health-card, .ctx-cell { height: 100%; }
.learn-card { display: flex; flex-direction: column; }
.learn-card-body { flex: 1 1 auto; max-height: 210px; }
/* le 3 card (vede/sente/chat) sempre su una riga a colonne uguali → stessa altezza */
.learn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .learn-grid { grid-template-columns: 1fr; } }
.chan-card { display: flex; flex-direction: column; gap: 8px; }
.chan-actions { margin-top: auto; } /* il pulsante Rimuovi si allinea in basso */

/* --- (C) ETICHETTE SEZIONI nella sidebar (Moderazione, Comunità, …) ---
   l'HTML usa testo diretto, non data-title: le rendo intestazioni vere. */
.menu-section {
  font-family: var(--font-display);
  font-size: var(--fs-11); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: color-mix(in oklab, var(--text-3) 45%, var(--brand));
  padding: var(--sp-4) var(--sp-3) var(--sp-1);
}
.menu-section::before { display: none; } /* evita il blocco vuoto attr(data-title) */

/* --- (D) PIÙ COLORE E CONTRASTO SULLE SCRITTE --- */
:root {
  --text-2: #c6d0de;  /* testo secondario più chiaro */
  --text-3: #9aa7bc;  /* testo tenue più chiaro */
}
/* micro-etichette maiuscole: tinta fredda invece del grigio piatto */
.ctx-label, .stat-label, .health-item-label, .learn-card-title,
.data-table thead th, .form-group label, .faq-esc-box-head span, .ctx-row .ctx-label {
  color: color-mix(in oklab, var(--text-2) 55%, var(--info));
}
/* valori/numeri importanti ben leggibili */
.health-item-val, .ctx-val, .stat-value, .health-title { color: var(--text-1); }
/* titoli di card e di pagina: bianchi netti e più marcati */
.card-title, .panel-intro h2 { color: var(--text-1); font-weight: 700; }
/* accento colorato prima del titolo di pagina → tocco premium */
.panel-intro { position: relative; padding-left: 14px; }
.panel-intro::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 6px; width: 4px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--brand), var(--info));
}
.panel-intro p { color: var(--text-2); }
/* nomi canale un filo più grandi e marcati */
.chan-name { font-size: var(--fs-16); font-weight: 700; }

/* --- (E) STOP ZOOM/LAMPEGGIO sulla card "Messaggi in coda risposte" ---
   Lovable applicava l'animazione del puntino (scale+opacity) all'INTERA card. */
.font-pulse { animation: none; }
.font-pulse * { animation: none; }

/* --- (F) CHAT nelle card del Bot: nick + frase su UNA riga (come prima) --- */
.learn-row { display: block; line-height: 1.55; }
.learn-row .nick { display: inline; }
.learn-row .nick-sep { display: inline; }

/* --- (G) MENO GRIGIO nel menu Bot: tinte per fonte e per funzione --- */
/* titoli delle 3 card col colore della loro fonte */
.learn-grid .learn-card:nth-child(1) .learn-card-title { color: var(--info); }    /* 👁 vede */
.learn-grid .learn-card:nth-child(2) .learn-card-title { color: var(--voice); }   /* 👂 sente */
.learn-grid .learn-card:nth-child(3) .learn-card-title { color: var(--ai); }      /* 💬 chat */
/* contenuto di "vede" e "sente": tinta leggera invece del grigio piatto */
.learn-grid .learn-card:nth-child(1) .learn-row { color: color-mix(in oklab, var(--info) 30%, var(--text-1)); }
.learn-grid .learn-card:nth-child(2) .learn-row { color: color-mix(in oklab, var(--voice) 28%, var(--text-1)); }
.learn-grid .learn-card:nth-child(3) .learn-row { color: var(--text-1); }
/* contatori delle card in tinta */
.learn-grid .learn-card:nth-child(1) .learn-card-count { color: var(--info); border-color: color-mix(in oklab, var(--info) 40%, transparent); }
.learn-grid .learn-card:nth-child(2) .learn-card-count { color: var(--voice); border-color: color-mix(in oklab, var(--voice) 40%, transparent); }
.learn-grid .learn-card:nth-child(3) .learn-card-count { color: var(--ai); border-color: color-mix(in oklab, var(--ai) 40%, transparent); }
/* interruttori funzionalità: nome col colore della capacità (se il browser supporta :has) */
.feature-row:has([data-feature="bot_replies"]) .feature-name { color: var(--ai); }
.feature-row:has([data-feature="bot_ambient"]) .feature-name { color: color-mix(in oklab, var(--ai) 70%, var(--text-1)); }
.feature-row:has([data-feature="stt"]) .feature-name { color: var(--voice); }
.feature-row:has([data-feature="vision"]) .feature-name { color: var(--info); }
.feature-row:has([data-feature="moderation"]) .feature-name { color: var(--warning); }
.feature-row:has([data-feature="auto_enforce"]) .feature-name { color: var(--danger); }
.feature-desc { color: var(--text-2); }

/* --- (H) CHECKBOX BELLI (scrive in chat / modera / guarda e ascolta, FAQ…) ---
   Niente quadrato nativo: box arrotondato, verde pieno con ✓ quando attivo. */
input[type="checkbox"]:not(.switch input) {
  appearance: none; -webkit-appearance: none;
  width: 19px; height: 19px; flex-shrink: 0;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface-2);
  cursor: pointer;
  vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:not(.switch input):hover { border-color: var(--brand); }
input[type="checkbox"]:not(.switch input):checked {
  background: var(--brand)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230b0f16' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    center/12px no-repeat;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
}
/* etichetta accanto al checkbox ben leggibile */
label:has(> input[type="checkbox"]) { color: var(--text-1); font-weight: 600; cursor: pointer; }

/* --- (I) MENU LATERALE: via il grigio spento --- */
.menu-item { color: #d7e0ec; font-weight: 550; }
.menu-icon { color: color-mix(in oklab, var(--info) 52%, var(--text-3)); }
.menu-item:hover .menu-icon { color: var(--brand); }
.menu-item:hover { color: #ffffff; }
.menu-item.active { color: #ffffff; }

/* --- (J) VIA BIANCO E GRIGIO: testo colorato in tutta la dashboard ---
   Ogni tipo di testo ha una sua tinta: titoli ORO, testo base AZZURRO,
   valori/numeri VERDE, meta/orari TEAL, descrizioni LILLA, stati vuoti
   ARANCIO. Contrasto sempre alto sul fondo scuro. */
:root {
  --gold:   #f2c94c;
  --teal:   #2fd4c9;
  --lilac:  #c9b8f5;
  --amber:  #f0a63c;
  --text-1: #cfe2ff;   /* testo principale: azzurro chiaro (non più bianco) */
  --text-2: #a9c6ea;   /* secondario: blu chiaro (non più grigio) */
  --text-3: #86abd6;   /* tenue: blu medio */
}

/* Titoli: ORO premium */
h1, h2, h3, h4,
.card-title, .panel-intro h2, .page-title, .brand-text,
.quick-action-title, .health-title, .login-title, #faq-form-title {
  color: var(--gold);
}
/* Il nome brand mantiene il gradiente verde-blu */
.neon-text {
  background: linear-gradient(90deg, var(--brand), var(--info));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Valori e numeri importanti: VERDE brand */
.stat-value, .health-item-val, #al-total, #al-ips { color: var(--brand); }
/* Valori del contesto live (titolo, gioco, spettatori): GIALLO caldo */
.ctx-val { color: var(--gold); }

/* Meta-informazioni (orari, canale·data, dispositivo): TEAL */
.learn-meta, .feed-item-time, .chan-title { color: var(--teal); }

/* Descrizioni e testi esplicativi: LILLA tenue */
.feature-desc, .panel-intro p, .login-subtitle, .login-footer,
.faq-esc-box small, .quick-action-block p { color: var(--lilac); }

/* Stati vuoti ("nessun dato…"): ARANCIO morbido */
.feed-empty, .learn-empty, .chan-meta-empty,
.data-table .text-muted, td.text-muted { color: var(--amber); }

/* .text-muted generico sparso nell'HTML: azzurro, mai grigio */
.text-muted { color: var(--text-2); }

/* Tabelle: intestazioni BLU, celle azzurre, codici/ID in ARANCIO */
.data-table thead th { color: var(--info); }
.data-table td { color: var(--text-1); }
.data-table td code, .data-table td strong { color: var(--amber); }
code { color: var(--amber); }

/* Form: etichette BLU, testo digitato AZZURRO, placeholder blu tenue */
.form-group label, .faq-matcher > label { color: var(--info); }
.input-field, .form-group input, .form-group select, .form-group textarea { color: var(--text-1); }
::placeholder { color: var(--text-3); opacity: .8; }

/* Sidebar: voci menu azzurre, attiva VERDE, sezioni verdi già ok */
.menu-item { color: var(--text-2); }
.menu-item:hover { color: var(--brand); }
.menu-item.active { color: var(--brand); }
.user-profile .user-name, #user-display-name { color: var(--gold); }
#user-role-badge, .user-role { color: var(--teal); }

/* Topbar: titolo pagina ORO, chip canale VERDE */
#current-page-title { color: var(--gold); }
#active-channel-name { color: var(--brand); font-weight: 700; }

/* Bottoni secondari: testo azzurro invece di grigio */
.btn-secondary { color: var(--text-1); }

/* Icone menu ora emoji: dimensione e allineamento corretti */
.menu-icon { font-size: 17px; line-height: 1; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.menu-item.active .menu-icon, .menu-item:hover .menu-icon { filter: none; } /* le emoji restano a colori */

/* Tema CHIARO: stesse tinte ma scurite per il contrasto su fondo chiaro */
:root[data-theme="light"] {
  --gold:  #9a7500;
  --teal:  #0d7d76;
  --lilac: #6f51c9;
  --amber: #a86206;
  --text-1: #143a66;
  --text-2: #2f5583;
  --text-3: #4a6b93;
}

/* =========================================================
   24. PREMIUM UPGRADE — rifiniture estetiche finali (Pietro v2)
       Layer additivo: non tocca id, data-*, nomi classe, semantica
       colori (oro/azzurro/verde/blu/teal/lilla/ambra) né i vincoli
       anti-overflow / simmetria delle sezioni 22-23.
       Regole: hairline luminosa in alto sulle card, ombre stratificate
       morbide, hover con micro-lift, header con divisore sottile,
       tipografia con tabular-nums, tabelle raffinate, bottoni con
       gradiente e sheen, badge/chip a pillola translucida, switch e
       checkbox rifiniti, feed attività elegante, stati vuoti curati.
   ========================================================= */

/* — Token aggiuntivi (solo estetica; non alterano semantica) — */
:root {
  --hairline-top:
    inset 0 1px 0 color-mix(in oklab, var(--info) 22%, transparent);
  --hairline-top-strong:
    inset 0 1px 0 color-mix(in oklab, var(--brand) 30%, transparent);
  --shadow-card:
    0 1px 0 color-mix(in oklab, var(--info) 10%, transparent),
    0 1px 2px rgba(0,0,0,.35),
    0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-card-hover:
    0 1px 0 color-mix(in oklab, var(--brand) 22%, transparent),
    0 2px 4px rgba(0,0,0,.35),
    0 22px 48px -18px rgba(0,0,0,.7);
  --surface-grad:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface-1) 94%, var(--info) 6%) 0%,
      var(--surface-1) 55%,
      color-mix(in oklab, var(--surface-1) 92%, #000 8%) 100%);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="light"] {
  --hairline-top:
    inset 0 1px 0 color-mix(in oklab, var(--info) 18%, transparent);
  --hairline-top-strong:
    inset 0 1px 0 color-mix(in oklab, var(--brand) 26%, transparent);
  --shadow-card:
    0 1px 0 color-mix(in oklab, var(--info) 8%, transparent),
    0 1px 2px rgba(15,23,41,.05),
    0 14px 34px -18px rgba(15,23,41,.20);
  --shadow-card-hover:
    0 1px 0 color-mix(in oklab, var(--brand) 20%, transparent),
    0 2px 4px rgba(15,23,41,.06),
    0 22px 46px -20px rgba(15,23,41,.28);
  --surface-grad:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface-1) 96%, var(--info) 4%) 0%,
      var(--surface-1) 60%,
      color-mix(in oklab, var(--surface-1) 96%, #000 4%) 100%);
}

/* — Numeri sempre tabellari (allineamento premium) — */
.stat-value, .health-item-val, .ctx-val, .feed-item-time,
.learn-card-count, .learn-meta, .badge, .badge-red, .badge-green,
.data-table td, .data-table th, code, #al-total, #al-ips,
#active-viewers, #queue-badge-count, .chan-badge, .chan-meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* — Micro-etichette maiuscole: più aria e tracking premium — */
.ctx-label, .stat-label, .health-item-label, .learn-card-title,
.form-group > label, .faq-matcher > label,
.faq-esc-box-head span, .menu-section {
  text-transform: uppercase;
  letter-spacing: .085em;
  font-weight: 700;
  font-size: var(--fs-11);
  font-family: var(--font-display);
}

/* =========================================================
   24.1 CARD & PROFONDITÀ — hairline + gradiente + hover lift
   ========================================================= */
.panel-card, .split-card, .stat-card, .health-card,
.learn-card, .chan-card, .ctx-cell {
  position: relative;
  background: var(--surface-grad);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), var(--hairline-top);
  transition:
    transform .18s var(--ease-out),
    border-color .18s var(--ease-out),
    box-shadow .18s var(--ease-out),
    background .18s var(--ease-out);
  will-change: transform;
}

/* Hover con micro-lift 2px + bordo che si accende */
.stat-card:hover, .health-card:hover, .learn-card:hover,
.chan-card:hover, .ctx-cell:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 42%, var(--border-2));
  box-shadow: var(--shadow-card-hover), var(--hairline-top-strong);
}
.panel-card:hover, .split-card:hover {
  border-color: color-mix(in oklab, var(--info) 30%, var(--border-2));
  box-shadow: var(--shadow-card-hover), var(--hairline-top);
}

/* Divisore sottile sotto l'header della card (senza toccare struttura) */
.panel-card > .card-header,
.split-card > .card-header,
.panel-card > .card-title,
.split-card > .card-title {
  position: relative;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.panel-card > .card-header::after,
.split-card > .card-header::after,
.panel-card > .card-title::after,
.split-card > .card-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklab, var(--info) 42%, transparent) 18%,
    color-mix(in oklab, var(--brand) 34%, transparent) 82%,
    transparent 100%);
  opacity: .55;
}

/* Stat card: numero display + label caps sopra */
.stat-card { padding: var(--sp-5); }
.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 color-mix(in oklab, var(--brand) 14%, transparent);
}

/* Ctx cell (il "🤖 Contesto del bot") */
.ctx-cell { padding: var(--sp-4); }
.ctx-cell .ctx-label { color: color-mix(in oklab, var(--info) 60%, var(--text-2)); }

/* Health card: pallino colorato in alto a dx già gestito; qui rifiniamo */
.health-card { padding: var(--sp-4) var(--sp-5); }
.health-title {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.005em;
}

/* Chan card: rimuovi in basso già dalla sez.23; qui: gap ritmico */
.chan-card { padding: var(--sp-4); gap: var(--sp-3); }
.chan-card-top { display: flex; align-items: center; gap: var(--sp-3); }

/* =========================================================
   24.2 TIPOGRAFIA & TABELLE
   ========================================================= */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-14);
}
.data-table thead th {
  position: sticky; top: 0;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--surface-2) 92%, var(--info) 8%),
    var(--surface-2));
  color: var(--info);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid color-mix(in oklab, var(--info) 30%, var(--border-2));
  text-align: left;
  white-space: nowrap;
}
.data-table tbody td {
  padding: var(--sp-4) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}
.data-table tbody tr { transition: background .15s var(--ease-out); }
.data-table tbody tr:hover {
  background: color-mix(in oklab, var(--brand) 6%, transparent);
}
.data-table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}
.data-table tbody td:first-child {
  font-weight: 600;
  color: var(--gold);
  font-family: var(--font-display);
}
.data-table tbody tr:last-child td { border-bottom: 0; }

/* =========================================================
   24.3 BOTTONI
   ========================================================= */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-14);
  letter-spacing: .005em;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform .12s var(--ease-out),
    box-shadow .18s var(--ease-out),
    background .18s var(--ease-out),
    border-color .18s var(--ease-out),
    color .18s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  color: var(--text-inv);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 88%, #fff 12%) 0%,
    var(--brand) 55%,
    var(--brand-600) 100%);
  border-color: color-mix(in oklab, var(--brand) 60%, #000);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 30%, transparent),
    0 1px 2px rgba(0,0,0,.25),
    0 10px 24px -12px color-mix(in oklab, var(--brand) 60%, transparent);
}
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    color-mix(in oklab, #fff 35%, transparent) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform .5s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 40%, transparent),
    0 2px 4px rgba(0,0,0,.28),
    0 16px 32px -14px color-mix(in oklab, var(--brand) 70%, transparent);
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.25),
    0 1px 2px rgba(0,0,0,.2);
}

.btn-secondary {
  color: var(--text-1);
  background: color-mix(in oklab, var(--surface-2) 88%, transparent);
  border-color: var(--border-2);
  box-shadow: var(--hairline-top);
}
.btn-secondary:hover {
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--info) 45%, var(--border-2));
  color: var(--info);
  background: color-mix(in oklab, var(--info) 8%, var(--surface-2));
}
.btn-secondary:active { transform: translateY(0); }

.btn-danger {
  color: var(--text-inv);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--danger) 92%, #fff 8%),
    var(--danger));
  border-color: color-mix(in oklab, var(--danger) 55%, #000);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 25%, transparent),
    0 10px 22px -14px color-mix(in oklab, var(--danger) 65%, transparent);
}
.btn-danger:hover { transform: translateY(-1px); }

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible { box-shadow: var(--focus-ring); }

/* =========================================================
   24.4 BADGE & CHIP
   ========================================================= */
.badge, .chip, .pill, .chan-badge, #queue-badge-count {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--info) 12%, transparent);
  color: var(--info);
  border-color: color-mix(in oklab, var(--info) 34%, transparent);
}
.badge-green, .chan-badge.live {
  color: var(--brand);
  background: var(--brand-050);
  border-color: color-mix(in oklab, var(--brand) 42%, transparent);
}
.badge-red, #queue-badge-count {
  color: var(--danger);
  background: var(--danger-050);
  border-color: color-mix(in oklab, var(--danger) 42%, transparent);
}
.badge-warning {
  color: var(--warning);
  background: var(--warning-050);
  border-color: color-mix(in oklab, var(--warning) 42%, transparent);
}
.badge-ai {
  color: var(--ai);
  background: var(--ai-050);
  border-color: color-mix(in oklab, var(--ai) 42%, transparent);
}

/* Chip canale nella topbar: pillola translucida rifinita */
.channel-selector {
  border: 1px solid color-mix(in oklab, var(--brand) 32%, var(--border-2));
  background: color-mix(in oklab, var(--brand) 8%, var(--surface-1));
  box-shadow: var(--hairline-top-strong);
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
.channel-selector:hover {
  border-color: color-mix(in oklab, var(--brand) 55%, var(--border-2));
  background: color-mix(in oklab, var(--brand) 12%, var(--surface-1));
}

/* =========================================================
   24.5 SWITCH & CHECKBOX (rifinitura, non ridisegno completo)
   ========================================================= */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider, .switch > span {
  position: absolute; inset: 0; cursor: pointer;
  background: color-mix(in oklab, var(--surface-3) 92%, #000 8%);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.switch .slider::before, .switch > span::before {
  content: ""; position: absolute;
  height: 18px; width: 18px; left: 3px; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #fdfdff, #d8dee8);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.08);
  transition: transform .22s var(--ease-out), background .22s var(--ease-out);
}
.switch input:checked + .slider,
.switch input:checked + span {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 90%, #fff 10%),
    var(--brand-600));
  border-color: color-mix(in oklab, var(--brand) 60%, #000);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, #fff 25%, transparent),
    0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent);
}
.switch input:checked + .slider::before,
.switch input:checked + span::before {
  left: 3px;                       /* azzera il left:20px della vecchia regola: */
  transform: translate(20px, -50%); /* così il pallino trasla e NON esce dal binario */
  background: linear-gradient(180deg, #ffffff, #eaf7ef);
}
.switch input:focus-visible + .slider,
.switch input:focus-visible + span { box-shadow: var(--focus-ring); }

/* =========================================================
   24.6 FEED ATTIVITÀ
   ========================================================= */
.feed-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--info);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--surface-2) 60%, transparent);
  transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.feed-item + .feed-item { margin-top: var(--sp-2); }
.feed-item:hover {
  transform: translateX(2px);
  background: color-mix(in oklab, var(--surface-2) 85%, transparent);
}
/* FIX Conoscenza/attività: quando l'app usa un'icona REALE (.feed-item-icon)
   invece dell'attributo data-icon, la griglia a 3 colonne spingeva il testo a
   destra. In quel caso passo a flex (icona + contenuto) e nascondo il ::before. */
.feed-item:has(.feed-item-icon) {
  display: flex;
  align-items: flex-start;
  grid-template-columns: none;
}
.feed-item:has(.feed-item-icon)::before { display: none; }
.feed-item .feed-item-icon { flex-shrink: 0; }
.feed-item > div:not(.feed-item-icon) { min-width: 0; flex: 1; text-align: left; }
.feed-item::before {
  content: attr(data-icon);
  grid-column: 1;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--info) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--info) 34%, transparent);
  color: var(--info);
  font-size: 15px;
  flex-shrink: 0;
}
.feed-item .feed-item-msg { color: var(--text-1); font-weight: 600; }
.feed-item .feed-item-time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--teal);
  white-space: nowrap;
}
/* Varianti per tipo (usa data-type sull'elemento; se assente resta info) */
.feed-item[data-type="success"] { border-left-color: var(--brand); }
.feed-item[data-type="success"]::before {
  background: var(--brand-050);
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  color: var(--brand);
}
.feed-item[data-type="success"] .feed-item-msg { color: var(--brand); }

.feed-item[data-type="warning"] { border-left-color: var(--warning); }
.feed-item[data-type="warning"]::before {
  background: var(--warning-050);
  border-color: color-mix(in oklab, var(--warning) 40%, transparent);
  color: var(--warning);
}
.feed-item[data-type="warning"] .feed-item-msg { color: var(--warning); }

.feed-item[data-type="danger"] { border-left-color: var(--danger); }
.feed-item[data-type="danger"]::before {
  background: var(--danger-050);
  border-color: color-mix(in oklab, var(--danger) 40%, transparent);
  color: var(--danger);
}
.feed-item[data-type="danger"] .feed-item-msg { color: var(--danger); }

.feed-item[data-type="ai"] { border-left-color: var(--ai); }
.feed-item[data-type="ai"]::before {
  background: var(--ai-050);
  border-color: color-mix(in oklab, var(--ai) 40%, transparent);
  color: var(--ai);
}
.feed-item[data-type="ai"] .feed-item-msg { color: var(--ai); }

/* =========================================================
   24.7 STATI VUOTI
   ========================================================= */
.empty-state, .feed-empty, .learn-empty, .chan-meta-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8) var(--sp-6);
  border: 1.5px dashed color-mix(in oklab, var(--amber) 32%, var(--border-2));
  border-radius: var(--r-lg);
  color: var(--amber);
  text-align: center;
  background:
    radial-gradient(60% 60% at 50% 0%, color-mix(in oklab, var(--amber) 8%, transparent), transparent 70%),
    color-mix(in oklab, var(--surface-2) 40%, transparent);
  font-weight: 500;
}
.empty-state::before, .feed-empty::before, .learn-empty::before, .chan-meta-empty::before {
  content: "◔";
  font-size: 42px;
  line-height: 1;
  color: color-mix(in oklab, var(--amber) 55%, transparent);
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--amber) 25%, transparent));
}

/* =========================================================
   24.8 MICRO-INTERAZIONI (default sane, mai infinite su elementi grandi)
   ========================================================= */
.menu-item, .btn, .btn-primary, .btn-secondary, .btn-danger,
.chip, .badge, .switch .slider, input[type="checkbox"]:not(.switch input),
.channel-selector, .form-group input, .form-group select, .form-group textarea {
  transition-duration: .18s;
  transition-timing-function: var(--ease-out);
}

/* Form focus più elegante */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.input-field:focus {
  border-color: color-mix(in oklab, var(--info) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--info) 22%, transparent);
  outline: none;
}

/* Menu voce attiva: pillola verde con hairline */
.menu-item.active {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--brand) 14%, transparent),
    color-mix(in oklab, var(--brand) 8%, transparent));
  border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent);
  box-shadow: var(--hairline-top-strong);
  border-radius: var(--r-md);
}
.menu-item {
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.menu-item:hover {
  background: color-mix(in oklab, var(--brand) 8%, transparent);
  border-color: color-mix(in oklab, var(--brand) 20%, transparent);
}

/* Enforce: nessuna animazione infinita su elementi grandi/sfocati */
.panel-card, .split-card, .stat-card, .health-card,
.learn-card, .chan-card, .ctx-cell, .feed-item {
  animation: none !important;
}

/* =========================================================
   25. FIX LAYOUT (bug segnalati) — appeso in coda, vince sopra
   ========================================================= */
/* FAQ EDITOR: .action-console-form è una griglia a 2 colonne (giusta per i
   form input+bottone), ma sul form FAQ — che ha molti campi impilati — faceva
   finire Domanda/Parole chiave e Risposta/Cooldown affiancati a altezze diverse
   (sfasati). Forzo il form FAQ a UNA colonna. */
#faq-form { display: flex; flex-direction: column; gap: var(--sp-3); }
#faq-form > * { width: 100%; }
/* la riga "Cooldown + Abilitata" resta a due, allineata in basso */
.faq-form-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); width: 100%; }
.faq-toggle { padding-bottom: 9px; }

/* UTENTI AUTORIZZATI: la riga del form "crea account" era una griglia che
   impilava i campi (card altissima). La rendo flex in riga, compatta. */
.access-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.access-form-row > .form-group { flex: 1 1 170px; min-width: 0; margin: 0; }
.access-form-row > .form-group:has(select) { flex: 0 1 210px; }
.access-form-row > .btn { flex: 0 0 auto; }

/* End of file */