:root {
  --ink: #eef6f8;
  --muted: #8ea2aa;
  --faint: #60747d;
  --bg: #05090b;
  --panel: #0b1216;
  --panel-2: #0e181d;
  --panel-3: #132127;
  --line: #20343c;
  --line-strong: #31505b;
  --mint: #42e7bd;
  --cyan: #59bff9;
  --amber: #f2b765;
  --red: #ff7d72;
  --green: #62d98c;
  --violet: #a995ff;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  font-family: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 85% 0%, rgba(36, 151, 157, .12), transparent 28rem), var(--bg); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.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; }

.demo-app { min-height: 100vh; display: grid; grid-template-columns: 238px minmax(0, 1fr); grid-template-rows: 66px minmax(0, 1fr); }
.demo-topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(5, 9, 11, .92); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 40; }
.demo-brand { display: flex; align-items: center; gap: 10px; min-width: 214px; font-weight: 700; letter-spacing: -.02em; font-size: 1.04rem; }
.demo-brand svg { width: 28px; height: 28px; fill: none; stroke: var(--mint); stroke-width: 1.7; }
.demo-brand span span { color: var(--mint); }
.product-crumb { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .8rem; white-space: nowrap; }
.product-crumb b { color: var(--ink); font-weight: 500; }
.top-search { flex: 1; max-width: 520px; margin-left: auto; position: relative; }
.top-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #091014; color: var(--ink); padding: 10px 42px 10px 14px; outline: none; }
.top-search input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(66, 231, 189, .09); }
.top-search kbd { position: absolute; right: 10px; top: 9px; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--faint); font: 11px "IBM Plex Mono", monospace; }
.demo-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #31554c; color: #9bf4d9; background: #0d211c; border-radius: 999px; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.demo-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.user-menu { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .85rem; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #1e5051, #162a42); color: #c9fff2; font-weight: 700; }

.demo-sidebar { grid-column: 1; grid-row: 2; border-right: 1px solid var(--line); padding: 20px 14px; background: rgba(6, 12, 15, .82); position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; z-index: 20; }
.side-label { margin: 8px 10px 9px; color: var(--faint); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.demo-nav { display: grid; gap: 3px; }
.demo-nav button { display: flex; align-items: center; gap: 11px; width: 100%; border: 1px solid transparent; border-radius: 7px; padding: 10px 11px; background: transparent; color: var(--muted); text-align: left; cursor: pointer; font-size: .89rem; }
.demo-nav button:hover { color: var(--ink); background: #0f1a1f; }
.demo-nav button.active { color: var(--ink); border-color: #25424a; background: linear-gradient(90deg, rgba(66, 231, 189, .12), rgba(21, 49, 56, .32)); }
.nav-glyph { width: 20px; color: var(--faint); font-family: "IBM Plex Mono", monospace; font-size: .75rem; text-align: center; }
.demo-nav button.active .nav-glyph { color: var(--mint); }
.side-divider { height: 1px; margin: 18px 8px; background: var(--line); }
.side-foot { margin: 20px 10px 0; color: var(--faint); font-size: .74rem; line-height: 1.55; }
.side-foot a { color: var(--mint); }

.demo-main { grid-column: 2; grid-row: 2; min-width: 0; padding: 28px clamp(18px, 3vw, 42px) 60px; }
.page-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
.page-kicker { margin: 0 0 6px; color: var(--mint); font: 600 11px "IBM Plex Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }
.page-head h1 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.2rem); letter-spacing: -.045em; line-height: 1.1; }
.page-head p { max-width: 640px; margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.btn { border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 13px; background: #0c1519; color: var(--ink); cursor: pointer; font-weight: 600; font-size: .82rem; }
.btn:hover { border-color: #4c707b; background: #132127; }
.btn-primary { color: #032019; border-color: var(--mint); background: var(--mint); }
.btn-primary:hover { background: #7bf2d3; border-color: #7bf2d3; }
.btn-danger { color: #ffb3ad; border-color: #633632; background: #211210; }
.btn-small { padding: 6px 9px; font-size: .75rem; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, rgba(14, 24, 29, .97), rgba(8, 15, 18, .97)); box-shadow: 0 1px 0 rgba(255,255,255,.025) inset; }
.metric-card { padding: 18px; position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; right: -25px; bottom: -40px; width: 110px; height: 110px; border-radius: 50%; background: rgba(66,231,189,.045); }
.metric-card small, .meta { color: var(--faint); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.metric-card strong { display: block; margin: 10px 0 4px; font-size: 1.65rem; letter-spacing: -.04em; }
.metric-card span { color: var(--muted); font-size: .79rem; }
.delta-up { color: var(--green) !important; }
.delta-warn { color: var(--amber) !important; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .8fr); gap: 16px; }
.grid-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel { min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.panel-head h2, .panel-head h3 { margin: 0; font-size: .95rem; letter-spacing: -.01em; }
.panel-head span { color: var(--faint); font: 11px "IBM Plex Mono", monospace; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }

.rack-map { display: grid; grid-template-columns: repeat(4, minmax(118px, 1fr)); gap: 10px; }
.rack-card { min-height: 138px; border: 1px solid var(--line); border-radius: 7px; background: #091216; padding: 12px; cursor: pointer; text-align: left; position: relative; overflow: hidden; }
.rack-card:hover { border-color: var(--mint); transform: translateY(-1px); }
.rack-card .rack-top { display: flex; justify-content: space-between; gap: 8px; }
.rack-card strong { font: 600 .88rem "IBM Plex Mono", monospace; }
.rack-card small { color: var(--faint); }
.rack-card p { margin: 26px 0 4px; font-size: .82rem; }
.rack-card .rack-power { color: var(--muted); font: 12px "IBM Plex Mono", monospace; }
.rack-card .rack-load { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--mint); }
.rack-card.warning .rack-load { background: var(--amber); }
.rack-card.critical .rack-load { background: var(--red); }

.status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font: 600 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.status.warning::before { background: var(--amber); }
.status.critical::before { background: var(--red); box-shadow: 0 0 9px rgba(255,125,114,.5); }
.status.provisioning::before { background: var(--cyan); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .3; } }

.event-list { display: grid; }
.event { display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(32,52,60,.7); }
.event:last-child { border-bottom: 0; }
.event-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--mint); }
.event-dot.warn { background: var(--amber); }
.event-dot.bad { background: var(--red); }
.event strong { display: block; font-size: .83rem; }
.event p { margin: 3px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.event time { color: var(--faint); font: 10px "IBM Plex Mono", monospace; }

.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.chart-card { border: 1px solid var(--line); border-radius: 7px; background: #091216; padding: 14px; overflow: hidden; }
.chart-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.chart-card header span { color: var(--muted); font-size: .74rem; }
.chart-card header strong { font: 600 1.03rem "IBM Plex Mono", monospace; }
.spark { display: block; width: 100%; height: 72px; margin-top: 10px; overflow: visible; }
.spark .area { fill: rgba(66,231,189,.07); }
.spark .line { fill: none; stroke: var(--mint); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.spark .grid { stroke: #18282e; stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark.amber .area { fill: rgba(242,183,101,.07); }
.spark.amber .line { stroke: var(--amber); }
.spark.cyan .area { fill: rgba(89,191,249,.07); }
.spark.cyan .line { stroke: var(--cyan); }

.rack-detail { display: grid; grid-template-columns: minmax(360px, .8fr) minmax(0, 1.15fr); gap: 16px; }
.rack-shell { display: grid; grid-template-columns: 36px minmax(0, 1fr) 118px; gap: 8px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: #060b0e; }
.rack-units { display: flex; flex-direction: column; justify-content: space-between; color: var(--faint); font: 10px "IBM Plex Mono", monospace; text-align: right; padding: 3px 2px 3px 0; }
.rack-devices { display: grid; grid-template-rows: repeat(48, 7px); border: 1px solid #36505a; background: repeating-linear-gradient(to bottom, #0b1519 0 6px, #17272d 6px 7px); padding: 3px; gap: 0; }
.device-block { z-index: 1; border: 1px solid #315864; border-radius: 3px; background: #102832; color: var(--ink); padding: 6px 8px; cursor: pointer; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .71rem; }
.device-block:hover { border-color: var(--mint); filter: brightness(1.14); }
.device-block.server { background: #102821; border-color: #28624e; }
.device-block.cooling { background: #1b2437; border-color: #445d91; }
.device-block small { color: var(--muted); font: 9px "IBM Plex Mono", monospace; }
.rack-side-power { display: grid; gap: 8px; }
.vertical-device { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #49452d; border-radius: 4px; color: #ead28c; background: #201e13; font: 11px/1.5 "IBM Plex Mono", monospace; cursor: pointer; text-align: left; }
.rack-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.rack-summary div { border: 1px solid var(--line); border-radius: 6px; padding: 11px; background: #091216; }
.rack-summary span { display: block; color: var(--faint); font: 9px "IBM Plex Mono", monospace; text-transform: uppercase; }
.rack-summary strong { display: block; margin-top: 7px; font-size: .84rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: .79rem; }
.data-table th { padding: 10px 12px; color: var(--faint); font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--line); background: #091216; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid rgba(32,52,60,.65); color: var(--muted); vertical-align: middle; }
.data-table tr:hover td { background: rgba(66,231,189,.025); }
.data-table td strong, .data-table td code { color: var(--ink); }
.data-table code { font-family: "IBM Plex Mono", monospace; font-size: .74rem; }

.port-grid { display: grid; grid-template-columns: repeat(8, minmax(62px, 1fr)); gap: 8px; }
.port { min-height: 74px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: #081115; cursor: context-menu; text-align: left; position: relative; }
.port:hover { border-color: var(--cyan); }
.port b { display: block; font: 600 11px "IBM Plex Mono", monospace; }
.port span { display: block; margin-top: 7px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.port i { position: absolute; right: 7px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.port.down i { background: var(--faint); }
.context-menu { position: fixed; z-index: 100; width: 220px; display: none; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #0b1418; box-shadow: var(--shadow); }
.context-menu.open { display: grid; }
.context-menu button { border: 0; border-radius: 5px; padding: 9px 10px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: .78rem; }
.context-menu button:hover { color: var(--ink); background: #14242a; }

.power-bar-list { display: grid; gap: 11px; }
.power-bar-row { display: grid; grid-template-columns: 44px 1fr 72px; gap: 10px; align-items: center; font: 11px "IBM Plex Mono", monospace; }
.power-bar-row .track { height: 9px; border-radius: 2px; background: #142229; overflow: hidden; }
.power-bar-row .track span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--mint)); }
.zone-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zone { border: 1px solid var(--line); border-radius: 6px; padding: 11px; background: #091216; }
.zone b { display: block; margin-top: 6px; font: 600 .94rem "IBM Plex Mono", monospace; }
.zone small { color: var(--faint); }
.zone.current { border-color: var(--mint); background: rgba(66,231,189,.07); }

.camera-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.camera { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #020506; }
.camera-view { position: relative; aspect-ratio: 16 / 9; background: #061015; overflow: hidden; }
.camera-view img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .74; filter: saturate(.6) contrast(1.15) brightness(.72); }
.camera-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.13) 3px 4px), linear-gradient(90deg, rgba(66,231,189,.08), transparent 40%); }
.camera-overlay { position: absolute; inset: 11px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; color: #d4fff4; font: 10px "IBM Plex Mono", monospace; text-shadow: 0 1px 4px #000; }
.camera-overlay div { display: flex; justify-content: space-between; }
.camera footer { padding: 12px 14px; display: flex; justify-content: space-between; gap: 12px; }
.camera footer strong { font-size: .8rem; }
.camera footer span { color: var(--faint); font-size: .72rem; }
.source-note { margin: 12px 0 0; color: var(--faint); font: 10px/1.5 "IBM Plex Mono", monospace; }
.source-note a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.52); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; right: 0; top: 0; z-index: 80; width: min(980px, 96vw); height: 100vh; transform: translateX(102%); transition: transform .22s ease; border-left: 1px solid var(--line-strong); background: #081014; box-shadow: var(--shadow); overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(8,16,20,.94); backdrop-filter: blur(14px); }
.drawer-head h2 { margin: 4px 0 0; font-size: 1.15rem; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #0c171b; color: var(--muted); cursor: pointer; }
.drawer-body { padding: 20px 22px 38px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 18px; }
.detail-grid div { padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #0b1519; }
.detail-grid span { display: block; color: var(--faint); font: 9px "IBM Plex Mono", monospace; text-transform: uppercase; }
.detail-grid strong { display: block; margin-top: 6px; font-size: .78rem; }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.68); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-backdrop{visibility:hidden}.modal-backdrop.open{visibility:visible}
.modal { width: min(640px, 100%); max-height: 90vh; overflow: auto; border: 1px solid var(--line-strong); border-radius: 10px; background: #0a1317; box-shadow: var(--shadow); transform: translateY(8px); transition: transform .18s ease; }
.modal-backdrop.open .modal { transform: translateY(0); }
.modal-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1rem; }
.modal-body { padding: 20px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 9px; padding: 14px 20px 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: var(--muted); font-size: .76rem; }
.field input, .field select { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #071014; color: var(--ink); padding: 10px 11px; outline: none; }
.field input:focus, .field select:focus { border-color: var(--mint); }
.form-note { grid-column: 1 / -1; margin: 2px 0 0; color: var(--faint); font-size: .72rem; line-height: 1.5; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: grid; gap: 8px; }
.toast { min-width: 280px; max-width: 420px; border: 1px solid #31584d; border-radius: 8px; padding: 12px 14px; background: #0b1c17; color: #c9ffef; box-shadow: var(--shadow); font-size: .78rem; animation: toast-in .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sku { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: #0a1317; }
.sku-top { padding: 17px; background: linear-gradient(135deg, #123a2b, #0d2b23); min-height: 116px; position: relative; }
.sku.red .sku-top { background: linear-gradient(135deg, #40231f, #271715); }
.sku-top small { color: #9bc8bb; font: 600 10px "IBM Plex Mono", monospace; letter-spacing: .08em; }
.sku-top h3 { margin: 9px 0 4px; font-size: 1.08rem; }
.sku-top p { margin: 0; color: #a8c8c0; font-size: .75rem; }
.availability { position: absolute; right: 13px; top: 13px; padding: 5px 7px; border: 1px solid rgba(126,240,203,.4); border-radius: 4px; color: #a6f9dc; background: rgba(7,24,19,.55); font: 600 10px "IBM Plex Mono", monospace; }
.sku-body { padding: 14px 16px 16px; }
.sku-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 14px; }
.sku-specs small { display: block; color: var(--faint); font: 9px "IBM Plex Mono", monospace; text-transform: uppercase; }
.sku-specs strong { display: block; margin-top: 5px; font-size: .75rem; }
.sku-price { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sku-price strong { font: 600 .84rem "IBM Plex Mono", monospace; }

.terminal { overflow: hidden; border: 1px solid #2c4149; border-radius: 8px; background: #030708; box-shadow: 0 18px 40px rgba(0,0,0,.2) inset; }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-bottom: 1px solid #1d2c31; background: #0a1215; color: var(--muted); font: 11px "IBM Plex Mono", monospace; }
.terminal-screen { min-height: 370px; max-height: 480px; overflow-y: auto; padding: 15px; color: #b9d7cf; font: 12px/1.55 "IBM Plex Mono", monospace; white-space: pre-wrap; }
.terminal-line { margin-bottom: 13px; }
.terminal-command { color: #d7fff4; }
.terminal-output { color: #88a49d; }
.terminal-input { display: flex; align-items: center; border-top: 1px solid #1d2c31; padding: 10px 13px; font: 12px "IBM Plex Mono", monospace; }
.terminal-input span { color: var(--mint); margin-right: 8px; }
.terminal-input input { flex: 1; border: 0; background: transparent; color: var(--ink); outline: 0; font: inherit; }

.tabs { display: flex; gap: 4px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.tabs button { padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; }
.tabs button.active { color: var(--ink); border-color: var(--mint); }
.api-list { display: grid; gap: 8px; }
.api-row { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #091216; }
.method { font: 700 10px "IBM Plex Mono", monospace; color: var(--mint); }
.method.post { color: var(--amber); }
.api-row code { color: #c6dde3; font: 11px "IBM Plex Mono", monospace; overflow-wrap: anywhere; }
.api-row span:last-child { color: var(--faint); font-size: .7rem; }
.code-block { overflow: auto; border: 1px solid var(--line); border-radius: 7px; padding: 14px; background: #04090b; color: #a7c9c0; font: 11px/1.65 "IBM Plex Mono", monospace; white-space: pre; }
.empty { padding: 38px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 7px; color: var(--ink); }
.callout { border: 1px solid #314d57; border-radius: 7px; padding: 12px 14px; background: rgba(38,85,101,.12); color: #b2cbd2; font-size: .76rem; line-height: 1.55; }
.callout.warning { border-color: #5c4a2e; background: rgba(105,76,25,.14); color: #e6c990; }

.idrac { border: 1px solid #314d57; border-radius: 8px; overflow: hidden; background: #071014; }
.idrac header { display: flex; justify-content: space-between; padding: 13px 15px; background: #10375c; }
.idrac header strong { letter-spacing: .08em; }
.idrac-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.idrac-screen div { padding: 13px; border: 1px solid var(--line); border-radius: 5px; }
.idrac-screen small { color: var(--faint); }
.idrac-screen strong { display: block; margin-top: 6px; }

.asset-summary,
.asset-identity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.asset-summary { margin-bottom: 14px; }
.asset-identity { margin-bottom: 14px; }

.asset-summary > div,
.asset-identity > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #091216;
}

.asset-summary span,
.asset-identity span,
.telemetry-toolbar span {
  display: block;
  color: var(--faint);
  font: 600 10px/1.3 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.asset-summary strong,
.asset-identity strong,
.telemetry-toolbar strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.asset-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.telemetry-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #071014;
}

.telemetry-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.telemetry-panels-full {
  margin-bottom: 16px;
}

.telemetry-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(145deg, #0c171c, #081014);
}

.telemetry-panel > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px 8px;
}

.telemetry-panel > header span {
  display: block;
  color: #6f8790;
  font: 10px/1.4 "IBM Plex Mono", monospace;
}

.telemetry-panel > header h3 {
  margin: 4px 0 0;
  font-size: .92rem;
}

.telemetry-panel > header > b {
  color: var(--mint);
  font: 600 11px "IBM Plex Mono", monospace;
}

.telemetry-chart {
  display: block;
  width: 100%;
  height: 210px;
  padding: 0 10px;
}

.telemetry-chart line {
  stroke: #1b3038;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.telemetry-chart text {
  fill: #607780;
  font: 10px "IBM Plex Mono", monospace;
}

.telemetry-chart path {
  fill: none;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}

.series-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
  max-height: 128px;
  overflow-y: auto;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(32,52,60,.7);
}

.series-legend span {
  display: grid;
  grid-template-columns: 7px 1fr auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font: 10px/1.4 "IBM Plex Mono", monospace;
}

.series-legend i {
  width: 7px;
  height: 2px;
}

.series-legend b {
  overflow: hidden;
  color: #b9cbd1;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-legend em {
  color: var(--ink);
  font-style: normal;
}

.mapping-panel { margin-top: 16px; }
.mapping-panel code { display: block; max-width: 480px; overflow-wrap: anywhere; white-space: normal; }

.asset-select {
  display: grid;
  gap: 5px;
  min-width: min(440px, 76vw);
}

.asset-select span {
  color: var(--faint);
  font: 600 10px "IBM Plex Mono", monospace;
  letter-spacing: .08em;
}

.asset-select select {
  width: 100%;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  background: #091216;
}

.console-shell {
  overflow: hidden;
  border: 1px solid #294550;
  border-radius: 8px;
  background: #050a0c;
}

.console-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #294550;
  color: #93abb3;
  background: #0b161b;
  font: 11px "IBM Plex Mono", monospace;
}

.console-shell pre {
  min-height: 320px;
  margin: 0;
  padding: 18px;
  color: #a8d7ca;
  font: 12px/1.7 "IBM Plex Mono", monospace;
  white-space: pre-wrap;
}

.console-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px;
}

.console-metrics div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0b1519;
}

.console-metrics span { display: block; color: var(--faint); font-size: .72rem; }
.console-metrics b { display: block; margin-top: 8px; font-size: 1rem; }

.mobile-nav-toggle { display: none; }
.panel { margin-bottom: 20px; min-width: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.data-table td small { display:block; margin-top:6px; }
.data-table .btn { margin:3px; }
.data-table code { overflow-wrap:anywhere; white-space:normal; }
.rack-shell { grid-template-columns:24px minmax(0,1fr); }
.rack-devices { grid-template-rows:repeat(48,minmax(0,1fr)); height:900px; gap:2px; }
.facility-devices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rack-detail{grid-template-columns:1.1fr 1fr}
.device-block>span{min-width:0}.device-block b{display:block;font-size:14px}.device-block small{display:block;font-size:12px;white-space:normal}.device-block.switch b{display:none}.device-block.switch small{font-size:13px}.device-block>small{margin-left:8px;font-size:12px}.device-block{gap:8px}
.demo-chip::before{display:none}
.facility-device { text-align:left; background:#0d1e26; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:18px; cursor:pointer; }
.facility-device span,.facility-device small { display:block; font-size:13px; color:#a6bdc7; }
.facility-device strong { display:block; font-size:24px; margin:12px 0; }
.operation-heading { display:flex; justify-content:space-between; gap:20px; }
.operation-heading{align-items:center}.asset-identity .status{display:inline-flex;width:auto}
.data-table .status{white-space:nowrap}.modal-foot .btn{min-width:100px}
.operation-heading strong { text-transform:capitalize; font-size:20px; }
.operation-heading small { display:block; margin-top:6px; color:var(--muted); }
.operation-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; padding:0; gap:12px; margin:24px 0 8px; }
.operation-steps li { border-top:2px solid #253c48; padding-top:16px; font-size:14px; }
.operation-steps li>span { display:block; color:#6e8894; margin-bottom:10px; font-family:'IBM Plex Mono'; }
.operation-steps .complete { border-color:#42e7bd; }.operation-steps .complete>span { color:#42e7bd; }
.operation-steps .current { border-color:#59bff9; }
.operation-steps small { display:block; color:var(--muted); font-size:12px; margin-top:6px; }
.passport-result { border:1px solid #2b7865; border-radius:8px; background:#0c241f; padding:20px; margin-top:22px; }
.passport-result>span { font-size:12px; letter-spacing:.1em; color:#42e7bd; }
.passport-result h3 { font:24px 'IBM Plex Mono'; }
.status.succeeded,.status.running,.status.ready { color:#42e7bd; background:#0e342c; }
.status.failed,.status.quarantined { color:#ff9e95; background:#42201f; }
.status.drained { color:#f2b765; background:#392e1c; }
.filter-field { display:block; margin-bottom:20px; font-size:14px; }
.filter-field input { display:block; width:min(100%,600px); margin-top:8px; padding:12px; background:#0a151c; color:var(--text); border:1px solid var(--line); border-radius:6px; }
.field>span { color:var(--muted); font-size:14px; }
.estimate { padding:14px; font-size:20px; color:#42e7bd; }
.camera-offline { min-height:230px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#8399a4; background:#071016; }
details>summary { padding:20px; cursor:pointer; font-size:14px; }
.empty-state { color:var(--muted); margin:0; }
.btn { min-height:40px; font-size:14px; }
.btn:disabled { cursor:not-allowed; opacity:.4; }
.btn:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #59bff9; outline-offset:3px; }
.page-head p,.data-table td,.data-table th,.demo-nav button { font-size:14px; }
.telemetry-toolbar { font-size:13px; }
.asset-select { max-width:100%; }.asset-select select { max-width:360px; width:100%; }
.demo-main,.grid-2>*,.rack-detail>* { min-width:0; }
@media(max-width:820px){.operation-steps{grid-template-columns:1fr 1fr}.rack-devices{height:760px}.asset-identity strong{overflow-wrap:anywhere}.page-head h1{overflow-wrap:anywhere}}
@media(max-width:560px){.facility-devices{grid-template-columns:1fr}.operation-steps{grid-template-columns:1fr}.port-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-actions{gap:8px}.asset-actions .btn{flex:1 1 45%}.rack-map{grid-template-columns:1fr}.page-actions{max-width:100%}.asset-select select{max-width:100%}}
@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-grid, .chart-grid { grid-template-columns: repeat(2, 1fr); }
  .rack-map { grid-template-columns: repeat(3, 1fr); }
  .port-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 820px) {
  .demo-app { grid-template-columns: 1fr; grid-template-rows: 62px auto minmax(0,1fr); }
  .demo-topbar { grid-row: 1; padding: 0 14px; gap: 12px; }
  .demo-brand { min-width: 0; }
  .product-crumb, .top-search, .user-menu span { display: none; }
  .mobile-nav-toggle { display: inline-flex; margin-left: auto; }
  .demo-sidebar { grid-column: 1; grid-row: 2; position: static; height: auto; display: flex; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-label, .side-divider, .side-foot { display: none; }
  .demo-nav { display: flex; gap: 5px; }
  .demo-nav button { width: auto; white-space: nowrap; padding: 8px 10px; }
  .nav-glyph { display: none; }
  .demo-main { grid-column: 1; grid-row: 3; padding: 22px 14px 50px; }
  .grid-2, .grid-even, .rack-detail { grid-template-columns: 1fr; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .catalog-grid, .chart-grid { grid-template-columns: 1fr; }
  .camera-grid { grid-template-columns: 1fr; }
  .telemetry-panels { grid-template-columns: 1fr; }
  .asset-summary, .asset-identity { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .metric-grid { grid-template-columns: 1fr; }
  .rack-map { grid-template-columns: repeat(2, 1fr); }
  .port-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid, .detail-grid, .rack-summary { grid-template-columns: 1fr; }
  .zone-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-chip { display: none; }
  .asset-summary, .asset-identity, .console-metrics { grid-template-columns: 1fr; }
  .telemetry-toolbar { grid-template-columns: 1fr; }
  .series-legend { grid-template-columns: 1fr; }
}