:root {
  --sfondo: #1b1d22;
  --pannello: #24272e;
  --campo: #16181c;
  --bordo: #353a44;
  --testo: #dcdcdc;
  --spento: #8a8f99;
  --accento: #f2b134;
  --ok: #5fc46a;
  --ko: #e5534b;
  --giallo: #f0c85a;
  --blu: #6ec8ff;
  --mono: Consolas, "Cascadia Mono", "DejaVu Sans Mono", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.4 system-ui, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
}

button {
  background: #2f333c;
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #3a3f4a; }
button:disabled { opacity: .45; cursor: default; }
button.evidenza { border-color: var(--accento); color: var(--accento); }
button.ok { border-color: #3d7a44; }
button.ko { border-color: #8a3a35; }
button.piccolo { padding: 3px 8px; font-size: 12px; }
input, select, textarea {
  background: var(--campo);
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
.nascosto { display: none !important; }

/* ── Login ── */
body.login { align-items: center; justify-content: center; }
body.login form {
  background: var(--pannello);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 28px;
  width: min(340px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.login h1 { margin: 0; color: var(--accento); }
.sotto { margin: 0 0 6px; color: var(--spento); font-size: 13px; }
.messaggio { color: var(--ko); margin: 0; min-height: 1.2em; }

/* ── Intestazione ── */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 10px 16px;
  background: var(--pannello);
  border-bottom: 1px solid var(--bordo);
}
header h1 { margin: 0; font-size: 20px; color: var(--accento); }
.spie { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.spia { color: var(--spento); white-space: nowrap; }
.spia.ok { color: var(--ok); }
.spia.ko { color: var(--ko); }
.spia.giallo { color: var(--giallo); }
.pulsanti { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sep { width: 8px; }

.schede { display: flex; gap: 4px; padding: 8px 16px 0; align-items: end; }
.scheda { border-radius: 6px 6px 0 0; border-bottom: none; }
.scheda.attiva { background: var(--pannello); color: var(--accento); }
.stato { margin-left: auto; color: var(--spento); font-size: 13px; padding: 0 4px 4px; }
.stato.errore { color: var(--ko); }
.stato.bene { color: var(--ok); }

main { flex: 1; min-height: 0; padding: 0 16px 16px; }
.pagina { display: none; height: 100%; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 0 8px 8px 8px; }
.pagina.attiva { display: flex; }

/* ── Config ── */
#config aside {
  width: 340px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-right: 1px solid var(--bordo);
}
.albero { flex: 1; overflow: auto; font-size: 13px; }
.albero details { margin-left: 12px; }
.albero > details { margin-left: 0; }
.albero summary { cursor: pointer; color: var(--spento); padding: 1px 0; }
.albero summary.gruppo { color: var(--testo); font-weight: 600; }
.albero summary.gruppo.nostre { color: var(--accento); }
.albero .voce {
  display: block;
  padding: 1px 6px;
  margin-left: 12px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.albero .voce:hover { background: #30343d; }
.albero .voce.aperto { background: #3b3424; color: var(--accento); }

.editor-box { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra-file { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--bordo); }
.nome-file { font-family: var(--mono); font-weight: 600; }
.nome-file.modificato::after { content: " ●"; color: var(--accento); }
.info-file { color: var(--spento); font-size: 12px; margin-right: auto; }
.avviso { background: #5a3d12; color: #ffd89a; padding: 6px 10px; display: flex; gap: 10px; align-items: center; }

.editor { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.editor pre, .editor textarea {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  font: 13px/1.5 var(--mono);
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}
.editor.a-capo pre, .editor.a-capo textarea { white-space: pre-wrap; overflow-wrap: anywhere; }
.editor pre { color: var(--testo); background: var(--campo); pointer-events: none; }
.editor textarea {
  background: transparent;
  color: transparent;
  caret-color: #fff;
  resize: none;
  outline: none;
}
.editor.senza-colori textarea { color: var(--testo); }
.editor textarea::selection { background: rgba(110, 160, 255, .35); color: transparent; }
.editor.senza-colori textarea::selection { color: var(--testo); }
.c-chiave { color: #9cdcfe; }
.c-stringa { color: #ce9178; }
.c-numero { color: #b5cea8; }
.c-parola { color: #569cd6; }
.c-commento { color: #6a9955; }
.c-segno { color: #8c8c8c; }
.c-parentesi { color: #ffd700; }

/* ── Console ── */
#console { flex-direction: column; }
.barra-console { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--bordo); }
.log {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--campo);
  padding: 8px 10px;
  font: 12.5px/1.45 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.log .r-errore { color: var(--ko); }
.log .r-avviso { color: var(--giallo); }
.log .r-bene { color: var(--ok); }
.log .r-mio { color: var(--blu); }
.log .r-chat { color: #d7b4ff; }
.comando { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--bordo); }
.comando input { flex: 1; font-family: var(--mono); }

dialog {
  background: var(--pannello);
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  width: min(480px, 94vw);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h2 { margin: 0 0 6px; font-size: 16px; }
dialog select { width: 100%; font-family: var(--mono); }
.riga-pulsanti { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 800px) {
  .pagina.attiva { flex-direction: column; }
  #config aside { width: auto; height: 40vh; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .editor { min-height: 60vh; }
  .pulsanti { margin-left: 0; }
}