:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #fff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #e8e8ed;
  --blue: #0071e3;
  --blue-soft: #eaf3fd;
  --green: #217a52;
  --green-soft: #edf8f1;
  --amber: #9b681b;
  --amber-soft: #fff6e5;
  --red: #b83d46;
  --red-soft: #fff0f1;
  --card-border: #e7e7ed;
  --card-shadow: 0 1px 2px #20233103, 0 8px 24px #20233105;
  --motion: cubic-bezier(.22,1,.36,1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: wait; opacity: .5; }
button, a { transition: background-color 180ms var(--motion), color 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion), opacity 180ms var(--motion), transform 180ms var(--motion); }
button:active:not(:disabled), a:active { transform: scale(.98); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
button img { pointer-events: none; }
img, svg { max-width: 100%; }
h1,h2,h3,p,dl,dd { margin: 0; }
h1,h2,h3 { text-wrap: balance; font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: 30px; line-height: 1.25; }
h2 { font-size: 24px; line-height: 1.35; }
h3 { font-size: 18px; line-height: 1.45; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
small { font-size: 14px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; vertical-align: middle; object-fit: contain; opacity: .8; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; border-radius: 8px; background: white; outline: 2px solid var(--blue); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 232px; padding: 32px 16px 24px; display: flex; flex-direction: column; background: #fafafb; border-right: 1px solid var(--line); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; font-size: 18px; font-weight: 600; white-space: nowrap; letter-spacing: -.04em; }
.brand strong { font-size: 16px; font-weight: 500; }
.brand-mark { width: 28px; height: 32px; display: grid; gap: 4px; align-content: center; flex: 0 0 28px; }
.brand-mark b { height: 10px; width: 26px; border-radius: 3px; background: var(--text); transform: skewY(-15deg); }
.brand-mark b:last-child { width: 18px; margin-left: 8px; opacity: .55; }
.workspace { display: flex; align-items: center; gap: 12px; margin: 40px 8px 32px; }
.workspace-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d2d2d7; border-radius: 8px; font-size: 12px; font-weight: 600; }
.workspace strong { font-size: 14px; font-weight: 500; }
#nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { margin: 8px 12px; font-size: 14px; color: var(--muted); }
.nav-section { margin-top: 32px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px; border-radius: 8px; font-size: 14px; font-weight: 400; }
.nav-item:hover { background: #eaeaec; }
.nav-item.active { background: var(--blue); color: white; font-weight: 500; }
.nav-item.active:hover { background: #0065cd; }
.nav-item:active { transform: scale(.985); }
.nav-item .icon { width: 18px; height: 18px; flex-basis: 18px; }
.nav-item.active .icon { filter: brightness(0) invert(1); opacity: 1; }
.nav-count { display: grid; place-items: center; margin-left: auto; min-width: 20px; height: 20px; padding: 0 4px; font-size: 12px; border-radius: 4px; background: #e3e3e8; color: var(--text); }
.nav-item.active .nav-count { background: #ffffff30; color: white; }
.sidebar-bottom { margin-top: auto; padding: 48px 8px 0; }
.reset-btn { display: block; width: 100%; min-height: 40px; padding: 8px 4px; border: 0; border-radius: 8px; background: transparent; font-size: 14px; color: var(--muted); text-align: left; }
.reset-btn:hover { color: var(--text); background: #eaeaec; }
.app-shell { margin-left: 232px; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 20; height: 72px; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: #ffffffed; backdrop-filter: blur(16px); }
.topbar-left,.topbar-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.breadcrumb { display: flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--muted); }
.breadcrumb > span { color: #b8b8bf; }
.breadcrumb strong { font-weight: 500; color: var(--text); }
.global-search { display: flex; align-items: center; gap: 8px; width: 216px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--bg); }
.global-search .icon { width: 16px; height: 16px; flex-basis: 16px; }
.global-search input { min-width: 0; width: 100%; border: 0; padding: 0; outline: none; background: transparent; }
.global-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px #0071e318; }
.global-search input:focus-visible { outline: none; }
kbd { font: inherit; color: var(--muted); }
.demo-pill { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; font-weight: 500; background: white; white-space: nowrap; color: var(--muted); }
.demo-pill:hover { color: var(--text); background: #ededf1; border-color: #d8d8df; }
.top-divider { width: 1px; height: 24px; background: var(--line); }
.profile { display: flex; align-items: center; gap: 8px; padding: 0; background: transparent; border: 0; white-space: nowrap; }
.profile:hover { color: var(--blue); }
.profile:hover .avatar { background: #e5effb; }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; background: #ededf0; border-radius: 50%; font-size: 14px; }
.notification-btn { position: relative; }
.notification-dot { position: absolute; width: 5px; height: 5px; top: 8px; right: 8px; border-radius: 50%; background: var(--text); outline: 2px solid white; }
.mobile-toggle { display: none !important; }
#main { max-width: 1664px; margin: 0 auto; padding: 40px; outline: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.page-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.updated { margin-right: 4px; color: var(--muted); font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid #d2d2d7; border-radius: 8px; background: white; color: var(--text); font-size: 14px; line-height: 24px; font-weight: 500; white-space: nowrap; }
.btn:hover { background: #f0f2f6; border-color: #bfc5cf; box-shadow: 0 2px 4px #20233108; }
.btn .icon { width: 16px; height: 16px; flex-basis: 16px; }
.btn-primary { background: var(--blue); color: white; border-color: var(--blue); }
.btn-primary:hover { background: #0065cd; border-color: #0065cd; box-shadow: 0 2px 8px #0071e326; }
.btn-primary:active { background: #005bb9; border-color: #005bb9; }
.btn-primary .icon { filter: brightness(0) invert(1); opacity: 1; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--blue-soft); color: #0067d0; border-color: transparent; box-shadow: none; }
.btn-sm { min-height: 36px; padding: 4px 8px; font-size: 14px; }
.icon-btn { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 8px; border: 0; border-radius: 8px; background: transparent; font-size: 24px; line-height: 1; }
.icon-btn:hover { background: #ebebef; }
.text-link { display: inline-flex; align-items: center; gap: 8px; background: transparent; padding: 0; border: 0; font-size: 14px; font-weight: 500; color: var(--text); text-align: left; }
.text-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.text-link .icon { width: 16px; height: 16px; flex-basis: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 24px; padding: 0; gap: 16px; }
.stat-card { min-width: 0; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.stat-top { font-size: 14px; font-weight: 500; color: var(--muted); }
.stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 36px; line-height: 1.2; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 14px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.panel { min-width: 0; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.panel + .panel { margin-top: 24px; }
.panel:has(> .gpu-grid), .panel:has(> .connector-grid) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 24px; }
.panel-head > .btn:last-child, .panel-head > .text-link:last-child { margin-left: auto; }
.panel > .table-controls { padding: 0 0 16px; }
.panel > .table-pagination { padding: 16px 0 0; }
.panel-title { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.025em; }
.panel-title .muted { margin-left: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.panel-body { padding: 0; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.85fr) minmax(0,1fr); gap: 24px; }
.dashboard-grid > .panel,.overview-bottom > .panel { margin: 0; }
.resource-health { padding: 24px; }
.chart-wrap { min-width: 0; }
.line-chart { display: block; width: 100%; height: auto; }
.line-chart text { font-family: inherit; fill: var(--muted); font-size: 14px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 0 0 40px; font-size: 14px; }
.chart-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #808087; }
.chart-legend .legend-dot { width: 20px; height: 0; border-radius: 0; border-top: 2px solid currentColor; background: none !important; }
.chart-legend > span:nth-child(2) .legend-dot { border-top-style: dashed; opacity: .65; }
.chart-legend > span:nth-child(3) .legend-dot { border-top-style: dotted; opacity: .5; }
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 8px; background: #f0f0f2; }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 4px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; }
.segmented button:hover { color: var(--text); background: #e4e5e9; }
.segmented button.active { background: white; color: var(--blue); font-weight: 500; box-shadow: 0 1px 4px #0000000a; }
.segmented button.active:hover { background: #fafdff; box-shadow: 0 1px 6px #0071e318; }
.segmented button:active { transform: scale(.97); }
.resource-count { color: inherit; font-size: 14px; }
.capacity-item + .capacity-item { margin-top: 24px; }
.capacity-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.capacity-title > strong { margin-left: auto; white-space: nowrap; }
.capacity-title small { color: var(--muted); font-weight: 400; }
.meter { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 72px; font-variant-numeric: tabular-nums; font-size: 14px; }
.meter > span:last-child { min-width: 40px; text-align: right; white-space: nowrap; color: var(--muted); }
.meter small { font-size: 14px; }
.progress { display: block; height: 5px; flex: 1; min-width: 24px; overflow: hidden; border-radius: 4px; background: #ededf0; }
.progress-fill { display: block; height: 100%; border-radius: inherit; background: #77777e; }
.progress-fill.amber { background: #c69b52; }
.progress-fill.red { background: #ca646d; }
.metric-row { min-width: 104px; }
.capacity-footer { display: flex; align-items: center; gap: 8px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.capacity-footer .text-link { margin-left: auto; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #808087; flex: 0 0 6px; }
.overview-bottom { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 24px; margin-top: 24px; }
.rack-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.rack { min-width: 0; border: 1px solid #e4e5eb; border-radius: 12px; padding: 12px; background: #f7f8fa; }
.rack-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.rack-head strong { font-size: 16px; }
.rack-head span { font-size: 14px; color: var(--muted); }
.rack-body { display: flex; flex-direction: column; gap: 8px; }
.rack-unit { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; width: 100%; padding: 4px; border: 1px solid #dedee3; border-radius: 4px; background: white; text-align: left; font-size: 12px; }
.rack-unit:hover { border-color: #95bff0; background: #f1f7ff; box-shadow: 0 2px 4px #0071e30a; }
.rack-unit:active { background: #e8f2ff; }
.rack-unit > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.rack-unit small { display: none; }
.rack-led { width: 4px; height: 4px; flex: 0 0 4px; border-radius: 50%; background: #5c9e7b; }
.rack-unit.warning { background: #fffaf0; border-color: #e6d7b6; }
.rack-unit.warning .rack-led { background: #bc8b39; }
.rack-unit.critical { background: #fff5f5; border-color: #ecc9cd; }
.rack-unit.critical .rack-led { background: #be5b64; }
.rack-unit.warning:hover, .rack-unit.critical:hover { border-color: #9cbcec; background: #f1f7ff; }
.rack-slot { height: 32px; border-radius: 4px; border: 1px solid #ededf0; }
.rack-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding-top: 16px; font-size: 12px; color: var(--muted); }
.rack-bottom span:last-child { display: none; }
.rack-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.rack-legend span { display: inline-flex; align-items: center; gap: 8px; }
.rack-legend .legend-dot { background: #5c9e7b; }
.rack-legend .legend-amber { background: #bc8b39; }
.rack-legend .legend-red { background: #be5b64; }
.alert-list { display: flex; flex-direction: column; }
.alert-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.alert-row:first-child { padding-top: 0; }
.alert-row:hover { background: #f6f9fd; }
.alert-row:hover .alert-copy strong { text-decoration: underline; text-underline-offset: 4px; }
.alert-row:active { transform: translateX(2px); background: #eaf2fc; }
.alert-symbol { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; background: var(--bg); border-radius: 50%; }
.alert-symbol .icon { width: 16px; height: 16px; flex-basis: 16px; }
.alert-symbol.critical { background: var(--red-soft); }
.alert-symbol.warning { background: var(--amber-soft); }
.alert-symbol.info { background: var(--blue-soft); }
.alert-symbol.critical .icon { filter: invert(30%) sepia(55%) saturate(1100%) hue-rotate(307deg); }
.alert-symbol.warning .icon { filter: invert(42%) sepia(45%) saturate(800%) hue-rotate(5deg); }
.alert-copy { flex: 1; min-width: 0; }
.alert-copy strong { display: block; font-size: 14px; font-weight: 500; }
.alert-copy > span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.alert-copy small { display: none; }
.alert-arrow { font-size: 20px; color: var(--muted); }
.alert-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; color: var(--muted); }
.alert-summary > span { display: flex; align-items: center; gap: 8px; }
.alert-summary .icon { width: 16px; height: 16px; }
.integration-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); }
.integration-strip > span { color: var(--muted); flex: 1; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid color-mix(in srgb, currentColor 9%, transparent); border-radius: 999px; background: #f1f1f4; color: #525258; font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge.healthy, .badge.running, .badge.resolved { color: var(--green); background: var(--green-soft); }
.badge.warning, .badge.ack { color: var(--amber); background: var(--amber-soft); }
.badge.critical { color: var(--red); background: var(--red-soft); font-weight: 600; }
.badge.new, .badge.info, .badge.demo { color: #2d64af; background: #eef4fd; }
.badge.stopped { color: #6e6e73; background: #f0f1f4; }
.badge-dot { width: 4px; height: 4px; flex: 0 0 4px; background: currentColor; border-radius: 50%; }
.badge.warning .badge-dot { background: currentColor; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 0 0 24px; }
.toolbar .toolbar { padding: 0; }
.select-field { display: flex; align-items: center; gap: 12px; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: white; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th { padding: 16px; font-size: 14px; font-weight: 500; color: var(--muted); background: #fafafa; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 20px 16px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.data-table th:first-child,.data-table td:first-child { padding-left: 16px; }
.data-table th:last-child,.data-table td:last-child { padding-right: 16px; }
.data-table tbody tr { transition: background-color 180ms var(--motion), box-shadow 180ms var(--motion); }
.data-table tbody tr:hover { background: #f5f8fc; }
.data-table tbody tr:focus-within { background: #f1f6ff; }
.data-table tbody tr[data-action], .data-table tbody tr[role="button"] { cursor: pointer; }
.data-table tbody tr[data-action]:active, .data-table tbody tr[role="button"]:active { background: #e9f2ff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .text-link { white-space: nowrap; }
.data-table .toolbar { padding: 0; gap: 4px; flex-wrap: nowrap; }
.row-main { display: block; font-size: 14px; font-weight: 500; }
.row-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.asset-name { display: flex; align-items: center; gap: 12px; }
.asset-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: #f4f4f6; }
.asset-icon .icon { width: 18px; height: 18px; flex-basis: 18px; }
.table-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.inline-note { padding-top: 24px; font-size: 14px; line-height: 24px; color: var(--muted); }
.inline-note > span { margin-left: 12px; }
.capacity-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; padding-bottom: 8px; }
.capacity-grid .capacity-item { margin: 0; }
.capacity-grid .capacity-item + .capacity-item { padding-left: 32px; border-left: 1px solid var(--line); }
.resource-summary { display: flex; align-items: baseline; gap: 8px; margin: 16px 0; }
.resource-summary strong { font-size: 30px; line-height: 36px; letter-spacing: -.03em; }
.cluster-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 14px; }
.cluster-meta span { display: inline-flex; gap: 4px; align-items: center; }
.cluster-meta .icon { width: 16px; height: 16px; flex-basis: 16px; }
.gpu-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.gpu-card { min-width: 0; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); transition: border-color 180ms var(--motion), box-shadow 180ms var(--motion); }
.gpu-card:focus-within, .connector-card:focus-within { border-color: #bfd4f1; box-shadow: 0 2px 8px #20233108; }
.gpu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gpu-card-head .asset-name { gap: 8px; }
.gpu-card-head .asset-icon { background: transparent; width: 20px; flex-basis: 20px; }
.gpu-card .badge { font-size: 12px; padding: 2px 4px; }
.gpu-values { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 16px; }
.gpu-value { min-width: 0; }
.gpu-value > span { font-size: 14px; white-space: nowrap; }
.gpu-value strong { display: block; margin-top: 8px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.03em; }
.gpu-value small { font-size: 14px; font-weight: 400; color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.gpu-task { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); }
.gpu-task .row-main { font-weight: 400; }
.gpu-card > .meter > span:last-child { display: none; }
.gpu-card > .btn { display: flex; width: max-content; margin-top: 16px; margin-left: auto; }
.connector-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.connector-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--card-border); border-radius: 16px; background: var(--surface); box-shadow: var(--card-shadow); transition: border-color 180ms var(--motion), box-shadow 180ms var(--motion); }
.connector-card .panel-head { padding: 0 0 24px; gap: 12px; align-items: flex-start; }
.connector-card .panel-title { font-size: 18px; line-height: 26px; letter-spacing: -.015em; }
.connector-card .detail-list { margin: 0 0 16px; }
.connector-card .detail-list > div { padding: 8px 0; border: 0; display: block; }
.connector-card .detail-list dt { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.connector-card .detail-list dd { text-align: left; }
.connector-card .toolbar { justify-content: flex-end; margin-top: auto; padding: 16px 0 0; gap: 8px; }
.connector-card > .btn { align-self: flex-end; margin-top: auto; }
[data-card-action] { cursor: pointer; transition: background-color 180ms var(--motion), border-color 180ms var(--motion), box-shadow 180ms var(--motion), transform 180ms var(--motion); }
.gpu-card[data-card-action]:hover, .connector-card[data-card-action]:hover { border-color: #b7cde9; background: #fdfefe; box-shadow: 0 2px 6px #20233105, 0 12px 24px #2023310a; transform: translateY(-2px); }
.gpu-card[data-card-action]:active, .connector-card[data-card-action]:active { background: #f0f6ff; border-color: #91b6e6; transform: translateY(0); box-shadow: 0 1px 4px #20233108; }
[data-card-action]:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.topology { padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: #f8f9fb; }
.topology-tier { display: flex; align-items: stretch; justify-content: center; gap: 16px; flex-wrap: wrap; }
.topology-line { height: 32px; width: 1px; margin: 0 auto; background: #c7c7ce; }
.topology-node { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px; border: 1px solid #dedee3; border-radius: 8px; background: white; min-width: 216px; text-align: left; }
.topology-node:hover { border-color: #93baeb; background: #f3f8ff; box-shadow: 0 4px 12px #0071e30a; transform: translateY(-2px); }
.topology-node:active { transform: translateY(0); background: #eaf3ff; }
.topology-node .badge { margin-left: auto; }
.topology-node .row-sub { font-size: 12px; }
.detail-list { margin: 16px 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); flex-shrink: 0; }
.detail-list dd { text-align: right; overflow-wrap: anywhere; }
.detail-status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding: 0 0 32px; border-bottom: 1px solid var(--line); }
.detail-metric > span { color: var(--muted); font-size: 14px; }
.detail-metric strong { display: flex; align-items: baseline; gap: 4px; margin-top: 8px; font-size: 30px; line-height: 36px; font-weight: 600; }
.detail-metric small { color: var(--muted); font-weight: 400; }
.detail-section { margin-top: 32px; }
.detail-section h3 { margin-bottom: 16px; }
.detail-section p { line-height: 1.7; }
.relationship-chain { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; margin-bottom: 16px; }
.relationship-chain span { margin: 0 4px; }
.related-resource { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.related-resource > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.related-resource:hover { color: var(--blue); background: #f4f8fe; }
.related-resource:active { background: #eaf3ff; }
.warning-callout { margin-top: 32px; padding: 24px; border: 1px solid #efdfc2; background: #fffaf0; border-radius: 12px; }
.warning-callout p { margin-top: 8px; line-height: 1.7; }
.warning-callout .btn { margin-top: 16px; }
.activity-record { padding: 12px 0; border-bottom: 1px solid var(--line); }
.activity-record span { display: block; color: var(--muted); margin-bottom: 4px; }
.checklist { padding-left: 24px; margin: 0; }
.checklist li + li { margin-top: 12px; }
dialog { padding: 0; color: var(--text); background: white; border: 1px solid #e8e8ed; box-shadow: 0 8px 32px #151b2b14, 0 32px 96px #151b2b1f; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: #15203345; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modal[open] { animation: modal-enter 200ms var(--motion) both; }
.drawer[open] { animation: drawer-enter 200ms var(--motion) both; }
dialog[open]::backdrop { animation: backdrop-enter 180ms var(--motion) both; }
.drawer { position: fixed; inset: 0 0 0 auto; width: 560px; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; overflow-y: auto; border-radius: 16px 0 0 16px; }
.drawer-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 32px; background: #fffffff5; backdrop-filter: blur(12px); }
.drawer-header h2 { font-size: 24px; line-height: 32px; overflow-wrap: anywhere; }
.drawer-header .icon-btn,.modal-header .icon-btn { background: #f0f0f2; border-radius: 50%; width: 32px; height: 32px; flex-basis: 32px; }
.drawer-header .icon-btn:hover,.modal-header .icon-btn:hover { background: #e1e3e8; }
#detail-body { padding: 0 32px 32px; }
#detail-body > .btn-primary { display: flex; width: max-content; margin-top: 24px; margin-left: auto; }
.modal { width: 600px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 64px); border-radius: 16px; overflow-y: auto; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 32px 24px; }
.modal-header h2 { font-size: 24px; line-height: 32px; }
#modal-body { padding: 0 32px 32px; }
.modal-copy { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 32px; }
.modal-actions .btn:not(.btn-primary) { border-color: transparent; }
.confirm-note { padding: 16px 24px; border-radius: 12px; background: var(--bg); color: var(--muted); }
.guide-grid { display: flex; flex-direction: column; }
.guide-card { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 0; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.guide-card:last-child { border-bottom: 0; }
.guide-card:hover { color: var(--blue); background: #f4f8ff; }
.guide-card:active { background: #eaf3ff; transform: translateX(2px); }
.guide-number { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; width: 24px; flex: 0 0 24px; }
.guide-card > span:nth-child(2) { flex: 1; }
.guide-card strong { display: block; font-size: 16px; font-weight: 500; }
.guide-card small { display: block; font-size: 14px; margin-top: 8px; color: var(--muted); line-height: 1.6; }
input,select,textarea { border: 1px solid #d2d2d7; border-radius: 8px; padding: 8px 12px; color: var(--text); background: white; }
input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover { border-color: #adb9ca; }
select { cursor: pointer; }
textarea { width: 100%; resize: vertical; min-height: 128px; padding: 12px; line-height: 1.6; }
.form-label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.form-help { margin-top: 12px; font-size: 14px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 64px 24px; text-align: center; }
.empty-state .icon { width: 32px; height: 32px; }
.empty-state strong { font-size: 16px; font-weight: 500; }
.toast { position: fixed; right: 32px; bottom: 32px; z-index: 1000; max-width: calc(100vw - 32px); padding: 16px 24px; border: 1px solid #ffffff1a; border-radius: 12px; color: white; background: #1d1d1f; box-shadow: 0 4px 24px #00000014; font-size: 14px; }
.content-footer { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
@keyframes modal-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes drawer-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1440px) {
  .gpu-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar { padding: 0 32px; }
  #main { padding: 32px; }
  .connector-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1200px) {
  .gpu-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .updated { display: none; }
  .global-search { width: 176px; }
  .overview-bottom { grid-template-columns: 1fr; gap: 24px; }
  .rack-head { flex-direction: row; justify-content: space-between; }
  .rack-unit small { display: inline; font-size: 12px; color: var(--muted); }
}
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
  .resource-health { padding: 24px; }
  .resource-health .panel-body { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
  .resource-health .capacity-item { margin: 0; }
  .resource-health .capacity-title { display: block; }
  .resource-health .capacity-title strong { display: block; margin-top: 8px; }
  .capacity-footer { grid-column: 1/-1; margin-top: 0; }
}
@media (max-width: 1000px) {
  .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform 200ms var(--motion); box-shadow: 8px 0 24px #0000000d; }
  body.menu-open .sidebar { transform: translateX(0); visibility: visible; }
  .app-shell { margin-left: 0; }
  .mobile-toggle { display: inline-flex !important; }
  .topbar-left { gap: 8px; }
  .page-heading { margin-bottom: 32px; }
}
@media (max-width: 700px) {
  .topbar { height: 64px; padding: 0 16px; gap: 12px; }
  .topbar-right { gap: 8px; }
  .global-search,.profile,.top-divider { display: none; }
  .breadcrumb { gap: 8px; font-size: 14px; }
  #main { padding: 24px 16px; }
  h1 { font-size: 30px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 24px; }
  .page-actions { justify-content: flex-end; width: 100%; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 24px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 30px; margin-top: 8px; }
  .panel-title { font-size: 24px; }
  .panel { padding: 16px; }
  .panel-head { flex-wrap: wrap; padding-bottom: 24px; }
  .chart-range { margin-left: 0; }
  .chart-legend { padding-left: 40px; gap: 16px; }
  .dashboard-grid { gap: 24px; }
  .resource-health { padding: 16px; }
  .resource-health .panel-body { grid-template-columns: 1fr; gap: 24px; }
  .resource-health .capacity-title { display: flex; }
  .resource-health .capacity-title strong { margin-top: 0; }
  .capacity-footer { padding-top: 24px; }
  .overview-bottom { margin-top: 24px; gap: 24px; }
  .rack-grid { grid-template-columns: 1fr; gap: 16px; }
  .rack-head { flex-direction: row; }
  .rack-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rack-unit { min-height: 40px; font-size: 14px; padding: 8px; }
  .rack-unit small { display: none; }
  .rack-slot { height: 40px; }
  .rack-bottom { padding-top: 12px; font-size: 14px; }
  .rack-legend { font-size: 14px; }
  .integration-strip { margin-top: 24px; padding: 16px; align-items: flex-start; }
  .integration-strip > span { flex-basis: 100%; }
  .capacity-grid { grid-template-columns: 1fr; gap: 24px; }
  .capacity-grid .capacity-item + .capacity-item { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--line); }
  .gpu-grid { grid-template-columns: 1fr; gap: 16px; }
  .gpu-card { padding: 24px; }
  .gpu-values { margin: 24px 0 16px; }
  .connector-grid { grid-template-columns: 1fr; gap: 16px; }
  .connector-card { padding: 24px; }
  .topology { padding: 16px; }
  .topology-node { width: 100%; min-width: 0; }
  .toolbar { align-items: flex-start; }
  .segmented { max-width: 100%; }
  .select-field { flex-wrap: wrap; }
  .data-table td { padding: 16px 12px; }
  .inline-note { line-height: 1.7; }
  .drawer { border-radius: 0; width: 100%; }
  .drawer-header { padding: 24px; }
  #detail-body { padding: 0 24px 32px; }
  .detail-list > div { gap: 16px; }
  .modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); }
  .modal-header { padding: 24px 24px 16px; }
  #modal-body { padding: 0 24px 24px; }
  .modal-actions { gap: 8px; flex-wrap: wrap; }
  .guide-card { gap: 12px; }
  .guide-number { display: none; }
  .toast { right: 16px; bottom: 16px; padding: 16px; }
  .content-footer { flex-direction: column; gap: 8px; margin-top: 32px; }
  .grid-2,.grid-3 { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .icon-btn,.btn,.btn-sm,.segmented button { min-height: 44px; }
  input,select,textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active:not(:disabled), a:active, [data-card-action], .topology-node, .guide-card { transform: none !important; }
}