/* LiveScout, prodotto di REGIA LIVE — © 2026 Sergio Rosario La Rosa. Tutti i diritti riservati. */
:root{color-scheme:dark;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;background:#05080a;color:#f5f7f8}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#05080a}
button,input{font:inherit;color:inherit}.is-hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Home LiveScout senza foto: fondo scuro pulito con un alone del blu del logo,
   marchio + tagline al centro, form login sotto. Niente allineamenti fragili. */
.login-screen{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;padding:24px 22px max(30px,env(safe-area-inset-bottom));background:#fff}
.login-box{width:min(82vw,320px);align-self:center;display:grid;gap:8px;text-align:center;justify-items:center}
.login-logo{width:100%;height:auto;display:block}
.login-tag{margin:2px 0 14px;color:#3f7f9e;font-size:12px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.login-box input{width:100%;height:33px;border:1px solid #c3d0d8;border-radius:7px;background:#fff;color:#12212a;padding:0 12px;font-size:11px;letter-spacing:.12em;text-align:center;outline:none}
.login-box input::placeholder{color:#93a3ac;letter-spacing:.16em}
.login-box input:focus{border-color:#2c8fd6;box-shadow:0 0 0 3px rgba(44,143,214,.18)}
.login-box button{width:100%;height:34px;border:none;border-radius:7px;background:linear-gradient(180deg,#2c93cf,#1f6fa8);color:#fff;font-size:11px;font-weight:800;letter-spacing:.18em;cursor:pointer;margin-top:2px}
.login-box button:active{filter:brightness(.92)}
.login-message{margin:2px 0 0;min-height:15px;color:#c0392b;font-size:12px;font-weight:750}
/* LS-003 (Sergio 30/09): la pagina non supera MAI il formato dell'iPhone 15 Pro in orizzontale (852x393):
   su schermi piu' grandi (PC, telefoni piu' grandi) resta 852x393 al centro, identica a quella di Max. */
.max-app{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(100vw,852px);height:min(100vh,393px);display:grid;grid-template-columns:1.33fr 1fr;grid-template-rows:38px minmax(0,1fr) 33px;column-gap:18px;row-gap:6px;padding-top:max(4px,env(safe-area-inset-top));padding-right:max(11px,env(safe-area-inset-right));padding-bottom:max(7px,env(safe-area-inset-bottom));padding-left:max(11px,env(safe-area-inset-left));background:radial-gradient(circle at 18% 0,#20303a 0,#111a20 33%,#070b0e 75%)}
.topbar{grid-column:1/-1;display:grid;grid-template-columns:105px 1fr 130px;align-items:center;border-bottom:1px solid #334149}
.clock{display:grid;place-items:center;width:105px;height:33px;border:1px solid #61717a;border-radius:8px;background:#11191e;font:800 16px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.brand{text-align:center;line-height:1}.brand strong{display:block;font-size:17px;letter-spacing:.14em}.brand span{display:block;margin-top:4px;color:#77858e;font-size:7px;font-weight:800;letter-spacing:.32em}
.connection{justify-self:end;display:flex;align-items:center;gap:7px;color:#a2adb3;font-size:7px;font-weight:850;letter-spacing:.03em}.connection i,.wait-state i,.online-state i,.on-air i,.line-quality i{display:block;width:10px;height:10px;border-radius:50%;background:#5e6a71}.connection i{box-shadow:0 0 0 1px #111}
.camera-panel{position:relative;grid-column:1;grid-row:2;align-self:center;width:100%;max-height:100%;aspect-ratio:16/9;min-width:0;min-height:0;border:1px solid #4d626e;border-radius:13px;overflow:hidden;background:#070e13;box-shadow:inset 0 0 0 3px #0b1115}
.camera-panel video{display:block;width:100%;height:100%;object-fit:cover;background:#030506}.camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;background:linear-gradient(31deg,#0a1218 0 49.6%,#0d161c 50%)}.camera-placeholder strong{font-size:30px;letter-spacing:.02em}.camera-placeholder span{color:#8c9ba4;font-size:11px;font-weight:800;letter-spacing:.14em}
.camera-placeholder[hidden],.return-placeholder[hidden]{display:none!important}
.control-rail{grid-column:2;grid-row:2/4;display:grid;grid-template-rows:auto 31px 23px 31px 23px minmax(58px,1fr);gap:5px;min-width:0;min-height:0;border-left:2px solid #33454e;padding-left:16px}
.return-panel{position:relative;width:100%;aspect-ratio:16/9;min-height:0;border:1px solid #4d626e;border-radius:12px;overflow:hidden;background:#03090d}.return-panel video{display:block;width:100%;height:100%;object-fit:cover}.return-placeholder{position:absolute;inset:0;display:grid;place-content:center;gap:5px;text-align:center;background:#040b0f;cursor:pointer}.return-placeholder strong{font-size:19px;letter-spacing:.02em}.return-placeholder span{color:#77858e;font-size:7px}
.reserve-button,.stop-button,.return-button,.audio-button{border:1px solid #52636d;background:linear-gradient(180deg,#222d34,#172027);border-radius:8px;font-weight:900;cursor:pointer;touch-action:manipulation}.reserve-button{display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;line-height:.92}.reserve-button.pending{border-color:#da941e;background:linear-gradient(180deg,#6c4910,#49310c);color:#ffe0a0}.reserve-button.live{border-color:#188951;background:linear-gradient(180deg,#123d2a,#0b2b1d);color:#baffd4}.reserve-button:disabled{cursor:default}
.wait-state,.online-state,.entry-state{display:flex;align-items:center;border:1px solid #40515b;border-radius:7px;background:#11191e;padding:0 10px;color:#87959d;font-size:8px;font-weight:850;letter-spacing:.04em}.wait-state{visibility:hidden;gap:7px}.wait-state.visible{visibility:visible;border-color:#94691d;color:#efc979}.wait-state.visible i{background:#f1a927;box-shadow:0 0 8px #f1a927}.entry-state{justify-content:space-between}.entry-state strong{font:900 21px ui-monospace,SFMono-Regular,Menlo,monospace;color:#ffc85a}.online-state{gap:8px}.online-state.live{border-color:#246d47;background:#0c2118;color:#8ddbad}.online-state.live i{background:#21d27c;box-shadow:0 0 8px #21d27c}
/* © 2026 Sergio Rosario La Rosa. Tutti i diritti riservati. LiveScout, prodotto di REGIA LIVE. */
.rail-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;min-height:0}.stop-button{border-color:#8c343a;background:linear-gradient(145deg,#6e171d,#4e1015);color:#ffc7ca}.return-button{background:linear-gradient(145deg,#27333b,#1b252c)}.rail-actions button{font-size:12px;line-height:1.15}.rail-actions button span{display:block}.rail-actions button:disabled{opacity:.36;filter:saturate(.25);cursor:default}
.statusbar{grid-column:1;grid-row:3;display:grid;grid-template-columns:auto auto 70px auto;justify-content:space-between;/* LS-003: colonne a misura del contenuto, niente sovrapposizioni */gap:8px;align-items:center;border:1px solid #455761;border-radius:8px;background:#10181d;padding:3px 10px;min-width:0}.on-air{display:flex;align-items:center;gap:7px;font-size:8px;white-space:nowrap}.on-air i{width:10px;height:10px;background:#20d982;box-shadow:0 0 8px #20d982}.volume{display:flex;align-items:center;gap:5px}.volume>span,.line-quality>span{color:#839198;font-size:6px;font-weight:800;letter-spacing:.04em}.meter{height:16px;display:flex;align-items:end;gap:2px}.meter i{display:block;width:3px;border-radius:1px;background:#16d67d;opacity:.25}.meter i.active{opacity:1;box-shadow:0 0 5px #16d67d}.audio-button{height:23px;border-radius:6px;font-size:8px}.audio-button.active{border-color:#1ca466;background:#103b29;color:#bfffd9}.line-quality{display:flex;align-items:center;gap:7px;white-space:nowrap}.line-quality>div{display:flex;align-items:center;gap:6px;font-size:8px}/* LS-003: su una riga, dentro la barra */.line-quality i{width:9px;height:9px}.line-quality i.good{background:#20d982;box-shadow:0 0 8px #20d982}.line-quality i.bad{background:#ef3f48;box-shadow:0 0 8px #ef3f48}.line-quality i.unknown{background:#e7a92e;box-shadow:0 0 7px #e7a92e}
.toast{position:absolute;left:50%;bottom:47px;transform:translate(-50%,8px);z-index:20;min-width:210px;max-width:70%;padding:8px 14px;border:1px solid #4c5c65;border-radius:8px;background:#0b1115e8;text-align:center;font-size:10px;font-weight:750;opacity:0;pointer-events:none;transition:.2s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
.rotate-message{display:none}
/* LS-004 (338): pulsanti della durata (5-20 min) sopra PRENOTA; contatore della fine in arancione nell'ultimo minuto */
.durate{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;min-height:0}.durate button{border:1px solid #52636d;border-radius:6px;background:#172027;color:#cfd8dd;font-size:10px;font-weight:900;cursor:pointer;touch-action:manipulation;padding:0}.durate button.scelta{border-color:#da941e;background:#49310c;color:#ffe0a0}.durate button:disabled{opacity:.45;cursor:default}
.entry-state.avviso{border-color:#da941e;background:#3a2606;color:#ffe0a0}.entry-state.chiusura{border-color:#b8434a;background:#3a1215;color:#ffc7ca}
/* LS-004: avviso in alto, sopra la camera, grande; si chiude toccandolo */
.notice-banner{position:absolute;left:11px;top:46px;width:calc((100% - 40px) * .5708);/* = larghezza del riquadro camera (colonne 1.33fr/1fr, margini 22 + spazio 18) */z-index:25;padding:9px 12px;border:2px solid #f1a927;border-radius:9px;background:#3a2606f2;color:#ffe2a6;font-size:13px;font-weight:900;letter-spacing:.03em;text-align:center;cursor:pointer}.notice-banner small{display:block;margin-top:3px;color:#d8b36a;font-size:8px;letter-spacing:.12em}.notice-banner[hidden]{display:none}
@supports(height:100dvh){.max-app{width:min(100dvw,852px);height:min(100dvh,393px)}}
/* LS-003: la disposizione "iPhone in orizzontale" vale sempre (prima solo con altezza <=395): l'app non e' mai piu' alta di 393. */
@media all{.max-app{grid-template-rows:34px minmax(0,1fr) 31px;row-gap:4px}.topbar{grid-template-columns:105px 1fr 120px}.clock{height:30px}.camera-panel{justify-self:start;width:auto;height:100%;max-width:100%}.control-rail{grid-template-rows:minmax(70px,1fr) 22px 29px 21px 29px 21px 50px;gap:4px}.return-panel{justify-self:center;width:auto;height:100%;max-width:100%}.brand strong{font-size:16px}.camera-placeholder strong{font-size:27px}}
@media(max-height:350px){.max-app{grid-template-rows:31px minmax(0,1fr) 28px;padding-top:2px;padding-bottom:3px}.clock{height:27px}.control-rail{grid-template-rows:minmax(60px,1fr) 20px 27px 18px 27px 18px 44px;gap:3px}.rail-actions button{font-size:10px}.wait-state,.online-state,.entry-state{font-size:7px}.statusbar{padding:2px 7px;gap:5px}}
/* Schermo basso (iPhone in orizzontale): logo e campi si riducono insieme cosi' ENTRA resta dentro */
@media(max-height:470px){.login-screen{justify-content:center;padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.login-box{width:min(46vw,260px);gap:5px}.login-tag{font-size:9px;letter-spacing:.06em;margin:1px 0 7px}.login-box input{height:29px;font-size:10px}.login-box button{height:31px;font-size:10px}}
@media(max-height:360px){.login-box{width:min(40vw,220px);gap:4px}.login-box input{height:26px}.login-box button{height:28px}.login-tag{font-size:8px;margin:0 0 5px}}
@media(orientation:portrait){.max-app{display:none!important}.rotate-message{display:none}body.authenticated .login-screen{display:none!important}body.authenticated .rotate-message{position:fixed;inset:0;display:grid;place-items:center;padding:32px;background:#05080a;color:#fff;text-align:center;font-size:15px;font-weight:900;letter-spacing:.12em}}

/* 08/10 (Sergio): IMPAGINAZIONE PULITA. Durate 5-10-15-20 (tolto l'8). Niente riga grigia tra i due lati. Il ritorno e
   tutti i comandi sotto hanno la STESSA larghezza, allineati a destra e a sinistra. Righe dei comandi piu' strette, cosi'
   il riquadro grande torna 16:9 pulito. Le misure in pixel di riquadro grande e ritorno le calcola app.js (impagina). */
.durate{grid-template-columns:repeat(4,1fr)}
.control-rail{border-left:0!important;padding-left:0!important;justify-items:center;align-content:start;
  grid-template-rows:auto 20px 26px 18px 26px 18px 38px!important;gap:4px!important}
.control-rail>*{width:var(--larghezza-rail,100%)!important;max-width:100%;box-sizing:border-box}
.return-panel{height:auto!important;aspect-ratio:16/9!important}
.rail-actions button{font-size:11px}
.camera-panel{aspect-ratio:auto!important}
.line-quality strong{display:inline-block;min-width:58px;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-height:350px){.control-rail{grid-template-rows:auto 18px 24px 16px 24px 16px 34px!important;gap:3px!important}.rail-actions button{font-size:10px}}

/* 08/10 (Sergio, 2a revisione): riquadro grande e ritorno con la parte alta ALLINEATA; la barra di stato subito sotto
   il riquadro grande, su DUE RIGHE e con scritte piu' grandi. Posizioni e misure in pixel: app.js (impagina). */
.camera-panel{grid-row:2/4!important;align-self:start!important}
.statusbar{grid-row:2/4!important;align-self:start!important;height:auto!important;grid-template-columns:1fr auto!important;
  grid-template-rows:auto auto;row-gap:5px!important;column-gap:10px!important;justify-content:stretch!important;padding:6px 12px!important}
.statusbar .on-air{grid-column:1;grid-row:1;font-size:11px}
.statusbar .line-quality{grid-column:2;grid-row:1;justify-self:end}
.statusbar .volume{grid-column:1;grid-row:2}
.statusbar .audio-button{grid-column:2;grid-row:2;justify-self:end;height:26px;font-size:10px;padding:0 14px}
.statusbar .volume>span,.statusbar .line-quality>span{font-size:9px}
.statusbar .line-quality>div{font-size:11px}
.line-quality strong{min-width:70px;max-width:96px}