/* ═══════════════════════════════════════════════════════════════════════
   Tema "nuovo" - "Registro operativo"
   Attivo solo con <html data-ui="nuovo"> (branding.ui_theme = "nuovo").
   Senza l'attributo nessuna regola si applica: il tema classico resta
   quello di styles.css.

   Mondo: banco di lavoro sereno e preciso. Fondo ardesia fredda, cornice
   blu notte, un solo colore d'azione (--blue, dal branding), superfici
   piatte con bordo sottile, ombre solo su ciò che galleggia. Icone SVG a
   tratto unico (js/theme-nuovo.js) al posto delle emoji. Numeri tabulari.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Token ─────────────────────────────────────────────────────────────── */
html[data-ui="nuovo"] {
  --nv-frame: #0f1a33;          /* cornice: header */
  --nv-frame-2: #16234a;
  --nv-frame-line: rgba(255,255,255,.09);
  --nv-frame-ink: #e8eefb;
  --nv-frame-dim: rgba(232,238,251,.58);

  --bg: #eef1f6;                /* piano di lavoro */
  --bg2: #f6f8fb;               /* secondo livello: barre, intestazioni */
  --card: #ffffff;
  --border: #e1e6ee;
  --border2: #cdd5e1;
  --text: #0e1626;
  --text-muted: #4f5b70;
  --text-dim: #7d889b;
  --nv-accent: var(--blue);
  --nv-accent-ink: #ffffff;
  --nv-tint: color-mix(in srgb, var(--blue) 8%, transparent);
  --nv-tint-2: color-mix(in srgb, var(--blue) 14%, transparent);
  --nv-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 22%, transparent);
  --nv-float: 0 1px 2px rgba(15,26,51,.06), 0 12px 32px -8px rgba(15,26,51,.18);
  --nv-raise: 0 1px 2px rgba(15,26,51,.05), 0 2px 6px -2px rgba(15,26,51,.06);
  --nv-ok: #15803d; --nv-ok-bg: #ecfdf3;
  --nv-warn: #b45309; --nv-warn-bg: #fff7e8;
  --nv-err: #b91c1c; --nv-err-bg: #fef2f2;
  --nv-r-sm: 6px; --nv-r: 10px; --nv-r-lg: 14px;
  --nv-ease: cubic-bezier(.2,.8,.2,1);
  --glass-bg: var(--card); --glass-border: var(--border);
  --shadow-sm: var(--nv-raise); --shadow: var(--nv-float);
  accent-color: var(--blue);
}
html[data-ui="nuovo"] body.dark {
  --nv-frame: #0a1122;
  --nv-frame-2: #111b36;
  --bg: #0b111d;
  --bg2: #111827;
  --card: #151e2e;
  --border: #223047;
  --border2: #2e3f5b;
  --text: #e4ebf7;
  --text-muted: #a3b1c7;
  --text-dim: #6f7f98;
  --nv-tint: color-mix(in srgb, var(--blue) 16%, transparent);
  --nv-tint-2: color-mix(in srgb, var(--blue) 26%, transparent);
  --nv-float: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -8px rgba(0,0,0,.6);
  --nv-raise: 0 1px 2px rgba(0,0,0,.35);
  --nv-ok: #4ade80; --nv-ok-bg: rgba(74,222,128,.1);
  --nv-warn: #fbbf24; --nv-warn-bg: rgba(251,191,36,.1);
  --nv-err: #f87171; --nv-err-bg: rgba(248,113,113,.1);
  --glass-bg: var(--card); --glass-border: var(--border);
}

/* ── Icone ─────────────────────────────────────────────────────────────── */
html[data-ui="nuovo"] .nv-ic {
  width: 1.05em; height: 1.05em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.16em;
}
/* Nel testo l'icona porta il suo spazio; nei contenitori flex con gap no */
html[data-ui="nuovo"] .nv-ic { margin-inline-end: .42em; }
html[data-ui="nuovo"] .nv-ic-after { margin-inline: .4em 0; }
html[data-ui="nuovo"] header .nv-ic,
html[data-ui="nuovo"] .tb-ic .nv-ic,
html[data-ui="nuovo"] .view-btn .nv-ic,
html[data-ui="nuovo"] .qf-chip .nv-ic,
html[data-ui="nuovo"] .fav-chip .nv-ic,
html[data-ui="nuovo"] .sh-tab .nv-ic,
html[data-ui="nuovo"] .es-card-hd .nv-ic,
html[data-ui="nuovo"] .input-row .nv-ic,
html[data-ui="nuovo"] .hist-icon .nv-ic,
html[data-ui="nuovo"] .btn-collapse .nv-ic,
html[data-ui="nuovo"] .wiz-close .nv-ic { margin: 0; }
html[data-ui="nuovo"] #sendBtn .nv-ic { margin: 0 0 0 2px; width: .95em; height: .95em; }
html[data-ui="nuovo"] .nv-ic-loader { animation: nv-spin .9s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }

/* ── Superfici del browser ─────────────────────────────────────────────── */
html[data-ui="nuovo"] ::selection { background: color-mix(in srgb, var(--blue) 24%, transparent); color: inherit; }
html[data-ui="nuovo"] body { caret-color: var(--blue); }
html[data-ui="nuovo"] * { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
html[data-ui="nuovo"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-ui="nuovo"] ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
html[data-ui="nuovo"] ::-webkit-scrollbar-track { background: transparent; }
html[data-ui="nuovo"] :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Sfondo piatto: niente aurora né bagliori */
html[data-ui="nuovo"] body,
html[data-ui="nuovo"] body.dark { background: var(--bg); letter-spacing: -0.011em; }
html[data-ui="nuovo"] body.dark::before,
html[data-ui="nuovo"] .background-glow,
html[data-ui="nuovo"] .aurora-wrap { display: none !important; }

/* ═══ HEADER ═════════════════════════════════════════════════════════════ */
html[data-ui="nuovo"] header,
html[data-ui="nuovo"] body.dark header {
  background: var(--nv-frame);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--nv-frame-line);
  box-shadow: none;
  height: 56px; gap: 12px; padding: 0 16px;
  color: var(--nv-frame-ink);
}
html[data-ui="nuovo"] .logo-box-mini {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--nv-frame-line);
  box-shadow: none;
}
html[data-ui="nuovo"] .logo-box-mini::before,
html[data-ui="nuovo"] .logo-box-mini::after { display: none; }
html[data-ui="nuovo"] .header-title,
html[data-ui="nuovo"] .header-title.gradient-text {
  background: none; color: var(--nv-frame-ink); -webkit-text-fill-color: var(--nv-frame-ink);
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em;
}
html[data-ui="nuovo"] .header-sub,
html[data-ui="nuovo"] .header-sub .highlight,
html[data-ui="nuovo"] .header-sub #appVersion {
  color: var(--nv-frame-dim); -webkit-text-fill-color: var(--nv-frame-dim);
  background: none; font-size: .68rem; font-weight: 500;
}
html[data-ui="nuovo"] .header-sub #appVersion { font-variant-numeric: tabular-nums; }

/* Comandi nella cornice: un'unica famiglia, 32px, contorno sottile */
html[data-ui="nuovo"] header .pill,
html[data-ui="nuovo"] header .company-select,
html[data-ui="nuovo"] header #btnLang,
html[data-ui="nuovo"] header .btn-home,
html[data-ui="nuovo"] header .btn-dark-toggle {
  height: 32px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--nv-frame-line) !important;
  color: var(--nv-frame-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-family: var(--sans) !important; font-size: .75rem !important; font-weight: 500;
  transition: background .15s var(--nv-ease), border-color .15s var(--nv-ease);
}
html[data-ui="nuovo"] header .pill { padding: 0 11px; gap: 7px; }
html[data-ui="nuovo"] header .pill .pill-label { color: var(--nv-frame-dim); font-weight: 500; }
html[data-ui="nuovo"] header .pill span { color: var(--nv-frame-ink); }
html[data-ui="nuovo"] header .pill.ok,
html[data-ui="nuovo"] header .pill.err { background: rgba(255,255,255,.06) !important; }
html[data-ui="nuovo"] header .pill-dot.green { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
html[data-ui="nuovo"] header .pill-dot.red { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.2); }
html[data-ui="nuovo"] header .company-select { padding: 0 28px 0 10px; }
html[data-ui="nuovo"] header .company-select option,
html[data-ui="nuovo"] header #btnLang option { color: #0e1626; background: #fff; }
html[data-ui="nuovo"] header .company-selector > span { color: var(--nv-frame-dim) !important; display: inline-flex; font-size: 1rem !important; }
html[data-ui="nuovo"] header .btn-home,
html[data-ui="nuovo"] header .btn-dark-toggle {
  width: 32px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem !important;
}
html[data-ui="nuovo"] header .pill:hover,
html[data-ui="nuovo"] header .btn-home:hover,
html[data-ui="nuovo"] header .btn-dark-toggle:hover,
html[data-ui="nuovo"] header .company-select:hover,
html[data-ui="nuovo"] header #btnLang:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.18) !important; }
html[data-ui="nuovo"] #userInfo { color: var(--nv-frame-dim) !important; gap: 2px !important; }
html[data-ui="nuovo"] #currentUserLabel {
  color: var(--nv-frame-ink) !important; border-bottom: none !important;
  font-weight: 500; padding: 6px 10px; border-radius: 8px; margin-right: 4px;
  display: inline-flex; align-items: center; gap: 6px;
}
html[data-ui="nuovo"] #currentUserLabel:hover { background: rgba(255,255,255,.08); }
html[data-ui="nuovo"] header .btn-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; box-shadow: none;
  color: var(--nv-frame-dim); font-size: 1rem;
  transition: background .15s var(--nv-ease), color .15s var(--nv-ease);
}
html[data-ui="nuovo"] header .btn-icon:hover { background: rgba(255,255,255,.1); color: #fff; }
html[data-ui="nuovo"] header .btn-icon:last-child:hover { background: rgba(248,113,113,.18); color: #fecaca; }
html[data-ui="nuovo"] header :focus-visible { outline-color: #fff; }

/* ═══ BARRA LATERALE ═════════════════════════════════════════════════════ */
html[data-ui="nuovo"] #sidebar,
html[data-ui="nuovo"] body.dark #sidebar {
  background: var(--bg2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-right: 1px solid var(--border);
  box-shadow: none;
}
html[data-ui="nuovo"] .sidebar-header { height: 48px; border-bottom: 1px solid var(--border); padding: 0 8px 0 14px; }
html[data-ui="nuovo"] .sidebar-label { font-size: .7rem; letter-spacing: .08em; font-weight: 700; color: var(--text-dim); }
html[data-ui="nuovo"] .btn-collapse {
  width: 28px; height: 28px; border-radius: 7px !important; background: transparent !important;
  border: 1px solid transparent !important; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center;
}
html[data-ui="nuovo"] .btn-collapse:hover { background: var(--card) !important; border-color: var(--border) !important; color: var(--text); }
html[data-ui="nuovo"] .sidebar-new-wrap { padding: 12px 12px 8px; }
html[data-ui="nuovo"] .btn-new-session {
  height: 36px; justify-content: center; border-radius: 8px;
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  font-weight: 600; font-size: .8rem; box-shadow: var(--nv-raise);
}
html[data-ui="nuovo"] .btn-new-session:hover { background: var(--card); border-color: var(--blue); color: var(--blue); }
html[data-ui="nuovo"] .sidebar-search-wrap { padding: 0 12px 8px; }
html[data-ui="nuovo"] .hist-search {
  height: 34px; border-radius: 8px; background: var(--card); border: 1px solid var(--border);
  padding: 0 10px; font-size: .8rem;
}
html[data-ui="nuovo"] .hist-search:focus { border-color: var(--blue); box-shadow: var(--nv-ring); }
html[data-ui="nuovo"] .hist-date-sep { font-size: .66rem; letter-spacing: .08em; color: var(--text-dim); padding: 12px 8px 4px; border: none; }
html[data-ui="nuovo"] .hist-item { border-radius: 8px; padding: 8px 10px; border: 1px solid transparent; gap: 9px; }
html[data-ui="nuovo"] .hist-item:hover { background: var(--card); border-color: var(--border); }
html[data-ui="nuovo"] .hist-item.active-session { background: var(--card); border-color: var(--border); box-shadow: var(--nv-raise); }
html[data-ui="nuovo"] .hist-item.active-session .hist-title { color: var(--blue); }
html[data-ui="nuovo"] .hist-icon { color: var(--text-dim); font-size: .95rem; }
html[data-ui="nuovo"] .hist-title { font-size: .8rem; font-weight: 500; color: var(--text); }
html[data-ui="nuovo"] .hist-meta { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: .68rem; }
html[data-ui="nuovo"] .hist-current-badge { background: var(--nv-tint-2); color: var(--blue); border-radius: 4px; font-weight: 600; }
html[data-ui="nuovo"] .sidebar-fav-section { border-top: 1px solid var(--border); }
html[data-ui="nuovo"] .sidebar-fav-hd { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); padding: 10px 14px; }
html[data-ui="nuovo"] .sidebar-fav-btn:hover { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-ui="nuovo"] .sidebar-fav-icon { color: #d99a1b; }
html[data-ui="nuovo"] .sidebar-fab { background: var(--card); border: 1px solid var(--border); box-shadow: var(--nv-float); color: var(--text-muted); }

/* ═══ STATO VUOTO ════════════════════════════════════════════════════════ */
html[data-ui="nuovo"] .empty-state-wrap {
  align-items: stretch; justify-content: center; text-align: left;
  max-width: 980px; width: 100%; margin: 0 auto; padding: 48px 32px;
}
html[data-ui="nuovo"] .empty-state-greeting {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2;
  color: var(--text); margin-bottom: 6px; text-wrap: balance;
}
html[data-ui="nuovo"] .empty-state-sub { font-size: .92rem; color: var(--text-muted); margin-bottom: 28px; }
html[data-ui="nuovo"] .empty-state-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0; padding: 0; max-width: none; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-raise); overflow: hidden;
}
html[data-ui="nuovo"] .es-card,
html[data-ui="nuovo"] .es-card:hover {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 0; box-shadow: none !important; transform: none;
  min-width: 0; max-width: none; padding: 18px 14px 14px; cursor: default;
}
html[data-ui="nuovo"] .es-card + .es-card { border-left: 1px solid var(--border); }
html[data-ui="nuovo"] .es-card::after { display: none; }
html[data-ui="nuovo"] .es-card-hd {
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--text);
  border-bottom: none; padding: 0 8px 8px; margin: 0;
}
html[data-ui="nuovo"] .es-card-hd .nv-ic {
  width: 26px; height: 26px; padding: 5px; border-radius: 7px;
  background: var(--nv-tint); color: var(--blue); stroke-width: 1.9;
}
html[data-ui="nuovo"] .es-cmds-list { height: auto; max-height: 220px; gap: 1px; }
html[data-ui="nuovo"] .es-cmd {
  position: relative; padding: 8px 28px 8px 10px; border-radius: 7px;
  font-size: .84rem; color: var(--text-muted);
  transition: background .15s var(--nv-ease), color .15s var(--nv-ease);
}
html[data-ui="nuovo"] .es-cmd::after {
  content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px;
  border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor;
  transform: translate(-4px, -50%) rotate(45deg); opacity: 0;
  transition: opacity .15s var(--nv-ease), transform .15s var(--nv-ease);
}
html[data-ui="nuovo"] .es-cmd:hover { background: var(--nv-tint); color: var(--text); }
html[data-ui="nuovo"] .es-cmd:hover::after { opacity: .7; transform: translate(0, -50%) rotate(45deg); }
html[data-ui="nuovo"] .empty-state-wrap > p[data-i18n="slash_hint"] { text-align: left; color: var(--text-dim) !important; }
html[data-ui="nuovo"] .recent-sess-pill { border-radius: 8px; background: var(--card); }

/* ═══ CONVERSAZIONE ══════════════════════════════════════════════════════ */
html[data-ui="nuovo"] #messages { padding: 28px 28px; gap: 18px; }
/* Le risposte con tabella o grafico usano tutta la larghezza disponibile */
html[data-ui="nuovo"] .msg.bot:has(.result-block) { max-width: 100%; width: 100%; }
html[data-ui="nuovo"] .msg.bot:has(.result-block) > .bubble { width: 100%; }
html[data-ui="nuovo"] .msg { animation: nv-in .22s var(--nv-ease); }
@keyframes nv-in { from { opacity: 0; transform: translateY(6px); } }
html[data-ui="nuovo"] .msg.user .bubble {
  background: var(--nv-frame-2); color: #f3f6fd;
  border-radius: 14px 14px 4px 14px; box-shadow: none;
  font-size: .9rem; font-weight: 500; padding: 10px 15px;
}
html[data-ui="nuovo"] body.dark .msg.user .bubble { background: color-mix(in srgb, var(--blue) 32%, #152040); }
html[data-ui="nuovo"] .msg.bot > .bubble,
html[data-ui="nuovo"] body.dark .msg.bot > .bubble {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-raise);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 16px 18px;
}
html[data-ui="nuovo"] .msg-time { font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: .68rem; }
html[data-ui="nuovo"] .msg-replay { border-radius: 6px; background: var(--card); color: var(--text-dim); }

/* La risposta testuale porta già la sua superficie: niente riquadro doppio */
html[data-ui="nuovo"] .msg.bot > .bubble:has(> .text-answer),
html[data-ui="nuovo"] body.dark .msg.bot > .bubble:has(> .text-answer) {
  background: transparent; border: none; box-shadow: none; padding: 0;
}
html[data-ui="nuovo"] .bubble.text-answer { box-shadow: var(--nv-raise); border-radius: var(--nv-r-lg); padding: 16px 18px; }

/* Risposta testuale e messaggi di stato */
html[data-ui="nuovo"] .bubble.text-answer {
  background: var(--card); border: 1px solid var(--border); color: var(--text);
}
html[data-ui="nuovo"] .bubble.text-answer .ta-icon { color: var(--blue); }
html[data-ui="nuovo"] .bubble.text-answer .ta-badge {
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  background: var(--nv-tint); color: var(--blue); border: none; border-radius: 999px; padding: 2px 9px;
}
html[data-ui="nuovo"] .bubble.text-answer .ta-badge.ta-badge-empty { background: var(--bg2); color: var(--text-muted); border: 1px solid var(--border); }
html[data-ui="nuovo"] .result-note { border-left: none; background: var(--bg2); border-radius: 8px; padding: 8px 12px; color: var(--text-muted); }

/* Schede Tabella / Barre / Torta / Linee: controllo segmentato */
html[data-ui="nuovo"] .view-switcher {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 9px;
  width: fit-content;
}
html[data-ui="nuovo"] .view-btn {
  height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid transparent; border-radius: 7px; box-shadow: none;
  color: var(--text-muted); font-weight: 600; font-size: .76rem;
  transition: background .15s var(--nv-ease), color .15s var(--nv-ease);
}
html[data-ui="nuovo"] .view-btn:hover:not(.active) { color: var(--text); background: transparent; }
html[data-ui="nuovo"] .view-btn.active { background: var(--card); color: var(--text); border-color: var(--border); box-shadow: var(--nv-raise); }
html[data-ui="nuovo"] .view-btn.active .nv-ic { color: var(--blue); }

/* Tabella dati */
html[data-ui="nuovo"] .result-wrap {
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--nv-r) var(--nv-r) 0 0; background: var(--card); box-shadow: none;
  max-height: 360px;
}
html[data-ui="nuovo"] .result-wrap table { font-size: .82rem; font-variant-numeric: tabular-nums; }
html[data-ui="nuovo"] .result-wrap th { background: var(--bg2); color: var(--text-muted); border-bottom: 1px solid var(--border); }
html[data-ui="nuovo"] .result-wrap .th-label {
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 10px 12px 5px; color: var(--text-muted);
}
html[data-ui="nuovo"] .result-wrap .th-label:hover { color: var(--text); }
html[data-ui="nuovo"] .result-wrap .sort-icon { opacity: .35; }
html[data-ui="nuovo"] .result-wrap .th-filter input {
  height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--card);
  font-family: var(--sans); font-size: .72rem; padding: 0 8px; color: var(--text);
}
html[data-ui="nuovo"] .result-wrap .th-filter input:focus { border-color: var(--blue); box-shadow: var(--nv-ring); }
html[data-ui="nuovo"] .result-wrap td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
html[data-ui="nuovo"] .result-wrap tbody tr:nth-child(even),
html[data-ui="nuovo"] .result-wrap tbody tr:nth-child(even) td { background: transparent; }
html[data-ui="nuovo"] .result-wrap tbody tr { transition: background .12s var(--nv-ease); }
html[data-ui="nuovo"] .result-wrap tbody tr:hover td { background: var(--nv-tint); }
html[data-ui="nuovo"] .result-wrap td.numeric,
html[data-ui="nuovo"] .result-wrap td.currency,
html[data-ui="nuovo"] .result-wrap td.percent { font-family: var(--sans); font-size: .82rem; font-variant-numeric: tabular-nums; }
html[data-ui="nuovo"] .result-wrap td.currency { color: var(--text); font-weight: 600; }
html[data-ui="nuovo"] .result-wrap td.percent { color: var(--nv-ok); font-weight: 600; }
html[data-ui="nuovo"] .result-wrap td.sap-link,
html[data-ui="nuovo"] .result-wrap .sap-link { color: var(--blue); font-weight: 600; cursor: pointer; }
html[data-ui="nuovo"] .result-wrap td.sap-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-ui="nuovo"] .result-wrap .sap-arrow { font-size: 0; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M10 14 21 3M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="nuovo"] .tfoot-totals td {
  background: var(--bg2); border-top: 1px solid var(--border2); border-bottom: none;
  font-weight: 700; color: var(--text);
}
html[data-ui="nuovo"] .tfoot-totals .tfoot-label { font-style: normal; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }

/* Grafici */
html[data-ui="nuovo"] .chart-wrap,
html[data-ui="nuovo"] body.dark .chart-wrap {
  background: var(--card); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--nv-r) var(--nv-r) 0 0;
}

/* Barra azioni sotto il risultato */
html[data-ui="nuovo"] .result-toolbar {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 0 0 var(--nv-r) var(--nv-r); padding: 8px 10px; gap: 6px;
}
html[data-ui="nuovo"] .export-btn {
  height: 30px; padding: 0 10px; gap: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 7px; box-shadow: none;
  color: var(--text-muted); font-weight: 600; font-size: .76rem;
  transition: border-color .15s var(--nv-ease), color .15s var(--nv-ease), background .15s var(--nv-ease);
}
html[data-ui="nuovo"] .export-btn:hover:not(:disabled) { background: var(--card); border-color: var(--border2); color: var(--text); }
html[data-ui="nuovo"] .export-btn .tb-ic { display: inline-flex; color: var(--text-dim); font-size: .95rem; }
html[data-ui="nuovo"] .export-btn:hover .tb-ic { color: var(--blue); }
html[data-ui="nuovo"] .export-btn.tb-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-ui="nuovo"] .export-btn.tb-primary .tb-ic { color: #fff; }
html[data-ui="nuovo"] .export-btn.tb-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 88%, #000); color: #fff; }
html[data-ui="nuovo"] .export-btn.tb-square { width: 30px; padding: 0; justify-content: center; }
html[data-ui="nuovo"] .export-btn.is-active .tb-ic { color: #d99a1b; }
html[data-ui="nuovo"] .export-btn.is-up { background: var(--nv-ok-bg); border-color: color-mix(in srgb, var(--nv-ok) 40%, transparent); color: var(--nv-ok); }
html[data-ui="nuovo"] .export-btn.is-down { background: var(--nv-err-bg); border-color: color-mix(in srgb, var(--nv-err) 40%, transparent); color: var(--nv-err); }
html[data-ui="nuovo"] .export-btn.is-up .tb-ic,
html[data-ui="nuovo"] .export-btn.is-down .tb-ic { color: inherit; }
html[data-ui="nuovo"] .toolbar-sep { background: var(--border); height: 18px; }
html[data-ui="nuovo"] .row-badge {
  height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--nv-ok-bg); color: var(--nv-ok); border: 1px solid color-mix(in srgb, var(--nv-ok) 22%, transparent);
  font-family: var(--sans); font-weight: 600; font-size: .72rem; font-variant-numeric: tabular-nums;
}
html[data-ui="nuovo"] .tb-dd-menu { border-radius: 10px; border: 1px solid var(--border); box-shadow: var(--nv-float); padding: 4px; }
html[data-ui="nuovo"] .tb-dd-menu button { border-radius: 6px; font-size: .8rem; padding: 7px 10px; }
html[data-ui="nuovo"] .tb-dd-menu button:hover { background: var(--nv-tint); color: var(--text); }

/* SQL e spiegazione */
html[data-ui="nuovo"] .sql-box { border-radius: var(--nv-r); border: 1px solid var(--border); background: var(--bg2); }

/* Domande correlate */
html[data-ui="nuovo"] .suggestions-wrap { border-top: 1px solid var(--border) !important; padding-top: 12px; margin-top: 14px; }
html[data-ui="nuovo"] .suggestion-label {
  font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
html[data-ui="nuovo"] .suggestion-pill {
  border-radius: 8px; background: var(--card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .8rem; font-weight: 500; padding: 6px 11px;
  box-shadow: none; transform: none;
  transition: border-color .15s var(--nv-ease), color .15s var(--nv-ease);
}
html[data-ui="nuovo"] .suggestion-pill:hover { border-color: var(--blue); color: var(--blue); background: var(--card); transform: none; box-shadow: none; }
html[data-ui="nuovo"] .suggestion-pill .s-arrow { color: var(--text-dim); }

/* ═══ AREA DI INPUT (composer) ═══════════════════════════════════════════ */
html[data-ui="nuovo"] .input-area,
html[data-ui="nuovo"] body.dark .input-area {
  background: var(--bg); border-top: none; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0 28px 14px;
}
html[data-ui="nuovo"] .quick-filters-bar,
html[data-ui="nuovo"] .fav-chips-bar { padding: 8px 2px 0; background: transparent; border: none; }
html[data-ui="nuovo"] .qf-chip,
html[data-ui="nuovo"] .fav-chip {
  height: 28px; padding: 0 11px; gap: 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
  font-size: .76rem; font-weight: 600;
  transition: border-color .15s var(--nv-ease), color .15s var(--nv-ease), background .15s var(--nv-ease);
}
html[data-ui="nuovo"] .qf-chip .nv-ic,
html[data-ui="nuovo"] .fav-chip .nv-ic { color: var(--text-dim); }
html[data-ui="nuovo"] .qf-chip:hover,
html[data-ui="nuovo"] .fav-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--card); }
html[data-ui="nuovo"] .qf-chip:hover .nv-ic { color: var(--blue); }
html[data-ui="nuovo"] .qf-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-ui="nuovo"] .qf-chip.active .nv-ic { color: #fff; }
html[data-ui="nuovo"] .fav-chip-star { color: #d99a1b; }

html[data-ui="nuovo"] .input-row {
  margin-top: 8px; padding: 6px 6px 6px 6px; gap: 4px; align-items: flex-end;
  background: var(--card); border: 1px solid var(--border2); border-radius: var(--nv-r-lg);
  box-shadow: var(--nv-raise);
  transition: border-color .15s var(--nv-ease), box-shadow .15s var(--nv-ease);
}
html[data-ui="nuovo"] .input-row:focus-within { border-color: var(--blue); box-shadow: var(--nv-ring), var(--nv-raise); }
html[data-ui="nuovo"] #questionInput,
html[data-ui="nuovo"] body.dark #questionInput,
html[data-ui="nuovo"] #questionInput:focus {
  background: transparent; border: none; box-shadow: none; border-radius: 8px;
  min-height: 40px; padding: 10px 8px; font-size: .93rem; color: var(--text);
}
html[data-ui="nuovo"] #questionInput::placeholder { color: var(--text-dim); }
html[data-ui="nuovo"] .input-row > button:not(#sendBtn) {
  width: 36px; height: 36px; min-width: 36px; padding: 0; margin-bottom: 2px;
  border-radius: 8px; background: transparent; border: 1px solid transparent; box-shadow: none;
  color: var(--text-dim); font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--nv-ease), color .15s var(--nv-ease);
}
html[data-ui="nuovo"] .input-row > button:not(#sendBtn):hover { background: var(--bg2); color: var(--text); }
html[data-ui="nuovo"] .input-row > button.recording,
html[data-ui="nuovo"] .input-row > button.active { color: var(--nv-err); background: var(--nv-err-bg); }
html[data-ui="nuovo"] #sendBtn {
  height: 38px; padding: 0 16px; margin-bottom: 1px; border-radius: 10px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .85rem;
  box-shadow: none; transition: background .15s var(--nv-ease), transform .1s var(--nv-ease);
}
html[data-ui="nuovo"] #sendBtn:hover:not(:disabled) { background: color-mix(in srgb, var(--blue) 86%, #000); transform: none; box-shadow: none; }
html[data-ui="nuovo"] #sendBtn:active:not(:disabled) { transform: scale(.97); }
html[data-ui="nuovo"] #sendBtn:disabled { opacity: .55; }

/* Suggerimenti in apertura e autocompletamento */
html[data-ui="nuovo"] .hist-autocomplete { border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--nv-float); }
html[data-ui="nuovo"] .hist-ac-item:hover,
html[data-ui="nuovo"] .hist-ac-item.hist-ac-active { background: var(--nv-tint); color: var(--text); }

/* ═══ IMPOSTAZIONI (Settings Hub) e finestre ═════════════════════════════ */
html[data-ui="nuovo"] .sh-overlay { background: rgba(10,17,34,.48); backdrop-filter: blur(2px); }
html[data-ui="nuovo"] .sh-box,
html[data-ui="nuovo"] body:not(.dark) .sh-box,
html[data-ui="nuovo"] body.dark .sh-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(10,17,34,.4);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-ui="nuovo"] .sh-top,
html[data-ui="nuovo"] body:not(.dark) .sh-top { border-bottom: 1px solid var(--border); padding: 14px 20px; }
html[data-ui="nuovo"] .sh-top h2,
html[data-ui="nuovo"] .sh-top .sh-title,
html[data-ui="nuovo"] .sh-top > div:first-child { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
html[data-ui="nuovo"] .wiz-close {
  width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); box-shadow: none;
}
html[data-ui="nuovo"] .wiz-close:hover { background: var(--bg2); color: var(--text); transform: none; }
html[data-ui="nuovo"] .sh-nav,
html[data-ui="nuovo"] body:not(.dark) .sh-nav { background: var(--bg2); border-right: 1px solid var(--border); padding: 10px 8px; }
html[data-ui="nuovo"] .sh-nav-sep { font-size: .66rem; letter-spacing: .08em; color: var(--text-dim); border-top: none; padding: 16px 10px 4px; }
html[data-ui="nuovo"] .sh-tab {
  border-left: none; border-radius: 7px; padding: 7px 10px; gap: 9px;
  font-size: .82rem; color: var(--text-muted);
}
html[data-ui="nuovo"] .sh-tab .nv-ic { color: var(--text-dim); }
html[data-ui="nuovo"] .sh-tab:hover { background: var(--card); color: var(--text); border-left: none; }
html[data-ui="nuovo"] .sh-tab.active { background: var(--card); color: var(--text); font-weight: 600; border-left: none; box-shadow: var(--nv-raise); }
html[data-ui="nuovo"] .sh-tab.active .nv-ic { color: var(--blue); }
html[data-ui="nuovo"] .sh-panels,
html[data-ui="nuovo"] body:not(.dark) .sh-panels { background: var(--card); padding: 26px 32px; }
html[data-ui="nuovo"] .sh-panel-hd { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 20px; }
html[data-ui="nuovo"] .sh-panel-hd::after { display: none; }
html[data-ui="nuovo"] .sh-panel-hd h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
html[data-ui="nuovo"] .sh-panel-hd h3 .nv-ic { color: var(--blue); }
html[data-ui="nuovo"] .sh-settings-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: none; padding: 18px 20px; margin-bottom: 14px;
}
html[data-ui="nuovo"] .wiz-section-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
html[data-ui="nuovo"] .wiz-section-title .nv-ic { color: var(--blue); }
html[data-ui="nuovo"] .wiz-label { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); }
html[data-ui="nuovo"] .wiz-input,
html[data-ui="nuovo"] .sh-panels input[type="text"],
html[data-ui="nuovo"] .sh-panels input[type="password"],
html[data-ui="nuovo"] .sh-panels input[type="email"],
html[data-ui="nuovo"] .sh-panels input[type="number"],
html[data-ui="nuovo"] .sh-panels select,
html[data-ui="nuovo"] .sh-panels textarea {
  background: var(--card); border: 1px solid var(--border2); border-radius: 8px;
  font-family: var(--sans); font-size: .85rem; color: var(--text);
  transition: border-color .15s var(--nv-ease), box-shadow .15s var(--nv-ease);
}
html[data-ui="nuovo"] .wiz-input:focus,
html[data-ui="nuovo"] .sh-panels input:focus,
html[data-ui="nuovo"] .sh-panels select:focus,
html[data-ui="nuovo"] .sh-panels textarea:focus { border-color: var(--blue); box-shadow: var(--nv-ring); outline: none; background: var(--card); }
html[data-ui="nuovo"] .wiz-hint { color: var(--text-dim); font-size: .74rem; }
html[data-ui="nuovo"] .btn { border-radius: 8px; font-weight: 600; font-size: .8rem; }
html[data-ui="nuovo"] .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
html[data-ui="nuovo"] .btn-primary:hover { background: color-mix(in srgb, var(--blue) 86%, #000); border-color: transparent; }
html[data-ui="nuovo"] .wiz-status.err { background: var(--nv-err-bg); color: var(--nv-err); border-radius: 8px; }
html[data-ui="nuovo"] .wiz-status.ok { background: var(--nv-ok-bg); color: var(--nv-ok); border-radius: 8px; }

/* Finestre generiche (preferiti, password, comandi rapidi) */
html[data-ui="nuovo"] .wiz-box,
html[data-ui="nuovo"] .modal-box,
html[data-ui="nuovo"] .fav-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 64px -12px rgba(10,17,34,.4); backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ═══ MENU UTENTE ════════════════════════════════════════════════════════ */
html[data-ui="nuovo"] .user-menu-btn {
  height: 32px; padding: 0 10px; gap: 7px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid var(--nv-frame-line);
  color: var(--nv-frame-ink); font-weight: 500; font-size: .78rem;
}
html[data-ui="nuovo"] .user-menu-btn:hover,
html[data-ui="nuovo"] .user-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
html[data-ui="nuovo"] .user-menu-btn #currentUserLabel { padding: 0; margin: 0; }
html[data-ui="nuovo"] .user-menu-btn #currentUserLabel:hover { background: none; }
html[data-ui="nuovo"] .user-menu {
  min-width: 268px; padding: 6px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--nv-float);
  color: var(--text); animation: nv-in .16s var(--nv-ease);
}
html[data-ui="nuovo"] .um-quota { padding: 10px 10px 8px; }
html[data-ui="nuovo"] .um-quota div[style*="font-family"] { font-family: var(--sans) !important; font-variant-numeric: tabular-nums; }
html[data-ui="nuovo"] .um-sep { background: var(--border); }
html[data-ui="nuovo"] .um-row { color: var(--text); font-size: .83rem; }
html[data-ui="nuovo"] .um-row .nv-ic,
html[data-ui="nuovo"] .um-item .nv-ic { color: var(--text-dim); margin: 0; }
html[data-ui="nuovo"] .um-row select#btnLang {
  height: 28px; padding: 0 6px; border-radius: 7px; background: var(--card) !important;
  border: 1px solid var(--border2) !important; color: var(--text) !important; font-family: var(--sans) !important; font-size: .78rem !important;
}
html[data-ui="nuovo"] .um-item { color: var(--text); font-size: .83rem; border-radius: 7px; }
html[data-ui="nuovo"] .um-item:hover { background: var(--nv-tint); color: var(--text); }
html[data-ui="nuovo"] .um-item:hover .nv-ic { color: var(--blue); }
html[data-ui="nuovo"] .um-item.um-danger:hover { background: var(--nv-err-bg); color: var(--nv-err); }
html[data-ui="nuovo"] .um-item.um-danger:hover .nv-ic { color: var(--nv-err); }
html[data-ui="nuovo"] .um-chev { color: var(--nv-frame-dim); }

/* ═══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  html[data-ui="nuovo"] header .header-sub { display: none; }
}
@media (max-width: 768px) {
  html[data-ui="nuovo"] header { height: 52px; padding: 0 10px; gap: 8px; }
  html[data-ui="nuovo"] .empty-state-wrap { padding: 28px 16px; }
  html[data-ui="nuovo"] .empty-state-greeting { font-size: 1.35rem; }
  html[data-ui="nuovo"] .empty-state-grid { grid-template-columns: 1fr; }
  html[data-ui="nuovo"] .es-card + .es-card { border-left: none; border-top: 1px solid var(--border); }
  html[data-ui="nuovo"] #messages { padding: 18px 12px; }
  html[data-ui="nuovo"] .input-area { padding: 0 10px 10px; }
  html[data-ui="nuovo"] .msg.bot > .bubble { padding: 12px; }
  html[data-ui="nuovo"] .quick-filters-scroll { scrollbar-width: none; }
  html[data-ui="nuovo"] .quick-filters-scroll::-webkit-scrollbar { display: none; }
}
@media (max-width: 520px) {
  html[data-ui="nuovo"] header #pillServer,
  html[data-ui="nuovo"] header .btn-home,
  html[data-ui="nuovo"] #currentUserLabel { display: none !important; }
  html[data-ui="nuovo"] header .btn-icon { width: 30px; }
  html[data-ui="nuovo"] .header-title { font-size: .85rem; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="nuovo"] .msg, html[data-ui="nuovo"] .nv-ic-loader { animation: none; }
}

/* ═══ LOGIN (login.html) ═════════════════════════════════════════════════
   Due colonne: a sinistra la cornice blu notte con nome e promessa del
   prodotto, a destra il modulo su carta chiara. Sotto i 760px resta solo
   il modulo, con il nome sopra. */
html[data-ui="nuovo"] body:has(#loginCard) {
  --t1: #0e1626; --t2: #4f5b70; --t3: #7d889b;
  --blue: var(--accent);
  background: var(--bg); color: var(--t1);
}
html[data-ui="nuovo"] body:has(#loginCard) .background-glow,
html[data-ui="nuovo"] body:has(#loginCard) .noise { display: none; }
html[data-ui="nuovo"] #loginCard {
  max-width: 920px; min-height: 540px; padding: 0;
  display: grid; grid-template-columns: minmax(300px, 42%) 1fr; grid-template-rows: 1fr auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(15,26,51,.06), 0 30px 70px -24px rgba(15,26,51,.35);
  overflow: hidden; animation: nv-in .35s var(--nv-ease) both;
}
html[data-ui="nuovo"] #loginCard::before,
html[data-ui="nuovo"] #loginCard::after { display: none; }
html[data-ui="nuovo"] #loginCard .hero-wrap {
  grid-column: 1; grid-row: 1 / 3; margin: 0;
  align-items: flex-start; justify-content: space-between; text-align: left; gap: 28px;
  padding: 40px 36px; color: var(--nv-frame-ink);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, var(--nv-frame-2) 0%, var(--nv-frame) 70%);
  animation: none;
}
html[data-ui="nuovo"] #loginCard .hero-logo {
  width: auto; height: 40px; max-width: 180px; filter: none;
  background: #fff; border-radius: 8px; padding: 6px 10px;
}
html[data-ui="nuovo"] #loginCard .hero-titles { gap: 10px; margin-top: auto; }
html[data-ui="nuovo"] #loginCard .hero-name {
  background: none; -webkit-text-fill-color: #fff; color: #fff;
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance;
}
html[data-ui="nuovo"] #loginCard .hero-sub {
  color: var(--nv-frame-dim); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .92rem;
}
html[data-ui="nuovo"] #loginCard .hero-titles::after {
  content: "Domande in italiano, risposte dai dati di SAP Business One. Il modello gira sul server dell'azienda.";
  display: block; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--nv-frame-line);
  font-size: .84rem; line-height: 1.6; color: var(--nv-frame-dim); max-width: 34ch;
}
html[data-ui="nuovo"] #loginCard .step { grid-column: 2; grid-row: 1; padding: 48px 48px 8px; align-self: center; gap: 14px; animation: none; }
html[data-ui="nuovo"] #loginCard .step-title { color: var(--t1); font-size: 1.3rem; }
html[data-ui="nuovo"] #loginCard .step-sub { color: var(--t2); }
html[data-ui="nuovo"] #loginCard .divider { background: var(--border); }
html[data-ui="nuovo"] #loginCard .inp-label { color: var(--t2); letter-spacing: .04em; font-size: .72rem; }
html[data-ui="nuovo"] #loginCard .inp-field {
  background: var(--card); border: 1px solid var(--border2); border-radius: 9px;
  color: var(--t1); -webkit-text-fill-color: var(--t1); backdrop-filter: none; height: 44px; padding: 0 14px;
}
html[data-ui="nuovo"] #loginCard .inp-otp { height: 52px; }
html[data-ui="nuovo"] #loginCard .inp-field::placeholder { color: var(--t3); -webkit-text-fill-color: var(--t3); }
html[data-ui="nuovo"] #loginCard .inp-field:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
html[data-ui="nuovo"] #loginCard .inp-field:-webkit-autofill { -webkit-box-shadow: 0 0 0 50px #fff inset !important; -webkit-text-fill-color: var(--t1) !important; }
html[data-ui="nuovo"] #loginCard .remember-row { color: var(--t2); }
html[data-ui="nuovo"] #loginCard .btn-primary,
html[data-ui="nuovo"] #loginCard #step-login.m-local #loginBtn {
  height: 44px; padding: 0 18px; border-radius: 9px; margin-top: 6px;
  background: var(--nv-frame); box-shadow: none; font-weight: 700;
}
html[data-ui="nuovo"] #loginCard #step-login.m-kc #loginBtn,
html[data-ui="nuovo"] #loginCard #step-setup .btn-primary { background: var(--accent); }
html[data-ui="nuovo"] #loginCard .btn-primary::before { display: none; }
html[data-ui="nuovo"] #loginCard .btn-primary:hover { transform: none; box-shadow: none; filter: brightness(1.12); }
html[data-ui="nuovo"] #loginCard .auth-tabs { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
html[data-ui="nuovo"] #loginCard .auth-tab { color: var(--t2); border-radius: 8px; font-weight: 600; }
html[data-ui="nuovo"] #loginCard .auth-tab:hover:not(.active) { background: transparent; color: var(--t1); }
html[data-ui="nuovo"] #loginCard .auth-tab.active { background: var(--card); color: var(--t1); box-shadow: 0 1px 2px rgba(15,26,51,.08), 0 0 0 1px var(--border); }
html[data-ui="nuovo"] #loginCard .auth-hint,
html[data-ui="nuovo"] #loginCard #step-login.m-local .auth-hint { background: var(--bg2); border: 1px solid var(--border); color: var(--t2); border-radius: 9px; }
html[data-ui="nuovo"] #loginCard .err-box { background: var(--nv-err-bg); border-color: color-mix(in srgb, var(--nv-err) 30%, transparent); color: var(--nv-err); }
html[data-ui="nuovo"] #loginCard .btn-ghost { color: var(--t2); }
html[data-ui="nuovo"] #loginCard .btn-ghost:hover { color: var(--t1); }
html[data-ui="nuovo"] #loginCard .totp-shield,
html[data-ui="nuovo"] #loginCard .setup-badge { color: var(--accent); }
html[data-ui="nuovo"] #loginCard .pwd-bar { background: var(--border); }
html[data-ui="nuovo"] #loginCard .card-footer {
  grid-column: 2; grid-row: 2; margin: 0; padding: 0 48px 24px;
  font-family: var(--sans); font-size: .72rem; color: var(--t3); text-align: left; font-variant-numeric: tabular-nums;
}
html[data-ui="nuovo"] #loginCard .card-footer #appVersion { color: var(--t3) !important; }
@media (max-width: 760px) {
  html[data-ui="nuovo"] #loginCard { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; max-width: 440px; min-height: 0; }
  html[data-ui="nuovo"] #loginCard .hero-wrap { grid-row: 1; padding: 24px 24px 22px; gap: 16px; }
  html[data-ui="nuovo"] #loginCard .hero-titles::after { display: none; }
  html[data-ui="nuovo"] #loginCard .hero-name { font-size: 1.35rem; }
  html[data-ui="nuovo"] #loginCard .step { grid-column: 1; grid-row: 2; padding: 24px 24px 4px; }
  html[data-ui="nuovo"] #loginCard .card-footer { grid-column: 1; grid-row: 3; padding: 8px 24px 20px; }
}