*{box-sizing:border-box;margin:0;padding:0}:root{--pln-blue: #005baa;--pln-cyan: #00a2e0;--pln-yellow: #f9c518;--bg: #f4f6fa;--card: #ffffff;--border: #e3e8ef;--text: #1a2233;--muted: #6b7688;--green: #16a34a;--amber: #d97706;--red: #dc2626}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.app{display:flex;min-height:100vh}.sidebar{width:250px;background:linear-gradient(180deg,var(--pln-blue),#003d73);color:#fff;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;margin-bottom:28px;padding:0 6px}.logo{font-size:30px;background:var(--pln-yellow);border-radius:10px;width:46px;height:46px;display:grid;place-items:center}.brand-title{font-weight:800;font-size:20px;letter-spacing:1px}.brand-sub{font-size:12px;opacity:.8}.sidebar nav{display:flex;flex-direction:column;gap:4px;flex:1}.sidebar nav a{padding:11px 14px;border-radius:8px;font-size:14px;opacity:.85;transition:.15s}.sidebar nav a:hover{background:#ffffff1f;opacity:1}.sidebar nav a.active{background:#fff3;opacity:1;font-weight:600}.sidebar-footer{border-top:1px solid rgba(255,255,255,.2);padding-top:14px}.user-info{margin-bottom:10px}.user-name{font-weight:600;font-size:14px}.user-role{font-size:12px;opacity:.75}.btn-logout{width:100%;padding:9px;background:#ffffff26;border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:13px}.btn-logout:hover{background:#ffffff47}.content{flex:1;padding:28px 32px;overflow-x:hidden}.page-title{font-size:24px;font-weight:700;margin-bottom:4px}.page-sub{color:var(--muted);margin-bottom:24px;font-size:14px}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:26px}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px}.stat-card .num{font-size:30px;font-weight:800}.stat-card .lbl{color:var(--muted);font-size:13px;margin-top:2px}.stat-card.blue{border-left:4px solid var(--pln-blue)}.stat-card.green{border-left:4px solid var(--green)}.stat-card.amber{border-left:4px solid var(--amber)}.stat-card.red{border-left:4px solid var(--red)}.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}.card h3{margin-bottom:14px;font-size:16px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 12px;font-size:13.5px;border-bottom:1px solid var(--border)}th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}tbody tr:hover{background:#f8fafc;cursor:pointer}.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}.badge.BELUM{background:#fee2e2;color:var(--red)}.badge.PROSES{background:#fef3c7;color:var(--amber)}.badge.SUDAH{background:#dcfce7;color:var(--green)}.badge.overdue{background:#dc2626;color:#fff}.badge.ok{background:#dcfce7;color:var(--green)}.toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}input,select,textarea{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit}input:focus,select:focus,textarea:focus{outline:2px solid var(--pln-cyan);border-color:transparent}.btn{padding:9px 16px;background:var(--pln-blue);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}.btn:hover{background:#004a8f}.btn.secondary{background:#eef2f7;color:var(--text)}.btn.secondary:hover{background:#e2e8f0}.btn.green{background:var(--green)}.btn.small{padding:6px 12px;font-size:13px}.btn:disabled{opacity:.5;cursor:not-allowed}.login-wrap{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,var(--pln-blue),var(--pln-cyan))}.login-card{background:#fff;padding:36px;border-radius:16px;width:380px;box-shadow:0 20px 60px #00000040}.login-card .logo-big{font-size:44px;text-align:center}.login-card h1{text-align:center;font-size:22px;margin:10px 0 4px}.login-card p.sub{text-align:center;color:var(--muted);margin-bottom:24px;font-size:14px}.login-card label{display:block;font-size:13px;margin-bottom:6px;font-weight:600}.login-card input{width:100%;margin-bottom:16px}.login-card .btn{width:100%}.error{color:var(--red);font-size:13px;margin-bottom:14px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{margin-bottom:12px}.field .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}.field .v{font-size:15px;margin-top:2px}.pdf-frame{width:100%;height:520px;border:1px solid var(--border);border-radius:8px}.tabs{display:flex;gap:6px;margin-bottom:14px}.tabs button{padding:8px 16px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;font-size:14px}.tabs button.active{background:var(--pln-blue);color:#fff;border-color:var(--pln-blue)}.back-link{color:var(--pln-blue);font-size:14px;margin-bottom:16px;display:inline-block}.chip{display:inline-block;background:#eef2f7;padding:4px 10px;border-radius:6px;font-size:12px;margin:2px}.muted{color:var(--muted)}.row-actions{display:flex;gap:8px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:900px){.detail-grid,.grid-2{grid-template-columns:1fr}}