:root {
  color-scheme: light;
  --ink: #15252e;
  --muted: #6f8089;
  --line: #dce6e9;
  --panel: #ffffff;
  --canvas: #f3f7f8;
  --nav: #102c32;
  --nav-soft: #183a41;
  --accent: #ef6c3e;
  --accent-dark: #cf4f25;
  --teal: #1a9b8d;
  --danger: #d64553;
  --warn: #da8b22;
  --shadow: 0 16px 42px rgba(28, 55, 63, .08);
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { min-width: 320px; margin: 0; overflow-x: hidden; color: var(--ink); background: var(--canvas); font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; outline: none; }
button:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,155,141,.18); }
.hidden { display: none !important; }
.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.25fr) minmax(430px, .75fr); background: #eaf1f2; }
.login-brand { position: relative; overflow: hidden; padding: 11vh 9vw; color: white; background: linear-gradient(135deg, rgba(10,45,52,.96), rgba(13,83,88,.88)), radial-gradient(circle at 80% 25%, #2ab9a6, transparent 42%); }
.login-brand::after { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(255,255,255,.14); border-radius:50%; right:-190px; bottom:-180px; box-shadow:0 0 0 70px rgba(255,255,255,.03),0 0 0 145px rgba(255,255,255,.025); }
.brand-mark { display:grid; place-items:center; width:68px; height:68px; border-radius:18px 18px 18px 5px; background:var(--accent); color:#fff; font:800 36px/1 Georgia,serif; box-shadow:0 12px 28px rgba(239,108,62,.3); }
.brand-mark.small { width:42px; height:42px; border-radius:12px 12px 12px 4px; font-size:23px; flex:none; }
.login-brand p { margin:28px 0 12px; letter-spacing:.16em; color:#b8d4d5; }
.login-brand h1 { margin:0; max-width:720px; font-size:clamp(42px,5vw,74px); line-height:1.14; letter-spacing:-.03em; }
.login-points { display:flex; gap:12px; flex-wrap:wrap; margin-top:48px; }
.login-points span { padding:8px 14px; border:1px solid rgba(255,255,255,.2); border-radius:99px; color:#d8e9e9; }
.login-card { align-self:center; width:min(420px,80%); margin:auto; padding:46px; border-radius:24px; background:#fff; box-shadow:0 24px 70px rgba(30,57,63,.15); }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; }
.login-card h2 { margin:10px 0 4px; font-size:28px; }
.login-card > p { margin:0 0 28px; color:var(--muted); }
label { display:grid; gap:7px; margin-bottom:16px; color:#3f535c; font-weight:600; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:10px; background:#fbfdfd; color:var(--ink); padding:11px 12px; outline:none; transition:.18s; }
input:focus, select:focus, textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(26,155,141,.1); }
textarea { resize:vertical; font-family:"Cascadia Code",Consolas,monospace; }
.primary,.secondary,.ghost,.icon-button,.text-button { border-radius:9px; padding:10px 16px; border:1px solid transparent; transition:.18s; }
.primary { color:white; background:var(--accent); box-shadow:0 8px 18px rgba(239,108,62,.18); }
.primary:hover { background:var(--accent-dark); transform:translateY(-1px); }
.secondary { color:var(--teal); background:#eef9f7; border-color:#c6e7e2; margin-right:8px; }
.ghost { color:var(--muted); background:white; border-color:var(--line); }
.wide { width:100%; margin-top:8px; }
.icon-button { width:38px; height:38px; padding:0; display:grid; place-items:center; color:var(--ink); background:white; border-color:var(--line); font-size:19px; }
.text-button { padding:4px; color:var(--teal); background:transparent; }
.text-button:hover,.mini-action:hover { color:#08796e; background:#eaf7f5; }
.form-error { min-height:20px; margin-top:12px; color:var(--danger); font-size:13px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:24px 16px; color:#d8e9e9; background:var(--nav); display:flex; flex-direction:column; }
.side-brand { display:flex; gap:12px; align-items:center; padding:0 8px 28px; border-bottom:1px solid rgba(255,255,255,.08); }
.side-brand b,.side-brand span { display:block; }
.side-brand b { font-size:18px; color:#fff; }
.side-brand span { color:#8fb0b2; font-size:11px; }
nav { display:grid; gap:4px; padding-top:22px; }
nav button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; border:0; border-radius:9px; color:#9fbbbd; background:transparent; text-align:left; }
nav button i { width:19px; font:normal 17px/1 Georgia,serif; color:#75a2a4; text-align:center; }
nav button:hover,nav button.active { color:#fff; background:var(--nav-soft); }
nav button.active { box-shadow:inset 3px 0 var(--accent); }
.nav-badge { margin-left:auto; min-width:20px; padding:1px 6px; border-radius:99px; color:#fff; background:var(--danger); font-size:11px; text-align:center; }
.side-foot { margin-top:auto; padding:14px 10px 0; border-top:1px solid rgba(255,255,255,.08); color:#8fb0b2; font-size:12px; }
.live-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:#56d6a1; box-shadow:0 0 0 4px rgba(86,214,161,.12); }
.live-dot.off { background:#e19a42; box-shadow:none; }
.workspace { min-width:0; padding:0 34px 48px; }
.topbar { position:sticky; top:0; z-index:500; display:flex; justify-content:space-between; align-items:center; min-height:92px; margin:0 -34px 28px; padding:18px 34px; border-bottom:1px solid var(--line); background:rgba(243,247,248,.93); backdrop-filter:blur(12px); }
.topbar h1 { margin:2px 0 0; font-size:24px; }
.top-actions,.user-menu { display:flex; align-items:center; gap:12px; }
.user-menu { padding:0 8px 0 12px; border-left:1px solid var(--line); }
.user-menu b,.user-menu span { display:block; }
.user-menu span { color:var(--muted); font-size:11px; }
.avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:white; background:var(--teal); font-weight:700; }
.page { display:none; animation:fade .2s ease; }
.page.active { display:block; }
@keyframes fade { from { opacity:.25; transform:translateY(3px); } }
.metric-grid { display:grid; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:15px; }
.metric,.panel { border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:var(--shadow); }
.metric { position:relative; overflow:hidden; padding:20px; }
.metric::after { content:""; position:absolute; width:60px; height:60px; right:-20px; top:-20px; border-radius:50%; background:#edf6f5; }
.metric span,.metric small { color:var(--muted); }
.metric b { display:block; margin:8px 0 2px; font-size:30px; line-height:1.2; }
.metric em { color:var(--teal); font-style:normal; font-weight:700; }
.metric.accent b { color:var(--teal); }.metric.danger b { color:var(--danger); }
.panel { padding:20px; min-width:0; }
.two-column { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; margin:16px 0; }
.panel-head,.page-actions { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:16px; }
.panel-head > *,.page-actions > * { min-width:0; }
.panel-head { margin-bottom:16px; }
.panel h2,.panel-head h2 { margin:0; font-size:17px; }
.panel-head p,.map-side p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.page-actions { min-height:48px; margin-bottom:15px; }
.filter-row { display:flex; min-width:0; gap:9px; }
.filter-row input { width:260px; }.filter-row select { width:170px; }
.data-time { color:var(--muted); font-size:12px; }
.table-wrap { width:100%; max-width:100%; overflow:auto; overscroll-behavior-x:contain; scrollbar-gutter:stable; }
table { width:100%; border-collapse:collapse; white-space:nowrap; }
th,td { padding:12px 10px; border-bottom:1px solid #e7edef; text-align:left; vertical-align:middle; }
th { color:#73858d; background:#f8fafb; font-size:11px; font-weight:800; letter-spacing:.04em; }
tbody tr:hover { background:#fbfdfd; }
.device-title { min-width:0; }
.device-title b,.device-title span { display:block; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }.device-title span { color:var(--muted); font-size:11px; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:99px; color:#4d616a; background:#edf2f3; font-size:11px; font-weight:700; }
.badge.demo { color:#286697; background:#e7f2fb; }
.badge.online,.badge.resolved,.badge.closed { color:#08796e; background:#e4f7f3; }
.badge.offline,.badge.unknown { color:#75848a; background:#edf1f2; }
.badge.fault,.badge.new,.badge.critical { color:#b43141; background:#fdebed; }
.badge.acknowledged,.badge.dispatched,.badge.in_progress { color:#a46612; background:#fff3dd; }
.mini-action { border:0; border-radius:7px; outline:0; color:var(--teal); background:transparent; padding:5px 8px; box-shadow:none; }
.mini-action:focus,.mini-action:focus-visible { border:0; outline:0; box-shadow:0 0 0 3px rgba(26,155,141,.14); background:#eaf7f5; }
.empty-state { padding:38px 16px; color:var(--muted); text-align:center; }
.empty-state.compact { padding:18px 0; }
.alarm-list { display:grid; gap:10px; }
.alarm-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:11px; border:1px solid #edf0f1; border-radius:11px; }
.alarm-icon { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:var(--danger); background:#fdebed; font-weight:800; }
.alarm-row b,.alarm-row span { display:block; }.alarm-row span { color:var(--muted); font-size:11px; }
.bar-chart { display:grid; gap:16px; padding:8px 0; }
.bar-label { display:flex; justify-content:space-between; margin-bottom:5px; color:#50636b; font-size:12px; }
.bar-track { height:9px; border-radius:99px; background:#edf2f3; overflow:hidden; }
.bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--teal),#5ac6b9); }
.status-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.status-card { padding:17px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:var(--shadow); }
.status-card-head { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }
.status-card-head .device-title { flex:1 1 auto; }
.status-card-head > .badge { flex:none; }
.status-card-badges { display:flex; flex:none; align-items:center; gap:5px; }
.status-card dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; margin:0; }
.status-card dl > div { min-width:0; }
.status-card dt { color:var(--muted); font-size:11px; }.status-card dd { min-width:0; margin:2px 0 0; overflow-wrap:anywhere; word-break:break-word; font-weight:700; }
.topology-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,330px); gap:15px; }
.topology-canvas { min-height:650px; padding:0; overflow:hidden; background:linear-gradient(#fff,#fbfdfd); }
.topology-canvas svg { display:block; width:100%; height:650px; touch-action:none; }
.topology-detail h2 { padding-bottom:9px; margin:6px 0 12px; border-bottom:1px solid var(--line); }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:24px; }
.summary-grid div { min-width:0; padding:10px; border-radius:9px; background:#f4f8f8; }
.summary-grid span,.summary-grid b { display:block; min-width:0; }.summary-grid span { color:var(--muted); font-size:10px; }.summary-grid b { margin-top:2px; overflow-wrap:anywhere; word-break:break-word; }
.legend { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--muted); font-size:12px; }.legend span { display:flex; align-items:center; gap:5px; }
.node-dot { width:9px; height:9px; border-radius:3px; background:var(--teal); }.node-dot.server { background:#6945b8; }.node-dot.relay { background:#4e82bd; }.node-dot.terminal { background:#ef9f40; }.node-dot.offline { background:#a9b4b8; }
.topology-node { cursor:pointer; outline:none; transition:opacity .2s; }.topology-node text { font-size:12px; fill:#31464e; font-weight:700; pointer-events:none; }.topology-node .node-shape { stroke:white; stroke-width:3; filter:drop-shadow(0 4px 5px rgba(30,60,68,.18)); transition:.16s; }
.topology-node:hover .node-shape,.topology-node.selected .node-shape { stroke:#12383f; stroke-width:4; }
.topology-node .terminal-label { opacity:0; font-size:9px; transition:.15s; }.topology-node:hover .terminal-label,.topology-node.selected .terminal-label { opacity:1; }
.topology-node .server-title { fill:#fff; font-size:14px; }.topology-node .server-subtitle { fill:#e9e0ff; font-size:9px; font-weight:600; }
.topology-link { stroke:#a7bbc0; stroke-width:1.5; opacity:.72; transition:opacity .2s,stroke .2s,stroke-width .2s; }.topology-link.relay-link { stroke:#5d91bd; stroke-width:2.2; opacity:.9; }.topology-link.server-link { stroke:#876ac7; stroke-width:2.2; }.topology-link.backup { stroke:#c2cdd0; stroke-dasharray:5 5; opacity:.6; }
#topologySvg.flow-filtered .topology-node.flow-dimmed { opacity:.12; }
#topologySvg.flow-filtered .topology-link.flow-dimmed { opacity:.06; }
.topology-node.flow-active .node-shape { stroke:#f05d3b; stroke-width:5; }
.topology-node.flow-active .terminal-label { opacity:1; }
.topology-link.flow-active { stroke:#f05d3b; stroke-width:4; stroke-dasharray:10 7; opacity:1; animation:topology-flow 1s linear infinite; }
.flow-path { padding:12px; margin-bottom:14px; border:1px solid #f2b39f; border-radius:10px; background:#fff4ef; }
.flow-path span,.flow-path b { display:block; }.flow-path span { color:#a04b32; font-size:10px; }.flow-path b { margin-top:4px; overflow-wrap:anywhere; color:#642b1d; }
.badge.direct { color:#8b451f; background:#fff0df; }.badge.private { color:#315f91; background:#eaf2fb; }
@keyframes topology-flow { to { stroke-dashoffset:-17; } }
.case-list { display:grid; gap:12px; }
.case-card { display:grid; grid-template-columns:5px 1fr auto; gap:15px; padding:18px 18px 18px 0; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:var(--shadow); }
.case-severity { border-radius:6px; background:var(--danger); }.case-severity.medium { background:var(--warn); }.case-severity.low { background:var(--teal); }
.case-main h3 { display:flex; align-items:center; gap:10px; margin:0 0 5px; }.case-main p { margin:0; color:var(--muted); }
.case-meta { display:flex; gap:17px; flex-wrap:wrap; margin-top:12px; color:#53676f; font-size:12px; }
.case-actions { display:flex; align-items:center; gap:7px; }
.case-actions select { min-width:150px; }.case-actions input { width:200px; }
.map-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px); height:calc(100vh - 150px); min-height:560px; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:white; box-shadow:var(--shadow); }
#assetMap { min-width:0; height:100%; z-index:1; }
.map-side { padding:20px; overflow:auto; border-left:1px solid var(--line); }
.map-item { padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:opacity .2s,background .2s; }.map-item b,.map-item span { display:block; }.map-item span { color:var(--muted); font-size:11px; }
.map-item b,.map-item span { overflow-wrap:anywhere; word-break:break-word; }
.map-item.flow-active { padding-right:7px; padding-left:7px; border-radius:8px; background:#fff3ee; }
.map-item.flow-dimmed { opacity:.28; }
.map-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:14px 0; }
.map-summary div { min-width:0; padding:8px; border-radius:8px; background:#f3f7f8; text-align:center; }
.map-summary b,.map-summary span { display:block; }.map-summary b { font-size:17px; }.map-summary span { color:var(--muted); font-size:9px; }
.leaflet-tooltip.map-node-label { margin-top:-9px; padding:2px 5px; border:0; border-radius:6px; color:#29434b; background:rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(24,57,65,.14); font:700 10px/1.25 Inter,"Microsoft YaHei",sans-serif; pointer-events:none; }
.leaflet-tooltip.map-node-label::before { display:none; }
.leaflet-tooltip.map-node-label.terminal { opacity:0; transition:opacity .15s; }
#assetMap.map-detailed .leaflet-tooltip.map-node-label.terminal { opacity:1; }
.command-layout { margin-top:0; }.form-panel label { margin-bottom:14px; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-note { margin-top:12px; color:var(--muted); font-size:12px; white-space:pre-wrap; }
.timeline { display:grid; gap:0; }
.timeline-item { position:relative; padding:0 0 18px 24px; border-left:2px solid #e4ecee; }.timeline-item::before { content:""; position:absolute; left:-6px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--teal); }.timeline-item b,.timeline-item span { display:block; }.timeline-item span { color:var(--muted); font-size:11px; }
.tabbar { display:flex; gap:5px; padding:5px; margin-bottom:16px; width:max-content; border:1px solid var(--line); border-radius:10px; background:white; }
.tabbar button { padding:7px 16px; border:0; border-radius:7px; color:var(--muted); background:transparent; }.tabbar button.active { color:#fff; background:var(--nav); }
.access-tab { display:none; }.access-tab.active { display:block; }
.role-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.role-card { padding:20px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:var(--shadow); }
.role-card h3 { margin:0; }.role-card p { min-height:38px; color:var(--muted); }
.permission-list { display:flex; flex-wrap:wrap; gap:6px; }
.simple-list-item { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); }.simple-list-item span { color:var(--muted); }
dialog { width:min(620px,calc(100vw - 30px)); padding:0; border:0; border-radius:18px; color:var(--ink); box-shadow:0 30px 90px rgba(13,43,50,.28); }
dialog::backdrop { background:rgba(5,30,36,.55); backdrop-filter:blur(3px); }
dialog form { padding:24px; }
.dialog-head,.dialog-actions { display:flex; justify-content:space-between; align-items:center; }.dialog-head h2 { margin:4px 0 0; }.dialog-fields { margin-top:22px; }.dialog-actions { justify-content:flex-end; gap:8px; margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.checkbox-grid label { display:flex; align-items:center; gap:7px; margin:0; padding:8px; border:1px solid var(--line); border-radius:8px; font-weight:400; }.checkbox-grid input { width:auto; }
.toast { position:fixed; z-index:2000; right:25px; bottom:25px; padding:12px 17px; border-radius:10px; color:white; background:var(--nav); box-shadow:var(--shadow); opacity:0; transform:translateY(15px); pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:none; }
pre.inline-json { max-width:440px; overflow:auto; margin:0; padding:5px; border-radius:5px; background:#f3f6f7; font-size:10px; }
@media (max-width:1280px) {
  .workspace { padding-right:24px; padding-left:24px; }
  .topbar { margin-right:-24px; margin-left:-24px; padding-right:24px; padding-left:24px; }
  .metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .topology-layout { grid-template-columns:1fr; }
  .topology-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px 22px; }
  .topology-detail > h2 { grid-column:1 / -1; margin-bottom:0; }
  .topology-detail .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:0; }
}
@media (max-width:980px) {
  .app-shell { grid-template-columns:74px minmax(0,1fr); }
  .sidebar { padding:18px 10px; }
  .side-brand > div:last-child,.sidebar nav button { font-size:0; }
  .side-brand { padding-left:6px; }
  .side-brand .brand-mark { width:40px; }
  .sidebar nav button { justify-content:center; padding:12px; }
  .sidebar nav button i { font-size:19px; }
  .side-foot { display:none; }
  .workspace { padding:0 16px 30px; }
  .topbar { margin:0 -16px 20px; padding:14px 16px; }
  .user-menu > div:last-child { display:none; }
  .two-column { grid-template-columns:1fr; }
  .page-actions { align-items:flex-start; flex-direction:column; }
  .page-actions > *,.filter-row { width:100%; }
  .page-actions > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
  .page-actions .secondary { margin-right:0; }
  .filter-row input,.filter-row select { width:auto; flex:1 1 180px; }
  .map-layout { grid-template-columns:minmax(0,1fr) 240px; }
  .case-card { grid-template-columns:5px 1fr; }
  .case-actions { grid-column:2; flex-wrap:wrap; }
}
@media (max-width:700px) {
  .login-view { grid-template-columns:1fr; }
  .login-brand { display:none; }
  .login-card { width:min(420px,calc(100% - 28px)); padding:30px 24px; }
  .app-shell { display:block; }
  .sidebar { position:sticky; z-index:900; top:0; width:100%; height:auto; padding:8px 10px; }
  .side-brand,.side-foot { display:none; }
  .sidebar nav { display:flex; gap:4px; padding:0; overflow-x:auto; scrollbar-width:none; }
  .sidebar nav::-webkit-scrollbar { display:none; }
  .sidebar nav button { flex:0 0 46px; width:46px; justify-content:center; padding:10px; }
  .sidebar nav button.active { flex-basis:auto; width:auto; padding-right:14px; font-size:12px; }
  .sidebar nav button i { flex:none; }
  .nav-badge { position:absolute; margin:-24px 0 0 25px; font-size:9px; }
  .workspace { padding:0 12px 24px; }
  .topbar { top:54px; min-height:72px; margin:0 -12px 16px; padding:10px 12px; }
  .topbar h1 { font-size:20px; }
  .top-actions { gap:7px; }
  .user-menu { display:none; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric { padding:15px; }
  .metric b { font-size:25px; }
  .panel { padding:14px; }
  .panel-head { align-items:flex-start; }
  .asset-table { min-width:0; table-layout:fixed; white-space:normal; }
  .asset-table th:nth-child(n+3):nth-child(-n+7),
  .asset-table td:nth-child(n+3):nth-child(-n+7) { display:none; }
  .asset-table th:first-child { width:auto; }
  .asset-table th:nth-child(2) { width:92px; }
  .asset-table th:last-child { width:58px; }
  .asset-table th,.asset-table td { padding-right:6px; padding-left:6px; }
  .asset-table td:last-child { text-align:right; }
  .filter-row { flex-direction:column; }
  .filter-row input,.filter-row select { width:100%; flex:auto; }
  .status-grid { grid-template-columns:1fr; }
  .topology-canvas { min-height:480px; }
  .topology-canvas svg { height:480px; }
  .topology-detail { display:block; }
  .topology-detail .summary-grid { grid-template-columns:1fr 1fr; margin-bottom:18px; }
  .legend { font-size:10px; }
  .map-layout { display:grid; grid-template-columns:1fr; height:auto; min-height:0; }
  #assetMap { height:58vh; min-height:420px; }
  .map-side { display:block; max-height:260px; border-top:1px solid var(--line); border-left:0; }
  .form-grid { grid-template-columns:1fr; }
  .case-actions { align-items:stretch; flex-direction:column; }
  .case-actions select,.case-actions input { width:100%; min-width:0; }
  .role-grid { grid-template-columns:1fr; }
  .checkbox-grid { grid-template-columns:1fr; }
  dialog form { padding:18px; }
}
@media (max-width:460px) {
  .metric-grid { grid-template-columns:1fr; }
  .topbar .eyebrow { display:none; }
  .topbar { min-height:64px; }
  .ghost { padding-right:11px; padding-left:11px; }
  .page-actions > div:last-child { width:100%; }
  .page-actions > div:last-child button { flex:1 1 auto; }
  .summary-grid { grid-template-columns:1fr; }
  .alarm-row { grid-template-columns:auto minmax(0,1fr); }
  .alarm-row > div:last-child { grid-column:2; }
}