.cctv-section{background:#fffaf3;border:1px solid #dfcbb5;border-radius:18px;padding:24px;margin-top:24px;scroll-margin-top:24px;color:#3b2615}
.cctv-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cctv-heading h2{margin:0 0 6px;font-size:1.4rem}.cctv-heading p,.cctv-note{margin:6px 0;color:#73614e;font-size:.9rem;line-height:1.7}
.cctv-heading button,.cctv-card-actions button{border:1px solid #cfa15e;border-radius:10px;background:#edd3aa;color:#432e1e;padding:9px 14px;cursor:pointer;font:inherit}
.cctv-heading button:disabled,.cctv-card-actions button:disabled{opacity:.6;cursor:wait}.cctv-card-actions .cctv-live{background:#49311e;color:#ffe4b6;border-color:#49311e}.cctv-dialog .cctv-live-status{padding:20px;background:#f2e4d3;color:#785337;border-radius:10px}.cctv-live-status[hidden]{display:none}
.cctv-filters{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 12px}.cctv-filters label{display:flex;flex:1;min-width:160px;flex-direction:column;gap:5px;font-size:.85rem;color:#73614e}.cctv-filters label:first-child{flex:2}
.cctv-filters input,.cctv-filters select{box-sizing:border-box;width:100%;padding:11px;border:1px solid #d9c6b1;border-radius:10px;background:#fff;color:#3b2615;font:inherit}
.cctv-statusline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0 18px;font-size:.85rem}.cctv-statusline span{color:#73614e}
.cctv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cctv-card{min-width:0;border:1px solid #e1d1bd;border-radius:14px;overflow:hidden;background:#fff}
.cctv-image-area{position:relative;aspect-ratio:16/10;background:#eee7dc;display:grid;place-items:center}.cctv-enlarge{padding:0;border:0;background:transparent;width:100%;height:100%;display:block;cursor:zoom-in}.cctv-enlarge:disabled{cursor:default}.cctv-enlarge img{width:100%;height:100%;object-fit:contain}.cctv-image-message{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:15px;color:#76634f;font-size:.9rem;pointer-events:none}.cctv-image-message[hidden],.cctv-enlarge img[hidden]{display:none}
.cctv-card-body{padding:16px}.cctv-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.cctv-code{color:#856235;font-size:.8rem;font-weight:700}.cctv-badge{font-size:.72rem;border-radius:20px;padding:4px 7px;background:#f2e4d4;color:#785337}.cctv-badge.online{background:#e6efe5;color:#416345}
.cctv-card h3{margin:12px 0 7px;font-size:1rem;color:#3b2615;line-height:1.5}.cctv-card p{margin:5px 0;font-size:.83rem;color:#73614e;line-height:1.7}.cctv-card .cctv-distance{color:#86581f}.cctv-image-time{display:block;font-size:.75rem;color:#827260;line-height:1.6;margin-top:8px}.cctv-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}.cctv-card-actions button,.cctv-card-actions a{font-size:.78rem}.cctv-section a,.cctv-nearby a{color:#8c5b1f}.cctv-empty{grid-column:1/-1;border:1px dashed #d8c0a4;border-radius:10px;padding:18px;color:#73614e;margin:0;line-height:1.7}
.cctv-nearby{margin:22px 0;border-top:1px solid #e4d2bc;padding-top:18px}.cctv-nearby h3{font-size:1.05rem;margin:0 0 6px}.cctv-nearby .cctv-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.cctv-nearby .cctv-card-body{padding:12px}
.cctv-dialog{box-sizing:border-box;width:min(1100px,94vw);max-height:94vh;border:1px solid #d8b585;border-radius:16px;background:#fffaf3;color:#3b2615;padding:18px}.cctv-dialog::backdrop{background:rgba(29,18,9,.8)}.cctv-dialog header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}.cctv-dialog h2{font-size:1.1rem;margin:0}.cctv-dialog button{background:#3b2615;color:#fff;border:0;border-radius:8px;padding:10px 16px;cursor:pointer;font:inherit}.cctv-dialog img{display:block;width:100%;max-height:70vh;object-fit:contain;background:#eee7dc}.cctv-dialog p{font-size:.85rem;line-height:1.6;color:#73614e}.cctv-card button:focus-visible,.cctv-section button:focus-visible,.cctv-dialog button:focus-visible{outline:3px solid #c78d3d;outline-offset:3px}
@media(max-width:1050px){.cctv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.cctv-section{padding:16px;border-radius:14px}.cctv-grid{grid-template-columns:1fr}.cctv-heading h2{font-size:1.2rem}.cctv-filters label{min-width:100%;flex:1}.cctv-nearby .cctv-grid{grid-template-columns:1fr}.cctv-dialog{padding:12px}}

.cctv-dialog canvas{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;background:#eee7dc}.cctv-dialog img[hidden],.cctv-dialog canvas[hidden]{display:none}