:root {
    color-scheme: dark;
    --bg: #07101f;
    --sidebar: #091426;
    --surface: #0e1a2d;
    --surface-2: #13223a;
    --border: rgba(148, 170, 205, .16);
    --text: #edf4ff;
    --muted: #8fa2bf;
    --blue: #39a7ff;
    --cyan: #50d8d0;
    --green: #48d597;
    --yellow: #f3c65d;
    --red: #ff6d77;
    --purple: #a892ff;
    --shadow: 0 18px 50px rgba(0, 0, 0, .22);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.1; letter-spacing: -.035em; }
h2 { font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
code { padding: .12rem .35rem; border-radius: .35rem; background: rgba(255,255,255,.07); color: #ddecff; }
.muted { color: var(--muted); }
.eyebrow { color: #6f86aa; font-size: .75rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }

.app-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.5rem 1rem; background: linear-gradient(180deg, #0a172b 0%, #081322 100%); border-right: 1px solid var(--border); }
.sidebar-brand { display: flex; gap: .8rem; align-items: center; padding: 0 .5rem 2rem; }
.sidebar-brand strong, .sidebar-brand span { display: block; }
.sidebar-brand strong { font-size: 1rem; letter-spacing: -.02em; }
.sidebar-brand span { color: var(--muted); font-size: .78rem; }
.brand-mark { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: .75rem; background: linear-gradient(135deg, var(--blue), #3474ef); box-shadow: 0 10px 24px rgba(57,167,255,.22); font-weight: 850; color: white; }
.sidebar nav { display: grid; gap: .35rem; }
.nav-item { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 1px solid transparent; border-radius: .7rem; background: transparent; color: #91a3be; cursor: pointer; text-align: left; font-weight: 650; }
.nav-item span { color: #516683; font-size: .72rem; font-variant-numeric: tabular-nums; }
.nav-item:hover { background: rgba(255,255,255,.035); color: var(--text); }
.nav-item.is-active { color: white; border-color: rgba(57,167,255,.18); background: linear-gradient(90deg, rgba(57,167,255,.17), rgba(57,167,255,.04)); }
.nav-item.is-active span { color: var(--blue); }
.sidebar-footer { margin-top: auto; padding: 1rem .45rem 0; border-top: 1px solid var(--border); }
.user-chip { display: flex; gap: .65rem; align-items: center; margin-bottom: .7rem; min-width: 0; }
.user-chip > span:last-child { min-width: 0; }
.user-chip strong, .user-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip strong { font-size: .84rem; }
.user-chip small { color: var(--muted); font-size: .72rem; }
.avatar { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #1c3150; color: #9dcfff; font-weight: 800; font-size: .8rem; }

.workspace { min-width: 0; }
.topbar { min-height: 6.5rem; padding: 1.45rem clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); background: rgba(7,16,31,.82); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 10; }
.topbar h1 { margin-top: .25rem; }
.topbar-actions, .filters { display: flex; align-items: center; gap: .65rem; }
.range-control { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .8rem; }
select, input { min-height: 2.55rem; border: 1px solid var(--border); border-radius: .6rem; background: #0b1729; color: var(--text); padding: .55rem .75rem; outline: none; }
input { min-width: 15rem; }
select:focus, input:focus { border-color: rgba(57,167,255,.65); box-shadow: 0 0 0 3px rgba(57,167,255,.12); }
.live-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid rgba(72,213,151,.16); border-radius: 999px; color: #b9e9d3; background: rgba(72,213,151,.07); font-size: .76rem; font-weight: 700; }
.live-chip span { width: .45rem; height: .45rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(72,213,151,.12); }
main { padding: clamp(1rem, 3vw, 2.5rem); }
.view { display: none; }
.view.is-active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: .4; transform: translateY(4px); } }

.notice { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: .7rem; border: 1px solid var(--border); font-size: .86rem; }
.notice strong { margin-right: .3rem; }
.notice-warning { color: #f8dd9b; border-color: rgba(243,198,93,.25); background: rgba(243,198,93,.08); }
.notice-danger { color: #ffc4c9; border-color: rgba(255,109,119,.28); background: rgba(255,109,119,.09); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.metric-card { position: relative; overflow: hidden; min-height: 8.6rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: .9rem; background: linear-gradient(145deg, rgba(20,36,61,.95), rgba(12,25,44,.95)); box-shadow: var(--shadow); }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .2rem; background: var(--accent); }
.metric-card::after { content: ""; position: absolute; width: 7rem; height: 7rem; right: -3.2rem; top: -3.5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.metric-card span, .metric-card small { display: block; color: var(--muted); }
.metric-card span { font-size: .78rem; font-weight: 700; }
.metric-card strong { display: block; margin: .75rem 0 .2rem; font-size: 2rem; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.metric-card small { font-size: .72rem; }
.accent-blue { --accent: var(--blue); }.accent-green { --accent: var(--green); }.accent-purple { --accent: var(--purple); }.accent-red { --accent: var(--red); }

.chart-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .8fr); gap: .85rem; margin-top: .85rem; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .75fr); gap: .85rem; margin-top: .85rem; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: .9rem; background: linear-gradient(145deg, rgba(16,29,50,.97), rgba(11,23,40,.97)); box-shadow: var(--shadow); }
.panel-heading { min-height: 4.7rem; padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin-top: .22rem; }
.legend { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .72rem; }
.legend span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: .15rem; }
.legend .success::before { background: var(--green); }.legend .warning::before { background: var(--yellow); }.legend .failed::before { background: var(--red); }
.chart-stage { min-height: 17rem; padding: .85rem 1rem 1rem; }
.chart-stage svg { display: block; width: 100%; min-width: 36rem; height: 15rem; overflow: visible; }
.chart-stage .axis-label { fill: #7186a7; font-size: 11px; }
.chart-stage .grid-line { stroke: rgba(148,170,205,.12); stroke-width: 1; }
.chart-stage .bar-success { fill: var(--green); }.chart-stage .bar-warning { fill: var(--yellow); }.chart-stage .bar-failed { fill: var(--red); }
.donut-layout { min-height: 17rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; padding: 1rem; }
.donut { --running: 0deg; width: 9.5rem; aspect-ratio: 1; display: grid; place-items: center; margin: auto; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--running), #29405e var(--running) 360deg); position: relative; }
.donut::after { content: ""; position: absolute; inset: 1.05rem; border-radius: 50%; background: #0d1a2d; border: 1px solid var(--border); }
.donut > span { z-index: 1; text-align: center; font-size: 1.65rem; font-weight: 800; letter-spacing: -.04em; }
.donut small { display: block; color: var(--muted); font-size: .7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.donut-key p { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; margin: .7rem 0; color: var(--muted); font-size: .8rem; }
.donut-key strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: #667; }.dot.running { background: var(--green); }.dot.stopped { background: #385878; }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { padding: .7rem 1rem; color: #7185a5; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; text-align: left; background: rgba(255,255,255,.012); }
td { padding: .82rem 1rem; border-top: 1px solid rgba(148,170,205,.09); color: #cdd9e9; vertical-align: middle; }
tbody tr:hover td { background: rgba(255,255,255,.018); }
.status-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .24rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 760; text-transform: capitalize; border: 1px solid transparent; }
.status-pill.success, .status-pill.running { color: #a8e8ca; background: rgba(72,213,151,.09); border-color: rgba(72,213,151,.17); }
.status-pill.warning { color: #f5dc9f; background: rgba(243,198,93,.09); border-color: rgba(243,198,93,.18); }
.status-pill.failed { color: #ffbdc2; background: rgba(255,109,119,.09); border-color: rgba(255,109,119,.18); }
.status-pill.stopped, .status-pill.neutral { color: #a9bad0; background: rgba(142,162,191,.08); border-color: rgba(142,162,191,.16); }
.status-pill.vmware { color: #b9caff; background: rgba(103,132,255,.1); }.status-pill.xcpng { color: #9fe8e4; background: rgba(80,216,208,.09); }
.text-button { padding: .3rem 0; border: 0; background: transparent; color: #71baff; cursor: pointer; font-size: .78rem; font-weight: 680; }
.text-button:hover { color: white; }
.source-list { padding: .25rem 1rem 1rem; }
.source-row { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .78rem 0; border-bottom: 1px solid rgba(148,170,205,.09); }
.source-row:last-child { border-bottom: 0; }
.source-row > span:first-child { width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .22rem rgba(72,213,151,.08); }
.source-row.is-stale > span:first-child { background: var(--yellow); box-shadow: 0 0 0 .22rem rgba(243,198,93,.08); }
.source-row strong, .source-row small { display: block; }.source-row strong { font-size: .79rem; }.source-row small { color: var(--muted); font-size: .7rem; }.source-row time { color: var(--muted); font-size: .68rem; }

.inventory-toolbar { padding: 1rem 1.1rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.inventory-toolbar h2 { margin-top: .22rem; }.inventory-table { max-height: calc(100vh - 13rem); }
.vm-name { display: block; color: var(--text); font-weight: 680; }.vm-sub { display: block; max-width: 17rem; color: var(--muted); font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.resource-copy { white-space: nowrap; font-variant-numeric: tabular-nums; }

.automation-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; padding: 1.15rem; border: 1px solid rgba(243,198,93,.21); border-radius: .9rem; background: linear-gradient(110deg, rgba(243,198,93,.09), rgba(16,29,50,.96) 45%); }
.automation-banner h2 { margin: .25rem 0; }.automation-banner p:last-child { color: var(--muted); font-size: .82rem; }
.schedule-list { display: grid; gap: 0; }
.schedule-row { display: grid; grid-template-columns: minmax(15rem, 1.4fr) 7rem 8rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-top: 1px solid rgba(148,170,205,.09); }
.schedule-row:first-child { border-top: 0; }.schedule-row strong, .schedule-row small { display: block; }.schedule-row strong { font-size: .84rem; }.schedule-row small { color: var(--muted); font-size: .7rem; }.schedule-times { color: #bdd0e9; font-size: .75rem; }
.switch { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .75rem; cursor: pointer; }.switch input { min-width: 0; min-height: 0; position: absolute; opacity: 0; }.switch-track { width: 2.4rem; height: 1.3rem; padding: .18rem; border-radius: 999px; background: #263b57; transition: .15s; }.switch-track::after { content: ""; display: block; width: .94rem; height: .94rem; border-radius: 50%; background: #9babc0; transition: .15s; }.switch input:checked + .switch-track { background: rgba(72,213,151,.42); }.switch input:checked + .switch-track::after { transform: translateX(1.05rem); background: var(--green); }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 2.55rem; padding: .6rem .9rem; border-radius: .6rem; border: 1px solid var(--border); text-decoration: none; cursor: pointer; font-weight: 750; font-size: .8rem; }.button-primary { color: white; background: linear-gradient(135deg, #299fff, #316fe8); border-color: transparent; box-shadow: 0 10px 24px rgba(49,111,232,.2); }.button-secondary { color: #c6d6ea; background: #132640; }.button:disabled { opacity: .45; cursor: not-allowed; }

.skeleton { position: relative; overflow: hidden; border-radius: .5rem; background: #162740; }.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.4s infinite; }@keyframes shimmer { to { transform: translateX(100%); } }.chart-skeleton { height: 14rem; }.row-skeleton { height: 2.2rem; }.schedule-skeleton { height: 5rem; margin: 1rem; }
.empty-state { padding: 2.2rem 1rem; color: var(--muted); text-align: center; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; max-width: 24rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .7rem; background: #142641; box-shadow: var(--shadow); color: var(--text); opacity: 0; transform: translateY(.8rem); pointer-events: none; transition: .18s; font-size: .82rem; }.toast.is-visible { opacity: 1; transform: none; }.toast.is-error { border-color: rgba(255,109,119,.35); }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: radial-gradient(circle at 15% 15%, rgba(57,167,255,.13), transparent 28rem), radial-gradient(circle at 85% 75%, rgba(80,216,208,.08), transparent 30rem), #07101f; }
.login-shell { width: min(62rem, 100%); display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border: 1px solid var(--border); border-radius: 1.2rem; background: #0c192b; box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.login-brand { min-height: 31rem; padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, rgba(35,111,190,.25), rgba(8,20,37,.75)), repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,255,255,.025) 60px); }
.login-brand .brand-mark { margin-bottom: 2.4rem; }.login-brand h1 { max-width: 26rem; margin: .5rem 0 1rem; font-size: clamp(2.4rem, 5vw, 4.5rem); }.login-brand > p:last-of-type { max-width: 27rem; color: #9db0ca; }.signal-strip { display: flex; align-items: end; gap: .28rem; height: 2rem; margin-top: 2rem; }.signal-strip span { width: .35rem; border-radius: .3rem; background: var(--cyan); }.signal-strip span:nth-child(1){height:35%}.signal-strip span:nth-child(2){height:75%}.signal-strip span:nth-child(3){height:50%}.signal-strip span:nth-child(4){height:100%}
.login-card { padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }.login-card h2 { margin-top: .3rem; font-size: 1.8rem; }.login-form { display: grid; gap: 1rem; }.login-form label span { display: block; margin-bottom: .4rem; color: #b7c7db; font-size: .8rem; font-weight: 680; }.login-form input { width: 100%; }.login-form .button { margin-top: .4rem; }
.error-card { width: min(32rem, 100%); padding: 2.5rem; text-align: center; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow); }.error-card .brand-mark { margin: 0 auto 1.5rem; }.error-card h1 { margin: .6rem 0; font-size: 4rem; }.error-card p { margin-bottom: 1.5rem; color: var(--muted); }

@media (max-width: 1100px) { .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.chart-grid, .detail-grid { grid-template-columns: 1fr; }.donut-layout { min-height: 13rem; }.schedule-row { grid-template-columns: minmax(12rem,1fr) 6rem 7rem 1fr; }.schedule-row .button { grid-column: 4; } }
@media (max-width: 760px) { .app-shell { display: block; }.sidebar { position: static; width: 100%; height: auto; padding: .8rem; flex-direction: row; align-items: center; gap: .5rem; overflow: auto; }.sidebar-brand { padding: 0 .5rem 0 0; }.sidebar-brand div:last-child, .sidebar-footer { display: none; }.sidebar nav { display: flex; }.nav-item { white-space: nowrap; }.topbar { min-height: 5rem; padding: 1rem; position: static; }.topbar-actions { display: none; } main { padding: 1rem; }.metric-grid { grid-template-columns: 1fr 1fr; }.inventory-toolbar { align-items: stretch; flex-direction: column; }.filters { align-items: stretch; flex-direction: column; }.filters input { min-width: 0; width: 100%; }.schedule-row { grid-template-columns: 1fr auto; }.schedule-row > * { grid-column: auto !important; }.schedule-times { grid-column: 1 / -1 !important; }.login-shell { grid-template-columns: 1fr; }.login-brand { display: none; } }
@media (max-width: 480px) { .metric-grid { grid-template-columns: 1fr; }.metric-card { min-height: 7rem; }.donut-layout { grid-template-columns: 1fr; }.panel-heading { align-items: flex-start; flex-direction: column; }.legend { margin-top: -.5rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }