:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#203b3d;
  background:#f4f7f8;
  font-synthesis:none;
  color-scheme:light;
  -webkit-font-smoothing:antialiased;
  --teal:#0b8175;
  --muted:#75888a;
  --border:#e2e9e9;
  --amber:#d79832;
  --red:#d35b5b;
  --blue:#6786b8
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  min-width:360px
}

h1,h2,h3,p {
  margin:0
}

button,input {
  font:inherit
}

button,a,input {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed;
  opacity:.45
}

a {
  color:inherit;
  text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #89c5bc;
  outline-offset:3px
}

button {
  color:inherit
}

button svg {
  pointer-events:none
}

.skip {
  position:absolute;
  top:-70px;
  left:12px;
  background:white;
  padding:12px;
  z-index:20
}

.skip:focus {
  top:8px
}

.topbar {
  height:76px;
  background:white;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 26px;
  gap:32px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0
}

.brand-mark {
  width:38px;
  height:38px;
  border-radius:10px;
  background:#1d4f4d;
  color:white;
  display:grid;
  place-items:center
}

.brand-mark svg {
  width:30px
}

.brand strong {
  display:block;
  font-size:15px;
  letter-spacing:1px
}

.brand small {
  display:block;
  font:7px Arial,sans-serif;
  letter-spacing:1.25px;
  color:var(--muted);
  margin-top:4px
}

.product-name {
  font-size:15px;
  font-weight:600;
  padding-left:28px;
  border-left:1px solid var(--border)
}

.product-name span {
  font:9px Arial,sans-serif;
  letter-spacing:.6px;
  color:var(--teal);
  background:#eaf5f1;
  margin-left:8px;
  padding:4px 6px;
  border-radius:4px
}

.top-actions {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:25px;
  font-size:11px;
  color:var(--muted)
}

.demo-dot {
  display:flex;
  align-items:center;
  gap:7px
}

.demo-dot:before,.status-dot {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#56a792;
  display:inline-block
}

.top-actions a {
  color:#3d5c5d
}

.top-actions a:hover {
  color:var(--teal)
}

.app-shell {
  display:grid;
  grid-template-columns:198px minmax(0,1fr);
  min-height:calc(100vh - 76px)
}

.sidebar {
  background:white;
  border-right:1px solid var(--border);
  padding:29px 16px 0;
  display:flex;
  flex-direction:column
}

.workspace-label {
  font-size:13px;
  font-weight:650;
  padding:0 12px
}

.workspace-label>span {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:7px;
  font-weight:400;
  letter-spacing:.5px
}

.nav-caption {
  color:#95a3a4;
  font-size:10px;
  letter-spacing:1px;
  margin:35px 12px 14px
}

.scenario-nav {
  display:flex;
  flex-direction:column;
  gap:7px
}

.scenario-nav button {
  display:flex;
  align-items:center;
  text-align:left;
  width:100%;
  border:0;
  background:transparent;
  font-size:12px;
  border-radius:6px;
  padding:13px 12px;
  gap:10px;
  color:#647c7d
}

.scenario-nav button:hover {
  background:#f3f8f6
}

.scenario-nav button.active {
  background:#e6f3ef;
  color:#11776c;
  font-weight:600
}

.nav-symbol {
  font-family:Arial,sans-serif;
  font-size:19px;
  font-weight:400;
  width:19px;
  text-align:center;
  line-height:17px
}

.nav-number {
  margin-left:auto;
  font-size:9px;
  font-weight:400;
  color:#95a3a4
}

.sidebar-guide {
  margin:60px 5px 24px;
  border-top:1px solid var(--border);
  padding:22px 7px
}

.guide-icon {
  display:block;
  border:1px solid #bdceca;
  color:#6c9991;
  width:20px;
  height:20px;
  border-radius:50%;
  text-align:center;
  font:12px/19px Georgia,serif;
  margin-bottom:12px
}

.sidebar-guide strong {
  font-size:11px;
  font-weight:500
}

.sidebar-guide p {
  font-size:10px;
  line-height:1.9;
  color:var(--muted);
  margin-top:8px
}

.sidebar-guide button {
  font-size:10px;
  background:none;
  border:0;
  padding:14px 0 0;
  color:var(--teal)
}

.sidebar-bottom {
  margin-top:auto;
  border-top:1px solid var(--border);
  padding:18px 3px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:9px;
  color:var(--muted)
}

.version {
  margin-left:auto;
  color:#9caaaa
}

main {
  padding:24px 26px 0;
  min-width:0;
  max-width:1800px;
  width:100%;
  margin:0 auto
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:23px
}

.breadcrumb {
  color:#8b9a9b;
  font-size:10px;
  margin-bottom:13px
}

.breadcrumb span {
  margin:0 7px
}

.breadcrumb span:last-child {
  color:#4e6c6e;
  margin:0
}

h1 {
  font-size:23px;
  letter-spacing:.5px;
  font-weight:650
}

.page-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:9px
}

.heading-actions {
  display:flex;
  gap:8px;
  padding-top:18px
}

.button {
  font-size:11px;
  background:white;
  border:1px solid #dbe4e4;
  padding:10px 13px;
  border-radius:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap
}

.button:hover {
  background:#f0f7f5;
  border-color:#a1c5bc
}

.button.primary {
  background:var(--teal);
  border-color:var(--teal);
  color:white
}

.button.primary:hover {
  background:#076d63
}

.metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:19px
}

.metric {
  background:white;
  border:1px solid var(--border);
  border-radius:7px;
  padding:17px 18px 14px;
  min-width:0
}

.metric>span {
  font-size:11px;
  color:#6e8385
}

.metric>div {
  display:flex;
  align-items:baseline;
  gap:6px;
  margin:9px 0 6px
}

.metric strong {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:29px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.8px;
  font-variant-numeric:tabular-nums
}

.metric em {
  font-style:normal;
  font-size:11px;
  color:#849697
}

.metric small {
  font-size:9px;
  color:#8c9c9c
}

.mini-bars {
  margin-left:auto;
  font-size:20px;
  letter-spacing:2px;
  color:#b5d8ce
}

.metric-badge {
  font-size:9px;
  background:#edf7f2;
  color:#508c77;
  padding:3px 5px;
  border-radius:4px;
  margin-left:auto;
  align-self:center
}

.metric-badge.danger {
  color:#bf5750;
  background:#fff0ed
}

.metric-badge.caution {
  color:#a57624;
  background:#fdf5e7
}

.pv-icon {
  font-size:27px;
  line-height:1;
  color:#d4b97c;
  margin-left:auto
}

.risk-mini {
  margin-left:auto;
  width:24px;
  height:24px;
  border:1px solid #e5d6b9;
  border-radius:50%;
  font:13px/22px Georgia,serif;
  text-align:center;
  color:#c3a363
}

.metric.danger strong {
  color:var(--red)
}

.work-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 298px;
  gap:17px;
  align-items:start
}

.center-column,.analysis-column {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:17px
}

.panel {
  background:white;
  border:1px solid var(--border);
  border-radius:7px;
  overflow:hidden
}

.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:17px 18px
}

.panel-heading h2 {
  font-size:12px;
  font-weight:600
}

.panel-heading p {
  font-size:9px;
  color:#8c9d9d;
  margin-top:6px
}

.panel-heading p span {
  padding:0 7px
}

.subtle-tag {
  display:inline-block;
  font-size:9px;
  font-weight:400;
  background:#f2f6f6;
  color:#7b9292;
  border-radius:3px;
  padding:3px 5px;
  margin-left:6px;
  vertical-align:middle
}

.view-switch {
  display:flex;
  flex-shrink:0;
  padding:3px;
  background:#f2f6f5;
  border-radius:5px;
  gap:2px
}

.view-switch button {
  border:0;
  background:transparent;
  font-size:10px;
  padding:6px 10px;
  border-radius:4px;
  color:#859898
}

.view-switch button[aria-pressed=true] {
  background:white;
  color:var(--teal);
  box-shadow:0 1px 3px #17443a10
}

.map-toolbar {
  border-top:1px solid #f0f3f3;
  border-bottom:1px solid #edf2f2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 18px
}

.legend,.chart-legend {
  display:flex;
  align-items:center;
  gap:14px;
  font-size:9px;
  color:#7e9292
}

.legend>span,.chart-legend>span {
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}

.legend-line {
  height:2px;
  width:14px;
  display:inline-block;
  background:var(--teal)
}

.legend-line.hv {
  background:var(--blue)
}

.legend-line.outage {
  background:#b6c1c5
}

.legend-line.alarm {
  background:var(--red)
}

.legend-line.amber {
  background:var(--amber)
}

.device-search {
  display:flex;
  gap:5px;
  align-items:center;
  color:#8ca09d
}

.device-search input {
  border:0;
  width:98px;
  min-width:0;
  font-size:10px;
  outline-offset:4px;
  background:transparent;
  color:#3e6260
}

.device-search input::placeholder {
  color:#9bafac
}

.topology-canvas {
  position:relative;
  background-color:#fcfefe;
  background-image:radial-gradient(#bccfc238 .65px,transparent .65px);
  background-size:14px 14px;
  overflow:hidden
}

.topology-canvas>svg {
  display:block;
  width:100%;
  height:auto;
  min-height:290px;
  max-height:520px
}

.map-stamp {
  position:absolute;
  top:16px;
  left:18px;
  font-size:9px;
  color:#78918c;
  background:#f1f7f4;
  border:1px solid #e5eeea;
  padding:5px 8px;
  border-radius:3px;
  z-index:1
}

.map-stamp.plan {
  color:#a2762a;
  background:#fdf6e9;
  border-color:#eee1bf
}

.map-controls {
  position:absolute;
  bottom:12px;
  right:14px;
  display:flex;
  border:1px solid var(--border);
  border-radius:4px;
  background:white;
  overflow:hidden
}

.map-controls button {
  border:0;
  border-right:1px solid var(--border);
  background:white;
  min-width:28px;
  height:26px;
  font-size:12px;
  color:#6b8580
}

.map-controls button:nth-child(2) {
  font:9px Arial,sans-serif;
  min-width:39px
}

.map-controls button:last-child {
  border:0
}

.map-controls button:hover {
  background:#edf7f2
}

.map-hint {
  position:absolute;
  bottom:16px;
  left:18px;
  font-size:8px;
  color:#94a7a1
}

.map-hint span {
  margin:0 5px
}

#topology text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif
}

#topology .device {
  cursor:pointer;
  outline:none
}

#topology .device .selection-halo {
  fill:transparent;
  stroke:transparent
}

#topology .device:hover .selection-halo,#topology .device:focus .selection-halo {
  fill:#eaf5ef;
  stroke:#b6d7ca
}

#topology .device.selected .selection-halo {
  fill:#e8f5ef;
  stroke:#76b5a4
}

#topology .wire {
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

#topology .busbar {
  stroke-width:4
}

#topology .device-label {
  fill:#4e706c;
  font-size:12px
}

#topology .device-value {
  fill:#8da29c;
  font-size:10px
}

#topology .flow-arrow {
  fill:var(--teal)
}

#topology .fault-badge {
  fill:#fff0ed;
  stroke:#efd4cd
}

.time-control {
  display:flex;
  align-items:center;
  gap:13px;
  border-top:1px solid var(--border);
  padding:16px 18px 12px
}

.time-control>button {
  width:30px;
  height:30px;
  background:#eaf5f1;
  border:0;
  border-radius:50%;
  color:var(--teal);
  font-size:11px;
  flex-shrink:0
}

.time-label {
  min-width:42px
}

.time-label span {
  display:block;
  font-size:8px;
  color:#8fa19b
}

.time-label strong {
  font:600 14px/1.8 "Segoe UI",sans-serif;
  font-variant-numeric:tabular-nums;
  color:#4d7166
}

.timeline {
  flex:1;
  min-width:0;
  padding:4px 3px 0
}

.timeline input {
  display:block;
  width:100%;
  height:4px;
  accent-color:var(--teal);
  cursor:pointer;
  margin:2px 0 9px
}

.time-ticks {
  display:flex;
  justify-content:space-between;
  font:8px Arial,sans-serif;
  color:#98aaa3
}

.interval-tag {
  font:9px Arial,sans-serif;
  color:#8ca098;
  white-space:nowrap
}

.detail-tabs {
  display:flex;
  align-items:center;
  gap:22px;
  padding:0 18px;
  border-bottom:1px solid var(--border)
}

.detail-tabs>button {
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  font-size:11px;
  padding:15px 0 13px;
  white-space:nowrap;
  color:#91a09e
}

.detail-tabs>button[aria-selected=true] {
  border-bottom-color:var(--teal);
  color:var(--teal);
  font-weight:600
}

.detail-tabs button span {
  font:9px Arial,sans-serif;
  background:#edf5f2;
  padding:2px 5px;
  border-radius:3px;
  margin-left:5px
}

.human-review {
  margin-left:auto;
  font-size:8px;
  color:#a0aca8;
  white-space:nowrap
}

#detail-content {
  padding:16px 18px;
  min-height:188px
}

.risk-row {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0 0 14px
}

.risk-row:last-child {
  margin:0
}

.risk-level {
  padding:4px 7px;
  border-radius:3px;
  font-size:9px;
  white-space:nowrap;
  background:#fff1ed;
  color:#bf6652
}

.risk-level.amber {
  background:#fff7e6;
  color:#a2823b
}

.risk-level.green {
  background:#edf7f0;
  color:#4c9874
}

.risk-copy {
  min-width:0;
  flex:1
}

.risk-copy h3 {
  font-size:11px;
  font-weight:500;
  margin:2px 0 5px
}

.risk-copy p {
  font-size:10px;
  line-height:1.8;
  color:#91a09b
}

.text-button {
  border:0;
  background:none;
  padding:3px 0;
  color:var(--teal);
  font-size:10px;
  white-space:nowrap
}

.empty-title {
  font-size:12px;
  margin:5px 0 9px;
  display:flex;
  align-items:center;
  gap:8px
}

.empty-title:before {
  content:"✓";
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  background:#ebf6ef;
  border-radius:50%;
  color:#68a489;
  font-size:11px
}

.empty-copy {
  font-size:10px;
  color:#859c93;
  line-height:1.9;
  max-width:530px
}

.scenario-shortcuts {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:17px
}

.scenario-shortcuts button {
  font-size:10px;
  border:1px solid #e2e9e5;
  padding:7px 10px;
  background:#fafcfb;
  color:#5e7b70;
  border-radius:4px
}

.table-wrap {
  overflow:auto
}

.ticket-table {
  width:100%;
  border-collapse:collapse;
  font-size:10px;
  text-align:left;
  min-width:450px
}

.ticket-table th {
  font-weight:400;
  font-size:9px;
  background:#f6f9f7;
  color:#91a09b;
  padding:9px
}

.ticket-table td {
  padding:10px 9px;
  border-bottom:1px solid #f0f3f0;
  line-height:1.7;
  color:#648073
}

.ticket-table td.error {
  color:#c36c58
}

.ticket-title {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#648073;
  margin-bottom:12px
}

.ticket-footnote {
  font-size:9px;
  color:#9baba2;
  margin-top:12px;
  line-height:1.8
}

.log-list {
  list-style:none;
  margin:0;
  padding:0
}

.log-list li {
  font-size:10px;
  line-height:1.8;
  color:#6f8a7d;
  border-left:1px solid #dce9df;
  padding:0 0 13px 13px;
  position:relative
}

.log-list li:before {
  content:"";
  position:absolute;
  left:-3px;
  top:7px;
  background:#8fc2ac;
  width:5px;
  height:5px;
  border-radius:50%
}

.log-list time {
  font:9px Arial,sans-serif;
  color:#a0b0a6;
  margin-right:10px
}

.analysis-column .panel-heading {
  padding:16px 16px 12px
}

.live-label {
  font-size:8px;
  color:#619b85;
  display:flex;
  align-items:center;
  gap:5px
}

.live-label:before {
  content:"";
  width:4px;
  height:4px;
  background:#61a588;
  border-radius:50%
}

#device-detail {
  padding:3px 16px 16px
}

.device-summary {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px 0 17px
}

.device-glyph {
  width:36px;
  height:36px;
  border-radius:7px;
  background:#edf6f1;
  color:#4c9780;
  display:grid;
  place-items:center;
  font-size:21px
}

.device-summary strong {
  font-size:13px;
  font-weight:600;
  display:block
}

.device-summary small {
  display:block;
  font:8px Arial,sans-serif;
  color:#9aafa4;
  margin-top:6px;
  letter-spacing:.5px
}

.state-chip {
  margin-left:auto;
  font-size:9px;
  padding:4px 6px;
  background:#edf6f0;
  color:#538f76;
  border-radius:4px;
  white-space:nowrap
}

.state-chip.off {
  background:#f1f3f4;
  color:#899798
}

.state-chip.danger {
  background:#fff0ed;
  color:#c06552
}

.device-values {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 8px;
  border-top:1px solid #edf2ee;
  padding-top:15px
}

.device-values dt {
  font-size:9px;
  color:#96a69f;
  margin:0 0 6px
}

.device-values dd {
  margin:0;
  font-size:12px;
  color:#526f62;
  font-variant-numeric:tabular-nums
}

.device-description {
  font-size:9px;
  color:#94a49a;
  line-height:1.8;
  margin-top:13px
}

.chart-legend {
  padding:0 16px;
  font-size:8px;
  gap:16px
}

.chart-unit {
  font-size:9px;
  color:#92a59b
}

#trend-chart {
  display:block;
  width:100%;
  height:auto;
  padding:5px 10px 0
}

.chart-note {
  padding:1px 16px 13px;
  font-size:8px;
  color:#9bac9f
}

.strategy-panel {
  border-top:2px solid #85b6a4
}

.strategy-panel .panel-heading {
  padding-top:15px
}

#strategy {
  padding:0 16px 16px
}

.strategy-heading {
  font-size:12px;
  line-height:1.8;
  margin:3px 0 8px;
  font-weight:500
}

.strategy-description {
  font-size:10px;
  color:#889d91;
  line-height:1.9
}

.strategy-comparison {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ecf1ed;
  border-bottom:1px solid #ecf1ed;
  margin:15px 0;
  padding:13px 0;
  gap:8px
}

.strategy-comparison small {
  display:block;
  font-size:9px;
  color:#96a69b;
  margin-bottom:5px
}

.strategy-comparison strong {
  font:600 22px "Segoe UI",Arial,sans-serif;
  letter-spacing:-.7px;
  color:#658375
}

.strategy-comparison strong.before {
  color:#bd8b66
}

.strategy-comparison strong.after {
  color:#27886b
}

.strategy-comparison>span {
  color:#afc4b5
}

.strategy-panel .button {
  width:100%;
  margin-top:13px
}

.strategy-panel .button.applied {
  background:#eff7f1;
  border-color:#d9eadd;
  color:#4f8c69
}

.strategy-footnote {
  font-size:8px;
  color:#a2b0a5;
  margin-top:9px;
  line-height:1.7
}

.workspace-footer {
  padding:19px 1px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:8px;
  color:#9eafa6
}

.workspace-footer>span:first-child {
  letter-spacing:.5px
}

.workspace-footer span span {
  padding:0 7px;
  color:#c2cdc6
}

.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translate(-50%,15px);
  background:#204c40;
  color:white;
  padding:11px 20px;
  border-radius:6px;
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:30;
  max-width:calc(100% - 30px);
  text-align:center
}

.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}

dialog {
  border:1px solid var(--border);
  border-radius:10px;
  padding:25px;
  width:min(540px,calc(100% - 32px));
  color:#395c50;
  box-shadow:0 24px 70px #16382b25
}

dialog::backdrop {
  background:#19362d65
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:19px
}

.dialog-heading h2 {
  font-size:18px
}

.dialog-heading button {
  border:0;
  background:transparent;
  font-size:24px;
  color:#799b89
}

dialog p,dialog dd {
  font-size:12px;
  line-height:1.9;
  color:#7f9688
}

dialog dt {
  font-size:12px;
  font-weight:600;
  margin:17px 0 6px
}

dialog dd {
  margin:0
}

dialog .primary {
  margin-top:12px
}

.no-script {
  padding:24px;
  background:#fff4da;
  position:fixed;
  top:76px;
  left:0;
  right:0;
  z-index:50
}

@media(min-width:1600px) {
  main {
    padding:30px 32px 0
  }
  .work-grid {
    grid-template-columns:minmax(0,1fr) 340px
  }
  .panel-heading h2 {
    font-size:13px
  }
  .topology-canvas>svg {
    max-height:590px
  }
  .metric strong {
    font-size:34px
  }
  .metric {
    padding:20px
  }
  .map-hint {
    font-size:9px
  }
  .device-values dd {
    font-size:14px
  }
  .strategy-description {
    font-size:11px
  }
}

@media(max-width:1200px) {
  .app-shell {
    grid-template-columns:168px minmax(0,1fr)
  }
  .sidebar {
    padding-inline:10px
  }
  .topbar {
    padding-inline:20px;
    gap:20px
  }
  .product-name {
    padding-left:20px
  }
  main {
    padding:20px 18px 0
  }
  .work-grid {
    grid-template-columns:minmax(0,1fr) 260px;
    gap:13px
  }
  .metrics {
    gap:10px
  }
  .metric {
    padding:15px 13px
  }
  .metric strong {
    font-size:25px
  }
  .mini-bars {
    display:none
  }
  .panel-heading {
    padding:14px
  }
  .panel-heading h2 {
    font-size:11px
  }
  .topology-panel .subtle-tag {
    display:none
  }
  .map-toolbar {
    padding:9px 14px
  }
  .legend {
    gap:8px;
    font-size:8px
  }
  .device-search input {
    width:76px
  }
  .human-review {
    display:none
  }
  .detail-tabs {
    gap:20px;
    padding:0 14px
  }
  .top-actions {
    gap:18px
  }
  .top-actions .demo-dot {
    font-size:10px
  }
  .page-heading h1 {
    font-size:21px
  }
  .heading-actions .button {
    font-size:10px;
    padding:9px
  }
  .topology-canvas>svg {
    min-height:320px
  }
}

@media(max-width:1000px) {
  .top-actions .demo-dot {
    display:none
  }
  .app-shell {
    grid-template-columns:150px minmax(0,1fr)
  }
  .sidebar {
    padding-inline:7px
  }
  .workspace-label {
    font-size:12px;
    padding-inline:10px
  }
  .scenario-nav button {
    font-size:11px;
    padding-inline:10px
  }
  .nav-symbol {
    font-size:17px;
    width:15px
  }
  .sidebar-guide {
    margin-top:35px
  }
  .work-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .analysis-column {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px
  }
  .topology-canvas>svg {
    max-height:500px
  }
  .metrics {
    gap:9px
  }
  .metric {
    padding:13px 11px
  }
  .metric strong {
    font-size:23px
  }
  .metric-badge {
    display:none
  }
  .metric small {
    font-size:8px
  }
  .metric>span {
    font-size:10px
  }
  .pv-icon,.risk-mini {
    display:none
  }
  .page-heading {
    align-items:flex-start
  }
  .heading-actions {
    padding-top:23px
  }
  .heading-actions .button {
    padding:8px
  }
  .strategy-comparison strong {
    font-size:18px
  }
  .device-summary {
    gap:8px
  }
  .device-glyph {
    display:none
  }
  .device-summary strong {
    font-size:11px
  }
  .device-summary small {
    font-size:7px
  }
  .analysis-column .panel-heading {
    padding-inline:12px
  }
  .analysis-column .subtle-tag {
    display:none
  }
  #strategy,#device-detail {
    padding-inline:12px
  }
}

@media(max-width:720px) {
  .topbar {
    height:65px;
    padding:0 16px;
    gap:15px
  }
  .brand strong {
    font-size:13px
  }
  .brand small {
    font-size:6px
  }
  .brand-mark {
    width:32px;
    height:32px
  }
  .product-name {
    font-size:11px;
    padding-left:15px
  }
  .product-name span {
    display:none
  }
  .top-actions {
    font-size:10px
  }
  .app-shell {
    display:block
  }
  .sidebar {
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--border)
  }
  .workspace-label,.nav-caption,.sidebar-guide,.sidebar-bottom {
    display:none
  }
  .scenario-nav {
    flex-direction:row;
    gap:4px
  }
  .scenario-nav button {
    justify-content:center;
    padding:10px 5px;
    font-size:10px;
    gap:5px
  }
  .nav-symbol {
    font-size:15px
  }
  .nav-number {
    display:none
  }
  main {
    padding:18px 12px 0
  }
  .page-heading {
    display:block;
    margin-bottom:16px
  }
  .breadcrumb {
    font-size:9px;
    margin-bottom:10px
  }
  .page-heading h1 {
    font-size:21px
  }
  .page-heading p {
    font-size:10px
  }
  .heading-actions {
    padding-top:14px;
    justify-content:flex-end
  }
  .heading-actions .button {
    padding:8px 10px;
    font-size:10px
  }
  .metrics {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-bottom:13px
  }
  .metric {
    padding:13px 15px
  }
  .metric strong {
    font-size:27px
  }
  .metric-badge {
    display:block
  }
  .metric small {
    font-size:8px
  }
  .pv-icon,.risk-mini {
    display:block
  }
  .topology-panel .panel-heading {
    flex-wrap:wrap;
    gap:12px;
    padding:13px
  }
  .view-switch button {
    font-size:9px;
    padding:6px 9px
  }
  .map-toolbar {
    padding:10px 12px;
    gap:5px
  }
  .legend {
    gap:7px;
    font-size:7px
  }
  .legend-line {
    width:10px
  }
  .device-search input {
    font-size:9px;
    width:70px
  }
  .topology-canvas>svg {
    min-height:270px
  }
  .map-stamp {
    font-size:8px;
    top:10px;
    left:12px
  }
  .map-hint {
    font-size:7px;
    bottom:12px;
    left:12px;
    max-width:60%;
    line-height:1.7
  }
  .map-controls {
    right:10px;
    bottom:10px
  }
  .map-controls button {
    height:25px;
    min-width:24px
  }
  .time-control {
    gap:9px;
    padding:13px 12px 10px
  }
  .interval-tag {
    display:none
  }
  .analysis-column {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .strategy-panel {
    grid-column:1/-1
  }
  .strategy-comparison {
    justify-content:flex-start;
    gap:30px
  }
  .strategy-panel .button {
    max-width:250px
  }
  .device-values {
    gap:12px
  }
  .device-summary {
    flex-wrap:wrap
  }
  .device-summary .state-chip {
    font-size:8px
  }
  .detail-tabs {
    gap:18px;
    padding-inline:12px
  }
  .detail-tabs>button {
    font-size:10px
  }
  .detail-tabs button span {
    margin-left:3px
  }
  .risk-row {
    gap:9px
  }
  .risk-copy h3 {
    font-size:10px
  }
  .risk-copy p {
    font-size:9px
  }
  .risk-level {
    padding:4px 5px;
    font-size:8px
  }
  #detail-content {
    padding:14px 12px;
    min-height:150px
  }
  .workspace-footer {
    font-size:7px;
    gap:10px;
    padding-block:16px
  }
  .top-actions a {
    font-size:0
  }
  .top-actions a span {
    font-size:15px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}