/* NEON — 05 Immagine. Suite creativa scura: pannelli, strumenti, tela. */
:root{
  --fondo:#1b1b1b;
  --fondo-2:#141414;
  --pannello:#252526;
  --pannello-2:#2d2d30;
  --pannello-3:#333336;
  --filo:#3c3c3c;
  --filo-2:#2f2f31;
  --testo:#e8e8e8;
  --tenue:#9a9a9a;
  --blu:#3d8bfd;
  --blu-soft:#2b4a7a;
  --verde:#38e8ff;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"Plex Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--fondo);color:var(--testo);font-family:var(--sans);
  font-size:12px;-webkit-font-smoothing:antialiased}
h1,h2,p,dl,dd,dt,ol,ul{margin:0}
button{font:inherit;color:inherit}
a{color:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--blu);outline-offset:1px}

.app{display:flex;flex-direction:column;height:100dvh;min-height:0}

/* ---------- barra dei menu ---------- */
.barra-menu{
  display:flex;align-items:center;gap:16px;height:32px;padding:0 10px;flex:none;
  background:var(--pannello);border-bottom:1px solid var(--filo);
}
.marca{display:flex;align-items:center;gap:8px;margin-right:2px}
.segno{display:grid;place-items:center;width:18px;height:18px;background:var(--fondo-2);
  border:1px solid var(--verde);color:var(--verde);font-family:var(--mono);font-size:10px;font-weight:600}
.marca-nome{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.marca-nome span{color:var(--verde);margin:0 1px}
.menu{display:flex;gap:2px}
.menu button{background:none;border:0;padding:5px 9px;font-size:11.5px;color:var(--testo);cursor:pointer}
.menu button:hover,.menu button[aria-expanded="true"]{background:var(--pannello-2);color:#fff}
.barra-menu-stato{margin-left:auto;font-size:9.5px;letter-spacing:.06em;color:var(--tenue);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
.lab-link{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-decoration:none;color:var(--tenue);
  border:1px solid transparent;padding:3px 6px;white-space:nowrap}
.lab-link span{color:var(--verde)}
.lab-link:hover{border-color:var(--filo);color:var(--testo)}

/* ---------- barra delle opzioni ---------- */
.barra-opzioni{
  display:flex;align-items:center;gap:16px;height:44px;padding:0 12px;flex:none;overflow-x:auto;
  background:var(--pannello-2);border-bottom:1px solid var(--filo);white-space:nowrap;
}
.op-titolo{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);min-width:74px}
.op{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tenue);flex:none}
.op input[type="range"]{width:96px;accent-color:var(--blu)}
.op output{font-family:var(--mono);font-size:9.5px;color:var(--testo);min-width:34px}
.op-colore{color:var(--testo)}
.op input[type="color"]{width:22px;height:18px;padding:0;border:1px solid var(--filo);background:none;cursor:pointer}
.op-check input{accent-color:var(--blu)}
.op-nota{font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:#7a7a7a;margin-left:6px}
.op-selezione{display:flex;gap:6px;margin-left:auto}
.op-selezione button{background:var(--blu);border:1px solid var(--blu);color:#fff;padding:4px 10px;
  font-size:10.5px;cursor:pointer}
.op-selezione button + button{background:transparent;border-color:var(--filo);color:var(--testo)}
.op-selezione button:hover{filter:brightness(1.1)}

/* ---------- corpo ---------- */
.corpo{display:grid;grid-template-columns:48px minmax(0,1fr) 268px;flex:1;min-height:0}

.attrezzi{
  background:#222;border-right:1px solid var(--filo);display:flex;flex-direction:column;
  align-items:center;padding:4px 0;gap:1px;
}
.attrezzo{width:40px;height:38px;display:grid;place-items:center;background:none;border:0;
  border-left:2px solid transparent;color:#c9c9c9;cursor:pointer}
.attrezzo:hover{background:#2c2c2c;color:#fff}
.attrezzo[aria-pressed="true"]{background:#303033;border-left-color:var(--blu);color:#fff}
.attrezzi-filo{width:24px;height:1px;background:var(--filo);margin:4px 0}

.viewport{
  position:relative;overflow:auto;background:var(--fondo-2);outline:none;
  background-image:radial-gradient(circle at 50% 40%,#1d1d1d 0%,#141414 70%);
  display:flex;align-items:flex-start;justify-content:flex-start;padding:26px;
}
.tavolo{
  position:relative;flex:none;margin:auto;line-height:0;box-shadow:0 8px 28px rgba(0,0,0,.55);
  background-image:
    linear-gradient(45deg,#2a2a2a 25%,transparent 25%,transparent 75%,#2a2a2a 75%),
    linear-gradient(45deg,#2a2a2a 25%,#232323 25%,#232323 75%,#2a2a2a 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
#tela,#anteprima{display:block;image-rendering:auto}
#tela{position:relative;z-index:1;cursor:crosshair}
.anteprima{position:absolute;inset:0;z-index:2;pointer-events:none}
.griglia-vista{position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:linear-gradient(to right,rgba(61,139,253,.35) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(61,139,253,.35) 1px,transparent 1px);
  background-size:50px 50px}
.viewport-nota{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);
  font-size:10px;letter-spacing:.04em;color:#7a7a7a;pointer-events:none;white-space:nowrap}
.viewport-nota strong{color:#bdbdbd;font-weight:400}

/* ---------- pannelli ---------- */
.pannelli{background:var(--pannello);border-left:1px solid var(--filo);overflow:auto;min-height:0}
.pannello{border-bottom:1px solid var(--filo-2);padding:9px 10px 11px}
.pannello-testa{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#c9c9c9;
  padding-bottom:7px;margin-bottom:8px;border-bottom:1px solid var(--filo-2)}
.pannello-azione{background:none;border:1px solid var(--filo);color:var(--tenue);cursor:pointer;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px}
.pannello-azione:hover{color:#fff;border-color:#5a5a5a}
.pannello-meta{font-family:var(--mono);font-size:9px;color:var(--tenue)}

.colori{display:flex;align-items:flex-start;gap:6px;margin-bottom:9px}
.swatch{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.swatch input{width:38px;height:30px;padding:0;border:1px solid var(--filo);background:none;cursor:pointer}
.swatch-etichetta{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.scambia{margin-left:auto;margin-top:6px;background:none;border:1px solid var(--filo);width:26px;height:24px;
  display:grid;place-items:center;color:var(--tenue);cursor:pointer}
.scambia:hover{color:#fff;border-color:#5a5a5a}
.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.palette button{aspect-ratio:1;border:1px solid rgba(0,0,0,.55);cursor:pointer;padding:0}
.palette button:hover{outline:1px solid var(--blu);outline-offset:1px}

.reg{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin-bottom:7px;font-size:10.5px;
  color:var(--tenue)}
.reg input{grid-column:1 / -1;width:100%;accent-color:var(--blu);height:14px}
.reg output{font-family:var(--mono);font-size:9px;color:var(--testo);font-variant-numeric:tabular-nums}

.riga-bottoni{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}
.riga-bottoni button{background:var(--pannello-2);border:1px solid var(--filo);color:var(--testo);
  padding:5px 4px;font-size:10px;cursor:pointer}
.riga-bottoni button:hover{background:var(--pannello-3);border-color:#5a5a5a}
#reg-applica{grid-column:1 / -1;background:var(--blu);border-color:var(--blu);color:#fff}
#reg-applica:hover{filter:brightness(1.08)}

.letture{display:flex;flex-direction:column;gap:4px}
.letture div{display:flex;justify-content:space-between;gap:10px;font-size:10.5px}
.letture dt{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.letture dd{font-family:var(--mono);font-size:9.5px;color:var(--testo);font-variant-numeric:tabular-nums}

.pannello-storia{display:flex;flex-direction:column;min-height:0}
.storia{display:flex;flex-direction:column;gap:1px;max-height:150px;overflow:auto}
.storia li button{width:100%;display:flex;gap:8px;align-items:baseline;background:none;border:0;
  border-left:2px solid transparent;padding:4px 5px;text-align:left;font-size:10px;color:#bdbdbd;cursor:pointer}
.storia li button span{font-family:var(--mono);font-size:8px;color:#7a7a7a}
.storia li button:hover{background:var(--pannello-2);color:#fff}
.storia li.attuale button{border-left-color:var(--blu);color:#fff;background:var(--pannello-2)}
.storia li.futuro button{opacity:.45}

/* ---------- barra di stato ---------- */
.barra-stato{display:flex;align-items:center;gap:12px;height:26px;padding:0 10px;flex:none;
  background:var(--pannello);border-top:1px solid var(--filo);font-family:var(--mono);font-size:9.5px;
  color:var(--tenue);white-space:nowrap;overflow-x:auto}
.sep{width:1px;height:12px;background:var(--filo)}
.stato-nota{color:#7a7a7a}
.barra-stato-fondo{margin-left:auto;display:flex;align-items:center;gap:6px}
.zoom-btn{background:none;border:1px solid var(--filo);color:var(--testo);width:22px;height:17px;
  display:grid;place-items:center;cursor:pointer;font-family:var(--mono);font-size:10px;padding:0}
.zoom-btn:hover{border-color:#5a5a5a;background:var(--pannello-2)}
.zoom-adatta{width:auto;padding:0 7px;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase}
.zoom-pannelli{display:none;width:auto;padding:0 7px;font-size:8.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- menu a comparsa ---------- */
.menu-pop{
  position:fixed;z-index:80;min-width:236px;padding:4px;background:var(--pannello-2);
  border:1px solid #4a4a4a;box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:6px 9px;font-size:11.5px;color:var(--testo);text-align:left;cursor:pointer}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--blu);color:#fff;outline:none}
.menu-pop .scorciatoia{margin-left:auto;font-family:var(--mono);font-size:8.5px;color:#8f8f8f}
.menu-pop button:hover .scorciatoia{color:#e6efff}
.menu-pop .filo{height:1px;background:#444;margin:4px 2px}
.menu-pop .voce-ico{width:14px;text-align:center;font-family:var(--mono);font-size:9px;color:#8f8f8f}
.menu-pop button:hover .voce-ico{color:#e6efff}

/* ---------- dialogo ---------- */
dialog.dialogo{padding:0;border:1px solid #4a4a4a;background:var(--pannello-2);color:var(--testo);
  box-shadow:0 26px 70px rgba(0,0,0,.6);width:min(420px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dialogo-form{display:flex;flex-direction:column}
.dialogo-form h2{font-family:var(--sans);font-size:13px;font-weight:500;padding:11px 14px;
  border-bottom:1px solid var(--filo)}
.dialogo-corpo{padding:12px 14px;display:flex;flex-direction:column;gap:9px;font-size:11.5px;max-height:60vh;overflow:auto}
.dialogo-corpo label{display:flex;flex-direction:column;gap:4px;font-size:10px;color:var(--tenue)}
.dialogo-corpo input,.dialogo-corpo select,.dialogo-corpo textarea{background:#1c1c1c;border:1px solid #4a4a4a;
  color:var(--testo);padding:5px 7px;font-family:var(--sans);font-size:11.5px;outline:none;min-width:0}
.dialogo-corpo textarea{min-height:70px;resize:vertical;font-family:var(--sans)}
.dialogo-corpo input:focus,.dialogo-corpo select:focus,.dialogo-corpo textarea:focus{border-color:var(--blu)}
.dialogo-corpo .riga{display:flex;gap:9px}
.dialogo-corpo .riga > label{flex:1}
.dialogo-azioni{display:flex;justify-content:flex-end;gap:7px;padding:10px 14px;margin:0;border-top:1px solid var(--filo)}
.dialogo-annulla{background:none;border:1px solid var(--filo);padding:6px 12px;font-size:11px;cursor:pointer}
.dialogo-annulla:hover{background:var(--pannello-3)}
.bottone-primario{background:var(--blu);border:1px solid var(--blu);color:#fff;padding:6px 12px;
  font-size:11px;cursor:pointer}
.bottone-primario:hover{filter:brightness(1.08)}

/* ---------- avvisi ---------- */
.avvisi{position:fixed;right:18px;bottom:40px;z-index:90;display:flex;flex-direction:column;gap:7px;
  align-items:flex-end;pointer-events:none}
.avviso{pointer-events:auto;min-width:220px;max-width:320px;padding:9px 11px;background:#2d2d30;
  border:1px solid #4a4a4a;border-left:2px solid var(--verde);box-shadow:0 14px 34px rgba(0,0,0,.5);
  font-size:11px;line-height:1.45;animation:entra .16s ease-out}
.avviso b{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--verde);margin-bottom:2px;font-weight:400}
.avviso.esce{animation:esce .16s ease-in forwards}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}
@keyframes esce{to{opacity:0;transform:translateY(6px)}}

/* ---------- adattamenti ---------- */
@media (max-width:1080px){
  .corpo{grid-template-columns:44px minmax(0,1fr) 236px}
  .barra-menu-stato{display:none}
}
@media (max-width:900px){
  .corpo{grid-template-columns:44px minmax(0,1fr)}
  .pannelli{
    position:fixed;left:0;right:0;bottom:26px;height:38dvh;z-index:40;display:flex;
    overflow-x:auto;overflow-y:hidden;border-left:0;border-top:1px solid var(--filo);
    transform:translateY(105%);transition:transform .22s ease;
  }
  body.pannelli-aperti .pannelli{transform:translateY(0)}
  .pannello{min-width:240px;border-right:1px solid var(--filo-2);overflow:auto}
  .pannello-storia{display:none}
  .zoom-pannelli{display:grid}
  .viewport{padding:14px}
}
@media (max-width:620px){
  .barra-opzioni{height:auto;padding:6px 10px;gap:8px 10px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
  .op-titolo{min-width:58px;font-size:9px}
  .op{font-size:10px;gap:5px}
  .op input[type="range"]{width:64px}
  .op-nota{display:none}
  .marca-nome{display:none}
  .menu button{padding:5px 6px;font-size:11px}
  .barra-stato{gap:8px}
  .stato-nota{display:none}
  .viewport-nota{font-size:9px;white-space:normal;text-align:center;width:70%}
  .attrezzo{width:38px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}