.subpanel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
  background: #fbfcfe;
}
.health-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.health-card {
  background: #f5f8fb;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
.health-card span { display:block; color:var(--muted); font-size:12px; }
.health-card strong { display:block; font-size:23px; margin-top:4px; }
#healthChart svg { width:100%; height:220px; display:block; }
#healthChart text { fill:#68798b; font:11px system-ui; }
#healthChart .gridline { stroke:#e8edf3; stroke-width:1; }
#healthChart .metric { stroke:#7c3aed; fill:none; stroke-width:2.5; }
#probeChart svg { width:100%; height:220px; display:block; }
#probeChart text { fill:#68798b; font:11px system-ui; }
#probeChart .gridline { stroke:#e8edf3; stroke-width:1; }
#probeChart .probe-metric { stroke:#e07a16; fill:none; stroke-width:2.5; }
.probe-section { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; }
.probe-error { color:#a46900; background:#fff6dc; border-radius:8px; padding:8px 10px; font-size:12px; }
.wan-cards { display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:14px; }
.wan-card { border:1px solid var(--line); border-radius:12px; background:white; padding:16px; }
.wan-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.wan-card h4 { margin:0; font-size:20px; }
.wan-card small { display:block; color:var(--muted); margin-top:2px; }
.wan-card dl { display:grid; grid-template-columns:1fr auto; gap:7px 16px; margin:15px 0 0; }
.wan-card dt { color:var(--muted); }
.wan-card dd { margin:0; text-align:right; font-weight:600; }
.wan-status { border-radius:999px; padding:5px 9px; font-size:12px; font-weight:700; white-space:nowrap; }
.wan-status.active,.wan-status.traffic { color:#087443; background:#e4f7ed; }
.wan-status.standby { color:#795500; background:#fff2c9; }
.wan-status.down { color:#a51d2d; background:#ffe7ea; }
.wan-status.unavailable { color:#667085; background:#edf1f5; }
.stats .panel { padding:18px; }
.header-button { color:white; background:#244052; border:1px solid #486072; padding:10px 14px; border-radius:8px; font-size:13px; font-weight:600; text-decoration:none; }
.alerts-panel { border-left:5px solid #d8e0e8; }
.alerts-panel.has-alerts { border-left-color:var(--red); }
.alert-count { min-width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#edf1f5; font-weight:800; }
.has-alerts .alert-count { background:#ffe7ea; color:var(--red); }
.alert-empty { padding:18px; text-align:center; color:var(--green); background:#eef9f4; border-radius:10px; }
.active-alert { display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:16px; padding:13px 0; border-top:1px solid var(--line); }
.active-alert:first-child { border-top:0; }
.alert-level { border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; text-align:center; }
.alert-level.critical { color:#a51d2d; background:#ffe7ea; }
.alert-level.warning { color:#795500; background:#fff2c9; }
.active-alert b,.active-alert small { display:block; }
.active-alert small { color:var(--muted); }
.dashboard-loading { text-align:center; padding:80px 20px; }
.dashboard-action,.alert-link,.table-link { display:inline-block; color:white; background:var(--blue); border-radius:8px; padding:10px 14px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dashboard-stats { grid-template-columns:repeat(6,minmax(125px,1fr)); gap:14px; }
.dashboard-stats .panel { border-top:4px solid #d7e0e9; }
.dashboard-tile { width:100%; margin-bottom:24px; text-align:left; color:var(--ink); cursor:pointer; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.dashboard-tile:hover { transform:translateY(-2px); box-shadow:0 9px 22px #10263818; filter:none; }
.dashboard-tile:focus-visible { outline:3px solid #9bbdf5; outline-offset:2px; }
.dashboard-tile.selected { background:#eef5ff; border-color:var(--blue); box-shadow:0 0 0 2px #2463eb26; }
.dashboard-tile span,.dashboard-tile strong,.dashboard-tile small { display:block; }
.dashboard-tile span { color:var(--muted); font-size:13px; font-weight:400; }
.dashboard-tile strong { font-size:34px; margin-top:8px; }
.dashboard-tile small { color:var(--muted); font-size:11px; margin-top:7px; font-weight:500; }
.dashboard-stats .panel:nth-child(2) { border-top-color:var(--green); }
.dashboard-stats .panel:nth-child(3),.dashboard-stats .panel:nth-child(5) { border-top-color:var(--red); }
.dashboard-stats .panel:nth-child(6) { border-top-color:#d99000; }
.amber { color:#a46900; }
.wan-overview td small,.wan-state+small { display:block; color:var(--muted); margin-top:4px; }
.wan-state { display:inline-block; border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; }
.wan-state.active,.wan-state.traffic { color:#087443; background:#e4f7ed; }
.wan-state.standby { color:#795500; background:#fff2c9; }
.wan-state.down { color:#a51d2d; background:#ffe7ea; }
.wan-state.unavailable,.wan-state.neutral { color:#667085; background:#edf1f5; }
.filter-status { color:var(--muted); font-size:12px; }
.traffic-warning { color:#a46900!important; font-weight:700; }
fieldset { border:1px solid var(--line); border-radius:12px; padding:16px 18px 2px; margin:18px 0; }
fieldset legend { padding:0 8px; font-weight:750; }
.field-subtitle { display:block; margin-top:9px; color:var(--muted); font-size:11px; font-weight:600; }
.field-subtitle+input { margin-top:4px; }
.role-badge { display:inline-block; border-radius:999px; padding:2px 7px; margin-left:5px; color:#2457a7; background:#e8f1ff; font-size:10px; font-weight:800; }
.wan-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.wan-card-actions button { width:100%; }
.report-router { padding:12px 14px; border-left:4px solid var(--blue); background:#eef5ff; font-weight:750; }
.report-ports { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; max-height:260px; overflow:auto; padding-bottom:14px; }
.report-port { display:flex; align-items:flex-start; gap:9px; padding:10px; border:1px solid var(--line); border-radius:9px; background:white; cursor:pointer; }
.report-port:hover { border-color:#9bbdf5; background:#f7faff; }
.report-port input { width:auto; margin:3px 0 0; }
.report-port span,.report-port b,.report-port small { display:block; }
.report-port small { margin-top:3px; color:var(--muted); }
.permission-toggle { width:18px; height:18px; margin:0; vertical-align:middle; }
.permission-toggle:disabled { cursor:not-allowed; opacity:.35; }
dialog.wide-dialog { width:min(1280px,96vw); max-width:none; }
.update-dialog { width:min(900px,96vw); max-width:none; }
.update-section { border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:16px; }
.update-section h3 { margin-top:0; }
.update-actions { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.system-packages { max-height:240px; overflow:auto; margin-top:12px; }
.system-packages table { min-width:620px; }
#systemUpdateLog { max-height:260px; overflow:auto; padding:12px; border-radius:8px; background:#102638; color:#dceaf4; white-space:pre-wrap; font-size:11px; }
#usersDialog .scroll { max-height:calc(90vh - 190px); overflow:auto; }
#usersDialog table { min-width:1080px; }
#usersDialog th,#usersDialog td { padding-left:10px; padding-right:10px; }
@media (max-width:800px) {
  .health-stats { grid-template-columns:repeat(2,1fr); }
  .wan-cards { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .active-alert { grid-template-columns:1fr; gap:8px; }
  .active-alert button { width:100%; }
  .dashboard-stats { grid-template-columns:repeat(2,1fr); }
  .dashboard-title { align-items:stretch; }
  .dashboard-action,.alert-link { text-align:center; width:100%; }
  .report-ports { grid-template-columns:1fr; }
  .wan-card-actions { grid-template-columns:1fr; }
  dialog.wide-dialog { width:96vw; padding:18px; }
}