:root {
    color-scheme: dark;
    --bg: #0a0d13;
    --panel: #111620;
    --panel-2: #151b26;
    --panel-3: #1a2130;
    --line: rgba(255, 255, 255, .075);
    --line-strong: rgba(255, 255, 255, .13);
    --text: #edf1f8;
    --muted: #8993a5;
    --muted-2: #5d687a;
    --blue: #7c9cff;
    --blue-2: #4d6fda;
    --green: #68e0b3;
    --amber: #f3ba65;
    --red: #ff747d;
    --sidebar: 252px;
    --radius: 14px;
    --shadow: 0 20px 55px rgba(0, 0, 0, .28);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); background: var(--bg); font-size: 14px; }
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }

.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 10px; line-height: 1.2; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.brand-mark { position: relative; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(124, 156, 255, .35); border-radius: 10px; background: linear-gradient(145deg, rgba(124, 156, 255, .2), rgba(104, 224, 179, .04)); box-shadow: inset 0 0 18px rgba(124,156,255,.08); }
.brand-mark::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--blue); transform: rotate(45deg); }
.brand-mark i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.brand-mark i:nth-child(1) { left: 7px; top: 7px; }.brand-mark i:nth-child(2) { right: 7px; top: 7px; }.brand-mark i:nth-child(3) { left: 15px; bottom: 6px; }
.brand-mark.large { width: 58px; height: 58px; border-radius: 17px; }
.brand-mark.large::before { inset: 14px; }.brand-mark.large i:nth-child(1) { left: 12px; top: 12px; }.brand-mark.large i:nth-child(2) { right: 12px; top: 12px; }.brand-mark.large i:nth-child(3) { left: 27px; bottom: 10px; }

/* Authentication */
.auth-page { overflow-x: hidden; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.12fr) minmax(440px, .88fr); }
.login-visual { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: flex-end; padding: clamp(42px, 7vw, 100px); background: radial-gradient(circle at 52% 40%, rgba(59, 84, 157, .22), transparent 34%), linear-gradient(145deg, #0a0e16 0%, #0f1520 72%, #0a0d13 100%); border-right: 1px solid var(--line); }
.visual-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(124,156,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(124,156,255,.1) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to bottom, #000, transparent 88%); transform: perspective(700px) rotateX(55deg) scale(1.4) translateY(-8%); }
.cluster-map { position: absolute; width: 430px; height: 430px; left: 50%; top: 42%; transform: translate(-50%, -50%); }
.cluster-map .core { position: absolute; z-index: 2; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(18, 25, 38, .9); border: 1px solid rgba(124,156,255,.32); box-shadow: 0 0 80px rgba(79,108,202,.28); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(124,156,255,.18); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 250px; height: 250px; animation: spin 24s linear infinite; }.orbit-two { width: 390px; height: 390px; animation: spin 38s linear infinite reverse; border-style: dashed; }
.orbit span { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.map-node { position: absolute; z-index: 3; width: 140px; padding: 12px 15px; border-radius: 10px; background: rgba(18, 24, 35, .92); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.map-node::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: -4px; top: 18px; background: var(--green); box-shadow: 0 0 10px var(--green); }
.map-node b, .map-node small { display: block; }.map-node b { font-size: 12px; letter-spacing: .12em; }.map-node small { color: var(--muted); font-size: 10px; margin-top: 4px; }
.node-a { left: 5px; top: 90px; }.node-b { right: -2px; bottom: 84px; }
.map-chip { position: absolute; padding: 7px 11px; border-radius: 20px; color: var(--muted); font-size: 10px; background: rgba(17,22,32,.85); border: 1px solid var(--line); }.chip-a { right: 14px; top: 78px; }.chip-b { left: 22px; bottom: 75px; }
.visual-copy { position: relative; z-index: 4; max-width: 560px; }.visual-copy h2 { margin: 0 0 22px; font-size: clamp(38px, 5vw, 67px); line-height: 1.01; letter-spacing: -.05em; }.visual-copy > p:last-child { max-width: 480px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.login-panel { display: grid; place-items: center; padding: 40px; background: #0c1017; }
.login-card { width: min(400px, 100%); }.mobile-brand { display: none; align-items: center; gap: 12px; margin-bottom: 55px; font-weight: 700; }
.login-card h1 { margin: 0; font-size: 44px; letter-spacing: -.045em; }.login-intro { margin: 11px 0 34px; color: var(--muted); font-size: 15px; }
.login-form { display: grid; gap: 20px; }.login-form label > span { display: block; margin: 0 0 8px; color: #b6becc; font-size: 12px; font-weight: 620; }
.login-form input { width: 100%; height: 50px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 9px; outline: none; color: var(--text); background: #121823; transition: border .2s, box-shadow .2s; }
.login-form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(124,156,255,.12); }
.totp-field { position: relative; }.totp-field input { padding-right: 58px; letter-spacing: .32em; font-size: 17px; }.totp-field em { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); padding-left: 12px; color: var(--muted-2); border-left: 1px solid var(--line); font-size: 11px; font-style: normal; letter-spacing: 0; }
.primary-button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #607fdd, #4664bd); font-weight: 700; box-shadow: 0 12px 28px rgba(63,92,180,.24); transition: transform .2s, filter .2s; }.primary-button:hover { transform: translateY(-1px); filter: brightness(1.08); }.primary-button span { font-size: 18px; }
.security-note { margin-top: 25px; color: var(--muted-2); font-size: 10px; text-align: center; }.security-note span { color: var(--green); margin-right: 6px; }
.form-alert { margin: -12px 0 22px; padding: 11px 13px; border: 1px solid rgba(255,116,125,.26); border-radius: 8px; color: #ffadb3; background: rgba(255,116,125,.07); font-size: 12px; }
.secure-gate { min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(80,107,190,.16), transparent 36%); }.gate-card { position: relative; z-index: 2; width: min(470px, calc(100% - 40px)); padding: 50px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(16,21,31,.94); box-shadow: var(--shadow); }.gate-card .brand-mark { margin-bottom: 30px; }.gate-card h1 { margin: 0 0 14px; font-size: 40px; letter-spacing: -.04em; }.gate-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }.gate-status { margin-top: 26px; padding-top: 22px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); color: #c6cddd; font-size: 12px; }.gate-orbit { position: absolute; width: 680px; height: 680px; border: 1px solid var(--line); border-radius: 50%; animation: spin 50s linear infinite; }.gate-orbit::before, .gate-orbit::after { content:""; position:absolute; border:1px solid var(--line); border-radius:50%; inset:80px; }.gate-orbit::after { inset:170px; }.gate-orbit span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 12px var(--blue); }.gate-orbit span:nth-child(1){left:50%;top:-4px}.gate-orbit span:nth-child(2){left:75%;bottom:9%}.gate-orbit span:nth-child(3){left:9%;top:27%}
@keyframes spin { to { transform: rotate(360deg); } }

/* Application frame */
.app-shell { min-height: 100vh; }.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--sidebar); padding: 20px 15px 16px; display: flex; flex-direction: column; background: #0d1119; border-right: 1px solid var(--line); }
.sidebar-brand { min-height: 56px; padding: 0 7px; display: flex; align-items: center; gap: 11px; }.sidebar-brand strong, .sidebar-brand span { display: block; }.sidebar-brand strong { font-size: 17px; letter-spacing: -.02em; }.sidebar-brand span { margin-top: 1px; color: var(--muted); font-size: 8px; letter-spacing: .2em; }
.sidebar-label { margin: 28px 10px 9px; color: #525c6e; font-size: 9px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.main-nav { display: grid; gap: 3px; }.nav-item { width: 100%; height: 41px; padding: 0 11px; border: 0; border-radius: 8px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; color: #8993a4; background: transparent; cursor: pointer; text-align: left; font-size: 12px; transition: .18s ease; }.nav-item > span { color: #657083; font-size: 16px; }.nav-item b { min-width: 20px; padding: 2px 6px; border-radius: 8px; color: #6d788a; background: rgba(255,255,255,.04); font-size: 9px; text-align:center; }.nav-item:hover { color: #d9deea; background: rgba(255,255,255,.035); }.nav-item.active { color: #eef2fa; background: linear-gradient(90deg, rgba(90,120,210,.2), rgba(90,120,210,.07)); box-shadow: inset 2px 0 var(--blue); }.nav-item.active > span { color: var(--blue); }.nav-item .warning-count:not(:empty) { color: var(--amber); }
.sidebar-clusters { display: grid; gap: 5px; }.sidebar-clusters button { width: 100%; min-height: 54px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; display: grid; grid-template-columns: 30px 1fr 9px; align-items: center; color: var(--muted); background: transparent; cursor: pointer; text-align: left; }.sidebar-clusters button:hover, .sidebar-clusters button.active { border-color: var(--line); background: rgba(255,255,255,.028); }.cluster-glyph { color: var(--blue); font-size: 19px; }.sidebar-clusters strong, .sidebar-clusters small { display: block; }.sidebar-clusters strong { color: #dbe1ec; font-size: 11px; }.sidebar-clusters small { margin-top: 3px; color: #596476; font-size: 9px; }.sidebar-clusters i, .cluster-switch i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }.sidebar-clusters i.healthy, .cluster-switch i.healthy { background: var(--green); box-shadow: 0 0 8px rgba(104,224,179,.5); }.sidebar-clusters i.degraded, .cluster-switch i.degraded { background: var(--amber); }.sidebar-clusters i.offline, .cluster-switch i.offline { background: var(--red); }
.readonly-card { margin-top: auto; padding: 12px; border: 1px solid rgba(104,224,179,.1); border-radius: 9px; display: flex; gap: 10px; background: rgba(104,224,179,.035); }.lock-icon { color: var(--green); }.readonly-card strong, .readonly-card small { display: block; }.readonly-card strong { color: #afc8c0; font-size: 10px; }.readonly-card small { margin-top: 3px; color: #5f716f; font-size: 8px; line-height: 1.4; }
.sidebar-footer { margin-top: 13px; padding: 13px 5px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 31px 1fr 26px; gap: 9px; align-items: center; }.user-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #dfe6ff; background: #25334f; font-size: 9px; font-weight: 700; }.sidebar-footer strong, .sidebar-footer small { display: block; }.sidebar-footer strong { font-size: 10px; }.sidebar-footer small { margin-top: 2px; color: var(--muted-2); font-size: 8px; }.sidebar-footer form button { width: 26px; height: 26px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor:pointer; }.sidebar-footer form button:hover { color: var(--red); background: rgba(255,116,125,.08); }
.main-area { min-height: 100vh; margin-left: var(--sidebar); background: radial-gradient(circle at 80% 0, rgba(67,89,153,.07), transparent 28%), var(--bg); }
.topbar { height: 86px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(10,13,19,.82); backdrop-filter: blur(14px); }.topbar h1 { margin: 0; font-size: 24px; letter-spacing: -.035em; }.topbar .eyebrow { margin-bottom: 6px; color: var(--muted-2); }.topbar-actions { display: flex; gap: 10px; align-items: center; }.cluster-switch { padding: 3px; border: 1px solid var(--line); border-radius: 8px; display: flex; background: #0e131c; }.cluster-switch button { min-width: 67px; height: 33px; padding: 0 13px; border: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; font-weight: 700; }.cluster-switch button.active { color: var(--text); background: #20293a; box-shadow: 0 3px 10px rgba(0,0,0,.2); }.refresh-button { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; color: #b8c0ce; background: #121721; cursor: pointer; font-size: 11px; }.refresh-button:hover { border-color: rgba(124,156,255,.3); color:#fff; }.refresh-button.loading span { display:inline-block; animation:spin .8s linear infinite; }.mobile-menu { display:none; }
.context-bar { min-height: 58px; padding: 10px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); background: rgba(14,18,26,.72); }.context-bar > div:first-child { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:10px; }.context-bar > div:first-child strong { color:#b8c1ce; }.context-bar > div:first-child > span:last-child { padding-left:8px; border-left:1px solid var(--line); color:var(--muted-2); }.status-dot { display:inline-block; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--muted); }.status-dot.healthy, .status-dot.pulse { background:var(--green); box-shadow:0 0 8px rgba(104,224,179,.45); }.status-dot.degraded, .status-dot.amber { background:var(--amber); }.status-dot.offline { background:var(--red); }.status-dot.pulse { animation:pulse 2s infinite; } @keyframes pulse { 50% { box-shadow:0 0 0 5px rgba(104,224,179,0); } }
.context-tools { display:flex; gap:8px; }.search-box { width:245px; height:35px; padding:0 11px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; color:var(--muted-2); background:#0d121a; }.search-box input { width:100%; border:0; outline:0; color:#cdd4df; background:transparent; font-size:10px; }.context-tools select { height:35px; max-width:190px; padding:0 30px 0 11px; border:1px solid var(--line); border-radius:8px; outline:0; color:#a8b0bf; background:#0d121a; font-size:10px; }
.content { max-width: 1600px; min-height: calc(100vh - 144px); padding: 28px 34px 60px; margin: 0 auto; }

/* Common cards and tables */
.overview-hero { min-height: 142px; padding: 28px 32px; border:1px solid rgba(124,156,255,.16); border-radius:var(--radius); display:flex; align-items:center; justify-content:space-between; background:radial-gradient(circle at 85% 50%, rgba(104,224,179,.09), transparent 20%), linear-gradient(120deg, #151c2a, #111720); box-shadow:var(--shadow); overflow:hidden; }.hero-copy h2 { margin:0 0 8px; font-size:25px; letter-spacing:-.035em; }.hero-copy > p:last-child { margin:0; color:var(--muted); font-size:11px; }.health-gauge { --health:360deg; width:92px; height:92px; padding:6px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--green) var(--health), rgba(255,255,255,.05) 0); box-shadow:0 0 30px rgba(104,224,179,.08); }.health-gauge::before { content:""; position:absolute; }.health-gauge > div { width:80px; height:80px; border-radius:50%; display:grid; place-content:center; text-align:center; background:#141b25; }.health-gauge strong, .health-gauge span { display:block; }.health-gauge strong { font-size:22px; }.health-gauge span { margin-top:2px; color:var(--muted); font-size:8px; }
.health-gauge.full { --health:360deg; }.health-gauge.high { --health:306deg; }.health-gauge.mid { --health:216deg; }.health-gauge.low { --health:108deg; background:conic-gradient(var(--red) var(--health), rgba(255,255,255,.05) 0); }
.metric-grid { margin-top:14px; display:grid; grid-template-columns:repeat(5, minmax(150px,1fr)); gap:10px; }.metric-card { min-height:104px; padding:17px; border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:36px 1fr; gap:12px; background:var(--panel); }.metric-card.danger { border-color:rgba(255,116,125,.14); background:linear-gradient(145deg, rgba(255,116,125,.045), var(--panel)); }.metric-icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:var(--blue); background:rgba(124,156,255,.1); font-size:16px; }.metric-card.danger .metric-icon { color:var(--red); background:rgba(255,116,125,.09); }.metric-card span, .metric-card strong, .metric-card small { display:block; }.metric-card > div:nth-child(2) > span { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.metric-card strong { margin-top:4px; font-size:24px; letter-spacing:-.04em; }.metric-card small { margin-top:4px; color:var(--muted-2); font-size:8px; line-height:1.4; }.metric-card small span { text-transform:none; letter-spacing:0; }.trend.good { color:#729f91; }.trend.bad { color:var(--red); }
.section-heading { margin:30px 2px 12px; display:flex; align-items:flex-end; justify-content:space-between; }.section-heading h2 { margin:0; font-size:18px; }.section-heading .eyebrow { margin-bottom:5px; }.text-button { border:0; color:var(--blue); background:transparent; cursor:pointer; font-size:10px; }.text-button:hover { color:#a9bbff; }
.node-mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.node-mini { min-height:106px; padding:16px; border:1px solid var(--line); border-radius:11px; display:grid; grid-template-columns:32px minmax(150px,1.5fr) minmax(170px,1fr) minmax(100px,.65fr); gap:14px; align-items:center; background:var(--panel); cursor:pointer; transition:.18s; }.node-mini:hover, .lb-card:hover, .inspectable:hover { border-color:rgba(124,156,255,.2); background-color:#151b26; }.node-orb { width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(124,156,255,.25); border-radius:8px; background:rgba(124,156,255,.08); }.node-orb span { width:8px; height:8px; border:2px solid var(--muted); border-radius:50%; }.node-orb.online span { border-color:var(--green); box-shadow:0 0 9px rgba(104,224,179,.4); }.node-orb.offline span { border-color:var(--red); }.node-main > div { display:flex; align-items:center; gap:8px; }.node-main strong { max-width:320px; overflow:hidden; text-overflow:ellipsis; font-size:11px; }.node-main p { margin:6px 0 0; color:var(--muted-2); font-size:9px; }.node-meta, .node-usage { display:grid; gap:7px; }.node-meta span, .node-usage span { color:var(--muted-2); font-size:8px; }.node-meta b, .node-usage b { display:block; margin-top:2px; color:#b5bdc9; font-family:ui-monospace,monospace; font-size:9px; font-weight:500; }
.lb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }.lb-card { min-height:155px; padding:17px; border:1px solid var(--line); border-radius:11px; background:var(--panel); cursor:pointer; transition:.18s; }.lb-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }.lb-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:8px; color:var(--blue); background:rgba(124,156,255,.1); }.lb-card > strong, .lb-card > small { display:block; }.lb-card > strong { font-size:12px; }.lb-card > small { margin-top:3px; color:var(--muted-2); font-size:9px; }.lb-address { min-height:24px; margin:12px 0 7px; }.lb-address em { color:var(--amber); font-size:9px; }.port-list { display:flex; gap:5px; flex-wrap:wrap; }.port-list > span { padding:4px 7px; border:1px solid var(--line); border-radius:5px; color:#7d8899; background:rgba(255,255,255,.02); font-size:8px; }.port-list b { color:#c5ccd7; }
.two-column { margin-top:20px; display:grid; grid-template-columns:1fr 1.15fr; gap:12px; align-items:start; }.two-column.equal { grid-template-columns:1fr 1fr; }
.data-card { margin-top:14px; border:1px solid var(--line); border-radius:11px; background:var(--panel); overflow:hidden; }.two-column > .data-card { margin-top:0; }.card-heading { min-height:58px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }.card-heading h2 { margin:0; font-size:12px; }.card-heading p { margin:4px 0 0; color:var(--muted); font-size:9px; }.count-chip { min-width:25px; padding:4px 7px; border-radius:9px; color:var(--muted); background:rgba(255,255,255,.04); font-size:8px; text-align:center; }.table-wrap { width:100%; overflow:auto; }table { width:100%; border-collapse:collapse; }th { height:35px; padding:0 13px; color:#566173; background:rgba(255,255,255,.012); font-size:8px; font-weight:700; letter-spacing:.08em; text-align:left; text-transform:uppercase; white-space:nowrap; }td { height:50px; max-width:360px; padding:8px 13px; border-top:1px solid rgba(255,255,255,.045); color:#a8b0bd; font-size:9px; vertical-align:middle; }tr.inspectable { cursor:pointer; transition:background .15s; }tr.inspectable:hover { background:rgba(124,156,255,.025); }.primary-cell strong, .primary-cell small { display:block; }.primary-cell strong { max-width:300px; overflow:hidden; color:#dbe0e9; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.primary-cell small { margin-top:3px; color:var(--muted-2); font-size:8px; }.empty-cell { height:80px; color:var(--muted-2); text-align:center; }.status-badge { width:max-content; padding:4px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:5px; color:#9ca6b6; background:rgba(255,255,255,.04); font-size:8px; font-weight:650; white-space:nowrap; }.status-badge i { width:5px; height:5px; border-radius:50%; background:#6c7686; }.status-badge.good { color:#91c6b4; background:rgba(104,224,179,.07); }.status-badge.good i { background:var(--green); }.status-badge.warn { color:#ddb779; background:rgba(243,186,101,.07); }.status-badge.warn i { background:var(--amber); }.status-badge.bad { color:#e98d94; background:rgba(255,116,125,.07); }.status-badge.bad i { background:var(--red); }.copy-value { max-width:180px; padding:0; border:0; overflow:hidden; color:#aeb9cd; background:transparent; cursor:pointer; font-family:ui-monospace,monospace; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }.copy-value span { color:var(--muted-2); }.copy-value:hover { color:var(--blue); }.port-chip { display:inline-block; padding:3px 5px; border:1px solid var(--line); border-radius:4px; color:#8894a8; background:rgba(255,255,255,.02); font-size:8px; }.restart-count { color:#7c8797; }.restart-count.hot { color:var(--amber); font-weight:700; }.event-cell strong, .event-cell small { display:block; }.event-cell strong { color:#bdc5d1; }.event-cell small { max-width:270px; margin-top:3px; overflow:hidden; color:var(--muted-2); text-overflow:ellipsis; white-space:nowrap; }.block { display:block; margin-top:2px; color:var(--muted-2); }.truncate { display:block; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }code { max-width:300px; display:inline-block; overflow:hidden; color:#aab6cd; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:8px; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; }.text-bad { color:var(--red)!important; }
.view-intro { min-height:105px; padding:22px 25px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(120deg, #131925, #10151e); }.view-intro h2 { margin:0 0 6px; font-size:23px; letter-spacing:-.035em; }.view-intro > div > p:last-child { margin:0; color:var(--muted); font-size:10px; }.mini-stats { display:flex; gap:9px; }.mini-stats span { min-width:92px; padding:12px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:rgba(255,255,255,.018); font-size:8px; text-align:center; }.mini-stats b { display:block; margin-bottom:3px; color:var(--text); font-size:18px; }
.network-lb-grid { margin:14px 0 20px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.network-lb { padding:18px; border:1px solid var(--line); border-radius:11px; background:var(--panel); cursor:pointer; }.network-lb-head { display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; }.network-lb-head .lb-icon { width:35px;height:35px; }.network-lb-head p, .network-lb-head h3 { margin:0; }.network-lb-head p { color:var(--muted-2);font-size:8px; }.network-lb-head h3 { margin-top:3px;font-size:12px; }.network-route { margin:18px 0 14px; padding:12px; border:1px solid var(--line); border-radius:8px; display:grid; grid-template-columns:1fr auto 1.3fr auto 1fr; gap:10px; align-items:center; background:#0e131b; }.network-route div span,.network-route div b { display:block; }.network-route div span { color:var(--muted-2);font-size:7px;text-transform:uppercase; }.network-route div b { max-width:170px;margin-top:4px;overflow:hidden;color:#b8c1ce;font-family:ui-monospace,monospace;font-size:8px;text-overflow:ellipsis; }.network-route > i { color:var(--blue);font-style:normal; }
.storage-summary { min-height:94px; margin:14px 0 20px; padding:18px 24px; border:1px solid var(--line); border-radius:11px; display:flex;align-items:center;gap:20px;background:var(--panel); }.storage-art { position:relative;width:58px;height:48px; }.storage-art span { position:absolute;left:0;width:58px;height:20px;border:1px solid rgba(124,156,255,.3);border-radius:50%;background:#182032; }.storage-art span:nth-child(1){top:0}.storage-art span:nth-child(2){top:12px}.storage-art span:nth-child(3){top:24px}.storage-summary strong { font-size:12px; }.storage-summary p { margin:5px 0 0;color:var(--muted);font-size:9px; }
.node-detail-grid { margin-top:14px; display:grid;grid-template-columns:repeat(2,1fr);gap:12px; }.node-detail-card { padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer; }.node-detail-head { display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center; }.node-detail-head .node-orb { width:38px;height:38px;border-radius:10px; }.node-detail-head p,.node-detail-head h3 { margin:0; }.node-detail-head p { color:var(--muted-2);font-size:8px; }.node-detail-head h3 { max-width:380px;margin-top:3px;overflow:hidden;font-size:12px;text-overflow:ellipsis; }.node-specs { margin:18px 0 12px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden; }.node-specs div { min-height:52px;padding:11px;background:#10151e; }.node-specs span,.node-specs b { display:block; }.node-specs span,.ip-panel span,.capacity-row span,.pod-capacity span { color:var(--muted-2);font-size:7px;text-transform:uppercase;letter-spacing:.07em; }.node-specs b { margin-top:6px;color:#b5bdc9;font-size:9px; }.ip-panel { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.ip-panel > div { padding:10px;border:1px solid var(--line);border-radius:7px; }.ip-panel span { display:block;margin-bottom:5px; }.capacity-row { margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px; }.capacity-row > div { padding:10px;border-radius:7px;background:rgba(255,255,255,.02); }.capacity-row span,.capacity-row b { display:block; }.capacity-row b { margin-top:4px;color:#bdc5d1;font-family:ui-monospace,monospace;font-size:10px; }.pod-capacity { margin-top:14px; }.pod-capacity > div:first-child { display:flex;justify-content:space-between; }.pod-capacity b { font-size:9px; }.progress { height:4px;margin-top:8px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.05); }.progress progress { width:100%;height:4px;border:0;display:block;appearance:none;background:transparent; }.progress progress::-webkit-progress-bar { background:transparent; }.progress progress::-webkit-progress-value { border-radius:4px;background:linear-gradient(90deg,var(--blue-2),var(--green)); }.progress progress::-moz-progress-bar { border-radius:4px;background:linear-gradient(90deg,var(--blue-2),var(--green)); }
.collector-errors { margin:14px 0;padding:16px;border:1px solid rgba(243,186,101,.17);border-radius:10px;background:rgba(243,186,101,.035); }.collector-errors h3 { margin:0 0 10px;color:var(--amber);font-size:11px; }.collector-errors > div { padding:7px 0;border-top:1px solid rgba(243,186,101,.08);display:grid;grid-template-columns:170px 1fr;gap:12px;color:var(--muted);font-size:8px; }.event-message { display:block;max-width:500px;line-height:1.45; }
.empty-panel { min-height:100px;padding:25px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;color:var(--muted-2);background:rgba(255,255,255,.01);font-size:10px; }.loading-state,.error-state { min-height:450px;display:grid;place-content:center;justify-items:center;text-align:center;color:var(--muted); }.loader { width:34px;height:34px;border:2px solid rgba(124,156,255,.15);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite; }.loading-state p { margin-top:15px;font-size:10px; }.error-state > span { width:42px;height:42px;border:1px solid rgba(255,116,125,.2);border-radius:50%;display:grid;place-items:center;color:var(--red);background:rgba(255,116,125,.06);font-size:18px; }.error-state h2 { margin:15px 0 5px;font-size:18px; }.error-state p { max-width:500px;margin:0 0 20px;font-size:10px;line-height:1.6; }

/* Drawer */
.detail-drawer { position:fixed;z-index:70;inset:0 0 0 auto;width:min(470px,100%);padding:38px 32px;overflow:auto;background:#111720;border-left:1px solid var(--line-strong);box-shadow:-25px 0 60px rgba(0,0,0,.38);transform:translateX(103%);transition:transform .25s ease; }.detail-drawer.open { transform:translateX(0); }.drawer-backdrop { position:fixed;z-index:60;inset:0;visibility:hidden;background:rgba(2,4,8,.58);opacity:0;transition:.25s; }.drawer-backdrop.open { visibility:visible;opacity:1; }.drawer-close { position:absolute;right:20px;top:18px;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:#171e2a;cursor:pointer;font-size:20px; }.detail-drawer h2 { max-width:360px;margin:0;font-size:23px;line-height:1.25;word-break:break-word; }.drawer-subtitle { margin:7px 0 16px;color:var(--muted); }.drawer-status { min-height:25px;margin-bottom:16px; }.detail-fields { border-top:1px solid var(--line); }.detail-field { min-height:52px;padding:11px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center; }.detail-field > span { color:var(--muted-2);font-size:8px;text-transform:capitalize; }.detail-field strong,.detail-field code { max-width:260px;color:#bec6d2;font-size:9px;white-space:normal;word-break:break-word; }.drawer-section { margin-top:25px; }.drawer-section h3 { font-size:11px; }.toast { position:fixed;z-index:100;left:50%;bottom:25px;padding:10px 15px;border:1px solid var(--line-strong);border-radius:8px;color:#c8cfda;background:#1a2230;box-shadow:var(--shadow);font-size:10px;opacity:0;transform:translate(-50%,15px);pointer-events:none;transition:.2s; }.toast.show { opacity:1;transform:translate(-50%,0); }

@media (max-width: 1250px) {
    .metric-grid { grid-template-columns:repeat(3,1fr); }.node-mini { grid-template-columns:32px 1fr 1fr; }.node-usage { display:none; }.lb-grid { grid-template-columns:repeat(2,1fr); }.mini-stats span { min-width:75px; }.network-route { grid-template-columns:1fr auto 1fr; }.network-route div:last-child,.network-route i:last-of-type { display:none; }
}
@media (max-width: 980px) {
    :root { --sidebar:220px; }.content,.topbar,.context-bar { padding-left:22px;padding-right:22px; }.metric-grid { grid-template-columns:repeat(2,1fr); }.node-mini-grid,.node-detail-grid,.network-lb-grid,.two-column,.two-column.equal { grid-template-columns:1fr; }.lb-grid { grid-template-columns:1fr 1fr; }.topbar-actions .refresh-button { width:40px;font-size:0; }.refresh-button span { font-size:14px; }.view-intro { align-items:flex-start;gap:20px;flex-direction:column; }.mini-stats { width:100%; }.mini-stats span { flex:1; }.login-shell { grid-template-columns:1fr; }.login-visual { display:none; }.login-panel { min-height:100vh; }.mobile-brand { display:flex; }
}
@media (max-width: 740px) {
    .sidebar { width:min(285px,85vw);transform:translateX(-102%);box-shadow:25px 0 50px rgba(0,0,0,.45);transition:transform .25s; }.sidebar.mobile-open { transform:translateX(0); }.main-area { margin-left:0; }.mobile-menu { width:36px;height:36px;margin-right:12px;border:1px solid var(--line);border-radius:8px;display:block;background:#121822; }.topbar { height:auto;min-height:82px;padding:14px 16px;justify-content:flex-start; }.topbar h1 { font-size:19px; }.topbar-actions { margin-left:auto; }.cluster-switch button { min-width:54px;padding:0 8px; }.context-bar { padding:10px 16px;align-items:stretch;flex-direction:column; }.context-tools { width:100%; }.search-box { width:100%; }.context-tools select { max-width:145px; }.content { padding:18px 14px 45px; }.overview-hero { padding:22px; }.hero-copy h2 { max-width:230px;font-size:20px; }.health-gauge { width:76px;height:76px; }.health-gauge > div { width:64px;height:64px; }.health-gauge strong { font-size:17px; }.metric-grid { grid-template-columns:1fr 1fr; }.metric-card { min-height:95px;padding:13px;grid-template-columns:30px 1fr; }.metric-icon { width:29px;height:29px; }.metric-card strong { font-size:20px; }.node-mini { grid-template-columns:30px 1fr; }.node-meta { display:none; }.lb-grid { grid-template-columns:1fr; }.table-wrap { max-width:calc(100vw - 30px); }.login-panel { padding:28px 22px; }.login-card h1 { font-size:37px; }.node-detail-card { padding:15px; }.node-specs,.ip-panel,.capacity-row { grid-template-columns:1fr; }.network-route { grid-template-columns:1fr; }.network-route > i,.network-route div:last-child { display:none; }
}
@media (max-width: 430px) {
    .metric-grid { grid-template-columns:1fr; }.overview-hero { align-items:flex-start; }.health-gauge { flex:0 0 76px; }.cluster-switch i { display:none; }.mini-stats { display:grid;grid-template-columns:repeat(3,1fr); }.mini-stats span { min-width:0;padding:9px 4px; }.context-tools { flex-direction:column; }.context-tools select { max-width:none;width:100%; }.detail-drawer { padding:38px 20px; }.detail-field { grid-template-columns:100px 1fr; }
}