/* Private CDN: shared console styles, no remote assets or runtime dependencies. */
:root {
  color-scheme:light;
  --bg:#f5f7fb;
  --surface:#fff;
  --text:#17243c;
  --muted:#76849a;
  --line:#e8edf5;
  --primary:#2563eb;
  --primary-soft:#edf3ff;
  --green:#159565;
  --orange:#c57b18;
  --red:#d45160;
  --radius:16px;
  --page-padding:24px;
  --shadow:0 4px 22px #24457405;
  font:14px/1.55 Inter,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:radial-gradient(ellipse at 85% 0,#eaf2ff88,transparent 55%),var(--bg)
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
button,a,summary {
  touch-action:manipulation
}
button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--primary);
  color:#fff;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s,box-shadow .18s,transform .18s;
  white-space:nowrap
}
button:hover {
  background:#1d54ce;
  box-shadow:0 3px 9px #2563eb20
}
button:active {
  transform:translateY(1px)
}
button:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none
}
button.quiet {
  background:#fff;
  color:#4b607e;
  border-color:#e0e8f4;
  box-shadow:0 2px 3px #203d6403
}
button.quiet:hover {
  color:var(--primary);
  background:#f2f6ff;
  border-color:#cddcff
}
button.danger {
  background:#fff0f1;
  color:#c74656;
  border-color:transparent
}
button.danger:hover {
  background:#ffe3e6
}
.icon {
  width:18px;
  height:18px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  flex-shrink:0
}
.icon-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.icon-button {
  width:36px;
  height:36px;
  padding:8px;
  flex-shrink:0
}
a {
  color:var(--primary);
  text-decoration:none
}
a:hover {
  text-decoration:none
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #8db6ff;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
.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
}
.skip-link {
  position:fixed;
  top:-60px;
  left:16px;
  background:white;
  padding:10px;
  z-index:100
}
.skip-link:focus {
  top:10px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:26px;
  line-height:1.4;
  letter-spacing:-.6px;
  font-weight:700
}
h2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  letter-spacing:-.2px;
  line-height:1.5
}
h3 {
  font-size:14px;
  line-height:1.5
}
p {
  line-height:1.7
}
small,.hint {
  font-size:11px;
  line-height:1.7;
  color:var(--muted)
}
strong,b {
  font-variant-numeric:tabular-nums
}
.hint {
  margin:5px 0 0;
  overflow-wrap:anywhere
}
.eyebrow {
  display:block;
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:600;
  color:#8b9bb0;
  margin-bottom:4px
}
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  display:flex;
  flex-direction:column;
  width:220px;
  background:#ffffffba;
  border-right:1px solid #e6edf7;
  backdrop-filter:blur(16px);
  padding:25px 15px 17px;
  transition:width .2s,transform .2s
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font-size:18px;
  font-weight:750;
  white-space:nowrap
}
.brand-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:9px;
  color:white;
  background:#2563eb;
  box-shadow:0 4px 10px #2563eb20
}
.brand-logo .icon {
  width:20px;
  height:20px
}
.brand small {
  display:block;
  font-size:10px;
  font-weight:400;
  margin-top:1px;
  letter-spacing:.2px
}
.sidebar-caption {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9aa6b8;
  font-size:10px;
  letter-spacing:.8px;
  margin:31px 6px 12px
}
.sidebar-caption .icon-button {
  width:26px;
  height:26px;
  min-height:26px;
  padding:4px;
  border:0;
  background:transparent
}
.sidebar nav {
  display:flex;
  flex-direction:column;
  gap:6px
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:11px 14px;
  border-radius:9px;
  color:#64728a;
  font-size:12px;
  font-weight:550;
  transition:background .18s,color .18s;
  white-space:nowrap
}
.nav-item>.icon:last-child {
  width:12px;
  height:12px;
  margin-left:auto;
  opacity:0
}
.nav-item:hover {
  color:var(--primary);
  background:#f0f5fe
}
.nav-item.active {
  background:var(--primary);
  color:#fff;
  box-shadow:0 4px 10px #2563eb22
}
.nav-item.active>.icon:last-child {
  opacity:.7
}
.sidebar-bottom {
  margin-top:auto;
  padding:24px 10px 0
}
.sidebar-bottom>p {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}
.sidebar-bottom>small {
  font-size:10px;
  color:#96a3b7
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1bad7d;
  flex-shrink:0;
  box-shadow:0 0 0 3px #1bad7d0c
}
.status-dot.muted {
  background:#a5b1c1;
  box-shadow:none
}
.status-dot.warning {
  background:#dc992c
}
.sidebar-account {
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:20px;
  font-size:11px
}
.sidebar-account>span:nth-child(2) {
  flex:1
}
.sidebar-account small {
  display:block;
  font-size:10px
}
.sidebar-account>.icon {
  width:15px;
  color:#94a3b8
}
.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#e9f1ff;
  color:var(--primary);
  flex-shrink:0
}
.avatar .icon {
  width:17px;
  height:17px
}
#dashboard {
  display:flex;
  min-height:100dvh
}
.app-shell {
  flex:1;
  min-width:0;
  margin-left:220px;
  transition:margin-left .2s
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 var(--page-padding);
  height:66px;
  border-bottom:1px solid #e7edf5;
  background:#ffffff80;
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:30
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:11px;
  color:#94a1b3;
  font-size:11px
}
.breadcrumb>.icon {
  width:12px;
  height:12px
}
.breadcrumb strong {
  color:#51627d;
  font-weight:500
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:15px
}
.connection-label {
  display:flex;
  align-items:center;
  gap:7px;
  color:#8391a4;
  font-size:10px
}
.topbar .icon-button {
  border:0;
  background:transparent;
  color:#6a7f9b
}
.notification-button {
  position:relative
}
.notification-button>span {
  position:absolute;
  top:0;
  right:0;
  min-width:14px;
  padding:0 3px;
  background:#e15e69;
  border-radius:8px;
  color:#fff;
  font-size:9px;
  line-height:14px
}
.admin-menu {
  position:relative
}
.admin-menu>summary {
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  font-size:11px;
  color:#53647c
}
.admin-menu>summary>.icon {
  width:12px;
  transform:rotate(90deg)
}
.admin-dropdown {
  position:absolute;
  right:0;
  top:42px;
  min-width:170px;
  padding:12px;
  background:white;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 8px 30px #203d6410
}
.admin-dropdown small {
  display:block;
  margin:0 5px 8px
}
.admin-dropdown button {
  width:100%
}
#mobile-menu {
  display:none
}
#workspace {
  width:100%;
  min-width:0;
  margin:0;
  padding:24px var(--page-padding) 0
}
.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:23px
}
.page-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:5px
}
.page-toolbar {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.page-toolbar>span:not(.sr-only) {
  font-size:10px;
  color:#8c9bb0
}
.page-toolbar .icon-button {
  background:#fff
}
.stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  margin-bottom:11px
}
.stat-card {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
  min-height:104px;
  background:#ffffffd9;
  border:1px solid #ffffff;
  border-radius:var(--radius);
  padding:17px 16px;
  box-shadow:var(--shadow)
}
.stat-card>div {
  min-width:0
}
.stat-card small {
  display:block;
  font-size:11px;
  white-space:nowrap
}
.stat-card strong {
  display:block;
  font-size:25px;
  line-height:1.35;
  color:#1a2a47;
  font-weight:650;
  letter-spacing:-.4px;
  white-space:nowrap;
  margin:3px 0
}
.stat-caption {
  display:block;
  font-size:9px;
  color:#a0aabd
}
.stat-icon {
  width:42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}
.stat-icon .icon {
  width:22px;
  height:22px
}
.green {
  background:#e8f8ef;
  color:#1ba570
}
.blue {
  background:#eaf1ff;
  color:#3977ec
}
.violet {
  background:#f0ecff;
  color:#8660d6
}
.orange {
  background:#fff2e4;
  color:#d68a32
}
.teal {
  background:#e5f7f7;
  color:#22a8ae
}
.rose {
  background:#ffedf2;
  color:#df688b
}
.amber {
  background:#fff7df;
  color:#d4a01a
}
.statistics-note {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  color:#91a0b3;
  margin:10px 2px 20px
}
.statistics-note p {
  font-size:10px
}
.statistics-note>details {
  max-width:50%
}
.statistics-note summary {
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:4px
}
.statistics-note .icon {
  width:12px;
  height:12px
}
.statistics-note details p {
  margin-top:8px
}
.workspace-grid {
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(245px,2.7fr);
  gap:20px;
  align-items:start
}
.primary-column,.auxiliary-column {
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0
}
.panel {
  min-width:0;
  border:1px solid #fff;
  background:#ffffffdf;
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow);
  scroll-margin-top:90px
}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:17px
}
.section-title>div {
  min-width:0
}
.section-title .hint {
  margin-top:5px
}
.section-title h2>.count-badge {
  font-weight:500
}
.count-badge {
  display:inline-block;
  background:#f0f4fa;
  border-radius:6px;
  padding:1px 6px;
  color:#8b9bb2;
  font-size:10px;
  font-weight:500
}
.count-badge:empty {
  display:none
}
.trend-filters {
  display:flex;
  gap:8px;
  flex-shrink:0
}
.trend-filters label {
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  font-size:10px;
  color:var(--muted)
}
.trend-filters select {
  max-width:132px;
  padding:6px 22px 6px 8px;
  min-height:30px;
  font-size:10px
}
.trend-chart {
  position:relative;
  margin-top:20px;
  min-height:212px
}
.trend-chart svg {
  display:block;
  width:100%;
  height:210px;
  overflow:visible
}
.chart-grid {
  stroke:#e9eef7;
  stroke-dasharray:3 5
}
.chart-axis {
  fill:#8a99ad;
  font-size:10px;
  font-family:inherit
}
.chart-labels {
  display:flex;
  justify-content:space-between;
  gap:4px;
  padding:5px 0 0 50px;
  color:#91a0b4;
  font-size:9px
}
.chart-labels span {
  white-space:nowrap
}
.chart-bar {
  transition:opacity .18s;
  cursor:crosshair
}
.chart-bar:hover {
  opacity:.7
}
.chart-hit {
  fill:transparent;
  cursor:crosshair
}
.chart-tooltip {
  position:absolute;
  inset:6px 8px auto auto;
  max-width:90%;
  pointer-events:none;
  background:#fff;
  color:#425472;
  box-shadow:0 4px 18px #223a6518;
  border:1px solid #e3eaf5;
  border-radius:8px;
  padding:8px 12px;
  font-size:11px;
  z-index:2
}
.chart-empty {
  min-height:200px;
  display:grid;
  place-content:center;
  text-align:center;
  padding:30px 18px;
  color:#8b9ab0;
  background:#f9fbfe;
  border:1px dashed #e4ebf6;
  border-radius:10px;
  font-size:12px
}
.table-details {
  margin-top:12px
}
.table-wrap {
  width:100%;
  overflow:auto;
  margin-top:10px
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:11px
}
th {
  color:#8392a9;
  font-weight:500;
  background:#fafcff
}
th,td {
  padding:10px 8px;
  border-bottom:1px solid #eef2f8;
  white-space:nowrap
}
td {
  color:#53657e
}
summary {
  color:#5b7394;
  font-size:11px;
  cursor:pointer;
  line-height:1.7
}
summary::marker {
  color:#9cacc1
}
summary:hover {
  color:var(--primary)
}
details[open]>summary {
  margin-bottom:10px
}
.node-add-form {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:#f8fafd;
  border:1px solid #edf2f8;
  border-radius:9px;
  padding:10px 12px;
  margin-bottom:15px
}
.node-add-form>label {
  font-size:10px;
  margin:0;
  white-space:nowrap
}
.inline {
  display:flex;
  gap:8px;
  align-items:center;
  min-width:0
}
.inline input {
  min-width:0;
  flex:1;
  margin:0
}
.node-add-form .inline {
  flex:1;
  max-width:340px
}
.node-add-form input {
  padding:7px 10px;
  min-height:34px;
  font-size:11px
}
.node-add-form button {
  min-height:34px;
  font-size:11px
}
.cards {
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0
}
.card {
  min-width:0;
  background:#fff;
  border:1px solid #e5ecf8;
  border-radius:12px;
  padding:17px 16px;
  overflow-wrap:anywhere;
  box-shadow:0 2px 5px #24457402
}
.card .section-title {
  margin-bottom:6px;
  gap:7px;
  align-items:flex-start
}
.card h3 {
  font-size:13px;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-weight:650;
  min-width:0
}
.card p {
  font-size:11px;
  color:#8797ad;
  margin-top:6px
}
.card .hint {
  font-size:10px
}
.node-heading {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}
.node-heading>.status-dot {
  margin-top:1px
}
.badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-shrink:0;
  vertical-align:middle;
  max-width:100%;
  padding:2px 7px;
  border-radius:20px;
  font-size:10px;
  line-height:1.6;
  white-space:nowrap;
  background:#e7f7ee;
  color:#25936b;
  font-weight:500
}
.badge.offline {
  background:#fff4e5;
  color:#b47d2d
}
.badge.critical {
  background:#fff0f1;
  color:#c75261
}
.badge.neutral {
  background:#eef3fc;
  color:#5d80b3
}
.resource-line {
  font-size:10px!important;
  color:#8b9ab0!important
}
.node-traffic {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 12px;
  border-top:1px solid #eff2f8;
  border-bottom:1px solid #eff2f8;
  padding:14px 0;
  margin:13px 0 12px
}
.node-traffic>div {
  min-width:0
}
.node-traffic small {
  display:block;
  font-size:10px;
  color:#91a0b6
}
.node-traffic b {
  display:block;
  color:#277b68;
  font-size:17px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.2px
}
.node-traffic>div:nth-child(3) b,.node-traffic>div:nth-child(4) b {
  color:#34889b
}
.detail-body {
  padding-top:3px
}
.detail-body p {
  font-size:10px
}
.card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:13px
}
.card-footer p {
  margin:0;
  font-size:10px
}
.card-footer button {
  min-height:29px;
  padding:5px 8px;
  font-size:10px
}
.card-actions {
  padding-top:10px;
  border-top:1px solid #eff2f8;
  justify-content:flex-start
}
.card-actions .danger {
  margin-left:auto
}
.section-footnote {
  padding-top:12px;
  margin-top:2px;
  font-size:10px
}
.section-footnote p {
  font-size:10px
}
.domain-origin {
  display:block;
  color:#8495ac;
  font-size:11px;
  margin-top:6px;
  overflow-wrap:anywhere
}
.domain-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
  margin-top:10px
}
.domain-meta small {
  font-size:10px;
  color:#718bb4
}
.domain-meta .badge {
  font-size:9px
}
.domain-meta .badge:first-child {
  background:#eff4fc;
  color:#6685b3
}
.domain-meta .badge:nth-child(2) {
  background:#e6f7ef;
  color:#349b76
}
.ttl-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  font-size:10px;
  color:#8998ad;
  margin-top:10px
}
.ttl-list b {
  font-weight:500;
  color:#566d8e
}
.certificate-status {
  border-top:1px solid #eff2f8;
  padding-top:10px;
  font-size:10px!important
}
.certificate-cards .card>button {
  margin-top:13px;
  min-height:31px;
  font-size:10px
}
.certificate-cards .card h3 {
  font-size:12px
}
.certificate-details {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:5px 14px;
  font-size:10px;
  color:#8b9ab0;
  margin:11px 0
}
.certificate-details dd {
  margin:0;
  color:#607b9e;
  overflow-wrap:anywhere
}
.certificate-details dt {
  color:#8b9ab0
}
.error {
  color:var(--red)!important;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.empty {
  color:#91a0b6;
  font-size:12px;
  padding:24px 15px;
  text-align:center;
  grid-column:1/-1;
  border:1px dashed #e6edf7;
  border-radius:10px;
  background:#fafcff
}
.operations>details>summary {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  list-style:none;
  color:#526b8c;
  font-weight:600
}
.operations summary>span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}
.operations summary .icon {
  width:16px;
  height:16px
}
.operations summary>span:first-child::after {
  content:'⌄';
  margin-left:6px;
  color:#9aabc2
}
.event {
  display:grid;
  grid-template-columns:140px minmax(0,1fr);
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid #eef3f9;
  font-size:11px;
  overflow-wrap:anywhere
}
.event time {
  color:#98a5b7;
  font-size:10px
}
.auxiliary-column .panel {
  padding:20px
}
.auxiliary-column h2 {
  font-size:14px
}
.auxiliary-column .section-title {
  margin-bottom:14px
}
.alert-panel .hint {
  font-size:9px;
  margin-top:14px
}
.alert-item {
  border:1px solid #f6e6c9;
  background:#fffbf1;
  color:#ad8448;
  padding:10px;
  border-radius:8px;
  font-size:10px;
  line-height:1.7;
  margin-top:7px;
  overflow-wrap:anywhere
}
.alert-item.critical {
  border-color:#f5dfe4;
  background:#fff6f7;
  color:#c76372
}
.alert-item.info {
  border-color:#e1eafa;
  background:#f5f8ff;
  color:#758eaf
}
.alert-ok {
  padding:12px;
  background:#effaf4;
  color:#439674;
  font-size:11px;
  border-radius:9px
}
.alert-ok::before {
  content:'✓';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  background:#21b875;
  color:white;
  border-radius:50%;
  margin-right:6px
}
.live-label {
  font-size:9px;
  color:#97a7bd
}
.resource-item {
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 0;
  border-bottom:1px solid #eff3f8
}
.resource-item:first-child {
  padding-top:2px
}
.resource-item:last-child {
  padding-bottom:0;
  border:0
}
.resource-item .stat-icon {
  width:36px;
  height:36px;
  border-radius:11px
}
.resource-item .icon {
  width:18px;
  height:18px
}
.resource-item small {
  display:block;
  font-size:10px
}
.resource-item strong {
  font-size:14px;
  color:#324967;
  font-weight:600
}
.resource-item .resource-caption {
  font-size:9px;
  color:#98a7ba
}
.quick-actions>button {
  display:flex;
  width:100%;
  justify-content:flex-start;
  margin-top:9px;
  min-height:38px;
  font-size:11px
}
.quick-actions>button>.icon:last-child {
  margin-left:auto;
  width:13px;
  height:13px;
  opacity:.5
}
.quick-actions>button.quiet {
  background:#f4f7fd;
  border-color:transparent;
  color:#607a9f
}
.quick-actions>button.quiet:hover {
  background:#eaf1fe;
  color:var(--primary)
}
dl {
  margin:0
}
.system-panel dl>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  padding:10px 0;
  border-bottom:1px solid #f0f3f8;
  font-size:10px
}
.system-panel dt {
  color:#90a0b6;
  white-space:nowrap
}
.system-panel dd {
  text-align:right;
  margin:0;
  color:#5d7597;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums
}
.system-panel .hint {
  font-size:9px;
  margin-top:12px
}
.settings-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:22px 0;
  border-top:1px solid #eef2f8
}
.settings-row>div {
  flex:1;
  min-width:0
}
.settings-row h3 {
  font-size:13px
}
.settings-row p {
  font-size:11px;
  color:#8a9ab0;
  margin-top:5px
}
.settings-row>button {
  font-size:11px
}
footer {
  display:flex;
  align-items:center;
  gap:12px;
  padding:25px 0;
  color:#8b9ab0;
  font-size:10px
}
footer>span:last-child {
  margin-left:auto;
  color:#a6b1c1
}
/* Forms and dialog treatments shared by every existing workflow. */
label {
  display:block;
  color:#6b7d96;
  font-size:12px;
  margin:0 0 14px
}
input,select,textarea {
  display:block;
  width:100%;
  min-width:0;
  min-height:38px;
  background:#fff;
  border:1px solid #dfe7f2;
  border-radius:8px;
  padding:9px 11px;
  color:#334965;
  font-size:12px;
  outline:none;
  transition:border-color .18s,box-shadow .18s
}
input::placeholder,textarea::placeholder {
  color:#a2afc1
}
input:focus,select:focus,textarea:focus {
  border-color:#74a1f5;
  box-shadow:0 0 0 3px #2563eb0c
}
input:invalid:not(:placeholder-shown):not(:focus) {
  border-color:#e7c8ce
}
label>input,label>select,label>textarea {
  margin-top:7px
}
textarea {
  resize:vertical;
  line-height:1.7;
  min-height:80px
}
input[type=checkbox] {
  display:inline-block;
  min-height:0;
  width:14px;
  height:14px;
  vertical-align:-2px;
  margin:0 6px 0 0;
  accent-color:var(--primary)
}
.checks {
  display:flex;
  flex-wrap:wrap;
  gap:17px;
  margin:18px 0 12px
}
.checks label {
  margin:0;
  font-size:11px
}
.check {
  font-size:11px;
  line-height:1.8
}
.ttl-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.ttl-grid label {
  font-size:11px
}
dialog {
  width:min(620px,calc(100vw - 32px));
  max-width:620px;
  max-height:calc(100dvh - 48px);
  overflow-y:auto;
  border:1px solid #e0e8f5;
  border-radius:16px;
  background:#fff;
  color:var(--text);
  padding:26px;
  box-shadow:0 20px 80px #203c6429
}
dialog::backdrop {
  background:#263c5c38;
  backdrop-filter:blur(3px)
}
dialog .section-title {
  margin-bottom:20px
}
dialog h2 {
  font-size:18px
}
dialog p.hint {
  margin:0 0 16px;
  font-size:11px
}
dialog .ttl-grid {
  margin-top:15px
}
dialog h3 {
  margin:20px 0 10px;
  font-size:12px
}
dialog form>button[type=submit],dialog form>button:not([type]) {
  margin-top:8px
}
#purge-dialog h2 {
  margin-bottom:12px
}
#purge-domain {
  color:#7186a4;
  font-size:12px;
  margin-bottom:15px
}
#credentials {
  background:#f0f7ff;
  border:1px solid #d9e8ff;
  padding:16px;
  border-radius:10px;
  margin-bottom:15px
}
#credentials p {
  font-size:11px;
  color:#587da8
}
pre {
  white-space:pre-wrap;
  word-break:break-all;
  font-size:11px;
  color:#587da8;
  user-select:all
}
#install-command {
  font-family:Consolas,monospace;
  font-size:11px;
  background:#f6f9fd;
  user-select:all;
  margin:14px 0
}
.toast {
  position:fixed;
  bottom:22px;
  right:24px;
  max-width:min(480px,calc(100vw - 32px));
  z-index:100;
  padding:14px 19px;
  background:#fff;
  border:1px solid #d6eade;
  border-left:4px solid #28aa76;
  border-radius:10px;
  color:#42705e;
  font-size:12px;
  box-shadow:0 8px 28px #1d39551a;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.toast[data-kind=error] {
  border-color:#f1d8df;
  border-left-color:#d86076;
  color:#b84a60
}
.login-panel {
  width:min(440px,calc(100vw - 32px));
  margin:12vh auto;
  padding:34px;
  border:1px solid #fff;
  border-radius:20px;
  background:#fffffff2;
  box-shadow:0 12px 60px #264e8d08
}
.login-panel .brand {
  margin-bottom:36px
}
.login-panel h1 {
  font-size:25px;
  margin:10px 0
}
.login-panel>p {
  font-size:12px;
  color:#90a0b6
}
.login-panel form {
  margin:27px 0 15px
}
.login-panel form label {
  margin-bottom:7px
}
.login-panel form>button {
  width:100%;
  margin-top:17px;
  min-height:41px
}
.login-panel>.hint {
  font-size:10px
}
.sidebar-overlay {
  display:none
}
.is-refreshing #refresh-button .icon {
  animation:refresh-spin .8s linear infinite
}
.is-busy {
  cursor:progress
}
@keyframes refresh-spin {
  to {
    transform:rotate(360deg)
  }
}
/* Compact desktop and mobile adaptations. */
body.sidebar-collapsed .sidebar {
  width:76px;
  padding-left:10px;
  padding-right:10px
}
body.sidebar-collapsed .app-shell {
  margin-left:76px
}
body.sidebar-collapsed .brand {
  justify-content:center
}
body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-item>span,body.sidebar-collapsed .nav-item>.icon:last-child,body.sidebar-collapsed .sidebar-bottom,body.sidebar-collapsed .sidebar-caption {
  display:none
}
body.sidebar-collapsed .sidebar nav {
  margin-top:35px
}
body.sidebar-collapsed .nav-item {
  justify-content:center;
  padding:12px
}
body.sidebar-collapsed .brand {
  margin-bottom:0
}
body.sidebar-collapsed #mobile-menu {
  display:flex
}
@media(min-width:1700px) {
  .node-cards {
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
  }
  .panel {
    padding:24px
  }
  .workspace-grid {
    gap:24px
  }
  .primary-column,.auxiliary-column {
    gap:24px
  }
  .stat-card {
    padding:20px
  }
  .stat-card strong {
    font-size:28px
  }
}
@media(max-width:1350px) {
  .sidebar {
    width:200px;
    padding-left:12px;
    padding-right:12px
  }
  .app-shell {
    margin-left:200px
  }
  #workspace {
    padding:24px var(--page-padding) 0
  }
  .topbar {
    padding:0 var(--page-padding)
  }
  .workspace-grid {
    gap:16px;
    grid-template-columns:minmax(0,7fr) minmax(225px,2.8fr)
  }
  .primary-column,.auxiliary-column {
    gap:16px
  }
  .panel {
    padding:18px
  }
  .auxiliary-column .panel {
    padding:18px
  }
  .stat-card {
    padding:14px 12px;
    gap:9px;
    min-height:96px
  }
  .stat-icon {
    width:36px;
    height:36px;
    border-radius:11px
  }
  .stat-card strong {
    font-size:23px
  }
  .stat-card small {
    font-size:10px
  }
  .stat-caption {
    font-size:8px
  }
  .trend-section .section-title {
    flex-wrap:wrap
  }
  .trend-filters label {
    flex-direction:column;
    align-items:flex-start;
    gap:3px
  }
  .card {
    padding:14px 12px
  }
  .node-traffic b {
    font-size:16px
  }
  .node-add-form {
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
  .node-add-form .inline {
    width:100%;
    max-width:none
  }
  .node-add-form>label {
    font-size:10px
  }
  .brand {
    font-size:17px
  }
  .section-title h2 {
    font-size:15px
  }
  .section-title>button {
    font-size:10px;
    padding:7px 9px
  }
  .event {
    grid-template-columns:120px minmax(0,1fr)
  }
}
@media(max-width:1150px) {
  .workspace-grid {
    grid-template-columns:minmax(0,1fr)
  }
  .auxiliary-column {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    align-items:start
  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .trend-filters label {
    flex-direction:row;
    align-items:center
  }
  .node-add-form {
    flex-direction:row;
    align-items:center
  }
  .node-add-form .inline {
    width:auto;
    max-width:360px
  }
  .stat-card strong {
    font-size:24px
  }
  .stat-caption {
    display:none
  }
  .connection-label {
    display:none
  }
  .system-panel {
    min-height:220px
  }
  .statistics-note>details {
    max-width:45%
  }
}
@media(max-width:850px) {
  .sidebar {
    width:185px;
    padding-left:10px;
    padding-right:10px
  }
  .app-shell {
    margin-left:185px
  }
  .brand {
    font-size:15px;
    gap:7px
  }
  .brand small {
    font-size:9px
  }
  .brand-logo {
    width:28px;
    height:28px
  }
  .nav-item {
    padding:10px 12px;
    font-size:11px
  }
  .stats {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stat-caption {
    display:block
  }
  .page-heading {
    align-items:flex-start
  }
  .page-toolbar>span:not(.sr-only) {
    display:none
  }
  .page-heading h1 {
    font-size:24px
  }
  .page-heading p {
    font-size:11px
  }
  .topbar {
    height:60px
  }
  .card h3 {
    font-size:12px
  }
  .node-traffic b {
    font-size:15px
  }
  .node-traffic {
    gap:12px 8px
  }
  .node-add-form {
    flex-direction:column;
    align-items:stretch
  }
  .node-add-form .inline {
    max-width:none;
    width:100%
  }
  .section-title {
    gap:8px
  }
  .trend-filters label {
    flex-direction:column;
    align-items:flex-start
  }
  .statistics-note {
    gap:12px
  }
  .statistics-note p {
    font-size:9px
  }
}
@media(max-width:699px) {
  :root {
    --page-padding:16px
  }
  .sidebar,body.sidebar-collapsed .sidebar {
    width:220px;
    transform:translateX(-100%);
    padding:25px 15px 17px
  }
  .app-shell,body.sidebar-collapsed .app-shell {
    margin-left:0
  }
  #mobile-menu,body.sidebar-collapsed #mobile-menu {
    display:flex
  }
  .sidebar-open .sidebar,body.sidebar-collapsed.sidebar-open .sidebar {
    transform:translateX(0)
  }
  body.sidebar-open .sidebar-overlay {
    display:block;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:35;
    border:0;
    border-radius:0;
    background:#20375840;
    backdrop-filter:blur(2px)
  }
  body.sidebar-collapsed .brand-copy,body.sidebar-collapsed .nav-item>span,body.sidebar-collapsed .sidebar-bottom,body.sidebar-collapsed .sidebar-caption {
    display:revert
  }
  body.sidebar-collapsed .sidebar-caption {
    display:flex
  }
  body.sidebar-collapsed .sidebar nav {
    margin-top:0
  }
  body.sidebar-collapsed .brand {
    justify-content:flex-start
  }
  body.sidebar-collapsed .nav-item {
    justify-content:flex-start;
    padding:11px 14px
  }
  .sidebar .brand {
    font-size:18px;
    gap:10px
  }
  .sidebar .brand small {
    font-size:10px
  }
  .sidebar .brand-logo {
    width:32px;
    height:32px
  }
  .sidebar .nav-item {
    font-size:12px
  }
  .topbar {
    padding:0 var(--page-padding);
    height:58px
  }
  .breadcrumb {
    gap:6px;
    font-size:10px
  }
  .breadcrumb>span {
    display:none
  }
  .breadcrumb>.icon {
    display:none
  }
  .topbar-actions {
    gap:8px
  }
  .admin-menu>summary>span:not(.avatar) {
    display:none
  }
  #workspace {
    padding:22px var(--page-padding) 0
  }
  .page-heading {
    gap:10px;
    margin-bottom:19px
  }
  .page-heading h1 {
    font-size:23px
  }
  .page-heading .eyebrow {
    font-size:8px
  }
  .page-heading p {
    font-size:10px;
    max-width:240px
  }
  .page-toolbar .icon-button {
    width:33px;
    height:33px;
    min-height:33px
  }
  .stats {
    gap:10px
  }
  .stat-card {
    min-height:92px;
    padding:13px 11px;
    gap:10px
  }
  .stat-card strong {
    font-size:22px
  }
  .stat-card small {
    font-size:10px
  }
  .stat-caption {
    display:none
  }
  .stat-icon {
    width:34px;
    height:34px
  }
  .stat-icon .icon {
    width:19px;
    height:19px
  }
  .statistics-note {
    flex-direction:column;
    gap:4px;
    margin-bottom:17px
  }
  .statistics-note>details {
    max-width:100%
  }
  .panel,.auxiliary-column .panel {
    padding:17px 15px;
    border-radius:14px
  }
  .workspace-grid,.primary-column {
    gap:15px
  }
  .cards {
    gap:10px
  }
  .section-title {
    flex-wrap:wrap;
    margin-bottom:14px
  }
  .section-title h2 {
    font-size:15px
  }
  .section-title .hint {
    font-size:10px
  }
  .trend-filters {
    width:100%;
    gap:10px
  }
  .trend-filters label {
    flex-direction:row;
    align-items:center;
    flex:1;
    min-width:0
  }
  .trend-filters select {
    flex:1;
    max-width:none;
    min-width:0
  }
  .trend-chart svg {
    height:180px
  }
  .trend-chart {
    min-height:190px
  }
  .chart-labels {
    padding-left:36px;
    font-size:8px
  }
  .chart-labels span:nth-child(2),.chart-labels span:nth-child(4) {
    display:none
  }
  .auxiliary-column {
    gap:15px
  }
  .auxiliary-column .panel {
    padding:16px
  }
  .card {
    padding:14px
  }
  .node-traffic b {
    font-size:17px
  }
  .node-traffic small {
    font-size:10px
  }
  .event {
    grid-template-columns:1fr;
    gap:2px
  }
  .card-actions {
    flex-wrap:wrap
  }
  .card-actions button {
    font-size:10px
  }
  .certificate-cards .card h3 {
    font-size:12px
  }
  .settings-row {
    flex-wrap:wrap;
    gap:10px
  }
  .settings-row>div {
    flex-basis:70%
  }
  .settings-row>button {
    margin-left:46px
  }
  .settings-row>.badge {
    margin-left:46px
  }
  .settings-row .stat-icon {
    width:36px;
    height:36px
  }
  .system-panel {
    min-height:0
  }
  .ttl-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  dialog {
    padding:22px;
    max-height:calc(100dvh - 24px);
    width:calc(100vw - 24px)
  }
  dialog h2 {
    font-size:17px
  }
  footer {
    flex-wrap:wrap;
    gap:4px 10px;
    padding:20px 0;
    font-size:9px
  }
  footer>span:last-child {
    margin-left:0;
    flex-basis:100%
  }
  .toast {
    right:16px;
    bottom:16px;
    font-size:11px
  }
  .login-panel {
    margin-top:8vh;
    padding:28px
  }
}
@media(max-width:460px) {
  .cards {
    grid-template-columns:minmax(0,1fr)
  }
  .auxiliary-column {
    grid-template-columns:minmax(0,1fr)
  }
  .stat-card {
    gap:8px;
    padding:12px 10px
  }
  .stat-card strong {
    font-size:21px
  }
  .stat-card small {
    font-size:9px
  }
  .stat-icon {
    width:30px;
    height:34px;
    border-radius:9px
  }
  .stat-icon .icon {
    width:18px;
    height:18px
  }
  .node-add-form .inline {
    flex-wrap:wrap
  }
  .node-add-form .inline input {
    flex-basis:100%
  }
  .node-add-form .inline button {
    width:100%
  }
  .page-heading p {
    max-width:230px
  }
  .certificate-details {
    grid-template-columns:auto minmax(0,1fr)
  }
  .node-traffic {
    gap:12px 15px
  }
  .settings-row>div {
    flex-basis:65%
  }
  .section-title>button {
    min-height:32px
  }
  .checks {
    gap:10px
  }
  .checks label {
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important
  }
}
@media(max-width:699px) {
  body.sidebar-open {
    overflow:hidden
  }
}
@media(max-width:360px) {
  .stat-card .stat-icon {
    display:none
  }
  .stat-card strong {
    font-size:22px
  }
}
/* Destructive actions always require an explicit second step. */
#confirm-dialog {max-width:440px}
.confirm-heading {display:flex;align-items:center;gap:12px;margin-bottom:17px}
#confirm-message {font-size:12px;line-height:1.9;color:#7b8da6}
.confirm-actions {display:flex;justify-content:flex-end;gap:10px;margin-top:25px}
.sidebar {overflow-y:auto;overscroll-behavior:contain}
/* Node editor and subscription controls. */
.node-card-actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap}
.node-domain-line{border-top:1px solid #eff2f8;padding-top:10px;overflow-wrap:anywhere}
.node-domain-options{display:grid;gap:8px;margin:12px 0 15px;max-height:260px;overflow:auto}
.node-domain-option{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;border:1px solid #e4ecf7;border-radius:9px;margin:0;background:#fbfcff}
.node-domain-option input[type=checkbox]{margin:0}
.node-domain-option>span{min-width:0;overflow-wrap:anywhere;font-size:12px}
.node-domain-option small{display:block;font-size:10px;color:#91a0b6}
.node-domain-option .badge{font-size:9px}
.node-edit-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:18px}
#node-edit-empty{font-size:11px;margin:10px 0}
#maintenance-command{font:11px/1.7 Consolas,monospace;background:#f6f9fd;user-select:all;margin:15px 0}
#maintenance-target{font-size:13px;font-weight:600;margin-bottom:10px}
@media(max-width:850px){.node-card-actions button{font-size:9px;padding:5px 6px}.node-cards .card-footer{flex-wrap:wrap}}
@media(max-width:460px){.node-edit-actions>button{width:100%}.node-domain-option{padding:9px}.node-domain-option>span{font-size:11px}}