:root{--ink:#1f3b32;--muted:#5d7068;--cream:#fffaf0;--cream2:#f4ecd9;--edge:#1d5c43;--sun:#ffd84d;--green:#2fbf71;--red:#ef5a5f;--fun:"Baloo 2", Poppins, "Segoe UI", sans-serif}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:#e9e2d0;margin:0;font-family:Poppins,Segoe UI,sans-serif}.hidden{display:none!important}button{font:700 15px var(--fun);color:var(--ink);cursor:pointer;background:linear-gradient(180deg, #fff, var(--cream2));border:3px solid var(--edge);box-shadow:0 3px 0 var(--edge);border-radius:14px;padding:5px 14px}button:active{box-shadow:0 1px 0 var(--edge);transform:translateY(2px)}button.primary{color:#fff;background:linear-gradient(#5ee09a,#22a35f);border-color:#146b3f;box-shadow:0 3px #146b3f}button.danger{background:linear-gradient(#ffd6d6,#ffb0b0);border-color:#8a2328;box-shadow:0 3px #8a2328}.top{background:var(--edge);color:#fff;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 24px;display:flex}.top h1{font:800 28px var(--fun);margin:4px 0 0}.pill{font:800 11px var(--fun);letter-spacing:.3em;background:#ffffff26;border-radius:20px;padding:2px 10px 1px 14px;display:inline-block}.top-right{align-items:center;gap:12px;display:flex}.conn{font:700 14px var(--fun);color:#ffd6d6}.conn.ok{color:#9ff0c4}main{max-width:1200px;margin:0 auto;padding:20px 16px 40px}.card{background:var(--cream);border:3px solid var(--edge);border-radius:20px;padding:18px 22px;box-shadow:0 5px #1d5c4380}.card h2{font:800 22px var(--fun);color:var(--edge);margin:0 0 8px}.login{gap:12px;max-width:380px;margin:40px auto;display:grid}.login label{gap:4px;font-size:14px;font-weight:600;display:grid}input{border:2px solid var(--edge);color:var(--ink);background:#fff;border-radius:12px;padding:8px 12px;font:500 16px Poppins,sans-serif}.err{color:#b8343a;min-height:1em;margin:0;font-size:13px}.bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.classes{flex-wrap:wrap;gap:8px;display:flex}.classes button.on{background:linear-gradient(180deg, #fff6c8, var(--sun))}.classes button small{color:var(--muted);margin-left:4px;font:600 12px Poppins,sans-serif}.actions{gap:8px;display:flex}.stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px;display:grid}.stat{background:var(--cream);border:3px solid var(--edge);border-radius:16px;padding:10px 14px;box-shadow:0 4px #1d5c4380}.stat b{font:800 30px/1.1 var(--fun);display:block}.stat span{color:var(--muted);font-size:13px;font-weight:600}.stat.live b{color:#1f8a52}.table-wrap{padding:6px 8px;overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;font:700 13px var(--fun);color:var(--muted);border-bottom:2px solid var(--cream2);white-space:nowrap;padding:8px 10px}td{vertical-align:middle;border-bottom:1px dashed #e6dbc0;padding:9px 10px}tr.off td{color:#8a978f}.dot{background:#c9c9c9;border-radius:50%;width:14px;height:14px;display:inline-block}.dot.on{background:var(--green);animation:1.6s infinite pulse;box-shadow:0 0 0 4px #2fbf7140}@keyframes pulse{50%{box-shadow:0 0 0 7px #2fbf7114}}.name{font-weight:700}.prog{min-width:190px}.prog .b{background:var(--cream2);border:1px solid #d9c58e;border-radius:6px;height:10px;margin-bottom:3px;overflow:hidden}.prog .b i{background:linear-gradient(90deg,#43d083,#2fbf71);height:100%;display:block}.prog small{color:var(--muted);font-size:12px}.badge{font:800 12px var(--fun);background:var(--cream2);border-radius:12px;padding:1px 9px;display:inline-block}.badge.good{color:#146b3f;background:#c9f3dc}.badge.mid{color:#7a5a14;background:#fff1b8}.badge.low{color:#8a2328;background:#ffd6d6}.empty{text-align:center;color:var(--muted);margin:0;padding:24px}.legend{color:var(--muted);margin-top:10px;font-size:12px}code{background:var(--cream2);border-radius:6px;padding:1px 6px}.back{color:#fff;font:700 14px var(--fun);opacity:.85;text-decoration:none}.back:hover{opacity:1;text-decoration:underline}.login{text-align:center}.login .pin{letter-spacing:.4em;text-align:center;padding:10px;font:700 26px Poppins,sans-serif}.login .hint a{color:var(--edge);font-weight:600}.top-right .back+.back{margin-left:4px}tr.belum td{color:#9aa79f}.login input{width:100%;min-width:0}