@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#f2f6fa;--panel:#fff;--panel2:#f5f8fb;--text:#12263f;--muted:#5d6e84;--line:#e1e8f0;
  --blue:#1593d4;--blue-d:#0d6ea3;--navy:#0f3557;--yellow:#f2b705;--maroon:#8a1f2b;--maroon-soft:#f6e0e2;--blue-soft:#dff1fb;--yellow-soft:#fdf1c8;
  --ok:#1c9a5e;--warn:#e08a00;--crit:#e4572e;--off:#6b7280;--info:#1593d4;
  --ok-soft:#dcf3e8;--warn-soft:#fdebc8;--crit-soft:#fbe0d8;--off-soft:#e8eaee;
  --shadow:0 1px 2px rgba(15,53,87,.05),0 8px 24px rgba(15,53,87,.06);--r:14px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
:root[data-theme=dark]{--bg:#0a1726;--panel:#112238;--panel2:#162b45;--text:#e7eef7;--muted:#9bb0c7;--line:#223a57;--blue:#43b4ec;--blue-d:#43b4ec;--navy:#0a1726;--maroon:#e57c88;--maroon-soft:#3a1d24;--blue-soft:#12354f;--yellow-soft:#3a3010;--ok:#4fcf92;--warn:#f0b04a;--crit:#ff8a67;--off:#9aa3b2;--ok-soft:#123a2a;--warn-soft:#3a2d10;--crit-soft:#3d1f17;--off-soft:#2a3344;--shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--bg:#0a1726;--panel:#112238;--panel2:#162b45;--text:#e7eef7;--muted:#9bb0c7;--line:#223a57;--blue:#43b4ec;--blue-d:#43b4ec;--navy:#0a1726;--maroon:#e57c88;--maroon-soft:#3a1d24;--blue-soft:#12354f;--yellow-soft:#3a3010;--ok:#4fcf92;--warn:#f0b04a;--crit:#ff8a67;--off:#9aa3b2;--ok-soft:#123a2a;--warn-soft:#3a2d10;--crit-soft:#3d1f17;--off-soft:#2a3344;--shadow:none}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.25;margin:0;letter-spacing:-.01em}h1{font-size:1.6rem;font-weight:800}h2{font-size:1.15rem;font-weight:800}h3{font-size:1rem;font-weight:700}
a{color:var(--blue-d)}p{margin:.3rem 0}
.muted{color:var(--muted)}.small{font-size:.82rem}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}.num{font-variant-numeric:tabular-nums}
button,.btn{font:inherit;font-weight:700;border:0;border-radius:10px;padding:.55rem 1rem;background:var(--blue);color:#fff;cursor:pointer;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
:root[data-theme=dark] button,:root[data-theme=dark] .btn{color:#06223a}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost,.btn.ghost{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
button.sm,.btn.sm{min-height:34px;padding:.3rem .75rem;font-size:.85rem}
button.danger{background:var(--panel);color:var(--crit);box-shadow:inset 0 0 0 1.5px var(--crit)}
input,select,textarea{font:inherit;width:100%;padding:.55rem .75rem;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);min-height:42px}
input:focus,select:focus,button:focus-visible,a:focus-visible,.tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
label{display:block;font-weight:600;font-size:.82rem;margin:.6rem 0 .2rem}
.card{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow);padding:1.1rem;border:1px solid var(--line)}
.row{display:flex;gap:.6rem;align-items:center}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}.stack>*+*{margin-top:.75rem}
.grid{display:grid;gap:.9rem}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chip{display:inline-block;padding:.1rem .6rem;border-radius:99px;font-size:.75rem;font-weight:800;background:var(--panel2);color:var(--muted);white-space:nowrap}
.chip.online,.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warning,.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.critical,.chip.bad{background:var(--crit-soft);color:var(--crit)}.chip.offline,.chip.inactive{background:var(--off-soft);color:var(--off)}
.chip.sim{background:var(--yellow-soft);color:#7a5a00}.chip.resmi{background:var(--blue-soft);color:var(--blue-d)}
:root[data-theme=dark] .chip.sim{color:#f2c94c}
.tablewrap{overflow:auto;border-radius:12px;border:1px solid var(--line);max-height:68vh;background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-size:.75rem;color:var(--muted);padding:.6rem .75rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel2);font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
td{padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--panel2)}
.bar{height:8px;border-radius:99px;background:var(--blue-soft);overflow:hidden;min-width:80px}.bar>i{display:block;height:100%;background:var(--blue);border-radius:99px}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);background:var(--navy);color:#fff;padding:.7rem 1.1rem;border-radius:12px;z-index:9999;max-width:90vw;font-weight:600;box-shadow:var(--shadow)}.toast.bad{background:var(--crit)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--off)}.dot.online{background:var(--ok)}.dot.warning{background:var(--warn)}.dot.critical{background:var(--crit)}.dot.offline{background:var(--off)}
/* brand */
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:inherit}
.brand img{width:40px;height:auto;display:block}
.badge-bapenda{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--navy),var(--blue-d));color:#fff;border-radius:8px 8px 14px 14px;padding:.18rem .55rem .25rem;line-height:1;border-bottom:3px solid var(--yellow)}
.badge-bapenda b{font-size:.78rem;letter-spacing:.12em;font-weight:800}.badge-bapenda small{font-size:.56rem;letter-spacing:.08em;opacity:.9;margin-top:2px}
.brand-t{line-height:1.15}.brand-t b{display:block;font-size:.92rem;font-weight:800}.brand-t span{font-size:.7rem;color:var(--muted)}
.simbar{background:var(--yellow-soft);color:#6b4f00;font-size:.78rem;font-weight:600;padding:.35rem 1rem;text-align:center;border-bottom:1px solid #ecd27a}
:root[data-theme=dark] .simbar{color:#f2c94c;border-color:#5c4a12}
.pwmodal{position:fixed;inset:0;background:rgba(5,15,28,.6);display:grid;place-items:center;z-index:999;padding:1rem}.pwmodal form{max-width:420px;width:100%}