.dome-camera-card{padding:0;overflow:hidden}
.dome-camera-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:22px 24px;border-bottom:1px solid var(--line)}
.dome-camera-header h2{margin:.35rem 0 0;font-size:1.25rem;letter-spacing:.02em}
.dome-camera-state{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:.08em}
.dome-camera-state.is-online{color:var(--green);border-color:rgba(72,209,63,.45)}
.dome-camera-state.is-offline{color:var(--red);border-color:rgba(255,69,69,.42)}
.dome-camera-frame{position:relative;min-height:360px;aspect-ratio:16/9;background:#01060a;overflow:hidden}
.dome-camera-frame>img,.dome-camera-frame>video{display:block;width:100%;height:100%;object-fit:contain;background:#01060a}
.dome-camera-frame>video[hidden],.dome-camera-frame>img[hidden]{display:none}
.dome-camera-empty,.dome-camera-starting{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);background:radial-gradient(circle at 50% 35%,#10283a,#030914 68%)}
.dome-camera-empty b,.dome-camera-starting b{color:var(--text);font-size:.9rem;letter-spacing:.12em}
.dome-camera-empty span{font-size:.85rem}
.dome-camera-starting[hidden],.dome-camera-empty[hidden]{display:none}
.dome-camera-spinner{width:34px;height:34px;border:3px solid rgba(120,200,255,.22);border-top-color:var(--blue2);border-radius:50%;animation:dome-spin .85s linear infinite}
@keyframes dome-spin{to{transform:rotate(360deg)}}
.dome-camera-live-badge{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;border:1px solid rgba(72,209,63,.5);border-radius:5px;padding:7px 10px;background:rgba(3,14,18,.82);color:#dfffe2;font-size:.75rem;font-weight:800;letter-spacing:.08em}
.dome-camera-live-badge[hidden]{display:none}.dome-camera-live-badge i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(72,209,63,.8)}
.dome-camera-live-badge span+span:before{content:"·";margin-right:8px;color:#6d9b80}
.dome-camera-controls{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}.dome-camera-controls[hidden]{display:none}
.dome-camera-controls button,.dome-member-form button,#domeMemberLogout{border:1px solid #2c5069;border-radius:6px;background:rgba(5,21,32,.9);color:#eaf8ff;padding:10px 13px;font:inherit;font-size:.8rem;font-weight:800;letter-spacing:.05em;cursor:pointer}
.dome-camera-controls button:hover,.dome-member-form button:hover,#domeMemberLogout:hover{border-color:var(--blue2)}
.dome-camera-controls button:disabled{opacity:.55;cursor:default}.dome-camera-controls #domeCameraStop{border-color:rgba(255,69,69,.5)}
.dome-camera-message{position:absolute;left:14px;right:14px;bottom:68px;padding:10px 12px;border:1px solid rgba(255,211,41,.5);border-radius:6px;background:rgba(20,17,5,.9);color:#fff2ad;font-size:.85rem}.dome-camera-message[hidden]{display:none}
.dome-camera-footer{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center;padding:15px 22px;border-top:1px solid var(--line)}
.dome-camera-footer div{display:flex;flex-direction:column;gap:3px}.dome-camera-footer span{color:var(--muted);font-size:.75rem;font-weight:800;letter-spacing:.08em}.dome-camera-footer b{font-size:.9rem}
.dome-member-link{border:0;background:none;color:var(--blue2);font:inherit;font-size:.8rem;font-weight:800;letter-spacing:.06em;cursor:pointer;padding:10px}
.dome-member-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,5,10,.82)}.dome-member-modal[hidden]{display:none}
.dome-member-dialog{position:relative;width:min(440px,100%);padding:26px;border:1px solid var(--line2);border-radius:10px;background:linear-gradient(180deg,#0d2233,#07131f);box-shadow:0 28px 90px rgba(0,0,0,.55)}
.dome-member-dialog h2{margin:.5rem 0 1rem}.dome-member-dialog p{color:var(--muted);line-height:1.5}
.dome-member-close{position:absolute;right:12px;top:10px;border:0;background:none;color:var(--muted);font-size:1.7rem;cursor:pointer}
.dome-member-form{display:grid;gap:14px}.dome-member-form label{display:grid;gap:6px;color:var(--muted);font-size:.8rem;font-weight:700}.dome-member-form input{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:6px;background:#030d16;color:var(--text);padding:11px 12px;font:inherit;font-size:1rem}
.dome-member-error{min-height:1.3em;margin-top:10px;color:#ff9aa5;font-size:.85rem}
@media(max-width:720px){.dome-camera-header{align-items:flex-start;flex-direction:column}.dome-camera-frame{min-height:220px}.dome-camera-footer{grid-template-columns:1fr 1fr}.dome-member-link{grid-column:1/-1;justify-self:start;padding-left:0}.dome-camera-live-badge span:nth-last-child(-n+2){display:none}.dome-camera-controls{left:10px;right:10px}.dome-camera-controls button{flex:1;padding:10px 7px;font-size:.72rem}}


/* Multi-camera layout; hardware controls remain unavailable until commissioned. */
.preview-shell{max-width:1250px;margin:0 auto;padding:22px}.preview-banner{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 18px;margin-bottom:18px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);font-size:.8rem}.preview-banner strong{color:var(--amber)}.preview-banner label{display:flex;gap:8px;align-items:center}.preview-banner select,.camera-switch button,.power-row button,.preview-actions button,.ptz button{font:inherit;font-size:.8rem;font-weight:700;color:var(--text);border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:10px 13px;cursor:pointer}.camera-switch{display:flex;gap:8px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--line)}.camera-switch button[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:rgba(30,103,144,.2)}button:disabled{opacity:.4;cursor:default!important}.dome-camera-card{padding:0}.preview-stage{position:relative;min-height:330px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#143046,#01060a);overflow:hidden}.scene{position:absolute;width:70%;height:85%;opacity:.28;color:var(--blue);transition:transform .3s}.preview-overlay{text-align:center;position:relative;background:rgba(2,9,14,.8);border:1px solid var(--line);border-radius:8px;padding:20px 28px;margin:14px}.preview-overlay h3{font-size:1.1rem;letter-spacing:.08em;margin:0 0 10px}.preview-overlay p{color:var(--muted);margin:7px 0;font-size:.85rem}.scene-tag{position:absolute;top:16px;left:18px;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.12em}.preview-actions{padding:14px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line)}.preview-actions>div{display:flex;gap:8px;flex-wrap:wrap}.preview-actions .ptz{display:grid;grid-template-columns:40px 40px 40px;gap:4px}.ptz button{padding:8px}.power-panel{padding:18px 22px;border-top:1px solid var(--line)}.power-title{color:var(--blue);font-size:.75rem;letter-spacing:.12em;font-weight:800;margin-bottom:12px}.power-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.power-row{padding:12px;border:1px solid var(--line);border-radius:7px;display:flex;flex-direction:column;gap:10px}.power-row strong{font-size:.78rem}.power-row small{color:var(--muted);font-size:.75rem}.power-row button{align-self:flex-start}.power-row .on{color:var(--green)}.preview-status{padding:0 22px 16px;color:var(--muted);font-size:.8rem;min-height:35px}.preview-foot{margin-top:20px;color:var(--muted);font-size:.8rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}[hidden]{display:none!important} .preview-stage:fullscreen{width:100%;height:100%;aspect-ratio:auto}.preview-stage.live .scene{opacity:.48}.preview-stage.lit{background:radial-gradient(ellipse at center,#3a4249,#071522)}@media(max-width:650px){.preview-shell{padding:12px}.power-grid{grid-template-columns:1fr}.camera-switch{padding:12px;display:grid;grid-template-columns:1fr 1fr}.camera-switch button{padding:12px 8px}.preview-stage{min-height:270px;aspect-ratio:auto}.dome-camera-header{padding:18px}.preview-overlay{padding:16px}.preview-actions{padding:14px}.dome-camera-footer{gap:12px}.preview-banner label{flex-wrap:wrap}}

.preview-banner strong{color:var(--blue)}.access-strip{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.agent-status{display:flex;gap:8px;align-items:center;color:var(--green);font-size:.75rem;font-weight:800}.agent-status .ovm-led,.dome-camera-state.is-online .ovm-led{background:var(--green);box-shadow:0 0 8px rgba(93,224,151,.34)}.power-row button.power-on{background:rgba(36,125,77,.35);border-color:var(--green);color:#baffd6}.preview-dialog{color:var(--text);border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,#0d2233,#07131f);padding:26px;width:min(460px,calc(100% - 32px));box-shadow:0 28px 90px rgba(0,0,0,.55)}.preview-dialog::backdrop{background:rgba(0,5,10,.82)}.preview-dialog h2{font-size:1.25rem}.preview-dialog p{color:var(--muted);line-height:1.6}.preview-dialog strong{color:var(--text)}.preview-dialog small{color:var(--muted)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:22px}.dialog-actions button{font:inherit;font-size:.8rem;font-weight:800;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text);padding:12px;cursor:pointer}#confirmLight,#enterMember{border-color:var(--blue);color:var(--blue)}

/* Keep power controls beside the image, with a compact layout on small screens. */
.camera-workspace{display:grid;grid-template-columns:minmax(0,1fr)}
.camera-view{min-width:0}.camera-workspace.has-controls{grid-template-columns:minmax(0,1fr) 270px}
.camera-workspace .power-panel{border-top:0;border-left:1px solid var(--line);padding:18px 16px;background:rgba(5,18,27,.35)}
.camera-workspace .power-grid{grid-template-columns:1fr;gap:12px}
.camera-workspace .power-title{line-height:1.6;font-size:.68rem;letter-spacing:.08em}
.camera-workspace .power-row{gap:12px;padding:14px}.camera-workspace .power-row small{line-height:1.5}
.camera-workspace .power-row button{width:100%;min-height:42px}
.preview-stage{min-height:0}.preview-status{padding-top:14px;border-top:1px solid var(--line)}
.preview-actions #audio{border:1px solid #2c5069;border-radius:6px;background:rgba(5,21,32,.9);color:#eaf8ff;padding:10px 13px;font:inherit;font-size:.8rem;font-weight:800;letter-spacing:.05em;cursor:pointer}
.preview-actions #audio:hover{border-color:var(--blue)}
@media(max-width:900px){.camera-workspace.has-controls{grid-template-columns:minmax(0,1fr)}.camera-workspace .power-panel{border-left:0;border-top:1px solid var(--line);padding:14px}.camera-workspace .power-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.camera-workspace .power-row{padding:10px;gap:8px}.camera-workspace .power-row strong{font-size:.7rem}.camera-workspace .power-row small{display:none}.camera-workspace .power-row button{padding:10px 5px;font-size:.7rem}.preview-stage{min-height:240px}.power-title{margin-bottom:8px}}
@media(max-width:430px){.camera-workspace .power-grid{grid-template-columns:1fr}.camera-workspace .power-row{display:grid;grid-template-columns:1fr 125px;align-items:center}.camera-workspace .power-row button{min-height:38px}.preview-stage{min-height:220px}}

.camera-access-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.camera-workspace .dome-camera-frame{min-height:0}.camera-workspace .dome-camera-controls{position:static;padding:14px 22px;flex-wrap:wrap;border-top:1px solid var(--line)}.camera-workspace .dome-camera-footer{grid-template-columns:1fr 1fr}.power-note{color:var(--muted);font-size:.75rem;line-height:1.5}.camera-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.dome-camera-empty{text-align:center;padding:20px}.camera-view:has(.dome-camera-frame:fullscreen) .dome-camera-controls{position:static}

.dome-ptz{position:absolute;left:14px;bottom:14px;z-index:5;display:grid;grid-template-columns:40px 40px 40px;grid-template-rows:40px 40px 40px auto;gap:3px;padding:8px;border:1px solid #2c5069;border-radius:10px;background:rgba(5,21,32,.86);backdrop-filter:blur(5px)}
.dome-ptz[hidden]{display:none!important}.dome-ptz button{border:1px solid #2c5069;border-radius:6px;background:rgba(9,28,40,.95);color:var(--blue);font:700 23px Arial;cursor:pointer;touch-action:manipulation;padding:0}
.dome-ptz button:hover{border-color:var(--blue);background:#143346}.dome-ptz button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.dome-ptz button:active{background:#245477}.dome-ptz button:disabled{opacity:.45}
.dome-ptz [data-ptz=up]{grid-area:1/2}.dome-ptz [data-ptz=left]{grid-area:2/1}.dome-ptz [data-ptz=right]{grid-area:2/3}.dome-ptz [data-ptz=down]{grid-area:3/2}.ptz-center{grid-area:2/2;align-self:center;justify-self:center;color:var(--muted);font-size:9px}.ptz-status{grid-area:4/1/5/4;color:var(--muted);font-size:9px;line-height:1.4;text-align:center;max-width:126px;padding-top:4px}
@media(max-width:600px){.dome-ptz{left:8px;bottom:8px;grid-template-columns:34px 34px 34px;grid-template-rows:34px 34px 34px auto;padding:5px}.dome-ptz button{font-size:21px}}

/* Rotate media only: overlay text and arrow controls stay upright. */
.dome-camera-frame.is-upside-down > img,.dome-camera-frame.is-upside-down > video{transform:rotate(180deg)}
.dome-camera-live-badge{left:auto;right:16px;top:16px;pointer-events:none}
.dome-orientation{margin-top:4px;border:1px solid #2c5069;border-radius:6px;background:rgba(5,21,32,.9);color:var(--muted);padding:8px 11px;font:inherit;font-size:.7rem;font-weight:700;letter-spacing:.04em;cursor:pointer}
.dome-orientation[aria-pressed=true]{color:var(--blue);border-color:var(--blue);background:rgba(30,103,144,.2)}
.dome-orientation:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:600px){.dome-camera-live-badge{right:8px;top:8px;padding:5px 7px}}

/* Accessories never change the camera header or media position. */
.dome-camera-accessories{min-height:58px;box-sizing:border-box;display:flex;align-items:center;padding:10px 22px;border-top:1px solid var(--line)}
.dome-camera-accessories .dome-orientation{margin:0}
#domeCameraModel{min-height:2.8em;line-height:1.4}
.camera-workspace.has-controls .dome-camera-controls{min-height:67px;box-sizing:border-box}
.camera-workspace.has-controls .dome-camera-controls[hidden]{display:flex!important;visibility:hidden;pointer-events:none}

.power-row button.is-on{background:rgba(72,209,63,.18);border-color:var(--green);color:var(--green);opacity:1}
.dome-camera-accessories{gap:12px;justify-content:space-between}.dome-camera-accessories button{font-size:.7rem}