/* ══════════════════════════════════════════════════════════════════════
   EMODA — foglio di stile unico.
   Nessun CSS altrove: niente <style> nelle pagine, niente attributi
   `style=` sugli elementi. Se una regola serve, sta qui.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── font, serviti da noi ────────────────────────────────────────────
   Niente Google Fonts: la Spark puo' non avere rete verso l'esterno, e
   un font che non arriva fa saltare l'impaginazione al primo caricamento.
   `swap` mostra subito il testo con il fallback di sistema. */
@font-face{font-family:Inter;src:url(fonts/inter-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(fonts/plexmono-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif.woff2)format("woff2");font-weight:400;font-display:swap}

/* ─── colori ──────────────────────────────────────────────────────────
   Il tema chiaro ridefinisce solo le variabili: nessuna regola e' scritta
   due volte, quindi non possono divergere. */
:root{
  --bg:#0B0B0B; --panel:#111110; --card:#181817; --card-2:#1F1F1E;
  --hair:#262625; --hair-2:#323230;
  --text:#F5F5F4; --gray:#A8A8A5; --mist:#6E6E6B;
  --accent:#FFFFFF; --on-accent:#0B0B0B;
  --ok:#4ec98a; --warn:#e5b567; --bad:#e2686d;
  --shadow:none;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --r:16px;
}
[data-theme=light]{
  --bg:#FFFFFF; --panel:#F6F6F5; --card:#FFFFFF; --card-2:#EFEFED;
  --hair:#E7E7E5; --hair-2:#D8D8D6;
  --text:#0B0B0B; --gray:#5C5C5A; --mist:#9C9C99;
  --accent:#0B0B0B; --on-accent:#FFFFFF;
  --ok:#1f8a53; --warn:#a8741a; --bad:#c0392b;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 18px rgba(0,0,0,.05);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
[hidden]{display:none!important}

.ic{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none;
    stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ic-sm{width:14px;height:14px}
.ic-lg{width:20px;height:20px}

/* barre di scorrimento sobrie, coerenti col tema */
*{scrollbar-width:thin;scrollbar-color:var(--hair-2) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--hair-2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

/* ══ IMPALCATURA ═══════════════════════════════════════════════════ */
.app-shell{display:grid;grid-template-columns:264px 1fr;height:100vh;overflow:hidden}
.app-shell.with-aside{grid-template-columns:264px 1fr 312px}
@media(max-width:1400px){.app-shell.with-aside{grid-template-columns:264px 1fr 268px}}
@media(max-width:1080px){.app-shell.with-aside{grid-template-columns:264px 1fr}.aside{display:none}}
@media(max-width:820px){
  .app-shell,.app-shell.with-aside{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:264px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .sidebar.open{transform:none}
  .sidebar-scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39}
  .burger{display:flex!important}
}

/* ── sidebar ── */
.sidebar{background:var(--panel);border-right:1px solid var(--hair);
         display:flex;flex-direction:column;padding:20px 14px 14px;min-height:0}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;margin-bottom:20px}
/* Il logo e' nello sprite: `currentColor` sulle lettere lo fa seguire il
   tema da solo, mentre la barra rossa mantiene il proprio colore. Niente
   due file da tenere allineati, niente filter:invert che avrebbe ribaltato
   anche il rosso. */
.brand-logo{height:26px;width:78px;color:var(--text);display:block}


.btn-new{display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:var(--on-accent);font-weight:600;font-size:13.5px;
  border-radius:999px;padding:11px 0;margin-bottom:14px;transition:opacity .15s;width:100%}
.btn-new:hover{opacity:.85}

.side-search{display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--hair);border-radius:10px;padding:8px 12px;margin-bottom:16px;
  color:var(--mist);box-shadow:var(--shadow)}
.side-search input{background:none;border:none;outline:none;width:100%;font-size:13px}
.side-search input::placeholder{color:var(--mist)}

.conv-list{flex:1;overflow-y:auto;min-height:0;margin:0 -4px;padding:0 4px}
.cg-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist);padding:14px 8px 8px}
.conv-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  font-size:13.5px;color:var(--gray);padding:9px 10px;border-radius:9px;
  white-space:nowrap;overflow:hidden;transition:background .12s,color .12s}
.conv-item span{overflow:hidden;text-overflow:ellipsis}
.conv-item:hover{background:var(--card-2);color:var(--text)}
.conv-item.active{background:var(--card-2);color:var(--text);font-weight:500}
.conv-vote-ic{flex:none;color:var(--gray);opacity:.7}
.conv-vote-ic.vote-up{color:var(--ok);opacity:1}
.conv-vote-ic.vote-down{color:var(--bad);opacity:1}
.conv-empty{font-size:12.5px;color:var(--mist);padding:12px 10px}

.sidebar-foot{border-top:1px solid var(--hair);padding-top:12px;margin-top:12px;position:relative}
.user-trigger{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;width:100%;text-align:left}
.user-trigger:hover{background:var(--card-2)}
.avatar{width:32px;height:32px;border-radius:9px;background:var(--card-2);
  border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:14px;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;line-height:1.2}
.user-role{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist)}
.user-menu{position:absolute;bottom:calc(100% + 6px);left:8px;right:8px;
  background:var(--card);border:1px solid var(--hair-2);border-radius:12px;
  padding:6px;z-index:30;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.user-menu-info{padding:10px 10px 12px;border-bottom:1px solid var(--hair);margin-bottom:6px}
.user-menu-email{font-size:11.5px;color:var(--mist);word-break:break-all}
.user-menu-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  font-size:13px;color:var(--gray);padding:9px 10px;border-radius:8px}
.user-menu-item:hover{background:var(--card-2);color:var(--text)}
.user-menu-form{margin:0}

/* ── colonna centrale ── */
.main{display:flex;flex-direction:column;min-width:0;height:100vh;background:var(--bg)}
.topbar{display:flex;align-items:center;gap:14px;padding:13px 24px;
  border-bottom:1px solid var(--hair);flex-shrink:0}
.topbar-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.topbar-spacer{flex:1}
.burger{display:none;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:10px;color:var(--gray)}
.burger:hover{background:var(--card-2);color:var(--text)}
/* Senza barra in alto il burger si posa sulla conversazione, e compare
   solo dove la sidebar e' nascosta. */
.burger-float{position:absolute;top:12px;left:12px;z-index:20;background:var(--card);
  border:1px solid var(--hair)}
.main{position:relative}

.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;color:var(--gray);border:1px solid var(--hair);
  border-radius:999px;padding:6px 13px;white-space:nowrap}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.pill.warn{color:var(--warn);border-color:var(--warn)}
.pill.warn .pill-dot{background:var(--warn)}
.pill.bad{color:var(--bad);border-color:var(--bad)}

.icon-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:9px;color:var(--gray);transition:background .12s,color .12s}
.icon-btn:hover{background:var(--card-2);color:var(--text)}
.vote-btn[data-vote="up"].on{color:var(--ok);background:var(--card-2)}
.vote-btn[data-vote="down"].on{color:var(--bad);background:var(--card-2)}
.vote-btn:disabled{opacity:1;cursor:default}
.vote-btn:disabled:hover{background:none}

.engine-switch{display:flex;flex-direction:column;gap:10px}
.engine-slot{display:block}
.engine-slot-label{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:5px}
.engine-select{width:100%;background:var(--card);border:1px solid var(--hair-2);
  border-radius:9px;padding:8px 10px;font-size:12.5px;color:var(--text);outline:none}
.engine-select:focus{border-color:var(--accent)}

/* Azioni della chat: erano in un menu a tendina nella barra, ora sono
   bottoni nel pannello — visibili senza doverli cercare. */
.rp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rp-actions form{margin:0}
.rp-actions .btn{font-size:12px;padding:6px 11px}

.stale-banner{display:flex;align-items:center;gap:10px;background:var(--card);
  border-bottom:1px solid var(--hair);color:var(--warn);padding:11px 24px;font-size:13px;
  flex-shrink:0}

/* ── conversazione ── */
.thread{flex:1;overflow-y:auto;padding:28px 0 16px;min-height:0}
.thread-in{max-width:780px;margin:0 auto;padding:0 24px;display:flex;
  flex-direction:column;gap:24px}

.msg-user{align-self:flex-end;background:var(--accent);color:var(--on-accent);
  line-height:1.45;padding:8px 15px;border-radius:16px 16px 4px 16px;max-width:78%;
  word-break:break-word}
/* `pre-wrap` va sul testo, non sulla bolla: sulla bolla trasformava in righe
   vuote anche l'indentazione del template attorno al div, gonfiando a 121px
   una bolla che di testo ne ha 21. */
.msg-user .content{white-space:pre-wrap}
.msg-ai{max-width:100%;min-width:0}
.ai-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ai-mark{width:24px;height:24px;background:var(--card-2);border:1px solid var(--hair-2);
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;color:var(--text)}
.ai-mark svg{width:16px;height:16px}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--hair-2);color:var(--gray)}
.badge.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.ai-body{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow);overflow-wrap:break-word}
.ai-body p+p{margin-top:10px}
.ai-body ul,.ai-body ol{margin:10px 0 0 18px}
.ai-body li{padding:2px 0}
.ai-body code{font-family:var(--mono);font-size:12.5px;background:var(--card-2);
  padding:1px 5px;border-radius:4px}
.ai-body pre{background:var(--bg);border:1px solid var(--hair);border-radius:10px;
  padding:14px 16px;margin-top:12px;overflow-x:auto}
.ai-body pre code{background:none;padding:0;font-size:11.5px;line-height:1.7}
.ai-body table{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
.ai-body th,.ai-body td{border:1px solid var(--hair);padding:7px 10px;text-align:left}
.ai-body th{background:var(--panel);font-weight:600;font-size:12px}

.ai-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.act-btn{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;
  border:1px solid var(--hair-2);border-radius:999px;padding:7px 15px;color:var(--text);
  transition:border-color .12s}
.act-btn:hover{border-color:var(--accent)}
.act-right{margin-left:auto;display:flex;gap:4px}
.act-right .icon-btn{width:30px;height:30px}
.act-right .icon-btn.on{background:var(--card-2)}

.thinking{display:flex;align-items:center;gap:14px}
.think-mark{width:22px;height:22px;background:var(--accent);border-radius:6px;
  animation:thinkpulse 1.6s ease-in-out infinite}
@keyframes thinkpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.55}}
.think-text{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mist)}

/* schermata iniziale */
.hero{max-width:660px;margin:11vh auto 0;text-align:center;padding:0 24px}
.hero-logo{height:56px;width:168px;color:var(--text);display:block;margin:0 auto 26px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);
  letter-spacing:-.01em;line-height:1.1}
.hero-sub{color:var(--mist);margin-top:10px}
.sugg{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:28px}
/* Esempi di cosa si puo' chiedere, non comandi: niente hover, niente
   cursore a mano, nessun elemento interattivo sotto. */
.sugg span{font-size:12.5px;color:var(--gray);border:1px solid var(--hair-2);
  border-radius:999px;padding:9px 16px}

/* composer */
.composer{padding:14px 24px 20px;flex-shrink:0}
.composer-in{max-width:780px;margin:0 auto}
.input-bar{display:flex;align-items:flex-end;gap:6px;background:var(--card);
  border:1px solid var(--hair-2);border-radius:18px;padding:8px 8px 8px 18px;
  transition:border-color .15s;box-shadow:var(--shadow)}
.input-bar:focus-within{border-color:var(--accent)}
.input-bar textarea{flex:1;background:none;border:none;outline:none;resize:none;
  line-height:1.5;padding:8px 0;max-height:140px}
.input-bar textarea::placeholder{color:var(--mist)}
.ib-btn{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;color:var(--gray);flex-shrink:0;transition:background .12s,color .12s}
.ib-btn:hover{background:var(--card-2);color:var(--text)}
.ib-btn.send{background:var(--accent);color:var(--on-accent)}
.ib-btn.send:hover{opacity:.85}
.ib-btn.stop{background:var(--card-2);color:var(--text)}
.ib-btn.stop:hover{background:var(--hair-2)}
.ib-btn.stop .ic{fill:currentColor;stroke:none}
.ib-btn:disabled{opacity:.4;cursor:default}
.composer-note{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--mist);text-align:center;margin-top:10px}

/* ── pannello destro ── */
.aside{background:var(--panel);border-left:1px solid var(--hair);overflow-y:auto;
  padding:20px 16px;min-height:0}
.rp-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);margin:0 4px 12px;display:flex;align-items:center;gap:8px}
.rp-label::after{content:"";flex:1;height:1px;background:var(--hair)}
.rp-block{margin-bottom:26px}
.rp-note{font-size:12.5px;color:var(--mist);padding:0 4px}
.rp-card{background:var(--card);border:1px solid var(--hair);border-radius:12px;
  padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow)}
.rp-card-k{font-size:12.5px;font-weight:600;line-height:1.35}
.rp-card-v{font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--mist);margin-top:4px}
.rp-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;
  padding:6px 4px;color:var(--gray)}
.rp-row b{font-weight:600;color:var(--text)}

/* ══ MODALI ════════════════════════════════════════════════════════ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:center;justify-content:center;z-index:50;padding:20px}
.modal-box{background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r);
  width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal-box.wide{max-width:1100px}
.modal-box.tall{height:86vh}
/* Intestazione come nel mockup: titolo in serif e una riga che dice a
   cosa serve la schermata, invece di una sola parola in grassetto. */
.modal-h1{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1}
.modal-sub{font-size:12.5px;color:var(--mist);margin-top:3px}
.modal-head{align-items:flex-start;padding:18px 22px 14px}

.modal-tabs{display:flex;gap:6px;padding:0 22px;border-bottom:1px solid var(--hair);
  overflow-x:auto;flex-shrink:0}
.modal-tabs .tab{padding:10px 16px;font-size:13.5px;font-weight:500;color:var(--mist);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.modal-tabs .tab:hover{color:var(--gray)}
.modal-tabs .tab.active{color:var(--text);border-bottom-color:var(--accent)}
#settings-body{flex:1;min-height:0;padding:22px}
#settings-body .page{padding:0}
/* Il titolo lo porta gia' l'intestazione del modale: ripeterlo sotto le
   schede direbbe due volte dove ci si trova. */
#settings-body .page-head h1{display:none}
#settings-body .page-head{margin-bottom:16px}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid var(--hair)}
.modal-head strong{font-size:14px}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{padding:14px 20px;border-top:1px solid var(--hair);display:flex;
  justify-content:flex-end;gap:10px}

/* ══ FORM E BOTTONI ════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair-2);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:500;
  transition:border-color .12s,opacity .15s}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{opacity:.85}
.btn-danger{color:var(--bad);border-color:var(--bad)}
.btn-sm{padding:6px 13px;font-size:12px}

.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);
  border:1px solid var(--hair-2);border-radius:10px;padding:10px 13px;outline:none;
  transition:border-color .12s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.field textarea{resize:vertical;min-height:90px;line-height:1.6}
.field-hint{font-size:11.5px;color:var(--mist);margin-top:5px}
.field-error{font-size:12px;color:var(--bad);margin-top:5px}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px;margin-bottom:10px}
.check input{width:auto}
/* Con una spiegazione sotto l'etichetta la casella non va piu' centrata
   sull'altezza totale: si allinea alla prima riga di testo. */
.check-desc{align-items:flex-start}
.check-desc input{margin-top:2px}
.check-hint{display:block;font-size:11.5px;color:var(--mist);margin-top:3px}
.form-stretto{max-width:440px}
.form-azioni{display:flex;gap:8px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--hair)}

/* ══ TABELLE ═══════════════════════════════════════════════════════ */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair-2);
  font-weight:400}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--hair)}
.tbl tbody tr:hover{background:var(--card-2)}
/* Solo sulle celle: applicata anche agli header, la misura in 12px vinceva
   sui 10px di `.tbl th` e lasciava le intestazioni di grandezze diverse a
   seconda che la colonna fosse numerica o no. L'header si allinea a destra
   sopra la sua colonna, ma conserva il proprio corpo. */
.tbl td.num{font-family:var(--mono);font-size:12px;text-align:right}
.tbl th.num{text-align:right}
/* Senza larghezze le due colonne numeriche si prendono meta' tabella e i
   valori finiscono a distanza dalla loro intestazione: qui il nome puo'
   allargarsi, i numeri stanno stretti. */
.tbl-bench th:nth-child(3),.tbl-bench th:nth-child(4){width:110px}
.tbl-bench th:nth-child(2){width:140px}
.tbl-wrap{overflow-x:auto;border:1px solid var(--hair);border-radius:12px;background:var(--card)}
/* `overflow-x:auto` ritaglia tutto cio' che esce dal riquadro, menu di riga
   compresi: dove la tabella ne ha uno, lo scorrimento orizzontale si toglie
   perche' quelle colonne stanno comunque nella larghezza. */
.tbl-wrap:has(.riga-menu){overflow:visible}

/* ══ PAGINE DI GESTIONE ════════════════════════════════════════════ */
.page{padding:26px 28px;overflow-y:auto;flex:1;min-height:0}
.page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15}
.page-head p{color:var(--mist);font-size:13px;margin-top:5px;max-width:60ch}
.page-head-actions{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);
  padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow)}
.card h2{font-size:15px;font-weight:600;margin-bottom:4px}
.card-sub{color:var(--mist);font-size:12.5px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.stat{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:16px 18px}
.stat-k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist)}
.stat-v{font-size:24px;font-weight:600;margin-top:6px;line-height:1.1}
.stat-note{font-size:11.5px;color:var(--mist);margin-top:4px}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--hair);margin-bottom:20px;
  overflow-x:auto}
.tab{padding:10px 15px;font-size:13px;color:var(--gray);border-bottom:2px solid transparent;
  white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:500}

.empty-state{text-align:center;padding:50px 20px;color:var(--mist)}
.empty-state p{margin-top:8px;font-size:13px}

/* ══ LOGIN ═════════════════════════════════════════════════════════ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--hair);
  border-radius:var(--r);padding:34px 30px;box-shadow:var(--shadow)}
.login-logo{height:40px;width:120px;color:var(--text);display:block;margin:0 auto 16px}

.login-card h1{font-family:var(--serif);font-weight:400;font-size:23px;text-align:center;
  margin-bottom:26px}
.login-card .btn{width:100%;justify-content:center;margin-top:6px}

/* ══ DEBUG ═════════════════════════════════════════════════════════ */
.debug{margin-top:12px;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.debug summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 15px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);cursor:pointer;background:var(--panel)}
.debug summary::-webkit-details-marker{display:none}
.debug summary:hover{color:var(--gray)}
.debug-body{border-top:1px solid var(--hair);padding:16px;background:var(--panel)}
/* Riquadri affiancati, non righe a tutta larghezza: la griglia si riempie
   con quanti ne stanno, ognuno largo al massimo quanto serve. Dentro il
   riquadro, nome a sinistra e valore a destra. */
.debug-metrics{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(190px,240px))}
.debug-metric{background:var(--card);border:1px solid var(--hair);border-radius:10px;
  padding:9px 13px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.debug-metric-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mist);flex-shrink:0}
.debug-metric-v{font-family:var(--mono);font-size:13px;font-weight:600;
  text-align:right;word-break:break-word}
.debug-group{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mist);margin:16px 0 8px}
.sqlbox{background:var(--bg);border:1px solid var(--hair);border-radius:10px;padding:13px 15px;
  margin-top:10px;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--gray);
  overflow:auto;white-space:pre-wrap;word-break:break-word;max-height:60vh}

/* I prompt sono prosa, non codice: niente riquadro e niente monospace,
   solo un titolo e il testo che gli sta sotto. Chiusi per default, perche'
   sono lunghi migliaia di caratteri e aperti seppelliscono gli altri. */
.prompt-sez{border-bottom:1px solid var(--hair)}
.prompt-sez>summary{font-size:13px;font-weight:600;padding:13px 0;cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:9px}
.prompt-sez>summary::-webkit-details-marker{display:none}
.prompt-sez>summary::before{content:"";width:5px;height:5px;flex-shrink:0;
  border-right:1.5px solid var(--mist);border-bottom:1.5px solid var(--mist);
  transform:rotate(-45deg);transition:transform .15s}
.prompt-sez[open]>summary::before{transform:rotate(45deg)}
.prompt-txt{font-family:inherit;font-size:13px;line-height:1.65;color:var(--gray);
  white-space:pre-wrap;word-break:break-word;margin:0 0 16px}

/* ══ UTILITÀ ═══════════════════════════════════════════════════════
   Poche e generiche: servono a togliere gli `style=` dalle pagine, non a
   diventare un framework. */
.mono{font-family:var(--mono)}
.muted{color:var(--mist)}
.small{font-size:12px}
.ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)}
.row{display:flex;align-items:center;gap:10px}
.row-wrap{flex-wrap:wrap}
.spacer{flex:1}
.mt-0{margin-top:0} .mt-1{margin-top:8px} .mt-2{margin-top:16px} .mt-3{margin-top:24px}
.mb-0{margin-bottom:0} .mb-1{margin-bottom:8px} .mb-2{margin-bottom:16px}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none}
@media(max-width:820px){.hide-sm{display:none}}

/* ══ DEBUG: contenuto costruito dal JavaScript ═════════════════════
   Queste classi le scrive `scripts.js` quando apre il modale di debug o
   la tabella completa. Senza regole qui il modale usciva come testo
   nudo, e il difetto non si vede leggendo i template. */
.debug-group-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist);margin:18px 0 8px}
/* Il nome del modello e' lungo: prende tutta la riga della griglia. */
.debug-metric-model{grid-column:1/-1;max-width:none}
.debug-metric-model .debug-metric-v{font-weight:500}
.debug-empty,.debug-q-empty{color:var(--mist);font-size:13px;padding:14px 0}
.debug-notes{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.debug-note-item{font-size:12.5px;color:var(--gray);background:var(--card-2);
  border-radius:9px;padding:9px 12px}
/* Il numero della query e cio' che descrive stanno sulla stessa colonna:
   come lista nuda il marcatore restava fuori dal riquadro, a filo del bordo
   sinistro, mentre il resto era rientrato. Numerata a mano con un
   contatore, tutto parte dallo stesso margine. */
.debug-queries{list-style:none;counter-reset:dbgq;margin-top:12px;
  display:flex;flex-direction:column;gap:18px}
.debug-queries>li{position:relative;padding-left:26px}
.debug-queries>li::before{counter-increment:dbgq;content:counter(dbgq) ".";
  position:absolute;left:0;top:6px;font-family:var(--mono);font-size:11px;
  color:var(--mist)}
/* Riga di pill, non testo: senza flex restavano incollate ai riquadri
   delle metriche sopra e separate solo dallo spazio del markup. */
.debug-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.debug-q-sql{background:var(--bg);border:1px solid var(--hair);border-radius:10px;
  padding:12px 14px;font-family:var(--mono);font-size:11px;line-height:1.7;
  color:var(--gray);overflow-x:auto;white-space:pre-wrap;word-break:break-word}
/* `gap` invece degli spazi fra i tag nel markup: lo spazio di un nodo di
   testo non si vede fra due pill affiancate, e i badge risultavano
   attaccati. */
.debug-q-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.debug-q-time{font-family:var(--mono);font-size:10.5px;color:var(--mist)}
.debug-q-err{color:var(--bad);font-size:12.5px;margin-top:8px;
  background:var(--card-2);border-radius:9px;padding:9px 12px;
  word-break:break-word}
.debug-q-raw{font-size:11.5px;color:var(--mist);margin-top:8px}
.debug-q-raw>summary{cursor:pointer;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase}
.debug-q-raw>pre{font-family:var(--mono);font-size:11px;line-height:1.7;
  white-space:pre-wrap;word-break:break-word;margin-top:8px;
  background:var(--bg);border:1px solid var(--hair);border-radius:10px;
  padding:12px 14px}
.debug-tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  border:1px solid var(--hair-2);color:var(--gray)}
.debug-tag-ok{color:var(--ok);border-color:var(--ok)}
.debug-tag-err{color:var(--bad);border-color:var(--bad)}
.debug-tag-ai{color:var(--text);border-color:var(--hair-2)}
.debug-tag-quick,.debug-tag-fb{color:var(--warn);border-color:var(--warn)}
.debug-run-btn{font-size:12px;border:1px solid var(--hair-2);border-radius:999px;
  padding:5px 12px;color:var(--gray)}
.debug-run-btn:hover{border-color:var(--accent);color:var(--text)}
.debug-btn{cursor:pointer}
.debug-btn:hover{border-color:var(--accent);color:var(--text)}

/* tabella completa */
/* Stessa tabella di Dati (`.tbl`): qui si aggiunge solo cio' che quella
   non ha — intestazione che resta visibile scorrendo, e le colonne
   ordinabili. */
.table-modal-table th{position:sticky;top:0;background:var(--card);z-index:1;
  white-space:nowrap;cursor:pointer;user-select:none}
.table-modal-table th:hover,.table-modal-table th.table-sorted{color:var(--text)}
.table-modal-table td{white-space:nowrap}
.table-loading,.table-empty{color:var(--mist);font-size:13px;padding:26px;text-align:center}
.table-err{color:var(--bad);font-size:13px;padding:20px}
.pager-btn{min-width:32px;height:30px;border:1px solid var(--hair-2);border-radius:8px;
  font-size:12px;color:var(--gray);padding:0 9px}
.pager-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.pager-btn:disabled{opacity:.35;cursor:default}
.pager-btn.active{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pager-gap{color:var(--mist);padding:0 3px}
.pager-info{font-family:var(--mono);font-size:10.5px;color:var(--mist);margin-right:auto}
#table-modal-pager{align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-start}

/* elementi del messaggio */
.msg .role{display:none}
.msg-chart{width:100%;max-height:280px;margin-top:14px}
.context-warning{font-size:12.5px;color:var(--warn);margin-top:10px}

/* ══ MENU DI RIGA ══════════════════════════════════════════════════
   Tre azioni in fila occupavano mezza tabella e la facevano scorrere in
   orizzontale; qui stanno dietro un pulsante e compaiono su richiesta. */
.riga-menu{position:relative;display:flex;justify-content:flex-end}
.menu-a-tendina{position:absolute;top:calc(100% + 4px);right:0;min-width:172px;
  background:var(--card);border:1px solid var(--hair-2);border-radius:11px;
  padding:5px;z-index:25;box-shadow:0 10px 34px rgba(0,0,0,.4)}
.menu-a-tendina form{margin:0}
.th-menu,.td-menu{width:48px;padding-left:0;padding-right:10px}
/* Il pulsante "nuovo" sta nell'intestazione della colonna azioni: il th
   e' pensato per un'etichetta di testo, quindi va tolta la spaziatura
   verticale e allineato a destra come i menu sotto. */
.th-menu{padding-top:5px;padding-bottom:5px;text-align:right}
.th-menu .icon-btn-solid{display:inline-flex;vertical-align:middle}
.td-menu{white-space:nowrap}

/* Un pulsante di sola icona che pesa come un bottone pieno: senza sfondo
   un "+" solitario in cima alla pagina non si legge come azione. */
.icon-btn-solid{background:var(--accent);color:var(--on-accent);
  border-radius:9px;width:30px;height:30px}
.icon-btn-solid:hover{background:var(--accent);color:var(--on-accent);opacity:.85}

/* stato di una sincronizzazione, e messaggi dopo un'azione */
.badge-ok{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:500}
.badge-ko{color:var(--bad);border-color:var(--bad)}
.badge-run{color:var(--warn);border-color:var(--warn)}
.avviso{border:1px solid var(--hair-2);border-radius:11px;padding:11px 15px;
  margin-bottom:14px;font-size:13px}
.avviso-ok{color:var(--ok);border-color:var(--ok)}
.avviso-ko{color:var(--bad);border-color:var(--bad)}
/* Il menu nell'intestazione e' piu' largo delle voci di riga: i nomi delle
   azioni sono frasi, non verbi singoli. */
.th-menu .menu-a-tendina{min-width:232px}
.menu-a-tendina button:disabled{opacity:.4;cursor:default}
.icon-btn-solid:disabled{opacity:.4;cursor:default}