:root {
  color-scheme: dark;
  font-family: Inter, Pretendard, "SF Pro Display", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: #07111d;
  color: #e8f0f8;
  --bg: #07111d;
  --sidebar: #08131f;
  --topbar: #091725;
  --surface: #0d1a29;
  --surface-2: #102237;
  --surface-3: #132941;
  --line: #20364b;
  --line-soft: #172a3d;
  --text: #e8f0f8;
  --text-soft: #c5d3e2;
  --muted: #8ca0b7;
  --muted-2: #5e7590;
  --accent: #2f6df6;
  --blue: #3d85ff;
  --cyan: #47b7ff;
  --green: #2bd39b;
  --yellow: #f4b844;
  --red: #ff5f6f;
  --purple: #9a72ff;
  --shadow: 0 8px 24px #02070d33;
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--bg); }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid #5b8cff; outline-offset: 2px; }
svg { display: block; }
[hidden] { display: none !important; }

.layout { min-height: 100vh; display: grid; grid-template-columns: 164px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 14px 8px 12px;
  background: linear-gradient(180deg, #08131f 0%, #07121e 100%);
  border-right: 1px solid #183047;
  z-index: 20;
}
.brand { display: grid; place-items: center; height: 54px; margin-bottom: 7px; }
.brand-mark { width: 34px; height: 34px; overflow: hidden; border-radius: 9px; box-shadow: 0 0 0 1px #3b83ff55, 0 8px 22px #174fbb33; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.side-nav { display: grid; gap: 4px; }
.nav-item {
  appearance: none;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #a5b5c8;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.nav-item:hover { background: #0d2033; color: #d8e5f2; }
.nav-item.active { background: linear-gradient(135deg, #1f4fc4 0%, #245fde 100%); border-color: #3975ef; color: #fff; box-shadow: 0 5px 16px #123ea84a; }
.nav-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item .count { color: #627a95; font-size: 9px; letter-spacing: .04em; }
.nav-item.active .count { color: #c8d8ff; }
.nav-alert-count {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff5467;
  color: white;
  font-size: 9px;
  font-weight: 800;
}
.sidebar-spacer { flex: 1; }
.sidebar-health {
  margin: 12px 3px 0;
  padding: 11px 9px;
  border: 1px solid #1d354b;
  border-radius: 7px;
  background: #0b1a29;
  text-align: center;
}
.sidebar-health .status-dot { margin: 0 auto 7px; }
.sidebar-health strong { display: block; font-size: 10px; line-height: 1.35; color: #c8d6e5; }
.sidebar-health small { display: block; margin-top: 4px; color: #627990; font-size: 8px; line-height: 1.35; }

.main { min-width: 0; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(16px, 1.7vw, 28px);
  background: #081522f2;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #193047;
}
.top-title { min-width: 240px; }
.crumb { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #e6eef7; }
.crumb span { color: #738aa4; font-weight: 500; }
.top-subtitle { margin-top: 4px; color: #6d839b; font-size: 10px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.environment-pill, .auto-refresh {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid #21384e;
  border-radius: 6px;
  background: #0b1a2a;
  color: #c8d6e5;
  font-size: 10px;
  white-space: nowrap;
}
.auto-refresh { border-color: transparent; background: transparent; color: #8ca0b7; padding-inline: 4px; }
.status-dot, .live { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: #60758d; flex: 0 0 auto; }
.status-dot.healthy, .live { background: var(--green); box-shadow: 0 0 9px #29d39b88; }
.status-dot.degraded { background: var(--yellow); box-shadow: 0 0 8px #f4b84455; }
.status-dot.down { background: var(--red); box-shadow: 0 0 8px #ff5f6f66; }
.live.busy { background: var(--yellow); box-shadow: 0 0 9px #f4b84488; animation: pulse 1s ease-in-out infinite; }
.search-box {
  width: clamp(190px, 18vw, 270px);
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #21384e;
  border-radius: 6px;
  background: #0b1a2a;
}
.search-box svg { width: 15px; height: 15px; fill: none; stroke: #758ba4; stroke-width: 1.8; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #dfe8f2; font-size: 10px; }
.search-box input::placeholder { color: #61768f; }
.icon-button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #21384e;
  border-radius: 6px;
  background: #0b1a2a;
  color: #9fb2c7;
  cursor: pointer;
}
.icon-button:hover { border-color: #315576; color: #e2edf7; background: #102237; }
.icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button[disabled] { cursor: wait; opacity: .65; }
.icon-button[disabled] svg { animation: spin .7s linear infinite; }
.clock-block { min-width: 128px; padding-left: 8px; border-left: 1px solid #1b3044; text-align: right; }
.clock-block strong { display: block; font: 600 10px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c7d4e1; }
.clock-block small { display: block; margin-top: 3px; color: #6e849d; font-size: 8px; white-space: nowrap; }

.content { padding: 16px clamp(14px, 1.45vw, 24px) 28px; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.page-title h1 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.sub { margin-top: 4px; color: #778da5; font-size: 10px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.button-primary { background: var(--accent); border-color: #4c82fa; color: white; }
.button-ghost { background: #0c1c2d; border-color: #27435f; color: #b7c8da; }
.button-ghost:hover { background: #11273e; border-color: #3a5d80; color: #e0ebf5; }
.text-button { border: 0; background: transparent; color: #4e91ff; font-size: 9px; font-weight: 700; cursor: pointer; }

.summary { display: grid; grid-template-columns: repeat(6, minmax(136px, 1fr)); gap: 10px; margin-bottom: 10px; }
.stat {
  position: relative;
  min-width: 0;
  min-height: 99px;
  padding: 12px 12px 10px 47px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(155deg, #0e1d2d 0%, #0b1826 100%);
  box-shadow: var(--shadow);
}
.stat-icon {
  position: absolute;
  left: 11px;
  top: 12px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #113253;
  color: var(--blue);
}
.stat-icon.green { background: #0e382f; color: var(--green); }
.stat-icon.yellow { background: #392d14; color: var(--yellow); }
.stat-icon.red { background: #3b1d27; color: var(--red); }
.stat-icon.purple { background: #281f42; color: var(--purple); }
.stat-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-label { color: #a2b2c4; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; color: #eef5fb; font-size: 22px; font-weight: 780; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-value small { color: #8ca0b7; font-size: 10px; font-weight: 600; }
.stat-foot { display: flex; align-items: center; gap: 7px; margin-top: 7px; min-width: 0; color: #71879f; font-size: 8px; }
.stat-foot strong { font-weight: 700; }
.ok { color: var(--green) !important; }
.warn { color: var(--yellow) !important; }
.bad { color: var(--red) !important; }
.neutral { color: var(--cyan) !important; }
.stat-track { height: 5px; flex: 1; min-width: 36px; overflow: hidden; border-radius: 999px; background: #183047; }
.stat-track > span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.stat-mini-spark { position: absolute; right: 8px; bottom: 7px; width: 48px; height: 20px; opacity: .9; }
.stat-mini-spark svg { width: 100%; height: 100%; }

.host-panel { margin-bottom: 10px; }
.host-metrics { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)) minmax(210px, .9fr); }
.host-card { min-width: 0; padding: 11px 12px; border-right: 1px solid var(--line-soft); }
.host-card:last-child { border-right: 0; }
.host-card-head { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #8ca0b7; font-size: 8px; }
.host-card-head strong { color: #d8e3ed; font-size: 9px; }
.host-value { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; color: #eef5fb; font-size: 18px; font-weight: 780; font-variant-numeric: tabular-nums; }
.host-value small { color: #7c92aa; font-size: 8px; font-weight: 650; }
.host-bar { height: 5px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #173047; }
.host-bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.host-bar span.warn { background: var(--yellow); }.host-bar span.bad { background: var(--red); }
.host-chart { height: 31px; margin-top: 6px; }.host-chart svg { width: 100%; height: 100%; }
.host-meta-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; color: #6b8299; font-size: 7px; }
.host-facts { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-content: center; margin: 0; height: 100%; color: #6f879f; font-size: 7px; }
.host-facts dd { margin: 0; color: #c5d2de; text-align: right; font-variant-numeric: tabular-nums; }
.host-unavailable { grid-column: 1 / -1; padding: 18px 12px; color: #6f869e; text-align: center; font-size: 8px; }

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(350px, .9fr) minmax(470px, 1.2fr) 316px;
  grid-template-areas:
    "trends services rail"
    "architecture ai rail"
    "stn stn rail"
    "mcp mcp rail";
  gap: 10px;
  align-items: stretch;
}
.panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: linear-gradient(180deg, #0e1d2d 0%, #0b1826 100%);
  box-shadow: var(--shadow);
}
.panel-head {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-head.compact { min-height: 40px; }
.panel-head h2 { margin: 0; color: #dce6f0; font-size: 12px; font-weight: 760; letter-spacing: -.01em; text-transform: none; }
.panel-head p { margin: 3px 0 0; color: #687f98; font-size: 8px; }
.panel-meta { color: #5b8ee9; font-size: 8px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }

.trend-panel { grid-area: trends; display: flex; flex-direction: column; }
.trend-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0; }
.trend-card { min-width: 0; min-height: 135px; display: flex; flex-direction: column; padding: 10px 11px 8px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.trend-card:nth-child(2n) { border-right: 0; }
.trend-card:nth-last-child(-n+2) { border-bottom: 0; }
.trend-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.trend-label { color: #9caec1; font-size: 9px; }
.trend-value { margin-top: 4px; color: #e8f0f8; font-size: 14px; font-weight: 760; font-variant-numeric: tabular-nums; }
.trend-value small { color: #7289a1; font-size: 8px; font-weight: 600; }
.trend-delta { font-size: 8px; font-weight: 700; }
.trend-chart { flex: 1; min-height: 70px; margin-top: 7px; }
.trend-chart svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid { stroke: #1c3349; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#trendFill); opacity: .25; }
.chart-line.blue { stroke: var(--cyan); }
.chart-line.yellow { stroke: var(--yellow); }
.chart-line.red { stroke: var(--red); }
.chart-empty { height: 70px; display: grid; place-items: center; color: #5f7690; font-size: 9px; }

.service-panel { grid-area: services; }
.filter-summary { padding: 4px 8px; border-radius: 999px; background: #102b4d; color: #71a3ff; font-size: 8px; font-weight: 700; }
.service-table-head, .service-row { display: grid; grid-template-columns: minmax(155px, 1.45fr) 62px 58px 62px minmax(96px, .8fr); align-items: center; gap: 8px; }
.service-table-head { height: 30px; padding: 0 11px; border-bottom: 1px solid var(--line-soft); color: #617990; font-size: 8px; }
.service-table { max-height: 550px; overflow: auto; scrollbar-width: thin; scrollbar-color: #26445f transparent; }
.service-row { min-height: 31px; padding: 5px 11px; border-bottom: 1px solid #14283b; font-size: 8px; }
.service-row:last-child { border-bottom: 0; }
.service-row:hover { background: #102137; }
.service-name { min-width: 0; display: flex; align-items: center; gap: 7px; }
.service-name .status-dot { width: 7px; height: 7px; }
.service-title { min-width: 0; }
.service-title strong { display: block; color: #d6e1ec; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-title small { display: block; margin-top: 1px; color: #5f7690; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.badge.healthy { background: #0f382f; color: #35dfa7; }
.badge.degraded { background: #3b3017; color: #f7bd52; }
.badge.down { background: #431f29; color: #ff7180; }
.badge.unknown, .badge.disabled { background: #263547; color: #93a6ba; }
.service-number { color: #b3c1d0; font-variant-numeric: tabular-nums; }
.service-spark { height: 25px; }
.service-spark svg { width: 100%; height: 100%; overflow: visible; }
.spark-grid { stroke: #20364b; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.spark-line { fill: none; stroke: #2ed0a0; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark-line.warn { stroke: var(--yellow); }
.spark-line.bad { stroke: var(--red); }
.spark-empty { color: #5f7690; font-size: 8px; }
.service-empty { padding: 24px 12px; text-align: center; color: #6a8199; font-size: 9px; }

.right-rail { grid-area: rail; display: grid; gap: 10px; align-self: stretch; align-content: start; }
.rail-panel { min-height: 0; }
.alert-badge { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; background: #3e202a; color: #ff7180; font-size: 8px; font-weight: 800; }
.alert-list, .incident-list, .event-list { max-height: 196px; overflow: auto; scrollbar-width: thin; scrollbar-color: #27445f transparent; }
.alert-item, .incident-item, .event-item { position: relative; padding: 9px 10px 9px 29px; border-bottom: 1px solid #152a3e; }
.alert-item:last-child, .incident-item:last-child, .event-item:last-child { border-bottom: 0; }
.rail-marker { position: absolute; left: 11px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 7px #f4b84455; }
.rail-marker.bad { background: var(--red); box-shadow: 0 0 7px #ff5f6f66; }
.rail-marker.ok { background: var(--green); box-shadow: 0 0 7px #2bd39b55; }
.rail-marker.info { background: var(--blue); box-shadow: 0 0 7px #3d85ff55; }
.rail-marker.muted { background: var(--muted-2); box-shadow: none; }
.rail-item-head { display: flex; justify-content: space-between; gap: 9px; }
.rail-item-head strong { min-width: 0; color: #d4dfeb; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item-head time { flex: 0 0 auto; color: #647c95; font-size: 7px; }
.rail-item-copy { margin-top: 4px; color: #7e93aa; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.rail-item-tag { display: inline-flex; align-items: center; height: 16px; margin-top: 5px; padding: 0 5px; border-radius: 4px; background: #41252a; color: #ff7e8c; font-size: 7px; font-weight: 700; }
.rail-item-tag.ok { background: #11382f; color: #38dda7; }
.rail-item-tag.muted { background: #17283a; color: var(--muted); }
.rail-empty { padding: 18px 12px; text-align: center; color: #6a8199; font-size: 8px; line-height: 1.5; }
.rail-empty strong { display: block; color: #42d7a5; font-size: 9px; margin-bottom: 4px; }
.pulse-label { display: inline-flex; align-items: center; gap: 4px; color: #39d6a2; font-size: 7px; font-weight: 800; }
.pulse-label i { width: 6px; height: 6px; border-radius: 50%; background: #36d7a4; box-shadow: 0 0 7px #36d7a477; animation: pulse 1.2s ease-in-out infinite; }
.live-events-panel .event-item { padding-left: 10px; display: grid; grid-template-columns: 48px 42px minmax(0, 1fr); gap: 6px; align-items: center; }
.event-time { color: #647c95; font: 7px ui-monospace, SFMono-Regular, Menlo, monospace; }
.event-level { font-size: 7px; font-weight: 800; }
.event-message { min-width: 0; color: #8da1b6; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.architecture-panel { grid-area: architecture; }
.architecture-mini { min-height: 225px; display: grid; align-content: center; gap: 9px; padding: 12px; background-image: linear-gradient(#16304a22 1px, transparent 1px), linear-gradient(90deg, #16304a22 1px, transparent 1px); background-size: 23px 23px; }
.arch-layer { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; }
.arch-layer-label { color: #5e7791; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.arch-nodes { position: relative; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.arch-node { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 130px; height: 28px; padding: 0 8px; border: 1px solid #285177; border-radius: 5px; background: #0b2237; color: #c8d9e9; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arch-node.worker { border-color: #2f5a51; background: #0d2826; }
.arch-node.data { border-color: #5c4f2f; background: #2b2414; }
.arch-node.realtime { border-color: #284f62; background: #0d2632; }
.arch-node .status-dot { width: 6px; height: 6px; }
.arch-arrow { color: #58748e; font-size: 10px; }

.ai-shell { grid-area: ai; }
.ai-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 0; }
.ai-panel { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line-soft); }
.ai-panel:last-child { border-right: 0; }
.ai-panel h3 { margin: 0 0 4px; color: #dce7f1; font-size: 9px; }
.ai-meta { margin-bottom: 7px; color: #667f98; font-size: 7px; }
.provider-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #152a3e; }
.provider-row strong { display: block; color: #cedbe8; font-size: 8px; }
.provider-row small { display: block; margin-top: 2px; color: #667e96; font-size: 7px; }
.provider-state { flex: 0 0 auto; font-size: 7px; font-weight: 800; }
.model-on { color: var(--green); }
.model-off { color: var(--red); }
.model-check { color: var(--yellow); }
.balance-chart { max-width: 180px; margin-top: 5px; }
.balance-track { height: 4px; display: flex; overflow: hidden; border-radius: 99px; background: #1b3248; }
.balance-segment.granted { background: var(--purple); }
.balance-segment.topped { background: var(--cyan); }
.balance-segment.used { background: var(--red); }
.balance-segment.remaining { background: var(--green); }
.balance-caption { display: flex; justify-content: space-between; gap: 7px; margin-top: 3px; color: #627b93; font-size: 6px; }
.model-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 7px; }
.model-table th { padding: 4px 3px; border-bottom: 1px solid #1a3046; color: #657e97; text-align: left; font-weight: 600; }
.model-table th:first-child { width: 14px; }
.model-table th:last-child { width: 45px; }
.model-table td { padding: 5px 3px; border-bottom: 1px solid #14283b; vertical-align: middle; }
.model-table tbody { display: table-row-group; }
.model-name { color: #cdd9e5; font-weight: 700; }
.model-table small { display: block; margin-top: 1px; color: #607990; font-size: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-panel:has(.model-table) { max-height: 225px; overflow: auto; scrollbar-width: thin; scrollbar-color: #27445f transparent; }

.stn-shell { grid-area: stn; }
.stn-shell > .stn-grid { padding: 0; }

.mcp-shell { grid-area: mcp; }
.mcp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 0; }
.mcp-column { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line-soft); }
.mcp-column:last-child { border-right: 0; }
.mcp-column h3 { margin: 0 0 6px; color: #dce7f1; font-size: 9px; }
.mcp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mcp-card { min-width: 0; padding: 8px 9px; border: 1px solid #1d3650; border-radius: 6px; background: #0b1c2c; }
.mcp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcp-card-head strong { min-width: 0; color: #cedbe8; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcp-card small { display: block; margin-top: 3px; color: #667e96; font-size: 7px; overflow-wrap: anywhere; }
.mcp-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mcp-tool { padding: 2px 5px; border-radius: 4px; background: #13293d; color: #9fb6cb; font: 6.5px ui-monospace, SFMono-Regular, Menlo, monospace; }
.mcp-tool.missing { background: #431f29; color: #ff7180; }
.mcp-error { margin-top: 5px; color: #ff9aa5; font-size: 7px; overflow-wrap: anywhere; }
.empty { color: #667f97; font-size: 8px; line-height: 1.5; }

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: radial-gradient(circle at 50% 42%, #0d243c 0%, #07111d 42%, #050c15 100%);
}
.boot-mark { width: 42px; height: 42px; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px #3c82ff55, 0 14px 32px #0f51c34d; }
.boot-mark img { width: 100%; height: 100%; object-fit: cover; }
.boot-spinner { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #1d3a55; border-top-color: #3f7cf5; animation: spin .75s linear infinite; }
.boot-text { color: #9eb0c3; font-size: 11px; }
.boot-sub { color: #5b738d; font-size: 8px; }
.boot.error .boot-spinner { display: none; }
.boot.error .boot-text { color: #ff7987; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .38; } }

@media (max-width: 1420px) {
  .summary { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .host-metrics { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
  .host-card:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); border-right: 0; }
  .host-facts { grid-template-columns: repeat(4, auto); justify-content: start; }
  .dashboard-grid {
    grid-template-columns: minmax(340px, .95fr) minmax(450px, 1.2fr) 286px;
  }
  .top-subtitle, .auto-refresh { display: none; }
}

@media (max-width: 1180px) {
  .layout { grid-template-columns: 132px minmax(0, 1fr); }
  .sidebar { padding-inline: 6px; }
  .nav-item { grid-template-columns: 20px minmax(0, 1fr); padding-inline: 8px; }
  .nav-item .count, .nav-alert-count { display: none; }
  .dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "trends services"
      "architecture ai"
      "stn stn"
      "mcp mcp"
      "rail rail";
  }
  .right-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clock-block { display: none; }
}

@media (max-width: 860px) {
  .layout { display: block; }
  .sidebar { position: static; width: 100%; height: auto; display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 7px 10px; border-right: 0; border-bottom: 1px solid #183047; }
  .brand { width: 36px; height: 36px; margin: 0 4px 0 0; }
  .brand-mark { width: 30px; height: 30px; }
  .side-nav { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
  .nav-item { width: auto; min-width: 76px; min-height: 36px; grid-template-columns: 16px auto; gap: 5px; padding: 0 8px; }
  .nav-item svg { width: 15px; height: 15px; }
  .sidebar-spacer, .sidebar-health { display: none; }
  .topbar { position: static; align-items: flex-start; min-height: auto; padding: 11px 12px; }
  .top-actions { flex-wrap: wrap; }
  .search-box { width: 180px; }
  .environment-pill { display: none; }
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .host-card:nth-child(2n) { border-right: 0; }
  .host-card { border-bottom: 1px solid var(--line-soft); }
  .host-card:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .host-facts { grid-template-columns: 1fr auto 1fr auto; }
  .dashboard-grid { display: block; }
  .panel, .right-rail { margin-bottom: 10px; }
  .right-rail { display: grid; grid-template-columns: 1fr; }
  .ai-grid, .mcp-grid { grid-template-columns: 1fr; }
  .mcp-column { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .ai-panel { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .service-table-head, .service-row { grid-template-columns: minmax(150px, 1.3fr) 60px 50px 56px minmax(80px, .7fr); }
}

@media (max-width: 560px) {
  .topbar { display: block; }
  .top-actions { margin-top: 9px; justify-content: flex-start; }
  .search-box { flex: 1; min-width: 0; width: auto; }
  .content { padding-inline: 9px; }
  .page-title { align-items: flex-start; flex-direction: column; }
  .summary { gap: 7px; }
  .host-metrics { grid-template-columns: 1fr; }
  .host-card { border-right: 0; }
  .host-card:last-child { grid-column: auto; }
  .host-facts { grid-template-columns: 1fr auto; }
  .stat { min-height: 94px; padding-left: 43px; }
  .stat-icon { left: 9px; }
  .trend-grid { grid-template-columns: 1fr; }
  .trend-panel { display: block; }
  .trend-grid { display: grid; grid-template-rows: none; }
  .trend-card { border-right: 0; }
  .trend-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .trend-card:last-child { border-bottom: 0; }
  .service-table-head { display: none; }
  .service-row { grid-template-columns: minmax(140px, 1fr) 58px 54px; }
  .service-row > :nth-child(4), .service-row > :nth-child(5) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}