:root {
  --canvas: #eef1ec;
  --surface: #ffffff;
  --sidebar: #10201b;
  --ink: #16201c;
  --muted: #66736c;
  --line: #d3dad4;
  --accent: #b8ee63;
  --accent-ink: #1b2a20;
  --cyan: #2aa6a1;
  --warn: #d59d22;
  --bad: #c95050;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); font-family: "IBM Plex Sans", "Aptos", "Microsoft YaHei", sans-serif; }
button, a { font: inherit; }
button { letter-spacing: 0; }
.page-shell { width: calc(100% - 48px); margin: 0 auto; padding: 36px 0 56px; }
.return-console { position: fixed; top: 16px; right: 18px; z-index: 2; padding: 8px 11px; color: var(--ink); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; text-decoration: none; }
.return-console:hover { border-color: var(--cyan); color: #176c69; }
.page-heading, .detail-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 25px; }
.eyebrow { margin: 0 0 7px; color: #39716a; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
h1, h2, h3 { margin: 0; }
h1 { font-family: "Bahnschrift", "Aptos Display", sans-serif; font-size: clamp(32px, 4vw, 48px); line-height: 1; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
.page-heading p:not(.eyebrow) { max-width: 760px; margin: 13px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.page-heading > small { color: var(--muted); font-size: 11px; }
.overall-band, .detail-status { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 16px; color: #eef5ef; background: var(--sidebar); border-left: 5px solid var(--accent); }
.overall-band > div, .detail-status > div { display: flex; align-items: center; gap: 10px; }
.overall-band strong { font-size: 13px; }
.overall-band > span, .detail-status > span { color: #a9bbb1; font-size: 11px; }
.state-dot { width: 9px; height: 9px; display: inline-block; border-radius: 50%; background: var(--warn); }
.state-dot.ok { background: var(--accent); box-shadow: 0 0 0 4px rgba(184, 238, 99, .12); }
.state-dot.warn { background: var(--warn); box-shadow: 0 0 0 4px rgba(213, 157, 34, .12); }
.state-dot.error { background: var(--bad); box-shadow: 0 0 0 4px rgba(201, 80, 80, .12); }
.status-tabs { display: flex; gap: 0; margin-top: 28px; border-bottom: 1px solid var(--line); }
.status-tab { min-height: 44px; padding: 0 16px; color: var(--muted); border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.status-tab:hover { color: var(--ink); background: #e4ebe5; }
.status-tab.active { color: var(--ink); border-bottom-color: var(--accent-ink); background: #dfead8; }
.status-view { margin-top: 28px; }
.section-heading { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.section-heading span { color: var(--muted); font-size: 11px; }
.section-heading .inline-summary { margin-left: 10px; color: var(--muted); font-size: 11px; }
.node-overview { margin-top: 18px; border-top: 2px solid var(--ink); }
.overview-metrics { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.overview-metric { min-width: 0; display: grid; gap: 5px; padding: 15px 16px; border-right: 1px solid var(--line); }
.overview-metric:last-child { border-right: 0; }
.overview-metric span, .overview-metric small { color: var(--muted); font-size: 10px; }
.overview-metric strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.system-summary-heading { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.system-summary-heading h3 { font-size: 12px; }
.system-summary-heading span { color: var(--muted); font-size: 10px; }
.system-summary { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-stat { min-width: 0; display: grid; gap: 8px; padding: 13px 12px; border-right: 1px solid var(--line); }
.system-stat:last-child { border-right: 0; }
.system-stat > strong { font-size: 12px; }
.system-stat > div { display: flex; flex-wrap: wrap; gap: 7px; }
.system-stat > div > span { display: inline-flex; align-items: baseline; gap: 3px; }
.system-stat i, .system-stat small { color: var(--muted); font-size: 9px; font-style: normal; }
.system-stat b { font-size: 13px; font-variant-numeric: tabular-nums; }
.system-stat small { min-height: 13px; line-height: 1.4; }
.system-stat.is-empty { background: #f5f7f3; }
.os-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.os-filter { min-height: 30px; padding: 0 10px; color: var(--muted); border: 1px solid var(--line); background: var(--surface); font-size: 11px; font-weight: 700; cursor: pointer; }
.os-filter span { margin-left: 5px; color: #39716a; font-variant-numeric: tabular-nums; }
.os-filter:hover { border-color: var(--cyan); color: var(--ink); }
.os-filter.active { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); }
.os-filter.active span { color: var(--accent-ink); }
.node-list { display: grid; }
.node-row { display: grid; grid-template-columns: minmax(205px, 1fr) minmax(420px, 2.2fr) minmax(160px, .8fr) auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.node-identity { min-width: 0; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.node-identity > div { min-width: 0; display: grid; gap: 4px; }
.node-identity strong { overflow-wrap: anywhere; font-size: 13px; }
.node-identity small, .node-network small { color: var(--muted); font-size: 10px; }
.system-line { display: flex; align-items: center; gap: 6px; }
.os-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; color: #176c69; border: 1px solid #9fcac7; background: #e3f0ee; font-size: 9px; font-weight: 800; }
.status-text { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 11px; font-weight: 700; }
.status-text i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--bad); }
.status-text.ok i { background: #72b93e; }
.status-text.warn i { background: var(--warn); }
.status-text.error i { background: var(--bad); }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.disk-partitions { margin-top: 16px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.disk-partitions.is-unavailable { color: var(--muted); }
.disk-partitions-heading, .disk-partition-top, .disk-partition-values { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.disk-partitions-heading { margin-bottom: 10px; }
.disk-partitions-heading strong { font-size: 11px; }
.disk-partitions-heading span, .disk-partition-values, .disk-partition-values small { color: var(--muted); font-size: 10px; }
.disk-partition-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.disk-partition { min-width: 0; display: grid; gap: 5px; padding: 9px 10px; border: 1px solid var(--line); }
.disk-partition-top strong { font-size: 12px; }
.disk-partition-top span { color: var(--muted); font-size: 10px; }
.disk-partition-values { min-width: 0; }
.disk-partition-values span, .disk-partition-values small { overflow-wrap: anywhere; }
.resource-metric { min-width: 0; display: grid; gap: 5px; padding-left: 9px; border-left: 2px solid var(--line); }
.resource-metric > strong { color: var(--muted); font-size: 10px; }
.resource-values { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.resource-values b { font-size: 13px; }
.resource-values span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.resource-progress { height: 6px; overflow: hidden; background: #dce3dc; }
.resource-progress i { display: block; height: 100%; background: var(--cyan); }
.node-type-badge { display: inline-flex; align-items: center; border: 1px solid #7f9a54; color: #55722d; background: #edf7d8; font-size: 10px; line-height: 16px; padding: 0 5px; }
.is-unavailable .resource-progress i { background: var(--line); }
.is-unavailable .resource-values b { color: var(--muted); }
.node-network { min-width: 0; display: grid; gap: 4px; padding-left: 9px; border-left: 2px solid var(--line); }
.node-network strong { color: var(--muted); font-size: 10px; }
.node-network b { font-size: 11px; }
.detail-link, .back-button { padding: 8px 10px; color: var(--accent-ink); border: 0; background: var(--accent); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; }
.detail-link:hover, .back-button:hover { background: #a9df55; }
.data-empty { min-height: 64px; display: flex; align-items: center; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 12px; }
.data-empty.error { color: var(--bad); }
.cluster-attention { min-height: 76px; display: grid; grid-template-columns: minmax(120px, .7fr) minmax(80px, .35fr) minmax(260px, 2fr); gap: 18px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cluster-attention > span, .cluster-attention small { color: var(--muted); font-size: 11px; }
.cluster-attention > strong { color: var(--accent-ink); font-size: 24px; font-variant-numeric: tabular-nums; }
.cluster-attention small { line-height: 1.5; }
.cluster-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.android-probe-board { margin-top: 18px; border-top: 2px solid var(--ink); }
.android-probe-list { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.android-probe-card { min-width: 0; display: grid; gap: 8px; padding: 15px 16px; text-align: left; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.android-probe-card:nth-child(3n) { border-right: 0; }
.android-probe-card > div { min-width: 0; display: grid; gap: 4px; }
.android-probe-card strong, .android-probe-card b { overflow-wrap: anywhere; font-size: 12px; }
.android-probe-card small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.android-probe-card:hover { background: #edf3e7; }
.android-probe-card.active { background: #dfead8; box-shadow: inset 0 0 0 1px #c6d8be; }
.android-probe-topline { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.android-probe-topline > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.android-probe-topline strong { font-size: 14px; }
.android-probe-topline small { color: var(--muted); font-size: 11px; }
.android-probe-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.android-probe-metric { min-width: 0; display: grid; gap: 5px; padding: 15px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.android-probe-metric:nth-child(3n) { border-right: 0; }
.android-probe-metric span, .android-probe-metric small { color: var(--muted); font-size: 10px; }
.android-probe-metric strong { overflow-wrap: anywhere; font-size: 18px; font-variant-numeric: tabular-nums; }
.android-probe-sections { display: grid; gap: 28px; }
.android-probe-facts { grid-template-columns: repeat(3, 1fr); }
.android-probe-steps, .android-probe-history { display: grid; border-bottom: 1px solid var(--line); }
.android-probe-step, .android-probe-history-row { display: grid; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.android-probe-step:last-child, .android-probe-history-row:last-child { border-bottom: 0; }
.android-probe-step { grid-template-columns: minmax(180px, 1fr) minmax(120px, .65fr); align-items: start; }
.android-probe-step > div, .android-probe-history-row > div { min-width: 0; display: grid; gap: 4px; }
.android-probe-step p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.android-probe-step small, .android-probe-history-row small { color: var(--muted); font-size: 10px; }
.android-probe-history-row { grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(110px, .6fr); align-items: center; }
.android-probe-history-row strong, .android-probe-history-row b { font-size: 12px; }
.data-section { border-top: 2px solid var(--ink); }
.metric { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
.metric span { color: var(--muted); }
.metric strong { text-align: right; }
.detail-heading { align-items: start; }
.detail-heading small { display: block; margin-top: 9px; color: var(--muted); font-size: 11px; }
.detail-status { margin-bottom: 28px; }
.detail-status .status-text { color: #eef5ef; }
.detail-section { margin-top: 28px; border-top: 2px solid var(--ink); }
.node-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.node-facts > div { min-width: 0; display: grid; gap: 5px; padding: 14px 16px; border-right: 1px solid var(--line); }
.node-facts > div:last-child { border-right: 0; }
.node-facts span, .network-detail span { color: var(--muted); font-size: 10px; }
.node-facts strong { overflow-wrap: anywhere; font-size: 12px; }
.detail-resource-grid { padding: 18px 0; }
.network-detail { display: grid; grid-template-columns: minmax(140px, .65fr) minmax(140px, .65fr) minmax(260px, 1.7fr); gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.network-detail > div { display: grid; gap: 5px; }
.network-detail strong { font-size: 16px; }
.network-detail small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.filesystem-columns, .filesystem-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(210px, 1.4fr) minmax(230px, 1.5fr) minmax(120px, .7fr); gap: 18px; align-items: center; }
.filesystem-columns { min-height: 36px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; }
.filesystem-row { min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.filesystem-row > div { min-width: 0; display: grid; gap: 4px; }
.filesystem-row strong, .filesystem-row b { overflow-wrap: anywhere; font-size: 12px; }
.filesystem-row small { color: var(--muted); font-size: 10px; }
.filesystem-row .resource-progress { margin-top: 3px; }
.embedded .return-console { display: none; }
.embedded .page-shell { width: 100%; margin: 0; padding: 30px clamp(20px, 4vw, 52px) 48px; }

@media (max-width: 980px) {
  .node-row { grid-template-columns: minmax(200px, .9fr) minmax(360px, 1.6fr); }
  .node-network { grid-column: 1; }
  .detail-link { grid-column: 2; justify-self: end; }
  .system-summary { grid-template-columns: repeat(3, 1fr); }
  .system-stat:nth-child(3) { border-right: 0; }
  .system-stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .cluster-sections { grid-template-columns: 1fr; gap: 28px; }
  .android-probe-list { grid-template-columns: 1fr 1fr; }
  .android-probe-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .android-probe-card:nth-child(2n) { border-right: 0; }
  .android-probe-grid { grid-template-columns: 1fr 1fr; }
  .android-probe-metric:nth-child(3n) { border-right: 1px solid var(--line); }
  .android-probe-metric:nth-child(2n) { border-right: 0; }
  .android-probe-facts { grid-template-columns: 1fr 1fr; }
  .android-probe-history-row { grid-template-columns: 1fr 1fr; }
  .android-probe-history-row > div:last-child { grid-column: 1 / -1; }
  .node-facts { grid-template-columns: 1fr 1fr; }
  .node-facts > div:nth-child(2) { border-right: 0; }
  .node-facts > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .network-detail { grid-template-columns: 1fr 1fr; }
  .network-detail small { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .page-shell, .embedded .page-shell { width: calc(100% - 28px); padding: 24px 0 36px; }
  .return-console { position: static; display: inline-block; margin: 14px 14px 0; }
  .page-heading, .detail-heading { align-items: start; flex-direction: column; gap: 12px; }
  .overall-band, .detail-status { align-items: start; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; }
  .status-tabs { overflow-x: auto; }
  .status-tab { flex: 0 0 auto; }
  .node-row { grid-template-columns: 1fr; gap: 16px; }
  .detail-link { grid-column: auto; justify-self: start; }
  .overview-metrics { grid-template-columns: 1fr 1fr; }
  .overview-metric:nth-child(2) { border-right: 0; }
  .overview-metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .system-summary { grid-template-columns: 1fr 1fr; }
  .system-stat:nth-child(3) { border-right: 1px solid var(--line); }
  .system-stat:nth-child(2n) { border-right: 0; }
  .system-stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .cluster-attention { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .cluster-attention small { grid-column: 1 / -1; }
  .android-probe-topline { align-items: start; flex-direction: column; }
  .android-probe-list { grid-template-columns: 1fr; }
  .android-probe-card { border-right: 0; }
  .android-probe-grid { grid-template-columns: 1fr; }
  .android-probe-metric { border-right: 0; }
  .android-probe-facts { grid-template-columns: 1fr; }
  .android-probe-step, .android-probe-history-row { grid-template-columns: 1fr; }
  .resource-grid { gap: 14px; }
  .disk-partition-list { grid-template-columns: 1fr; }
  .detail-resource-grid { grid-template-columns: 1fr; }
  .filesystem-columns { display: none; }
  .filesystem-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .filesystem-row > div:first-child, .filesystem-row > div:nth-child(3) { grid-column: 1 / -1; }
}