/* Domain widgets. Shell, typography and shared surfaces live in design-system.css. */
.detail-select-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.detail-select-label select { min-height: 28px; padding: 0 24px 0 8px; border: 1px solid rgba(71, 188, 233, 0.26); border-radius: 12px; background: #0a1c2c; color: #d7eaf2; font-size: 12px; }
.integrated-module-stack { display: grid; gap: 10px; }.compact-metrics { margin-bottom: 0; }
.public-toolbar, .diagnostic-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 10px; padding: 8px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; background: rgba(3, 14, 24, 0.42); }.public-toolbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }.public-toolbar select, .public-toolbar input, .public-toolbar button, .diagnostic-toolbar select, .diagnostic-toolbar input, .diagnostic-toolbar button, .pagination-row select, .pagination-row button, .panel-search { min-height: 31px; padding: 0 9px; border: 1px solid rgba(129, 170, 199, 0.16); border-radius: 12px; outline: none; background: #071827; color: #cde2eb; font-size: 12px; }.public-toolbar button, .diagnostic-toolbar button, .pagination-row button { cursor: pointer; }.public-toolbar button:hover, .diagnostic-toolbar button:hover { border-color: rgba(71, 188, 233, 0.38); color: #e7f7fc; }.public-toolbar > span { margin-left: auto; color: var(--subtle); font-size: 12px; }.range-buttons { display: inline-flex; gap: 3px; }.range-buttons button.active { border-color: rgba(71, 188, 233, 0.5); background: rgba(71, 188, 233, 0.13); color: #b9eeff; }.diagnostic-toolbar { margin-bottom: 12px; }.button-link { border: 0; background: transparent; cursor: pointer; }
.table-link { padding: 0; border: 0; background: transparent; color: #8edfff; font-size: 12px; cursor: pointer; }.table-link:hover { color: #d5f6ff; }.pagination-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 9px; color: var(--muted); font-size: 12px; }.pagination-row button:disabled { cursor: not-allowed; opacity: 0.4; }
.record-inspector { margin-top: 10px; overflow: hidden; border: 1px solid rgba(71, 188, 233, 0.18); border-radius: 12px; background: #04111d; }.record-inspector header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); }.record-inspector header span, .record-inspector header strong { display: block; }.record-inspector header span { color: var(--subtle); font-size: 12px; }.record-inspector header strong { margin-top: 3px; color: #d8eaf2; font-size: 12px; }.record-inspector header button { border: 0; background: transparent; color: var(--cyan); font-size: 12px; cursor: pointer; }.record-inspector pre { max-height: 280px; margin: 0; padding: 12px; overflow: auto; color: #8fbdca; font: 12px/1.7 "FuSee Numeric", "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; word-break: break-all; }.record-error { margin: 0; padding: 8px 11px; background: rgba(255, 111, 127, 0.07); color: #ff9aa5; font-size: 12px; }
.public-readout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 9px; padding: 8px 10px; border-left: 2px solid var(--cyan); background: rgba(71, 188, 233, 0.04); }.public-readout > span, .public-readout > small { color: var(--muted); font-size: 12px; }.public-readout > strong { color: var(--green); font-size: 11px; }.subsection-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin: 13px 0 7px; }.subsection-heading strong, .subsection-heading span { display: block; }.subsection-heading strong { color: #dcecf3; font-size: 12px; }.subsection-heading span, .subsection-heading small { margin-top: 3px; color: var(--subtle); font-size: 12px; }
.info-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.info-strip div { display: grid; gap: 3px; min-height: 54px; padding: 8px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; background: rgba(5, 19, 31, 0.46); }
.info-strip span, .info-strip small { color: var(--subtle); font-size: 12px; }.info-strip strong { color: #dcecf3; font-size: 11px; }
.evaluation-rules { display: grid; gap: 6px; margin-top: 10px; }
.evaluation-rules p { margin: 0; padding: 8px; border-left: 2px solid rgba(71, 188, 233, 0.36); background: rgba(71, 188, 233, 0.035); color: var(--muted); font-size: 12px; line-height: 1.55; }
.evaluation-rules strong { color: #d9edf5; }
.panel-link { color: #9ce7ff; font-size: 12px; text-decoration: none; }.panel-link:hover { color: #d5f6ff; }.revenue-card { display: grid; gap: 7px; padding: 13px; border: 1px solid rgba(73, 223, 161, 0.16); border-radius: 12px; background: rgba(73, 223, 161, 0.045); }.revenue-card + .revenue-card { margin-top: 8px; }.revenue-card span, .revenue-card small { color: var(--muted); font-size: 12px; }.revenue-card strong { color: var(--green); font-size: 24px; }.revenue-card.secondary { border-color: rgba(71, 188, 233, 0.16); background: rgba(71, 188, 233, 0.04); }.revenue-card.secondary strong { color: var(--cyan); }

.loss-stack { display: flex; height: 13px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: rgba(0, 0, 0, 0.16); }
.loss-stack i { min-width: 2px; height: 100%; }
.rank-list { display: grid; gap: 4px; margin-top: 10px; }
.rank-list > div { display: grid; grid-template-columns: minmax(130px, 1fr) 75px 50px; gap: 8px; align-items: center; min-height: 29px; padding: 0 6px; border-bottom: 1px solid rgba(129, 170, 199, 0.08); font-size: 12px; }
.rank-name { display: flex; min-width: 0; align-items: center; gap: 7px; color: #c6dce7; }.rank-name i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 2px; }.rank-list strong { color: #e8f5fa; text-align: right; }.rank-list small { color: var(--subtle); text-align: right; }

.task-list { display: grid; gap: 6px; }
.task-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr) 76px; gap: 9px; align-items: center; min-height: 54px; padding: 8px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; background: rgba(5, 19, 31, 0.44); }
.priority { display: inline-grid; min-width: 24px; height: 24px; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 800; }.priority-高 { background: rgba(255, 111, 127, 0.13); color: #ff9aa5; }.priority-中 { background: rgba(255, 173, 92, 0.13); color: #ffc98f; }.priority-低 { background: rgba(71, 188, 233, 0.13); color: #8bd8f5; }
.task-list strong { color: #ddebF2; font-size: 12px; }.task-list p { margin: 4px 0 0; overflow: hidden; color: var(--subtle); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.task-impact { text-align: right; }.task-impact b { display: block; color: var(--green); font-size: 12px; }.task-impact small { display: block; margin-top: 4px; color: var(--subtle); font-size: 12px; }

.stage-rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.stage-rail > div { position: relative; display: grid; gap: 5px; align-content: center; min-height: 54px; padding: 7px 4px; border: 1px solid rgba(129, 170, 199, 0.11); border-radius: 12px; background: rgba(4, 18, 30, 0.46); text-align: center; }
.stage-rail span { color: var(--subtle); font-size: 12px; }.stage-rail strong { color: #9ab3c0; font-size: 12px; }.stage-rail .is-active { border-color: rgba(73, 223, 161, 0.22); background: rgba(73, 223, 161, 0.045); }.stage-rail .is-active span, .stage-rail .is-active strong { color: #8ceabe; }
.pulse-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 10px; }.pulse-grid div { display: grid; gap: 3px; padding: 7px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; }.pulse-grid span, .pulse-grid small { color: var(--subtle); font-size: 12px; }.pulse-grid strong { color: #dceff6; font-size: 11px; }
.progress-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(90px, 2fr) 42px; gap: 8px; align-items: center; min-height: 25px; color: var(--muted); font-size: 12px; }.progress-row strong { color: #cfe4ed; text-align: right; }.progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.07); }.progress-track i { display: block; height: 100%; border-radius: inherit; }.progress-cyan { background: var(--cyan); }.progress-green { background: var(--green); }.progress-orange { background: var(--orange); }.progress-bad { background: var(--red); }
.warning-list { display: grid; gap: 4px; margin-top: 8px; }.warning-list p { margin: 0; padding: 6px 7px; border-left: 2px solid var(--orange); background: rgba(255, 173, 92, 0.04); color: #c6ad94; font-size: 12px; line-height: 1.4; }

.quality-score-large { display: flex; align-items: baseline; gap: 5px; min-height: 74px; }.quality-score-large strong { color: var(--green); font-size: 46px; line-height: 1; }.quality-score-large > span { color: var(--muted); font-size: 13px; }.quality-score-large p { margin: 0 0 5px auto; color: var(--subtle); font-size: 12px; }
.endpoint-list { display: grid; gap: 5px; }.endpoint-list article { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 44px; padding: 7px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; }.endpoint-list strong, .endpoint-list span { display: block; }.endpoint-list strong { color: #d3e7f0; font-size: 12px; }.endpoint-list span { margin-top: 3px; overflow: hidden; color: var(--subtle); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.issue-list, .boundary-notes { display: grid; gap: 7px; }.issue-list article, .boundary-notes p { margin: 0; padding: 9px; border-left: 2px solid var(--orange); background: rgba(255, 173, 92, 0.04); }.issue-list strong { color: #edddd0; font-size: 12px; }.issue-list p, .boundary-notes p { color: #a99381; font-size: 12px; line-height: 1.5; }.boundary-notes strong { color: #e9eef0; }

.table-scroll { max-width: 100%; overflow-x: auto; }.data-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12px; }.data-table th { padding: 8px; border-bottom: 1px solid var(--line); color: var(--subtle); font-weight: 600; text-align: right; white-space: nowrap; }.data-table td { padding: 9px 8px; border-bottom: 1px solid rgba(129, 170, 199, 0.07); color: #abc1cd; text-align: right; white-space: nowrap; }.data-table th:first-child, .data-table td:first-child { text-align: left; }.data-table td strong { color: #e4f1f6; }.data-table td small { color: var(--subtle); }.text-warn { color: var(--orange); }.text-good { color: var(--green); }.empty-cell { padding: 30px !important; color: var(--muted) !important; text-align: center !important; }
.health-list { display: grid; gap: 2px; margin-top: 9px; }
.diagnosis-summary { display: grid; gap: 5px; margin-bottom: 12px; }.diagnosis-summary article { display: grid; grid-template-columns: minmax(0, 1fr) 77px 48px; gap: 8px; align-items: center; min-height: 43px; padding: 7px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; }.diagnosis-summary strong, .diagnosis-summary span { display: block; }.diagnosis-summary strong { color: #dcecf3; font-size: 12px; }.diagnosis-summary span { margin-top: 3px; color: var(--subtle); font-size: 12px; }.diagnosis-summary b { color: var(--orange); font-size: 12px; text-align: right; }
.cloud-window-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.cloud-window { display: grid; min-height: 160px; overflow: hidden; border: 1px solid rgba(103, 172, 204, 0.16); border-radius: 12px; background: #061522; color: inherit; text-decoration: none; }.cloud-window img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #020910; }.cloud-window span { padding: 8px 9px 0; color: #dcecf3; font-size: 12px; }.cloud-window small { padding: 4px 9px 9px; color: var(--muted); font-size: 12px; }.camera-native-layout { display: grid; grid-template-columns: minmax(260px, 520px) minmax(220px, 1fr); gap: 14px; align-items: center; }.camera-native-layout a { display: block; overflow: hidden; border: 1px solid rgba(71, 188, 233, 0.18); border-radius: 12px; background: #020910; }.camera-native-layout img { display: block; width: 100%; max-height: 390px; object-fit: contain; }.camera-native-layout > div { display: grid; gap: 7px; }.camera-native-layout span, .camera-native-layout small, .camera-native-layout p { color: var(--muted); font-size: 12px; line-height: 1.5; }.camera-native-layout strong { color: #dcecf3; font-size: 11px; }.camera-native-layout p { margin: 3px 0; }.camera-native-layout b { color: var(--cyan); font-size: 12px; }

.loss-tree { display: grid; gap: 6px; }.loss-tree > strong { padding: 9px; border: 1px solid rgba(71, 188, 233, 0.2); border-radius: 12px; background: rgba(71, 188, 233, 0.06); color: var(--cyan); font-size: 12px; text-align: center; }.loss-tree > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; padding: 8px; border-left: 2px solid var(--line-strong); background: rgba(8, 25, 39, 0.55); }.loss-tree span { color: #d3e5ed; font-size: 12px; }.loss-tree b { color: var(--muted); font-size: 12px; font-weight: 500; }.contract-code { margin: 0; padding: 14px; overflow: auto; border: 1px solid rgba(73, 223, 161, 0.16); border-radius: 12px; background: rgba(2, 13, 21, 0.62); color: #91e8bc; font: 12px/1.9 "FuSee Numeric", "SFMono-Regular", Consolas, monospace; white-space: pre-wrap; }
.weather-brief { display: grid; gap: 6px; }.weather-brief strong { color: var(--cyan); font-size: 28px; }.weather-brief span { color: #c9dce5; font-size: 12px; }.weather-brief p, .big-note { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.ordered-notes { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: #c9dce5; font-size: 12px; }.ordered-notes li { padding-left: 5px; line-height: 1.5; }
.station-location-card { display: grid; gap: 5px; padding: 10px; border-left: 2px solid var(--green); background: rgba(73, 223, 161, 0.04); }.station-location-card span, .station-location-card small { color: var(--subtle); font-size: 12px; }.station-location-card strong { color: #cfeadf; font-size: 11px; }.location-device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }.location-device-grid article { padding: 8px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; }.location-device-grid article > div { display: flex; align-items: center; justify-content: space-between; }.location-device-grid strong { color: #dcecf3; font-size: 12px; }.location-device-grid span, .location-device-grid small { display: block; margin-top: 5px; color: var(--subtle); font-size: 12px; }.weather-daily-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }.weather-daily-grid article { display: grid; gap: 6px; min-height: 105px; align-content: center; padding: 9px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; background: rgba(4, 18, 30, 0.44); text-align: center; }.weather-daily-grid span, .weather-daily-grid small { color: var(--subtle); font-size: 12px; }.weather-daily-grid strong { color: #dcecf3; font-size: 12px; }.weather-daily-grid b { color: var(--orange); font-size: 12px; }.typhoon-storm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.typhoon-storm-grid > article { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(7, 25, 40, 0.72); }.typhoon-storm-grid header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.typhoon-storm-grid header strong, .typhoon-storm-grid header span { display: block; }.typhoon-storm-grid header strong { color: #dcecf3; font-size: 12px; }.typhoon-storm-grid header span { margin-top: 3px; color: var(--subtle); font-size: 12px; }.typhoon-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 9px 0; }.typhoon-values span { display: grid; gap: 3px; padding: 6px; border: 1px solid rgba(129, 170, 199, 0.08); border-radius: 12px; color: var(--subtle); font-size: 12px; }.typhoon-values b { color: #cde4ed; font-size: 12px; }.outlook-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.outlook-grid article { display: grid; gap: 6px; padding: 11px; border: 1px solid rgba(156, 140, 255, 0.16); border-radius: 12px; background: rgba(156, 140, 255, 0.04); }.outlook-grid span { color: #b9afff; font-size: 12px; }.outlook-grid strong { color: #e3e0ff; font-size: 17px; }.outlook-grid small, .outlook-grid p { margin: 0; color: var(--subtle); font-size: 12px; line-height: 1.45; }.panel-search { width: 150px; }
.tariff-editor { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.tariff-editor input { width: 76px; min-height: 28px; padding: 0 6px; border: 1px solid rgba(71, 188, 233, 0.26); border-radius: 12px; outline: none; background: #071827; color: #cde2eb; font-size: 12px; }
.tariff-editor b { color: #b8ccd5; font-size: 12px; font-weight: 500; }
.camera-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.camera-gallery a { display: grid; min-width: 0; overflow: hidden; border: 1px solid rgba(71, 188, 233, 0.12); border-radius: 12px; background: #020910; color: var(--subtle); font-size: 12px; text-decoration: none; }
.camera-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.camera-gallery span { overflow: hidden; padding: 5px; text-overflow: ellipsis; white-space: nowrap; }
.alarm-explorer-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.7fr); gap: 10px; }.alarm-detail-card { min-width: 0; padding: 12px; border: 1px solid rgba(255, 173, 92, 0.16); border-radius: 12px; background: rgba(255, 173, 92, 0.035); }.alarm-detail-card header { display: flex; align-items: center; justify-content: space-between; }.alarm-detail-card header > span { color: var(--muted); font-size: 12px; }.alarm-detail-card h3 { margin: 12px 0 4px; color: #edf4f7; font-size: 13px; }.alarm-detail-card > small { color: var(--subtle); font-size: 12px; }.alarm-detail-card > div { margin-top: 13px; }.alarm-detail-card b { color: var(--orange); font-size: 12px; }.alarm-detail-card p { margin: 5px 0 0; color: #b9a58f; font-size: 12px; line-height: 1.6; }.alarm-detail-card footer { margin-top: 13px; padding-top: 8px; border-top: 1px solid rgba(255, 173, 92, 0.1); color: var(--subtle); font-size: 12px; }
.report-breakdown { display: grid; gap: 7px; }.report-breakdown span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; border: 1px solid rgba(129, 170, 199, 0.1); border-radius: 12px; color: var(--muted); font-size: 12px; }.report-breakdown strong { color: #dcecf3; }.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.settings-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }.settings-grid select { min-height: 37px; padding: 0 9px; border: 1px solid var(--line); border-radius: 12px; background: #06121f; color: var(--text); }.settings-note { margin: 10px 0 0; color: var(--subtle); font-size: 12px; }.toggle-list { display: grid; gap: 5px; }.toggle-list label { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-bottom: 1px solid rgba(129, 170, 199, 0.08); color: #c6dce7; font-size: 12px; }.toggle-list input { accent-color: var(--cyan); }.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }.admin-form button { min-height: 38px; border: 1px solid rgba(71, 188, 233, 0.28); border-radius: 12px; background: rgba(71, 188, 233, 0.1); color: #c8f0ff; cursor: pointer; }.admin-form p { grid-column: 1 / -1; margin: 0; color: var(--orange); font-size: 12px; }.rollback-link { display: block; margin-top: 8px; color: var(--subtle); font-size: 12px; text-decoration: none; }.rollback-link:hover { color: var(--cyan); }

.decision-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }.decision-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, rgba(14, 34, 53, 0.94), rgba(8, 24, 39, 0.92)); }.decision-card header { display: flex; align-items: center; justify-content: space-between; }.decision-card h2 { min-height: 32px; margin: 12px 0 0; color: #e2eff5; font-size: 11px; line-height: 1.45; }.decision-card > p { min-height: 43px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }.decision-impact { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px; border-radius: 12px; background: rgba(73, 223, 161, 0.05); }.decision-impact strong { color: var(--green); font-size: 12px; }.decision-impact span { color: var(--muted); font-size: 12px; }.decision-action { display: grid; grid-template-columns: 34px 1fr; gap: 6px; margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.45; }.decision-action b { color: var(--cyan); }.decision-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 11px; }.decision-buttons button { min-height: 27px; border: 1px solid rgba(129, 170, 199, 0.15); border-radius: 12px; background: rgba(6, 22, 35, 0.6); color: var(--muted); font-size: 12px; cursor: pointer; }.decision-buttons button.active { border-color: rgba(73, 223, 161, 0.3); background: rgba(73, 223, 161, 0.08); color: #8bebbb; }.decision-card > small { display: block; margin-top: 9px; color: var(--subtle); font-size: 12px; line-height: 1.5; }
.decision-card .priority { padding: 0 6px; white-space: nowrap; }
.decision-score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.decision-score-grid div { display: grid; gap: 3px; padding: 6px; border: 1px solid rgba(129, 170, 199, 0.09); border-radius: 12px; background: rgba(4, 17, 29, 0.42); }
.decision-score-grid span { color: var(--subtle); font-size: 12px; }.decision-score-grid strong { color: #d8e8ef; font-size: 12px; }

.workspace-loading { display: grid; min-height: 70vh; place-content: center; justify-items: center; color: var(--muted); text-align: center; }.workspace-loading span { width: 34px; height: 3px; overflow: hidden; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: loading 1s linear infinite; }.workspace-loading strong { margin-top: 12px; color: #dbeaf1; font-size: 12px; }.workspace-loading p { margin: 6px 0 0; font-size: 12px; }@keyframes loading { from { transform: translateX(-12px); opacity: 0.4; } to { transform: translateX(12px); opacity: 1; } }

/* Original D-DIN files (SIL OFL 1.1); only numeric glyphs participate in fallback. */
@font-face { font-family: "FuSee Numeric"; src: url("/fonts/D-DIN-41b210fad6e9.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; unicode-range: U+0024-0025, U+002B-003A, U+00B0-00B1, U+00D7, U+20AC, U+2212; }
@font-face { font-family: "FuSee Numeric"; src: url("/fonts/D-DIN-Bold-9007288706aa.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; unicode-range: U+0024-0025, U+002B-003A, U+00B0-00B1, U+00D7, U+20AC, U+2212; }
/* Original DSEG7 Classic Italic (SIL OFL 1.1). Numeric glyphs only; letters keep the UI font. */
@font-face { font-family: "FuSee Display Digits"; src: url("/fonts/DSEG7Classic-Italic-383af6b9f743.woff2") format("woff2"); font-style: normal; font-weight: 100 599; font-display: swap; unicode-range: U+002D-002E, U+0030-003A; }
@font-face { font-family: "FuSee Display Digits"; src: url("/fonts/DSEG7Classic-BoldItalic-2ecdad41a391.woff2") format("woff2"); font-style: normal; font-weight: 600 900; font-display: swap; unicode-range: U+002D-002E, U+0030-003A; }
/* FuSee AI — Liquid Observatory. One visual system for every React center. */
:root {
  --bg: #090f19; --bg-deep: #070c14; --panel: rgba(30, 40, 62, .62); --panel-soft: rgba(31, 44, 64, .5);
  --line: rgba(201, 218, 255, .12); --line-strong: rgba(130, 202, 255, .38);
  --text: #eef2ff; --muted: #a5b2cd; --subtle: #92a2bc;
  --cyan: #85d8f4; --blue: #96b1ff; --green: #71e6c2; --orange: #ffc18a; --red: #ff8fa5; --violet: #b5a4ff;
  --header-height: 76px; --sidebar-width: 204px; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; background: var(--bg-deep); }
body { color: var(--text); font: 13px/1.55 "FuSee Numeric", -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif; font-variant-numeric: lining-nums tabular-nums; -webkit-font-smoothing: antialiased; overflow: hidden; }
button, input, select { font: inherit; color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--cyan); }
button:focus-visible, a:focus-visible, svg:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
::selection { color: white; background: #5d629d; }
.platform-shell { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: var(--header-height) minmax(0, 1fr); gap: var(--shell-gap); --shell-gap:14px; padding: 14px; height: 100dvh; overflow: clip; background:linear-gradient(120deg,#0b1a28 0%,#080f1b 48%,#0b1423 100%); }
.ambient-light { position: absolute; inset: -15%; z-index: -1; pointer-events: none; background: linear-gradient(125deg, transparent 9%, rgba(58, 131, 175, .2) 18%, transparent 34%, rgba(97, 79, 159, .17) 66%, transparent 82%); filter: blur(65px); }
.glass-surface { position:relative; border:1px solid #a6d5ec20; border-radius:20px; background:linear-gradient(135deg,#1a2b3a96,#101b2de0 70%); box-shadow:inset 0 1px 0 #dbf6ff0b,0 12px 35px #00000016; backdrop-filter:blur(12px) saturate(120%); -webkit-backdrop-filter:blur(12px) saturate(120%); }
.glass-surface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .035), transparent 40%, rgba(172, 163, 255, .025)); }
/* simple-liquid-glass samples the actual workspace behind this fixed grid overlay.
   Keep the header ancestors free of blur/opacity: Chromium otherwise isolates the backdrop. */
.liquid-glass-header { --glass-light-x:58%; position:relative; grid-column:1 / -1; grid-row:1; min-width:0; z-index:30; border-radius:22px; box-shadow:0 8px 24px #03081630; }
.global-header { position:relative; z-index:3; height:100%; display:flex; align-items:center; padding:0 24px 0 18px; gap:22px; }
.header-liquid-lens { pointer-events:none; }
.liquid-glass-header::after { content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none; z-index:2; background:linear-gradient(105deg, transparent calc(var(--glass-light-x) - 18%), #e5f6ff08 calc(var(--glass-light-x) - 7%), #f4fdff19 var(--glass-light-x), transparent calc(var(--glass-light-x) + 14%)); opacity:.45; transition:opacity .4s ease; }
.liquid-glass-header:hover::after, .liquid-glass-header:focus-within::after { opacity:1; }
.liquid-glass-header .refresh-button, .liquid-glass-header .account-trigger { background:linear-gradient(135deg,#f2faff18,#bfd7ee08); border-color:#dbedff35; box-shadow:inset 0 1px 0 #f1faff2b; }
.liquid-glass-header .refresh-button:hover, .liquid-glass-header .account-trigger:hover { background:#e0f1ff21; border-color:#d9efff54; }
@media (prefers-reduced-motion:reduce) { .liquid-glass-header::after { transition:none; } }

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.3px; white-space: nowrap; }
.brand b { color: #c4d9ff; font-weight: 500; margin-left: 4px; }
.header-context { display: flex; align-items: center; gap: 14px; padding-left: 22px; border-left: 1px solid var(--line); }
.header-context span { color: var(--subtle); font-size: 10px; letter-spacing: .14em; }
.header-context strong { font-size: 13px; font-weight: 500; white-space: nowrap; }
.header-status { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.header-time { color: var(--subtle); font-size: 12px; font-variant-numeric: tabular-nums; }
.refresh-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 20px; background: rgba(220, 231, 255, .06); color: #d2dcf2; font-size: 12px; }
.refresh-button:hover { background: rgba(220, 231, 255, .12); }
.account-trigger { display: grid; align-content: center; border: 1px solid rgba(206, 217, 255, .16); border-radius: 20px; min-height: 38px; padding: 3px 14px; background: rgba(215, 222, 255, .06); text-align: left; }
.account-trigger span { display: none; }.account-trigger strong { color: #d9e3ff; font-size: 12px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mobile-menu { display: none; border: 0; background: transparent; padding: 8px; }
.sidebar { grid-column:1; grid-row:2; display:flex; flex-direction:column; min-height:0; padding:14px 10px 12px; z-index:25; background:linear-gradient(180deg,#11253770,#0b162bb0); }
.nav-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; margin: 0 4px 12px; border: 1px solid rgba(193, 210, 255, .09); border-radius: 12px; color: var(--subtle); background: rgba(10, 18, 33, .32); }
.nav-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; font-size: 12px; }
.nav-search input::placeholder { color: #99a6bd; }.nav-search button { padding: 0; border: 0; background: transparent; }
.sidebar nav { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: #344861 transparent; padding: 2px 4px 10px; }
.nav-button { position: relative; display: flex; align-items: center; width: 100%; gap: 12px; min-height: 41px; padding: 7px 11px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #a6b4ce; text-align: left; transition: background .18s ease, color .18s ease; }
.nav-button:hover { background: rgba(204, 219, 255, .06); color: #f2f5ff; }.nav-button.active { background:linear-gradient(100deg,#42dbc520,#58a1ec0b); border-color:#67dcd638; color:#d8fff9; box-shadow:inset 3px 0 0 #78f4d8,inset 0 1px 0 #e7f1ff08; }
.nav-icon { display: inline-flex; color: #92a7c8; }.active .nav-icon { color: #a8d9ff; }.nav-copy { flex: 1; min-width: 0; }.nav-copy strong { font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav-active-dot { width: 5px; height: 5px; border-radius: 50%; background: #acdafa; box-shadow: 0 0 9px #acdafa60; }
.sidebar-module-group-label { display:flex; align-items:center; gap:8px; padding:18px 12px 7px; color:#7997ab; font-size:10px; letter-spacing:.06em; }
.sidebar-module-group-label > span { color:#a3d5df; font:10px/1 ui-monospace,monospace; opacity:.8; }
.sidebar-footer { padding: 12px 8px 0; margin-top: 5px; border-top: 1px solid var(--line); }
.sidebar-footer > span { display: flex; align-items: center; gap: 6px; padding: 12px 3px 0; color: #8698b7; font-size: 10px; }.sidebar-footer i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.sidebar-footer small { margin-left: auto; font-size: 10px; }
.local-deployment-link { display: block; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(171, 207, 244, .12); color: #b6d4eb; background: rgba(108, 162, 205, .06); text-align: center; text-decoration: none; font-size: 11px; }.local-deployment-link:hover { background: rgba(108, 162, 205, .15); }
.nav-empty { padding: 12px; color: var(--muted); font-size: 12px; }
.workspace { grid-column:2; grid-row:1 / -1; position: relative; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: calc(var(--header-height) + var(--shell-gap)) 14px 18px; scroll-padding-top:calc(var(--header-height) + var(--shell-gap)); scrollbar-width: thin; scrollbar-color: #41506a transparent; scroll-behavior: smooth; }
.center-page { width: min(1660px, 100%); margin: 0 auto; animation: page-in .24s ease-out; }
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.plant-command-strip { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:34px; padding:1px 2px; margin:1px auto 12px; max-width:1660px; font-size:11px; color:var(--subtle); }
.plant-strip-primary { display: flex; align-items: center; gap: 10px; min-width: 0; }.plant-strip-primary strong { color: #c8d4e9; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.plant-strip-primary > span:last-child { border: 1px solid var(--line); padding: 1px 8px; border-radius: 99px; white-space: nowrap; font-size: 10px; }
.plant-indicator { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px #71e6c250; flex-shrink: 0; }
.plant-strip-summary { display: flex; gap: 18px; white-space: nowrap; }.plant-strip-summary b { margin-left: 6px; color: #c9d6ec; font-weight: 500; font-variant-numeric: tabular-nums; }
.section-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 26px; padding: 9px 2px 3px; }
.eyebrow { display:block; color:#79b9cd; font-size:10px; letter-spacing:.22em; font-weight:500; }
.section-intro h1 { font-size:clamp(30px,2.7vw,44px); font-weight:600; line-height:1.25; letter-spacing:-.8px; margin:10px 0 0; color:#eefaff; }
.section-intro p { max-width: 900px; color: var(--muted); font-size: 12px; line-height: 1.8; margin: 11px 0 0; }
.section-meta { display: grid; justify-items: end; flex-shrink: 0; gap: 8px; color: #8f9fba; font-size: 11px; }
.panel { min-width: 0; padding: 22px; margin-bottom: 0; }
.center-page > .panel { margin-bottom: 18px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-heading h2 { margin:0; font-size:17px; font-weight:550; letter-spacing:-.2px; color:#e8f4fe; }
.panel-heading p { color: var(--subtle); font-size: 11px; margin: 5px 0 0; line-height: 1.65; }
.panel-action { flex: 0 0 auto; font-size: 11px; color: var(--muted); }.panel-action .panel-link { font-size: 11px; }
.metric-grid, .workspace-grid, .feature-grid, .detail-curve-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.metric-grid.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }.metric-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }.metric-grid.four, .feature-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { min-width: 0; overflow: hidden; padding: 18px 20px; min-height: 137px; --metric-accent: var(--cyan); }
.metric-green { --metric-accent: var(--green); }.metric-orange { --metric-accent: var(--orange); }.metric-violet { --metric-accent: var(--violet); }
.metric-card::after { content: ""; position: absolute; bottom: 0; right: 0; left: 0; height: 1px; opacity: .28; background: linear-gradient(90deg, transparent, var(--metric-accent), transparent); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: #b2bfd6; font-size: 12px; }
.metric-value { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-variant-numeric: tabular-nums; }.metric-value strong { color: var(--metric-accent); font-size: clamp(24px, 2.3vw, 34px); font-weight: 500; letter-spacing: -1px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.metric-value span { color: #9baccc; font-size: 12px; }.metric-card p { margin: 10px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-pill { display: inline-flex; align-items: center; padding: 2px 8px; min-height: 20px; border: 1px solid rgba(208, 221, 250, .12); background: rgba(193, 209, 240, .04); color: #a4b2ca; font-size: 10px; line-height: 1.5; border-radius: 99px; white-space: nowrap; }
.source-live, .source-real { color: #98ddc6; border-color: #80dfbd25; background: #65caad0a; }.source-algorithm { color: #b3caff; border-color: #a7b9ed25; background: #8fa0f40b; }.source-mixed, .source-derived, .source-demo { color: #b8aee4; }.source-config, .source-planned { color: #d7b893; }
.status-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; white-space: nowrap; color: var(--muted); }.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }.status-ok { color: #8edbbf; }.status-warn { color: #dfb68b; }.status-bad { color: var(--red); }
.two-columns, .detail-curve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview-main { grid-template-columns: minmax(0, 1.9fr) minmax(275px, 1fr); }.overview-secondary { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr); }.quality-hero, .inverter-main, .array-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.module-tabs { display:flex; flex-wrap:wrap; gap:6px; border:1px solid #a0d9f121; border-radius:16px; padding:6px; background:#07121d70; margin:0 0 22px; }
.module-tabs button { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; padding: 11px 16px; min-height: 40px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: #a6b4cc; }
.module-tabs button > span { color: #8193b6; font-size: 10px; }.module-tabs strong { font-weight: 500; font-size: 12px; }.module-tabs small { font-size: 10px; color: #8f9fbf; }.module-tabs button.active { color: #ecf3ff; border-color: rgba(214, 229, 255, .16); background: linear-gradient(120deg, rgba(134, 171, 218, .2), rgba(141, 128, 208, .15)); box-shadow: inset 0 1px 0 #ffffff15, 0 3px 12px #070a141a; }.module-tabs button.active > span { color: #b9d7ff; }.module-tabs button:hover { color: white; background-color: #b0c9ff0b; }
.integrated-module-stack { display: grid; gap: 18px; }.integrated-module-stack > .metric-grid, .integrated-module-stack > .module-tabs, .integrated-module-stack > .detail-curve-grid { margin-bottom: 0; }
.detail-chart-shell { position: relative; min-width: 0; }
.chart-context { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; color: var(--subtle); font-size: 10px; }.chart-context small { margin-left: auto; font-size: 10px; color: #90a1c0; }
.detail-chart-shell svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; cursor: crosshair; border-radius: 4px; }
.detail-chart-shell svg line { stroke: rgba(208, 225, 255, .08); stroke-width: 1; stroke-dasharray: 3 5; }
.detail-chart-shell svg text { fill: #99aac6; font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums; }
.chart-line { fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 3px #74bdff22); }.chart-area, .chart-band { stroke: none; }
.detail-chart-cursor line { stroke: #d4e3ff55 !important; stroke-dasharray: 3 3; }.detail-chart-cursor circle { stroke: #182337; stroke-width: 2.5; }
.detail-chart-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 14px 0 0; }
.detail-chart-legend button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 3px 0; font-size: 11px; color: #c0cee4; }.detail-chart-legend button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }.detail-chart-legend i { width: 14px; height: 3px; border-radius: 9px; }.detail-chart-legend small { font-size: 10px; color: #8e9ebc; }
.detail-chart-tooltip { position: absolute; top: 54px; z-index: 5; display: grid; max-width: calc(100% - 12px); min-width: 170px; gap: 8px; border: 1px solid rgba(217, 233, 255, .24); border-radius: 16px; background: rgba(30, 40, 62, .94); backdrop-filter: blur(16px); padding: 14px; box-shadow: 0 18px 45px #00000045, inset 0 1px 0 #ffffff10; pointer-events: none; font-size: 12px; }
.detail-chart-tooltip.align-right { transform: translateX(calc(-100% - 12px)); }.detail-chart-tooltip.align-left { transform: translateX(12px); }
.detail-chart-tooltip > strong { font-size: 12px; font-weight: 500; color: #e1eaff; padding-bottom: 3px; }.detail-chart-tooltip span { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #b0bfd9; }.detail-chart-tooltip i { width: 6px; height: 6px; border-radius: 50%; }.detail-chart-tooltip b { font-weight: 500; color: #eef3ff; font-variant-numeric: tabular-nums; }
.detail-chart-empty { display: grid; place-items: center; min-height: 280px; border: 1px dashed var(--line); border-radius: 15px; padding: 24px; font-size: 12px; text-align: center; color: var(--subtle); background: #ffffff02; }
.forecast-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.forecast-main-chart { grid-column: 1 / -1; }
.forecast-daily-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.forecast-daily-grid article { min-width: 0; padding: 20px; border-radius: 20px; border: 1px solid rgba(203, 217, 255, .12); background: linear-gradient(120deg, #617fa315, #544b7e12); box-shadow: inset 0 1px 0 #ffffff0a; }
.forecast-daily-grid header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }.forecast-daily-grid header > span { font-size: 12px; color: #c8d4ec; }.forecast-daily-grid article > strong { display: block; margin-top: 13px; color: #c1ccff; font-size: 25px; font-weight: 500; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }.forecast-daily-grid strong small { font-size: 12px; color: #9caccc; }.forecast-daily-grid p { font-size: 11px; color: var(--subtle); margin: 7px 0 12px; }.forecast-daily-grid footer { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: #a4b4d0; }.forecast-boundary { font-size: 11px; color: var(--subtle); margin: 20px 2px; }
.diagnostic-toolbar, .public-toolbar { border: 1px solid var(--line); background: #111a2d60; padding: 10px 12px; border-radius: 16px; gap: 8px; }
.public-toolbar button, .diagnostic-toolbar button, .public-toolbar select, .public-toolbar input, .diagnostic-toolbar input, .pagination-row button, .detail-select-label select { border-radius: 10px; min-height: 32px; background: #2c3a541f; border-color: var(--line); font-size: 11px; }.range-buttons button.active { background: #adc6ff18; border-color: #afcaff40; color: #c3ddff; }.diagnostic-toolbar input { max-width: 192px; }.range-buttons { gap: 4px; }
.data-table { font-size: 12px; min-width: 650px; }.data-table th { color: #93a5c3; padding: 13px 12px; font-size: 11px; font-weight: 500; background: #b8cfff03; }.data-table td { padding: 15px 12px; color: #bdcce4; border-color: #adc6ff0b; }.data-table tr:hover { background: #b2ccff05; }.data-table td strong { color: #e1eaff; font-weight: 500; }.data-table td small { font-size: 11px; }.table-link { font-size: 12px; }.table-scroll { scrollbar-width: thin; scrollbar-color: #3b4d6e transparent; }
.info-strip { gap: 10px; }.info-strip div { padding: 12px; border-radius: 14px; background: #131f3640; }.info-strip span, .info-strip small { font-size: 11px; }.info-strip strong { font-size: 14px; font-weight: 500; }
.feature-card, .decision-card { border-radius: 18px; background: linear-gradient(125deg, #526b8a17, #1c273c80); padding: 18px; }.feature-card h3 { font-size: 14px; }.feature-card p { font-size: 12px; }.feature-metric { font-size: 20px; }.capability-list article { padding: 14px; border-radius: 14px; background: #19253c35; }.capability-list strong { font-size: 13px; font-weight: 500; }.capability-list div > span { font-size: 12px; }
.loss-stack { height: 10px; border: 0; border-radius: 99px; background: #8aace30d; gap: 3px; }.loss-stack i { min-width: 0; border-radius: 99px; }.loss-total { display: grid; gap: 8px; margin: 4px 0 22px; }.loss-total span { font-size: 11px; color: var(--subtle); }.loss-total strong { font-size: 29px; font-weight: 500; color: #e1eaff; letter-spacing: -.5px; }.loss-total small { font-size: 12px; font-weight: 400; color: var(--subtle); }.rank-list { margin-top: 16px; gap: 0; }.rank-list > div { min-height: 38px; grid-template-columns: minmax(0, 1fr) auto 28px; padding: 0; font-size: 12px; }.rank-list strong { font-weight: 500; }.rank-list small { font-size: 10px; }
.device-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }.device-card { display: grid; gap: 11px; min-width: 0; border: 1px solid #bed4ff0f; border-radius: 17px; background: linear-gradient(140deg, #769aaf0e, #242e4d36); color: inherit; padding: 15px; text-decoration: none; transition: background .2s, border-color .2s; }.device-card:hover { background: #a3c8ff0a; border-color: #bed4ff30; }.device-card > div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }.device-symbol { display: inline-flex; color: #a0b8e1; }.device-card > strong { font-size: 12px; font-weight: 500; color: #b9c9e4; }.device-power { font-size: 26px; letter-spacing: -.6px; color: #d8e7ff; font-variant-numeric: tabular-nums; }.device-power small { font-size: 11px; color: #8a9fc1; }.device-card > small { font-size: 10px; color: var(--subtle); }
.quick-launch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }.quick-launch { display: flex; align-items: center; gap: 13px; padding: 18px; border-radius: 19px; text-decoration: none; color: #d3e2fa; transition: border-color .18s, transform .18s; }.quick-launch:hover { border-color: #c6d8ff44; transform: translateY(-2px); }.quick-launch > div { min-width: 0; display: grid; gap: 4px; flex: 1; }.quick-launch strong { font-size: 13px; font-weight: 500; }.quick-launch small { font-size: 10px; color: var(--subtle); white-space: nowrap; }.launch-icon { width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; border-radius: 14px; color: #9ad6ef; border: 1px solid #a2d8f028; background: linear-gradient(140deg, #759ac332, #34587808); box-shadow: inset 0 1px 0 #ffffff0a; }.launch-violet .launch-icon { color: #c1b2ff; background: #a593ed16; }.launch-green .launch-icon { color: #95e8cc; background: #80d9b515; }.launch-orange .launch-icon { color: #f7ca9f; background: #d8ad8215; }.quick-launch > svg { opacity: .6; }
.task-list article { min-height: 72px; padding: 12px; border-radius: 14px; grid-template-columns: 28px minmax(0, 1fr) 98px; }.task-list strong { font-size: 12px; font-weight: 500; }.task-list p, .task-impact small { font-size: 11px; }.task-impact b { font-size: 12px; font-weight: 500; }.priority { border-radius: 9px; font-size: 11px; }.revenue-card { padding: 16px; border-radius: 16px; border-color: #81ccbb20; background: #8dccae05; }.revenue-card strong { font-size: 32px; font-weight: 500; color: #96e2c7; }.revenue-card span, .revenue-card small { font-size: 11px; }.tariff-editor { flex-wrap: wrap; font-size: 10px; }.tariff-editor input { width: 64px; border-radius: 10px; font-size: 11px; background: #1a283c; }.tariff-editor b { font-size: 10px; }
.warning-list p, .boundary-notes p { border-radius: 0 10px 10px 0; font-size: 12px; padding: 10px; }.progress-row { font-size: 12px; grid-template-columns: minmax(75px, 1fr) minmax(50px, 1.5fr) 42px; gap: 6px; }.progress-track { height: 5px; }.quality-score-large strong { font-size: 56px; font-weight: 500; }.endpoint-list article { padding: 11px; }.endpoint-list strong { font-size: 12px; }
.workspace-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 28px 2px 6px; max-width: 1660px; margin: auto; font-size: 10px; color: #8292af; }
.workspace-loading { display: grid; min-height: 60vh; place-content: center; justify-items: center; gap: 12px; color: var(--muted); }.workspace-loading span { height: 3px; width: 45px; border-radius: 9px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: pulse 1.4s ease-in-out infinite; }.workspace-loading strong { font-size: 16px; }.workspace-loading p { font-size: 12px; margin: 0; }@keyframes pulse { 50% { opacity: .3; } }
.account-dialog-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: #070b16a6; backdrop-filter: blur(12px); }
.account-dialog { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid #c2d4ff30; border-radius: 25px; background: linear-gradient(135deg, #27334a, #172236); box-shadow: 0 35px 100px #00000070, inset 0 1px 0 #ffffff18; }
.account-dialog > header { display: flex; justify-content: space-between; gap: 20px; padding: 25px; border-bottom: 1px solid var(--line); background: transparent; }.account-dialog header span { color: #aac5ec; font-size: 10px; letter-spacing: .15em; }.account-dialog h2 { font-size: 23px; font-weight: 500; margin: 8px 0 0; }.account-dialog header p { font-size: 12px; line-height: 1.7; color: var(--muted); margin: 8px 0 0; }.account-dialog header > button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: #ffffff05; }.account-form { display: grid; gap: 18px; padding: 25px; }.account-form label { display: grid; gap: 7px; font-size: 12px; color: #bac9e1; }.account-form input, .account-form select, .admin-form input, .admin-form select { min-height: 43px; padding: 0 12px; border: 1px solid #becfff22; border-radius: 12px; background: #111b2d90; outline: none; color: var(--text); }.captcha-row { display: grid; grid-template-columns: minmax(0, 1fr) 105px; gap: 10px; }.captcha-code { border: 1px solid #b3c9f733; border-radius: 12px; background: linear-gradient(130deg, #6c9bca20, #8072c320); color: #dbe7ff; font-weight: 600; letter-spacing: .2em; }.remember-row { display: flex !important; align-items: center; }.remember-row input { min-height: auto; accent-color: #9fc7ef; }.remember-row button { margin-left: auto; color: #a8cdef; border: 0; background: transparent; font-size: 12px; }.account-error { font-size: 12px; color: #ffabb8; margin: 0; }.account-submit, .account-session button { min-height: 43px; border-radius: 99px; border: 1px solid #c1ddff42; background: linear-gradient(120deg, #466d92, #53557e); color: white; font-size: 13px; }.account-session { display: grid; gap: 13px; padding: 28px; }.account-session strong { font-size: 22px; font-weight: 500; color: var(--green); }.account-session span, .account-session small { color: var(--muted); font-size: 12px; }.form-message { color: var(--green); font-size: 12px; }
.sidebar-backdrop { display: none; }
@supports not (backdrop-filter: blur(1px)) { .glass-surface, .global-header, .sidebar { background: #192337; }.detail-chart-tooltip { background: #202d43; } }
@media (min-width: 1700px) { .platform-shell { --sidebar-width: 236px; --shell-gap:18px; padding: 18px; }.workspace { padding: calc(var(--header-height) + var(--shell-gap)) 24px 20px; }.nav-button { min-height: 44px; } }
@media (max-width: 1350px) {
  .header-context span, .header-time { display: none; }.header-context { padding-left: 15px; }.global-header { gap: 16px; padding-right: 18px; }.header-status { gap: 12px; }
  .metric-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }.metric-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }.overview-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.overview-secondary > :last-child { grid-column: 1 / -1; }.quick-launch { padding: 15px 12px; gap: 10px; }.launch-icon { width: 35px; height: 35px; }.quick-launch > svg { display: none; }.module-tabs small { display: none; }.section-meta { font-size: 10px; }
}
@media (max-width: 1080px) {
  .platform-shell { --sidebar-width: 190px; padding: 10px; --shell-gap:10px; }.workspace { padding: calc(var(--header-height) + var(--shell-gap)) 6px 12px; }.nav-button { padding: 7px 9px; gap: 9px; }.nav-copy strong { font-size: 12px; }.panel { padding: 18px; }.header-context { display: none; }.metric-card { padding: 17px 15px; }.metric-value strong { font-size: 27px; }.metric-label { font-size: 11px; }.overview-main { grid-template-columns: 1fr; }.overview-secondary, .quality-hero, .inverter-main, .array-main, .three-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }.quick-launch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.section-intro { gap: 16px; }.section-meta { display: none; }.forecast-daily-grid footer span:last-child { display: none; }.forecast-daily-grid article { padding: 16px; }.feature-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }.weather-daily-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.alarm-explorer-layout, .lifetime-layout, .camera-native-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .platform-shell { grid-template-columns: minmax(0, 1fr); --header-height: 66px; }.workspace { grid-column:1; }.global-header { padding: 0 14px; gap: 12px; }.mobile-menu { display: inline-flex; align-items: center; }.brand strong { font-size: 15px; }.brand img { width: 33px; height: 33px; }.header-status { gap: 8px; }.header-status > .status-dot { display: none; }
  .sidebar { position: fixed; top: 87px; left: 10px; bottom: 10px; width: 235px; background: #1b293ee8; backdrop-filter: blur(28px); transform: translateX(-270px); visibility: hidden; transition: transform .2s, visibility .2s; z-index: 40; }.sidebar.is-open { transform: none; visibility: visible; }.nav-button { min-height: 43px; }.sidebar-backdrop { display: block; position: fixed; z-index: 35; inset: 86px 0 0; border: 0; background: #070a1460; backdrop-filter: blur(3px); }
  .metric-grid.four, .metric-grid.six, .metric-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }.plant-command-strip { margin-bottom: 14px; }.plant-strip-summary span:first-child { display: none; }.section-intro h1 { font-size: 29px; }.section-intro p { font-size: 12px; }.three-columns, .two-columns, .detail-curve-grid, .quality-hero, .inverter-main, .array-main { grid-template-columns: 1fr; }.forecast-main-chart { grid-column: auto; }.workspace-grid { gap: 14px; }.info-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feature-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }.device-card-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }.forecast-daily-grid { gap: 10px; }.forecast-daily-grid article > strong { font-size: 22px; }.forecast-daily-grid .source-pill { display: none; }
}
.overview-page .overview-energy-rail .metric-card { container-type: inline-size; }
.overview-page .overview-energy-rail .metric-value { flex-wrap: wrap; gap: 4px 8px; }
/* DSEG's slanted outlines extend beyond the advance width and short line box. */
.overview-page .overview-energy-rail .metric-value strong {
  font-size: clamp(18px, 14cqi, 34px);
  line-height: 1.35;
  padding: .08em .12em;
  flex-shrink: 0;
  overflow: visible;
  text-overflow: clip;
}
.overview-page .overview-energy-rail .metric-value > span { flex-shrink: 0; }

@media (max-width: 560px) {
  .platform-shell { padding: 8px; --shell-gap:8px; --header-height: 62px; }.global-header { padding: 0 8px; gap: 5px; border-radius: 18px; }.brand { gap: 6px; }.brand img { width: 27px; height: 27px; }.brand strong { font-size: 12px; }.brand b { margin-left: 2px; }.refresh-button { padding: 0 9px; }.refresh-button span { display: none; }.account-trigger { padding: 3px 10px; }.account-trigger strong { font-size: 11px; }.header-status { gap: 6px; }.workspace { padding: calc(var(--header-height) + var(--shell-gap)) 3px 8px; }.plant-command-strip { font-size: 10px; min-height: 31px; }.plant-strip-primary { gap: 7px; }.plant-strip-primary > span:last-child { display: none; }.plant-strip-summary { gap: 10px; }.plant-strip-summary span:last-child { display: none; }.section-intro { padding-top: 3px; margin-bottom: 22px; }.section-intro h1 { font-size: 25px; letter-spacing: -.5px; }.eyebrow { font-size: 9px; }.section-intro p { font-size: 11px; }.panel { padding: 16px 13px; border-radius: 18px; }.panel-heading { gap: 10px; margin-bottom: 16px; }.panel-heading h2 { font-size: 14px; }.panel-heading p { font-size: 10px; }.panel-action { font-size: 10px; }.metric-grid { gap: 10px; }.metric-card { min-height: 127px; padding: 15px 13px; border-radius: 18px; }.metric-label { font-size: 10px; }.metric-label .source-pill { font-size: 9px; padding: 1px 6px; }.metric-value strong { font-size: 25px; }.metric-card p { font-size: 10px; }.metric-value span { font-size: 10px; }.module-tabs { gap: 2px; padding: 5px; border-radius: 16px; }.module-tabs button { flex-basis: 45%; justify-content: flex-start; padding: 9px 10px; }.module-tabs strong { font-size: 11px; }.chart-context small { display: none; }.detail-chart-legend { gap: 5px 12px; }.detail-chart-legend button { font-size: 10px; }.detail-chart-tooltip { font-size: 11px; min-width: 150px; padding: 11px; gap: 7px; }.detail-chart-tooltip span { gap: 6px; }.forecast-daily-grid { grid-template-columns: 1fr; }.forecast-daily-grid article { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 15px 17px; }.forecast-daily-grid article > strong { margin: 0; }.forecast-daily-grid p { margin: 4px 0; }.forecast-daily-grid footer { justify-content: end; }.forecast-daily-grid footer span:nth-child(2) { display: none; }.overview-secondary, .three-columns, .feature-grid.five, .decision-board, .typhoon-storm-grid { grid-template-columns: 1fr; }.overview-secondary > :last-child { grid-column: auto; }.quick-launch-grid { gap: 10px; }.quick-launch { padding: 13px 10px; gap: 9px; border-radius: 17px; }.quick-launch strong { font-size: 11px; }.quick-launch small { font-size: 9px; }.launch-icon { width: 30px; height: 34px; border-radius: 10px; }.launch-icon svg { width: 21px; height: 21px; }.sidebar { top: 78px; }.sidebar-backdrop { top: 77px; }.comparison-grid, .outlook-grid, .settings-grid, .admin-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }.stage-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }.loss-catalog .capability-list, .governance-fields .capability-list { grid-template-columns: 1fr; }.weather-daily-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.camera-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }.task-list article { grid-template-columns: 24px minmax(0, 1fr) 85px; gap: 7px; }.task-list strong, .task-impact b { font-size: 11px; }.task-list p, .task-impact small { font-size: 10px; }.workspace-footer { font-size: 9px; padding-top: 24px; }.diagnostic-toolbar input { flex: 1 1 140px; min-width: 0; }.diagnostic-toolbar { gap: 8px 5px; padding: 10px; }.cloud-window-grid { gap: 9px; }.cloud-window { min-height: 120px; }.lifetime-table { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }.quick-launch:hover { transform: none; } }
/* The local operation console shares the same surfaces without dashboard chrome. */
body.local-console { overflow: auto; min-height: 100dvh; background: linear-gradient(125deg, #17283a, #0d1424 55%, #211d36); padding: 32px; }
.local-console main { max-width: 1200px; margin: auto; }.local-console main > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; margin-bottom: 25px; }
.local-console-brand { display: flex; align-items: center; gap: 16px; }.local-console-brand img { width: 47px; height: 47px; object-fit: contain; }.local-console h1 { font-size: 23px; font-weight: 500; margin: 0; }.local-console-brand p { margin: 3px 0 0; }.local-console p { color: var(--muted); font-size: 12px; line-height: 1.8; }.local-console h2 { font-size: 17px; font-weight: 500; margin: 0 0 16px; }.local-console a { text-decoration: none; font-size: 12px; }
.local-console .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.local-console .card { padding: 23px; color: #b2c2dc; }.local-console .value { font-size: 33px; font-weight: 500; color: #a0ddec; margin-top: 10px; }.local-console section { padding: 24px; margin: 20px 0; }.local-console table { border-collapse: collapse; width: 100%; white-space: nowrap; font-size: 12px; }.local-console td, .local-console th { border-bottom: 1px solid var(--line); padding: 13px 12px; text-align: left; }.local-console th { color: var(--subtle); font-size: 11px; font-weight: 500; }.local-console .scroll { overflow: auto; scrollbar-width: thin; }.local-console button, .local-console select { background: #b9d6ff0a; border: 1px solid #bdd6ff25; border-radius: 12px; padding: 9px 13px; font-size: 12px; }.local-console #error { color: #ffabb8; }.local-console #quality { font-size: 12px; color: #b8d4eb; margin: 15px 0; }
@media(max-width:700px) { body.local-console { padding: 14px; }.local-console main > header { flex-wrap: wrap; padding: 18px; }.local-console h1 { font-size: 18px; }.local-console .cards { grid-template-columns: 1fr; gap: 10px; }.local-console .card { padding: 18px; }.local-console section { padding: 18px; }.local-console button { margin-top: 8px; } }
.data-notice { display: flex; align-items: center; gap: 8px; padding: 11px 15px; margin: 0 auto 20px; max-width: 1660px; border-radius: 14px; border: 1px solid #ddbe8625; background: #b6a06b09; color: #c6b599; font-size: 11px; }.data-notice > span { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #ddc498; }
.admin-form label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; }.admin-form input, .admin-form select, .settings-grid input, .settings-grid select { width: 100%; min-width: 0; }.settings-grid input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #111b2d90; }

/* Second polish: stronger reading hierarchy without adding more layers. */
.account-trigger { text-decoration: none; }
.account-trigger strong > span { display: inline; margin-left: 5px; }
.metric-card p, .chart-context, .chart-context small, .source-pill { font-size: 11px; }
.detail-chart-tooltip { font-size: 13px; padding: 14px 16px; }
.detail-chart-tooltip > strong { font-size: 13px; }
.detail-chart-tooltip.tooltip-compact { left: 12px !important; right: 12px; max-width: none; min-width: 0; transform: none; }
.detail-chart-tooltip.tooltip-compact span { grid-template-columns: 7px minmax(0, 1fr) auto; }
.center-page { animation: workspace-enter .24s ease-out both; }
@keyframes workspace-enter { from { opacity: .7; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.remember-row > label { display: flex; align-items: center; gap: 7px; }
.remember-row input { width: 15px; height: 15px; padding: 0; border-radius: 4px; }
.password-input { position: relative; display: flex; }
.password-input input { width: 100%; min-width: 0; padding-right: 60px; }
.password-input > button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #a4b9d5; font-size: 11px; padding: 5px; }
.account-submit { display: flex; align-items: center; justify-content: center; gap: 14px; text-decoration: none; }
.account-submit > span { font-size: 18px; }

/* Silent video and lightweight poster sit behind the accessible React form. */
.login-page { position: relative; isolation: isolate; width: 100%; height: 100dvh; min-height: 680px; padding: 32px clamp(28px, 5vw, 92px) 24px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: clip; background: #091424; }
.login-scene { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.login-video { pointer-events:none; }
.login-header-actions { display:flex; align-items:center; gap:18px; }
.login-motion-toggle { padding:7px 12px; border:1px solid #bad7ff30; border-radius:10px; background:#12233955; color:#c6d9eb; font-size:11px; }
.login-motion-toggle:hover { background:#29446288; border-color:#bad7ff60; }
.login-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #08152728 0%, #07132335 44%, #091222c2 100%), linear-gradient(180deg, #07132160, #07132105 45%, #0713219e); }
.login-light-pass { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 42%, #a3d9ff07 49%, transparent 56%); background-size: 250% 100%; animation: login-exposure 18s ease-in-out infinite; mask: none; clip-path: none; transform: none; }
@keyframes login-exposure { 0%, 100% { background-position: 100% 0; opacity: .15; } 50% { background-position: 0 0; opacity: .6; } }
.login-header, .login-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.login-header .brand { color: #e7efff; text-decoration: none; }
.login-header .brand img { width: 45px; height: 45px; }
.login-header .brand strong { font-size: 20px; }
.login-edition { font-size: 10px; letter-spacing: .25em; color: #c6d9f0a3; }
.login-layout { width: 100%; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 424px); align-items: center; gap: clamp(30px, 5vw, 90px); max-width: 1500px; margin: auto; padding: 40px 0; }
.login-story { max-width: 780px; padding:0 0 56px clamp(170px,18vw,340px); }
.login-overline { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .15em; color: #c3e4f5; }
.login-overline i { width: 5px; height: 5px; background: #89e6c9; box-shadow: 0 0 9px #8cf0d8; }
.login-story h1 { margin: 25px 0 20px; font-size: clamp(30px, 3vw, 52px); font-weight: 550; line-height: 1.3; letter-spacing: -.035em; color: #f1f5ff; text-shadow: 0 3px 24px #040b1866; }
.login-story h1 span { color: #c3e1f8; }
.login-story > p { font-size: 14px; line-height: 1.9; color: #c6d8ed; margin: 0; text-shadow: 0 2px 10px #07121f; }
.login-pillars { display: flex; flex-wrap: wrap; gap: 14px 24px; margin-top: 30px; }
.login-pillars > span { display: flex; align-items: center; gap: 8px; color: #c6dbef; font-size: 12px; }
.login-pillars svg { color: #9dd9e9; }
.login-art-caption { display: block; margin-top: 34px; color: #aec5da8f; font-size: 10px; letter-spacing: .08em; }
.login-panel { position:relative; padding: 34px 32px 22px; border-radius: 28px; background: transparent; box-shadow: 0 25px 65px #03091566; }
.panel-liquid-lens { pointer-events:none; }
.liquid-glass-panel-content { position:relative; z-index:3; }
.login-panel::after { content:""; position:absolute; inset:1px; border-radius:inherit; z-index:2; pointer-events:none; background:linear-gradient(105deg, transparent 40%, #e5f6ff08 51%, #f4fdff19 58%, transparent 72%); opacity:.45; transition:opacity .4s ease; }
.login-panel:hover::after, .login-panel:focus-within::after { opacity:1; }
.login-panel::before { content: none; display: none; }
.login-panel-heading { position: relative; }
.login-panel-kicker { font-size: 10px; letter-spacing: .19em; color: #95bad9; }
.login-panel-heading h2 { font-size: 27px; line-height: 1.3; font-weight: 550; margin: 12px 0 10px; letter-spacing: -.6px; }
.login-panel-heading p { margin: 0; color: #aebfd7; font-size: 12px; line-height: 1.7; }
.login-panel .account-form { padding: 27px 0 24px; gap: 19px; }
.login-panel .account-form label > span { font-size: 12px; color: #c4d5e9; }
.login-panel .account-form input { min-height: 47px; background: #0d1a2d7a; border-color: #c0d8fa24; border-radius: 12px; font-size: 13px; }
.login-panel .account-form input::placeholder { color: #8295b0; font-size: 12px; }
.login-panel .remember-row input { min-height: 0; }
.login-panel .account-submit { border-radius: 12px; min-height: 48px; background: linear-gradient(115deg, #8cbfdf, #a3b6e6); border-color: #d7e9ff80; color: #101f36; box-shadow: 0 6px 24px #8dbae318, inset 0 1px 0 #f4fbff88; font-weight: 600; transition: filter .2s, transform .2s; }
.login-panel .account-submit:hover { filter: brightness(1.08); transform: translateY(-1px); }
.login-panel .captcha-code { min-height: 47px; color: #c9e7fc; font: 600 20px/1 "FuSee Numeric", ui-monospace, "SFMono-Regular", monospace; letter-spacing: .18em; background: linear-gradient(140deg, #5288b333, #6e76a21f); }
.login-panel-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 18px; border-top: 1px solid #cfdeff12; color: #9fb1c9; font-size: 10px; }
.login-panel-footer > span:last-child { margin-left: auto; color: #8297b4; }
.login-deployment-dot { width: 5px; height: 5px; background: #98d8c2; }
.login-current-session { display: grid; gap: 16px; padding: 35px 0; }
.login-current-session > span { font-size: 12px; color: #9ab1cc; }
.login-current-session > strong { font-size: 22px; font-weight: 500; }
.login-current-session > button { border: 0; background: transparent; padding: 4px; font-size: 12px; color: #c1d5eb; }
.login-footer { font-size: 10px; color: #b7cada9e; letter-spacing: .07em; }
@media (min-width: 1800px) { .login-layout { grid-template-columns: minmax(0, 1fr) 460px; }.login-panel { padding: 42px 38px 28px; } }
@media (max-width: 900px) { .login-page { padding: 24px; min-height: 100dvh; height: 100dvh; }.login-layout { grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); gap: 24px; }.login-story h1 { font-size: 36px; }.login-story > p { font-size: 12px; }.login-pillars { gap: 12px; }.login-panel { padding: 28px 24px 20px; } }
@media (max-width: 700px) { .login-page { padding: 22px 20px; }.login-header .brand strong { font-size: 16px; }.login-header .brand img { width: 34px; height: 34px; }.login-edition { display: none; }.login-layout { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 36px 0 28px; gap: 28px; }.login-story { padding: 0; }.login-story h1 { font-size: 32px; margin: 14px 0 10px; line-height: 1.2; }.login-story h1 br { display: none; }.login-story h1 span { display: block; }.login-overline { font-size: 11px; }.login-story > p { font-size: 12px; }.login-pillars { margin-top: 18px; gap: 18px; }.login-art-caption { display: none; }.login-panel { width: 100%; max-width: 460px; margin: auto; padding: 25px 22px 20px; }.login-panel-heading h2 { font-size: 24px; }.login-panel .account-form { gap: 17px; padding-top: 22px; }.login-footer { font-size: 9px; gap: 10px; }.login-scene { height: max(100%, 1000px); object-position: 5% center; }.login-shade { position: fixed; background: linear-gradient(180deg, #07152745, #08152695 32%, #081425e6 74%); }.login-light-pass { display: none; } }
@supports not (backdrop-filter: blur(1px)) { .login-panel { background: #162a40f5; } }
@media (prefers-reduced-motion: reduce) { .center-page, .login-light-pass { animation: none; }.login-panel .account-submit, .login-panel::after { transition: none; } }
@media (min-width: 701px) and (max-height: 800px) { .login-layout { padding: 22px 0; }.login-panel { padding: 25px 30px 20px; }.login-panel .account-form { gap: 14px; padding: 22px 0 20px; }.login-panel .account-form input, .login-panel .captcha-code, .login-panel .account-submit { min-height: 44px; }.login-panel .remember-row input { min-height: 0; }.login-panel-footer { padding-top: 14px; }.login-story { padding-bottom: 25px; } }
@media (max-width: 700px) { .login-panel .account-form input { font-size: 16px; }.login-panel .remember-row input { min-height: 0; } }
@media (max-width: 700px) { .login-scene { object-position: 8% center; } }

/* The overview fills the workspace; wide screens should serve the chart, not gutters. */
.workspace[data-active-center="overview"] .center-page { width:100%; }
.workspace[data-active-center="overview"] .plant-command-strip,
.workspace[data-active-center="overview"] .workspace-footer,
.workspace[data-active-center="overview"] .data-notice { max-width:none; }
/* The main observatory gives the device and cloud vision priority over energy statistics. */
.terminal-experience { position:relative; border:1px solid #91d6ef38; border-radius:26px; background:linear-gradient(118deg,#12303b6b,#0c1929 43%,#101b2c); box-shadow:inset 0 1px 0 #d7f6ff30,0 24px 70px #00000035; margin-bottom:32px; }
.terminal-experience::before { content:""; position:absolute; top:-1px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,transparent,#7aeadf9c,#8cafff66,transparent); pointer-events:none; }
.terminal-experience-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 28px; border-bottom:1px solid #94cee51a; }
.terminal-eyebrow { font:9px/1.5 ui-monospace,monospace; letter-spacing:.2em; color:#76b6c6; }
.terminal-experience h1 { margin:8px 0 0; font-size:clamp(36px,3vw,48px); line-height:1.22; font-weight:600; letter-spacing:-.8px; }
.terminal-experience h1 > span { color:#a4f6e7; }
.terminal-live-status { display:flex; align-items:center; gap:8px; color:#b0c8d6; font-size:10px; flex-wrap:wrap; justify-content:flex-end; border-left:1px solid #94cee525; padding-left:22px; max-width:240px; }
.terminal-live-status i { height:5px; width:5px; border-radius:50%; background:#d2a66d; }.terminal-live-status i.fresh { background:#8adebf; box-shadow:0 0 12px #8adebf55; }.terminal-live-status small { color:#738fa7; font-size:9px; padding-left:8px; border-left:1px solid #bce0ff20; }
.terminal-layout { display:grid; grid-template-columns:minmax(360px,42%) minmax(0,1fr); }
.terminal-stage { position:relative; min-width:0; min-height:650px; background:linear-gradient(140deg,#8ac7e70a,transparent 50%); }
.terminal-stage-top { position:absolute; top:17px; left:20px; right:20px; display:flex; align-items:center; justify-content:space-between; gap:8px; z-index:7; }
.terminal-stage-title { display:flex; align-items:center; gap:10px; color:#d4eaf2; font-size:12px; white-space:nowrap; }.terminal-stage-title em,.panel-sequence { font:12px/1 "FuSee Numeric",ui-monospace,monospace; color:#8ac9d5; font-style:normal; }.terminal-stage-title em { padding-right:10px; border-right:1px solid #91d6ef33; }.panel-sequence { margin-right:12px; padding-right:12px; border-right:1px solid #91d6ef33; }
.terminal-stage-title small { display:block; margin-top:5px; color:#6d91ab; font:8px/1.3 ui-monospace,monospace; letter-spacing:.1em; }
.terminal-menu { position:relative; min-width:0; }.terminal-menu summary,.terminal-info-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; padding:9px 10px; border:1px solid #b7dcf033; border-radius:10px; background:#79a9c014; font-size:10px; color:#b8dbe9; }
.terminal-menu summary::-webkit-details-marker,.terminal-info-menu summary::-webkit-details-marker { display:none; }.terminal-menu summary span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.terminal-menu[open] summary,.terminal-info-menu[open] summary { border-color:#b4eff774; background:#83c7dc25; }
.terminal-menu-panel,.terminal-info-panel { position:absolute; z-index:10; border:1px solid #b2d6e844; border-radius:16px; background:#172b3df5; backdrop-filter:blur(24px); box-shadow:0 16px 50px #0008,inset 0 1px 0 #d5f4ff12; }
.terminal-menu-panel { top:calc(100% + 9px); right:0; width:260px; padding:13px; }.terminal-menu-label { display:block; font-size:10px; color:#7fa6bc; margin:2px 5px 11px; }
.terminal-parts { display:grid; gap:4px; }.terminal-parts button { display:flex; gap:10px; align-items:center; width:100%; padding:10px; border:1px solid transparent; background:transparent; border-radius:10px; color:#b4c5d7; text-align:left; }.terminal-parts button > span { font:10px/1 "FuSee Numeric",ui-monospace,monospace; color:#7999b0; }.terminal-parts strong { font-size:11px; font-weight:500; }.terminal-parts svg { margin-left:auto; opacity:.5; }.terminal-parts button[aria-pressed="true"] { background:#89d0e71b; border-color:#9fc7db36; color:#e5f4fa; }.terminal-parts button:hover { background:#bddfff0c; }
.terminal-viewport { position:absolute; inset:55px 0 150px; overflow:hidden; }.terminal-viewport canvas { display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; outline-offset:-6px; }.terminal-viewport canvas:active { cursor:grabbing; }
.terminal-hotspot { position:absolute; transform:translate(-50%,-50%); width:25px; height:25px; border:1px solid #b1d3e56b; background:#15293cdd; color:#d5ebf5; border-radius:7px; padding:0; font:10px/1 "FuSee Numeric",ui-monospace,monospace; box-shadow:0 0 16px #6bcbed12; z-index:4; }.terminal-hotspot.active { background:#c1f1f5; color:#10283a; border-color:#ddffff; box-shadow:0 0 24px #7ee7e752; }.terminal-hotspot[hidden] { display:none; }
.terminal-scene-caption { position:absolute; left:20px; right:20px; bottom:8px; display:flex; justify-content:space-between; gap:10px; color:#7f9db2; font-size:9px; pointer-events:none; }.terminal-scene-caption span { color:#627f95; }
.terminal-telemetry { position:absolute; bottom:67px; left:20px; right:20px; }
.terminal-readings { display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:6px; }.terminal-readings > div { min-width:0; border:1px solid #9bc4e222; border-radius:12px; background:linear-gradient(140deg,#8fbfd412,#84b8d303); padding:11px 10px; box-shadow:inset 0 1px 0 #d4f4ff0c; }.terminal-readings > div > span { display:block; font-size:9px; color:#8cabc0; }.terminal-readings strong { display:block; color:#d2e8f2; font-size:23px; line-height:1.2; font-weight:500; margin-top:6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }.terminal-readings small { display:block; font-size:9px; font-weight:400; margin-top:4px; color:#7da4b9; }
.terminal-readings:has(> div:nth-child(5):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }.terminal-readings:has(> div:nth-child(5):last-child) > div { padding:10px 5px; }.terminal-readings:has(> div:nth-child(5):last-child) strong { font-size:18px; }
.terminal-camera-note { margin:0; padding:20px 12px; border:1px solid #abcfff20; border-radius:12px; color:#91a9bf; font-size:11px; }.terminal-camera-note a { display:block; margin-top:8px; color:#b5dee6; text-decoration:none; }
.terminal-controls { position:absolute; bottom:20px; left:20px; right:20px; z-index:8; display:flex; align-items:center; gap:6px; }
.terminal-controls > button { border:1px solid #bed4ff24; border-radius:10px; padding:9px 10px; background:#26364d77; color:#bcd0e4; font-size:10px; white-space:nowrap; }.terminal-controls > button[aria-pressed="true"] { background:#73b9d824; border-color:#94d4e44a; color:#c8f2f3; }.terminal-info-menu { margin-left:auto; }.terminal-info-menu summary { font-size:10px; padding:9px; }
.terminal-info-panel { bottom:calc(100% + 12px); left:0; right:0; max-height:380px; overflow:auto; padding:20px; }.terminal-detail-tag { font-size:10px; color:#93cee0; }.terminal-info-panel h3 { font-size:16px; font-weight:500; margin:9px 0; }.terminal-info-panel p { font-size:11px; color:#aac2d3; line-height:1.8; margin:10px 0; }.terminal-info-panel hr { border:0; border-top:1px solid #bdd9e522; margin:16px 0; }.terminal-detail-link,.terminal-model-download { display:inline-flex; align-items:center; gap:8px; color:#b5e1ec; font-size:11px; text-decoration:none; }
.terminal-insight { min-width:0; border-left:1px solid #94cee51a; display:flex; background:linear-gradient(145deg,#a6c6ff04,transparent); }
.overview-trend-panel { width:100%; border:0; border-radius:0; background:transparent; box-shadow:none; padding:20px 24px; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; margin:0; }.overview-trend-panel::before { content:none; }.overview-trend-panel .panel-heading { margin-bottom:0; }.overview-trend-panel .panel-heading h2 { font-size:18px; }.overview-trend-panel .detail-chart-shell { margin-top:0; }.overview-trend-panel .detail-chart-empty { min-height:260px; }
.overview-live-metrics { display:grid; grid-template-columns:1.3fr 1.3fr .8fr; gap:12px; padding:0 0 12px; border-bottom:1px solid #94cee51a; }.overview-live-metrics span { display:block; font-size:10px; color:#8fa5c0; }.overview-live-metrics strong { display:block; font-size:clamp(24px,2.2vw,36px); font-weight:500; color:#a6f7df; line-height:1.3; margin-top:6px; padding:.04em .08em; white-space:nowrap; }.overview-live-metrics small { color:#7899b2; font-size:10px; margin-left:5px; font-weight:400; }.overview-live-metrics > div:nth-child(2) strong { color:#cadcff; }.overview-live-metrics > div:nth-child(3) strong { color:#b3bcd6; }
.generation-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.generation-tabs { display:flex; padding:4px; border:1px solid #b7d7ff26; border-radius:12px; background:#07132145; gap:3px; }
.generation-tabs button { padding:8px 13px; border:0; border-radius:8px; background:transparent; color:#93a9c3; font-size:12px; cursor:pointer; white-space:nowrap; }
.generation-tabs button[aria-selected=true] { color:#d4fff5; background:#63e6c11c; box-shadow:inset 0 0 0 1px #63e6c13b; }
.generation-period { display:flex; align-items:center; gap:5px; min-width:0; }
.generation-period .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.generation-period input { color-scheme:dark; max-width:150px; min-width:0; background:#0b17283d; color:#d2e0f2; border:1px solid #b7d7ff25; border-radius:8px; padding:8px; font-size:12px; }
.generation-period input[type=number] { width:80px; }
.generation-period button,.generation-footnote button { border:1px solid #b7d7ff25; background:#0b17283d; border-radius:8px; color:#a2bbd5; padding:7px 10px; cursor:pointer; }
.generation-period button:not(.generation-current) { font-size:18px; line-height:20px; }
.generation-current { font-size:11px; white-space:nowrap; }
.generation-footnote { display:flex; gap:8px 16px; flex-wrap:wrap; align-items:center; color:#8fa5c0; font-size:11px; line-height:1.7; }
.generation-footnote small { font-size:10px; color:#7899b2; }
.generation-tabs button:focus-visible,.generation-period button:focus-visible { outline:2px solid #63e6c1; outline-offset:2px; }
@media(max-width:560px) { .generation-toolbar { gap:10px; }.generation-tabs { width:100%; }.generation-tabs button { flex:1; padding:8px 9px; font-size:11px; }.generation-period { width:100%; justify-content:flex-end; }.generation-footnote { gap:4px; } }

/* One directional icon family for links, flows, calendar controls and menus. */
.direction-icon { flex:none; display:inline-block; vertical-align:middle; transition:transform .18s ease,color .18s ease; }
.panel-link,.terminal-model-download,.terminal-camera-note a { display:inline-flex; align-items:center; gap:6px; }
.account-trigger strong { display:inline-flex; align-items:center; gap:6px; }
a:hover .direction-arrow-up-right { transform:translate(1px,-1px); }
.chart-context small { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; flex-shrink:0; }
.detail-chart-shell .direction-icon { width:12px; height:12px; cursor:inherit; }
.generation-period button:not(.generation-current) { display:inline-flex; align-items:center; justify-content:center; width:32px; height:34px; padding:0; color:#a7c5e4; background:linear-gradient(135deg,#b4d8ff10,#7799ba05); box-shadow:inset 0 1px 0 #d8efff0b; }
.generation-period button:hover { border-color:#9edcde64; color:#d3fff3; background:#7acdc71a; }
.terminal-menu[open] > summary .direction-chevron-down,.terminal-info-menu[open] > summary .direction-chevron-down { transform:rotate(180deg); }
.stage-rail { gap:26px; }
.stage-rail > div { min-height:66px; padding:10px 7px; }
.stage-connector { position:absolute; z-index:2; right:-13px; top:50%; transform:translate(50%,-50%); display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:8px; border:1px solid #a6c7ea26; color:#9ab8d5; background:linear-gradient(145deg,#26394b,#152238); box-shadow:inset 0 1px 0 #d6eeff0c,0 2px 8px #050c1826; pointer-events:none; }
.stage-connector::before { content:""; position:absolute; z-index:-1; left:-5px; right:-5px; top:50%; height:1px; background:linear-gradient(90deg,transparent,#9ab8d542,transparent); }
.stage-connector.is-complete { color:#9fe8cc; border-color:#8ceabe42; background:linear-gradient(145deg,#274b46,#183333); }
.stage-connector.is-complete::before { background:linear-gradient(90deg,transparent,#8ceabe66,transparent); }
:where(.platform-shell,.local-console,.login-page) select:not([multiple]):not([size]) { appearance:none; -webkit-appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ab8d5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; }
@media(max-width:560px) { .stage-rail { gap:20px 24px; }.stage-connector { right:-12px; }.stage-rail > div:nth-child(3n) .stage-connector { display:none; }.chart-context small { display:none; } }
.overview-loss-section { margin:0; min-width:0; }.overview-loss-section .rank-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.terminal-render-fallback { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:15px; color:#91b9cc; padding:40px; font-size:12px; }.terminal-render-fallback img { height:80%; max-height:300px; max-width:100%; object-fit:contain; border-radius:16px; }.terminal-render-fallback p { margin:0; }.terminal-loader { display:block; width:95px; height:2px; background:linear-gradient(90deg,transparent,#96e9e8,transparent); animation:pulse 1.5s ease-in-out infinite; }
.overview-generation-board { border:1px solid #a6d5ec24; border-radius:24px; background:linear-gradient(135deg,#162b3790,#101b2dcc); margin-bottom:30px; }
.overview-generation-board .overview-trend-panel { padding:24px 28px; }
/* Secondary generation board and its shared energy ledger. */
.terminal-energy-summary { border-top:1px solid #94cee524; background:linear-gradient(100deg,#77e6c308,transparent 50%); border-radius:0 0 26px 26px; }
.overview-energy-rail { margin:0; gap:0; padding:8px 12px; }
.overview-energy-rail .metric-card { border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; min-height:126px; padding:16px 20px; }
.overview-energy-rail .metric-card + .metric-card { border-left:1px solid #94cee51a; }
.overview-energy-rail .metric-card::before,.overview-energy-rail .metric-card::after { content:none; }
.overview-energy-rail .metric-value { margin-top:10px; }
.overview-diagnostics-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:18px; margin-bottom:20px; }
.overview-diagnostics-grid > .panel,.overview-loss-section > .panel { height:100%; }
.overview-diagnostics-grid .device-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.overview-diagnostics-grid .device-card { padding:12px; background:#17314135; }
.overview-diagnostics-grid .device-power { font-size:26px; }
.overview-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:4px 2px; margin:28px 0 18px; }
.overview-section-heading span { font:9px/1.5 ui-monospace,monospace; letter-spacing:.18em; color:#79aaba; }
.overview-section-heading h2 { font-size:clamp(21px,1.9vw,29px); line-height:1.3; margin:8px 0 0; font-weight:500; letter-spacing:-.5px; }
.overview-section-heading > a { display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:11px; white-space:nowrap; color:#9ecedc; }
.overview-trend-panel .chart-context { padding:0 166px 8px 0; min-height:34px; }
.overview-trend-panel .chart-context small { display:none; }
.overview-trend-panel .chart-toolbar { position:absolute; right:0; top:0; margin:0; }
.overview-trend-panel .chart-toolbar > span { display:none; }
.overview-trend-panel .chart-range-control { margin-top:4px; margin-bottom:4px; }.overview-trend-panel .chart-range-caption { padding-top:4px; font-size:9px; }.overview-trend-panel .chart-navigator { height:26px; }
.overview-trend-panel .detail-chart-legend { padding-top:6px; }
.overview-trend-panel .chart-line { stroke-width:2.8; filter:drop-shadow(0 0 4px #74caff30); }
@media(max-width:1100px) { .overview-diagnostics-grid { grid-template-columns:1fr; }.overview-diagnostics-grid .device-card-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } }
@media(max-width:820px) { .overview-energy-rail .metric-card:nth-child(3) { border-left:0; }.overview-energy-rail .metric-card:nth-child(n+3) { border-top:1px solid #94cee51a; }.overview-section-heading { margin-top:24px; } }
@media(min-width:981px) and (max-height:800px) { .terminal-experience-header { padding:13px 22px; }.terminal-experience h1 { font-size:36px; }.terminal-stage { min-height:620px; }.overview-trend-panel { padding:18px 20px; gap:8px; }.overview-trend-panel .panel-heading { margin-bottom:0; }.overview-trend-panel .detail-chart-shell { margin-top:0; } }
@media(max-width:1100px) and (min-width:981px) { .terminal-stage-top,.terminal-telemetry,.terminal-controls { left:14px; right:14px; }.terminal-stage-title { font-size:11px; }.terminal-menu summary { padding:8px; font-size:9px; }.terminal-controls > button,.terminal-info-menu summary { padding:9px 7px; font-size:9px; }.overview-trend-panel { padding:18px; } }
@media(max-width:980px) { .terminal-layout { grid-template-columns:minmax(0,1fr); }.terminal-stage { height:670px; min-height:0; border-radius:0; }.terminal-viewport { inset:55px 0 150px; }.terminal-insight { border-left:0; border-top:1px solid #b7d7ff20; border-radius:0 0 26px 26px; }.overview-trend-panel { padding:24px; border-radius:0 0 26px 26px; }.overview-trend-panel .detail-chart-shell { margin-top:0; } }
@media(max-width:560px) { .terminal-experience { border-radius:20px; }.terminal-experience-header { flex-wrap:wrap; align-items:flex-start; padding:20px 16px; gap:12px; }.terminal-eyebrow { font-size:7px; }.terminal-experience h1 { font-size:27px; }.terminal-live-status { max-width:none; padding-left:0; border:0; font-size:9px; line-height:1.6; }.terminal-live-status small { display:none; }.terminal-stage { height:625px; min-height:0; }.terminal-stage-top,.terminal-telemetry,.terminal-controls { left:14px; right:14px; }.terminal-stage-title { font-size:11px; }.terminal-menu summary { font-size:9px; max-width:170px; }.terminal-menu-panel { width:250px; }.terminal-controls { gap:5px; bottom:18px; }.terminal-controls > button,.terminal-info-menu summary { padding:9px 7px; font-size:9px; }.terminal-readings { grid-template-columns:repeat(3,minmax(0,1fr)); }.terminal-readings:has(> div:nth-child(5):last-child) { grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }.terminal-readings:has(> div:nth-child(5):last-child) > div { padding:9px 5px; }.terminal-readings:has(> div:nth-child(5):last-child) strong { font-size:18px; }.terminal-readings:has(> div:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }.terminal-readings > div { padding:10px 8px; }.terminal-readings strong { font-size:23px; }.terminal-scene-caption { left:16px; right:16px; font-size:8px; }.terminal-scene-caption span { display:none; }.overview-trend-panel { padding:20px 14px; }.overview-live-metrics { gap:8px; }.overview-live-metrics strong { font-size:25px; }.overview-live-metrics small { display:block; margin:4px 0 0; }.overview-live-metrics span { font-size:9px; }.overview-loss-section .rank-list { grid-template-columns:1fr; }.terminal-info-panel { padding:17px; }.terminal-info-panel p { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .terminal-loader { animation:none; } }

/* Seven-segment accents belong to the cockpit readouts, not analytic text. */
.cloud-visual-panel { margin-bottom: 20px; }
.cloud-visual-panel .cloud-window-grid { gap: 14px; max-width:860px; margin-inline:auto; }
.cloud-visual-panel .cloud-window img { height:auto; }
.cloud-visual-panel .cloud-window { border-color: #bad7ff25; background: #111b2d; transition: border-color .18s ease; }
.cloud-visual-panel .cloud-window:hover { border-color: #85d8f470; }
.cloud-shared-legend { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:20px; font-size:11px; color:var(--muted); }
.cloud-shared-legend > div { width:min(350px,55%); }
.cloud-shared-legend i { display:block; height:6px; border-radius:4px; background:linear-gradient(90deg,#38307f,#3167ef,#16d6e0,#45fa67,#d5ee2b,#ffd644,#fa721c,#ba1905); }
.cloud-shared-legend small { display:flex; justify-content:space-between; margin-top:5px; font-size:10px; }
.cloud-visual-note { margin:12px 0 0; text-align:center; color:var(--subtle); font-size:11px; }
@media(max-width:560px) { .cloud-visual-panel .cloud-window-grid { gap:9px; }.cloud-visual-panel .cloud-window span { font-size:11px; }.cloud-visual-panel .cloud-window small { font-size:10px; }.cloud-visual-note { font-size:10px; } }

/* The home visual panel shares the diagnostic module; only composition differs. */
.cloud-home-panel { container-type:inline-size; width:100%; margin:0; padding:20px 22px; border:0; border-radius:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; flex-direction:column; }
.cloud-home-panel::before { content:none; }
.cloud-home-panel .panel-heading { margin-bottom:14px; }
.cloud-home-panel .panel-heading h2 { font-size:20px; }
.cloud-home-panel .cloud-window-grid { gap:12px; }
.cloud-home-panel .cloud-window { border-radius:12px; min-height:0; }
.cloud-home-panel .cloud-window span { padding:8px 10px 0; font-size:12px; }
.cloud-home-panel .cloud-window small { padding:3px 10px 8px; font-size:9px; }
.cloud-home-panel .cloud-shared-legend { margin-top:14px; gap:10px; font-size:10px; }
.cloud-home-panel .cloud-visual-note { font-size:10px; text-align:left; margin:10px 0 0; line-height:1.6; }
.cloud-view-tabs { display:flex; gap:4px; align-self:flex-start; padding:4px; margin-bottom:14px; border:1px solid #a6d5ec24; border-radius:11px; background:#08152466; }
.cloud-view-tabs button { border:0; background:transparent; border-radius:7px; padding:7px 14px; color:#92b0c6; font-size:11px; }
.cloud-view-tabs button[aria-selected="true"] { background:#67e8cc1c; color:#b5fbe8; box-shadow:inset 0 0 0 1px #7af1d638; }
.cloud-analysis-link { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:13px 0 0; margin-top:auto; border-top:1px solid #94cee51a; color:#8eafc3; font-size:10px; text-decoration:none; }
.cloud-analysis-link > span:last-child { display:inline-flex; align-items:center; gap:6px; color:#b6e6ed; }
/* Both tabs use one responsive slot; asynchronous camera frames cannot resize the hero. */
.cloud-home-viewport { block-size:clamp(560px,calc(75cqi + 245px),900px); flex:none; overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:#557d9270 transparent; margin-bottom:14px; }
.cloud-home-viewport > .camera-home-preview { min-height:100%; margin:0; box-sizing:border-box; }
.cloud-home-viewport .camera-simulation-frame { width:min(100%,800px); margin-inline:auto; }
.camera-home-preview { border:0; border-radius:12px; background:#09172770; padding:16px; box-shadow:none; min-height:470px; }
.camera-home-preview .camera-native-layout { grid-template-columns:1fr; }
.camera-home-preview .camera-native-layout img { max-height:330px; }
.camera-home-preview .camera-native-layout > div { overflow-wrap:anywhere; }
.camera-home-preview .camera-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
.camera-home-preview .detail-chart-empty { min-height:300px; }
/* Simulation remains a separate, explicitly labelled camera source. */
.camera-source-switch { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.camera-source-switch button { padding:7px 12px; border-radius:7px; font-size:11px; background:transparent; color:#8eafc3; border:1px solid #94cee524; }
.camera-source-switch button[aria-pressed="true"] { color:#b5fbe8; background:#67e8cc14; border-color:#7af1d642; }
.camera-simulation-frame { aspect-ratio:4/3; overflow:hidden; background:#08121e; border-radius:10px; }
.camera-simulation-frame video,.camera-simulation-frame img { display:block; width:100%; height:100%; object-fit:contain; }
.camera-simulation-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; font-size:11px; color:#b1d9e1; }
.camera-simulation-controls > span { display:inline-flex; align-items:center; gap:7px; }
.camera-simulation-controls i { width:5px; height:5px; border-radius:50%; background:#c5b9ff; }
.camera-simulation-controls button { font-size:11px; border:1px solid #9cbad52b; background:#9cbad50d; color:#c7e4ed; border-radius:7px; padding:7px 10px; }
.camera-simulation p,.camera-real-status { color:#829caf; font-size:10px; line-height:1.7; margin:12px 0 0; }
.camera-real-status { padding-top:10px; border-top:1px solid #94cee51a; }
@media(min-width:981px) and (max-height:800px) { .cloud-home-panel { padding:18px 20px; }.cloud-home-panel .panel-heading { margin-bottom:10px; }.cloud-view-tabs { margin-bottom:10px; }.cloud-home-panel .cloud-shared-legend { margin-top:10px; } }
@media(max-width:980px) { .terminal-insight { order:-1; border-top:0; border-bottom:1px solid #94cee51a; }.terminal-stage { border-radius:0 0 26px 26px; }.cloud-home-panel .cloud-window-grid { max-width:740px; } }
@media(max-width:560px) {
 .cloud-home-panel { padding:18px 14px; }.cloud-home-panel .panel-heading { gap:8px; flex-wrap:wrap; }.cloud-home-panel .panel-heading h2 { font-size:18px; }.cloud-home-panel .panel-heading p { font-size:10px; }
 .cloud-home-panel .cloud-window-grid { gap:9px; }.cloud-home-panel .cloud-window span { font-size:11px; padding-inline:7px; }.cloud-home-panel .cloud-window small { font-size:9px; padding-inline:7px; }
 .cloud-view-tabs button { min-height:32px; }.cloud-analysis-link { flex-wrap:wrap; }.camera-home-preview { min-height:360px; }.camera-home-preview .detail-chart-empty { min-height:200px; }
 .overview-generation-board .overview-trend-panel { padding:20px 14px; }
}

.header-time,
.overview-page .overview-live-metrics strong,
.overview-page .overview-energy-rail .metric-value strong,
.overview-page .terminal-readings-sampling strong {
  font-family: "FuSee Display Digits", "FuSee Numeric", sans-serif;
  letter-spacing: .015em;
}
.overview-page .overview-live-metrics small,
.overview-page .terminal-readings small {
  font-family: "FuSee Numeric", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: normal;
}

@media (max-width: 560px) {
  .overview-page .terminal-readings-sampling strong { font-size: 18px; white-space: nowrap; }
  .overview-page .overview-energy-rail .metric-value strong { font-size: clamp(18px, 14cqi, 22px); }
  .overview-page .overview-live-metrics strong { font-size: 22px; }
}

/* Shared chart viewport: the axes stay fixed while the real X domain moves. */
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: -2px 0 8px; color: #90a1bc; font-size: 10px; }
.chart-toolbar > div { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.chart-toolbar button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 6px; border: 1px solid rgba(177,206,255,.15); border-radius: 7px; background: rgba(122,163,221,.07); color: #c0d5f4; cursor: pointer; font-size: 15px; line-height: 1; }
.chart-toolbar button:hover:not(:disabled) { border-color: rgba(102,200,239,.55); background: rgba(104,182,233,.16); }
.chart-toolbar button:disabled { opacity: .35; cursor: default; }
.chart-toolbar .chart-reset { min-width: 38px; font-size: 10px; }
.detail-chart-shell .chart-toolbar svg { width: 14px; height: 14px; overflow: visible; cursor: inherit; }
.detail-chart-shell .chart-plot { user-select: none; touch-action: pan-y; }
.detail-chart-shell .chart-plot.is-zoomed { cursor: grab; }
.detail-chart-shell .chart-plot.is-dragging { cursor: grabbing; }
.chart-range-control { margin: 8px 18px 14px 54px; }
.chart-navigator { position: relative; height: 32px; background: rgba(89,119,167,.06); border: 1px solid rgba(157,185,220,.13); border-radius: 5px; cursor: pointer; touch-action: pan-y; user-select: none; }
.detail-chart-shell .chart-navigator svg { width: 100%; height: 100%; border-radius: 4px; overflow: hidden; pointer-events: none; }
.chart-range-window { position: absolute; top: -1px; bottom: -1px; border: 1px solid rgba(111,207,227,.55); border-radius: 4px; background: rgba(103,195,213,.08); cursor: grab; min-width: 1px; touch-action: pan-y; }
.chart-range-window:active { cursor: grabbing; }
.chart-range-handle { position: absolute; top: -3px; bottom: -3px; width: 14px; border: 1px solid #577787; border-radius: 5px; background: #192e40; cursor: ew-resize; touch-action: pan-y; padding: 0; }
.chart-range-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 3px; height: 10px; border-left: 1px solid #a7d9dd; border-right: 1px solid #a7d9dd; transform: translate(-50%,-50%); }
.chart-range-handle:hover { background: #284758; border-color: #93d9e0; }
.chart-range-handle:focus-visible, .chart-toolbar button:focus-visible, .chart-plot:focus-visible { outline: 2px solid #72cede; outline-offset: 3px; }
.chart-range-handle.handle-start { left: -7px; }
.chart-range-handle.handle-end { right: -7px; }
.chart-range-caption { display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; color: #869bb5; font-size: 10px; }
.chart-range-caption > span { white-space: nowrap; }
.chart-range-caption > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.detail-chart-shell .detail-chart-tooltip { top: 90px; pointer-events: none; }
@media (max-width: 560px) {
  .chart-toolbar { font-size: 9px; }
  .chart-toolbar > span { flex-basis: 100%; }
  .chart-toolbar > div { margin-left: 0; }
  .chart-toolbar button { height: 30px; min-width: 30px; }
  .chart-range-control { margin-left: 38px; margin-right: 12px; }
  .chart-range-caption { font-size: 9px; }
  .detail-chart-shell .detail-chart-tooltip { top: 112px; }
}

@media(max-width:560px) {
 .overview-energy-rail { padding:4px; }.overview-energy-rail .metric-card { padding:14px 12px; min-height:120px; }.overview-energy-rail .metric-label { flex-wrap:wrap; gap:4px; }
 .overview-section-heading { align-items:flex-start; }.overview-section-heading h2 { font-size:21px; }.overview-section-heading > a { font-size:10px; margin-top:6px; }
 .overview-diagnostics-grid .device-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.overview-diagnostics-grid .panel-heading { flex-wrap:wrap; }
 .overview-trend-panel .chart-context { padding-right:0; }.overview-trend-panel .chart-toolbar { position:static; margin:0 0 8px; }.overview-trend-panel .chart-toolbar > div { margin-left:auto; }
}

/* Diagnosis fetch state is distinct from a successful response with no samples. */
.diagnostic-load-state { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted-foreground, #9aacc2); }
.diagnostic-load-state strong { color: var(--foreground, #dce8f5); font-size: 16px; }
.diagnostic-load-state p { margin: 0; font-size: 13px; text-align: center; }

.diagnostic-result-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }