/* ============================================================
   alphadesk.css - GENERATED FILE - non modificare direttamente
   Modificare i moduli in app/static/css/ e rieseguire:
       python scripts/build-css.py
   Ultima build: 2026-07-23 14:00:26
   ============================================================ */

/* --- _variables.css ----------------------------------------- */
/* ── _variables.css — Design tokens, light mode, utilities ──
   Estratto da alphadesk.css (linee 1-139)
   Fonte: app/static/css/_variables.css
   Bundle: app/static/alphadesk.css (rigenerato da scripts/build-css.ps1)
──────────────────────────────────────────────────────────── */

/* ── Lucide icon sizing ───────────────────────────────────── */
.li{display:inline-flex;align-items:center;vertical-align:middle;}
.li svg{width:16px;height:16px;stroke-width:1.75;}
.li-sm svg{width:14px;height:14px;}
.li-lg svg{width:20px;height:20px;}
.nav-ico .li svg,.nav-ico.li svg{width:15px;height:15px;stroke-width:1.75;}

/* ── Toast notifications ────────────────────────────────────── */
#toastContainer{position:fixed;top:72px;right:20px;z-index:99999;
  display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-radius:10px;font-family:var(--mono);font-size:12px;font-weight:500;
  min-width:260px;max-width:380px;pointer-events:all;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  border:1px solid transparent;
  animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) forwards;}
.toast.out{animation:toastOut .2s ease-in forwards;}
.toast-success{background:rgba(0,229,160,.12);border-color:rgba(0,229,160,.3);color:var(--green);}
.toast-error{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.3);color:var(--red);}
.toast-info{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.3);color:var(--accent2);}
.toast-warn{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.3);color:var(--yellow);}
.toast svg{flex-shrink:0;width:15px;height:15px;}
.toast-msg{flex:1;line-height:1.4;}
.toast-close{cursor:pointer;opacity:.6;flex-shrink:0;background:none;border:none;
  color:inherit;padding:0;line-height:1;}
.toast-close:hover{opacity:1;}
@keyframes toastIn{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}}
@keyframes toastOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateX(24px);}}

/* ── Skeleton loader ─────────────────────────────────────────── */
.skel{border-radius:6px;background:linear-gradient(90deg,
  var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size:200% 100%;
  animation:skelShimmer 1.5s infinite;}
@keyframes skelShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.skel-line{height:12px;margin-bottom:8px;border-radius:4px;}
.skel-line.w30{width:30%;}.skel-line.w50{width:50%;}
.skel-line.w70{width:70%;}.skel-line.w100{width:100%;}
.skel-kpi{height:80px;border-radius:var(--radius-md);}
.skel-card{height:200px;border-radius:var(--radius-lg);}
.skel-row{height:44px;border-radius:6px;margin-bottom:4px;}

/* ════════════════════════════════════════════════
   ALPHADESK — DESIGN SYSTEM
   Aesthetic: Obsidian Terminal · Neon Precision
   Fonts: Syne (UI) + JetBrains Mono (data)
════════════════════════════════════════════════ */
:root {
  /* Colori dark */
  --bg:       #07090f;
  --bg2:      #0c0f19;
  --bg3:      #111520;
  --bg4:      #161b28;
  --border:   #1d2436;
  --border2:  #252d42;
  --text:     #8b95b0;
  --text-dim: #3d4860;
  --text-bright: #dde3f0;
  --text-white:  #f0f4ff;

  /* Accent neon */
  --green:     #00e5a0;
  --green-dim: #00e5a012;
  --green-glow:#00e5a040;
  --red:       #f43f5e;
  --red-dim:   #f43f5e12;
  --red-glow:  #f43f5e40;
  --yellow:    #fbbf24;
  --yellow-dim:#fbbf2412;
  --blue:      #38bdf8;
  --blue-dim:  #38bdf812;
  --accent:    #6366f1;
  --accent2:   #818cf8;
  --accent-dim:#6366f118;
  --accent-glow:#6366f145;

  /* Link a11y (AD-013) — token mode-safe: contrasto ≥4.5:1 sia in dark sia in light.
     Dark: #818cf8 ≈5.5:1 su card scura. (Override light più scuro in body.light-mode.) */
  --link:       #818cf8;
  --link-hover: #a5b4fc;

  /* Font */
  --sans: 'Syne', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Layout */
  --header-h:    60px;
  --bottom-nav-h:64px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-sm:   6px;

  /* Shadows */
  --shadow-card: 0 1px 3px #00000060, 0 0 0 1px var(--border);
  --shadow-glow-g: 0 0 20px var(--green-glow);
  --shadow-glow-r: 0 0 20px var(--red-glow);
  --shadow-glow-a: 0 0 24px var(--accent-glow);

  /* v43.0.0 — Interaction & alias tokens */
  --text-muted:  #3d4860;
  --bg-hover:    #1a1f30;
  --bg-active:   #1e2438;

  /* v43.0.206 — Missing radius token (referenced by _performance_css.html) */
  --radius-md: 12px;

  /* v43.0.206 — Spacing scale (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* v43.0.206 — Font-size scale */
  --fs-xs: 9px;
  --fs-sm: 11px;
  --fs-md: 13px;
  --fs-lg: 15px;

  /* v43.0.206 — AI & severity semantic color tokens */
  --ai-color:    rgba(99,102,241,.85);
  --ai-bg:       rgba(99,102,241,.06);
  --ai-border:   rgba(99,102,241,.20);
  --warn-color:  rgba(245,158,11,.85);
  --warn-bg:     rgba(245,158,11,.06);
  --warn-border: rgba(245,158,11,.22);
  --info-color:  rgba(59,130,246,.85);
  --info-bg:     rgba(59,130,246,.06);
  --info-border: rgba(59,130,246,.20);

  /* v45.0.001 — Alias tokens (compatibilità template esistenti) */
  --bg-card:       var(--bg2);
  --bg-surface:    var(--bg3);
  --border-subtle: var(--border);

  /* v45.0.001 — Shadow scale */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.35);
  --shadow-md:  0 4px 14px rgba(0,0,0,.28), 0 0 0 1px var(--border);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.40);
  --shadow-xl:  0 20px 60px rgba(0,0,0,.50);

  /* v45.0.001 — Transition tokens */
  --tx-fast:   .12s ease;
  --tx-normal: .20s ease;
  --tx-slow:   .35s ease;

  /* v45.0.001 — Font scale esteso */
  --fs-xl:  17px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;

  /* v45.0.006 — Premium SaaS Design System (FASE 6E) */

  /* --red-soft: rosso attenuato per valori negativi secondari (es. ritenuta) */
  --red-soft: rgba(244,63,94,.65);

  /* Financial semantic glow — usato sulle KPI card hover */
  --glow-pos:     0 0 24px rgba(0,229,160,.15),     0 4px 16px rgba(0,229,160,.07);
  --glow-neg:     0 0 24px rgba(244,63,94,.15),      0 4px 16px rgba(244,63,94,.07);
  --glow-neutral: 0 0 24px rgba(56,189,248,.12),     0 4px 16px rgba(56,189,248,.05);
  --glow-accent:  0 0 24px rgba(99,102,241,.18),     0 4px 16px rgba(99,102,241,.08);
  --glow-warn:    0 0 24px rgba(251,191,36,.12),      0 4px 16px rgba(251,191,36,.05);

  /* Glass — glassmorphism subtile per overlay e card floating */
  --glass-bg:     rgba(255,255,255,.022);
  --glass-border: rgba(255,255,255,.065);
  --glass-blur:   blur(10px);

  /* Gradient semantic — background sfumato per KPI card */
  --gradient-pos:    linear-gradient(135deg, rgba(0,229,160,.05) 0%, transparent 55%);
  --gradient-neg:    linear-gradient(135deg, rgba(244,63,94,.05) 0%, transparent 55%);
  --gradient-neutral:linear-gradient(135deg, rgba(56,189,248,.04) 0%, transparent 55%);
  --gradient-accent: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(99,102,241,.02) 55%);
  --gradient-warn:   linear-gradient(135deg, rgba(251,191,36,.04) 0%, transparent 55%);
}

/* ── LIGHT MODE ── */
body.light-mode {
  --bg:       #f4f6fb;
  --bg2:      #ffffff;
  --bg3:      #edf0f7;
  --bg4:      #e4e8f3;
  --border:   #d1d8ec;
  --border2:  #bcc6e0;
  --text:     #4a5270;
  --text-dim: #9aa3bf;
  --text-bright: #1e2440;
  --text-white:  #0f1226;
  --green:     #00b87a;
  --green-dim: #00b87a14;
  --green-glow:#00b87a30;
  --red:       #e11d48;
  --red-dim:   #e11d4814;
  --red-glow:  #e11d4830;
  --yellow:    #d97706;
  --yellow-dim:#d9770614;
  --blue:      #0284c7;
  --blue-dim:  #0284c714;
  --accent:    #4f46e5;
  --accent2:   #6366f1;
  --accent-dim:#4f46e510;
  --accent-glow:#4f46e530;
  /* Link a11y (AD-013) — light: #4f46e5 ≈6.3:1 su card chiara */
  --link:       #4f46e5;
  --link-hover: #4338ca;
  --shadow-card: 0 2px 8px #0000001a, 0 0 0 1px var(--border);

  --text-muted:  #9ba3be;
  --bg-hover:    #e8ecf5;
  --bg-active:   #dce2f2;
}


/* --- _base.css ----------------------------------------- */
/* ── _base.css — Reset, body, texture di fondo ──
   Estratto da alphadesk.css (linee 140-164)
───────────────────────────────────────────── */

/* ── RESET & BASE ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:15px; scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Texture di fondo sottile solo dark */
body:not(.light-mode)::before {
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, #6366f108 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, #00e5a006 0%, transparent 60%);
  pointer-events:none;
  z-index:0;
}
body > * { position:relative; z-index:1; }


/* --- _header.css ----------------------------------------- */
/* ── _header.css — Header, logo, nav desktop, hamburger, nav drawer ──
   Estratto da alphadesk.css (linee 165-339)
──────────────────────────────────────────────────────────────────── */

/* ── HEADER ── */
header {
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  position:sticky;
  top:0;
  z-index:300;
  background:rgba(7,9,15,0.85);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
}
body.light-mode header {
  background:rgba(244,246,251,0.88);
}
.logo {
  font-family:var(--sans);
  font-size:20px;
  font-weight:800;
  letter-spacing:3px;
  color:var(--text-white);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:2px;
  flex-shrink:0;
}
.logo span { color:var(--green); }
.logo-dot {
  width:6px; height:6px;
  background:var(--green);
  border-radius:50%;
  margin-left:6px;
  animation:breathe 2.5s ease-in-out infinite;
  box-shadow:0 0 8px var(--green);
}
@keyframes breathe { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Nav desktop */
.nav {
  display:flex;
  align-items:center;
  gap:2px;
}
.nav a {
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
  padding:8px 14px;
  border-radius:var(--radius-sm);
  transition:all .2s ease;
  white-space:nowrap;
  border:1px solid transparent;
}
.nav a:hover { color:var(--text-bright); background:var(--bg3); }
.nav a.active {
  color:var(--accent2);
  background:var(--accent-dim);
  border-color:var(--accent-dim);
}
.nav a.danger-link:hover { color:var(--red); background:var(--red-dim); }

/* Header right */
.header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* Live badge */
.live-badge {
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.5px;
  color:var(--green);
  background:var(--green-dim);
  border:1px solid #00e5a025;
  padding:5px 10px;
  border-radius:20px;
}
.live-dot {
  width:6px;height:6px;
  background:var(--green);
  border-radius:50%;
  animation:breathe 2s ease-in-out infinite;
  box-shadow:0 0 6px var(--green);
}

/* Update time */
.update-time { font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:.5px; }

/* Theme toggle — solo icona, compatto */
.theme-toggle {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:50%;
  cursor:pointer;
  width:36px; height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:all .2s;
  flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--accent); transform:rotate(20deg); }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:1px solid var(--border);
  cursor:pointer;
  padding:9px 10px;
  border-radius:var(--radius-sm);
  margin-left:4px;
}
.hamburger span {
  display:block;
  width:18px;
  height:2px;
  background:var(--text-dim);
  border-radius:2px;
  transition:all .3s cubic-bezier(.68,-.6,.32,1.6);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Drawer */
.nav-drawer {
  display:none;
  position:fixed;
  top:var(--header-h);
  left:0;right:0;
  background:rgba(12,15,25,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  z-index:280;
  flex-direction:column;
  padding:8px 16px 16px;
  animation:slideDown .2s ease;
}
body.light-mode .nav-drawer { background:rgba(244,246,251,0.97); }
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.nav-drawer.open { display:flex; }
.nav-drawer a {
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:.8px;
  color:var(--text);
  text-decoration:none;
  padding:14px 12px;
  border-bottom:1px solid var(--border);
  transition:color .15s;
  display:flex;
  align-items:center;
  gap:10px;
}
.nav-drawer a:last-of-type { border-bottom:none; }
.nav-drawer a.active { color:var(--accent2); }
.nav-drawer a.danger-link:hover { color:var(--red); }
.nav-drawer a svg, .nav-drawer a .nav-ico { font-size:16px; width:20px; text-align:center; }


/* --- _mobile.css ----------------------------------------- */
/* ── _mobile.css — Bottom nav, sheet overlay, sheet pannello ──
   Estratto da alphadesk.css (linee 340-512)
────────────────────────────────────────────────────────── */

/* ── BOTTOM NAV (mobile) ── */
/* ══════════════════════════════════════════════════
   BOTTOM NAV + SHEET — v42.2.0
   5 tab fissi + sheet dal basso per "Altro"
══════════════════════════════════════════════════ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: rgba(12,15,25,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  z-index: 290;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom);
}
body.light-mode .bottom-nav {
  background: rgba(244,246,251,0.97);
}
.bottom-nav a,
.bottom-nav button.bn-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--radius);
  transition: all .2s;
  flex: 1;
  background: none;
  border: none;
  cursor: pointer;
}
.bottom-nav a .bn-icon,
.bottom-nav button.bn-more .bn-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform .2s;
}
.bottom-nav a .bn-label,
.bottom-nav button.bn-more .bn-label {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color .2s;
}
.bottom-nav a.active .bn-icon {
  filter: drop-shadow(0 0 6px var(--accent));
  transform: translateY(-2px);
}
.bottom-nav a.active .bn-label { color: var(--accent2); }
.bottom-nav a:hover .bn-label,
.bottom-nav button.bn-more:hover .bn-label { color: var(--text-bright); }
.bottom-nav button.bn-more.open .bn-label { color: var(--accent2); }
.bottom-nav button.bn-more.open .bn-icon { transform: translateY(-2px); }

/* ── Sheet overlay ── */
.bn-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  z-index: 380;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.bn-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ── Sheet pannello ── */
.bn-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  z-index: 390;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 82vh;
  overflow-y: auto;
  padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom) + 8px);
}
.bn-sheet.open {
  transform: translateY(0);
}

/* Handle drag */
.bn-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 10px auto 6px;
}

/* Sezioni nello sheet */
.bn-sheet-section {
  padding: 10px 20px 4px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: .55;
}
.bn-sheet a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 20px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.bn-sheet a:last-child { border-bottom: none; }
.bn-sheet a:hover,
.bn-sheet a:active { background: var(--bg3); }
.bn-sheet a.active { color: var(--accent2); }
.bn-sheet a .bs-ico {
  font-size: 20px;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.bn-sheet a .bs-arrow {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  opacity: .4;
}
/* Sheet per Portfolio e Mercato */
.bn-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px 12px 8px;
}
.bn-sheet-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--radius-lg);
  border: none;
  margin: 3px;
  background: var(--bg3);
  font-size: 11px;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--mono);
}
.bn-sheet-grid a:hover { background: var(--bg4); color: var(--text-bright); }
.bn-sheet-grid a.active { color: var(--accent2); background: var(--accent-dim); }
.bn-sheet-grid a .bs-ico { font-size: 22px; }
.bn-sheet-grid a span:last-child { font-size: 10px; letter-spacing: .5px; }


/* --- _layout.css ----------------------------------------- */
/* ── _layout.css — Container, animazioni, section titles, metric cards, tables, closed cards ──
   Estratto da alphadesk.css (linee 513-690)
────────────────────────────────────────────────────────────────────────────────────────── */

/* ── CONTAINER ── */
.container { max-width:1440px; margin:0 auto; padding:28px 28px; }

/* Fade-in staggerato */
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.fade-in { animation:fadeUp .4s ease both; }
.fade-in:nth-child(1){animation-delay:.05s}
.fade-in:nth-child(2){animation-delay:.1s}
.fade-in:nth-child(3){animation-delay:.15s}
.fade-in:nth-child(4){animation-delay:.2s}
.fade-in:nth-child(5){animation-delay:.25s}

/* ── SECTION TITLE ── */
.section-title {
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
}
.section-title::before {
  content:'';
  display:inline-block;
  width:3px; height:14px;
  background:var(--accent);
  border-radius:2px;
  flex-shrink:0;
}

/* ── METRIC CARDS ── */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.metric-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 24px;
  position:relative;
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
  cursor:default;
}
.metric-card:hover { transform:translateY(-2px); }
.metric-card.neutral:hover { box-shadow:0 8px 30px #38bdf820; }
.metric-card.positive:hover { box-shadow:var(--shadow-glow-g); }
.metric-card.negative:hover { box-shadow:var(--shadow-glow-r); }
.metric-card.info:hover { box-shadow:0 8px 30px #fbbf2420; }
/* Glow top line */
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; }
.metric-card.neutral::before { background:linear-gradient(90deg,transparent,var(--blue),transparent); }
.metric-card.positive::before { background:linear-gradient(90deg,transparent,var(--green),transparent); }
.metric-card.negative::before { background:linear-gradient(90deg,transparent,var(--red),transparent); }
.metric-card.info::before { background:linear-gradient(90deg,transparent,var(--yellow),transparent); }
/* Corner glow */
.metric-card::after { content:''; position:absolute; top:0; right:0; width:60px; height:60px; border-radius:0 var(--radius-lg) 0 50%; opacity:.06; }
.metric-card.neutral::after { background:var(--blue); }
.metric-card.positive::after { background:var(--green); }
.metric-card.negative::after { background:var(--red); }
.metric-card.info::after { background:var(--yellow); }

.metric-label {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-bottom:10px;
}
.metric-value {
  font-family:var(--mono);
  font-size:26px;
  font-weight:600;
  color:var(--text-white);
  line-height:1.1;
  letter-spacing:-1px;
}
.metric-value.positive { color:var(--green); }
.metric-value.negative { color:var(--red); }
.metric-sub { font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:8px; }

/* ── TABLES — SISTEMA DEFINITIVO ──
   REGOLA: .table-wrap gestisce SEMPRE overflow-x:auto
   Non serve mai aggiungere .table-scroll separato.
── */
.table-wrap {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow-x:auto;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
  margin-bottom:28px;
  box-shadow:var(--shadow-card);
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
.table-wrap::-webkit-scrollbar { height:4px; }
.table-wrap::-webkit-scrollbar-track { background:transparent; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px; }
/* .table-scroll mantenuto per retrocompatibilità */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:560px; }
thead tr { background:var(--bg3); border-bottom:1px solid var(--border); }
th {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:13px 18px;
  text-align:right;
  font-weight:500;
  white-space:nowrap;
}
th:first-child { text-align:left; }
tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:nth-child(even) { background:rgba(255,255,255,.012); }
tbody tr:hover { background:var(--bg3); }
td {
  font-family:var(--mono);
  font-size:13px;
  padding:15px 18px;
  text-align:right;
  color:var(--text);
  white-space:nowrap;
}
td:first-child { text-align:left; }

.ticker-badge {
  display:inline-flex;
  align-items:center;
  background:var(--accent-dim);
  border:1px solid #6366f130;
  border-radius:var(--radius-sm);
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  font-family:var(--mono);
  color:var(--accent2);
  letter-spacing:.5px;
}
.denom { font-family:var(--sans); font-size:11px; color:var(--text-dim); margin-top:4px; white-space:normal; max-width:180px; line-height:1.4; }
.positive { color:var(--green); }
.negative { color:var(--red); }
.pct-bar { display:inline-flex; align-items:center; gap:8px; }
.bar-bg { width:44px; height:3px; background:var(--bg3); border-radius:2px; overflow:hidden; flex-shrink:0; }
.bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }

/* ── CLOSED CARDS ── */
.closed-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
.closed-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:border-color .2s, transform .2s;
  cursor:pointer;
  text-decoration:none;
}
.closed-card:hover { border-color:var(--border2); transform:translateY(-1px); }
.closed-card .left .ticker { font-family:var(--mono); font-size:14px; font-weight:600; color:var(--text-bright); }
.closed-card .left .name { font-size:11px; color:var(--text-dim); margin-top:3px; }
.closed-card .right { font-family:var(--mono); font-size:17px; font-weight:600; flex-shrink:0; margin-left:12px; }


/* --- _components.css ----------------------------------------- */
/* ── _components.css — Buttons, modal, forms, alerts, footer ──
   Estratto da alphadesk.css (linee 691-879)
──────────────────────────────────────────────────────────── */

/* ── BUTTONS ── */
.btn-icon {
  background:none;
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:var(--mono);
  font-size:11px;
  padding:7px 13px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:all .2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:4px;
  min-height:34px;
}
.btn-icon:hover { border-color:var(--accent); color:var(--accent2); background:var(--accent-dim); }
.btn-icon.danger:hover { border-color:var(--red); color:var(--red); background:var(--red-dim); }
/* Bottone azione quadrato — dimensione fissa per colonne tabella stabili */
.btn-icon.btn-sq { padding:5px; width:28px; min-height:28px; margin-left:3px; }
.btn-icon.btn-sq.invis { visibility:hidden; pointer-events:none; }

.btn {
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:13px 26px;
  border-radius:var(--radius);
  cursor:pointer;
  border:none;
  transition:all .2s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
}
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 14px var(--accent-glow); }
.btn-primary:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow); }
.btn-secondary { background:var(--bg3); border:1px solid var(--border); color:var(--text); }
.btn-secondary:hover { border-color:var(--border2); color:var(--text-bright); }
.btn-danger { background:none; border:1px solid var(--red); color:var(--red); }
.btn-danger:hover { background:var(--red-dim); }
.btn-success { background:var(--green); color:#000; font-weight:700; box-shadow:0 4px 14px var(--green-glow); }
.btn-success:hover { opacity:.9; transform:translateY(-1px); }
.btn-row { display:flex; gap:12px; justify-content:flex-end; margin-top:28px; flex-wrap:wrap; }

/* ── MODAL ── */
.modal-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:#00000088;
  backdrop-filter:blur(6px);
  z-index:1000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-overlay.show { display:flex; }
.modal-box {
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  max-width:440px;
  width:100%;
  box-shadow:0 20px 60px #000000aa;
  animation:fadeUp .25s ease;
}
.modal-title { font-family:var(--sans); font-size:16px; font-weight:700; color:var(--text-white); margin-bottom:10px; }
.modal-text { font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-bottom:28px; line-height:1.8; }
.modal-btns { display:flex; gap:12px; justify-content:flex-end; }

/* ── FORMS ── */
.form-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  max-width:740px;
  margin:0 auto;
  box-shadow:var(--shadow-card);
}
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group.full { grid-column:1/-1; }
label {
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-dim);
}
input, select, textarea {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-bright);
  font-family:var(--mono);
  font-size:14px;
  padding:12px 16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  width:100%;
  min-height:46px;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
select option { background:var(--bg3); color:var(--text-bright); }
::placeholder { color:var(--text-dim); opacity:.7; }

.tipo-toggle { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.tipo-toggle input[type=radio] { display:none; }
.tipo-toggle label {
  text-align:center;
  padding:14px;
  cursor:pointer;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  background:var(--bg3);
  color:var(--text-dim);
  transition:all .2s;
  width:auto;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.tipo-toggle input[value=ACQUISTO]:checked + label {
  background:var(--green-dim);
  color:var(--green);
  box-shadow:inset 0 0 20px var(--green-dim);
}
.tipo-toggle input[value=VENDITA]:checked + label {
  background:var(--red-dim);
  color:var(--red);
  box-shadow:inset 0 0 20px var(--red-dim);
}

.preview-box {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 20px;
  font-family:var(--mono);
  font-size:13px;
}
.preview-row { display:flex; justify-content:space-between; margin-bottom:10px; color:var(--text-dim); gap:8px; }
.preview-row:last-child { margin-bottom:0; border-top:1px solid var(--border); padding-top:10px; color:var(--text-bright); font-weight:600; }
.preview-row span:last-child { color:var(--text-bright); text-align:right; }

/* ── ALERTS ── */
.alert {
  padding:13px 18px; border-radius:10px; font-family:var(--mono);
  font-size:12px; margin-bottom:20px; line-height:1.6;
  display:flex; align-items:center; gap:10px;
  animation:toastIn .25s cubic-bezier(.34,1.56,.64,1) forwards;
}
.alert-success { background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.25); color:var(--green); }
.alert-error   { background:rgba(244,63,94,.1);  border:1px solid rgba(244,63,94,.25);  color:var(--red); }
.alert-warning { background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.25); color:var(--yellow); }
.alert-info    { background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25); color:var(--accent2); }

/* ── FOOTER ── */
.footer {
  text-align:center;
  padding:24px 16px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  color:var(--text-dim);
  border-top:1px solid var(--border);
  margin-top:20px;
  line-height:1.8;
}


/* --- _features.css ----------------------------------------- */
/* ── _features.css — Info box, sizing, auth, pin, settings, screener, scan, tabs, responsive ──
   Estratto da alphadesk.css (linee 880-1382)
────────────────────────────────────────────────────────────────────────────────────────── */

/* ── INFO BOX STRUMENTO ── */
.tool-info-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--text-dim);
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:5px 12px;
  cursor:pointer;
  transition:all .2s;
  text-transform:uppercase;
  flex-shrink:0;
}
.tool-info-btn:hover { border-color:var(--accent); color:var(--accent2); }
.tool-info-btn .info-dot {
  width:6px; height:6px;
  background:var(--accent);
  border-radius:50%;
  flex-shrink:0;
}
.tool-info-panel {
  display:none;
  background:var(--bg2);
  border:1px solid var(--accent-dim);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:20px 24px;
  margin-bottom:24px;
  animation:fadeUp .25s ease;
}
.tool-info-panel.open { display:block; }
.tool-info-title {
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  color:var(--text-white);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.tool-info-body {
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-dim);
  line-height:2;
}
.tool-info-body b { color:var(--accent2); }
.tool-info-body .formula {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  margin:10px 0;
  font-size:13px;
  color:var(--text-bright);
  letter-spacing:.5px;
}
.tool-info-body .tip {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:6px;
  color:var(--text);
}
.tool-info-body .tip::before { content:'→'; color:var(--accent); flex-shrink:0; }

/* ── POSITION SIZING ── */
.sizing-result {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  margin-top:24px;
  display:none;
}
.sizing-result.show { display:block; }
.sizing-result-main {
  text-align:center;
  padding:24px 0 20px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.sizing-result-label {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:8px;
}
.sizing-result-value {
  font-family:var(--mono);
  font-size:48px;
  font-weight:700;
  color:var(--text-white);
  letter-spacing:-2px;
  line-height:1;
  margin-bottom:6px;
}
.sizing-result-sub {
  font-family:var(--mono);
  font-size:13px;
  color:var(--text-dim);
}
.sizing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.sizing-stat {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  text-align:center;
}
.sizing-stat-label { font-family:var(--mono); font-size:11px; letter-spacing:1.0px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.sizing-stat-value { font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text-white); }
.sizing-warning { background:var(--yellow-dim); border:1px solid #fbbf2430; border-radius:var(--radius); padding:12px 16px; font-family:var(--mono); font-size:11px; color:var(--yellow); margin-top:16px; line-height:1.7; display:none; }
.sizing-warning.show { display:block; }
.risk-meter { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-top:8px; }
.risk-meter-fill { height:100%; border-radius:3px; transition:width .5s ease, background .5s ease; }
@media(max-width:640px){ .sizing-grid { grid-template-columns:repeat(2,1fr) !important; } }

/* ── AUTH PAGE ── */
.auth-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  padding:16px;
}
.auth-page::before {
  content:'';
  position:fixed;
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, #6366f10a 0%, transparent 70%);
  pointer-events:none;
}
.auth-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:44px 36px;
  max-width:400px;
  width:100%;
  box-shadow:0 0 60px #6366f115, 0 20px 60px #00000060;
  position:relative;
}
.auth-logo {
  font-family:var(--sans);
  font-size:26px;
  font-weight:800;
  letter-spacing:4px;
  color:var(--text-white);
  margin-bottom:4px;
  text-align:center;
}
.auth-logo span { color:var(--green); }
.auth-subtitle {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:3px;
  color:var(--text);              /* AD-013 a11y: era --text-dim (~2.1:1) → ~6.4:1 */
  margin-bottom:36px;
  text-transform:uppercase;
  text-align:center;
}
.auth-form-group { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.auth-form-group label { font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-bright); } /* AD-013 a11y: era --text-dim */
.auth-form-group input {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text-bright);
  font-family:var(--mono);
  font-size:15px;
  padding:14px 16px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
  width:100%;
  min-height:50px;
}
.auth-form-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.auth-form-group input::placeholder { color:var(--text); opacity:1; } /* AD-013 a11y: placeholder leggibile (no opacity di default) */
.auth-btn {
  width:100%;
  background:var(--accent);
  color:#fff;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:15px;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  margin-top:8px;
  transition:all .2s;
  min-height:50px;
  box-shadow:0 4px 14px var(--accent-glow);
}
.auth-btn:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 6px 20px var(--accent-glow); }
.auth-error { background:var(--red-dim); border:1px solid #f43f5e35; color:var(--red); font-family:var(--mono); font-size:11px; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; text-align:center; line-height:1.6; }
.auth-warning { background:var(--yellow-dim); border:1px solid #fbbf2435; color:var(--yellow); font-family:var(--mono); font-size:11px; padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:16px; text-align:center; line-height:1.6; }
.auth-step { font-family:var(--mono); font-size:10px; color:var(--text); text-align:center; margin-bottom:20px; letter-spacing:1px; } /* AD-013 a11y: era --text-dim */
.auth-step span { color:var(--link); } /* AD-013 a11y: token link mode-safe (era --accent2: KO in light) */

/* ── AD-013 a11y — link e focus settore auth (login/register/forgot/reset/pin) ── */
.auth-alt { text-align:center; margin-top:14px; font-family:var(--mono); font-size:11px; }
.auth-alt a { color:var(--link); text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 12px; } /* dark ~5.5:1 · light ~6.3:1 · tap target >=44px (AD-013 mobile) */
.auth-alt a:hover { color:var(--link-hover); text-decoration:underline; }
.auth-alt a:focus-visible,
.auth-btn:focus-visible { outline:2px solid var(--accent2); outline-offset:2px; border-radius:var(--radius-sm); }

/* ── PIN SCREEN ── */
.pin-dots { display:flex; gap:14px; justify-content:center; margin-bottom:32px; }
.pin-dot {
  width:14px; height:14px;
  border-radius:50%;
  border:2px solid var(--border2);
  background:transparent;
  transition:all .15s;
}
.pin-dot.filled { background:var(--accent); border-color:var(--accent); box-shadow:0 0 8px var(--accent-glow); }
.pin-dot.error { background:var(--red); border-color:var(--red); animation:shake .3s ease; box-shadow:0 0 8px var(--red-glow); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.pin-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.pin-btn {
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-white);
  font-family:var(--sans);
  font-size:24px;
  font-weight:700;
  padding:18px 8px;
  cursor:pointer;
  transition:all .12s;
  user-select:none;
  min-height:64px;
}
.pin-btn:hover { background:var(--bg4); border-color:var(--border2); }
.pin-btn:active { transform:scale(.93); background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
.pin-btn.zero { grid-column:2; }
.pin-btn.del { background:none; border-color:transparent; color:var(--text-dim); font-size:20px; }
.pin-btn.del:hover { color:var(--red); }

/* ── SECURITY & SETTINGS ── */
.security-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:28px; }
.security-card {
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-card);
}
.security-card-title {
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:22px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
}
.log-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--border); gap:8px; }
.log-row:last-child { border-bottom:none; }
.log-ip { font-family:var(--mono); font-size:12px; color:var(--text-bright); }
.log-time { font-family:var(--mono); font-size:10px; color:var(--text-dim); }
.log-badge { font-family:var(--mono); font-size:9px; padding:3px 9px; border-radius:20px; letter-spacing:1px; font-weight:600; }
.log-badge.ok { background:var(--green-dim); color:var(--green); border:1px solid #00e5a025; }
.log-badge.fail { background:var(--red-dim); color:var(--red); border:1px solid #f43f5e25; }

/* Settings toggle */
.setting-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  gap:12px;
}
.setting-row:last-child { border-bottom:none; }
.setting-info .setting-name { font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text-bright); margin-bottom:3px; }
.setting-info .setting-desc { font-family:var(--mono); font-size:11px; color:var(--text-dim); }
/* Toggle switch */
.toggle-sw { position:relative; width:46px; height:26px; flex-shrink:0; }
.toggle-sw input { opacity:0; width:0; height:0; position:absolute; }
.toggle-slider {
  position:absolute;
  inset:0;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:20px;
  cursor:pointer;
  transition:all .25s;
}
.toggle-slider::before {
  content:'';
  position:absolute;
  width:18px; height:18px;
  left:3px; top:50%;
  transform:translateY(-50%);
  background:var(--text-dim);
  border-radius:50%;
  transition:all .25s;
}
.toggle-sw input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle-sw input:checked + .toggle-slider::before { transform:translate(20px,-50%); background:#fff; box-shadow:0 0 8px var(--accent-glow); }

/* ── SCREENER ── */
.screener-input-row { display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.screener-input-row input { flex:1; min-width:200px; }
.screener-results { display:flex; flex-direction:column; gap:20px; }
.screener-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); }
.screener-card-header { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap; gap:8px; }
.screener-ticker { font-family:var(--mono); font-size:20px; font-weight:600; color:var(--text-white); letter-spacing:-1px; }
.screener-name { font-family:var(--sans); font-size:12px; color:var(--text-dim); margin-top:2px; }
.screener-score-big { font-family:var(--mono); font-size:30px; font-weight:600; }
.screener-score-label { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--text-dim); text-align:right; }
.screener-badge { font-family:var(--sans); font-size:11px; font-weight:700; padding:5px 14px; border-radius:20px; letter-spacing:1px; text-transform:uppercase; }
.badge-buy { background:var(--green-dim); border:1px solid #00e5a030; color:var(--green); }
.badge-neutral { background:var(--yellow-dim); border:1px solid #fbbf2430; color:var(--yellow); }
.badge-avoid { background:var(--red-dim); border:1px solid #f43f5e30; color:var(--red); }
.screener-body { padding:22px; }
.criteria-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:22px; }
.criteria-item { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px; }
.criteria-name { font-family:var(--mono); font-size:8px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.criteria-score { font-family:var(--mono); font-size:20px; font-weight:600; color:var(--text-white); margin-bottom:6px; }
.criteria-bar-bg { height:3px; background:var(--bg); border-radius:2px; overflow:hidden; }
.criteria-bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }
.criteria-value { font-family:var(--mono); font-size:10px; color:var(--text-dim); margin-top:6px; }
.screener-report { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:18px; font-size:14px; line-height:1.8; color:var(--text); }
.screener-loading { text-align:center; padding:48px; font-family:var(--mono); font-size:12px; color:var(--text-dim); }
.screener-loading .spinner { width:28px; height:28px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin:0 auto 16px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── SCAN CARD ── */
.scan-drop { border:2px dashed var(--border2); border-radius:var(--radius-lg); padding:48px 24px; text-align:center; cursor:pointer; transition:all .2s; background:var(--bg3); }
.scan-drop:hover, .scan-drop.dragover { border-color:var(--accent); background:var(--accent-dim); }
.scan-drop .drop-icon { font-size:48px; margin-bottom:14px; }
.scan-drop p { font-family:var(--mono); font-size:12px; color:var(--text-dim); margin-top:6px; }
.scan-drop strong { color:var(--accent2); }
#scanFileInput { display:none; }
.scan-result { background:var(--bg2); border:1px solid var(--green); border-radius:var(--radius-lg); padding:26px; margin-top:22px; display:none; box-shadow:0 0 20px var(--green-glow); }
.scan-result .result-title { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--green); margin-bottom:16px; }
.scan-loading { display:none; text-align:center; padding:48px; }
.scan-loading .spinner { width:40px; height:40px; border:3px solid var(--border); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 16px; }

/* ── TABS ── */
.tab-bar { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:26px; }
.tab-btn {
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:12px 20px;
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--text-dim);
  cursor:pointer;
  transition:all .2s;
  margin-bottom:-1px;
}
.tab-btn.active { color:var(--accent2); border-bottom-color:var(--accent); }
.tab-btn:hover:not(.active) { color:var(--text-bright); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ═══════════════════════════════════════════════════
   SISTEMA RESPONSIVE DEFINITIVO
   REGOLA: usa SEMPRE queste classi, MAI stili grid inline.
═══════════════════════════════════════════════════ */

/* Grid 5 colonne → 3 tablet → 2 mobile */
.posizione-metrics {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-bottom:28px;
}

/* Split 2 colonne → 1 mobile */
.analisi-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.analisi-split > div:first-child {
  border-right:1px solid var(--border);
}

/* Livelli segnali: 4 colonne → 2 mobile */
.segnale-livelli {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-bottom:1px solid var(--border);
}

/* Criteria screener: 5 → 3 tablet → 2 mobile */
.criteria-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:22px;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE TABLET ≤1024px
══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .nav { display:none !important; }
  .hamburger { display:flex !important; }
  .update-time { display:none; }
  .container { padding:20px 16px; }
  .metrics-grid { grid-template-columns:repeat(2,1fr) !important; gap:12px; }
  .metric-value { font-size:clamp(18px,4vw,26px); }
  .closed-grid { grid-template-columns:repeat(2,1fr); }
  .security-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .form-group.full { grid-column:1; }
  .criteria-grid { grid-template-columns:repeat(3,1fr) !important; }
  .posizione-metrics { grid-template-columns:repeat(3,1fr) !important; }
  .analisi-split { grid-template-columns:1fr !important; }
  .analisi-split > div:first-child { border-right:none !important; border-bottom:1px solid var(--border); }
  .segnale-livelli { grid-template-columns:repeat(2,1fr) !important; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE MOBILE ≤640px
══════════════════════════════════════════════════ */
@media(max-width:640px){
  .bottom-nav { display:flex !important; }
  .header-right .live-badge { display:none; }
  .header-right .search-trigger { display:none; }
  .nav { display:none !important; }
  header { padding:0 14px; height:54px; }
  .logo { font-size:17px; letter-spacing:2px; }
  body { padding-bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)); }
  .container { padding:14px 12px; }

  /* Cards */
  .metrics-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px; }
  .metric-card { padding:14px 16px; border-radius:var(--radius); }
  .metric-value { font-size:clamp(15px,5vw,20px); letter-spacing:0; }
  .metric-label { font-size:8px; }
  .metric-sub { font-size:10px; }

  /* Trade chiusi */
  .closed-grid { grid-template-columns:1fr; }

  /* Tutte le griglie */
  .criteria-grid { grid-template-columns:repeat(2,1fr) !important; }
  .posizione-metrics { grid-template-columns:repeat(2,1fr) !important; }
  .segnale-livelli { grid-template-columns:repeat(2,1fr) !important; }
  .analisi-split { grid-template-columns:1fr !important; }
  .analisi-split > div:first-child { border-right:none !important; border-bottom:1px solid var(--border); }
  .security-grid { grid-template-columns:1fr !important; }
  .criteria-score { font-size:17px; }

  /* Bottoni */
  .btn-row { flex-direction:column; }
  .btn-row .btn { width:100%; }

  /* Form */
  .form-card { padding:18px 14px; border-radius:var(--radius); }
  .auth-card { padding:30px 20px; }

  /* Tabelle */
  td { font-size:12px; padding:12px 10px; }
  th { font-size:8px; padding:10px 10px; }

  /* Screener */
  .screener-input-row { flex-direction:column; }
  .screener-card-header { flex-direction:column; align-items:flex-start; }

  /* Log */
  .log-row { flex-wrap:wrap; gap:6px; }

  /* Testo */
  .footer { font-size:9px; padding:16px 12px; }
  .section-title { font-size:10px; }
  .ticker-badge { font-size:11px; padding:3px 8px; }
  .denom { font-size:10px; max-width:110px; }
}


/* --- _ticker.css ----------------------------------------- */
/* ── _ticker.css — Ticker tape, heatmap portafoglio, nav dropdown ──
   Estratto da alphadesk.css (linee 1383-1537)
────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════
   TICKER TAPE — v36
   Indici globali + portafoglio personale
══════════════════════════════════════════════════ */
.ticker-tape {
  width:100%;
  height:34px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  position:sticky;
  top:var(--header-h);
  z-index:290;
  display:flex;
  align-items:center;
}
.ticker-tape-inner {
  display:flex;
  align-items:center;
  gap:0;
  white-space:nowrap;
  animation:tape-scroll 45s linear infinite;
  will-change:transform;
}
.ticker-tape:hover .ticker-tape-inner { animation-play-state:paused; }
@keyframes tape-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
.tape-item {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 18px;
  border-right:1px solid var(--border);
  height:34px;
  cursor:default;
}
/* Indici globali: label più prominente */
.tape-item.tape-index { padding:0 20px; }
.tape-item.tape-index .tape-ticker {
  color:var(--text-dim);
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
/* Separatore tra indici e portafoglio */
.tape-sep {
  display:inline-flex;
  align-items:center;
  padding:0 14px;
  height:34px;
  border-right:1px solid var(--border);
}
.tape-sep-line {
  width:1px;
  height:18px;
  background:var(--border2);
}
.tape-sep-label {
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:2px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-left:10px;
}
.tape-ticker {
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--text-bright);
}
.tape-price {
  font-family:var(--mono);
  font-size:10px;
  color:var(--text);
}
.tape-chg {
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  padding:2px 6px;
  border-radius:3px;
}
.tape-chg.up   { color:var(--green); background:var(--green-dim); }
.tape-chg.down { color:var(--red);   background:var(--red-dim); }
.tape-chg.flat { color:var(--text-dim); }
@media(max-width:640px){
  .ticker-tape { display:flex; height:28px; }
  .ticker-tape-inner { animation-duration: 25s; }
  .tape-item { padding:0 12px; gap:5px; height:28px; }
  .tape-item.tape-index { padding:0 12px; }
  .tape-ticker { font-size:9px; letter-spacing:.5px; }
  .tape-price  { font-size:9px; }
  .tape-chg    { font-size:8px; padding:1px 4px; }
  .tape-sep    { padding:0 8px; height:28px; }
  .tape-sep-label { font-size:7px; }
}

/* ══════════════════════════════════════════════════
   HEATMAP PORTAFOGLIO — v42.13.0
══════════════════════════════════════════════════ */
.heatmap-wrap{background:#0d1117;border:1px solid rgba(255,255,255,0.07);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:28px;box-shadow:0 4px 24px rgba(0,0,0,.45);}
.heatmap-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.heatmap-legend{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.5px;color:rgba(255,255,255,0.35);}
.heatmap-legend-bar{width:96px;height:5px;border-radius:4px;background:linear-gradient(to right,#881337,#4b1c2d,#1e2030,#0d4f38,#065f46);}
#heatmapCanvas{width:100%;border-radius:8px;cursor:pointer;display:block;}
.heatmap-tooltip{position:fixed;background:rgba(7,9,15,.97);border:1px solid rgba(99,102,241,.4);border-radius:10px;padding:13px 16px;font-family:var(--mono);font-size:11px;color:var(--text);pointer-events:none;z-index:9999;min-width:190px;box-shadow:0 12px 40px rgba(0,0,0,.6);display:none;backdrop-filter:blur(4px);}
.heatmap-tooltip b{color:var(--text-bright);font-size:13px;display:block;margin-bottom:4px;}
.heatmap-tooltip .tt-row{display:flex;justify-content:space-between;gap:16px;margin-top:3px;font-size:10px;color:var(--text-dim);}
.heatmap-tooltip .tt-val{font-weight:700;}
.hm-group{display:flex;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;padding:3px;}
.hm-btn{font-family:var(--mono);font-size:10px;letter-spacing:.5px;padding:5px 13px;border-radius:16px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .18s;font-weight:600;}
.hm-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.35);}
.hm-btn:hover:not(.active){background:var(--bg2);color:var(--text-bright);}
.hm-icon-btn{font-family:var(--mono);font-size:13px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .18s;}
.hm-icon-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.35);}
.hm-icon-btn:hover:not(.active){background:var(--bg3);color:var(--text-bright);}
.hm-btn.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent2);}

/* ══════════════════════════════════════════════════
   NAV DROPDOWN — v42.0.0
   5 macro-categorie con sottomenu hover
══════════════════════════════════════════════════ */
.nav-group{position:relative;display:inline-flex;align-items:center;}
.nav-group-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;
  color:var(--text-dim);text-decoration:none;border-radius:var(--radius-sm);
  transition:color .15s,background .15s;cursor:pointer;background:none;border:none;
  white-space:nowrap;}
.nav-group-btn:hover,.nav-group-btn.active{color:var(--text-bright);background:var(--bg3);}
.nav-group-btn.active{color:var(--accent2);}
.nav-arrow{font-size:7px;opacity:.5;transition:transform .2s;}
.nav-group:hover .nav-arrow{transform:rotate(180deg);}
.nav-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,.4);padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:600;}
.nav-group:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.nav-dropdown a{display:flex;align-items:center;gap:10px;padding:8px 12px;
  font-family:var(--mono);font-size:11px;color:var(--text-dim);text-decoration:none;
  border-radius:var(--radius-sm);transition:background .12s,color .12s;white-space:nowrap;}
.nav-dropdown a:hover{background:var(--bg3);color:var(--text-bright);}
.nav-dropdown a.active{color:var(--accent2);background:var(--accent-dim);}
.nav-dropdown .dd-ico{font-size:13px;width:18px;text-align:center;flex-shrink:0;}
.nav-dropdown .dd-sep{height:1px;background:var(--border);margin:4px 6px;}
.nav-dropdown .dd-lbl{padding:8px 12px 2px;font-family:var(--mono);font-size:8px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);opacity:.55;}
/* Drawer mobile sezioni */
.drawer-sec{padding:10px 16px 3px;font-family:var(--mono);font-size:8px;
  letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);opacity:.5;}


/* --- _search.css ----------------------------------------- */
/* ── _search.css — Ricerca globale (command palette) + Broker autocomplete ──
   Estratto da alphadesk.css (linee 1538-1688)
   NOTA: il broker widget (.bk-*) è dentro @media(max-width:640px) — comportamento
   preservato dall'originale.
─────────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════
   RICERCA GLOBALE — v42.10.1
   Command palette stile Spotlight
══════════════════════════════════════════════════ */
.search-trigger{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--mono);font-size:11px;
  color:var(--text-dim);
  cursor:pointer;transition:all .2s;
  white-space:nowrap;
  min-width:160px;
}
.search-trigger:hover{border-color:var(--border2);color:var(--text-bright);}
.search-trigger .s-ico{font-size:12px;}
.search-trigger .s-hint{
  margin-left:auto;
  font-size:9px;
  padding:1px 5px;
  background:var(--bg4);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text-dim);
  letter-spacing:.5px;
}
/* Overlay */
.search-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(4px);
  z-index:9000;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:80px;
  opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s;
}
.search-overlay.open{opacity:1;visibility:visible;}
/* Palette */
.search-palette{
  width:100%;max-width:580px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  overflow:hidden;
}
.search-input-wrap{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
}
.search-input-wrap .s-ico{font-size:16px;color:var(--text-dim);}
#globalSearchInput{
  flex:1;background:none;border:none;outline:none;
  font-family:var(--mono);font-size:14px;
  color:var(--text-white);
}
#globalSearchInput::placeholder{color:var(--text-dim);}
.search-esc{
  font-family:var(--mono);font-size:9px;padding:2px 6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:3px;color:var(--text-dim);cursor:pointer;
}
/* Risultati */
.search-results{max-height:380px;overflow-y:auto;padding:6px;}
.search-section-label{
  padding:8px 12px 3px;
  font-family:var(--mono);font-size:8px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-dim);opacity:.6;
}
.search-item{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .1s;
  text-decoration:none;color:var(--text);
}
.search-item:hover,.search-item.sel{
  background:var(--accent-dim);
}
.search-item.sel .search-item-label{color:var(--accent2);}
.search-item-ico{
  font-size:10px;font-weight:700;font-family:var(--mono);letter-spacing:.5px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;flex-shrink:0;text-transform:uppercase;
}
.search-item-ico.t-pagina { background:rgba(99,102,241,.15); color:#818cf8; border:1px solid rgba(99,102,241,.2); }
.search-item-ico.t-azione { background:rgba(0,229,160,.12);  color:#00e5a0; border:1px solid rgba(0,229,160,.2); }
.search-item-ico.t-ticker { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.search-item-label{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--text-bright);flex:1;
}
.search-item-desc{
  font-family:var(--mono);font-size:10px;color:var(--text-dim);
}
.search-item-cat{
  font-family:var(--mono);font-size:9px;padding:1px 6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:3px;color:var(--text-dim);flex-shrink:0;
}
.search-empty{
  padding:32px 20px;text-align:center;
  font-family:var(--mono);font-size:12px;color:var(--text-dim);
}
.search-footer{
  padding:8px 16px;border-top:1px solid var(--border);
  display:flex;gap:16px;
  font-family:var(--mono);font-size:9px;color:var(--text-dim);
}
.search-footer span{display:flex;align-items:center;gap:4px;}
.search-footer kbd{
  padding:1px 5px;background:var(--bg3);border:1px solid var(--border);
  border-radius:3px;font-family:var(--mono);font-size:9px;
}
@media(max-width:640px){
  .search-trigger .s-hint{display:none;}
  .search-trigger{min-width:auto;padding:5px 8px;}
  .search-overlay{padding-top:20px;align-items:flex-start;}
  .search-palette{border-radius:0 0 var(--radius-lg) var(--radius-lg);}

/* ── Broker Autocomplete Widget v42.10.1 ─────────────────────────── */
.bk-wrap{position:relative;width:100%;}
.bk-input{width:100%;font-family:var(--mono);font-size:12px;padding:8px 12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg3);color:var(--text-bright);outline:none;
  transition:border-color .18s;box-sizing:border-box;}
.bk-input:focus{border-color:var(--accent);}
.bk-input::placeholder{color:var(--text-dim);}
.bk-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);
  z-index:9999;max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.4);
  display:none;}
.bk-dropdown.open{display:block;}
.bk-item{padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:10px;
  transition:background .1s;min-height:36px;}
.bk-abi,.bk-abi-empty{flex-shrink:0;width:54px;}
.bk-item:hover,.bk-item.bk-sel{background:var(--bg3);}
.bk-abi{font-family:var(--mono);font-size:10px;font-weight:700;
  color:var(--accent2);background:var(--accent-dim);padding:2px 6px;
  border-radius:4px;min-width:50px;text-align:center;flex-shrink:0;}
.bk-abi-empty{min-width:50px;flex-shrink:0;}
.bk-name{font-family:var(--mono);font-size:12px;color:var(--text-bright);}
.bk-hl{color:var(--accent);}
}


/* --- _widgets.css ----------------------------------------- */
/* ── _widgets.css — AI Guide Drawer, Calendar Mini Widget ──
   Estratto da alphadesk.css (linee 1689-1782)
─────────────────────────────────────────────────────── */

/* ── AI GUIDE DRAWER — v42.11.0 ──────────────────────────────────── */
.ai-guide-btn{position:absolute;top:10px;right:10px;background:none;border:none;
  cursor:pointer;padding:5px;color:var(--text-dim);opacity:.55;transition:opacity .2s,color .2s,background .2s;
  border-radius:6px;line-height:1;z-index:2;}
.ai-guide-btn:hover{opacity:1;color:var(--accent2);background:var(--accent-dim);}
.aig-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;
  opacity:0;pointer-events:none;transition:opacity .25s;}
.aig-overlay.open{opacity:1;pointer-events:all;}
.aig-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100vw;
  background:var(--bg2);border-left:1px solid var(--border);z-index:901;
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:-8px 0 40px rgba(0,0,0,.5);}
.aig-drawer.open{transform:translateX(0);}
.aig-header{padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;}
.aig-header-info{flex:1;}
.aig-title{font-family:var(--mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim);}
.aig-section-label{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent2);margin-top:3px;}
.aig-close{background:none;border:none;cursor:pointer;color:var(--text-dim);
  padding:6px 8px;border-radius:6px;font-size:14px;transition:color .2s,background .2s;}
.aig-close:hover{color:var(--text-bright);background:var(--bg3);}
.aig-messages{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
.aig-msg-ai{font-family:var(--mono);font-size:12px;color:var(--text);line-height:1.85;
  background:var(--bg3);border-radius:10px 10px 10px 2px;padding:14px 16px;
  border:1px solid var(--border);white-space:pre-wrap;}
.aig-msg-user{font-family:var(--mono);font-size:12px;color:var(--text-bright);
  background:var(--accent-dim);border-radius:10px 10px 2px 10px;padding:10px 14px;
  border:1px solid var(--accent);align-self:flex-end;max-width:88%;word-break:break-word;}
.aig-cursor{display:inline-block;width:2px;height:13px;background:var(--accent2);
  animation:aigBlink 1s step-end infinite;vertical-align:text-bottom;margin-left:1px;}
@keyframes aigBlink{50%{opacity:0;}}
.aig-loading{display:flex;gap:5px;padding:14px 16px;align-items:center;}
.aig-dot{width:6px;height:6px;border-radius:50%;background:var(--accent2);
  animation:aigDot 1.2s ease-in-out infinite;}
.aig-dot:nth-child(2){animation-delay:.2s;}
.aig-dot:nth-child(3){animation-delay:.4s;}
@keyframes aigDot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-6px);opacity:1;}}
.aig-input-wrap{padding:14px 18px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:flex-end;}
.aig-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  padding:10px 13px;font-family:var(--mono);font-size:12px;color:var(--text-bright);
  outline:none;transition:border-color .2s;resize:none;min-height:40px;max-height:120px;line-height:1.5;}
.aig-input:focus{border-color:var(--accent);}
.aig-input::placeholder{color:var(--text-dim);}
.aig-send{background:var(--accent-dim);border:1px solid var(--accent);border-radius:8px;
  padding:0 14px;cursor:pointer;color:var(--accent2);font-size:18px;transition:all .2s;
  flex-shrink:0;height:40px;display:flex;align-items:center;justify-content:center;}
.aig-send:hover{background:var(--accent);color:#fff;}
.aig-send:disabled{opacity:.35;cursor:not-allowed;}
@media(max-width:768px){.aig-drawer{width:100vw;}}

/* ── Calendar Mini Widget — v43.0.114 ─────────────────────────────────────── */
.cal-mini{margin-bottom:18px;border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg2);overflow:hidden;}
.cal-mini-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px;background:var(--bg3);border-bottom:1px solid var(--border);}
.cal-mini-title{font-family:var(--mono);font-size:10px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--text-bright);font-weight:700;
  display:flex;align-items:center;gap:8px;}
.cal-mini-link{font-family:var(--mono);font-size:10px;color:var(--accent2);
  text-decoration:none;letter-spacing:.5px;display:flex;align-items:center;gap:4px;
  transition:color .15s;}
.cal-mini-link:hover{color:var(--accent);}
.cal-mini-body{display:flex;flex-wrap:wrap;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cal-mini-body::-webkit-scrollbar{height:3px;}
.cal-mini-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.cal-mini-item{flex:1;min-width:180px;padding:11px 16px;
  border-right:1px solid var(--border);border-bottom:none;
  display:flex;flex-direction:column;gap:3px;transition:background .12s;cursor:default;}
.cal-mini-item:last-child{border-right:none;}
.cal-mini-item:hover{background:var(--bg-hover);}
.cal-mini-item.cm-today{border-top:2px solid var(--accent2);}
.cal-mini-item.cm-ptf{border-top:2px solid var(--green);}
.cal-mini-top{display:flex;align-items:center;gap:5px;margin-bottom:2px;}
.cal-mini-flag{font-size:12px;line-height:1;}
.cal-mini-imp{font-size:11px;line-height:1;}
.cal-mini-date{font-family:var(--mono);font-size:9px;color:var(--text-dim);letter-spacing:.8px;}
.cal-mini-ora{font-family:var(--mono);font-size:9px;color:var(--text-dim);}
.cal-mini-name{font-family:var(--sans);font-size:11px;color:var(--text-bright);
  font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-mini-badge{display:inline-flex;align-items:center;font-family:var(--mono);
  font-size:9px;letter-spacing:.8px;padding:1px 5px;border-radius:3px;font-weight:600;
  text-transform:uppercase;}
.cal-mini-badge.imp-high{background:var(--red-dim);color:var(--red);}
.cal-mini-badge.imp-medium{background:var(--yellow-dim);color:var(--yellow);}
.cal-mini-badge.imp-low{background:var(--blue-dim);color:var(--blue);}
.cal-mini-badge.imp-earnings{background:var(--green-dim);color:var(--green);}
.cal-mini-empty{padding:14px 18px;font-family:var(--mono);font-size:11px;
  color:var(--text-dim);text-align:center;}
@media(max-width:720px){
  .cal-mini-body{flex-wrap:nowrap;}
  .cal-mini-item{min-width:160px;padding:10px 12px;}
}


/* --- _alphabot.css ----------------------------------------- */
/* ── _alphabot.css — AlphaBot Widget (avatar floating + pannello chat) ──
   Estratto da alphadesk.css (linee 1783-1953)
────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   ALPHABOT WIDGET — v43.0.118
   Avatar floating + pannello chat globale in tutte le pagine.
   ═══════════════════════════════════════════════════════════ */

#ab-root{position:fixed;bottom:24px;right:24px;z-index:9000;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  font-family:inherit;font-size:13px;
  /* Il contenitore è grande quanto il pannello anche da chiuso (il pannello
     è solo opacity:0): senza click-through ingoiava i click/tap della pagina
     sottostante su viewport mobile. Il contenitore NON intercetta mai il
     puntatore; lo riattivano i soli figli interattivi (#ab-avatar sempre,
     #ab-panel.open quando aperto). */
  pointer-events:none;}
#ab-root,#ab-root *{box-sizing:border-box;}

/* Colori per stato */
#ab-root{--ab-c:#4B6BFF;}
#ab-root[data-state="standby"] {--ab-c:#4B6BFF;}
#ab-root[data-state="thinking"]{--ab-c:#A78BFA;}
#ab-root[data-state="speaking"]{--ab-c:#10B981;}
#ab-root[data-state="alert"]   {--ab-c:#F59E0B;}
#ab-root[data-state="risk"]    {--ab-c:#EF4444;}
#ab-root[data-state="educator"]{--ab-c:#06B6D4;}
#ab-root[data-state="calendar"]{--ab-c:#8B5CF6;}
#ab-root[data-state="coach"]   {--ab-c:#F97316;}
#ab-root[data-state="offline"]   {--ab-c:#4B5563;}
#ab-root[data-state="listening"] {--ab-c:#22C55E;}
#ab-root[data-state="listening"] .ab-pulse-ring{animation:abPulse .65s ease-in-out infinite;}
#ab-root[data-conv="true"] #ab-avatar{box-shadow:0 0 22px 5px color-mix(in srgb,var(--ab-c) 50%,transparent);}
@keyframes abWave{0%,100%{transform:scaleY(.5);opacity:.4;}50%{transform:scaleY(1.3);opacity:1;}}
.ab-wave-bars{display:none;gap:3px;align-items:center;height:20px;}
.ab-wave-bars span{width:3px;border-radius:2px;background:var(--ab-c);}
.ab-wave-bars span:nth-child(1){animation:abWave .9s ease-in-out infinite;}
.ab-wave-bars span:nth-child(2){animation:abWave .9s .15s ease-in-out infinite;}
.ab-wave-bars span:nth-child(3){animation:abWave .9s .3s ease-in-out infinite;}
.ab-wave-bars span:nth-child(4){animation:abWave .9s .45s ease-in-out infinite;}
#ab-root[data-state="listening"] .ab-wave-bars{display:flex;}
#ab-root[data-state="listening"] #ab-avatar-icon{display:none;}
#ab-root[data-state="listening"] .ab-dots{display:none;}
#ab-input.ab-conv-listening{border-color:var(--ab-c)!important;}
#ab-input.ab-conv-listening::placeholder{color:var(--ab-c);}

/* ── Avatar ─────────────────────────────────────────────── */
#ab-avatar{width:52px;height:52px;border-radius:50%;
  background:var(--bg3);border:2px solid var(--ab-c);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;flex-shrink:0;
  pointer-events:auto; /* launcher sempre cliccabile (il padre è pe:none) */
  transition:border-color .3s,box-shadow .3s;}
#ab-avatar:hover{box-shadow:0 0 16px 3px color-mix(in srgb,var(--ab-c) 55%,transparent);}
#ab-avatar i{color:var(--ab-c);transition:color .3s;}

/* Pulse ring */
.ab-pulse-ring{position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--ab-c);opacity:0;pointer-events:none;}
#ab-root[data-state="standby"]  .ab-pulse-ring{animation:abPulse 3s ease-in-out infinite;}
#ab-root[data-state="speaking"] .ab-pulse-ring{animation:abPulse .9s ease-in-out infinite;}
#ab-root[data-state="alert"]    .ab-pulse-ring{animation:abPulse .6s ease-in-out infinite;}
#ab-root[data-state="risk"]     .ab-pulse-ring{animation:abPulse .4s ease-in-out infinite;}
@keyframes abPulse{0%,100%{opacity:0;transform:scale(1);}50%{opacity:.55;transform:scale(1.18);}}

/* Thinking dots */
.ab-dots{display:none;gap:4px;align-items:center;}
#ab-root[data-state="thinking"] .ab-dots        {display:flex;}
#ab-root[data-state="thinking"] #ab-avatar-icon {display:none;}
.ab-dots span{width:5px;height:5px;border-radius:50%;background:var(--ab-c);
  animation:abDot 1.2s ease-in-out infinite;}
.ab-dots span:nth-child(2){animation-delay:.2s;}
.ab-dots span:nth-child(3){animation-delay:.4s;}
@keyframes abDot{0%,80%,100%{transform:scale(.65);opacity:.45;}40%{transform:scale(1);opacity:1;}}

/* Notification dot */
#ab-notif-dot{position:absolute;top:1px;right:1px;width:9px;height:9px;
  border-radius:50%;background:var(--accent,#10B981);
  border:2px solid var(--bg,#0f1219);display:none;}
#ab-notif-dot.show{display:block;}

/* Offline / silent */
#ab-root[data-enabled="false"] #ab-avatar{opacity:.4;cursor:default;}
#ab-root[data-silent="true"]   #ab-avatar{opacity:.75;}

/* ── Pannello ────────────────────────────────────────────── */
#ab-panel{width:380px;max-height:560px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  transform-origin:bottom right;
  transform:scale(.93) translateY(8px);opacity:0;pointer-events:none;
  /* visibility:hidden da chiuso: niente elementi invisibili focalizzabili
     (Tab non entra nella chat chiusa) e albero accessibilità pulito. */
  visibility:hidden;
  transition:transform .2s ease,opacity .2s ease,visibility .2s;}
#ab-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all;visibility:visible;}

/* Panel header */
.ab-panel-header{display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-bottom:1px solid var(--border);
  background:var(--bg3);flex-shrink:0;}
.ab-panel-title{display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ab-c);}
.ab-panel-title i{color:var(--ab-c);}
.ab-panel-btns{display:flex;gap:3px;}
.ab-ctrl-btn{width:25px;height:25px;border-radius:5px;border:none;
  background:transparent;color:var(--text-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s;}
.ab-ctrl-btn:hover{background:var(--bg4,#1e2535);color:var(--text);}
.ab-ctrl-btn.active{color:var(--ab-c);}

/* State bar */
#ab-state-bar{padding:7px 12px;font-size:11px;line-height:1.45;
  color:var(--ab-c);
  background:color-mix(in srgb,var(--ab-c) 7%,transparent);
  border-bottom:1px solid var(--border);flex-shrink:0;}
#ab-state-bar:empty{display:none;}

/* Chips */
#ab-chips{display:flex;flex-wrap:wrap;gap:5px;padding:8px 12px;
  border-bottom:1px solid var(--border);flex-shrink:0;}
#ab-chips:empty{display:none;padding:0;border:none;}
.ab-chip{font-size:11.5px;padding:4px 11px;border-radius:20px;
  border:1px solid var(--border);background:var(--bg3);
  color:var(--text-bright);cursor:pointer;white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s;}
.ab-chip:hover{border-color:var(--ab-c);color:var(--ab-c);background:var(--bg4);}

/* Messaggi */
#ab-messages{flex:1;overflow-y:auto;padding:10px 12px;
  display:flex;flex-direction:column;gap:9px;min-height:100px;}
#ab-messages::-webkit-scrollbar{width:3px;}
#ab-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

.ab-msg{display:flex;flex-direction:column;gap:2px;}
.ab-msg-label{font-size:10px;color:var(--text-dim);padding:0 3px;}
.ab-msg-bot .ab-msg-bubble{background:var(--bg3);border:1px solid var(--border);
  border-radius:8px 8px 8px 2px;padding:8px 12px;
  font-size:13px;line-height:1.6;color:var(--text-bright);}
.ab-msg-user{align-items:flex-end;}
.ab-msg-user .ab-msg-bubble{
  background:color-mix(in srgb,var(--ab-c) 13%,var(--bg3));
  border:1px solid color-mix(in srgb,var(--ab-c) 28%,transparent);
  border-radius:8px 8px 2px 8px;padding:8px 12px;
  font-size:13px;line-height:1.6;color:var(--text-bright);max-width:88%;}

/* Typing indicator */
.ab-typing .ab-msg-bubble{display:flex;gap:4px;align-items:center;padding:10px 12px;}
.ab-typing .ab-msg-bubble span{width:5px;height:5px;border-radius:50%;
  background:var(--ab-c);animation:abDot 1.2s ease-in-out infinite;}
.ab-typing .ab-msg-bubble span:nth-child(2){animation-delay:.2s;}
.ab-typing .ab-msg-bubble span:nth-child(3){animation-delay:.4s;}

/* Input row */
.ab-input-row{display:flex;align-items:flex-end;gap:5px;
  padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0;}
#ab-input{flex:1;background:var(--bg3);border:1px solid var(--border);
  border-radius:7px;color:var(--text);font-size:12px;font-family:inherit;
  padding:7px 9px;resize:none;min-height:34px;max-height:80px;
  line-height:1.4;transition:border-color .15s;}
#ab-input:focus{outline:none;border-color:var(--ab-c);}
#ab-input::placeholder{color:var(--text-dim);}
.ab-icon-btn{width:32px;height:32px;border-radius:7px;
  border:1px solid var(--border);background:var(--bg3);
  color:var(--text-dim);cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;}
.ab-send-btn{background:var(--ab-c);border-color:var(--ab-c);color:#fff;}
.ab-send-btn:hover{opacity:.85;}
.ab-send-btn:disabled{opacity:.35;cursor:default;}
#ab-mic-btn:hover{border-color:var(--ab-c);color:var(--ab-c);}
#ab-mic-btn.listening{border-color:#EF4444;color:#EF4444;
  background:color-mix(in srgb,#EF4444 12%,var(--bg3));}

/* Disabled */
#ab-root[data-enabled="false"] #ab-panel{display:none!important;}

/* Responsive: su mobile si riduce leggermente */
@media(max-width:480px){
  #ab-root{bottom:80px;right:12px;}
  #ab-panel{width:calc(100vw - 24px);max-height:460px;}
}


/* --- _design_system.css ----------------------------------------- */
/* ── _design_system.css — AlphaDesk Design System primitives (FASE 5B v43.0.206)
   Shared components used across all pages/partials.
   Replaces ad-hoc inline styles in templates.

   Primitives:
     .ad-label         — section micro-label (mono, uppercase, small)
     .ad-section-header — flex row for section header + actions
     .ad-card          — unified content card base + severity modifiers
     .ad-icon-wrap     — circular/rounded icon container + color variants
     .ad-btn           — unified small CTA button + size/color variants
──────────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   .ad-label — section micro-label
   Replaces: .db-card-title, .db-sec-label, .aic-label, .metric-label
   ════════════════════════════════════════════════════════════════════ */
.ad-label {
  font-family: var(--mono);
  font-size: var(--fs-xs, 9px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ad-label--green   { color: rgba(0,229,160,.70); }
.ad-label--accent  { color: rgba(99,102,241,.75); }
.ad-label--yellow  { color: rgba(245,158,11,.80); }
.ad-label--red     { color: rgba(244,63,94,.80); }
.ad-label--blue    { color: rgba(59,130,246,.75); }

/* ══════════════════════════════════════════════════════════════════════
   .ad-section-header — flex row for section title + optional actions
   ════════════════════════════════════════════════════════════════════ */
.ad-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin-bottom: 11px;
}
.ad-section-header__left {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}

/* ══════════════════════════════════════════════════════════════════════
   .ad-card — unified content card base
   Replaces: inline styles in _persistent_insights.html, _homepage_quick_actions.html
   Severity modifiers mirror: .aic-hint--*, .pi-card severity pattern
   ════════════════════════════════════════════════════════════════════ */
.ad-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4, 16px);
}

/* Severity variants */
.ad-card--ai {
  background: var(--ai-bg, rgba(99,102,241,.06));
  border-color: var(--ai-border, rgba(99,102,241,.20));
}
.ad-card--warning {
  background: var(--warn-bg, rgba(245,158,11,.06));
  border-color: var(--warn-border, rgba(245,158,11,.22));
}
.ad-card--info {
  background: var(--info-bg, rgba(59,130,246,.06));
  border-color: var(--info-border, rgba(59,130,246,.20));
}

/* Density modifiers (set by body.mode-* from _user_mode.css) */
body.mode-guided  .ad-card { padding: var(--sp-5, 20px) var(--sp-6, 24px); }
body.mode-advanced .ad-card { padding: var(--sp-3, 12px) var(--sp-4, 16px); }

/* ══════════════════════════════════════════════════════════════════════
   .ad-icon-wrap — square icon container with semantic color variants
   ════════════════════════════════════════════════════════════════════ */
.ad-icon-wrap {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-icon-wrap--ai      { background: rgba(99,102,241,.10);  color: rgba(99,102,241,.85); }
.ad-icon-wrap--warning { background: rgba(245,158,11,.12);  color: rgba(245,158,11,.85); }
.ad-icon-wrap--info    { background: rgba(59,130,246,.10);  color: rgba(59,130,246,.85); }
.ad-icon-wrap--green   { background: rgba(0,229,160,.12);   color: var(--green); }
.ad-icon-wrap--red     { background: rgba(244,63,94,.12);   color: var(--red); }

/* ══════════════════════════════════════════════════════════════════════
   .ad-btn — unified small CTA/pill button
   Replaces: .aic-btn, inline quick-action pills, inline PI CTA buttons
   ════════════════════════════════════════════════════════════════════ */
.ad-btn {
  font-family: var(--mono);
  font-size: var(--fs-xs, 9px);
  font-weight: 700;
  letter-spacing: .4px;
  padding: 4px 10px;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, border-color .15s;
  color: var(--text-dim);
  white-space: nowrap;
}
.ad-btn:hover {
  border-color: var(--border2);
  color: var(--text-bright);
}

/* Primary — green accent */
.ad-btn--primary {
  background: rgba(0,229,160,.12);
  border-color: rgba(0,229,160,.32);
  color: rgba(0,229,160,.88);
}
.ad-btn--primary:hover { background: rgba(0,229,160,.18); border-color: rgba(0,229,160,.50); }

/* AI/accent */
.ad-btn--ai {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.38);
  color: rgba(99,102,241,.90);
}
.ad-btn--ai:hover { background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.55); }

/* Warning */
.ad-btn--warning {
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.40);
  color: rgba(245,158,11,.90);
}
.ad-btn--warning:hover { background: rgba(245,158,11,.25); border-color: rgba(245,158,11,.55); }

/* Info/blue */
.ad-btn--info {
  background: rgba(59,130,246,.15);
  border-color: rgba(59,130,246,.38);
  color: rgba(59,130,246,.90);
}
.ad-btn--info:hover { background: rgba(59,130,246,.22); border-color: rgba(59,130,246,.55); }

/* Ghost */
.ad-btn--ghost {
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.09);
  color: var(--text-dim);
}
.ad-btn--ghost:hover { border-color: var(--border2); color: var(--text-bright); }

/* Medium size (quick-action pills) */
.ad-btn--md {
  font-size: 10px;
  padding: 7px 14px;
  border-radius: 20px;
  gap: 6px;
}

/* Density modifiers */
body.mode-guided  .ad-btn { padding: 5px 12px; font-size: 10px; }
body.mode-advanced .ad-btn { padding: 3px 8px; }
body.mode-guided  .ad-btn.ad-btn--md { padding: 8px 16px; }
body.mode-advanced .ad-btn.ad-btn--md { padding: 6px 12px; }

/* ══════════════════════════════════════════════════════════════════════
   .ad-progress-bar — mini horizontal progress bar (alert distance indicator)
   Usage: <div class="ad-progress-bar [--far|--near]">
            <div class="ad-progress-bar__fill" style="width:N%"></div>
          </div>
   --far  = distance ≥ 3% from threshold → accent/indigo fill
   --near = distance < 3% from threshold → warning/amber fill
   ════════════════════════════════════════════════════════════════════ */
.ad-progress-bar {
  height: 3px;
  background: var(--bg3);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.ad-progress-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width .4s;
  background: #6366f1;
}
.ad-progress-bar--near .ad-progress-bar__fill {
  background: #fbbf24;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ad-section-header { margin-bottom: 9px; }
  .ad-card { padding: var(--sp-3, 12px) var(--sp-4, 16px); }
  body.mode-guided .ad-card { padding: var(--sp-4, 16px) var(--sp-5, 20px); }
}


/* --- _ai_components.css ----------------------------------------- */
/* ── _ai_components.css — AlphaBot Contextual Hint Card (FASE 3A)
   Classe base: .aic-hint  |  Severity: --critical --important --neutral --educational
   Usato da app/templates/_ai_hint.html (componente riusabile)
─────────────────────────────────────────────────────────────── */

/* ── Card base ──────────────────────────────────────────────────────────── */
.aic-hint {
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  border-radius:var(--radius-lg);padding:14px 18px;margin-bottom:20px;
  border:1px solid transparent;position:relative;
}

/* ── Severity variants ───────────────────────────────────────────────────── */
.aic-hint--neutral {
  background:linear-gradient(135deg,rgba(0,229,160,.06) 0%,rgba(0,229,160,.03) 100%);
  border-color:rgba(0,229,160,.20);
}
.aic-hint--important {
  background:linear-gradient(135deg,rgba(210,153,34,.07) 0%,rgba(210,153,34,.03) 100%);
  border-color:rgba(210,153,34,.22);
}
.aic-hint--critical {
  background:linear-gradient(135deg,rgba(248,81,73,.08) 0%,rgba(248,81,73,.03) 100%);
  border-color:rgba(248,81,73,.25);
}
.aic-hint--educational {
  background:linear-gradient(135deg,rgba(99,102,241,.08) 0%,rgba(99,102,241,.03) 100%);
  border-color:rgba(99,102,241,.22);
}

/* ── Icon circle ─────────────────────────────────────────────────────────── */
.aic-icon {
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.aic-hint--neutral     .aic-icon { background:rgba(0,229,160,.15); color:var(--green); }
.aic-hint--important   .aic-icon { background:rgba(210,153,34,.15); color:var(--yellow); }
.aic-hint--critical    .aic-icon { background:rgba(248,81,73,.15);  color:var(--red); }
.aic-hint--educational .aic-icon { background:rgba(99,102,241,.15); color:var(--accent); }

/* ── Body ────────────────────────────────────────────────────────────────── */
.aic-body { flex:1;min-width:180px; }

.aic-header {
  display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap;
}

.aic-label {
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;
}
.aic-hint--neutral     .aic-label { color:rgba(0,229,160,.85); }
.aic-hint--important   .aic-label { color:rgba(210,153,34,.9); }
.aic-hint--critical    .aic-label { color:rgba(248,81,73,.9); }
.aic-hint--educational .aic-label { color:rgba(99,102,241,.85); }

.aic-badge {
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;padding:2px 7px;border-radius:10px;
}
.aic-hint--neutral     .aic-badge { background:rgba(0,229,160,.12); color:var(--green); border:1px solid rgba(0,229,160,.25); }
.aic-hint--important   .aic-badge { background:rgba(210,153,34,.12); color:var(--yellow); border:1px solid rgba(210,153,34,.3); }
.aic-hint--critical    .aic-badge { background:rgba(248,81,73,.12);  color:var(--red);    border:1px solid rgba(248,81,73,.3); }
.aic-hint--educational .aic-badge { background:rgba(99,102,241,.12); color:var(--accent); border:1px solid rgba(99,102,241,.3); }

.aic-text {
  font-family:var(--sans);font-size:12px;color:var(--text);line-height:1.55;
  margin-bottom:10px;
}

/* ── CTA row ─────────────────────────────────────────────────────────────── */
.aic-ctas { display:flex;flex-wrap:wrap;gap:7px; }

.aic-btn {
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.4px;
  padding:5px 12px;border-radius:20px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;background:transparent;
  transition:background .18s,border-color .18s;display:inline-flex;
  align-items:center;gap:4px;
}

/* CTA colors per severity */
.aic-hint--neutral .aic-btn {
  border-color:rgba(0,229,160,.30);color:rgba(0,229,160,.85);
}
.aic-hint--neutral .aic-btn:hover { background:rgba(0,229,160,.10);border-color:rgba(0,229,160,.55); }
.aic-hint--neutral .aic-btn--primary { background:rgba(0,229,160,.14);border-color:rgba(0,229,160,.45); }

.aic-hint--important .aic-btn {
  border-color:rgba(210,153,34,.30);color:rgba(210,153,34,.9);
}
.aic-hint--important .aic-btn:hover { background:rgba(210,153,34,.10);border-color:rgba(210,153,34,.55); }
.aic-hint--important .aic-btn--primary { background:rgba(210,153,34,.14);border-color:rgba(210,153,34,.45); }

.aic-hint--critical .aic-btn {
  border-color:rgba(248,81,73,.30);color:rgba(248,81,73,.9);
}
.aic-hint--critical .aic-btn:hover { background:rgba(248,81,73,.10);border-color:rgba(248,81,73,.55); }
.aic-hint--critical .aic-btn--primary { background:rgba(248,81,73,.14);border-color:rgba(248,81,73,.45); }

.aic-hint--educational .aic-btn {
  border-color:rgba(99,102,241,.30);color:rgba(99,102,241,.85);
}
.aic-hint--educational .aic-btn:hover { background:rgba(99,102,241,.10);border-color:rgba(99,102,241,.55); }
.aic-hint--educational .aic-btn--primary { background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.50); }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media(max-width:600px) {
  .aic-hint { flex-direction:column;gap:10px; }
  .aic-icon { width:30px;height:30px; }
}


/* --- _user_mode.css ----------------------------------------- */
/*
 * _user_mode.css — User Adaptation Layer density modifiers (FASE 3C)
 *
 * Classi applicate al <body> in base al preferred_mode dell'utente:
 *   body.mode-guided   — beginner / guided    → più spazio, meno sovraccarico
 *   body.mode-balanced — active  / balanced   → default SaaS (nessun override)
 *   body.mode-advanced — expert  / advanced   → più compatto, più dati visibili
 *
 * Principio: modificatori ADDITIVI su classi esistenti.
 * NON ridefinire layout strutturali — solo micro-aggiustamenti densità+tono.
 * NON creare layout completamente diversi per livello.
 */

/* ══════════════════════════════════════════════════════════════════════════
   MODE-GUIDED — Principiante: più respiro, meno overload
   ════════════════════════════════════════════════════════════════════════ */

body.mode-guided .container {
  max-width: 860px;   /* narrower = meno testo per riga, più leggibile */
}

body.mode-guided .card {
  padding: 22px 26px;
}

body.mode-guided .metric-card {
  padding: 18px 20px;
}

/* Hint card più ariosa per i principianti */
body.mode-guided .aic-hint {
  padding: 18px 22px;
  gap: 16px;
}

body.mode-guided .aic-text {
  font-size: 13px;
  line-height: 1.65;
}

body.mode-guided .aic-ctas {
  gap: 8px;
  margin-top: 14px;
}

/* Badge livello in header — etichetta visibile */
body.mode-guided .mode-badge {
  background: rgba(99, 102, 241, .12);
  border: 1px solid rgba(99, 102, 241, .30);
  color: rgba(99, 102, 241, .9);
}

/* Testo guida aggiuntivo visibile solo in modalità guided */
.mode-guided-only {
  display: none;
}
body.mode-guided .mode-guided-only {
  display: block;
}

/* Dettagli tecnici nascondibili in modalità guided */
body.mode-guided .mode-expert-only {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE-BALANCED — Active: nessun override (è il default)
   ════════════════════════════════════════════════════════════════════════ */

/* Nessuna regola aggiuntiva — modo balanced è il design base invariato */

/* ══════════════════════════════════════════════════════════════════════════
   MODE-ADVANCED — Expert: più compatto, più dati, meno testo educativo
   ════════════════════════════════════════════════════════════════════════ */

body.mode-advanced .container {
  max-width: 1360px;  /* usa più larghezza dello schermo */
}

/* Hint card più compatta per gli esperti */
body.mode-advanced .aic-hint {
  padding: 10px 16px;
  gap: 12px;
}

body.mode-advanced .aic-text {
  font-size: 12px;
  line-height: 1.5;
}

body.mode-advanced .aic-ctas {
  margin-top: 8px;
  gap: 6px;
}

body.mode-advanced .aic-btn {
  padding: 4px 12px;
  font-size: 10px;
}

/* Badge livello in header */
body.mode-advanced .mode-badge {
  background: rgba(0, 229, 160, .10);
  border: 1px solid rgba(0, 229, 160, .28);
  color: rgba(0, 229, 160, .85);
}

/* Testo educativo nascosto in modalità avanzata */
body.mode-advanced .mode-guided-only {
  display: none;
}

/* Elementi solo per esperti */
.mode-expert-only {
  display: none;
}
body.mode-advanced .mode-expert-only {
  display: block;
}

/* Riduce padding delle tabelle dati in modalità advanced */
body.mode-advanced table td,
body.mode-advanced table th {
  padding-top: 6px;
  padding-bottom: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODE BADGE — widget nel header che mostra la modalità corrente
   ════════════════════════════════════════════════════════════════════════ */

.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  cursor: pointer;
  transition: opacity .18s;
  text-decoration: none;
  white-space: nowrap;
  /* default: balanced */
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.mode-badge:hover {
  opacity: .8;
}

/* Mobile: nascondi il badge sul bottom nav */
@media (max-width: 768px) {
  .mode-badge {
    display: none;
  }
}


/* --- _premium.css ----------------------------------------- */
/* ── _premium.css — AlphaDesk Premium UX Layer (FASE 6A v45.0.001)
   Upgrades: tipografia h1-h6, page header .pgh-*, empty state .es-*,
   card system premium, ab-brief-card, scrollbar raffinati,
   focus styles accessibili, badge, divider, mobile bottom spacing.
   Zero breaking changes — puramente additivo.
────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   TIPOGRAFIA — Gerarchia h1-h6 globale
   ════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sans);
  color: var(--text-white);
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

h1 { font-size: var(--fs-3xl, 28px); letter-spacing: -0.8px; }
h2 { font-size: var(--fs-2xl, 22px); letter-spacing: -0.5px; }
h3 { font-size: var(--fs-xl,  17px); letter-spacing: -0.2px; }
h4 { font-size: var(--fs-lg,  15px); }
h5 { font-size: var(--fs-md,  13px); }
h6 { font-size: var(--fs-sm,  11px); letter-spacing: 0.5px; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════
   PAGE HEADER — Componente unificato (.pgh-*)
   Sostituisce i page-header ad-hoc per ogni pagina.

   Uso:
     <div class="pgh">
       <div class="pgh-left">
         <p class="pgh-eyebrow">Sezione · Sottotitolo</p>
         <h1 class="pgh-title">Titolo Pagina</h1>
       </div>
       <div class="pgh-right"><!-- azioni --></div>
     </div>
   ════════════════════════════════════════════════════════════ */
.pgh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4, 16px);
  margin-bottom: var(--sp-8, 32px);
  flex-wrap: wrap;
}

.pgh-left  { flex: 1; min-width: 0; }

.pgh-eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs, 9px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 var(--sp-1, 4px);
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.pgh-title {
  font-family: var(--sans);
  font-size: var(--fs-2xl, 22px);
  font-weight: 800;
  color: var(--text-white);
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 var(--sp-1, 4px);
}

.pgh-sub {
  font-family: var(--mono);
  font-size: var(--fs-sm, 11px);
  color: var(--text-dim);
  letter-spacing: 0.3px;
  line-height: 1.5;
  margin: 0;
}

.pgh-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-shrink: 0;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .pgh              { margin-bottom: var(--sp-6, 24px); }
  .pgh-title        { font-size: var(--fs-xl, 17px); }
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE — Componente .es-*
   Uso:
     <div class="es">
       <div class="es-icon es-icon--ai"><!-- lucide --></div>
       <p class="es-title">Nessun dato</p>
       <p class="es-desc">Descrizione contestuale e azione suggerita.</p>
       <div class="es-actions"><!-- CTA --></div>
     </div>
   ════════════════════════════════════════════════════════════ */
.es {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-10, 40px) var(--sp-6, 24px);
  gap: var(--sp-3, 12px);
}

.es-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  margin-bottom: var(--sp-1, 4px);
  flex-shrink: 0;
}

.es-icon--ai     { background: rgba(99,102,241,.08);  border-color: rgba(99,102,241,.22);  color: rgba(99,102,241,.8); }
.es-icon--green  { background: rgba(0,229,160,.08);   border-color: rgba(0,229,160,.22);   color: var(--green); }
.es-icon--yellow { background: rgba(251,191,36,.08);  border-color: rgba(251,191,36,.22);  color: var(--yellow); }
.es-icon--blue   { background: rgba(56,189,248,.08);  border-color: rgba(56,189,248,.22);  color: var(--blue); }

.es-title {
  font-family: var(--sans);
  font-size: var(--fs-lg, 15px);
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}

.es-desc {
  font-family: var(--sans);
  font-size: var(--fs-md, 13px);
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 380px;
  margin: 0;
}

.es-actions {
  display: flex;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--sp-2, 8px);
}

/* ══════════════════════════════════════════════════════════════
   CARD SYSTEM — Premium base + link variant
   ════════════════════════════════════════════════════════════ */

.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6, 24px);
  box-shadow: var(--shadow-card);
}

/* Carta cliccabile con hover lift */
.card-link {
  display: block;
  text-decoration: none;
  transition: transform var(--tx-normal), box-shadow var(--tx-normal), border-color var(--tx-normal);
}
.card-link:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
  box-shadow: var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════
   ALPHABOT DAILY BRIEF CARD — Hero card homepage
   Usato nel blocco empty_journey e come brief AI contestuale
   ════════════════════════════════════════════════════════════ */
.ab-brief-card {
  background: linear-gradient(135deg,
    rgba(99,102,241,.07) 0%,
    rgba(99,102,241,.02) 55%,
    rgba(0,229,160,.03) 100%);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: var(--radius-lg);
  padding: var(--sp-6, 24px);
  margin-bottom: var(--sp-6, 24px);
  position: relative;
  overflow: hidden;
}

/* Glow angolo top-right */
.ab-brief-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
  pointer-events: none;
}

.ab-brief-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}

.ab-brief-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(99,102,241,.9);
}

.ab-brief-meta { flex: 1; min-width: 0; }

.ab-brief-label {
  font-family: var(--mono);
  font-size: var(--fs-xs, 9px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(99,102,241,.70);
  margin-bottom: 3px;
}

.ab-brief-title {
  font-family: var(--sans);
  font-size: var(--fs-md, 13px);
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.3;
}

.ab-brief-body {
  font-family: var(--sans);
  font-size: var(--fs-md, 13px);
  color: var(--text-dim);
  line-height: 1.65;
  margin-bottom: var(--sp-4, 16px);
}

.ab-brief-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2, 8px);
}

@media (max-width: 600px) {
  .ab-brief-card { padding: var(--sp-4, 16px) var(--sp-5, 20px); }
}

/* ══════════════════════════════════════════════════════════════
   SECTION TITLE — Raffinamento (meno terminale, più premium)
   Override dei valori esistenti in _layout.css
   ════════════════════════════════════════════════════════════ */
.section-title {
  letter-spacing: 1.5px; /* era 2.5px */
  font-size: 10px;       /* era 11px */
}

/* ══════════════════════════════════════════════════════════════
   METRIC CARD — Label accessibile
   Override dei valori esistenti in _layout.css
   ════════════════════════════════════════════════════════════ */
.metric-label {
  font-size: 10px;       /* era 9px */
  letter-spacing: 1.5px; /* era 2px */
}

.metric-value {
  font-size: 24px;        /* era 26px */
  letter-spacing: -0.5px; /* era -1px */
}

/* ══════════════════════════════════════════════════════════════
   BADGE — Tag di stato / categoria
   ════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: var(--fs-xs, 9px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}

.badge--green   { background: var(--green-dim);   color: var(--green);   border: 1px solid rgba(0,229,160,.25); }
.badge--red     { background: var(--red-dim);     color: var(--red);     border: 1px solid rgba(244,63,94,.25); }
.badge--yellow  { background: var(--yellow-dim);  color: var(--yellow);  border: 1px solid rgba(251,191,36,.25); }
.badge--blue    { background: var(--blue-dim);    color: var(--blue);    border: 1px solid rgba(56,189,248,.25); }
.badge--accent  { background: var(--accent-dim);  color: var(--accent2); border: 1px solid rgba(99,102,241,.25); }
.badge--neutral { background: var(--bg3);         color: var(--text);    border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════════════════
   DIVIDER — Separatore orizzontale
   ════════════════════════════════════════════════════════════ */
.hr-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--sp-6, 24px) 0;
}

/* ══════════════════════════════════════════════════════════════
   FOCUS STYLES — Navigazione da tastiera accessibile
   ════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR — Raffinamento globale (sovrascrive browser default)
   ════════════════════════════════════════════════════════════ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}
*::-webkit-scrollbar       { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ══════════════════════════════════════════════════════════════
   MOBILE — Padding bottom per bottom nav
   Evita che il contenuto venga nascosto dalla bottom nav fissa
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-main {
    padding-bottom: calc(var(--bottom-nav-h, 64px) + 20px);
  }
}

/* ══════════════════════════════════════════════════════════════
   UTILITY — Classi di supporto
   ════════════════════════════════════════════════════════════ */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ══════════════════════════════════════════════════════════════
   AI CONTEXT CARD (.ai-ctx-*) — FASE 6B v45.0.002
   Estratto da _ai_context_card.html (era inline <style>)
   Card page-level con chips contestuali AlphaBot.
   ════════════════════════════════════════════════════════════ */

.ai-ctx-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--accent2, #6366F1) 45%, transparent);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
  position: relative;
  transition: border-color var(--tx-normal, .2s ease);
}
.ai-ctx-card:hover {
  border-left-color: color-mix(in srgb, var(--accent2, #6366F1) 70%, transparent);
}
.ai-ctx-icon {
  flex-shrink: 0;
  color: var(--accent2);
  margin-top: 1px;
  opacity: .85;
}
.ai-ctx-body { flex: 1; min-width: 0; }
.ai-ctx-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  font-weight: 700;
  margin-bottom: 5px;
}
.ai-ctx-msg {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ai-ctx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-ctx-chip {
  background: var(--bg4, #1e2535);
  border: 1px solid var(--border2, var(--border));
  border-radius: 20px;
  padding: 5px 13px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-bright);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--tx-fast, .12s ease), border-color var(--tx-fast), color var(--tx-fast);
  line-height: 1;
}
.ai-ctx-chip:hover {
  background: color-mix(in srgb, var(--accent2, #6366F1) 10%, transparent);
  border-color: var(--accent2);
  color: var(--accent2);
}
.ai-ctx-chip:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
@media (max-width: 540px) {
  .ai-ctx-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .ai-ctx-chips::-webkit-scrollbar { display: none; }
  .ai-ctx-card { padding: 12px 14px; }
}


/* ══════════════════════════════════════════════════════════════
   AI EXPLANATION CARD (.ai-expl-*) — FASE 6B v45.0.002
   Card inline leggera per spiegare metriche finanziarie.
   Usata direttamente nei template con classi HTML.
   Più compatta di .ai-ctx-card (page-level), pensata per
   posizionamento accanto a KPI o in sezioni specifiche.
   ════════════════════════════════════════════════════════════ */

.ai-expl-card {
  background: color-mix(in srgb, var(--accent2, #6366F1) 5%, var(--bg2));
  border: 1px solid color-mix(in srgb, var(--accent2, #6366F1) 18%, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: 11px 14px;
  margin: 8px 0;
}
.ai-expl-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 6px;
}
.ai-expl-eyebrow i { flex-shrink: 0; }
.ai-expl-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
.ai-expl-action {
  margin-top: 8px;
}
.ai-expl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--accent2);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
  opacity: .75;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: opacity var(--tx-fast, .12s ease);
}
.ai-expl-btn:hover { opacity: 1; }


/* ══════════════════════════════════════════════════════════════
   FINANCIAL VOCABULARY — FASE 6C v45.0.003
   Componenti UI per il Financial Knowledge Layer.

   .fv-term          — span inline con icona ℹ e tooltip hover
   .fv-term-tip      — popover tooltip (CSS-only, no JS)
   .fv-tt-*          — sottoelementi tooltip
   .fv-card          — card espandibile con spiegazione completa
   .fv-card-*        — sottoelementi card
   ════════════════════════════════════════════════════════════ */

/* ── Termine inline con tooltip ──────────────────────────────── */
.fv-term {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  outline: none;
}

/* Tooltip container — nascosto di default */
.fv-term-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 270px;
  background: var(--bg2, #1a1c2a);
  border: 1px solid color-mix(in srgb, var(--accent2, #6366F1) 30%, var(--border, #2a2d3e));
  border-radius: var(--radius-md, 8px);
  padding: 11px 13px 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
  text-align: left;
  white-space: normal;
  cursor: auto;
}

/* Piccola freccia verso il basso */
.fv-term-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: color-mix(in srgb, var(--accent2, #6366F1) 30%, var(--border, #2a2d3e));
}

/* Mostra al hover/focus */
.fv-term:hover .fv-term-tip,
.fv-term:focus .fv-term-tip,
.fv-term:focus-within .fv-term-tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Sottoelementi tooltip */
.fv-tt-title {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent2, #6366F1);
  margin-bottom: 5px;
}
.fv-tt-def {
  display: block;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text, #cdd6f4);
  margin-bottom: 6px;
}
.fv-tt-eg {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted, #7f849c);
  margin-bottom: 8px;
  padding-top: 5px;
  border-top: 1px solid var(--border, #2a2d3e);
}
.fv-tt-eg strong {
  color: var(--text, #cdd6f4);
  font-weight: 600;
}
.fv-tt-ask {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent2, #6366F1);
  background: color-mix(in srgb, var(--accent2, #6366F1) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2, #6366F1) 25%, transparent);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--tx-fast, .12s ease), border-color var(--tx-fast);
  white-space: nowrap;
}
.fv-tt-ask:hover {
  background: color-mix(in srgb, var(--accent2, #6366F1) 18%, transparent);
  border-color: var(--accent2, #6366F1);
}

/* Aggiustamenti posizione su schermi piccoli */
@media (max-width: 480px) {
  .fv-term-tip {
    left: auto;
    right: 0;
    transform: none;
    width: 240px;
  }
  .fv-term-tip::after {
    left: auto;
    right: 16px;
    transform: none;
  }
}


/* ── Financial Vocabulary Card (.fv-card) ───────────────────── */
.fv-card {
  background: color-mix(in srgb, var(--accent2, #6366F1) 4%, var(--bg2, #1a1c2a));
  border: 1px solid color-mix(in srgb, var(--accent2, #6366F1) 18%, var(--border, #2a2d3e));
  border-left: 3px solid var(--accent2, #6366F1);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin: 8px 0;
  font-size: 12.5px;
}
.fv-card--compact {
  padding: 9px 12px;
  font-size: 12px;
}

.fv-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.fv-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright, #fff);
  flex: 1;
}
.fv-card-cat {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--accent2, #6366F1);
  background: color-mix(in srgb, var(--accent2, #6366F1) 12%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}

.fv-card-def {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text, #cdd6f4);
  margin-bottom: 4px;
}

.fv-card-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border, #2a2d3e);
  font-size: 11.5px;
  line-height: 1.5;
}
.fv-card-row-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-muted, #7f849c);
  padding-top: 1px;
}
.fv-card-row-val {
  color: var(--text, #cdd6f4);
}
.fv-card-row--warn .fv-card-row-label {
  color: var(--warning, #f9a825);
}
.fv-card-row--warn .fv-card-row-val {
  color: color-mix(in srgb, var(--warning, #f9a825) 80%, var(--text));
}

.fv-card-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #2a2d3e);
}
.fv-card-ask {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent2, #6366F1);
  background: color-mix(in srgb, var(--accent2, #6366F1) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2, #6366F1) 22%, transparent);
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background var(--tx-fast, .12s ease), border-color var(--tx-fast);
}
.fv-card-ask:hover {
  background: color-mix(in srgb, var(--accent2, #6366F1) 15%, transparent);
  border-color: var(--accent2, #6366F1);
}


/* ══════════════════════════════════════════════════════════════
   ICON SYMBOL UTILITY (.ic-sym) — FASE 6D v45.0.004
   Classe base per icone Lucide generate da _icon_macros.html.
   Garantisce il corretto layout inline anche prima che
   lucide.createIcons() sostituisca i <i> con <svg>.
   ════════════════════════════════════════════════════════════ */

.ic-sym {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
  /* opacity e margin sono impostati inline dal macro per granularità */
}


/* ══════════════════════════════════════════════════════════════
   PREMIUM KPI CARD — FASE 6E v45.0.006
   Componente card universale per metriche finanziarie.
   Sostituisce il pattern .dv-mc con versione elevata + hover glow.

   Uso:
     <div class="dv-mc dv-mc--pos"> ... </div>
     <div class="dv-mc dv-mc--warn"> ... </div>

   Modifiers: --pos (green) --neg (red) --warn (yellow) --neutral (blue) --accent (violet)
   ════════════════════════════════════════════════════════════ */

/* Base KPI card */
.dv-mc {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: transform var(--tx-normal), box-shadow var(--tx-normal), border-color var(--tx-normal);
  cursor: default;
  box-shadow: var(--shadow-sm);
}

/* Top gradient line */
.dv-mc::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border2);
  opacity: .5;
}

/* Corner glow blob */
.dv-mc::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 64px; height: 64px;
  border-radius: 0 var(--radius-lg) 0 50%;
  opacity: .04;
  background: var(--text-dim);
}

.dv-mc:hover {
  transform: translateY(-2px);
  border-color: var(--border2);
}

/* ── Semantic modifier: positive (green) ── */
.dv-mc--pos::before { background: linear-gradient(90deg, transparent 10%, var(--green) 50%, transparent 90%); opacity: 1; }
.dv-mc--pos::after  { background: var(--green); opacity: .06; }
.dv-mc--pos:hover   { box-shadow: var(--glow-pos); }

/* ── Semantic modifier: negative (red) ── */
.dv-mc--neg::before { background: linear-gradient(90deg, transparent 10%, var(--red) 50%, transparent 90%); opacity: 1; }
.dv-mc--neg::after  { background: var(--red); opacity: .06; }
.dv-mc--neg:hover   { box-shadow: var(--glow-neg); }

/* ── Semantic modifier: warning (yellow) ── */
.dv-mc--warn::before { background: linear-gradient(90deg, transparent 10%, var(--yellow) 50%, transparent 90%); opacity: 1; }
.dv-mc--warn::after  { background: var(--yellow); opacity: .05; }
.dv-mc--warn:hover   { box-shadow: var(--glow-warn); }

/* ── Semantic modifier: neutral (blue) ── */
.dv-mc--neutral::before { background: linear-gradient(90deg, transparent 10%, var(--blue) 50%, transparent 90%); opacity: 1; }
.dv-mc--neutral::after  { background: var(--blue); opacity: .05; }
.dv-mc--neutral:hover   { box-shadow: var(--glow-neutral); }

/* ── Semantic modifier: accent (violet) ── */
.dv-mc--accent::before { background: linear-gradient(90deg, transparent 10%, var(--accent2) 50%, transparent 90%); opacity: 1; }
.dv-mc--accent::after  { background: var(--accent2); opacity: .05; }
.dv-mc--accent:hover   { box-shadow: var(--glow-accent); }

/* Inner elements (compatible with legacy .dv-mc-label/val/sub) */
.dv-mc-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.dv-mc-val {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-white);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.dv-mc-val.dv-mc-green  { color: var(--green); }
.dv-mc-val.dv-mc-yellow { color: var(--yellow); }
.dv-mc-val.dv-mc-dim    { color: var(--text-dim); font-size: 20px; }
.dv-mc-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
}


/* ══════════════════════════════════════════════════════════════
   PREMIUM TABLE (.ad-table-premium) — FASE 6E v45.0.006
   Classe additiva per .table-wrap: potenzia hover row e header.
   Uso: <div class="table-wrap ad-table-premium">
   ════════════════════════════════════════════════════════════ */

/* Enhanced thead */
.ad-table-premium table thead tr {
  border-bottom: 2px solid var(--border2);
}
.ad-table-premium table thead th {
  color: var(--text-bright);
  letter-spacing: 1.5px;
}

/* Enhanced hover row — accent subtile invece di var(--bg3) */
.ad-table-premium table tbody tr:hover {
  background: rgba(99,102,241,.035);
}

/* Mobile: riduci padding su schermi piccoli */
@media (max-width: 640px) {
  .ad-table-premium table td,
  .ad-table-premium table th {
    padding: 11px 14px;
  }
}


/* ══════════════════════════════════════════════════════════════
   PREMIUM CARD (.ad-card-premium / .ad-card-glass) — FASE 6E
   Componenti card elevati per sezioni principali.
   ════════════════════════════════════════════════════════════ */

.ad-card-premium {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6, 24px);
  box-shadow: var(--shadow-md);
  transition: border-color var(--tx-normal), box-shadow var(--tx-normal), transform var(--tx-normal);
  position: relative;
  overflow: hidden;
}
.ad-card-premium:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.ad-card-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6, 24px);
}


/* ══════════════════════════════════════════════════════════════
   DIVIDENDI PAGE CSS (FASE 6E v45.0.006)
   Spostato da dividendi.html <style> inline block.
   Tutte le classi .dv-* — nessuna modifica funzionale.
   ════════════════════════════════════════════════════════════ */

/* ── Page header ── */
.dv-page-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.dv-page-title  { font-family:var(--sans); font-size:22px; font-weight:700; color:var(--text-white); letter-spacing:-0.5px; margin:0 0 6px; }
.dv-page-sub    { font-family:var(--mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.dv-page-meta   { font-family:var(--mono); font-size:10px; color:var(--text-dim); text-align:right; }

/* ── Metric cards grid ── */
.dv-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:28px; }

/* ── Section bar ── */
.dv-section-bar   { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.dv-section-title { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--text-white); text-transform:uppercase; letter-spacing:.5px; }

/* ── Cashflow chart ── */
.dv-chart-wrap   { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:20px; margin-bottom:28px; box-shadow:var(--shadow-sm); }
.dv-chart-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.dv-chart-title  { font-size:13px; font-weight:600; color:var(--text-white); }
.dv-year-sel     { display:flex; gap:6px; flex-wrap:wrap; }
.dv-year-btn     { font-size:11px; font-family:var(--mono); padding:3px 9px; border-radius:4px; border:1px solid var(--border-subtle); background:transparent; color:var(--text-dim); cursor:pointer; transition:var(--tx-fast); }
.dv-year-btn:hover, .dv-year-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
#dvCanvas { width:100%; height:160px; display:block; }

/* ── Cashflow bar inline (fallback no-JS) ── */
.dv-bar-row    { display:flex; align-items:flex-end; gap:4px; height:100px; margin-top:8px; }
.dv-bar        { flex:1; background:var(--green); border-radius:2px 2px 0 0; min-width:0; opacity:.85; transition:.3s; }
.dv-bar:hover  { opacity:1; }
.dv-bar-labels { display:flex; gap:4px; margin-top:4px; }
.dv-bar-lbl    { flex:1; font-size:9px; font-family:var(--mono); color:var(--text-dim); text-align:center; }

/* ── Per ticker ── */
.dv-yield-badge { font-size:10px; font-family:var(--mono); background:rgba(16,185,129,.12); color:var(--green); border-radius:4px; padding:2px 6px; }
.dv-notptf      { opacity:.5; }

/* ── History filter ── */
.dv-filter-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.dv-filter-sel { font-size:12px; padding:5px 10px; border-radius:6px; border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-white); font-family:var(--mono); transition:border-color var(--tx-fast); }
.dv-filter-sel:focus { border-color:var(--accent2); outline:none; }

/* ── Insert form ── */
.dv-form-card   { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); margin-bottom:28px; overflow:hidden; box-shadow:var(--shadow-sm); }
.dv-form-toggle { width:100%; text-align:left; padding:14px 18px; background:transparent; border:none; color:var(--text-white); font-size:13px; font-weight:600; cursor:pointer; display:flex; justify-content:space-between; align-items:center; transition:background var(--tx-fast); }
.dv-form-toggle:hover { background:rgba(255,255,255,.025); }
.dv-form-body    { padding:18px; border-top:1px solid var(--border-subtle); display:none; }
.dv-form-body.open { display:block; }
.dv-form-grid    { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.dv-form-group   { display:flex; flex-direction:column; gap:4px; }
.dv-form-label   { font-size:10px; font-family:var(--mono); letter-spacing:.8px; text-transform:uppercase; color:var(--text-dim); }
.dv-form-input   { padding:7px 10px; border-radius:6px; border:1px solid var(--border-subtle); background:var(--bg-surface); color:var(--text-white); font-size:13px; font-family:var(--mono); width:100%; box-sizing:border-box; transition:border-color var(--tx-fast); }
.dv-form-input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 2px rgba(99,102,241,.15); }
.dv-form-row     { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.dv-form-sep     { grid-column:1/-1; border:none; border-top:1px solid var(--border-subtle); margin:4px 0; }
.dv-form-actions { grid-column:1/-1; display:flex; gap:10px; justify-content:flex-end; padding-top:6px; }
.dv-prefill-row  { grid-column:1/-1; display:flex; gap:8px; align-items:flex-end; }
.dv-prefill-inp  { flex:1; }

/* ── Tipo badge ── */
.dv-tipo                    { font-size:10px; font-family:var(--mono); padding:2px 7px; border-radius:4px; background:rgba(99,102,241,.15); color:var(--accent2); }
.dv-tipo.cedola             { background:rgba(245,158,11,.12); color:var(--yellow); }
.dv-tipo.provento_etf       { background:rgba(16,185,129,.12); color:var(--green); }
.dv-tipo.rimborso_capitale  { background:rgba(156,163,175,.12); color:var(--text-muted); }

/* ── Action columns ── */
.dv-action-wrap { display:flex; gap:3px; justify-content:flex-end; }

/* ── Yield estimate card ── */
.dv-yield-wrap  { background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:28px; box-shadow:var(--shadow-sm); }
.dv-yield-head  { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.dv-yield-title { font-size:13px; font-weight:600; color:var(--text-white); }
.dv-yield-main  { font-size:28px; font-weight:700; color:var(--green); font-family:var(--mono); }
.dv-yield-sub   { font-size:11px; color:var(--text-muted); margin-top:2px; }
.dv-yield-note  { font-size:10px; color:var(--text-dim); font-family:var(--mono); margin-top:8px; }


/* ══════════════════════════════════════════════════════════════
   AI CONTEXT CARD — upgrade hover (FASE 6E v45.0.006)
   Aggiunge glow subtile on hover senza cambiare struttura.
   ════════════════════════════════════════════════════════════ */

.ai-ctx-card {
  transition: border-color var(--tx-normal), border-left-color var(--tx-normal), box-shadow var(--tx-normal);
}
.ai-ctx-card:hover {
  border-left-color: var(--accent2);
  box-shadow: var(--glow-accent);
}
.ai-ctx-msg {
  color: var(--text);        /* era var(--text-dim) — più leggibile */
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   HTMX SWAP ANIMATION — FASE 6E v45.0.006
   Animazione fade-slide al completamento dello swap HTMX.
   Applicata via JS in dividendi.html dopo htmx:afterSwap.
   ════════════════════════════════════════════════════════════ */

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

/* Stato durante richiesta: opacità ridotta sul target */
#dv-history-section {
  transition: opacity .12s ease;
}


/* ══════════════════════════════════════════════════════════════
   HTMX LOADING STATE — FASE 6D.2 v45.0.005
   Spinner e indicatore di caricamento per richieste HTMX.
   Usati in partials/_dividendi_history.html e future sezioni.

   Meccanismo HTMX:
     • htmx aggiunge .htmx-request all'elemento che ha inviato la richiesta
     • L'indicatore (#dvFilterSpinner) riceve automaticamente opacity:1
       tramite il selector standard htmx-indicator/htmx-request
   ════════════════════════════════════════════════════════════ */

/* Nasconde l'indicatore di default; HTMX lo mostra durante la request */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* htmx aggiunge .htmx-request al form (o all'indicatore) durante la request */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Spinner CSS-only — cerchio che ruota */
@keyframes htmx-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.htmx-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border2, #3a3d52);
  border-top-color: var(--accent2, #6366F1);
  border-radius: 50%;
  animation: htmx-spin .65s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Layout inline del spinner nel filter row dividendi */
.dv-filter-spinner {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════════
   LIVE EXPERIENCE LAYER — FASE 6F v45.0.007
   Componenti per feedback visivo, skeleton, empty state premium,
   AlphaBot inline CTA, refresh action, live card indicator.
   ════════════════════════════════════════════════════════════ */

/* ── .ad-live-card — card con indicatore "live" pulsante ──────────────── */
.ad-live-card {
  position: relative;
}
.ad-live-card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 229, 160, .45);
  animation: adLivePulse 2.2s ease-in-out infinite;
}
@keyframes adLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.35; transform: scale(0.75); }
}

/* ── .ad-refresh-action — pulsante refresh inline compatto ───────────── */
.ad-refresh-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border2, #2d3048);
  background: transparent;
  color: var(--text-dim, #8b92b0);
  font-size: 11px;
  font-family: var(--mono);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--tx-normal, 150ms), border-color var(--tx-normal, 150ms),
              background var(--tx-normal, 150ms);
  line-height: 1;
}
.ad-refresh-action:hover {
  color: var(--text-bright, #dde3f0);
  border-color: var(--accent2, #6366f1);
  background: rgba(99, 102, 241, .04);
}
.ad-refresh-action.htmx-request,
.htmx-request .ad-refresh-action {
  color: var(--accent2, #6366f1);
  border-color: var(--accent2, #6366f1);
}

/* ── .ad-loading-skeleton — shimmer skeleton generico ────────────────── */
.ad-loading-skeleton {
  background: linear-gradient(
    90deg,
    var(--bg2, #111427) 25%,
    var(--border, #1d2436) 50%,
    var(--bg2, #111427) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm, 6px);
  animation: adSkelShimmer 1.6s ease-in-out infinite;
}
@keyframes adSkelShimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ── .ad-inline-feedback — sezione con feedback opacità su swap HTMX ── */
.ad-inline-feedback {
  transition: opacity var(--tx-normal, 150ms) ease;
}
.htmx-request .ad-inline-feedback,
.ad-inline-feedback.htmx-request {
  opacity: 0.35;
  pointer-events: none;
}

/* ── .ad-empty-premium — empty state premium con icon + CTA ─────────── */
.ad-empty-premium {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 12px);
  padding: var(--sp-10, 40px) var(--sp-4, 16px);
  text-align: center;
}
.ad-empty-premium .ad-empty-icon {
  width: 40px;
  height: 40px;
  opacity: 0.25;
  color: var(--text-dim);
}
.ad-empty-premium .ad-empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright, #dde3f0);
  margin: 0;
}
.ad-empty-premium .ad-empty-sub {
  font-size: 12px;
  color: var(--text-dim, #8b92b0);
  max-width: 280px;
  line-height: 1.55;
  margin: 0;
}

/* ── .ad-ask-bot-cta — mini "Spiegami / Chiedi ad AlphaBot" link ──────── */
.ad-ask-bot-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid transparent;
  background: rgba(99, 102, 241, .08);
  color: var(--accent2, #6366f1);
  font-size: 10px;
  font-family: var(--mono);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tx-normal, 150ms), border-color var(--tx-normal, 150ms);
  line-height: 1.4;
}
.ad-ask-bot-cta:hover {
  background: rgba(99, 102, 241, .15);
  border-color: rgba(99, 102, 241, .35);
  color: var(--accent2, #6366f1);
}


/* --- _bold.css ----------------------------------------- */
/* ==================================================================
   _bold.css - Layer estetico "Bold Premium Fintech"
   ------------------------------------------------------------------
   Caricato dopo _premium.css, prima di _responsive.css.
   Agisce SOLO su classi gia' esistenti (nessun markup nuovo).
   Effetti pesanti scopati a body:not(.light-mode) per preservare
   la light-mode. Nessun testo a colore trasparente (i numeri
   finanziari devono renderizzare sempre).
================================================================== */

/* --- SFONDO: profondita' piu' marcata (solo dark) --- */
body:not(.light-mode)::before {
  background:
    radial-gradient(ellipse 70% 45% at 18% -5%, #6366f11f 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 85% 0%, #00e5a012 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%, #38bdf80d 0%, transparent 60%) !important;
}

/* --- SECTION TITLE: accento piu' deciso --- */
.section-title::before {
  width: 4px; height: 16px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow: 0 0 12px var(--accent-glow);
}

/* --- METRIC CARDS: superficie a gradiente + hover energico --- */
body:not(.light-mode) .metric-card {
  background: linear-gradient(145deg, #0e1322 0%, #0a0d16 100%);
  border-color: #202840;
}
.metric-card { transition: transform .28s cubic-bezier(.34,1.4,.5,1), box-shadow .28s, border-color .28s; }
.metric-card:hover { transform: translateY(-4px); border-color: var(--border2); }
.metric-card.positive:hover { box-shadow: 0 18px 46px -20px var(--green-glow), 0 0 0 1px #00e5a033; }
.metric-card.negative:hover { box-shadow: 0 18px 46px -20px var(--red-glow), 0 0 0 1px #f43f5e33; }
.metric-card.neutral:hover  { box-shadow: 0 18px 46px -20px #38bdf855, 0 0 0 1px #38bdf833; }
.metric-card.info:hover     { box-shadow: 0 18px 46px -20px #fbbf2455, 0 0 0 1px #fbbf2433; }
/* barra d'accento superiore piu' spessa e luminosa */
.metric-card::before { height: 2px; opacity: .9; }
.metric-card.positive::before { box-shadow: 0 0 14px var(--green-glow); }
.metric-card.negative::before { box-shadow: 0 0 14px var(--red-glow); }
/* corner glow piu' presente */
.metric-card::after { width: 80px; height: 80px; opacity: .12; }
/* valore piu' imponente */
.metric-value { font-size: 28px; letter-spacing: -1.2px; text-shadow: 0 0 24px #00000040; }
.metric-value.positive { text-shadow: 0 0 22px var(--green-glow); }
.metric-value.negative { text-shadow: 0 0 22px var(--red-glow); }

/* --- TABELLE: header netto, hover di riga con accento --- */
body:not(.light-mode) thead tr {
  background: linear-gradient(180deg, #131826, #0e1220);
}
th { color: var(--text); letter-spacing: 1.8px; }
tbody tr { position: relative; transition: background .18s, box-shadow .18s; }
body:not(.light-mode) tbody tr:hover {
  background: linear-gradient(90deg, #6366f114, transparent 40%);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ticker badge: pill piu' luminoso */
.ticker-badge {
  background: linear-gradient(135deg, #6366f126, #6366f110);
  border-color: #6366f140;
  box-shadow: 0 0 0 1px #6366f112, 0 2px 8px -4px var(--accent-glow);
}

/* --- BOTTONI: primario premium con gradiente e glow --- */
.btn-primary {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 6px 20px -6px var(--accent-glow), 0 0 0 1px #ffffff10 inset;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8f99ff, var(--accent2));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -8px var(--accent-glow), 0 0 0 1px #ffffff18 inset;
}
.btn-success {
  background: linear-gradient(135deg, #34f0b8, var(--green));
  box-shadow: 0 6px 20px -6px var(--green-glow);
}
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px var(--green-glow); }

/* --- CARD/PANNELLI premium gia' presenti: bordo reattivo --- */
body:not(.light-mode) .closed-card {
  background: linear-gradient(145deg, #0e1322, #0a0d16);
}
.closed-card:hover { border-color: var(--accent); box-shadow: 0 12px 32px -18px var(--accent-glow); }

/* --- ticker tape / live badge: lieve glow di stato --- */
.live-badge, .badge-live { text-shadow: 0 0 10px var(--green-glow); }

/* --- DASHBOARD HERO (headline valore portafoglio) --- */
.dbh-hero{position:relative;overflow:hidden;margin-bottom:18px;padding:26px 28px;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#0e1322,#0a0d16);
  box-shadow:0 1px 0 #ffffff08 inset,0 20px 50px -34px #000;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.dbh-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--green),transparent);opacity:.8;}
body.light-mode .dbh-hero{background:var(--bg2);}
.dbh-label{font-family:var(--sans);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);}
.dbh-value{font-family:var(--mono);font-weight:600;font-size:clamp(30px,5.5vw,48px);letter-spacing:-2px;line-height:1.05;color:var(--text-white);margin-top:8px;}
.dbh-chip{display:inline-flex;align-items:center;gap:7px;margin-top:13px;padding:6px 13px;border-radius:999px;font-family:var(--mono);font-size:13px;font-weight:600;}
.dbh-chip i{width:14px;height:14px;stroke-width:2.2;display:inline-block;vertical-align:middle;}
.dbh-chip.pos{background:var(--green-glow);color:var(--green);border:1px solid #00e5a033;}
.dbh-chip.neg{background:var(--red-glow);color:var(--red);border:1px solid #f43f5e33;}
.dbh-meta{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start;}
.dbh-meta>div span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:5px;}
.dbh-meta>div b{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--text-bright);}
.dbh-meta>div b.pos{color:var(--green);}
.dbh-meta>div b.neg{color:var(--red);}
@media(max-width:640px){.dbh-meta{gap:16px;}.dbh-hero{padding:20px 18px;}}

/* ==================================================================
   LIGHT MODE PREMIUM (v46.0.029) - profondita' con ombre morbide
   (niente glow/neon: in chiaro si usa elevazione + hairline).
================================================================== */
body.light-mode .metric-card,
body.light-mode .closed-card {
  background: #ffffff; border-color: #e3e8f4;
  box-shadow: 0 1px 2px rgba(16,18,38,.04), 0 6px 16px -10px rgba(16,18,38,.18);
}
body.light-mode .metric-card:hover,
body.light-mode .closed-card:hover {
  border-color: #cfd7ec;
  box-shadow: 0 14px 32px -16px rgba(16,18,38,.22);
}
body.light-mode .metric-value { text-shadow: none; }
body.light-mode thead tr { background: #f3f5fb; }
body.light-mode tbody tr:hover {
  background: linear-gradient(90deg, #4f46e50d, transparent 42%);
  box-shadow: inset 3px 0 0 var(--accent);
}
body.light-mode .ticker-badge {
  background: #eef0fe; border-color: #d6dbfb; box-shadow: none;
}
body.light-mode .btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 6px 16px -6px rgba(79,70,229,.40);
}
body.light-mode .btn-success {
  background: linear-gradient(135deg, #10c98a, #00b87a);
  box-shadow: 0 6px 16px -6px rgba(0,184,122,.35); color: #fff;
}


/* --- _experience.css ----------------------------------------- */
/* ── _experience.css — Experience Foundation (Sprint 3) ──────────────────
   Componenti condivisi della nuova esperienza AlphaDesk, nati con le pagine
   di riferimento Truth Engine e Diario delle Decisioni.

   Principi (missione Experience Foundation):
   - gerarchia: eyebrow → h1 → lede → contenuto → azioni → metadati;
   - leggibilità: MAI testo funzionale sotto var(--fs-sm)=11px; il testo
     secondario usa --text (contrasto AA misurato ~6.7:1) — mai --text-dim
     (~2.2:1, bocciato dal contrast audit del Final Visual Gate);
   - densità: shell con max-width e padding fluido, griglie adattive;
   - identità: fondo scuro profondo, accenti esistenti, superfici elevate —
     nessun nuovo colore hardcoded, solo design token.

   Prefisso: xp- (experience). Tutto ciò che è condiviso vive QUI, non nei
   template (contratto testato: tests/test_experience_design.py).
──────────────────────────────────────────────────────────────────────── */

/* ── Shell di pagina ────────────────────────────────────────────────── */
.xp-shell{max-width:1160px;margin-inline:auto;
  padding:clamp(18px,3.5vw,40px) clamp(16px,4vw,44px) 56px;}

/* ── Intestazione di pagina ─────────────────────────────────────────── */
/* display:block esplicito: la shell globale stila l'elemento `header`
   (flex) e senza override l'intestazione di pagina si metterebbe in riga. */
.xp-header{display:block;margin-bottom:clamp(20px,3vw,32px);}
.xp-header-row{display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;}
.xp-eyebrow{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent2);margin-bottom:6px;}
.xp-title{font-family:var(--sans);font-size:clamp(24px,2.6vw,32px);font-weight:700;
  color:var(--text-white);margin:0;line-height:1.15;}
.xp-lede{font-family:var(--sans);font-size:var(--fs-lg);line-height:1.65;
  color:var(--text);max-width:62ch;margin:10px 0 0;}
.xp-lede b{color:var(--text-white);}

/* ── Pulsanti ───────────────────────────────────────────────────────── */
.xp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:var(--fs-md);font-weight:600;
  border-radius:var(--radius);padding:10px 18px;cursor:pointer;
  text-decoration:none;border:1px solid var(--border2);
  background:var(--bg3);color:var(--text-bright);
  transition:border-color .15s,background .15s,color .15s;}
.xp-btn:hover{border-color:var(--accent);color:var(--accent);}
.xp-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.xp-btn--primary{background:var(--accent2);border-color:var(--accent2);color:var(--bg);}
.xp-btn--primary:hover{box-shadow:0 0 14px var(--accent-glow);color:var(--bg);}
.xp-btn--ghost{background:transparent;border-color:transparent;color:var(--text);}
.xp-btn--ghost:hover{color:var(--accent);border-color:transparent;}
@media (pointer:coarse){.xp-btn{min-height:44px;}}

/* ── Card ───────────────────────────────────────────────────────────── */
.xp-card{background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 22px;
  transition:border-color .15s,transform .15s;}
a.xp-card{display:block;text-decoration:none;}
a.xp-card:hover,a.xp-card:focus-visible{border-color:var(--accent);outline:none;}
a.xp-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.xp-card--risk{border-left:3px solid var(--red);}
.xp-card--warn{border-left:3px solid var(--yellow);}
.xp-card--positive{border-left:3px solid var(--green);}
.xp-card--info{border-left:3px solid var(--blue);}

/* ── Griglia adattiva ───────────────────────────────────────────────── */
.xp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));}

/* ── Hero (verità primaria) ─────────────────────────────────────────── */
.xp-hero{background:linear-gradient(160deg,var(--bg-card),var(--bg2));
  border:1px solid var(--border2);border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,34px);margin-bottom:22px;position:relative;overflow:hidden;}
.xp-hero::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:var(--gradient-accent,var(--accent));}
.xp-hero-label{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent2);margin-bottom:10px;}
.xp-hero-text{font-family:var(--sans);font-size:clamp(18px,2vw,23px);font-weight:600;
  line-height:1.5;color:var(--text-white);max-width:56ch;}
.xp-hero-foot{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-top:18px;}

/* ── Badge di stato ─────────────────────────────────────────────────── */
.xp-badge{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;
  border-radius:999px;padding:4px 12px;border:1px solid var(--border2);
  color:var(--text-bright);background:var(--bg3);white-space:nowrap;}
.xp-badge--attiva{border-color:var(--green);color:var(--green);}
.xp-badge--bozza{border-color:var(--border2);color:var(--text);}
.xp-badge--in_riesame{border-color:var(--yellow);color:var(--yellow);}
.xp-badge--riesaminata{border-color:var(--blue);color:var(--blue);}
.xp-badge--chiusa{border-color:var(--text-muted);color:var(--text-muted);}
.xp-badge--due{border-color:var(--yellow);color:var(--yellow);}

/* ── Metadati leggibili (mai 9px) ───────────────────────────────────── */
.xp-meta{display:flex;flex-wrap:wrap;gap:6px 16px;
  font-family:var(--sans);font-size:12px;color:var(--text);line-height:1.5;}
.xp-meta b{color:var(--text-bright);font-weight:600;}

/* ── Chip evidenza (numeri della verità) ────────────────────────────── */
.xp-evidence{display:flex;flex-wrap:wrap;gap:8px;}
.xp-chip{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-bright);
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:4px 10px;}
.xp-chip b{color:var(--text-white);}

/* ── Disclosure (provenienza, dettagli tecnici) ─────────────────────── */
.xp-disclosure{border-top:1px solid var(--border);margin-top:16px;padding-top:10px;}
.xp-disclosure summary{font-family:var(--sans);font-size:12px;color:var(--text);
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;}
.xp-disclosure summary::-webkit-details-marker{display:none;}
.xp-disclosure summary::before{content:"▸";transition:transform .15s;color:var(--accent);}
.xp-disclosure[open] summary::before{transform:rotate(90deg);}
.xp-disclosure summary:hover{color:var(--text-bright);}
.xp-disclosure summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.xp-disclosure-body{font-family:var(--mono);font-size:var(--fs-sm);color:var(--text);
  line-height:1.6;padding:8px 0 2px;overflow-wrap:anywhere;}

/* ── Riepilogo (conteggi del Diario) ────────────────────────────────── */
.xp-stats{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  margin-bottom:22px;}
.xp-stat{background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:12px 16px;}
.xp-stat-value{font-family:var(--sans);font-size:var(--fs-2xl);font-weight:700;
  color:var(--text-white);line-height:1.2;}
.xp-stat-label{font-family:var(--sans);font-size:12px;color:var(--text);margin-top:2px;}
.xp-stat--due .xp-stat-value{color:var(--yellow);}

/* ── Filtri (link server-side, no JS) ───────────────────────────────── */
.xp-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.xp-filter{font-family:var(--sans);font-size:12px;font-weight:600;
  border:1px solid var(--border);border-radius:999px;padding:6px 14px;
  color:var(--text);text-decoration:none;background:var(--bg2);
  transition:border-color .15s,color .15s;}
.xp-filter:hover{border-color:var(--accent);color:var(--text-bright);}
.xp-filter:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.xp-filter[aria-current="true"]{border-color:var(--accent);color:var(--accent2);
  background:var(--accent-dim);}

/* ── Stato vuoto ────────────────────────────────────────────────────── */
.xp-empty{background:var(--bg2);border:1px dashed var(--border2);
  border-radius:var(--radius-lg);padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);
  text-align:center;max-width:560px;margin-inline:auto;}
.xp-empty-title{font-family:var(--sans);font-size:var(--fs-xl);font-weight:600;
  color:var(--text-white);margin:0 0 8px;}
.xp-empty-text{font-family:var(--sans);font-size:var(--fs-md);line-height:1.7;
  color:var(--text);margin:0 0 20px;}

/* ── Toggle registri (Principiante/Attivo/Esperto) ──────────────────── */
.xp-toggle{display:inline-flex;background:var(--bg2);border:1px solid var(--border);
  border-radius:999px;padding:3px;gap:2px;}
.xp-toggle-btn{font-family:var(--sans);font-size:12px;font-weight:600;
  border:none;background:transparent;border-radius:999px;padding:7px 16px;
  color:var(--text);cursor:pointer;transition:background .15s,color .15s;}
.xp-toggle-btn:hover{color:var(--text-bright);}
.xp-toggle-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.xp-toggle-btn[aria-pressed="true"]{background:var(--accent2);color:var(--bg);}
@media (pointer:coarse){.xp-toggle-btn{min-height:40px;}}

/* ── Form a sezioni ─────────────────────────────────────────────────── */
.xp-form{max-width:860px;}
.xp-fieldset{border:1px solid var(--border);border-radius:var(--radius-lg);
  background:var(--bg2);padding:20px 22px 22px;margin:0 0 18px;}
.xp-legend{font-family:var(--sans);font-size:var(--fs-md);font-weight:700;
  color:var(--text-white);padding:0 8px;}
.xp-legend-hint{display:block;font-family:var(--sans);font-size:12px;font-weight:400;
  color:var(--text);margin:4px 8px 12px;line-height:1.6;}
.xp-field{margin-bottom:16px;}
.xp-field:last-child{margin-bottom:0;}
.xp-label{display:block;font-family:var(--sans);font-size:var(--fs-md);font-weight:600;
  color:var(--text-white);margin-bottom:4px;}
.xp-hint{display:block;font-family:var(--sans);font-size:12px;color:var(--text);
  margin-bottom:6px;line-height:1.55;}
.xp-input,.xp-textarea,.xp-select{width:100%;background:var(--bg3);
  border:1px solid var(--border2);border-radius:var(--radius);padding:10px 12px;
  font-family:var(--sans);font-size:var(--fs-md);color:var(--text-bright);}
.xp-input:focus,.xp-textarea:focus,.xp-select:focus{border-color:var(--accent);
  outline:2px solid var(--accent);outline-offset:1px;}
.xp-textarea{min-height:76px;resize:vertical;}
.xp-form-grid{display:grid;gap:0 20px;}
@media (min-width:835px){.xp-form-grid{grid-template-columns:1fr 1fr;}}
.xp-form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.xp-error{font-family:var(--sans);font-size:var(--fs-md);color:var(--warn-color);
  background:var(--warn-bg);border:1px solid var(--warn-border);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:18px;line-height:1.5;}

/* ── Dettaglio: contenuto + colonna laterale ────────────────────────── */
.xp-detail{display:grid;gap:18px;align-items:start;}
@media (min-width:1024px){.xp-detail{grid-template-columns:minmax(0,1fr) 300px;}}
.xp-section{background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px;}
.xp-section:last-child{margin-bottom:0;}
.xp-q{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--text);margin:0 0 8px;}
.xp-a{font-family:var(--sans);font-size:var(--fs-lg);line-height:1.7;
  color:var(--text-white);white-space:pre-line;margin:0;overflow-wrap:anywhere;}
.xp-a--vuoto{color:var(--text);font-style:italic;font-size:var(--fs-md);}
.xp-side{position:sticky;top:80px;display:flex;flex-direction:column;gap:14px;}
.xp-side-card{background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px 18px;}
.xp-side-title{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--text);margin:0 0 10px;}
.xp-actions{display:flex;flex-direction:column;gap:8px;}
.xp-actions form{display:contents;}
.xp-back{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:var(--fs-md);color:var(--text);
  text-decoration:none;margin-bottom:14px;}
.xp-back:hover{color:var(--accent);}
.xp-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ── Indicatore di confidenza dichiarata ────────────────────────────── */
.xp-conf{display:flex;align-items:center;gap:10px;}
.xp-conf-dots{display:inline-flex;gap:4px;}
.xp-conf-dot{width:10px;height:10px;border-radius:50%;
  background:var(--bg3);border:1px solid var(--border2);}
.xp-conf-dot--on{background:var(--accent);border-color:var(--accent);}
.xp-conf-label{font-family:var(--sans);font-size:12px;color:var(--text-bright);}

/* ── Varianti di registro (Principiante/Attivo/Esperto) ─────────────── */
.xp-variant{display:none;}
.xp-variant--shown{display:inline;}

/* ── Testo card e titoli di sezione griglia ─────────────────────────── */
.xp-card-text{font-family:var(--sans);font-size:var(--fs-md);line-height:1.65;
  color:var(--text-white);margin:0 0 4px;overflow-wrap:anywhere;}
.xp-card-cta{margin-top:12px;}
.xp-grid-title{font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:var(--text);
  margin:26px 0 12px;}

/* ── Decision Intelligence Home (Sprint 4) ──────────────────────────── */
/* Sezione della Dashboard: priorità di oggi + verità sintetica + riesami
   + riepilogo del Diario. Vive nel flusso della dashboard (nessuna shell:
   il contenitore è quello della pagina ospite). */
.xp-home{margin:26px 0;}
.xp-home-grid{display:grid;gap:14px;align-items:stretch;}
@media (min-width:900px){.xp-home-grid{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}}
.xp-home-col{display:flex;flex-direction:column;gap:14px;min-width:0;}
.xp-priority{border-left-width:4px;}
.xp-priority--scaduto,.xp-priority--in_riesame{border-left:4px solid var(--yellow);}
.xp-priority--verita{border-left:4px solid var(--accent2);}
.xp-priority--prossimo{border-left:4px solid var(--blue);}
.xp-priority--nulla{border-left:4px solid var(--green);}
.xp-home-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.xp-home-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;
  list-style:none;}
.xp-home-item{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:10px 14px;}
.xp-home-item-title{flex:1 1 160px;min-width:0;font-family:var(--sans);
  font-size:var(--fs-md);font-weight:600;color:var(--text-white);
  text-decoration:none;overflow-wrap:anywhere;}
.xp-home-item-title:hover,.xp-home-item-title:focus-visible{color:var(--accent2);
  outline:none;}
.xp-home-counts{display:flex;flex-wrap:wrap;gap:8px;}
.xp-home-count{display:inline-flex;align-items:baseline;gap:6px;
  font-family:var(--sans);font-size:12px;color:var(--text);
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px 10px;text-decoration:none;}
.xp-home-count b{font-size:var(--fs-lg);color:var(--text-white);}
a.xp-home-count:hover,a.xp-home-count:focus-visible{border-color:var(--accent);
  outline:none;}
.xp-home-note{font-family:var(--sans);font-size:12px;color:var(--text);
  line-height:1.6;margin:0;}

/* ── Movimento ridotto ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .xp-btn,.xp-card,.xp-toggle-btn,.xp-filter,
  .xp-disclosure summary::before{transition:none;}
}


/* --- _responsive.css ----------------------------------------- */
/* ══════════════════════════════════════════════════════════════════
   _responsive.css — Sistema responsive unificato (desktop · iPad · phone)
   ────────────────────────────────────────────────────────────────────
   Caricato PER ULTIMO nel bundle: sovrascrive per ordine sorgente le
   regole sparse pre-esistenti senza rimuoverle (additivo, basso rischio).

   SCALA BREAKPOINT CANONICA — usare SOLO questi valori nei nuovi @media:
     ≤640px            phone
     641–834px         iPad portrait
     835–1024px        iPad landscape / laptop piccolo
     1025–1440px       desktop standard
     ≥1441px           desktop largo / ultrawide
   Rilevamento touch indipendente dalla larghezza: @media (pointer:coarse)
══════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP LARGO / ULTRAWIDE ≥1441 ──────────────────────────────────
   Il container era max-width:1440 + padding fisso 28px: su monitor grandi
   il contenuto restava stretto al centro. Ora si allarga e il padding scala. */
@media (min-width: 1441px) {
  .container      { max-width: 1680px; padding: 32px clamp(28px, 4vw, 64px); }
  .metrics-grid   { gap: 20px; }
  .closed-grid    { gap: 18px; }
}

/* ── iPAD LANDSCAPE / LAPTOP PICCOLO 835–1024 ─────────────────────────
   FASCIA PRIMA NON GESTITA: ereditava il trattamento "tablet ≤1024" a 2
   colonne, sprecando la larghezza. Ora sfrutta lo spazio reale. */
@media (min-width: 835px) and (max-width: 1024px) {
  .container        { padding: 24px 28px; }
  .metrics-grid     { grid-template-columns: repeat(4, 1fr) !important; gap: 16px; }
  .closed-grid      { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .criteria-grid    { grid-template-columns: repeat(4, 1fr) !important; }
  .posizione-metrics{ grid-template-columns: repeat(4, 1fr) !important; }
  .segnale-livelli  { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── iPAD PORTRAIT 641–834 ────────────────────────────────────────────
   Due colonne ariose: equilibrio fra densità desktop e leggibilità phone. */
@media (min-width: 641px) and (max-width: 834px) {
  .container        { padding: 22px 22px; }
  .metrics-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .closed-grid      { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .criteria-grid    { grid-template-columns: repeat(3, 1fr) !important; }
  .posizione-metrics{ grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── PHONE ≤640 — leggibilità ─────────────────────────────────────────
   Le intestazioni tabella erano 8–9px (illeggibili): portate a 10px.
   Padding celle ridotto ma comodo; valori metriche già gestiti altrove. */
@media (max-width: 640px) {
  th { font-size: 10px !important; padding: 11px 12px; letter-spacing: 1.2px; }
  td { padding: 13px 12px; font-size: 12.5px; }
  .denom { max-width: 140px; }
  .section-title { font-size: 10px; letter-spacing: 1.8px; }
}

/* ── TOUCH (qualsiasi device a puntatore grosso: phone + tutti gli iPad) ─
   Target ≥44px secondo le linee guida Apple/WCAG, a prescindere dalla
   larghezza schermo. min-height non altera il flusso desktop (mouse). */
@media (pointer: coarse) {
  .btn,
  .btn-row .btn,
  .op-action-btn,
  .nav-ico,
  .bottom-nav a,
  .ticker-badge,
  button:not(.toast-close) { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* ── ACCESSIBILITÀ — rispetta "riduci animazioni" del sistema ─────────── */
@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;
  }
}

/* ==================================================================
   PHONE <=640 - TABELLE USABILI COL DITO (v46.0.027)
   Risolve: (1) tabelle che fanno sforare la pagina in orizzontale,
   (2) scroll touch che non si controlla, (3) bottoni in cella che
   non rispondono al tap. Nessun markup nuovo.
================================================================== */
@media (max-width: 640px) {

  /* (1) CONTENIMENTO: nessuna tabella deve allargare la PAGINA.
     Le tabelle "nude" o generate via JS (matrice rischio, mkt-table,
     piano_rischio) si adattano alla larghezza; solo quelle dentro un
     contenitore scrollano internamente. Vince sul global min-width:560. */
  table { min-width: 0; }
  .table-wrap table,
  .table-scroll table { min-width: 540px; }

  /* (2) SCROLL TOUCH controllabile e contenuto */
  .table-wrap,
  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: clip;                 /* evita il quirk auto+visible */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;   /* non trascina la pagina sotto */
    scrollbar-width: thin;
  }
  .table-wrap::-webkit-scrollbar { height: 7px; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

  /* Prima colonna "appiccicata": resta visibile mentre scorri a destra,
     cosi sai sempre a quale titolo/riga appartengono i numeri */
  .table-wrap td:first-child,
  .table-wrap th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--bg2);
    box-shadow: 6px 0 10px -7px #000000aa;
  }
  .table-wrap thead th:first-child { background: var(--bg3); }

  /* (3) BOTTONI/AZIONI nelle celle: area tap >=40px e tap immediato
     (no delay, niente furto del gesto da parte dello scroll). */
  td .op-action-btn,
  td .btn-icon,
  td button.hm-icon-btn,
  td .btn,
  td button {
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  td .op-action-btn, td .btn-icon, td button, td .btn, td a {
    touch-action: manipulation;
  }
  /* spaziatura tra azioni multiple in riga (operativita) per non fallire il tap */
  td .op-action-btn + .op-action-btn { margin-left: 8px; }
}