@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#0c0d18;--panel:#151729;--panel2:#1b1e34;--line:rgba(255,255,255,.08);--muted:#969ab6;--text:#f6f5ff;--purple:#a78bfa;--blue:#60a5fa;--green:#34d399;--amber:#fbbf24}
*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}
.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;flex-shrink:0;border-right:1px solid var(--line);padding:27px 18px;display:flex;flex-direction:column;background:#101221;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:11px;font-family:Manrope,sans-serif;font-size:17px;margin:0 0 55px 8px}.brand small{display:block;font:600 9px 'DM Sans';letter-spacing:2px;color:var(--muted);margin-top:3px}.brand-mark{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#a78bfa,#6366f1 60%,#38bdf8);font:800 24px Manrope;color:#fff;box-shadow:0 8px 30px #8065e64a}.brand-mark.small{width:38px;height:38px;font-size:20px;border-radius:12px}.nav-label,.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;color:#777d9e}.nav-label{margin:0 0 13px 12px}.nav-item{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:11px;color:#aeb1c8;font-size:13px;margin-bottom:5px}.nav-item span{font-size:18px}.nav-item i{margin-left:auto;font-style:normal}.nav-item.active,.nav-item:hover{background:linear-gradient(100deg,#7660d52b,#3d8fcb16);color:#fff}.sidebar-bottom{margin-top:auto}.user-chip{display:flex;align-items:center;gap:10px;padding:13px 8px;border-top:1px solid var(--line)}.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#2563eb);display:grid;place-items:center;font-weight:700}.user-chip b,.user-chip small{display:block;font-size:12px}.user-chip small{font-size:10px;color:var(--muted);margin-top:3px}.logout{border:0;background:none;color:#aeb1c8;font:inherit;font-size:12px;padding:8px;cursor:pointer}.main{margin-left:248px;width:calc(100% - 248px);max-width:1600px;padding:31px 42px 20px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.topbar h1{font:700 27px Manrope;margin:6px 0 0}.top-right{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.live-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px #34d3991a;display:inline-block}.welcome{position:relative;overflow:hidden;min-height:235px;padding:31px 36px;border:1px solid #a78bfa25;border-radius:20px;background:radial-gradient(circle at 78% 25%,#6d4ddc66,transparent 33%),linear-gradient(115deg,#252047,#1d2850 65%,#17334b);display:flex;justify-content:space-between;align-items:center}.welcome .eyebrow{color:#c5b8ff}.welcome h2{font:800 clamp(24px,3vw,34px) Manrope;line-height:1.2;margin:12px 0}.welcome h2 em{font-style:normal;color:#b9a7ff}.welcome p{color:#c1c3dc;font-size:12px;margin:0 0 21px}.primary{display:inline-flex;align-items:center;gap:22px;border:0;border-radius:10px;padding:12px 16px;background:linear-gradient(100deg,#9b75f5,#5478ee);color:white;font:700 12px 'DM Sans';box-shadow:0 8px 24px #6d5bdc45;cursor:pointer}.primary span{font-size:16px}.welcome-art{width:260px;height:190px;position:relative;display:grid;place-items:center}.cloud-icon{font-size:85px;color:#e3d9ff;text-shadow:0 0 38px #bba7ff;z-index:1}.glass-orbit{position:absolute;border:1px solid #d9d2ff42;border-radius:50%;transform:rotate(-24deg)}.orbit-one{width:245px;height:100px}.orbit-two{width:205px;height:145px;transform:rotate(48deg)}.float-card{position:absolute;right:-4px;bottom:13px;padding:10px 14px;border:1px solid #ffffff25;background:#ffffff19;backdrop-filter:blur(15px);border-radius:10px;font-size:10px;color:#e8e4ff}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:29px 0 15px}.section-head h2{font:700 19px Manrope;margin:5px 0 0}.refresh-tag,.pill{font-size:10px;color:#b9bdd5;background:#ffffff08;border:1px solid var(--line);padding:7px 10px;border-radius:20px}.refresh-tag .live-dot{margin-right:7px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.metric-card,.panel{border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,#191c30,#141626);padding:17px}.metric-head{display:flex;justify-content:space-between;align-items:center;color:#b8bbd1;font-size:11px}.metric-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:15px}.purple{color:var(--purple)}.blue{color:var(--blue)}.green{color:var(--green)}.amber{color:var(--amber)}.metric-icon.purple{background:#a78bfa18}.metric-icon.blue{background:#60a5fa18}.metric-icon.green{background:#34d39918}.metric-icon.amber{background:#fbbf2418}.metric-value{display:flex;align-items:baseline;gap:4px;margin:13px 0 12px}.metric-value strong{font:700 29px Manrope;letter-spacing:-1px}.metric-value small{font-size:12px;color:var(--muted)}.uptime-value strong{font-size:22px}.bar{height:5px;background:#ffffff12;border-radius:8px;overflow:hidden}.bar span{display:block;height:100%;width:0;border-radius:8px;transition:width .5s}.purple-bar{background:linear-gradient(90deg,#8b5cf6,#c4b5fd)}.blue-bar{background:linear-gradient(90deg,#3b82f6,#7dd3fc)}.green-bar{background:linear-gradient(90deg,#10b981,#6ee7b7)}.metric-foot{display:flex;justify-content:space-between;gap:5px;margin-top:10px;font-size:9px;color:#858aa8}.metric-foot b{font-weight:600;color:#c4c6d9}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}.panel{padding:19px}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel h3{font:700 15px Manrope;margin:5px 0 0}.load-values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:23px 0 15px}.load-values div{padding:12px;background:#ffffff06;border-radius:10px}.load-values small,.network-values small{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}.load-values b{font:700 21px Manrope}.panel-note{color:#8186a2;font-size:10px;line-height:1.6;margin:0}.network-values{display:flex;gap:35px;margin:23px 0 18px}.network-values>div{display:flex;gap:10px;align-items:center}.net-arrow{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:17px}.net-arrow.up{background:#a78bfa19;color:var(--purple)}.net-arrow.down{background:#60a5fa19;color:var(--blue)}.network-values b{font:700 18px Manrope}footer{padding:24px 3px 0;color:#6e7390;font-size:10px}footer span{margin:0 5px}
.login-page{min-height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#28234f 0%,#111326 48%,#090a13 100%)}.orb{position:fixed;border-radius:50%;filter:blur(2px);opacity:.22}.orb-a{width:360px;height:360px;background:#7c3aed;top:-130px;left:-90px}.orb-b{width:420px;height:420px;background:#2563eb;right:-150px;bottom:-190px}.login-card{position:relative;width:min(420px,calc(100% - 32px));padding:39px;border:1px solid #ffffff1b;border-radius:22px;background:#17192bdc;box-shadow:0 25px 100px #0008;backdrop-filter:blur(22px)}.login-card .brand-mark{margin-bottom:22px}.login-card h1{font:800 27px Manrope;margin:9px 0}.muted{color:#999eb8;font-size:12px;margin:0 0 25px}.login-card label{display:block;font-size:11px;color:#c4c6d8;margin:15px 0 7px}.login-card input:not([type=hidden]){width:100%;padding:13px 14px;background:#0e1020;border:1px solid #ffffff1c;border-radius:9px;color:white;outline:none;font:13px 'DM Sans'}.login-card input:focus{border-color:#9b83f6}.full{width:100%;justify-content:center;margin-top:23px}.tiny{font-size:10px;color:#747995;margin-top:24px}.center{text-align:center}.alert{background:#ef44441c;border:1px solid #ef44444a;color:#fecaca;padding:10px;border-radius:8px;font-size:12px}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.main{padding:27px 25px}.sidebar{width:215px}.main{margin-left:215px;width:calc(100% - 215px)}}@media(max-width:700px){.sidebar{position:relative;width:100%;height:auto;padding:13px 15px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0}.nav-label,.nav-item,.sidebar-bottom{display:none}.app-shell{display:block}.main{margin:0;width:100%;padding:22px 15px}.topbar h1{font-size:23px}.welcome{padding:25px 22px;min-height:210px}.welcome-art{display:none}.welcome p{max-width:260px;line-height:1.6}.metric-grid{gap:9px}.metric-card{padding:13px}.metric-value strong{font-size:25px}.lower-grid{grid-template-columns:1fr}.section-head{align-items:start;gap:10px;flex-direction:column}.refresh-tag{align-self:start}.top-right{font-size:0}.top-right .avatar{display:none}.login-card{padding:29px}}