:root {
  --bg: #080c18;
  --panel: #10172a;
  --panel2: #172038;
  --line: #24304d;
  --text: #e8ecf3;
  --muted: #8a96ab;
  --accent: #f2d91b;       /* giallo GSFLASH */
  --accent-ink: #141102;
  --blue: #1550b8;         /* blu GSFLASH */
  --pgm: #e5322d;
  --pvw: #1fb655;
  --warn: #e8a317;
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.4 var(--font); -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.err { color: #ff6b66; min-height: 1.2em; margin: 4px 0; }

/* ---------- elementi base ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.btn {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; min-height: 44px; user-select: none; touch-action: manipulation;
  transition: background .12s, border-color .12s, transform .05s;
}
.btn:hover { border-color: #3a4864; }
.btn:active, .btn.pressed { transform: scale(.97); background: #253049; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 650; }
.btn.danger { background: var(--pgm); border-color: var(--pgm); color: #fff; font-weight: 650; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
label { display: block; margin: 10px 0; color: var(--muted); font-size: 13px; }
label input:not([type=checkbox]):not([type=range]), label select {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text); font-size: 15px;
}
label input:focus, label select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.check { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); }
.hint { color: var(--muted); font-size: 12px; margin-top: 3px; }

.brand { font-size: 20px; letter-spacing: .3px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.brand b { color: var(--accent); }
.brand.big { font-size: 30px; justify-content: center; }
.logo { height: 1.55em; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(21, 80, 184, .55)); }
.login-mark { height: 120px; width: auto; display: block; margin: 0 auto 10px; filter: drop-shadow(0 0 22px rgba(21, 80, 184, .6)); }
.byline { color: var(--muted); letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin: 2px 0 14px; }
.byline b { color: var(--accent); }

/* ---------- login ---------- */
.screen { min-height: 100%; }
#login { display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 30%, #13245a 0%, var(--bg) 65%); }
.login-card { width: min(380px, 100%); padding: 28px; text-align: center; }
.login-card label { text-align: left; }

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; height: 56px;
  border-bottom: 1px solid var(--line); background: #0a1122; position: sticky; top: 0; z-index: 5;
  border-image: linear-gradient(90deg, var(--blue), var(--accent) 50%, var(--blue)) 1;
}
.chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap; color: var(--muted); }
.chip.on { color: var(--text); border-color: #2e5a3d; background: #12251a; }
.chip.off { color: #ffb4b1; border-color: #5a2e2e; background: #251212; }
.nav, .admin-tabs { display: flex; gap: 4px; }
.tab { background: none; border: 0; padding: 8px 12px; border-radius: 8px; color: var(--muted); cursor: pointer; min-height: 40px; }
.tab.active { background: var(--panel2); color: var(--text); }
.me { display: flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pgm); flex: none; }
.dot.ok { background: var(--pvw); }

/* ---------- regia ---------- */
.view { padding: 12px; }
#control {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 12px;
  height: calc(100dvh - 56px);
}
.camlist { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cam {
  text-align: left; padding: 12px; border-radius: var(--radius); background: var(--panel);
  border: 2px solid var(--line); cursor: pointer; position: relative; min-height: 64px;
}
.cam.sel { border-color: var(--accent); background: #1b1c16; }
.cam.pgm { box-shadow: inset 6px 0 0 var(--pgm); }
.cam.pvw { box-shadow: inset 6px 0 0 var(--pvw); }
.cam .cname { font-weight: 650; display: block; padding-right: 60px; }
.cam .cstat { font-size: 12px; color: var(--muted); display: block; margin-top: 3px; }
.cam .tally { position: absolute; top: 10px; right: 10px; }
.cam.offline { opacity: .6; }

.tally { font-size: 11px; font-weight: 800; letter-spacing: .6px; padding: 3px 8px; border-radius: 6px; display: none; }
.tally.pgm { display: inline-block; background: var(--pgm); color: #fff; }
.tally.pvw { display: inline-block; background: var(--pvw); color: #04140a; }

.stage { display: flex; flex-direction: column; padding: 12px; gap: 12px; min-height: 0; overflow: auto; }
.stage.pgm { border-color: var(--pgm); box-shadow: 0 0 0 2px var(--pgm); }
.stage.pvw { border-color: var(--pvw); }
.stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stage-head h2 { margin: 0; font-size: 20px; }
.stage-head .tally { font-size: 13px; padding: 4px 10px; }
#camInfo.busy { color: var(--warn); font-weight: 600; }

.preview {
  position: relative; aspect-ratio: 16 / 9; width: min(100%, calc(46vh * 16 / 9)); margin: 0 auto; flex: none;
  background: #03050a; border-radius: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line);
}
.preview.pgm { box-shadow: inset 0 0 0 3px var(--pgm); }
.preview.pvw { box-shadow: inset 0 0 0 3px var(--pvw); }
.preview img { width: 100%; height: 100%; object-fit: contain; grid-area: 1 / 1; }
.preview-msg { color: var(--muted); text-align: center; padding: 10px; grid-area: 1 / 1; }
.preview:fullscreen { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border-radius: 0; border: 0; }
.preview:fullscreen.pgm { box-shadow: inset 0 0 0 8px var(--pgm); }
.preview:fullscreen.pvw { box-shadow: inset 0 0 0 8px var(--pvw); }
.pv-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.pv-tools .btn { background: rgba(8, 12, 24, .78); backdrop-filter: blur(4px); }
.pv-btn { min-width: 40px; padding: 4px 10px; display: grid; place-items: center; }
.pv-btn.on { color: var(--accent); border-color: var(--accent); }
.qual-btn { font-size: 13px; font-weight: 700; min-width: 64px; color: var(--accent); }
.live-btn.on { color: #ff6b66; border-color: var(--pgm); }
.pv-stats {
  position: absolute; left: 8px; top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  padding: 3px 9px; border-radius: 99px; background: rgba(8, 12, 24, .78); color: #9fb0cc; border: 1px solid var(--line);
}
.pv-stats.boost { color: var(--accent); border-color: var(--accent); }
.pv-stats.stale { color: #ffb4b1; border-color: #5a2e2e; }
/* griglia dei terzi + croce centrale, utile per centrare relatore o interprete */
.pv-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background:
    linear-gradient(to right, transparent calc(33.333% - .5px), #fff calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), #fff calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(to bottom, transparent calc(33.333% - .5px), #fff calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), #fff calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.pv-grid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%);
  background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat, linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat; }
.offline-mask { position: absolute; inset: 0; background: rgba(5,7,11,.82); display: grid; place-items: center; text-align: center; padding: 20px; color: #ffb4b1; font-weight: 600; }

.controls { display: grid; grid-template-columns: auto auto minmax(180px, 1fr); gap: 18px; align-items: center; justify-content: center; }
.controls.disabled { opacity: .35; pointer-events: none; }
.joy-wrap { display: grid; place-items: center; }
.joy {
  --size: clamp(170px, 28vh, 270px);
  width: var(--size); height: var(--size); border-radius: 50%; position: relative; touch-action: none;
  background: radial-gradient(circle, #1c2333 0 30%, #151b27 31% 100%); border: 2px solid var(--line); cursor: grab;
}
.joy.active { border-color: var(--accent); }
.joy-cross { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed #2b364c; }
.joy-cross::before, .joy-cross::after { content: ""; position: absolute; background: #2b364c; }
.joy-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.joy-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.knob {
  position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; margin: -16% 0 0 -16%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd27a, var(--accent) 55%, #b97510); box-shadow: 0 6px 18px rgba(0,0,0,.5);
  transition: transform .15s ease-out; pointer-events: none;
}
.joy.active .knob { transition: none; }

.zoom-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zlabel { font-weight: 700; color: var(--muted); font-size: 13px; }
.zoom {
  width: 64px; height: clamp(150px, 24vh, 230px); border-radius: 32px; position: relative; touch-action: none;
  background: linear-gradient(#1c2333, #151b27 50%, #1c2333); border: 2px solid var(--line); cursor: ns-resize;
}
.zoom.active { border-color: var(--accent); }
.zoom::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: #2b364c; }
.zknob {
  position: absolute; left: 6px; right: 6px; top: 50%; height: 48px; margin-top: -24px; border-radius: 24px;
  background: linear-gradient(#ffd27a, var(--accent) 60%, #b97510); transition: transform .15s ease-out; pointer-events: none;
}
.zoom.active .zknob { transition: none; }

.side { display: flex; flex-direction: column; gap: 8px; max-width: 320px; }
.speed { margin: 0; color: var(--text); }
.speed input { width: 100%; accent-color: var(--accent); height: 28px; }
.group-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.on { border-color: var(--accent); color: var(--accent); }

.presets { display: flex; flex-direction: column; min-height: 0; padding: 12px; }
.presets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.presets-head h3 { margin: 0; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; }
.preset { background: var(--panel2); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; }
.preset.current { border-color: var(--accent); }
.pthumb { display: block; width: 100%; aspect-ratio: 16/9; padding: 0; border: 0; background: #05070b; position: relative; cursor: pointer; }
.pthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pthumb:active { filter: brightness(1.3); }
.nothumb { color: var(--muted); font-size: 12px; position: absolute; inset: 0; display: grid; place-items: center; }
.pkey { position: absolute; left: 6px; top: 6px; background: rgba(0,0,0,.7); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
.pkey:empty { display: none; }
.plink { position: absolute; left: 6px; bottom: 6px; right: 6px; background: rgba(0,0,0,.72); border-radius: 6px; padding: 2px 6px; font-size: 11px; color: #9fd7ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.pname { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px 6px 10px; gap: 4px; }
.pname span { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedit { background: none; border: 0; color: var(--muted); font-size: 18px; width: 40px; height: 36px; cursor: pointer; border-radius: 8px; flex: none; }
.pedit:hover { background: var(--line); color: var(--text); }
.empty { color: var(--muted); text-align: center; padding: 30px 10px; grid-column: 1 / -1; }

/* ---------- impostazioni ---------- */
#admin { max-width: 1100px; margin: 0 auto; }
.admin-tabs { margin-bottom: 12px; }
.admin-body { padding: 16px; overflow-x: auto; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.admin-head h3 { margin: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; }
td.act { white-space: nowrap; text-align: right; }
td.act .btn { margin-left: 4px; }
code.tok { background: var(--bg); border: 1px solid var(--line); padding: 3px 6px; border-radius: 6px; font-size: 12px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
.badge.on { border-color: #2e5a3d; color: #8fe0a8; }
.badge.off { border-color: #5a2e2e; color: #ffb4b1; }

/* ---------- dialog / toast ---------- */
.dlg { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; width: min(480px, calc(100vw - 24px)); max-height: 90dvh; }
.dlg::backdrop { background: rgba(0,0,0,.65); }
.dlg form { padding: 18px 20px; }
.dlg h3 { margin: 0 0 6px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.dlg-actions .left { margin-right: auto; }
.cam-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 6px; }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(30px); opacity: 0; pointer-events: none;
  background: #1f2738; border: 1px solid var(--line); padding: 12px 18px; border-radius: 10px; transition: .2s; z-index: 50; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%); }
.toast.err { border-color: var(--pgm); background: #2a1414; }
.toast.ok { border-color: var(--pvw); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  #control { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); }
  .camlist { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; }
  .cam { min-width: 170px; }
}
@media (max-width: 820px) {
  #control { grid-template-columns: 1fr; height: auto; grid-template-rows: none; }
  .controls { grid-template-columns: auto auto; }
  .side { grid-column: 1 / -1; max-width: none; }
  .btn-grid { grid-template-columns: repeat(3, 1fr); }
  .chips { display: none; }
  .topbar { gap: 6px; padding: 8px 10px; justify-content: space-between; }
  .brand { font-size: 17px; }
  .tab { padding: 6px 8px; font-size: 14px; }
  .me .btn { max-width: 90px; overflow: hidden; text-overflow: ellipsis; padding: 6px 8px; }
  .view { padding: 8px; }
  .keys-hint { display: none; }
  .preset-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .preview { width: 100%; }
  .logo { height: 1.4em; }
}

/* ---------- guida interprete ---------- */
.pv-signer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .9)); }
.pv-signer .sg-space { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 10 6; vector-effect: non-scaling-stroke; }
.pv-signer .sg-head { fill: rgba(242, 217, 27, .12); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pv-signer .sg-line, .pv-signer .sg-eyes { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.pv-signer .sg-label { fill: var(--accent); font-size: 3.4px; text-anchor: middle; font-weight: 800; }
.pv-grid, .pv-stats, .trk-mark { pointer-events: none; }
.preview img { touch-action: none; cursor: crosshair; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- tocca per inquadrare / segui ---------- */
.trk-mark {
  position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 3px solid var(--accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 0 14px rgba(242, 217, 27, .7);
  transition: left .08s linear, top .08s linear;
}
.trk-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--accent); }
.trk-mark.follow { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 0 16px rgba(74, 222, 128, .8); animation: trkpulse 1.2s ease-in-out infinite; }
.trk-mark.follow::after { background: #4ade80; }
.trk-mark.lost { border-color: #ff6b66; }
@keyframes trkpulse { 50% { transform: scale(1.18); } }
.trk-badge {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: rgba(8, 12, 24, .85); border: 1px solid var(--accent); border-radius: 99px; padding: 3px 4px 3px 12px; font-size: 13px; font-weight: 700; color: var(--accent);
}
.trk-badge.follow { border-color: #4ade80; color: #4ade80; }
.trk-badge .btn { min-height: 30px; padding: 2px 12px; border-radius: 99px; }

/* ---------- banda ---------- */
.chip .bw { color: var(--accent); font-weight: 700; }

.preset-grid { flex: 1 1 auto; min-height: 90px; }

/* ---------- riquadro, rientro, calibrazione ---------- */
.pv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; width: min(100%, calc(46vh * 16 / 9)); margin: -4px auto 0; }
.pv-actions .muted { flex: 1; min-width: 160px; }
.gest-box { position: absolute; border: 2px dashed var(--accent); background: rgba(242, 217, 27, .1); pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); border-radius: 4px; }
.gest-box span { position: absolute; left: 4px; top: 2px; font-size: 12px; font-weight: 800; color: var(--accent); text-shadow: 0 1px 2px #000; white-space: nowrap; }
label textarea { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); color: var(--text); font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; resize: vertical; }

/* ---------- mappa della sala ---------- */
.ptabs { display: flex; gap: 4px; }
.ptabs .tab { font-weight: 700; font-size: 15px; }
.map-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; flex: 1; }
.map-tools { display: flex; gap: 6px; }
.map-tools input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); color: var(--text); }
.map-results { display: flex; flex-direction: column; gap: 4px; }
.map-hit { text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); cursor: pointer; font-size: 14px; }
.map-hit:hover { border-color: var(--accent); }
.map-rows { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; flex: 1; }
.map-row { display: flex; flex-direction: column; gap: 4px; }
.map-label { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: .5px; }
.seats { display: flex; flex-wrap: wrap; gap: 4px; }
.seat { min-width: 34px; height: 34px; padding: 0 4px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.seat.has { color: var(--text); border-color: #34508f; background: #16244a; }
.seat.sel { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.seat.nopos { opacity: .45; }
.seat:active { transform: scale(.94); }
.map-rowedit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.map-rowedit .btn { min-height: 32px; padding: 4px 8px; font-size: 12px; }
.map-rowedit .btn.set { border-color: var(--pvw); color: #8ff0b0; }
.mr-label { width: 54px; padding: 6px 8px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); color: var(--accent); font-weight: 800; }
.mr-n { margin: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; }
.mr-n input { width: 54px; padding: 6px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); color: var(--text); margin: 0; }
.map-editbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
.map-editbar .spacer { flex: 1; }
@media (max-width: 820px) { .pv-actions { width: 100%; } }