/* Screen 2: shared cyan glass surfaces; geometry follows the approved 2170×725 draft. */
:root,body{background:#001123;color:#edf7ff;font-family:'Microsoft YaHei','Noto Sans CJK SC',Arial,sans-serif}
#board{--edge:#1389cd;--primary:#08b6f3;--ice:#50d8ff;--muted:#aed0e7;background:radial-gradient(ellipse at 50% 45%,#043054,#001123 80%);color:#edf7ff}
#board #header{position:absolute;inset:0 0 auto;height:60px;background:linear-gradient(90deg,#012540,#001a32 120px,#001123);z-index:3}
#board #header:before{content:'';position:absolute;inset:0;background:url('assets/ui-handoff/header-reference.png') center top/2048px auto no-repeat;mask-image:linear-gradient(90deg,transparent 64px,#000 76px);-webkit-mask-image:linear-gradient(90deg,transparent 64px,#000 76px);pointer-events:none}
#board #officialBrandLogo{position:absolute;left:19px;top:7px;width:47px;height:45px;padding:5px;z-index:4}
#board #officialBrandLogo>span{display:block;position:relative;width:36px;height:36px;overflow:hidden;clip-path:inset(2px)}
/* Show the official emblem from the unmodified website lockup; preserve its aspect ratio. */
#board #officialBrandLogo img{position:absolute;left:-1.385px;top:-1.385px;height:38.769px;width:auto;max-width:none;filter:url('#cscecLogoMono');opacity:.94}
#board .company,#board .title{color:transparent;background:none;border:0;box-shadow:none;pointer-events:none}
#board .title:before,#board .title:after{display:none}
#board .title span{border:0}
#board #header .company,#board #header .title{background:none;border:0;box-shadow:none}
#board #header .panel:before{display:none}
#board #clock{left:1790px!important;top:8px!important;width:255px!important;height:37px!important;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#01203d,#001123);font:16px 'Segoe UI',sans-serif}
#board #header .box.text:not(time){display:none}
#board #checkUpdate{left:1595px!important;top:14px!important;width:100px!important;height:28px!important}
#board #exitApp{left:1710px!important;top:14px!important;width:59px!important;height:28px!important;font-size:12px!important}
#board button,#board select{color:#edf7ff;border:1px solid #1389cd99;border-radius:4px;background:linear-gradient(140deg,#064577e6,#032744d9);font-size:calc(13px * var(--text-scale,1));box-shadow:inset 0 1px #50d8ff20;transition:background .15s,border-color .15s}
#board button:hover,#board button[aria-pressed=true],#board button.selected{background:linear-gradient(150deg,#038bdb,#075b9e);border-color:#50d8ff;box-shadow:inset 0 0 10px #39c9ff40;color:#fff}
#board button:focus-visible,#board select:focus-visible,#board input:focus-visible{outline:2px solid #8be6ff;outline-offset:3px}
#board .panel,#board .station-panel,#board .handoff-panel,#board #sceneFrame,#board #stationPage>.box{background:linear-gradient(150deg,#04325aeb,#00243fe6);border:1px solid var(--edge);border-radius:6px;box-shadow:inset 0 1px 8px #0a9fff28,0 0 10px #008eff15}
#board .panel:before,#board .handoff-panel:before,#board .station-panel:before{content:'';position:absolute;top:-1px;left:5px;width:32%;height:1px;background:linear-gradient(90deg,#a5eaff,#08b6f300);pointer-events:none}
#board #sceneFrame{border-color:#2babbd;background:#022741}
#board #mainView{border:1px solid #50d8ff66;border-radius:4px}
#board .muted,#board .notice{color:var(--muted)}
#board .cyan,#board .section-title{color:var(--primary)}
#board .handoff-icon{width:22px;height:22px;fill:var(--primary);flex:none;filter:drop-shadow(0 3px 5px #008ed64d)}
#board .panel-heading,#board .task-title,#board .station-panel h2{display:flex;align-items:center;gap:8px;color:#e0f2ff;font-size:15px;font-weight:600}
#board .panel-heading{height:32px;padding:0 14px}
#board #stationSelector{display:flex;align-items:center;gap:12px;text-align:left;padding:0 4px;background:transparent;border:0;box-shadow:none;font-size:17px;font-weight:600}
#board #stationSelector .select-arrow{margin-left:auto;color:#00cddd;font-size:21px;font-weight:400}
#board #selectorMenu{left:23px;top:112px;width:430px;max-height:535px;background:linear-gradient(150deg,#04325af7,#00243ff7);border:1px solid var(--edge);border-radius:4px;padding:6px;box-shadow:0 12px 30px #0008}
#board #selectorMenu button{font-size:14px;min-height:35px;text-align:left;margin:2px 0;border-color:transparent}
#board video{background:#001123;object-fit:contain}
#board #inlineVideo{object-fit:cover;border-radius:5px}
#board #inlinePlay{width:42px;height:42px;border-radius:50%;background:#032b48ad;font-size:20px;opacity:0;transition:opacity .15s}
#board #inlineWrap:hover #inlinePlay,#board #inlinePlay:focus-visible{opacity:1}
#board #inlineFull{border:0;background:#032b4866}
#board #inlineEmpty{background:#032641;color:var(--muted)}
#board .task-grid{display:block;padding:0 17px;overflow:hidden}
#board .task-title{height:31px;font-size:14px}
#board .task-status{margin-left:auto;color:#00cfc3;border:1px solid #00cfc34d;border-radius:12px;padding:2px 8px;font-size:10px;font-weight:400}
#board .task-body{display:grid;grid-template-columns:1fr 1.2fr 1.1fr;gap:11px;font-size:11px;line-height:1.25}
#board .task-body>div{min-width:0}
#board .task-body strong{display:block;font:600 24px 'Arial Narrow','Segoe UI',sans-serif;margin-bottom:4px}
#board .task-body p{margin:4px 0 7px}
#board .task-progress{height:6px;background:#0b527f;border-radius:4px;margin:10px 0;overflow:hidden}
#board .task-progress i{display:block;height:100%;width:70.28%;background:linear-gradient(90deg,#159ef8,#03d2f1)}
#board #monitorCaption>.panel-heading{height:31px}
#board #cameraStrip{position:absolute;inset:33px 16px 15px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#board #cameraStrip .camera-card,#board #cameraGrid .camera-card{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;padding:0;border:0;border-radius:4px;min-width:0;min-height:0;background:#075183}
#board .camera-card img{width:100%;height:calc(100% - 20px);object-fit:cover;opacity:1}
#board .camera-card footer{height:20px;padding:2px 4px;background:#075183;color:#aed0e7;font-size:10px;line-height:16px;white-space:nowrap}
#board .camera-card footer em{display:none}
#board .responsive-toolbar{left:500px;width:1046px;gap:6px;flex-wrap:nowrap}
#board #sceneTopBar{top:85px!important}
#board .responsive-toolbar>button,#board .responsive-toolbar #floorTabs button{height:34px!important;padding:0 10px;font-size:13px}
#board .responsive-toolbar #tourEntry{margin-left:auto;background:#033052db;border-color:#1389cd99;font-size:13px}
#board .responsive-toolbar #tourEntry b{font-size:13px;margin-right:4px}
#board .responsive-toolbar #monitorEntry{background:#033052db}
#board #sceneBottomBar{top:604px!important;align-items:center;justify-content:flex-end}
#board #floorTabs{position:absolute;left:355px;gap:0;margin:0}
#board #floorTabs button{min-width:165px;height:39px!important;font-size:15px;font-weight:600;border-radius:0;background:#06324eeb}
#board #floorTabs button:first-child{border-radius:4px 0 0 4px}
#board #floorTabs button:last-child{border-radius:0 4px 4px 0}
#board #floorTabs button[aria-pressed=true]{background:linear-gradient(#038bdb,#075b9e);box-shadow:inset 0 0 10px #39c9ff55;border-color:#50d8ff}
#board #sceneBottomBar>button{height:27px!important;padding:0 7px;font-size:11px;transform:translateY(8px)}
#board #sceneHint{font-size:10px;color:#82abc7;text-align:center}
#board #tourMenu,#board #moreMenu{background:linear-gradient(150deg,#04325af7,#00243ff7);border:1px solid var(--edge);border-radius:4px;box-shadow:0 12px 30px #0008;height:auto!important;z-index:8}
#board #tourMenu{top:126px!important}
#board #tourMenu button,#board #moreMenu button{font-size:14px;min-height:30px}
#board #metricsTitle{display:flex;align-items:center;gap:8px;font-size:15px!important;font-weight:600}
#board #kpiList{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:8px 10px}
#board .kpi{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;grid-column:span 2;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:9px;padding:0;background:none;border:0;box-shadow:none;min-width:0}
#board .kpi:nth-child(-n+2){grid-column:span 3}
#board .kpi:nth-child(4){order:5}
#board .kpi:nth-child(5){order:4}
#board .kpi-symbol{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:38px;align-self:center}
#board .kpi-symbol .handoff-icon{width:28px;height:28px;filter:drop-shadow(0 1px 3px #08b6f388)}
#board .kpi-symbol:after{content:'';position:absolute;left:-3px;bottom:-5px;width:38px;height:8px;background:radial-gradient(ellipse at center,#ccf8ffdd 0%,#42cfff9e 29%,#03a9f000 76%);filter:blur(1.7px);pointer-events:none}
#board .kpi-copy{display:flex;min-width:0;height:100%;flex-direction:column;justify-content:center;gap:1px}
#board .kpi label{color:#aed0e7;font-size:11px;white-space:nowrap}
#board .kpi strong{text-align:left;color:#08b6f3;font:italic 700 23px/1.2 Arial,sans-serif;text-shadow:0 0 5px #00b7ff30;margin:0}
#board .kpi:nth-child(-n+2) strong{font-size:26px}
#board .dashboard-chart{overflow:hidden}
#board .dashboard-chart .panel-heading{height:31px;font-size:15px}
#board .chart-detail{margin-left:auto;padding:0;height:23px;background:transparent;border:0;box-shadow:none;font-size:11px;color:#aed0e7}
#board .chart-reference{display:block;position:absolute;left:3%;top:35px;width:94%;height:calc(100% - 40px);object-fit:fill;pointer-events:none}
#board #chart-equipment .chart-reference,#board #chart-quality .chart-reference{top:30px;height:calc(100% - 34px)}
#board #demoNote{font-size:9px!important;color:#739ab5;white-space:nowrap}
#board #moreData{background:transparent;border:0;box-shadow:none;text-align:right;padding:0;font-size:10px;color:#aed0e7}
#board #cameraGrid{position:absolute;left:502px;top:116px;width:1045px;height:535px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;z-index:3}
#board #cameraGrid .camera-card footer{height:24px;line-height:20px;font-size:12px}
#board .station-panel h2{top:0;left:0;width:100%;height:37px;margin:0;padding:0 14px;background:linear-gradient(90deg,#07528688,transparent);border-bottom:1px solid #1389cd33}
#board .station-panel .viewport{top:46px;height:calc(100% - 96px)}
#board .station-panel:has(#detailVideo)>.box{inset:46px 10px 52px!important}
#board .control-footer{font-size:12px;gap:10px;height:30px;bottom:10px}
#board .control-footer button{height:28px;min-width:64px}
#board .control-footer span,#board #motionLabel{font-size:11px}
#board #detailTitle{font-size:20px;color:#edf7ff}
#board #variant{font-size:12px;background:#04325a}
#board .fullscreen-view{background:#032b48a6;font-size:23px}
#board .tour-label,#board .tour-bar{background:linear-gradient(140deg,#064577ee,#032744ee);border:1px solid var(--edge);border-radius:4px;color:#edf7ff}
#board .tour-bar button{min-width:88px;font-size:12px}
#board #loadMessage{background:#04325aef;border:1px solid var(--edge);border-radius:6px;box-shadow:0 8px 40px #0005;font-size:16px}
#board #loadMessage small{color:var(--muted)}
#board #modalShade{background:#000b1ac9;backdrop-filter:blur(4px)}
#board #modal{background:linear-gradient(150deg,#04325af5,#00243ff5);border:1px solid var(--edge);border-radius:6px;box-shadow:inset 0 1px 8px #0a9fff28,0 20px 60px #0008;overflow:hidden}
#board #modal header{display:flex;align-items:center;height:40px;padding:0 15px;background:linear-gradient(100deg,#075286dd,#04325a);border-bottom:1px solid #1389cd88;color:#edf7ff;font-size:calc(14px * var(--text-scale,1))}
#board #modalClose{top:7px;right:10px;width:27px;height:26px;background:#033052;border:1px solid #1389cd88;font-size:20px}
#board #modalContent{inset:51px 15px 13px;scrollbar-width:thin;scrollbar-color:#1389cd #032744}
#board .metric-cards{gap:10px;min-height:74px}
#board .metric-cards article,#board .data-card{background:linear-gradient(150deg,#05416a99,#022b4999);border:1px solid #1389cd77;border-radius:4px;padding:10px 12px}
#board .metric-cards b{color:#08b6f3;font:italic 700 calc(23px * var(--text-scale,1)) Arial,sans-serif}
#board .metric-cards label,#board .data-card{font-size:calc(12px * var(--text-scale,1));color:#aed0e7}
#board .data-card h3{font-size:calc(14px * var(--text-scale,1));color:#edf7ff;border-bottom:1px solid #1389cd44;padding-bottom:8px}
#board .data-card .bar{background:#032744}
#board .chart{background:repeating-linear-gradient(to top,transparent 0,transparent 31px,#93c2df20 32px);border-color:#1389cd77}
#board .media-toolbar{font-size:12px;gap:10px}
#board .media-toolbar button{min-width:65px}
#board .notice{font-size:calc(13px * var(--text-scale,1));line-height:1.8}
#board #toast{left:50%;transform:translateX(-50%);max-width:70%;background:#04325a;border:1px solid var(--edge);border-radius:4px;font-size:13px}
#board #sceneMarkers button{background:#00365bdc;border:1px solid #08b6f3;color:#edf7ff;border-radius:3px;box-shadow:0 0 8px #08b6f344}
#board.modal-model #modal{background:transparent;box-shadow:0 0 20px #08b6f330}
#board.modal-model .media-toolbar{background:#032744f2}
#board.expanded #sceneFrame{visibility:hidden}
#board.expanded #sceneTopBar{left:538px!important;top:94px!important;width:972px!important}
#board.expanded #sceneBottomBar{display:none}
#board.expanded #tourStop{left:548px!important;top:94px!important}
#board.expanded #tourStation{left:760px!important;top:94px!important;width:300px!important}
#board.expanded #tourExpand{left:1090px!important;top:94px!important;width:176px!important}
#board.expanded #tourSound{left:1280px!important;top:94px!important;width:108px!important}
#board.expanded #tourExit{left:1400px!important;top:94px!important;width:105px!important}
#board.expanded #tourStationPrev{left:548px!important;width:140px!important}
#board.expanded #tourStationNext{left:1340px!important;width:165px!important}
@media(max-width:1400px){#board .responsive-toolbar>button{padding:0 7px}#board .task-body{font-size:12px}#board .kpi label{font-size:12px}}
@media(prefers-reduced-motion:reduce){#board *{transition:none!important}}
@media(orientation:portrait){#board{display:block}#portraitNotice{display:none}}