:root { --bg: #080a1c; --panel: rgba(18, 22, 52, .75); --panel-solid: #131735; --border: rgba(164, 147, 255, .17); --text: #f4f2ff; --muted: #9699c0; --faint: #666a91; --violet: #9d7bff; --violet2: #765bff; --cyan: #64dbff; --green: #73e0b0; --orange: #ffb86c; --shadow: 0 22px 60px rgba(0,0,0,.22); font-family: 'Space Grotesk', sans-serif; }
* { box-sizing: border-box; } html { background: var(--bg); color: var(--text); } body { margin: 0; min-width: 1180px; background: radial-gradient(circle at 68% -15%, rgba(102,78,232,.22), transparent 31%), radial-gradient(circle at 24% 100%, rgba(25,125,170,.1), transparent 32%), var(--bg); overflow-x: auto; } button, input { font: inherit; } button { color: inherit; cursor: pointer; border: 0; } .ambient { position: fixed; pointer-events: none; filter: blur(90px); opacity: .21; z-index: 0; border-radius: 50%; } .ambient-one { width: 420px; height: 420px; background: #7049e9; top: -240px; right: 19%; } .ambient-two { width: 380px; height: 380px; background: #087f9f; bottom: -240px; left: 11%; } .grid-noise { position: fixed; inset: 0; opacity: .08; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(146,129,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(146,129,255,.12) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; } .sidebar { width: 252px; border-right: 1px solid var(--border); padding: 28px 16px 20px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; background: rgba(8,10,28,.63); backdrop-filter: blur(24px); } .brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 29px; } .brand-mark { width: 26px; height: 26px; display: flex; align-items: end; gap: 3px; transform: skew(-13deg); } .brand-mark span { width: 6px; border-radius: 3px; background: linear-gradient(180deg, #d1c4ff, #7357ff); }.brand-mark span:nth-child(1){height:15px}.brand-mark span:nth-child(2){height:23px}.brand-mark span:nth-child(3){height:18px}.eyebrow,.section-kicker { margin: 0; color: #8788ae; letter-spacing: .15em; font-size: 9px; font-weight: 600; }.brand-name { font-weight: 600; letter-spacing: -.04em; margin: 3px 0 0; font-size: 19px; }.workspace-chip { display: flex; align-items: center; gap: 8px; padding: 9px 11px; margin-bottom: 21px; border: 1px solid var(--border); border-radius: 8px; color: #bfc1e7; font-size: 11px; background: rgba(41,38,80,.34); }.pulse-dot,.status-dot,.sync-dot,.live-pill i,.vault-state i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: var(--green); box-shadow: 0 0 12px var(--green); }.chip-chevron { margin-left: auto; color: #75799c; font-size: 15px; }.nav-list { display: flex; flex-direction: column; gap: 5px; }.nav-item { display: flex; gap: 12px; align-items: center; padding: 12px 12px; width: 100%; color: #898db3; border-radius: 7px; background: transparent; text-align: left; font-size: 12px; transition: .2s; }.nav-item:hover,.nav-item.active { color: var(--text); background: linear-gradient(90deg, rgba(126,95,255,.2), rgba(126,95,255,.05)); }.nav-item.active { box-shadow: inset 2px 0 var(--violet); }.nav-icon { width: 17px; color: #a59bf9; font-size: 16px; text-align: center; }.nav-badge { margin-left: auto; border: 1px solid rgba(111,222,177,.35); color: var(--green); border-radius: 4px; font-size: 8px; padding: 3px 5px; letter-spacing: .08em; }.nav-count,.nav-alert { margin-left: auto; font-size: 10px; color: #707498; }.nav-alert { color: var(--orange); background: rgba(255,184,108,.12); padding: 2px 6px; border-radius: 5px; }.sidebar-bottom { margin-top: auto; }.security-card { padding: 13px 11px; display: flex; gap: 9px; align-items: center; border: 1px solid rgba(111,222,177,.17); border-radius: 8px; background: rgba(48,121,106,.09); }.security-icon { color: var(--green); font-size: 18px; }.security-card strong { font-size: 10px; font-weight: 500; }.security-card p,.user-mini p { color: var(--faint); font-size: 9px; margin: 3px 0 0; }.security-card .status-dot { margin-left: auto; }.settings-link { background: none; color: #777a9f; font-size: 11px; padding: 18px 12px; display: flex; gap: 9px; align-items: center; }.settings-link:hover { color: var(--text); }.user-mini { border-top: 1px solid var(--border); display: flex; align-items: center; gap: 9px; padding: 17px 8px 0; }.avatar { width: 29px; height: 29px; display: grid; place-items: center; background: linear-gradient(135deg, #bd97ff, #5e54de); border-radius: 8px; color: white; font-weight: 700; font-size: 12px; }.user-mini strong { font-size: 11px; font-weight: 500; }.more { margin-left: auto; color: #75799c; letter-spacing: 2px; }
.main-content { flex: 1; max-width: 1500px; padding: 0 45px 58px; }.topbar { height: 82px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }.breadcrumbs { color: #767a9e; font-size: 11px; }.breadcrumbs b { color: #4d5075; padding: 0 9px; }.breadcrumbs strong { color: #c5c6e3; font-weight: 500; }.top-actions { display: flex; align-items: center; gap: 16px; }.sync-label { color: #7c80a5; font-size: 10px; display: flex; gap: 6px; align-items: center; }.icon-btn { width: 28px; height: 28px; display: grid; place-items: center; color: #9b9fc5; font-size: 18px; background: transparent; position: relative; }.notification-dot { position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }.primary-btn { padding: 10px 14px; font-size: 11px; border-radius: 6px; color: #fff; background: linear-gradient(110deg, #8e6fff, #7156e8); box-shadow: 0 8px 20px rgba(113,86,232,.25); transition: .2s; }.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 25px rgba(113,86,232,.45); }.view { display: none; padding-top: 43px; animation: fadeUp .35s ease both; }.view.active-view { display: block; } @keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }
.hero-row { display: flex; justify-content: space-between; min-height: 258px; }.hero-row h1,.page-intro h1 { letter-spacing: -.06em; font-size: 43px; line-height: 1.04; margin: 15px 0 14px; font-weight: 600; }.hero-row h1 em,.page-intro h1 em { font-style: normal; color: #a69bff; }.hero-copy { color: #8387ad; max-width: 390px; font-size: 12px; line-height: 1.7; }.kicker-line { display: inline-block; width: 26px; height: 1px; vertical-align: middle; margin: 0 9px; background: #595b84; }.hero-orbit { width: 310px; height: 218px; position: relative; margin-right: 84px; margin-top: 4px; }.orbit { position: absolute; border: 1px solid rgba(136,116,255,.33); border-radius: 50%; transform: rotate(-21deg); }.orbit-a { width: 220px; height: 102px; left: 40px; top: 57px; }.orbit-b { width: 285px; height: 123px; left: 8px; top: 47px; border-color: rgba(102,213,255,.21); transform: rotate(31deg); }.orbit-core { width: 76px; height: 76px; border-radius: 50%; position: absolute; top: 70px; left: 113px; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #5c48d3, #272352 67%, transparent 68%); box-shadow: 0 0 40px rgba(126,95,255,.6); }.core-logo { display:block; color: #e5dfff; font-size: 19px; line-height: 17px; }.orbit-core small { font-size: 7px; color: #bbb1ff; letter-spacing: .15em; }.orbit-node { position: absolute; font: 9px 'DM Mono', monospace; letter-spacing: .1em; color: #a9a5df; padding: 5px 7px; border: 1px solid rgba(160,140,255,.25); background: rgba(19,22,54,.8); border-radius: 4px; }.node-a { left: 6px; top: 38px; }.node-b { right: 7px; top: 48px; color: var(--cyan); }.node-c { left: 38px; bottom: 18px; color: var(--green); }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 49px; }.metric-card,.panel { background: linear-gradient(140deg, rgba(25,29,64,.78), rgba(14,17,43,.72)); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }.metric-card { min-height: 130px; padding: 16px 17px 14px; }.metric-header { display:flex; align-items:center; justify-content:space-between; color: #7e82a7; font-size: 9px; letter-spacing: .1em; }.metric-icon { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; font-size: 13px; }.metric-icon.violet { color: var(--violet); background: rgba(157,123,255,.13); }.metric-icon.cyan { color: var(--cyan); background: rgba(100,219,255,.11); }.metric-icon.green { color: var(--green); background: rgba(115,224,176,.1); }.metric-icon.orange { color: var(--orange); background: rgba(255,184,108,.1); }.metric-value { font-size: 28px; font-weight: 600; letter-spacing: -.07em; margin-top: 10px; }.metric-value small { font-size: 11px; color: #777a9e; letter-spacing: 0; font-weight: 400; }.metric-footer { display: flex; justify-content: space-between; align-items:center; margin-top: 11px; font-size: 9px; color: #75799e; }.up { color: var(--green); }.progress-line { height: 3px; margin-top: 13px; background: rgba(120,123,166,.2); border-radius: 2px; overflow: hidden; }.progress-line i { display:block; height:100%; background: linear-gradient(90deg,var(--cyan),var(--violet)); border-radius: 2px; }.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom: 16px; }.section-heading h2 { margin: 8px 0 0; font-size: 21px; letter-spacing: -.05em; }.section-heading h2 span { color: #707498; font-size: 11px; letter-spacing: 0; font-weight: 400; }.text-btn { color: #a49cf1; background: none; font-size: 10px; }.text-btn span { padding-left: 8px; font-size: 14px; }.dashboard-grid { display: grid; grid-template-columns: minmax(550px,1.62fr) minmax(290px,.78fr); gap: 14px; }.app-showcase { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.app-card { min-height: 196px; border: 1px solid var(--border); background: rgba(17,21,49,.7); border-radius: 9px; padding: 15px; position: relative; overflow: hidden; cursor: pointer; transition: .25s; }.app-card:hover { border-color: rgba(164,147,255,.45); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(4,4,20,.38); }.app-card.featured { grid-column: span 2; min-height: 174px; display: flex; gap: 19px; }.app-card::before { content:""; position:absolute; width:180px; height:180px; right:-76px; bottom:-105px; border-radius:50%; background: var(--accent); opacity:.1; filter:blur(12px); }.app-card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }.app-logo { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; color:#fff; font-weight:600; font-size:13px; background: var(--accent); box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 45%, transparent); }.app-status { display:flex; gap:5px; align-items:center; color:var(--green); font-size:9px; }.app-status i { width:5px; height:5px; background:var(--green); border-radius:50%; box-shadow: 0 0 9px var(--green); }.app-name { margin: 13px 0 4px; font-size: 15px; letter-spacing: -.04em; position:relative; }.app-meta { margin:0; color:#777b9f; font-size:10px; position:relative; }.app-preview { border: 1px solid rgba(180,170,255,.13); height: 59px; margin-top: 15px; border-radius: 5px; background: #10142b; overflow:hidden; position:relative; }.app-card.featured .app-preview { width: 45%; flex: 1; height: 142px; margin:0 0 0 auto; order:2; }.preview-nav { height: 12px; border-bottom: 1px solid rgba(255,255,255,.08); display:flex; align-items:center; padding:0 6px; gap:4px; }.preview-nav i { width:3px; height:3px; border-radius:50%; background:#f6a5c2; }.preview-nav i:nth-child(2){background:#f8d787}.preview-nav i:nth-child(3){background:#79e0ba}.preview-body { padding:6px; display:flex; gap:5px; }.preview-side { width:15px; border-radius:2px; background: rgba(140,122,255,.28); }.preview-content { flex:1; }.preview-title { width:40%; height:5px; background:var(--accent); opacity:.8; border-radius:3px; margin-bottom:5px; }.preview-blocks { display:flex; gap:4px; }.preview-blocks i { display:block; height:25px; flex:1; border-radius:2px; background:rgba(109,221,255,.19); }.preview-blocks i:nth-child(2){background:rgba(157,123,255,.22)}.preview-blocks i:nth-child(3){background:rgba(115,224,176,.2)}.app-footer { display:flex; justify-content:space-between; align-items:center; margin-top: 13px; font-size:9px; color:#777b9f; position:relative; }.app-footer b { color:#c6c6e5; font-weight:500; }.app-link { color:#a8a0f1; font-size:9px; }.side-stack { display:flex; flex-direction:column; gap:12px; }.panel { padding: 17px; }.panel-title { display:flex; justify-content:space-between; align-items:flex-start; }.panel-title h3 { margin:7px 0 0; font-size:14px; letter-spacing:-.04em; }.live-pill { color:var(--green); font-size:8px; letter-spacing:.12em; display:flex; align-items:center; gap:5px; padding:4px 6px; border:1px solid rgba(115,224,176,.2); border-radius:4px; }.health-score { display:flex; gap:14px; align-items:center; margin:21px 0 19px; }.score-ring { width:57px; height:57px; border-radius:50%; background: conic-gradient(var(--green) 0 98%, rgba(115,224,176,.12) 98%); position:relative; display:grid; place-content:center; text-align:center; }.score-ring::before { content:""; position:absolute; inset:5px; background:#171a3c; border-radius:50%; }.score-ring strong,.score-ring span { position:relative; z-index:1; }.score-ring strong { font-size:16px; }.score-ring span { font-size:7px; color:#74799b; }.health-score > div:last-child strong { font-size:11px; font-weight:500; }.health-score p { font-size:9px; color:#777b9f; margin:5px 0 0; }.mini-bars > div { display:grid; grid-template-columns:36px 1fr 30px; gap:8px; align-items:center; margin-top:10px; color:#8185a7; font:9px 'DM Mono',monospace; }.mini-bars i,.server-bar { height:4px; border-radius:3px; background:#2c3057; overflow:hidden; }.mini-bars b,.server-bar i { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#74e1b2,#8edfc3); }.mini-bars strong { color:#c0c2dc; font-weight:400; text-align:right; }.panel-link { border-top:1px solid var(--border); padding-top:13px; margin-top:17px; width:100%; background:none; color:#aaa4e7; display:flex; justify-content:space-between; font-size:10px; }.alert-count { min-width:20px; height:20px; display:grid; place-items:center; color:var(--orange); background:rgba(255,184,108,.13); border-radius:5px; font-size:10px; }.alert-item { display:flex; gap:9px; align-items:start; padding:15px 0 0; }.alert-mark { min-width:20px; height:20px; display:grid; place-items:center; border-radius:5px; font-size:11px; }.alert-mark.orange { color:var(--orange); background:rgba(255,184,108,.13); }.alert-mark.violet { color:var(--violet); background:rgba(157,123,255,.13); }.alert-item strong { font-size:10px; font-weight:500; }.alert-item p { margin:4px 0 0; color:#707499; font-size:9px; line-height:1.4; }.alert-item button { background:none; color:#777b9f; margin-left:auto; }.lower-grid { display:grid; grid-template-columns: minmax(500px, 1.65fr) minmax(260px,.8fr); gap:14px; margin-top:14px; }.performance-panel { min-height:289px; }.select-pill { border:1px solid var(--border); color:#9699be; border-radius:5px; padding:7px 9px; font-size:9px; }.select-pill span { padding-left:8px; }.chart-wrap { position:relative; height:164px; margin:20px 6px 0 24px; }.chart-y { position:absolute; left:-24px; height:136px; top:0; display:flex; flex-direction:column; justify-content:space-between; color:#676b91; font:8px 'DM Mono',monospace; }.performance-chart { width:100%; height:136px; overflow:visible; background:repeating-linear-gradient(to bottom, rgba(117,120,163,.08) 0 1px, transparent 1px 45px); }.chart-area { fill:url(#chartFill); }.chart-line { fill:none; stroke:url(#chartStroke); stroke-width:2; vector-effect:non-scaling-stroke; }.chart-point { fill:#eadfff; stroke:#987bff; stroke-width:2; }.chart-point-glow { fill:none; stroke:#9b7dff; opacity:.33; stroke-width:4; }.chart-x { display:flex; justify-content:space-between; padding-top:8px; color:#676b91; font:8px 'DM Mono',monospace; }.chart-legend { border-top:1px solid var(--border); padding-top:12px; margin-top:1px; display:flex; gap:22px; color:#777b9f; font-size:9px; }.legend-dot { width:6px; height:6px; border-radius:50%; display:inline-block; background:var(--violet); margin-right:5px; }.legend-dot.peak { background:var(--cyan); }.chart-legend strong { color:#d0c9ff; font-weight:500; margin-left:5px; }.quick-panel h3 { margin:9px 0 19px; font-size:20px; line-height:1.1; letter-spacing:-.05em; }.quick-links button { display:flex; width:100%; align-items:center; gap:10px; border-top:1px solid var(--border); padding:12px 0; background:none; text-align:left; }.quick-links button > span { width:23px; height:23px; display:grid; place-items:center; border-radius:6px; background:rgba(157,123,255,.12); color:var(--violet); }.quick-links strong { display:block; font-size:10px; font-weight:500; }.quick-links small { display:block; color:#6f7397; font-size:8px; margin-top:3px; }.quick-links b { margin-left:auto; color:#777b9f; font-weight:400; }
.page-intro { margin-bottom: 32px; }.page-intro h1 { font-size: 40px; }.page-intro p:last-child { color:#8387ad; font-size:12px; }.page-intro.compact { max-width:500px; }.toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:17px; }.search-field { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:6px; padding:8px 10px; width:250px; color:#73779c; }.search-field input { width:100%; outline:0; border:0; background:none; color:white; font-size:10px; }.search-field kbd { font:8px 'DM Mono',monospace; color:#73779c; white-space:nowrap; }.filter-pills { display:flex; gap:6px; }.filter { background:transparent; color:#8387ad; border:1px solid transparent; padding:7px 10px; border-radius:5px; font-size:10px; }.filter.active,.filter:hover { color:#e9e5ff; border-color:var(--border); background:rgba(126,95,255,.11); }.filter b { color:#696d91; font-weight:400; padding-left:5px; }.full-app-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.full-app-grid .app-card { min-height:230px; }.account-summary { display:flex; gap:12px; align-items:stretch; margin-bottom:17px; }.account-summary-card { flex:1; display:flex; align-items:center; gap:11px; padding:14px; border:1px solid var(--border); border-radius:8px; background:rgba(18,22,52,.64); }.account-summary-card strong { font-size:21px; letter-spacing:-.06em; }.account-summary-card p { margin:3px 0 0; color:#777b9f; font-size:9px; }.account-summary > .primary-btn { align-self:center; white-space:nowrap; }.account-panel { padding:20px 21px; }.vault-state { color:var(--green); font-size:9px; display:flex; gap:6px; align-items:center; }.account-table { margin-top:17px; }.account-row { display:grid; grid-template-columns: 2.2fr 1.8fr 1.3fr 1fr .7fr; align-items:center; border-top:1px solid var(--border); padding:13px 4px; }.account-row.header { color:#73779b; font-size:8px; letter-spacing:.1em; }.account-row:not(.header) { font-size:10px; }.account-app { display:flex; align-items:center; gap:9px; }.account-app .app-logo { width:25px; height:25px; border-radius:6px; font-size:10px; }.account-email { color:#a7a9c9; font-family:'DM Mono',monospace; font-size:9px; }.masked { color:#7b7f9e; letter-spacing:.16em; }.role-tag { padding:4px 6px; border-radius:4px; color:#a9a1ef; background:rgba(157,123,255,.11); font-size:8px; width:max-content; }.account-row button { background:none; color:#9993db; font-size:11px; text-align:right; }.infra-hero { padding:23px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.infra-hero h2 { font-size:22px; letter-spacing:-.05em; margin:10px 0 8px; }.infra-hero .live-pill { display:inline-flex; vertical-align:middle; margin-left:8px; }.muted { color:#777b9f; font-size:10px; margin:0; }.infra-uptime { text-align:right; }.infra-uptime strong { display:block; color:var(--green); font-size:28px; letter-spacing:-.07em; }.infra-uptime span { color:#777b9f; font-size:9px; }.infra-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }.resource-panel,.server-panel { min-height:279px; }.resource-donut { display:flex; gap:28px; align-items:center; justify-content:center; margin-top:27px; }.donut { width:146px; height:146px; display:grid; place-content:center; text-align:center; border-radius:50%; background:conic-gradient(#9d7bff 0 29.5%, #64dbff 29.5% 51.6%, #ffb86c 51.6% 69.7%, #73e0b0 69.7% 100%); position:relative; }.donut::before { content:""; position:absolute; inset:16px; background:#15183a; border-radius:50%; }.donut strong,.donut span { position:relative; z-index:1; }.donut strong { font-size:22px; letter-spacing:-.07em; }.donut span { color:#73779b; font-size:9px; margin-top:3px; }.resource-legend { display:flex; flex-direction:column; gap:13px; min-width:170px; }.resource-legend span { color:#9699bd; font-size:9px; }.resource-legend i { width:7px; height:7px; display:inline-block; border-radius:2px; margin-right:6px; }.resource-legend b { color:#e3e0fa; float:right; font-weight:500; }.server-metric { margin-top:23px; }.server-metric > div:first-child { display:flex; justify-content:space-between; font:9px 'DM Mono',monospace; color:#8286ab; }.server-metric strong { color:#c9cae3; font-weight:400; }.server-metric strong small { color:#676b91; margin-left:5px; }.server-bar { height:5px; margin-top:9px; }.server-bar i { background:linear-gradient(90deg,#73e0b0,#a2f2cc); }.server-bar.cyan i { background:linear-gradient(90deg,#64dbff,#99e7ff); }.server-bar.orange i { background:linear-gradient(90deg,#ffb86c,#ffe0af); }.server-footer { display:flex; justify-content:space-between; border-top:1px solid var(--border); margin-top:23px; padding-top:12px; color:#777b9f; font-size:9px; }.server-footer b { color:#d5d5ea; font-weight:400; margin-left:4px; }.alert-overview { display:flex; align-items:center; gap:28px; padding:17px 20px; margin-bottom:14px; border:1px solid rgba(255,184,108,.18); background:rgba(255,184,108,.05); border-radius:8px; }.overview-number strong { color:var(--orange); font-size:28px; letter-spacing:-.06em; }.overview-number span { color:#8589aa; font-size:9px; margin-left:8px; }.overview-line { display:flex; gap:21px; color:#9498ba; font-size:9px; }.legend-dot.orange { background:var(--orange); }.legend-dot.green { background:var(--green); }.alerts-list { padding:20px 22px; }.event-row { display:grid; grid-template-columns:27px 1fr 100px 105px; gap:12px; align-items:center; border-top:1px solid var(--border); padding:17px 0; }.event-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; }.event-row.warning .event-icon { color:var(--orange); background:rgba(255,184,108,.12); }.event-row.success .event-icon { color:var(--green); background:rgba(115,224,176,.1); }.event-row.info .event-icon { color:var(--violet); background:rgba(157,123,255,.12); }.event-row strong { font-size:10px; font-weight:500; }.event-row p { color:#777b9f; font-size:9px; margin:4px 0 0; }.event-row time { color:#72769a; font-size:9px; text-align:right; }.event-action { color:#a7a0eb; background:none; font-size:9px; text-align:right; }.settings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.setting-card { min-height:220px; padding:21px; }.setting-icon { width:35px; height:35px; display:grid; place-items:center; color:var(--violet); background:rgba(157,123,255,.13); border-radius:9px; font-size:19px; }.setting-card h3 { font-size:14px; margin:18px 0 8px; }.setting-card p { color:#7a7ea1; font-size:10px; line-height:1.55; min-height:37px; }.toggle-row { display:flex; justify-content:space-between; align-items:center; color:#9a9dbd; font-size:9px; border-top:1px solid var(--border); padding-top:13px; margin-top:12px; position:relative; }.toggle-row input { opacity:0; position:absolute; }.toggle-row i { display:block; width:26px; height:14px; border-radius:10px; background:#3b3e63; position:relative; }.toggle-row i::after { content:""; width:10px; height:10px; border-radius:50%; background:#8589aa; position:absolute; top:2px; left:2px; transition:.2s; }.toggle-row input:checked + i { background:rgba(115,224,176,.45); }.toggle-row input:checked + i::after { left:14px; background:var(--green); }.outline-btn { color:#aaa4e7; border:1px solid var(--border); border-radius:5px; padding:8px 10px; background:transparent; font-size:9px; }.outline-btn:hover { border-color:var(--violet); }
.toast { position:fixed; right:26px; bottom:24px; display:flex; gap:10px; align-items:center; padding:13px 16px; border:1px solid rgba(115,224,176,.25); background:#171b3d; border-radius:8px; box-shadow:var(--shadow); transform:translateY(20px); opacity:0; pointer-events:none; transition:.25s; z-index:10; }.toast.show { transform:translateY(0); opacity:1; }.toast > span { color:var(--green); }.toast strong { display:block; font-size:10px; }.toast p { color:#7c80a4; font-size:9px; margin:3px 0 0; }
@media (max-width: 1250px) { .main-content { padding:0 30px 50px; } .hero-orbit { margin-right:20px; } }

/* Light orbit theme: white workspace with planetary color accents. */
:root { --bg:#f4f7fc; --panel:rgba(255,255,255,.92); --panel-solid:#fff; --border:rgba(53,72,124,.14); --text:#1b2543; --muted:#627092; --faint:#8995b4; --violet:#6c5ce7; --violet2:#5443c2; --cyan:#159ec7; --green:#178d68; --orange:#c7791d; --shadow:0 18px 44px rgba(62,83,132,.11); }
html { background:var(--bg); color:var(--text); }
body { color:var(--text); background:radial-gradient(circle at 75% -10%,rgba(129,181,231,.24),transparent 30%),radial-gradient(circle at 20% 100%,rgba(255,206,140,.18),transparent 28%),var(--bg); }
.ambient { opacity:.32; filter:blur(74px); }.ambient-one { background:#aad8ea; }.ambient-two { background:#f6c78f; }
.grid-noise { opacity:.12; background-image:linear-gradient(rgba(81,105,155,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(81,105,155,.13) 1px,transparent 1px); }
.sidebar { background:rgba(255,255,255,.74); border-right-color:var(--border); box-shadow:8px 0 30px rgba(64,87,139,.04); }
.brand-name { color:#17213e; }.eyebrow,.section-kicker { color:#7280a3; }.workspace-chip { color:#435172; background:rgba(238,244,253,.86); border-color:var(--border); }.nav-item { color:#647092; }.nav-item:hover,.nav-item.active { color:#1b2543; background:linear-gradient(90deg,rgba(108,92,231,.13),rgba(108,92,231,.035)); }.nav-icon { color:#6c5ce7; }.nav-count { color:#7c89aa; }.security-card { background:rgba(226,249,240,.64); border-color:rgba(23,141,104,.2); }.security-card strong,.user-mini strong { color:#25304d; }.security-card p,.user-mini p { color:#8390ae; }.settings-link { color:#647092; }.user-mini { border-top-color:var(--border); }.more { color:#7f8baa; }
.topbar { border-bottom-color:var(--border); }.breadcrumbs { color:#7d89a5; }.breadcrumbs strong { color:#435071; }.sync-label { color:#7481a0; }.icon-btn { color:#627092; }.primary-btn { background:linear-gradient(110deg,#6c5ce7,#4e8ed0); box-shadow:0 8px 20px rgba(91,106,210,.2); }
.hero-row h1,.page-intro h1 { color:#17213e; }.hero-row h1 em,.page-intro h1 em { color:#527fb4; }.hero-copy,.page-intro p:last-child { color:#667493; }.hero-orbit::before { content:""; position:absolute; width:220px; height:220px; top:2px; left:44px; border-radius:50%; background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),rgba(183,220,237,.55) 22%,rgba(115,171,207,.32) 58%,rgba(105,131,186,.14) 74%,transparent 75%); opacity:.45; filter:blur(2px); }
.orbit { border-color:rgba(84,119,165,.32); }.orbit-b { border-color:rgba(190,139,60,.22); }.orbit-core { background:radial-gradient(circle,#6d99cb,#45648f 67%,transparent 68%); box-shadow:0 0 38px rgba(75,135,184,.34); }.core-logo { color:#fff; }.orbit-core small { color:#dbeafe; }.orbit-node { color:#557096; border-color:rgba(78,111,153,.22); background:rgba(255,255,255,.82); }.node-b { color:#1d8db2; }.node-c { color:#198d6d; }
.planet { position:absolute; display:block; border-radius:50%; z-index:2; box-shadow:inset -9px -8px 13px rgba(39,61,90,.2),0 8px 18px rgba(70,93,131,.16); }.planet-one { width:20px;height:20px;top:36px;right:56px;background:radial-gradient(circle at 32% 27%,#ffe0aa,#e89a55 58%,#b76743); }.planet-two { width:12px;height:12px;bottom:22px;right:70px;background:radial-gradient(circle at 30% 25%,#d8f7ff,#55bbd2 62%,#29869e); }.planet-three { width:9px;height:9px;top:121px;left:34px;background:#8f82dd;box-shadow:0 0 0 4px rgba(143,130,221,.12),0 4px 10px rgba(70,93,131,.15); }
.metric-card,.panel { background:linear-gradient(140deg,rgba(255,255,255,.96),rgba(249,251,255,.9)); border-color:var(--border); box-shadow:var(--shadow); }.metric-header { color:#7b87a4; }.metric-value { color:#1c2948; }.metric-value small,.metric-footer,.app-footer { color:#7c88a5; }.metric-icon.violet { color:#6c5ce7;background:rgba(108,92,231,.1); }.metric-icon.cyan { color:#159ec7;background:rgba(21,158,199,.1); }.metric-icon.green { color:#178d68;background:rgba(23,141,104,.1); }.metric-icon.orange { color:#c7791d;background:rgba(199,121,29,.1); }.progress-line { background:rgba(73,101,148,.14); }.progress-line i { background:linear-gradient(90deg,#3fb5c9,#6c5ce7); }.section-heading h2 { color:#1c2948; }.section-heading h2 span { color:#7d89a5; }.text-btn,.panel-link,.app-link { color:#5d6dc2; }
.app-card { background:rgba(255,255,255,.88); border-color:var(--border); box-shadow:0 8px 23px rgba(65,86,132,.06); }.app-card:hover { border-color:rgba(108,92,231,.38); box-shadow:0 14px 30px rgba(65,86,132,.13); }.app-meta { color:#7683a2; }.app-preview { border-color:rgba(70,96,141,.15); background:#edf3fa; }.preview-nav { border-bottom-color:rgba(70,96,141,.12); }.preview-side { background:rgba(108,92,231,.23); }.preview-title { opacity:.75; }.preview-blocks i { background:rgba(21,158,199,.16); }.preview-blocks i:nth-child(2){background:rgba(108,92,231,.16)}.preview-blocks i:nth-child(3){background:rgba(23,141,104,.16)}.app-path { color:#8a96b1; font:8px 'DM Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:9px; position:relative; }.app-status.online { color:var(--green); }.app-status.degraded { color:var(--orange); }.app-status.offline { color:#c55461; }.app-status.unpublished { color:#7b86a1; }.app-status.degraded i { background:var(--orange); }.app-status.offline i { background:#c55461; }.app-status.unpublished i { background:#8b95ad;box-shadow:none; }
.health-score > div:last-child strong,.alert-item strong,.panel-title h3,.quick-panel h3,.infra-hero h2,.setting-card h3 { color:#1f2b49; }.score-ring { background:conic-gradient(var(--green) 0 98%,rgba(23,141,104,.12) 98%); }.score-ring::before,.donut::before { background:#fff; }.score-ring span,.health-score p,.mini-bars > div,.mini-bars strong { color:#74819f; }.mini-bars i,.server-bar { background:#e3eaf3; }.mini-bars b,.server-bar i { background:linear-gradient(90deg,#55bf98,#75d6b0); }.alert-mark.orange { color:var(--orange);background:rgba(199,121,29,.11); }.alert-mark.violet { color:var(--violet);background:rgba(108,92,231,.1); }.alert-item p,.muted,.server-footer,.server-metric > div:first-child,.account-email { color:#7784a2; }.alert-count { color:var(--orange);background:rgba(199,121,29,.1); }.chart-legend,.chart-x,.chart-y { color:#7c88a5; }.performance-chart { background:repeating-linear-gradient(to bottom,rgba(84,105,145,.1) 0 1px,transparent 1px 45px); }.chart-area { fill:url(#chartFill); }.select-pill,.search-field { border-color:var(--border); color:#687694; }.quick-links button > span { background:rgba(108,92,231,.1); color:var(--violet); }.quick-links strong { color:#2b3755; }.quick-links small { color:#7c88a5; }.quick-links b { color:#7d89a5; }
.account-summary-card { background:rgba(255,255,255,.86); border-color:var(--border); }.account-summary-card strong { color:#1c2948; }.account-summary-card p { color:#7986a4; }.account-panel,.alerts-list,.setting-card,.infra-hero { background:linear-gradient(140deg,rgba(255,255,255,.97),rgba(249,251,255,.9)); }.account-row { border-top-color:var(--border); }.account-row.header { color:#7885a3; }.account-row:not(.header) strong { color:#293650; }.role-tag { color:#5f55bb;background:rgba(108,92,231,.09); }.account-health { font-size:8px;letter-spacing:.06em; }.account-health.online { color:var(--green); }.account-health.offline { color:#c55461; }.account-health.degraded { color:var(--orange); }.copy-account { background:none;color:#6f78be;font-size:11px;text-align:right; }.resource-legend span { color:#7784a2; }.resource-legend b { color:#283650; }.server-metric strong,.server-footer b { color:#34415e; }.event-row { border-top-color:var(--border); }.event-row strong { color:#293650; }.event-row p,.event-row time { color:#7784a2; }.event-action { color:#5d6dc2; }.setting-card p { color:#74819f; }.outline-btn { color:#5d6dc2;border-color:var(--border); }.toast { background:#fff;border-color:rgba(23,141,104,.25);box-shadow:0 14px 30px rgba(65,86,132,.18); }.toast strong { color:#293650; }.toast p { color:#7b87a4; }
.alert-mark.green { color:var(--green); background:rgba(23,141,104,.11); }
.live-connected .sync-dot { background:var(--green); }.live-fallback .sync-dot { background:var(--orange);box-shadow:0 0 10px rgba(199,121,29,.35); }.empty-state { padding:40px;text-align:center;color:#7a86a3;border:1px dashed var(--border);border-radius:9px; }