*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:#f4f6f4;color:#1a1a1a}
.login-wrap{display:flex;min-height:100vh}.login-brand{flex:1;background:#0F7A4D;color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:center;text-align:center}.login-brand img{width:150px;height:150px;object-fit:contain;background:transparent;margin:0 auto 16px}.login-brand h1{font-size:30px;line-height:1.2;margin:8px 0}.brand-info{margin-top:20px;background:rgba(255,255,255,.15);padding:12px;border-radius:10px}
.login-form{flex:1;padding:48px;max-width:520px;margin:auto}.login-form input,.login-form select{width:100%;padding:12px;margin:6px 0 14px;border:1px solid #ddd;border-radius:10px}.btn-primary{background:#0F7A4D;color:#fff;border:0;padding:12px 18px;border-radius:10px;cursor:pointer;font-weight:700;text-decoration:none;display:inline-block}.btn{background:#eee;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none;color:#111;display:inline-block}.demo-box{margin-top:18px;background:#f7f7f7;padding:14px;border-radius:12px}.demo-box button{margin:4px;padding:8px 12px;border-radius:8px;border:1px solid #ddd;cursor:pointer;background:#fff}
.alert{background:#fff3cd;padding:12px;border-radius:10px;margin:12px 0}.alert.green{background:#d4edda}.layout{display:flex;min-height:100vh}.sidebar{width:270px;background:#0F2E22;color:#fff;padding:20px;display:flex;flex-direction:column;gap:4px}.sidebar a{color:#d6efe2;text-decoration:none;padding:10px 12px;border-radius:10px;display:block}.sidebar a.active,.sidebar a:hover{background:#0F7A4D;color:#fff}.side-logo{display:flex;gap:10px;align-items:center;margin-bottom:14px}.side-logo img{width:44px;height:44px;object-fit:contain}.side-logo span{display:block;font-size:12px;color:#9fd8b8}.side-user{margin-top:auto;background:rgba(255,255,255,.1);padding:12px;border-radius:10px}.logout{color:#ffd166!important}.main{flex:1;padding:28px;max-width:1020px}.cards{display:flex;gap:12px;flex-wrap:wrap}.card{background:#fff;padding:18px;border-radius:14px;min-width:160px;box-shadow:0 2px 10px rgba(0,0,0,.06);flex:1}.card h3{margin:0;font-size:28px;color:#0F7A4D}.ujian-card,.soal,.peng{background:#fff;padding:16px;border-radius:14px;margin:12px 0;box-shadow:0 2px 8px rgba(0,0,0,.05)}.badge{background:#e8f5e9;color:#0F7A4D;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:700}.badge.red{background:#f8d7da;color:#721c24}.badge.yellow{background:#fff3cd;color:#856404}.badge.green{background:#d4edda}table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}th,td{padding:12px;text-align:left;border-bottom:1px solid #eee}th{background:#0F7A4D;color:#fff}code{background:#f1f1f1;padding:2px 8px;border-radius:6px}.install-wrap{max-width:640px;margin:40px auto;background:#fff;padding:28px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.08)}.install-wrap img{width:110px;display:block;margin:0 auto 10px}.install-wrap input{width:100%;padding:11px;margin:6px 0 12px;border:1px solid #ddd;border-radius:10px}.progress{height:10px;background:#eee;border-radius:20px;overflow:hidden}.progress div{height:100%;background:#0F7A4D}
@media(max-width:820px){.login-wrap,.layout{flex-direction:column}.sidebar{width:100%}.login-form{padding:24px}}