:root { color-scheme: dark; --bg:#090b10; --panel:rgba(22,25,34,.74); --line:rgba(255,255,255,.08); --muted:#8c93a3; --text:#f4f6fb; --green:#50e3a4; --red:#ff6b7a; --accent:#7c8cff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -20%,#1c2232 0,var(--bg) 45%); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ambient { position:fixed; width:420px; height:420px; border-radius:50%; filter:blur(120px); opacity:.08; pointer-events:none; }
.ambient-one { background:#6775ff; top:-150px; right:5%; }.ambient-two { background:#26dca0; bottom:-250px; left:-100px; }
main { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:54px 0 80px; }
.hidden { display:none!important; }.panel { background:var(--panel); border:1px solid var(--line); box-shadow:0 22px 60px rgba(0,0,0,.2); backdrop-filter:blur(18px); }
header { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:60px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:7px; font-size:clamp(2rem,5vw,3.5rem); line-height:1; letter-spacing:-.055em; } h2 { margin:0; font-size:1.45rem; letter-spacing:-.03em; } h3 { margin:22px 0 5px; font-size:1.15rem; }
.eyebrow { margin:0 0 12px; color:#8790ff; font-size:.68rem; font-weight:750; letter-spacing:.16em; }.muted { color:var(--muted); }.header-actions,.node-tools { display:flex; align-items:center; gap:12px; }.updated { color:var(--muted); font-size:.8rem; }
button,input { font:inherit; } button { border:0; cursor:pointer; }.icon-button,.text-button { color:#c9ceda; background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:10px; height:38px; }.icon-button { width:38px; font-size:1.35rem; }.text-button { padding:0 15px; }.icon-button:hover,.text-button:hover { color:white; background:rgba(255,255,255,.1); }.spinning { animation:spin .7s linear infinite; } @keyframes spin { to{transform:rotate(360deg)} }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:18px; }.summary-pill { border:1px solid rgba(80,227,164,.22); background:rgba(80,227,164,.07); color:var(--green); border-radius:999px; padding:7px 12px; font-size:.76rem; }.summary-pill.has-error { color:var(--red); border-color:rgba(255,107,122,.22); background:rgba(255,107,122,.07); }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.service-card { min-height:194px; padding:20px; border-radius:17px; color:inherit; text-decoration:none; animation:rise .4s both; animation-delay:var(--delay); transition:transform .2s,border-color .2s,background .2s; }.service-card[href]:hover { transform:translateY(-3px); border-color:rgba(124,140,255,.35); background:rgba(28,32,44,.88); }.service-card p { color:var(--muted); font-size:.84rem; }.service-top,.service-meta { display:flex; justify-content:space-between; align-items:center; }.service-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,rgba(124,140,255,.3),rgba(124,140,255,.08)); color:#dce0ff; font-weight:750; }.status-dot { width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 5px rgba(255,255,255,.03); }.status-dot.online { background:var(--green); box-shadow:0 0 12px rgba(80,227,164,.6); }.status-dot.offline { background:var(--red); }.service-meta { margin-top:27px; padding-top:13px; border-top:1px solid var(--line); color:#abb1bf; font-size:.72rem; }
.system-section { margin-top:54px; }.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.metric-card { min-height:156px; padding:20px; border-radius:17px; }.metric-card .metric-label { color:var(--muted); font-size:.76rem; }.metric-card strong { display:block; margin-top:17px; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }.metric-card small { display:block; margin-top:9px; color:#8c93a3; font-size:.7rem; }.meter { height:5px; margin-top:20px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.06); }.meter span { display:block; height:100%; border-radius:inherit; transition:width .35s ease; }.meter .normal { background:var(--green); }.meter .warning { background:#f0b85a; }.meter .critical { background:var(--red); }.metric-unavailable { grid-column:1/-1; padding:28px; border-radius:17px; color:var(--muted); text-align:center; }
.nodes-section { margin-top:54px; }.node-tools input { width:210px; padding:9px 12px; color:var(--text); border:1px solid var(--line); border-radius:10px; outline:0; background:rgba(255,255,255,.04); }.node-tools input:focus { border-color:rgba(124,140,255,.7); box-shadow:0 0 0 3px rgba(124,140,255,.1); }.table-wrap { border-radius:17px; overflow:auto; } table { width:100%; border-collapse:collapse; text-align:left; } th { padding:14px 18px; color:#777f90; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:650; } td { padding:17px 18px; border-top:1px solid var(--line); color:#c4c9d4; font-size:.84rem; vertical-align:middle; } td strong { display:block; color:#f2f4f8; } td small { display:block; color:#737b8b; margin-top:4px; }.ip-list { display:flex; flex-direction:column; align-items:flex-start; gap:5px; } code { padding:3px 6px; border-radius:5px; color:#cdd3ff; background:rgba(124,140,255,.08); font-size:.73rem; }.state { display:inline-flex; gap:7px; align-items:center; }.state i { width:6px; height:6px; border-radius:50%; }.state.online { color:var(--green); }.state.online i { background:var(--green); }.state.offline { color:#9299a8; }.state.offline i { background:#646b78; }.tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }.tags span { padding:2px 6px; color:#9da5b7; background:rgba(255,255,255,.05); border-radius:4px; font-size:.65rem; }.empty { height:120px; text-align:center; color:var(--muted); }.inline-error,.form-error { color:var(--red); font-size:.8rem; }.inline-error { margin:12px 3px; }
.login-wrap { min-height:calc(100vh - 134px); display:grid; place-items:center; }.login-card { width:min(420px,100%); padding:38px; border-radius:22px; }.brand-mark { display:grid; place-items:center; width:42px; height:42px; margin-bottom:32px; border-radius:13px; background:linear-gradient(135deg,#8995ff,#5361e9); box-shadow:0 8px 30px rgba(83,97,233,.3); font-weight:800; }.login-card h1 { font-size:2.3rem; }.login-card form { margin-top:32px; }.login-card label { display:block; margin-top:16px; color:#aab0bd; font-size:.78rem; }.login-card input { display:block; width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line); border-radius:10px; outline:0; color:white; background:rgba(0,0,0,.2); }.login-card input:focus { border-color:var(--accent); }.login-card button { width:100%; margin-top:14px; padding:12px; border-radius:10px; color:white; background:linear-gradient(135deg,#7987ff,#5967e8); font-weight:700; }.login-card button:disabled { opacity:.55; }.form-error { min-height:18px; margin:10px 0 0; }
@keyframes rise { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media(max-width:900px){.service-grid,.metric-grid{grid-template-columns:repeat(2,1fr)} table{min-width:800px}}
@media(max-width:600px){main{width:min(100% - 24px,1180px);padding-top:28px}header{align-items:flex-start;flex-direction:column;margin-bottom:42px}.header-actions{width:100%;}.updated{margin-right:auto}.section-heading.nodes-heading{align-items:flex-start;flex-direction:column}.node-tools{width:100%;justify-content:space-between}.node-tools input{width:190px}.service-grid{grid-template-columns:1fr 1fr;gap:9px}.service-card{min-height:180px;padding:16px}.service-meta{align-items:flex-start;flex-direction:column;gap:3px}.login-card{padding:28px}}
@media(max-width:400px){.service-grid,.metric-grid{grid-template-columns:1fr}}