:root{font-family:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif;color:#223047;background:#f4f7fb;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column}button,select{font:inherit}.container{max-width:1180px;width:calc(100% - 40px);margin-inline:auto}.site-header{background:#fff;border-bottom:1px solid #e5eaf0}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:99px}.identity{display:flex;align-items:center;gap:14px;min-width:0}.brand-logo{display:block;flex:none;width:auto;height:74px;max-width:none;max-height:none;object-fit:contain}.agency{font-size:20px;font-weight:800;letter-spacing:.025em}.brand-sub{color:#64748b;font-size:13px;margin-top:5px}.header-tag{border-radius:999px;background:#e8f5ed;color:#267647;font-size:13px;padding:9px 14px;white-space:nowrap}main{flex:1}.hero{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:43px 0 29px}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:750;color:#49896a}h1{font-size:30px;margin:9px 0 10px;letter-spacing:.01em}.hero p{margin:0;color:#69768a}.count{white-space:nowrap;padding:10px 14px;background:white;border:1px solid #e5eaf0;border-radius:10px;font-weight:700;font-size:13px}.toolbar{display:flex;align-items:center;justify-content:space-between;background:white;border:1px solid #e3e9f0;border-radius:14px;padding:17px 19px;margin-bottom:17px}.toolbar>div{display:flex;gap:16px;align-items:center}.muted{font-size:13px;color:#8792a3}.select-wrap{display:flex;align-items:center;gap:10px;font-size:13px;color:#65758b}.select-wrap select{border:1px solid #dce3ed;background:#fff;border-radius:8px;padding:7px;color:#233249}.camera-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}.camera-grid.single{grid-template-columns:1fr}.camera-card{background:white;overflow:hidden;border:1px solid #e2e8f0;border-radius:15px;box-shadow:0 4px 15px #203c5910}.camera-media{aspect-ratio:16/9;background:#e9eff5}.media-content,.stream{width:100%;height:100%;display:block}.stream{object-fit:contain;background:#0d1725;border:0}.empty{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#758499;text-align:center;padding:10px;background:linear-gradient(140deg,#edf3f8,#e3ebf3)}.empty strong{font-size:15px;color:#60748b}.empty small{font-size:12px}.camera-glyph{font-size:39px;color:#90a5b8;line-height:1.3}.camera-details{padding:17px 19px;display:flex;align-items:center;justify-content:space-between;gap:14px}.camera-details h2{font-size:19px;margin:0 0 6px}.camera-details p{font-size:12px;color:#8290a1;margin:0}.view-btn{cursor:pointer;border:1px solid #cfded7;background:#f0f8f3;color:#23744d;border-radius:9px;padding:10px 14px;white-space:nowrap;font-weight:700;font-size:13px}.view-btn:hover{background:#e2f1e6}.notice{display:flex;align-items:start;gap:13px;margin:26px 0 50px;background:#edf4fa;border:1px solid #dbe9f3;border-radius:12px;padding:18px 20px}.notice-icon{font-size:22px;color:#527d9c}.notice strong{font-size:14px}.notice p{margin:6px 0 0;color:#677d92;font-size:13px;line-height:1.7}footer{background:white;border-top:1px solid #e5eaf0;color:#7b8797;font-size:12px}footer .container{display:flex;justify-content:space-between;padding:22px 0;gap:10px}dialog{border:0;border-radius:15px;padding:0;width:min(1050px,95vw);max-height:95vh;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#071422b9}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.modal-head strong{display:block;font-size:18px}.modal-head small{display:block;color:#7e8b9c;margin-top:3px}.icon-btn{background:#edf2f6;border:0;border-radius:8px;padding:8px 12px;cursor:pointer}.viewer-content{aspect-ratio:16/9;max-height:80vh;background:#091522}.stream-error{position:absolute;bottom:0;left:0;right:0;background:#b42318;color:#fff;padding:8px;font-size:12px;text-align:center}.media-content{position:relative}@media(max-width:750px){.container{width:calc(100% - 26px)}.header-inner{min-height:82px}.brand-logo{width:auto;height:54px;max-width:none;max-height:none}.agency{font-size:14px}.brand-sub{font-size:11px}.header-tag{display:none}.identity{gap:10px}.hero{align-items:start;padding:30px 0 22px;flex-direction:column}.hero h1{font-size:25px}.camera-grid{grid-template-columns:1fr}.toolbar{padding:13px}.toolbar>div{display:block}.muted{display:block;margin-top:4px}footer .container{flex-direction:column;text-align:center;align-items:center}.camera-details{padding:14px}.camera-details h2{font-size:17px}}

/* Logo keeps its natural aspect ratio (904 × 873). No cropping or fixed-width wrapper. */
.brand-copy{min-width:0}
@media(max-width:430px){.agency{font-size:13px}.brand-sub{font-size:11px}}

/* v0.5: neutral branding, no organization names or logo */
.header-inner{min-height:88px}
.identity{min-width:0;gap:0}
.agency{font-size:22px;line-height:1.45}
.brand-sub{font-size:13px}
@media(max-width:750px){.header-inner{min-height:76px}.agency{font-size:17px}.brand-sub{font-size:12px}}
@media(max-width:430px){.agency{font-size:15px}}

/* v0.6 camera identity: intrinsic 3:2 image, never cropped */
.identity{display:flex;align-items:center;gap:14px;min-width:0}
.camera-site-logo{display:block;flex:0 0 auto;width:90px;height:60px;object-fit:contain;border-radius:10px;background:#101b2b}
.brand-copy{min-width:0}
@media(max-width:750px){.identity{gap:10px}.camera-site-logo{width:72px;height:48px;border-radius:8px}}
@media(max-width:430px){.camera-site-logo{width:60px;height:40px}.identity{gap:8px}}