:root {
  color-scheme: dark;
  --bg: #0a0f18;
  --sidebar: #0b111b;
  --panel: #101824;
  --panel-2: #121c2a;
  --border: #202d3e;
  --border-soft: rgba(137, 163, 195, .13);
  --text: #eaf1fb;
  --text-2: #b3c0d2;
  --muted: #78889d;
  --muted-2: #5e6d82;
  --cyan: #6de4e9;
  --cyan-deep: #2abdc8;
  --violet: #a997ff;
  --green: #79deb6;
  --amber: #f3c477;
  --red: #ff8995;
  --blue: #78adff;
  --radius: 15px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font-size: 13px; line-height: 1.5; }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button:disabled { opacity: .5; cursor: wait; }
a { color: inherit; text-decoration: none; }
svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100vh; }
.sidebar { width: 252px; position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; flex-direction: column; padding: 27px 17px 16px; background: var(--sidebar); border-right: 1px solid #1d2837; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; min-height: 43px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(109,228,233,.45); border-radius: 11px; background: linear-gradient(145deg, rgba(109,228,233,.13), rgba(109,228,233,.015)); color: var(--cyan); }
.brand-mark svg { width: 28px; height: 28px; stroke-width: 2; }
.brand-mark-line { stroke: rgba(109,228,233,.5); stroke-width: 1.3; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-copy strong { font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: 1.2px; color: #f2f6ff; }
.brand-copy strong span { color: var(--cyan); }
.brand-copy small { color: #63738a; font-size: 8px; font-weight: 750; letter-spacing: 1.25px; }
.workspace-chip { display: flex; align-items: center; gap: 8px; margin: 32px 5px 25px; padding: 10px 10px; background: rgba(109,228,233,.045); border: 1px solid rgba(109,228,233,.11); border-radius: 8px; white-space: nowrap; }
.pulse-dot, .tiny-pulse, .hero-foot-dot, .footnote-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(121,222,182,.1); flex: 0 0 auto; }
.workspace-label { color: #a9bbcd; font-size: 9px; letter-spacing: 1.2px; font-weight: 750; }
.workspace-tag { margin-left: auto; border: 1px solid #29384a; border-radius: 4px; padding: 2px 5px; font-size: 8px; color: #7789a0; letter-spacing: .6px; }
.nav-caption { margin: 0 11px 10px; color: #53637a; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.nav-caption-gap { margin-top: 30px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-link { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 43px; border: 1px solid transparent; border-radius: 8px; padding: 0 11px; background: transparent; color: #91a1b7; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.nav-link:hover { color: #e9f2ff; background: rgba(255,255,255,.035); }
.nav-link.active { color: #dfffff; background: linear-gradient(90deg, rgba(109,228,233,.11), rgba(109,228,233,.035)); border-color: rgba(109,228,233,.16); box-shadow: inset 2px 0 var(--cyan); }
.nav-link > span:nth-child(2) { font-size: 12px; font-weight: 600; }
.nav-icon { width: 20px; display: grid; place-items: center; color: #71829a; }
.nav-link.active .nav-icon { color: var(--cyan); }
.nav-icon svg { width: 17px; height: 17px; }
.nav-count { margin-left: auto; font-size: 9px; color: #6de4e9; background: rgba(109,228,233,.08); padding: 3px 5px; border-radius: 4px; }
.nav-trailing { margin-left: auto; color: #5d6f84; font-size: 12px; }
.sidebar-spacer { flex: 1; min-height: 28px; }
.sidebar-status { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 9px; border: 1px solid #1c2a3b; background: #0e1723; margin-bottom: 17px; }
.sidebar-status-icon { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; color: var(--cyan); background: rgba(109,228,233,.09); }
.sidebar-status-icon svg { width: 15px; }
.sidebar-status-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-status-copy strong { color: #b7c5d8; font-size: 10px; font-weight: 650; }
.sidebar-status-copy small { color: #697b92; font-size: 9px; }
.status-ring { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #657187; }
.status-ring[data-state="ok"] { background: var(--green); box-shadow: 0 0 0 3px rgba(121,222,182,.09); }
.status-ring[data-state="error"] { background: var(--red); }
.sidebar-footer { display: flex; align-items: center; gap: 10px; border-top: 1px solid #1d2837; padding: 16px 5px 0; }
.operator-avatar { display: grid; place-items: center; width: 32px; height: 32px; background: #1a2c3b; border: 1px solid #304355; color: var(--cyan); border-radius: 9px; font-size: 10px; font-weight: 800; }
.operator-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.operator-copy strong { color: #cad5e4; font-size: 11px; font-weight: 600; }
.operator-copy small { color: #697a90; font-size: 9px; }
.footer-version { margin-left: auto; color: #53637a; font-size: 9px; }
.main-panel { min-height: 100vh; margin-left: 252px; background: var(--bg); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; height: 69px; padding: 0 39px; border-bottom: 1px solid #1a2634; background: rgba(10,15,24,.89); backdrop-filter: blur(18px); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 10px; color: #61738a; letter-spacing: .9px; font-weight: 700; }
.breadcrumb strong { color: #dae4f2; letter-spacing: 0; font-size: 12px; font-weight: 650; }
.crumb-slash { color: #314052; }
.live-pill { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #223344; border-radius: 20px; background: #0d1722; color: #9eb3c7; font-size: 10px; white-space: nowrap; }
.live-pill-dot { width: 6px; height: 6px; background: #7a8a9b; border-radius: 50%; }
.live-pill[data-state="ok"] .live-pill-dot { background: var(--green); box-shadow: 0 0 0 3px rgba(121,222,182,.09); }
.live-pill[data-state="error"] .live-pill-dot { background: var(--red); }
.live-pill[data-state="pending"] .live-pill-dot { background: var(--amber); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid #253447; background: #101925; color: #95a6bb; cursor: pointer; transition: border .2s, color .2s, background .2s; }
.icon-button:hover { color: var(--cyan); border-color: #3f6671; background: #12232c; }
.icon-button svg { width: 15px; height: 15px; }
.topbar-divider { height: 28px; width: 1px; background: #263344; margin: 0 4px; }
.topbar-time { display: flex; flex-direction: column; gap: 0; min-width: 69px; }
.time-label { font-size: 8px; letter-spacing: 1.2px; color: #64748b; font-weight: 750; }
.topbar-time strong { color: #c6d4e5; font-size: 12px; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.mobile-menu { display: none; }
.page-wrap { padding: 32px 39px 20px; max-width: 1740px; margin: 0 auto; }
.page-section[hidden] { display: none !important; }
.page-section { animation: page-in .28s ease both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #71839a; letter-spacing: 1.6px; font-size: 9px; font-weight: 800; margin-bottom: 11px; }
.eyebrow-mark { width: 6px; height: 6px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 9px rgba(109,228,233,.4); }
.page-heading h1 { margin: 0; color: #edf4ff; font-size: clamp(28px, 3vw, 37px); letter-spacing: -1.6px; line-height: 1.15; font-weight: 720; }
.heading-light { color: #8093a9; font-weight: 450; }
.page-lede { max-width: 670px; margin: 11px 0 0; color: #8090a5; font-size: 12px; line-height: 1.8; }
.heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 13px; flex-wrap: wrap; }
.updated-label { display: flex; align-items: center; gap: 7px; color: #6f8197; font-size: 10px; white-space: nowrap; }
.updated-label svg { width: 13px; height: 13px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; border-radius: 8px; border: 1px solid transparent; padding: 0 13px; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; white-space: nowrap; }
.button:active { transform: translateY(1px); }
.button svg { width: 14px; height: 14px; }
.button-primary { color: #06161a; background: var(--cyan); border-color: #6de4e9; box-shadow: 0 5px 20px rgba(42,189,200,.09); }
.button-primary:hover { background: #92f2f4; }
.button-secondary { color: #c5d4e7; background: #141e2b; border-color: #2a394c; }
.button-secondary:hover { background: #1a293a; border-color: #3a526a; }
.button-small { min-height: 32px; font-size: 10px; padding: 0 10px; }
.button-white { color: #101720; background: #e6fdff; }
.button-white:hover { background: #fff; }
.button-ghost-light { background: rgba(13,21,31,.32); border-color: rgba(202,238,242,.19); color: #d9e9f2; }
.button-ghost-light:hover { background: rgba(255,255,255,.08); border-color: rgba(202,238,242,.35); }
.hero-panel { min-height: 274px; position: relative; overflow: hidden; display: flex; align-items: stretch; border: 1px solid #263c4b; border-radius: 15px; background: radial-gradient(ellipse at 79% 37%, rgba(40,126,151,.18) 0, rgba(17,39,52,.13) 24%, transparent 48%), linear-gradient(108deg, #132331 0%, #10202e 46%, #101b29 100%); box-shadow: 0 14px 40px rgba(0,0,0,.09); }
.hero-panel::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(165,222,236,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(165,222,236,.16) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, transparent 0%, black 50%, black 100%); pointer-events: none; }
.hero-grid { position: absolute; height: 1px; width: 45%; right: 0; top: 50%; background: linear-gradient(90deg, transparent, rgba(109,228,233,.3), transparent); }
.hero-copy { z-index: 2; padding: 27px 33px 22px; width: 61%; max-width: 700px; }
.hero-kicker { display: flex; align-items: center; gap: 8px; color: #91adbe; font-size: 9px; letter-spacing: 1.4px; font-weight: 800; }
.hero-kicker-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--cyan); background: rgba(109,228,233,.09); border: 1px solid rgba(109,228,233,.15); }
.hero-kicker-icon svg { width: 13px; }
.hero-copy h2 { margin: 13px 0 10px; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; letter-spacing: -1.45px; color: #f1f7fc; font-weight: 740; }
.hero-copy h2 span { color: #75dce4; }
.hero-copy > p { max-width: 485px; margin: 0; color: #8ca1b4; font-size: 11px; line-height: 1.7; }
.hero-actions { display: flex; gap: 9px; margin-top: 18px; }
.hero-actions .button { min-height: 35px; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 8px; letter-spacing: 1px; color: #71899b; font-weight: 800; }
.hero-foot-dot { width: 5px; height: 5px; }
.hero-foot-sep { color: #3b5b6d; }
.hero-art { position: absolute; width: 38%; max-width: 410px; right: 1%; top: 0; bottom: 0; display: grid; place-items: center; pointer-events: none; }
.orbit { position: absolute; border: 1px solid rgba(105,197,213,.22); border-radius: 50%; transform: rotate(-28deg); }
.orbit-one { width: 220px; height: 220px; }
.orbit-two { width: 300px; height: 130px; transform: rotate(34deg); border-color: rgba(105,197,213,.16); }
.orbit-three { width: 330px; height: 235px; transform: rotate(-52deg); border-style: dashed; border-color: rgba(105,197,213,.12); }
.orbit-axis { position: absolute; width: 1px; height: 83%; background: linear-gradient(transparent, rgba(109,228,233,.24), transparent); transform: rotate(47deg); }
.orbit-center { display: grid; place-items: center; width: 91px; height: 91px; border: 1px solid rgba(109,228,233,.34); background: rgba(24,81,94,.15); border-radius: 50%; box-shadow: 0 0 0 10px rgba(109,228,233,.025), 0 0 65px rgba(65,183,194,.09); }
.orbit-center-inner { display: grid; place-items: center; width: 57px; height: 57px; border-radius: 50%; border: 1px solid rgba(109,228,233,.24); background: linear-gradient(145deg, #204a59, #122b3a); color: var(--cyan); }
.orbit-center-inner svg { width: 26px; height: 26px; }
.orbit-node { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; background: #122b39; border: 1px solid rgba(109,228,233,.34); border-radius: 7px; transform: rotate(45deg); box-shadow: 0 0 20px rgba(109,228,233,.08); }
.orbit-node i { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); }
.orbit-node-a { right: 23%; top: 19%; }
.orbit-node-b { left: 19%; bottom: 20%; }
.orbit-node-c { right: 13%; bottom: 25%; width: 15px; height: 15px; }
.orbit-label { position: absolute; display: flex; align-items: center; gap: 7px; font-size: 8px; letter-spacing: 1px; font-weight: 800; white-space: nowrap; color: #7894a7; border: 1px solid rgba(100,177,192,.19); background: rgba(11,27,39,.9); border-radius: 6px; padding: 7px 9px; }
.orbit-label b { color: #b6eaf0; font-size: 8px; }
.orbit-label-top { right: 6%; top: 17%; }
.orbit-label-bottom { left: 3%; bottom: 17%; }
.hero-index { position: absolute; right: 17px; bottom: 12px; color: rgba(139,193,202,.24); font-size: 11px; font-weight: 850; letter-spacing: 2px; }
.hero-index span { color: rgba(109,228,233,.42); }
.section-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 27px 0 14px; }
.section-title { color: #e4ecf7; margin: 0; font-size: 15px; letter-spacing: -.3px; font-weight: 700; }
.section-subtitle { color: #71839a; margin: 4px 0 0; font-size: 10px; }
.section-overline { display: flex; align-items: center; gap: 7px; color: #64768b; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; white-space: nowrap; }
.mini-square { width: 5px; height: 5px; background: var(--cyan); }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.status-card { background: linear-gradient(145deg, #111a27, #0f1722); border: 1px solid #202d3e; border-radius: 12px; min-width: 0; padding: 16px 16px 0; transition: border-color .2s, transform .2s; }
.status-card:hover { border-color: #31465d; transform: translateY(-2px); }
.status-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.status-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; }
.status-icon svg { width: 15px; height: 15px; }
.status-icon.violet { color: var(--violet); background: rgba(169,151,255,.1); }
.status-icon.cyan { color: var(--cyan); background: rgba(109,228,233,.1); }
.status-icon.amber { color: var(--amber); background: rgba(243,196,119,.1); }
.status-icon.blue { color: var(--blue); background: rgba(120,173,255,.1); }
.status-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 4px; border: 1px solid #2b394a; background: #151f2d; color: #8496aa; font-size: 8px; line-height: 1; font-weight: 800; letter-spacing: .65px; white-space: nowrap; }
.status-chip[data-state="ok"] { color: var(--green); border-color: rgba(121,222,182,.19); background: rgba(121,222,182,.06); }
.status-chip[data-state="error"] { color: var(--red); border-color: rgba(255,137,149,.2); background: rgba(255,137,149,.06); }
.status-chip[data-state="pending"] { color: var(--amber); border-color: rgba(243,196,119,.18); background: rgba(243,196,119,.05); }
.status-chip[data-state="checking"] { color: #9eb0c5; }
.status-card-label { margin-top: 16px; font-size: 10px; color: #8595aa; font-weight: 550; }
.status-card-value { margin-top: 3px; color: #e4eefb; font-size: 23px; font-weight: 720; letter-spacing: -.75px; line-height: 1.4; }
.status-card-value .value-period { color: var(--cyan); }
.status-card-desc { min-height: 30px; margin: 4px 0 14px; color: #67798f; font-size: 9px; line-height: 1.55; }
.status-card-bottom { margin: 0 -16px; min-height: 37px; display: flex; align-items: center; gap: 7px; border-top: 1px solid #202c3a; padding: 0 16px; color: #61748a; font-size: 9px; }
.line-symbol { color: #7d8fa4; font-size: 12px; }
.bottom-right { margin-left: auto; color: #8293a6; font-size: 9px; font-variant-numeric: tabular-nums; }
.content-grid { display: grid; grid-template-columns: minmax(0,1.14fr) minmax(310px,.86fr); gap: 14px; margin-top: 18px; }
.panel { background: linear-gradient(145deg, #101925, #0e1621); border: 1px solid #202d3e; border-radius: 13px; min-width: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 20px 21px 15px; border-bottom: 1px solid rgba(120,148,179,.1); }
.panel-overline { font-size: 8px; font-weight: 800; color: #61768d; letter-spacing: 1.4px; margin-bottom: 6px; }
.panel-header h2, .next-step-copy h2 { margin: 0; color: #e3edf9; font-size: 15px; letter-spacing: -.3px; font-weight: 700; }
.panel-header p { margin: 5px 0 0; color: #75869b; font-size: 10px; line-height: 1.6; }
.fleet-panel { min-height: 330px; display: flex; flex-direction: column; }
.fleet-empty { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 19px 22px 17px; text-align: center; }
.empty-visual { position: relative; width: 115px; height: 87px; margin: 0 auto 13px; display: grid; place-items: center; }
.empty-orbit { position: absolute; width: 94px; height: 66px; border-radius: 50%; border: 1px dashed #2c4b5c; transform: rotate(-25deg); }
.empty-core { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 12px; color: var(--cyan); background: #152e3a; border: 1px solid #315767; box-shadow: 0 0 30px rgba(109,228,233,.07); }
.empty-core svg { width: 19px; }
.empty-node { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #263f50; border: 1px solid #487080; }
.empty-node.n1 { left: 9px; top: 22px; }.empty-node.n2 { right: 4px; top: 32px; }.empty-node.n3 { left: 27px; bottom: 3px; }
.fleet-empty h3 { color: #d1deed; font-size: 12px; margin: 0; font-weight: 700; }
.fleet-empty p { max-width: 350px; color: #72849a; font-size: 10px; line-height: 1.7; margin: 7px 0 9px; }
.text-action { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: #77dce4; font-weight: 700; font-size: 10px; padding: 3px; cursor: pointer; }
.text-action:hover { color: #aff7f8; }
.text-action svg { width: 13px; height: 13px; }
.panel-footnote { padding: 11px 17px; border-top: 1px solid rgba(120,148,179,.1); color: #61758b; font-size: 9px; display: flex; align-items: center; gap: 8px; }
.footnote-dot { width: 5px; height: 5px; background: var(--amber); box-shadow: none; }
.diagnostics-panel { min-height: 330px; }
.diagnostics-badge { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; border: 1px solid #273c4a; background: #142631; color: var(--cyan); }
.diagnostics-badge svg { width: 16px; }
.diagnostic-list { padding: 5px 20px 0; }
.diagnostic-row { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-bottom: 1px solid rgba(120,148,179,.09); }
.diagnostic-row:last-child { border-bottom: 0; }
.diag-symbol { width: 29px; height: 29px; display: grid; place-items: center; color: #8ba2b9; background: #172331; border: 1px solid #253549; border-radius: 8px; flex: 0 0 auto; }
.diag-symbol svg { width: 14px; }
.diag-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.diag-copy strong { font-size: 10px; color: #c7d5e5; font-weight: 650; }
.diag-copy small { color: #62768d; font-size: 9px; }
.diag-state { margin-left: auto; padding-left: 6px; color: #8395a9; font-size: 8px; letter-spacing: .6px; font-weight: 850; white-space: nowrap; }
.diag-state[data-state="ok"] { color: var(--green); }.diag-state[data-state="error"] { color: var(--red); }.diag-state[data-state="pending"] { color: var(--amber); }
.diagnostics-note { display: flex; align-items: flex-start; gap: 9px; margin: 7px 17px 16px; padding: 12px; border-radius: 8px; background: rgba(109,228,233,.035); border: 1px solid rgba(109,228,233,.09); color: #68869a; }
.diagnostics-note > svg { flex: 0 0 auto; width: 14px; height: 14px; color: #71cbd2; margin-top: 1px; }
.diagnostics-note p { margin: 0; font-size: 9px; line-height: 1.7; }
.diagnostics-note strong { color: #a5c6d3; font-weight: 700; }
.next-step-panel { margin-top: 14px; padding: 19px 21px; display: flex; align-items: center; gap: 15px; background: linear-gradient(100deg, #101c28, #111925); }
.next-step-icon { flex: 0 0 auto; display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #2a4353; border-radius: 11px; color: var(--cyan); background: #152734; }
.next-step-icon svg { width: 20px; }
.next-step-copy { flex: 1; min-width: 0; }
.next-step-copy .panel-overline { margin-bottom: 4px; }
.next-step-copy h2 { font-size: 13px; }
.next-step-copy p { margin: 4px 0 0; color: #75869a; font-size: 10px; line-height: 1.65; }
.page-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; padding: 15px 1px 3px; border-top: 1px solid #1c2837; color: #718399; font-size: 8px; letter-spacing: .8px; font-weight: 750; }
.footer-muted { color: #4d5e72; }
#footerBuild, #fleetChecked { color: #53677c; text-align: right; }
.fleet-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin: 7px 0 18px; }
.mini-stat { display: flex; flex-direction: column; gap: 6px; padding: 17px 18px; background: #101824; border: 1px solid #202d3e; border-radius: 11px; }
.mini-stat-label { font-size: 8px; font-weight: 800; letter-spacing: 1.1px; color: #71849a; }
.mini-stat strong { color: #e0eaf6; font-size: 25px; line-height: 1.2; }
.mini-stat small { color: #677b91; font-size: 9px; }
.fleet-table-panel { overflow: hidden; }
.table-count { padding: 5px 7px; border: 1px solid #28374a; border-radius: 5px; color: #74889e; font-size: 8px; letter-spacing: .65px; font-weight: 800; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.fleet-table { width: 100%; border-collapse: collapse; text-align: left; min-width: 600px; }
.fleet-table th { color: #6d8198; font-size: 8px; letter-spacing: .9px; font-weight: 800; padding: 13px 15px; background: #0e1621; border-bottom: 1px solid #202d3e; white-space: nowrap; }
.fleet-table th:first-child { padding-left: 22px; }
.table-empty { min-height: 235px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 28px; }
.table-empty-icon { width: 40px; height: 40px; display: grid; place-items: center; background: #15222f; border: 1px solid #26384a; border-radius: 12px; color: #7f9fb3; margin-bottom: 3px; }
.table-empty-icon svg { width: 18px; }
.table-empty strong { color: #cbd8e8; font-size: 12px; }
.table-empty p { max-width: 420px; margin: 0; color: #718398; font-size: 10px; line-height: 1.7; }
.info-strip, .warning-strip, .activity-intro { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; margin-top: 14px; border: 1px solid rgba(109,228,233,.12); border-radius: 9px; background: rgba(109,228,233,.035); color: #7893a6; }
.info-strip > svg, .warning-strip > svg, .activity-intro > svg { width: 15px; height: 15px; color: var(--cyan); flex: 0 0 auto; margin-top: 1px; }
.info-strip p, .warning-strip p, .activity-intro p { font-size: 10px; margin: 0; line-height: 1.7; }
.info-strip strong { color: #aecbd7; }
.agent-intro { display: flex; align-items: center; justify-content: space-between; min-height: 246px; padding: 28px 34px; overflow: hidden; background: radial-gradient(ellipse at 84% 50%, rgba(53,131,159,.13), transparent 41%), linear-gradient(120deg,#12222f,#101925); }
.agent-intro-copy { max-width: 590px; position: relative; z-index: 1; }
.agent-intro h2 { font-size: 26px; line-height: 1.18; letter-spacing: -1px; margin: 0 0 12px; color: #edf4fc; }
.agent-intro h2 span { color: #7b9db0; font-weight: 450; }
.agent-intro p { max-width: 550px; color: #8296a9; font-size: 11px; line-height: 1.75; margin: 0 0 17px; }
.agent-intro-art { position: relative; width: 190px; height: 170px; margin-right: 6%; flex: 0 0 auto; display: grid; place-items: center; }
.agent-hub { width: 63px; height: 63px; display: grid; place-items: center; border: 1px solid rgba(109,228,233,.42); border-radius: 17px; color: var(--cyan); background: #183643; box-shadow: 0 0 0 10px rgba(109,228,233,.025), 0 0 42px rgba(109,228,233,.08); }
.agent-hub svg { width: 27px; height: 27px; }
.agent-spoke { position: absolute; left: 50%; top: 50%; width: 74px; height: 1px; background: #3b6475; transform-origin: 0 50%; }
.agent-spoke.sp1 { transform: rotate(-143deg); }.agent-spoke.sp2 { transform: rotate(-18deg); }.agent-spoke.sp3 { transform: rotate(140deg); }
.agent-end { position: absolute; width: 22px; height: 22px; border: 1px solid #427080; border-radius: 7px; background: #152d3a; box-shadow: 0 0 13px rgba(109,228,233,.07); }
.agent-end.e1 { left: 12px; top: 21px; }.agent-end.e2 { right: 3px; top: 62px; }.agent-end.e3 { left: 30px; bottom: 4px; }
.agent-section-row { margin-top: 27px; }
.milestone-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.milestone-card { position: relative; display: flex; align-items: flex-start; gap: 13px; padding: 19px; border: 1px solid #202d3e; border-radius: 11px; background: #101824; min-height: 163px; }
.milestone-number { position: absolute; right: 14px; top: 13px; color: #3d5067; font-size: 10px; font-weight: 850; letter-spacing: .7px; }
.milestone-icon { flex: 0 0 auto; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; border: 1px solid #29394c; color: #8cbacb; background: #162431; }
.milestone-icon svg { width: 17px; }
.milestone-copy { padding-right: 12px; }
.milestone-copy h3 { margin: 1px 0 7px; font-size: 12px; color: #d5e1ee; }
.milestone-copy p { margin: 0 0 11px; max-width: 420px; color: #788aa0; font-size: 10px; line-height: 1.75; }
.milestone-tag { font-size: 8px; letter-spacing: .6px; color: #c6a56e; font-weight: 800; }
.warning-strip { border-color: rgba(243,196,119,.15); background: rgba(243,196,119,.04); margin-top: 15px; }
.warning-strip > svg { color: var(--amber); }
.warning-strip strong { color: #ddc18e; }
.activity-intro { margin: -4px 0 16px; }
.activity-intro > svg { color: var(--cyan); }
.activity-panel { overflow: hidden; }
.activity-list { min-height: 240px; padding: 5px 21px 18px; }
.activity-empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #72869c; }
.activity-empty > svg { width: 23px; height: 23px; color: #5b8c9e; margin-bottom: 2px; }
.activity-empty strong { font-size: 12px; color: #c2d2e3; }
.activity-empty p { max-width: 390px; font-size: 10px; margin: 0; line-height: 1.7; }
.activity-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(120,148,179,.1); }
.activity-item:last-child { border-bottom: 0; }
.activity-item-icon { flex: 0 0 auto; display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #2b4051; border-radius: 8px; color: var(--cyan); background: #162632; }
.activity-item-icon.error { color: var(--red); border-color: rgba(255,137,149,.2); background: rgba(255,137,149,.05); }
.activity-item-icon svg { width: 14px; }
.activity-item-content { min-width: 0; flex: 1; }
.activity-item-content strong { font-size: 10px; color: #cfdeed; font-weight: 650; }
.activity-item-content p { font-size: 10px; color: #778aa0; margin: 3px 0 0; line-height: 1.6; }
.activity-item time { flex: 0 0 auto; font-size: 9px; color: #64768b; }
.settings-panel { overflow: hidden; }
.setting-row { display: grid; grid-template-columns: minmax(130px,1fr) minmax(140px,auto) auto; align-items: center; gap: 15px; padding: 18px 21px; border-bottom: 1px solid rgba(120,148,179,.1); }
.setting-copy { display: flex; flex-direction: column; gap: 4px; }
.setting-copy strong { color: #cfdeed; font-size: 11px; font-weight: 650; }
.setting-copy small { color: #70849a; font-size: 9px; line-height: 1.5; }
.setting-row code { color: #8bd9df; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; padding: 7px 9px; border: 1px solid #25394a; background: #0b141f; border-radius: 6px; word-break: break-word; }
.copy-button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; border: 1px solid #2a394c; background: #141e2b; color: #8ba0b7; cursor: pointer; }
.copy-button svg { width: 13px; }
.setting-static-tag { color: #80cbd0; border: 1px solid rgba(109,228,233,.14); background: rgba(109,228,233,.04); border-radius: 5px; padding: 5px 7px; font-size: 8px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.setting-row-control select { width: 185px; max-width: 100%; color: #d2dfef; background: #0c1520; border: 1px solid #2a3a4d; border-radius: 7px; padding: 9px 11px; font-size: 10px; }
.settings-actions { display: flex; align-items: center; gap: 13px; padding: 17px 21px; }
.inline-success { color: var(--green); font-size: 10px; }
.about-panel { padding: 21px; margin-top: 15px; }
.about-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.about-grid > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.about-grid span { color: #60758c; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.about-grid strong { color: #c6d6e7; font-size: 10px; overflow-wrap: anywhere; }
.about-note { border-top: 1px solid rgba(120,148,179,.1); padding-top: 14px; margin: 17px 0 0; color: #6f849a; font-size: 10px; line-height: 1.7; }
.toast { position: fixed; z-index: 70; right: 23px; bottom: 22px; display: flex; align-items: center; gap: 9px; max-width: min(430px,calc(100vw - 32px)); padding: 11px 14px; border: 1px solid #304355; border-radius: 9px; background: #14212d; color: #d5e6f4; box-shadow: 0 16px 50px rgba(0,0,0,.3); font-size: 11px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.mobile-scrim { display: none; }
@media (min-width: 1600px) { .page-wrap { padding-left: 46px; padding-right: 46px; } .topbar { padding-left: 46px; padding-right: 46px; } }
@media (max-width: 1320px) { .page-wrap { padding-left: 27px; padding-right: 27px; } .topbar { padding-left: 27px; padding-right: 27px; } .sidebar { width: 235px; } .main-panel { margin-left: 235px; } .status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hero-art { right: -1%; width: 39%; } .hero-copy { width: 68%; } }
@media (max-width: 1050px) { .content-grid { grid-template-columns: 1fr; } .diagnostics-panel { min-height: 0; } .diagnostic-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; } .diagnostic-row { align-items: flex-start; border-bottom: 0; } .diag-state { margin-left: auto; } .diagnostics-note { margin-top: 0; } .hero-art { opacity: .63; right: -6%; } .hero-copy { width: 76%; } .updated-label { display: none; } }
@media (max-width: 780px) { .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 15px 0 45px rgba(0,0,0,.2); } .sidebar.open { transform: translateX(0); } .mobile-scrim { position: fixed; inset: 0; background: rgba(1,6,12,.65); z-index: 25; backdrop-filter: blur(2px); } .mobile-scrim.visible { display: block; } .main-panel { margin-left: 0; } .topbar { height: 61px; padding: 0 19px; } .mobile-menu { display: grid; } .topbar-left { gap: 11px; } .topbar-right { gap: 9px; } .topbar-time, .topbar-divider { display: none; } .page-wrap { padding: 24px 19px 18px; } .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 20px; } .heading-actions { justify-content: flex-start; } .hero-panel { min-height: 300px; } .hero-copy { width: 100%; padding: 24px; max-width: 630px; } .hero-art { right: -80px; width: 300px; opacity: .26; } .hero-copy h2 { font-size: 31px; } .hero-copy > p { max-width: 420px; } .hero-foot { max-width: 280px; line-height: 1.7; } .section-row { align-items: flex-start; } .section-overline { display: none; } .diagnostic-list { grid-template-columns: 1fr; padding-top: 0; } .diagnostic-row { border-bottom: 1px solid rgba(120,148,179,.09); } .diagnostic-row:last-child { border-bottom: 0; } .fleet-summary-grid { grid-template-columns: 1fr; gap: 9px; } .mini-stat { display: grid; grid-template-columns: 1fr auto; align-items: center; } .mini-stat strong { grid-column: 2; grid-row: 1 / span 2; } .mini-stat small { grid-column: 1; } .agent-intro { padding: 24px; } .agent-intro-art { margin-right: -70px; opacity: .24; } .milestone-list { grid-template-columns: 1fr; } .setting-row { grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 16px; } .setting-copy { grid-column: 1 / -1; } .setting-row code { min-width: 0; } .setting-row-control select { grid-column: 1 / -1; width: 100%; } .setting-static-tag { justify-self: end; } .about-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 18px; } .page-footer { flex-direction: column; align-items: flex-start; gap: 7px; } #footerBuild, #fleetChecked { text-align: left; } }
@media (max-width: 480px) { .topbar { padding: 0 12px; } .breadcrumb { gap: 7px; font-size: 9px; } .breadcrumb strong { font-size: 11px; } .live-pill { padding: 7px 8px; font-size: 9px; } .topbar-right { gap: 7px; } .page-wrap { padding: 22px 13px 15px; } .page-heading h1 { font-size: 29px; } .page-lede { font-size: 11px; } .heading-actions { width: 100%; } .heading-actions .button { flex: 1; } .hero-panel { min-height: 318px; } .hero-copy { padding: 22px 17px; } .hero-copy h2 { font-size: 29px; } .hero-copy > p { font-size: 10px; } .hero-actions { align-items: flex-start; flex-direction: column; } .hero-actions .button { width: fit-content; } .hero-foot { margin-top: 15px; gap: 6px; font-size: 7px; } .hero-art { right: -123px; } .status-grid { grid-template-columns: 1fr; gap: 9px; } .status-card { padding: 13px 14px 0; } .status-card-label { margin-top: 11px; } .status-card-desc { min-height: unset; margin-bottom: 12px; } .status-card-bottom { margin: 0 -14px; padding: 0 14px; } .panel-header { padding: 16px; } .panel-header p { max-width: 250px; } .panel-header .button { font-size: 9px; padding: 0 8px; } .next-step-panel { align-items: flex-start; flex-wrap: wrap; padding: 16px; } .next-step-copy { flex-basis: calc(100% - 60px); } .next-step-panel > .button { margin-left: 58px; } .page-footer { margin-top: 18px; font-size: 7px; } .section-row { margin-top: 22px; } .agent-intro { padding: 21px 18px; } .agent-intro h2 { font-size: 23px; } .agent-intro-art { position: absolute; right: 0; } .agent-intro { position: relative; } .milestone-card { padding: 15px; gap: 11px; } .milestone-copy { padding-right: 0; } .milestone-copy p { font-size: 9px; } .table-count { display: none; } .activity-list { padding: 5px 15px 15px; } .activity-item { gap: 9px; } .activity-item time { font-size: 8px; } .about-panel { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Live node registry and metrics */
.node-name-cell strong,.node-platform-cell span { display:block; color:#d5e1ef; font-size:10px; font-weight:700; }
.node-name-cell small,.node-platform-cell small { display:block; margin-top:4px; color:#73869d; font-size:9px; max-width:170px; overflow-wrap:anywhere; }
.node-status { display:inline-flex; align-items:center; white-space:nowrap; padding:4px 6px; border-radius:5px; border:1px solid #334255; color:#9aacc0; background:rgba(148,166,187,.05); font-size:8px; letter-spacing:.55px; font-weight:850; }
.node-status-online { color:#79deb6; border-color:rgba(121,222,182,.22); background:rgba(121,222,182,.06); }
.node-status-offline { color:#ff8995; border-color:rgba(255,137,149,.22); background:rgba(255,137,149,.06); }
.node-status-pending { color:#f3c477; border-color:rgba(243,196,119,.22); background:rgba(243,196,119,.06); }
.node-status-dot { flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#7d8fa4; }
.node-status-dot-online { background:#79deb6; box-shadow:0 0 0 3px rgba(121,222,182,.08); }
.node-status-dot-offline { background:#ff8995; }
.node-status-dot-pending { background:#f3c477; }
.fleet-table td { padding:14px 15px; border-bottom:1px solid rgba(120,148,179,.09); color:#97a9be; font-size:10px; vertical-align:middle; }
.fleet-table tr:last-child td { border-bottom:0; }
.node-actions-cell { display:flex; align-items:center; gap:5px; }
.node-action { border:1px solid #2a3a4d; border-radius:6px; padding:6px 8px; color:#adbed1; background:#141f2c; font-size:9px; font-weight:750; cursor:pointer; }
.node-action:hover { border-color:#4e7182; color:#e2f8fa; }
.node-action-primary { color:#8de9ec; border-color:rgba(109,228,233,.22); background:rgba(109,228,233,.06); }
.node-action-danger { color:#ff9aa4; }
.metric-cell { white-space:nowrap; font-variant-numeric:tabular-nums; }
.last-seen-cell { min-width:130px; color:#8397ad!important; }
.overview-node-preview { min-height:210px; display:flex; flex-direction:column; justify-content:center; padding:9px 20px; }
.overview-node-row { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid rgba(120,148,179,.1); }
.overview-node-row:last-of-type { border-bottom:0; }
.overview-node-copy { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.overview-node-copy strong { color:#d4e0ed; font-size:10px; overflow-wrap:anywhere; }
.overview-node-copy small { color:#70849a; font-size:9px; overflow-wrap:anywhere; }
.setting-row-admin input { min-width:0; width:100%; color:#d8e5f4; border:1px solid #2a3a4d; border-radius:7px; padding:10px; background:#0b141f; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }
.setting-row-admin input::placeholder { color:#62748a; }
.token-actions { display:flex; align-items:center; gap:6px; }
.metrics-dialog { width:min(1000px,calc(100vw - 28px)); max-height:calc(100vh - 30px); overflow:auto; border:1px solid #2a4052; border-radius:15px; padding:24px; background:#0e1722; color:#eaf1fb; box-shadow:0 24px 90px rgba(0,0,0,.55); }
.metrics-dialog::backdrop { background:rgba(2,7,13,.78); backdrop-filter:blur(5px); }
.metrics-dialog-close { display:flex; justify-content:flex-end; margin-bottom:4px; }
.metrics-dialog h2 { margin:0; font-size:21px; letter-spacing:-.5px; }
.metrics-subtitle { margin:6px 0 17px; color:#7e91a6; font-size:10px; }
.metrics-latest-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.metrics-latest-grid > div { display:flex; flex-direction:column; gap:5px; border:1px solid #243446; border-radius:9px; padding:12px; background:#121d2a; min-width:0; }
.metrics-latest-grid span { font-size:8px; color:#75879d; letter-spacing:1px; font-weight:800; }
.metrics-latest-grid strong { font-size:14px; color:#d7e5f4; overflow-wrap:anywhere; }
.metrics-legend { display:flex; align-items:center; gap:15px; padding:16px 2px 6px; color:#899bb0; font-size:9px; }
.metrics-legend span { display:flex; align-items:center; gap:6px; }
.metrics-legend i { width:8px; height:8px; display:inline-block; border-radius:2px; }
.legend-cpu { background:#6de4e9; }.legend-memory { background:#a997ff; }.legend-disk { background:#f3c477; }
#metricsChart { display:block; width:100%; height:auto; border:1px solid #223244; border-radius:10px; background:#0b141f; }
.metrics-table-scroll { margin-top:13px; max-height:250px; }
@media (max-width:780px) {
  .setting-row-admin input { grid-column:1/-1; }
  .setting-row-admin .token-actions { grid-column:1/-1; }
  .metrics-dialog { padding:16px; }
  .metrics-latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:480px) {
  .node-actions-cell { align-items:flex-start; flex-direction:column; }
  .node-action { width:100%; }
  .overview-node-preview { padding-left:13px; padding-right:13px; }
}

/* Preserve the original compact preview table while keeping live telemetry actions. */
.metric-cell small { display:block; margin-top:4px; color:#73869d; font-size:9px; font-weight:500; }
.last-seen-cell > div:first-child { margin-bottom:8px; }
.node-actions-cell { flex-wrap:wrap; }
@media (max-width:780px) {
  .node-actions-cell { flex-direction:row; }
  .node-action { width:auto; }
}