/* Trickbooth · stile comune. Palette dal marchio: inchiostro, acciaio, arancio, carta. */
:root{
  --carta:#EFEDE8; --carta2:#F4F3EF; --foglio:#F9F8F5; --bianco:#FFFFFF;
  --ink:#121417; --acciaio:#5E6268; --acciaio2:#9AA0A8; --chiaro:#C9CCD1; --linea:#CFCBC2;
  --arancio:#E8572A;
  --titoli:'Space Grotesk',system-ui,sans-serif; --testo:Inter,system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--carta);color:var(--ink);font-family:var(--testo);-webkit-font-smoothing:antialiased}
a{color:var(--ink)} a:hover{color:var(--arancio)}
button{font:inherit;color:inherit;cursor:pointer}
textarea,input{font:inherit;color:var(--ink)}
textarea:focus,input:focus,button:focus-visible,a:focus-visible{outline:2px dashed var(--arancio);outline-offset:3px}
textarea::placeholder,input::placeholder{color:#6A6E74}
.iso{background-color:var(--carta);background-image:repeating-linear-gradient(30deg,transparent 0 31px,rgba(18,20,23,.06) 31px 32px),repeating-linear-gradient(150deg,transparent 0 31px,rgba(18,20,23,.06) 31px 32px)}
.mono{font-family:var(--mono);letter-spacing:.06em}
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rombo{display:inline-block;width:12px;height:7px;flex:none;background:var(--arancio);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pulsa{animation:pulsa 1.4s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pulsa{animation:none}}

/* pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px;border:1.5px solid var(--ink);background:transparent;font-weight:600;font-size:15px;text-decoration:none}
.btn-scuro{background:var(--ink);color:var(--carta);border-color:var(--ink)}
.btn-pop{background:var(--arancio);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-family:var(--titoli);font-weight:700;font-size:17px}
.btn-pop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-icona{width:46px;padding:0;flex:none}
.link{background:none;border:none;text-decoration:underline;font-weight:500;padding:0 8px;min-height:46px}

/* testata */
.testata{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:12px 24px;background:var(--ink);color:var(--carta)}
.testata .logo{display:block;width:124px;height:auto}
.testata .titolo{display:flex;flex-direction:column;gap:3px;min-width:0}
.testata .titolo .cod{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--acciaio2)}
.testata .titolo .nome{font-family:var(--titoli);font-weight:500;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
.tappe{list-style:none;margin:0 0 0 8px;padding:0;flex:1 1 420px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.tappe li{border-top:3px solid var(--acciaio);padding-top:7px;color:var(--acciaio2)}
.tappe li.fatta{border-top-color:var(--carta);color:var(--chiaro)}
.tappe li.ora{border-top-color:var(--arancio);color:#fff;font-weight:600}
.tempo{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.tempo .ore{font-family:var(--mono);font-size:20px;font-weight:500}
.tempo .nota{font-family:var(--mono);font-size:11px;color:var(--acciaio2)}
.ferma{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 22px;background:var(--arancio);color:var(--ink);border:2px solid var(--carta);box-shadow:4px 4px 0 var(--carta);font:700 19px var(--titoli);letter-spacing:.02em}
.ferma.riprendi{background:var(--carta);box-shadow:none}
.ferma .q{width:14px;height:14px;background:var(--ink)}
.ferma.riprendi .q{width:0;height:0;background:none;border-left:13px solid var(--ink);border-top:8px solid transparent;border-bottom:8px solid transparent}

/* corpo */
.corpo{display:flex;flex-wrap:wrap;align-items:stretch;min-height:calc(100vh - 78px)}
.dialogo{flex:1 1 360px;max-width:100%;border-right:1px solid var(--linea);background:var(--carta2);display:flex;flex-direction:column;max-height:calc(100vh - 78px);position:sticky;top:0}
.messaggi{flex:1;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.45}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg .av{width:30px;height:30px;flex:none}
.msg .av-op{width:30px;height:30px;flex:none;display:grid;place-items:center;background:var(--arancio);font:700 12px var(--titoli)}
.msg p{margin:0}
.msg.op{justify-content:flex-end}
.msg.op .bolla{background:var(--ink);color:var(--carta);padding:10px 14px;max-width:290px}
.msg .corpo-msg{display:flex;flex-direction:column;gap:8px;min-width:0}
.scelte{display:flex;gap:8px;flex-wrap:wrap}
.scelte button{min-height:40px;padding:0 14px;background:transparent;border:1.5px solid var(--ink);font-weight:600;font-size:14px}
.scelte button[aria-pressed=true]{background:var(--ink);color:var(--carta)}
.allegati-msg{display:flex;gap:6px;flex-wrap:wrap}
.allegati-msg img{width:72px;height:48px;object-fit:cover;display:block}
.allegati-msg span{font-family:var(--mono);font-size:11px;border:1px solid var(--acciaio2);padding:3px 6px}
.sistema{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--acciaio)}
.sistema::before,.sistema::after{content:"";flex:1;height:1px;background:var(--linea)}
.stato-motore{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--acciaio)}
.corr-msg{display:flex;gap:10px;align-items:flex-start;background:var(--ink);color:var(--carta);padding:10px 12px;max-width:310px}
.corr-msg img{width:64px;height:36px;object-fit:cover;flex:none}
.scrivi{padding:12px 16px 16px;border-top:1px solid var(--linea);display:flex;flex-direction:column;gap:8px;background:var(--carta2)}
.scrivi label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--acciaio)}
.scrivi textarea{width:100%;resize:none;border:1.5px solid var(--ink);background:var(--bianco);padding:12px 14px;font-size:15px;line-height:1.45}
.scrivi .riga{display:flex;justify-content:space-between;align-items:center;gap:8px}
.file-scelti{font-family:var(--mono);font-size:11px;color:var(--acciaio);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

.banco{flex:999 1 560px;min-width:0;padding:22px 30px 40px;display:flex;flex-direction:column;gap:22px}
.banco-testa{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.banco-testa h1{margin:0;font:700 34px var(--titoli);letter-spacing:-.03em}
.banco-testa .conto{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--acciaio)}
.banco-testa .aiuto{font-size:14px;color:var(--acciaio)}
.avviso{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--ink);color:var(--carta);padding:14px 18px}
.avviso .q{width:14px;height:14px;background:var(--arancio);flex:none}
.avviso .sec{color:var(--chiaro)}
#righe{display:flex;flex-direction:column;gap:30px}
.riga-tappa{display:flex;flex-direction:column;gap:12px}
.riga-tappa .testa{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.riga-tappa .testa b{font-weight:600}
.riga-tappa .testa .filo{flex:1;height:1px;background:var(--linea)}
.riga-tappa .testa .nota{color:var(--acciaio)}
.miniature{display:flex;flex-wrap:wrap;gap:16px}
.posto{display:flex;flex-direction:column;gap:6px;width:136px}
.posto .tela{position:relative;display:block;width:136px;height:77px;padding:0;border:none;background:var(--bianco);outline:1px solid var(--linea)}
.posto .tela img{width:136px;height:77px;object-fit:cover;display:block}
.posto .tela.sel{outline:1.5px dashed var(--arancio);outline-offset:6px}
.posto .tela .pt{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--arancio);display:none}
.posto .tela.sel .pt{display:block}
.pt.a{top:-10px;left:-10px}.pt.b{top:-10px;right:-10px}.pt.c{bottom:-10px;left:-10px}.pt.d{bottom:-10px;right:-10px}
.etq-nuovo{position:absolute;top:4px;left:4px;background:var(--arancio);color:var(--ink);font:600 9px var(--mono);letter-spacing:.08em;padding:2px 5px}
.etq-ver{position:absolute;top:4px;right:4px;background:var(--ink);color:var(--carta);font:600 9px var(--mono);letter-spacing:.06em;padding:2px 5px}
.velo{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,20,23,.55);color:var(--carta);font:600 10px var(--mono);letter-spacing:.08em}
.tratteggio{width:136px;height:77px;border:1.5px dashed var(--acciaio2);display:grid;place-items:center;font:500 10px var(--mono);letter-spacing:.08em;color:var(--acciaio);background-image:repeating-linear-gradient(135deg,#E2DFD7 0 6px,var(--carta) 6px 12px)}
.posto .dida{font-family:var(--mono);font-size:10px;letter-spacing:.04em;line-height:1.35}
.posto .dida span{color:var(--acciaio)}
.vuoto{border:1.5px dashed var(--acciaio2);padding:28px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:rgba(249,248,245,.8)}
.vuoto b{font:700 20px var(--titoli)}

/* pannello di correzione */
.pannello{display:flex;flex-wrap:wrap;gap:24px;background:var(--foglio);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px}
.pannello figure{margin:0;flex:1 1 520px;min-width:0;position:relative;background:var(--ink);cursor:crosshair;align-self:flex-start}
.pannello figure img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;display:grid;place-items:center;background:var(--arancio);color:var(--ink);border:2px solid var(--ink);font:700 15px var(--titoli);pointer-events:none}
.pannello .lato{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:12px}
.pannello .lato .cod{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--acciaio)}
.pannello .lato h2{margin:0;font:700 24px var(--titoli);letter-spacing:-.01em}
.versioni{display:flex;gap:6px;flex-wrap:wrap}
.versioni button{min-height:34px;padding:0 10px;border:1.5px solid var(--acciaio2);background:transparent;font:500 12px var(--mono)}
.versioni button[aria-pressed=true]{border-color:var(--ink);background:var(--ink);color:var(--carta)}
.punti{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.punti li{display:flex;gap:10px;align-items:center}
.punti .n{width:28px;height:28px;flex:none;display:grid;place-items:center;background:var(--arancio);border:1.5px solid var(--ink);font:700 14px var(--titoli)}
.punti input{flex:1;min-width:0;min-height:40px;border:1.5px solid var(--ink);background:var(--bianco);padding:0 10px;font-size:14px}
.punti .tog{width:40px;min-height:40px;border:1px solid var(--linea);background:transparent}
.pannello textarea{width:100%;resize:vertical;border:1.5px solid var(--ink);background:var(--bianco);padding:12px 14px;font-size:15px;line-height:1.45}
.pannello .azioni{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pannello .piede{font-size:13px;color:var(--acciaio)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--carta);padding:12px 18px;font-size:14px;display:flex;gap:10px;align-items:center;z-index:9;box-shadow:4px 4px 0 var(--arancio)}

/* telefono */
@media (max-width:760px){
  .testata{padding:12px 14px;gap:12px}
  .testata .logo{width:34px;content:url(icona.svg)}
  .testata .titolo{flex:1}
  .testata .titolo .nome{font-size:15px;max-width:none}
  .tempo{display:none}
  .tappe{order:5;flex:1 1 100%;margin:0}
  .ferma{min-height:44px;padding:0 12px;font-size:15px;box-shadow:none}
  .corpo{flex-direction:column;flex-wrap:nowrap}
  .banco{order:1;padding:14px 0 16px;gap:14px;flex:none;width:100%;max-width:100vw}
  #righe,.riga-tappa,.miniature{min-width:0;max-width:100%}
  .banco-testa,.avviso,.riga-tappa .testa,.vuoto{margin:0 14px}
  .banco-testa h1{font-size:22px}
  .banco-testa .aiuto{display:none}
  .miniature{flex-wrap:nowrap;overflow-x:auto;padding:4px 14px 10px;gap:12px}
  .posto{flex:none}
  .pannello{margin:0 10px;box-shadow:4px 4px 0 var(--ink);padding:12px}
  .dialogo{order:2;flex:none;width:100%;max-height:none;position:static;border-right:none;border-top:1px solid var(--linea)}
  .scrivi{position:sticky;bottom:0}
}

.campo{display:flex;flex-direction:column;gap:6px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acciaio)}
.campo input,.campo textarea{font:400 16px/1.45 var(--testo);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--bianco);border:1.5px solid var(--ink);padding:11px 12px;border-radius:0;width:100%;resize:vertical}
.campo input:focus,.campo textarea:focus{outline:3px solid var(--arancio);outline-offset:1px}
.btn-pop:disabled{opacity:.6;box-shadow:none}