:root {
  --fondo: #0a0a0c;
  --pannello: #131317;
  --bordo: #2a2a31;
  --testo: #e8e6e1;
  --tenue: #9a978f;
  --arancio: #ff7a1a;
  --arancio-tenue: rgba(255, 122, 26, 0.12);
  --verde: #3ddc84;
  --rosso: #ff4d4d;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--testo); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
[hidden] { display: none !important; }
a { color: var(--arancio); }

.schermata { min-height: 100vh; }
.centrata { display: grid; place-items: center; padding: 16px; }

.marchio { font-family: var(--mono); font-weight: 600; letter-spacing: 0.35em; color: var(--arancio); font-size: 2.2rem; }
.marchio.mini { font-size: 1.15rem; }
.sotto { color: var(--tenue); margin-top: 0; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }

.scheda { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 10px; padding: 20px; }
.scheda.stretta { width: 100%; max-width: 400px; }
.scheda.evidenza { border-color: var(--arancio); box-shadow: 0 0 0 1px var(--arancio-tenue); }

label { display: block; margin: 12px 0; font-size: 0.9rem; color: var(--tenue); }
label.grande { font-size: 1rem; color: var(--testo); font-weight: 500; }
input, textarea, select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  background: #0d0d10; color: var(--testo); border: 1px solid var(--bordo); border-radius: 8px;
  font: inherit; font-size: 1rem;
}
textarea { resize: vertical; }
#testo-dossier { font-family: var(--mono); font-size: 0.85rem; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--arancio); outline-offset: 1px; border-color: transparent; }

button {
  font: inherit; font-size: 0.95rem; cursor: pointer; padding: 10px 16px; border-radius: 8px;
  border: 1px solid var(--bordo); background: transparent; color: var(--testo);
}
button:hover { border-color: var(--tenue); }
button.primario { background: var(--arancio); border-color: var(--arancio); color: #120800; font-weight: 600; }
button.primario:hover { filter: brightness(1.08); }
button:disabled { opacity: 0.5; cursor: default; }

.errore { color: var(--rosso); min-height: 1.2em; margin: 8px 0 0; font-size: 0.9rem; }
.nota { color: var(--tenue); font-size: 0.85rem; }
.esito { color: var(--verde); font-size: 0.9rem; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--bordo); position: sticky; top: 0; background: rgba(10, 10, 12, 0.94); backdrop-filter: blur(6px); z-index: 5; }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; }
.barra nav button { border: none; padding: 8px 12px; color: var(--tenue); }
.barra nav button.attiva { color: var(--arancio); background: var(--arancio-tenue); }

main { max-width: 900px; margin: 0 auto; padding: 16px; }
.scheda-contenuto > * + * { margin-top: 16px; }

.opzioni { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
fieldset { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
legend { float: left; margin-right: 8px; color: var(--tenue); font-size: 0.9rem; }
.pillola { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--bordo); border-radius: 999px; color: var(--testo); cursor: pointer; }
.pillola input { width: auto; margin: 0; accent-color: var(--arancio); }
.pillola:has(input:checked) { border-color: var(--arancio); background: var(--arancio-tenue); }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.riga { display: flex; gap: 12px; flex-wrap: wrap; }
.riga label { flex: 1 1 160px; }
h3 { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--arancio); margin: 24px 0 4px; }
h3:first-child { margin-top: 0; }

/* Sala del consiglio */
.contatori { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 0.85rem; color: var(--tenue); }
#stato-aleph { color: var(--arancio); }
.esagoni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.esagono { aspect-ratio: 1.15; }
.esa-forma {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 8px;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  background: #16161b; border: 0; transition: background 0.3s;
}
.esa-forma b { font-family: var(--mono); letter-spacing: 0.12em; font-size: clamp(0.7rem, 2.6vw, 1rem); }
.esa-forma small { color: var(--tenue); font-size: 0.75rem; }
.esa-stato { font-family: var(--mono); font-size: clamp(0.62rem, 2vw, 0.78rem); color: var(--tenue); margin-top: 4px; }
.esagono[data-stato="pensa"] .esa-forma { background: #2a1606; animation: pulsa 1.6s ease-in-out infinite; }
.esagono[data-stato="pensa"] .esa-stato { color: var(--arancio); }
.esagono[data-stato="fatto"] .esa-forma { background: #0f2419; }
.esagono[data-stato="fatto"] .esa-stato { color: var(--verde); }
.esagono[data-stato="errore"] .esa-forma { background: #2a0e0e; }
.esagono[data-stato="errore"] .esa-stato { color: var(--rosso); }
@keyframes pulsa { 50% { background: #3a1e08; } }
@media (prefers-reduced-motion: reduce) { .esagono[data-stato="pensa"] .esa-forma { animation: none; } }

#pannello-domande h4 { margin: 0 0 4px; font-family: var(--mono); color: var(--arancio); letter-spacing: 0.08em; }

/* Risultato */
.voce { border-left: 3px solid var(--bordo); padding: 4px 0 4px 14px; margin: 16px 0; }
.voce > .nome { font-family: var(--mono); font-weight: 600; letter-spacing: 0.12em; font-size: 0.85rem; }
.voce.malkhut > .nome { color: #7fb3ff; }
.voce.tiferet > .nome { color: #f2c14e; }
.voce.netzach > .nome { color: #b38cff; }
.voce.aleph { border-left-color: var(--arancio); background: linear-gradient(90deg, var(--arancio-tenue), transparent 60%); padding: 12px 16px; border-radius: 0 8px 8px 0; }
.voce.aleph > .nome { color: var(--arancio); font-size: 1rem; }
.voce p:first-child, .voce ul:first-child { margin-top: 4px; }
.dissenso { margin: 8px 0; }
.dissenso b { font-family: var(--mono); }
.fonti li { word-break: break-word; }
details { border: 1px solid var(--bordo); border-radius: 8px; padding: 10px 14px; margin-top: 16px; }
summary { cursor: pointer; font-family: var(--mono); font-size: 0.85rem; color: var(--tenue); letter-spacing: 0.06em; }
.giro { margin-top: 14px; }
.giro h5 { font-family: var(--mono); color: var(--arancio); margin: 10px 0 4px; letter-spacing: 0.08em; }
.intervento { font-size: 0.9rem; margin: 8px 0 12px; }
.intervento .chi { font-family: var(--mono); font-weight: 600; }
.piccolo { font-size: 0.85rem; color: var(--tenue); }
pre.grezzo { white-space: pre-wrap; font-family: var(--mono); font-size: 0.8rem; color: var(--tenue); }

.storico-voce { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--bordo); }
.storico-voce button.link { border: none; padding: 0; text-align: left; color: var(--testo); }
.storico-voce button.link:hover { color: var(--arancio); }

@media (max-width: 560px) {
  .scheda { padding: 16px; }
  .esagoni { gap: 4px; }
  .barra nav { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
  .barra nav button { white-space: nowrap; }
}