.cameras { min-width:0; container-type:inline-size; padding:18px; border:1px solid var(--line-strong); border-radius:15px; background:var(--surface); color:var(--ink); }
.cameras-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.cameras-heading h2 { margin:0; display:flex; align-items:center; gap:9px; font-size:15px; line-height:1.6; font-weight:600; }
.cameras-status { display:block; margin-top:4px; color:var(--ink-3); font-size:12px; line-height:1.6; }
.cameras-actions { display:flex; align-items:center; gap:8px; flex:none; }
.cameras-connect,.cameras-refresh,.camera-card-preview,.camera-preview-stop,.camera-preview-resume { font:inherit; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:9px; cursor:pointer; min-height:36px; }
.cameras-connect { padding:7px 12px; font-size:12px; }
.cameras-refresh { width:36px; display:grid; place-items:center; }
.cameras button:hover:not(:disabled),.camera-preview button:hover:not(:disabled) { background:var(--surface-2); }
.cameras button:focus-visible,.camera-preview button:focus-visible,.camera-card-official:focus-visible { outline:2px solid var(--accent-ink); outline-offset:3px; }
.cameras button:disabled,.camera-preview button:disabled { cursor:default; }
.cameras [hidden],.camera-preview [hidden] { display:none!important; }
.cameras-empty { margin:15px 0 0; color:var(--ink-3); font-size:12px; line-height:1.8; }
.cameras-feedback { margin:12px 0 0; font-size:12px; line-height:1.8; color:var(--ink-2); }
.cameras-feedback[data-tone="bad"] { color:var(--bad-ink); }
.camera-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:10px; margin-top:16px; }
.camera-card { min-width:0; display:grid; grid-template-columns:43px minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px; border:1px solid var(--line-strong); border-radius:11px; background:var(--surface); }
.camera-card-symbol { display:grid; place-items:center; flex:none; width:43px; height:43px; border-radius:10px; color:var(--accent-ink); background:var(--accent-soft); }
.camera-card-copy { min-width:0; grid-column:2; }
.camera-card-copy b { display:block; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.camera-card-state { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:11px; line-height:1.6; color:var(--ink-3); }
.camera-card-state i { width:6px; height:6px; flex:none; border-radius:50%; background:var(--ink-3); }
.camera-card[data-online="true"] .camera-card-state i { background:var(--ok-ink); }
.camera-card-preview { display:flex; align-items:center; gap:6px; padding:7px 9px; font-size:12px; grid-column:3; }
.camera-card-official { display:flex; align-items:center; gap:5px; font-size:12px; line-height:1.7; color:var(--accent-ink); grid-column:2/-1; }
.device-catalog>.cameras { margin-top:24px; }
.camera-preview { padding:22px; color:var(--ink); min-width:0; width:100%; flex:1; display:flex; flex-direction:column; gap:15px; height:100%; overflow:auto; }
.camera-preview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.camera-preview-heading h2 { margin:0; font-size:17px; line-height:1.6; overflow-wrap:anywhere; }
.camera-preview-heading span { display:block; margin-top:4px; font-size:12px; color:var(--ink-3); }
.camera-preview-stop { padding:7px 11px; font-size:12px; flex:none; }
.camera-preview-screen { position:relative; width:100%; aspect-ratio:16/9; border-radius:13px; background:#121416; overflow:hidden; flex:none; }
.camera-video { width:100%; height:100%; display:block; object-fit:contain; }
.camera-preview-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:#afb8c1; pointer-events:none; }
.camera-preview-status { margin:0; font-size:13px; line-height:1.8; color:var(--ink-2); }
.camera-preview-resume { align-self:flex-start; padding:8px 13px; font-size:13px; }
.camera-preview-official { display:flex; align-self:center; gap:5px; font-size:12px; line-height:1.8; color:var(--accent-ink); }
.camera-preview-note { margin:0; font-size:12px; line-height:1.8; color:var(--ink-3); }
/* 多个侧栏并排时，组件按实际剩余宽度调整，不能挤出容器。 */
@container (max-width:300px) {
 .cameras-heading { flex-wrap:wrap; gap:10px; }
 .cameras-actions { margin-left:auto; }
 .camera-card { grid-template-columns:43px minmax(0,1fr); padding:11px; }
 .camera-card-preview { grid-column:1/-1; grid-row:2; justify-self:start; }
 .camera-card-official { grid-column:1/-1; }
}
@media(max-width:560px) {
 .cameras { padding:15px; }
 .cameras-heading { flex-wrap:wrap; gap:10px; }
 .cameras-actions { margin-left:auto; }
 .camera-list { grid-template-columns:minmax(0,1fr); }
 .camera-preview { padding:17px; }
}