*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07111f;color:#f4f7fb;font-family:Arial,sans-serif}.app{min-height:100vh;padding:18px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1800px;margin:0 auto 16px}.eyebrow{font-size:.67rem;letter-spacing:.16em;color:#8fa5bd;margin:0 0 5px}h1{font-size:clamp(1rem,3.5vw,1.45rem);margin:0;letter-spacing:.04em}.header-meta{display:flex;align-items:center;gap:14px}.legend{color:#ff4d5d;font-size:.73rem;letter-spacing:.12em;font-weight:bold;display:flex;align-items:center;gap:7px}.viewer-count{font-size:.7rem;letter-spacing:.08em;color:#cad7e4;padding:7px 9px;border:1px solid #ffffff24;border-radius:6px;background:#0e1a28}.viewer-count b{color:#fff;font-size:.88rem}.dot{width:9px;height:9px;background:#ff3348;border-radius:50%;animation:pulse 1.5s infinite}.camera-grid{max-width:1800px;margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.camera-card{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:11px;background:#02060c;box-shadow:0 8px 24px #0007;min-width:0}.camera-card video{display:block;width:100%;height:100%;object-fit:contain;background:#02060c}.loading,.error{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;background:#07111fc9;color:#d9e4ef;font-size:.85rem}.loading i{width:17px;height:17px;border:2px solid #7891a9;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.error{padding:18px;text-align:center}.camera-card footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:9px;padding:10px 12px;background:linear-gradient(transparent,#000e);font-size:.74rem;letter-spacing:.1em}.camera-card footer b{margin-right:auto}.status{font-size:.64rem;color:#ff5c6a}.sound,.fullscreen{border:1px solid #ffffff55;border-radius:5px;background:#101d2cdd;color:#fff;padding:5px 8px;cursor:pointer}.placeholder{background:#000}.placeholder-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#718094;letter-spacing:.13em}.placeholder-content span{font-size:1rem}.placeholder-content small{font-size:.65rem}.placeholder .status{color:#788493}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.4}}[hidden]{display:none!important}@media(max-width:700px){.app{padding:10px}.header-meta{gap:8px}.viewer-count{padding:6px;font-size:.62rem}.camera-grid{grid-template-columns:1fr;gap:10px}.topbar{margin-bottom:10px}}