:root{
--bg:#0b0f17;
--card:#121826;
--border:#1f2937;
--text:#e6edf3;
--muted:#94a3b8;
--green:#22c55e;
--yellow:#facc15;
--red:#ef4444;
--blue:#3b82f6;
--purple:#8b5cf6;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,sans-serif}

body{
background:var(--bg);
color:var(--text);
padding:60px 20px;
position:relative;
overflow-x:hidden;
}

/* Ambient background */
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(59,130,246,.15),transparent 40%),
radial-gradient(circle at 80% 10%,rgba(139,92,246,.15),transparent 40%);
z-index:-2;
}

body::after{
content:"";
position:fixed;
inset:0;
background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
background-size:40px 40px;
z-index:-1;
opacity:.4;
}

/* Floating blur orb */
.orb{
position:fixed;
width:400px;
height:400px;
background:radial-gradient(circle,#3b82f6,transparent 60%);
filter:blur(120px);
top:-100px;
right:-100px;
opacity:.25;
animation:float 12s infinite alternate ease-in-out;
z-index:-1;
}

@keyframes float{
0%{transform:translateY(0px)}
100%{transform:translateY(40px)}
}

.header{
text-align:center;
margin-bottom:50px;
}

.header h1{
font-size:32px;
margin-bottom:8px;
background:linear-gradient(90deg,#3b82f6,#8b5cf6,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.header p{
color:var(--muted);
font-size:14px;
}

.live-badge{
display:inline-flex;
align-items:center;
gap:6px;
margin-top:10px;
font-size:12px;
color:#22c55e;
}

.live-dot{
width:8px;
height:8px;
background:#22c55e;
border-radius:50%;
animation:pulse 1.6s infinite;
}

@keyframes pulse{
0%{opacity:.3}
50%{opacity:1}
100%{opacity:.5}
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:30px;
max-width:1150px;
margin:auto;
}

.card{
background:linear-gradient(180deg,#161b22,#111827);
border:1px solid var(--border);
border-radius:24px;
padding:30px;
position:relative;
overflow:hidden;
backdrop-filter:blur(10px);
box-shadow:0 25px 70px rgba(0,0,0,.7);
transition:.4s ease;
animation:fadeUp .8s ease;
}

@keyframes fadeUp{
from{opacity:0;transform:translateY(30px)}
to{opacity:1;transform:translateY(0)}
}

.card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.04),transparent);
opacity:.6;
pointer-events:none;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 35px 90px rgba(0,0,0,.9);
border-color:#3b82f6;
}

.card.offline{
opacity:.55;
filter:grayscale(.8);
}

.card h3{
margin-bottom:22px;
display:flex;
align-items:center;
gap:12px;
font-size:18px;
}

.status-dot{
width:10px;
height:10px;
border-radius:50%;
box-shadow:0 0 12px currentColor;
animation:pulse 1.6s infinite;
}

.online{background:var(--green);color:var(--green)}
.off{background:#6b7280;color:#6b7280}

.metric-label{
font-size:13px;
color:var(--muted);
margin-bottom:8px;
display:flex;
justify-content:space-between;
}

.bar{
height:14px;
background:rgba(255,255,255,.08);
border-radius:999px;
overflow:hidden;
}

.fill{
height:100%;
width:0%;
border-radius:999px;
transition:width 1.4s cubic-bezier(.4,0,.2,1);
position:relative;
overflow:hidden;
}

.fill::after{
content:"";
position:absolute;
top:0;
left:-40%;
width:40%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
animation:flow 3s infinite;
}

@keyframes flow{
from{left:-40%}
to{left:120%}
}

.green{
background:linear-gradient(90deg,#22c55e,#4ade80);
box-shadow:0 0 25px rgba(34,197,94,.5);
}

.yellow{
background:linear-gradient(90deg,#facc15,#fde047);
box-shadow:0 0 25px rgba(250,204,21,.5);
}

.red{
background:linear-gradient(90deg,#ef4444,#f87171);
box-shadow:0 0 30px rgba(239,68,68,.6);
}

.status-text{
margin-top:16px;
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
gap:8px;
}

.available{color:var(--green)}
.limited{color:var(--yellow)}
.full{color:var(--red)}
.offline-text{color:#6b7280}

.uptime{
margin-top:12px;
font-size:12px;
color:var(--muted);
}