:root{font-family:"Microsoft YaHei",Arial,sans-serif;color:#e8f8ff;background:#030a11;font-synthesis:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}.video-page{height:100%;min-height:0;display:grid;grid-template-rows:64px minmax(0,1fr) 32px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 42%,#0b2d40 0,#061521 45%,#02080e 100%)}
.topbar{display:flex;align-items:center;gap:18px;padding:0 14px;border:1px solid rgba(41,216,255,.22);background:linear-gradient(90deg,rgba(5,27,41,.96),rgba(11,55,73,.9),rgba(5,27,41,.96))}.topbar>div:first-child{margin-right:auto}.eyebrow{display:block;color:#4e9bb2;font:8px Consolas;letter-spacing:2px}.topbar h1{margin:4px 0 0;font-size:20px}.online-summary{display:flex;align-items:center;gap:7px;color:#78a7b6;font-size:11px}.online-summary i{width:8px;height:8px;border-radius:50%;background:#54e5a4;box-shadow:0 0 10px #54e5a4}.pair-tabs{display:flex;gap:7px}.pair-tabs button{height:36px;padding:0 16px;border:1px solid rgba(49,216,255,.22);border-radius:4px;color:#83aab8;background:#082434;cursor:pointer}.pair-tabs button.active{border-color:#31d8ff;color:#fff;background:#104258;box-shadow:0 0 18px rgba(49,216,255,.18)}
.camera-grid{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;padding:8px 0}.camera-card{min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(49,216,255,.28);border-radius:5px;background:#02090f}.camera-stage{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;cursor:pointer;background:radial-gradient(circle at center,rgba(20,82,106,.32),rgba(2,9,15,.96))}.camera-stage:focus-visible{outline:2px solid #31d8ff;outline-offset:-2px}.camera-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#02080d}.camera-label{position:absolute;z-index:4;left:10px;top:10px;padding:7px 11px;border-left:3px solid #31d8ff;border-radius:3px;background:rgba(2,11,17,.86);text-shadow:0 1px 2px #000}.camera-label b,.camera-label small{display:block}.camera-label b{font-size:16px}.camera-label small{margin-top:2px;color:#78aab9;font:9px Consolas;letter-spacing:1px}.camera-status{position:absolute;z-index:4;right:10px;top:10px;padding:5px 8px;border-radius:18px;background:rgba(2,12,18,.82);font-size:10px}.camera-status::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#facc15;box-shadow:0 0 7px currentColor}.camera-status.online{color:#65efae}.camera-status.online::before{background:#65efae}.camera-status.offline{color:#ff8b96}.camera-status.offline::before{background:#ff8b96}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#9bc1cc}.camera-placeholder[hidden]{display:none}.camera-placeholder i{width:25px;height:25px;border:2px solid rgba(49,216,255,.18);border-top-color:#31d8ff;border-radius:50%;animation:spin 1s linear infinite}.camera-placeholder b{font-size:11px}.camera-placeholder small{color:#537d8b;font-size:9px}.fullscreen-hint{position:absolute;z-index:4;right:10px;bottom:8px;color:#668e9c;font-size:9px;font-style:normal}.video-page>footer{display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-top:1px solid rgba(49,216,255,.14);color:#587e8c;font-size:10px}.video-page>footer b{color:#31d8ff}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.video-page{grid-template-rows:auto minmax(0,1fr) 30px}.topbar{min-height:90px;flex-wrap:wrap;gap:7px;padding:8px}.topbar>div:first-child{width:55%}.topbar h1{font-size:17px}.online-summary{margin-left:auto}.pair-tabs{width:100%}.pair-tabs button{flex:1;padding:0 5px}.camera-label{padding:5px 7px}.camera-label b{font-size:12px}.fullscreen-hint{display:none}}
@media(max-width:520px) and (orientation:portrait){html,body,#app{height:auto;min-height:100%;overflow:auto}.video-page{min-height:100vh;grid-template-rows:auto auto 34px}.camera-grid{grid-template-columns:1fr;grid-template-rows:none}.camera-stage{aspect-ratio:16/9}.online-summary{display:none}}
.fullscreen-button{position:absolute;z-index:5;right:10px;bottom:8px;padding:7px 10px;border:1px solid rgba(49,216,255,.55);border-radius:4px;color:#dff9ff;background:rgba(2,18,27,.86);font-size:10px;cursor:pointer}.fullscreen-button:hover,.fullscreen-button:focus-visible{border-color:#31d8ff;background:#104258;outline:none}.camera-stage:fullscreen,.camera-stage.in-page-fullscreen{background:#02080d}.camera-stage.in-page-fullscreen{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;border-radius:0}
.page-fullscreen-button{height:36px;padding:0 14px;border:1px solid rgba(49,216,255,.45);border-radius:4px;color:#dff9ff;background:rgba(8,36,52,.88);font-size:11px;white-space:nowrap;cursor:pointer}.page-fullscreen-button:hover,.page-fullscreen-button:focus-visible{border-color:#31d8ff;background:#104258;outline:none}.video-page:fullscreen,.video-page.page-fullscreen-fallback{width:100vw;height:100vh;background:radial-gradient(circle at 50% 42%,#0b2d40 0,#061521 45%,#02080e 100%)}.video-page.page-fullscreen-fallback{position:fixed;inset:0;z-index:9998}
@media(max-width:760px){.page-fullscreen-button{height:34px;padding:0 10px;font-size:10px}}