:root{
--bg:#0b1020;
--card:#121a33;
--text:#e9ecff;
--muted:#9aa4d6;
--line:rgba(255,255,255,.08);
--ok:#35e0a1;
--warn:#ffcc66;
--bad:#ff6b6b;
--chip:#1a2550;
}

*{box-sizing:border-box}

body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
background:
radial-gradient(1200px 500px at 20% 0%, rgba(85,98,255,.25), transparent),
radial-gradient(1200px 500px at 80% 0%, rgba(53,224,161,.15), transparent),
var(--bg);
color:var(--text);
}

.wrap{max-width:1100px;margin:0 auto;padding:22px}

.top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

h1{margin:0;font-size:22px}
h2{margin:0;font-size:18px}

.muted{color:var(--muted);font-size:13px}

.pill{
background: rgba(255,255,255,.06);
border:1px solid var(--line);
padding:10px 12px;
border-radius:999px;
font-size:12px;
white-space:nowrap;
}

/* =========================
TOP RIGHT (LastUpdate + Login)
========================= */
.topRight{
display:flex;
align-items:center;
gap:10px;
}

/* =========================
LOGIN BUTTON (NEON)
========================= */
@keyframes softGlow {
0%,100% {
box-shadow:
0 0 0 1px rgba(53,224,161,.35),
0 12px 30px rgba(53,224,161,.25);
}
50% {
box-shadow:
0 0 0 2px rgba(53,224,161,.55),
0 18px 44px rgba(53,224,161,.4);
}
}

/* tombol login versi baru */
.loginBtn{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 16px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.3px;
text-decoration:none;
user-select:none;
color:#0b1020;

background: linear-gradient(
180deg,
rgba(53,224,161,.95),
rgba(53,224,161,.75)
);

border:1px solid rgba(53,224,161,.85);

box-shadow:
0 0 0 1px rgba(53,224,161,.35),
0 12px 30px rgba(53,224,161,.25);

animation: softGlow 3s ease-in-out infinite;

transition:
transform .15s ease,
filter .15s ease;
}

.loginBtn:hover{
transform: translateY(-1px) scale(1.03);
filter: brightness(1.05);
}

.loginDot{
width:8px;
height:8px;
border-radius:50%;
background:#0b1020;
box-shadow:0 0 0 4px rgba(11,16,32,.15);
}

/* kalau kamu MASIH pakai class lama pillLogin,
kita bikin dia ikut style neon juga (biar gak error / gak hilang) */
.pillLogin{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
text-decoration:none;
user-select:none;
cursor:pointer;
color:#0b1020;
font-weight:800;
letter-spacing:.3px;

background: linear-gradient(
180deg,
rgba(53,224,161,.95),
rgba(53,224,161,.75)
);
border:1px solid rgba(53,224,161,.85);

animation: softGlow 3s ease-in-out infinite;
}

/* ===== GRID SUMMARY ===== */
.grid{
margin-top:16px;
display:grid;
grid-template-columns: repeat(3, 1fr);
gap:12px;
}

/* ===== CARD BASE ===== */
.card{
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border:1px solid var(--line);
border-radius:16px;
padding:14px;
box-shadow: 0 12px 30px rgba(0,0,0,.2);
}

/* ===== SECTION SPACING + DIVIDER ===== */
section.card{
margin-top:16px;
}

/* garis halus di atas section card */
section.card::before{
content:"";
display:block;
height:1px;
background:linear-gradient(
to right,
transparent,
rgba(255,255,255,.08),
transparent
);
margin-bottom:12px;
}

.cardTitle{color:var(--muted);font-size:12px}
.big{font-size:34px;font-weight:800;margin-top:6px}

.row{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:10px;
}

/* ===== BADGE ===== */
.badge{
background: rgba(255,255,255,.06);
border:1px solid var(--line);
padding:6px 10px;
border-radius:999px;
font-size:12px;
white-space:nowrap;
}

.badge.ok{color:var(--ok)}
.badge.warn{color:var(--warn)}
.badge.bad{color:var(--bad)}

/* ===== CARD HEAD ===== */
.cardHead{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
margin-bottom:10px;
}

.table{
border-top:1px solid var(--line);
margin-top:10px;
}

/* ==============================
STATUS CHIP LAYOUT
============================== */
.chipCol{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}

.chipRow{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}

/* ===== ACCOUNT STATUS BADGE ===== */
.accBadge{
padding:2px 8px;
border-radius:999px;
font-size:11px;
font-weight:600;
display:inline-flex;
align-items:center;
line-height:1.4;
}
.accBadge.ok{background:rgba(34,197,94,.15);color:#22c55e;}
.accBadge.bad{background:rgba(239,68,68,.15);color:#ef4444;}
.accBadge.warn{background:rgba(234,179,8,.15);color:#eab308;}

/* ===== TABLE ROW ===== */
.trow{
display:grid;
grid-template-columns:60px 1fr auto;
gap:12px;
padding:12px 6px;
border-bottom:1px solid var(--line);
align-items:center;
}

.trow.head{
color:var(--muted);
font-size:12px;
padding:14px 6px;
}

/* ===== MAIN CELL ===== */
.mainCell{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.avatar{
width:34px;
height:34px;
border-radius:50%;
object-fit:cover;
border:1px solid var(--line);
background:rgba(255,255,255,.06);
flex:0 0 auto;
}

.info{
display:flex;
flex-direction:column;
min-width:0;
}

.title{
font-weight:800;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

.sub{
font-size:12px;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* ===== STATUS CHIP ===== */
.statusCell{
display:flex;
justify-content:flex-end;
white-space:nowrap;
}

.chip{
display:inline-flex;
align-items:center;
gap:6px;
padding:6px 10px;
border-radius:999px;
border:1px solid var(--line);
background:rgba(255,255,255,.04);
font-size:12px;
white-space:nowrap;
}

.dot{
width:8px;
height:8px;
border-radius:99px;
background:var(--muted);
}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}
.dot.idle{background:var(--warn)}
.dot.muted{background:rgba(148,163,184,.7)}

/* ===== MINI UPTIME CHART ===== */
.miniChart{margin-top:4px}

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

.miniFill{
height:100%;
border-radius:999px;
transition:width .35s ease;
}
.miniFill.ok{background:rgba(34,197,94,.85)}
.miniFill.warn{background:rgba(249,115,22,.85)}
.miniFill.idle{background:rgba(234,179,8,.85)}
.miniFill.bad{background:rgba(239,68,68,.85)}
.miniFill.muted{background:rgba(148,163,184,.55)}

.miniMeta{
display:flex;
justify-content:space-between;
margin-top:6px;
font-size:11px;
color:rgba(255,255,255,.55);
}
.miniVal{color:rgba(255,255,255,.75)}

/* ===== PROTECT CHECKLIST ===== */
.checksWrap{
display:flex;
justify-content:flex-end;
}
.checks{
display:flex;
flex-wrap:wrap;
gap:6px;
max-width:420px;
}
.check{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
font-size:11px;
border-radius:999px;
background:rgba(53,224,161,.15);
color:var(--ok);
border:1px solid rgba(53,224,161,.3);
white-space:nowrap;
}

/* =========================
FOOTER BRAND
========================= */
.footBrand{
margin-top: 32px;
padding: 14px 16px 22px;
border-top: 1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
font-size:12px;
color:rgba(255,255,255,.55);
}

.footLeft{display:flex;align-items:center;gap:6px;}
.footLeft .brand{font-weight:600;font-size:12px;color:rgba(255,255,255,.75);}
.footLeft .tag{font-size:11px;opacity:.6;}

.footRight{display:flex;gap:10px;font-size:11px;opacity:.6;}
.sec{white-space:nowrap}

/* =========================
RESPONSIVE
========================= */
@media (max-width:920px){
.grid{grid-template-columns:1fr}
}

@media (max-width:720px){
.wrap{padding:18px}
section.card{margin-top:20px}

.trow{grid-template-columns:1fr;gap:10px;}

.statusCell,.checksWrap{justify-content:flex-start;}
.chipCol{align-items:flex-start;}
.chipRow{justify-content:flex-start;}
.checks{max-width:none;}

.footBrand{
flex-direction:column;
text-align:center;
gap:6px;
margin-top:36px;
}
}

@media (max-width:520px){
.top{align-items:flex-start;}
.topRight{
flex-direction:column;
align-items:flex-end;
gap:8px;
}
.loginBtn,.pillLogin{
padding:9px 14px;
font-size:11px;
}
}

/* =========================
Countdown refresh states
========================= */
#refresh.ok{color: var(--ok);border-color: rgba(53,224,161,.4);}
#refresh.warn{color: var(--warn);border-color: rgba(234,179,8,.4);}
#refresh.bad{color: var(--bad);border-color: rgba(239,68,68,.4);}

/* animasi kecil pas refresh */
#refresh.pulse{animation: pulseRing .45s ease;}

@keyframes pulseRing{
0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.0); transform: translateZ(0) scale(1); }
50%{ box-shadow: 0 0 0 6px rgba(255,255,255,.10); transform: translateZ(0) scale(1.02); }
100%{ box-shadow: 0 0 0 0 rgba(255,255,255,.0); transform: translateZ(0) scale(1); }
}