:root {
  --ptz-orange:#ff8a3d;
  --ptz-green:#2dd4a8;
  --ptz-red:#ff5c6c;
  --ptz-surface:#101a27;
  --ptz-surface-soft:#0b1420;
  --ptz-line:rgba(139,169,199,.2);
  --ptz-metal-hi:#273542;
  --ptz-metal-mid:#15212c;
  --ptz-metal-low:#070d13;
  --ptz-display:#9be9cf;
}
* { box-sizing:border-box; }
button,input,select { font:inherit; }
button { min-height:44px; }
[hidden] { display:none !important; }
.ptz-shell { width:min(1720px,calc(100% - 32px)); margin:0 auto; padding:84px 0 58px; }
.tool-header { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:15px 2px 12px; }
.tool-header h1 { margin:7px 0 3px; font-size:clamp(1.75rem,2.7vw,2.75rem); line-height:1; }
.tool-header p { max-width:780px; margin:0; color:var(--text-muted); font-size:.84rem; }
.local-trust { display:grid; justify-items:end; gap:1px; max-width:390px; padding:8px 11px; border:1px solid rgba(45,212,168,.32); border-radius:8px; background:rgba(45,212,168,.055); color:#91a8b8; font-family:var(--font-mono); font-size:.58rem; line-height:1.45; text-align:right; }
.local-trust strong { color:var(--ptz-green); font-size:.62rem; letter-spacing:.12em; }
.eyebrow,.runtime-label { font-family:var(--font-mono); color:var(--brand-cyan); font-size:.67rem; letter-spacing:.12em; text-transform:uppercase; }
.runtime-label { float:right; color:var(--ptz-orange); }

.operator-toolbar { position:sticky; top:70px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:10px; padding:8px; border:1px solid var(--ptz-line); border-radius:10px; background:rgba(9,16,26,.94); box-shadow:0 10px 30px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
.toolbar-actions,.global-state,.dialog-actions,.button-row,.rocker,.toggle-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.btn-primary,.btn-secondary,.file-button,.danger-button,.arm-button,.icon-button,.text-button,.card-action,.wide-button,.segmented button,.hold-button,.stop-button,.preset-button { border-radius:5px; cursor:pointer; }
.btn-primary { padding:10px 15px; border:1px solid var(--brand-cyan); background:var(--brand-cyan); color:#001014; font-weight:700; }
.btn-secondary,.file-button,.card-action { display:inline-flex; align-items:center; justify-content:center; padding:9px 12px; border:1px solid var(--ptz-line); background:rgba(255,255,255,.035); color:#fff; font-weight:600; }
.add-camera-button span { margin-right:5px; font-size:1.15rem; line-height:0; }
.file-button { margin:0; min-height:44px; }
.file-button input { display:none; }
.danger-button { padding:10px 14px; border:1px solid rgba(255,92,108,.7); background:rgba(255,92,108,.16); color:#fff; font-weight:700; }
.text-button,.icon-button { padding:4px 8px; border:0; background:transparent; color:var(--brand-cyan); }
.icon-button { min-width:44px; font-size:1.4rem; }
.keyboard-state { display:grid; grid-template-columns:auto minmax(205px,auto); align-items:center; gap:8px; }
.keyboard-state > small { color:#778b9d; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; }
.arm-button { display:grid; grid-template-columns:auto auto; align-items:center; justify-content:start; min-width:205px; padding:5px 10px; border:1px solid rgba(255,92,108,.48); background:rgba(255,92,108,.08); color:#fff; font-family:var(--font-mono); text-align:left; text-transform:uppercase; }
.arm-button span,.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:var(--ptz-red); }
.arm-button strong { font-size:.65rem; letter-spacing:.07em; }
.arm-button small { grid-column:2; color:#8093a4; font-size:.52rem; line-height:1.15; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.arm-button[aria-pressed="true"] { border-color:rgba(45,212,168,.72); background:rgba(45,212,168,.1); }
.arm-button[aria-pressed="true"] span { background:var(--ptz-green); box-shadow:0 0 10px rgba(45,212,168,.6); }
.active-camera-indicator { min-width:190px; padding:0 9px; }
.active-camera-indicator small,.active-camera-indicator strong { display:block; }
.active-camera-indicator small { color:var(--text-muted); font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; }
.active-camera-indicator strong { max-width:240px; overflow:hidden; color:#fff; text-overflow:ellipsis; white-space:nowrap; }
.runtime-notice { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 12px; padding:12px 14px; border:1px solid rgba(255,138,61,.55); border-left:4px solid var(--ptz-orange); border-radius:7px; background:#21160f; box-shadow:0 8px 24px rgba(0,0,0,.28); }
.runtime-notice div { display:grid; gap:3px; }
.runtime-notice strong { color:#fff; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; }
.runtime-notice span { color:#c6b7aa; font-size:.74rem; line-height:1.45; }
.runtime-notice .btn-primary { flex:0 0 auto; color:#001014; text-decoration:none; }
.runtime-notice-error { border-color:rgba(255,92,108,.65); border-left-color:var(--ptz-red); }
.file-runtime .operator-toolbar button:disabled,.file-runtime .file-button[aria-disabled="true"] { opacity:.42; cursor:not-allowed; }

.warning-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; padding:8px 12px; border:1px solid rgba(255,138,61,.38); border-left:3px solid var(--ptz-orange); border-radius:8px; background:rgba(255,138,61,.065); }
.warning-panel strong { font-size:.8rem; }
.warning-panel p { display:inline; margin:0 0 0 7px; color:var(--text-muted); font-size:.72rem; line-height:1.4; }
.warning-panel.dismissed { display:none; }
.workspace-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:12px 2px 8px; }
.workspace-heading h2 { margin:2px 0 0; font-size:1.15rem; }
.workspace-heading p { margin:0; color:var(--text-muted); font-family:var(--font-mono); font-size:.7rem; }

.empty-workspace { display:grid; justify-items:center; min-height:360px; padding:58px 24px; border:1px dashed rgba(139,169,199,.35); border-radius:18px; background:radial-gradient(circle at 50% 0%,rgba(0,229,255,.055),transparent 55%); text-align:center; }
.empty-workspace h2 { margin:19px 0 5px; }
.empty-workspace p { max-width:520px; margin:0 0 20px; color:var(--text-muted); line-height:1.55; }
.empty-stick { display:grid; place-items:center; width:92px; height:92px; border:1px solid rgba(0,229,255,.4); border-radius:50%; background:rgba(0,229,255,.05); box-shadow:inset 0 0 0 11px rgba(0,229,255,.025); }
.empty-stick span { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; background:var(--brand-cyan); color:#001014; font-size:1.9rem; }
.camera-grid { display:grid; grid-template-columns:repeat(4,minmax(300px,1fr)); align-items:start; gap:14px; }
.camera-card { position:relative; display:flex; flex-direction:column; min-width:0; max-height:max(580px,calc(100vh - 330px)); overflow:hidden; border:1px solid #344351; border-radius:4px; background-color:var(--ptz-metal-mid); background-image:radial-gradient(circle at 11px 11px,#020407 0 2px,#52606a 2.5px 3.5px,transparent 4px),radial-gradient(circle at calc(100% - 11px) 11px,#020407 0 2px,#52606a 2.5px 3.5px,transparent 4px),linear-gradient(180deg,#26343f 0,#111c26 11px,#0a121a 100%); box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -2px 3px rgba(0,0,0,.72),0 2px 1px rgba(0,0,0,.75),0 12px 28px rgba(0,0,0,.34); transition:border-color .14s ease,box-shadow .14s ease; }
.camera-card:hover { border-color:#516474; box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -2px 3px rgba(0,0,0,.72),0 2px 1px rgba(0,0,0,.75),0 15px 31px rgba(0,0,0,.4); }
.camera-card.active { border:1px solid var(--brand-cyan); box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -2px 3px rgba(0,0,0,.72),0 0 0 2px rgba(0,229,255,.13),0 14px 31px rgba(0,0,0,.42); }
.panel-identity { display:flex; align-items:center; justify-content:space-between; min-height:25px; padding:5px 25px 4px; border-bottom:1px solid #060a0e; color:#718291; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.13)); font-family:var(--font-mono); font-size:.48rem; letter-spacing:.13em; text-shadow:0 1px #000; }
.panel-identity small { color:#536473; font:inherit; letter-spacing:.08em; }
.camera-display { position:relative; min-height:126px; overflow:hidden; margin:0 8px 7px; padding:10px 12px 8px; border:6px solid #080d12; border-radius:3px; background-color:#04110f; background-image:repeating-linear-gradient(0deg,rgba(104,226,191,.018) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 50% 25%,rgba(45,212,168,.105),transparent 68%),linear-gradient(180deg,rgba(24,65,56,.25),rgba(2,10,9,.55)); box-shadow:0 1px 0 rgba(255,255,255,.12),0 4px 8px rgba(0,0,0,.48),inset 0 0 0 1px rgba(101,193,166,.28),inset 0 0 24px rgba(45,212,168,.08),inset 0 -9px 20px rgba(0,0,0,.38); cursor:pointer; font-family:var(--font-mono); }
.camera-display > * { position:relative; z-index:1; }
.camera-display::before { position:absolute; inset:0; background:linear-gradient(112deg,rgba(255,255,255,.075),transparent 26% 72%,rgba(255,255,255,.025)); content:""; pointer-events:none; }
.camera-display::after { position:absolute; inset:2px; border:1px solid rgba(151,242,215,.06); background:radial-gradient(circle at 15% 18%,rgba(255,255,255,.055),transparent 21%); content:""; pointer-events:none; }
.display-topline,.display-meta,.display-active-state { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.display-topline { color:var(--ptz-display); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; text-shadow:0 0 7px rgba(45,212,168,.2); }
.display-topline > span { color:#a6b5c5; font-size:.57rem; }
.camera-display h3 { overflow:hidden; margin:8px 0 1px; color:#d9fff2; font-family:var(--font-mono); font-size:1.13rem; line-height:1.08; letter-spacing:.075em; text-overflow:ellipsis; text-shadow:0 0 11px rgba(45,212,168,.25); text-transform:uppercase; white-space:nowrap; }
.display-ip { overflow:hidden; color:#8fb4a8; font-family:var(--font-mono); font-size:.65rem; line-height:1.3; letter-spacing:.035em; text-overflow:ellipsis; white-space:nowrap; }
.display-meta { align-items:flex-end; margin-top:5px; color:#718e86; font-size:.54rem; line-height:1.25; letter-spacing:.05em; }
.display-meta span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.display-meta span:last-child { text-align:right; }
.display-active-state { margin-top:5px; padding-top:4px; border-top:1px solid rgba(103,179,159,.16); color:#738d86; font-size:.55rem; letter-spacing:.11em; }
.active .display-active-state span { color:#fff; font-weight:700; }
.display-active-state small { font:inherit; }
.status-dot { margin-right:5px; background:#788695; }
.status-connected .status-dot { background:var(--ptz-green); box-shadow:0 0 8px rgba(45,212,168,.55); }
.status-error .status-dot { background:var(--ptz-red); }
.camera-card-actions { display:grid; grid-template-columns:1fr 1fr 1fr 44px; gap:5px; padding:7px 9px 8px; border-top:1px solid rgba(255,255,255,.04); border-bottom:1px solid #05090d; background:linear-gradient(180deg,#18242e,#0b131b); }
.card-action { min-width:0; min-height:44px; padding:7px 5px; border:1px solid #41515f; border-radius:3px; background:linear-gradient(180deg,#263540 0,#17242e 43%,#0c151d 100%); color:#b5c2cd; box-shadow:inset 0 1px rgba(255,255,255,.11),inset 0 -3px 4px rgba(0,0,0,.36),0 2px 2px rgba(0,0,0,.46); font-family:var(--font-mono); font-size:.58rem; letter-spacing:.04em; text-shadow:0 1px #000; text-transform:uppercase; }
.card-action.primary-action { border-color:rgba(0,229,255,.5); color:var(--brand-cyan); }
.card-action.danger-action { color:var(--ptz-red); }
.camera-panel-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:7px 9px; border-top:1px solid rgba(255,255,255,.035); border-bottom:1px solid #05090d; background:#0b131b; }
.camera-panel-tabs button { min-height:44px; padding:5px 6px; border:1px solid #344451; border-radius:3px; background:linear-gradient(#1d2a34,#101a23); color:#8294a3; box-shadow:inset 0 1px rgba(255,255,255,.065),inset 0 -3px rgba(0,0,0,.32),0 1px 2px #05080b; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; }
.camera-panel-tabs button.selected { border-color:rgba(0,229,255,.52); background:linear-gradient(#18333b,#0d232b); color:#e2fdff; box-shadow:inset 0 -3px var(--brand-cyan),inset 0 1px rgba(255,255,255,.08),0 0 8px rgba(0,229,255,.1); }
.camera-card-body { min-height:0; overflow:auto; padding:9px; border-top:1px solid rgba(255,255,255,.035); background:linear-gradient(180deg,#111b24,#080f16); scrollbar-color:rgba(139,169,199,.4) transparent; scrollbar-width:thin; }
.camera-panel { min-height:0; }
.motion-deck { display:grid; grid-template-columns:minmax(190px,1.15fr) minmax(145px,.85fr); align-items:start; gap:7px; }
.lens-bank { display:grid; align-content:start; gap:7px; }
.image-bank { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.control-block { position:relative; min-width:0; padding:10px 9px 9px; border:1px solid #2b3945; border-radius:3px; background:linear-gradient(180deg,#16222c,#0a121a); box-shadow:inset 0 1px rgba(255,255,255,.06),inset 0 -1px rgba(0,0,0,.65),0 2px 4px rgba(0,0,0,.28); }
.control-block::after { position:absolute; right:6px; bottom:6px; width:3px; height:3px; border-radius:50%; background:#51606b; box-shadow:0 1px #000; content:""; pointer-events:none; }
.control-block-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:8px; }
.control-block-heading h4 { margin:0; color:#eef7ff; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.control-block-heading span { display:block; margin-top:2px; color:#718397; font-family:var(--font-mono); font-size:.53rem; letter-spacing:.04em; text-transform:uppercase; }
.control-style { flex:0 0 auto; width:118px; margin:0; }
.control-style button { min-height:44px; padding:4px; font-size:.53rem; }
.joystick-block { padding-bottom:11px; }
.virtual-joystick { position:relative; isolation:isolate; width:min(184px,92%); aspect-ratio:1; margin:3px auto 5px; border:1px solid #536675; border-radius:50%; background:radial-gradient(circle at 45% 37%,#2e4354 0 16%,#172b3a 17% 37%,#08131c 38% 59%,#263846 60% 66%,#0a1118 67% 100%); box-shadow:inset 0 0 0 3px #05090d,inset 0 0 0 7px rgba(157,184,202,.08),inset 0 -16px 24px rgba(0,0,0,.58),0 2px 0 rgba(255,255,255,.08),0 8px 15px rgba(0,0,0,.48); touch-action:none; }
.virtual-joystick::before { position:absolute; z-index:0; inset:10%; border:1px solid rgba(139,169,199,.18); border-radius:50%; background:conic-gradient(from 22.5deg,transparent 0 10%,rgba(0,229,255,.035) 10% 12.5%,transparent 12.5% 35%,rgba(0,229,255,.035) 35% 37.5%,transparent 37.5% 60%,rgba(0,229,255,.035) 60% 62.5%,transparent 62.5% 85%,rgba(0,229,255,.035) 85% 87.5%,transparent 87.5%); content:""; pointer-events:none; }
.joystick-axis { position:absolute; z-index:0; background:rgba(139,169,199,.13); pointer-events:none; }
.joystick-axis-horizontal { top:50%; left:7%; width:86%; height:1px; }
.joystick-axis-vertical { top:7%; left:50%; width:1px; height:86%; }
.joystick-zone { position:absolute; z-index:2; display:grid; place-items:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; color:#71899c; font-size:.72rem; }
.joystick-zone:hover,.joystick-zone.active,.joystick-zone.keyboard-active { border-color:rgba(0,229,255,.68); background:rgba(0,229,255,.14); color:#fff; box-shadow:inset 0 0 10px rgba(0,229,255,.12),0 0 9px rgba(0,229,255,.12); }
.joystick-north { top:3%; left:50%; transform:translateX(-50%); }
.joystick-north-east { top:16%; right:10%; }
.joystick-east { top:50%; right:3%; transform:translateY(-50%); }
.joystick-south-east { right:10%; bottom:16%; }
.joystick-south { bottom:3%; left:50%; transform:translateX(-50%); }
.joystick-south-west { bottom:16%; left:10%; }
.joystick-west { top:50%; left:3%; transform:translateY(-50%); }
.joystick-north-west { top:16%; left:10%; }
.joystick-puck { --puck-x:0px; --puck-y:0px; position:absolute; z-index:3; top:50%; left:50%; display:grid; place-content:center; width:64px; height:64px; min-height:64px; padding:0; border:1px solid #607585; border-radius:50%; background:radial-gradient(circle at 37% 24%,#465f71 0,#243846 30%,#101e29 59%,#050b10 100%); color:#dce9f4; box-shadow:inset 0 3px 4px rgba(255,255,255,.12),inset 0 -9px 13px rgba(0,0,0,.64),0 3px 0 #05090d,0 10px 17px rgba(0,0,0,.66); transform:translate(calc(-50% + var(--puck-x)),calc(-50% + var(--puck-y))); transition:transform 70ms ease,border-color 70ms ease; }
.joystick-puck::before { position:absolute; inset:7px; border:1px dotted rgba(139,169,199,.2); border-radius:50%; content:""; }
.joystick-puck span,.joystick-puck small { display:block; font-family:var(--font-mono); text-align:center; }
.joystick-puck span { font-size:.64rem; font-weight:700; letter-spacing:.07em; }
.joystick-puck small { margin-top:3px; color:#7690a5; font-size:.45rem; letter-spacing:.05em; }
.joystick-puck.moving { border-color:var(--brand-cyan); color:#fff; }
.joystick-puck.keyboard-moving { box-shadow:inset 0 3px 4px rgba(255,255,255,.1),inset 0 -8px 12px rgba(0,0,0,.58),0 9px 16px rgba(0,0,0,.56),0 0 15px rgba(0,229,255,.22); }
.joystick-label { position:absolute; z-index:1; color:rgba(139,169,199,.34); font-family:var(--font-mono); font-size:.48rem; letter-spacing:.16em; pointer-events:none; }
.joystick-label-pan { right:8px; bottom:50%; transform:translateY(25px) rotate(-90deg); }
.joystick-label-tilt { top:8px; left:50%; transform:translateX(27px); }
.ptz-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.classic-pad { max-width:260px; margin:6px auto 4px; }
.hold-button,.stop-button,.wide-button { min-width:0; padding:7px; border:1px solid #435361; border-radius:3px; background:linear-gradient(#2a3945 0,#1b2934 42%,#0d171f 100%); color:#eaf4fc; box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -4px 5px rgba(0,0,0,.38),0 2px 2px rgba(0,0,0,.45); text-shadow:0 1px #000; user-select:none; touch-action:none; }
.virtual-joystick .joystick-zone { border-color:transparent; background:transparent; box-shadow:none; }
.virtual-joystick .joystick-zone:hover,.virtual-joystick .joystick-zone.active,.virtual-joystick .joystick-zone.keyboard-active { border-color:rgba(0,229,255,.68); background:rgba(0,229,255,.14); box-shadow:inset 0 0 10px rgba(0,229,255,.12),0 0 9px rgba(0,229,255,.12); }
.hold-button:hover,.hold-button.active,.hold-button.keyboard-active { border-color:var(--brand-cyan); background:#123344; color:#fff; box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -3px 4px rgba(0,0,0,.3),0 0 10px rgba(0,229,255,.2); }
.stop-button { border-color:rgba(255,92,108,.62); background:#2b1720; font-family:var(--font-mono); font-size:.61rem; font-weight:700; }
.speed-control { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; margin-top:8px; color:#8394a5; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.04em; }
.speed-control input { min-height:44px; margin:0; padding:0; accent-color:var(--brand-cyan); -webkit-appearance:none; appearance:none; }
.speed-control input::-webkit-slider-runnable-track { height:4px; border-radius:0; background:#273745; }
.speed-control input::-webkit-slider-thumb { width:14px; height:18px; margin-top:-7px; border:1px solid #8193a3; border-radius:2px; background:#d5e1e8; box-shadow:0 1px 3px #000; -webkit-appearance:none; }
.speed-control output { min-width:23px; color:#fff; font-family:var(--font-mono); text-align:right; }
.compact-control { padding:9px 10px; }
.rocker { margin-top:6px; }
.rocker > * { flex:1; }
.segmented { display:flex; margin-top:6px; }
.segmented button { flex:1; padding:7px 5px; border:1px solid #384955; border-radius:3px; background:linear-gradient(#24333e,#111c25); color:#97a7b7; box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -3px rgba(0,0,0,.26); font-family:var(--font-mono); font-size:.57rem; text-transform:uppercase; }
.segmented button + button { border-left:0; }
.segmented button:first-child { border-radius:4px 0 0 4px; }
.segmented button:last-child { border-radius:0 4px 4px 0; }
.segmented button.selected { border-color:var(--brand-cyan); background:var(--brand-cyan); color:#001014; font-weight:700; }
.wide-button { width:100%; margin-top:6px; font-family:var(--font-mono); font-size:.59rem; text-transform:uppercase; }
.toggle-row { margin:0 0 6px; }
.switch-label { display:flex; flex:1; align-items:center; gap:6px; min-height:44px; margin:0; padding:6px 8px; border:1px solid rgba(139,169,199,.27); border-radius:4px; color:#9cacbb; font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; }
.switch-label input { width:auto; min-height:0; margin:0; accent-color:var(--brand-cyan); }
.capability-note { margin:3px 0 0; color:#8192a3; font-size:.66rem; line-height:1.4; }
label { display:block; margin-top:8px; color:#8fa0b0; font-family:var(--font-mono); font-size:.57rem; letter-spacing:.04em; }
input,select { width:100%; min-height:44px; margin-top:4px; padding:8px 9px; border:1px solid rgba(139,169,199,.28); border-radius:4px; background:#07101a; color:var(--text-main); }
input:focus,select:focus,button:focus-visible,summary:focus-visible { outline:2px solid var(--brand-cyan); outline-offset:2px; }
.presets-panel { border:1px solid rgba(139,169,199,.2); border-radius:4px; background:#09121c; }
.preset-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 9px 0; color:#dbe8f1; font-family:var(--font-mono); font-size:.61rem; letter-spacing:.07em; }
.preset-panel-heading small { color:#738596; font-size:.51rem; }
.preset-body { padding:8px; }
.preset-modes { margin:0 0 8px; }
.preset-grid { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:4px; max-height:270px; overflow:auto; }
.preset-button { min-height:46px; padding:4px 3px; border:1px solid rgba(139,169,199,.24); border-radius:4px; background:#0f1a26; color:#fff; }
.preset-button span,.preset-button small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preset-button span { font-family:var(--font-mono); font-size:.61rem; }
.preset-button small { margin-top:2px; color:#7f91a2; font-size:.5rem; }
.preset-button:hover { border-color:var(--brand-cyan); }

.workspace-utilities { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.utility-panel { border:1px solid var(--ptz-line); border-radius:11px; background:rgba(16,26,39,.7); }
.utility-panel summary { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:48px; padding:7px 11px; cursor:pointer; list-style:none; }
.utility-panel summary::-webkit-details-marker { display:none; }
.utility-panel summary strong,.utility-panel summary small { display:block; }
.utility-panel summary small { margin-top:2px; color:var(--text-muted); font-size:.69rem; }
.utility-panel[open] summary { border-bottom:1px solid var(--ptz-line); }
.utility-panel > p,.utility-panel > ul,.diagnostic-panel > button,.diagnostic-log { margin:12px 14px; color:var(--text-muted); font-size:.8rem; line-height:1.55; }
.diagnostic-log { max-height:240px; overflow:auto; padding-left:22px; font-family:var(--font-mono); font-size:.64rem; }
.diagnostic-log strong { color:#fff; }

dialog { width:min(560px,calc(100% - 28px)); max-height:calc(100vh - 28px); overflow:auto; padding:22px; border:1px solid var(--ptz-line); border-radius:15px; background:#101a27; color:var(--text-main); }
dialog::backdrop { background:rgba(0,0,0,.75); backdrop-filter:blur(4px); }
.dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.dialog-heading h2,.confirm-dialog h2 { margin:4px 0 0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.full-field { grid-column:1/-1; }
.dialog-note { margin:14px 0 0; color:var(--text-muted); font-size:.75rem; line-height:1.5; }
.dialog-actions { justify-content:flex-end; margin-top:18px; }
.confirm-dialog { width:min(440px,calc(100% - 28px)); }
.confirm-dialog p { color:var(--text-muted); line-height:1.55; }
.toast { position:fixed; z-index:1000; bottom:24px; left:50%; max-width:calc(100% - 28px); padding:11px 16px; border:1px solid var(--brand-cyan); border-radius:9px; background:#0d1622; color:#fff; opacity:0; pointer-events:none; transform:translate(-50%,20px); transition:.2s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width:1550px) { .camera-grid { grid-template-columns:repeat(3,minmax(300px,1fr)); } }
@media (max-width:1120px) { .camera-grid { grid-template-columns:repeat(2,minmax(300px,1fr)); } .workspace-utilities { grid-template-columns:1fr 1fr; } }
@media (max-width:820px) {
  .ptz-shell { width:min(100% - 20px,1680px); padding-top:78px; }
  .operator-toolbar { position:static; align-items:stretch; flex-direction:column; }
  .toolbar-actions,.global-state { justify-content:space-between; }
  .workspace-utilities { grid-template-columns:1fr; }
  .workspace-heading { align-items:flex-start; flex-direction:column; }
  .tool-header { align-items:flex-start; flex-direction:column; }
  .local-trust { justify-items:start; max-width:none; text-align:left; }
}
@media (max-width:700px) { .camera-grid { grid-template-columns:1fr; } }
@media (max-width:540px) {
  .ptz-shell { width:min(100% - 14px,1680px); }
  .toolbar-actions > * { flex:1; }
  .global-state { align-items:stretch; flex-direction:column; }
  .keyboard-state { grid-template-columns:1fr; }
  .arm-button { width:100%; }
  .active-camera-indicator { padding:3px 2px; }
  .warning-panel { align-items:flex-start; flex-direction:column; }
  .camera-card-actions { grid-template-columns:1fr 1fr; }
  .card-action.danger-action { grid-column:2; grid-row:2; }
  .form-grid { grid-template-columns:1fr; }
  .full-field { grid-column:auto; }
  .virtual-joystick { width:min(224px,86%); }
  .camera-support-stack { grid-template-columns:1fr; }
  .motion-deck,.image-bank { grid-template-columns:1fr; }
  .camera-card { max-height:none; }
  .camera-card-body { overflow:visible; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; transition:none !important; } }