:root{--navy:#081a35;--blue:#2463ec;--ink:#11203a;--muted:#728198;--line:#e8edf4;--bg:#f4f7fb}*{box-sizing:border-box}body{margin:0;font:14px Inter,Arial,sans-serif;color:var(--ink);background:var(--bg)}.login{display:grid;grid-template-columns:1.08fr .92fr;min-height:100vh}.login-visual{position:relative;overflow:hidden;color:#fff}.putrajaya{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.veil{position:absolute;inset:0;background:linear-gradient(90deg,#061631eF,#0b2861a9,#0b285020)}.login-brand,.tagline{position:relative;z-index:1}.login-brand{padding:45px 8%;}.login-brand img{width:135px;height:60px;object-fit:contain;object-position:left}.tagline{margin:22vh 11%;max-width:540px;padding:28px;background:#061731ad;border:1px solid #ffffff28;border-radius:20px;backdrop-filter:blur(4px)}.tagline h1{font-size:48px;line-height:1.05;margin:0 0 15px}.tagline p{font-size:17px;line-height:1.6;margin:0;color:#edf4ff}.login-panel{display:grid;place-items:center;background:#fff;padding:32px}.login-card{width:min(390px,100%)}.eyebrow,header>div>span{color:var(--blue);font-size:11px;font-weight:800;letter-spacing:1.3px}.login-card h2{font-size:31px;margin:10px 0}.login-card>p{color:var(--muted);margin:0 0 25px}label{display:grid;gap:7px;font-weight:700;margin:12px 0}input,select,textarea{padding:11px 12px;border:1px solid #dce5ef;border-radius:9px;background:#fff;font:inherit;color:var(--ink)}textarea{min-height:92px;resize:vertical}label small,td small{display:block;color:var(--muted);font-weight:400}.primary{display:inline-block;border:0;border-radius:9px;background:linear-gradient(135deg,#326cff,#1645ce);color:#fff;padding:12px 17px;text-decoration:none;font-weight:800;cursor:pointer}.login-card .primary{width:100%;margin-top:12px}.alert,.notice{padding:12px;border-radius:9px;margin:12px 0}.alert,.error{background:#ffeced;color:#b9344a}.success{background:#e4f8ef;color:#087452}.side{position:fixed;inset:0 auto 0 0;width:245px;background:var(--navy);display:flex;flex-direction:column;padding:23px 14px;color:#c5d1e5}.side-logo{padding:5px 10px 25px}.side-logo img{width:118px;height:45px;object-fit:contain;object-position:left}.side nav{display:grid;gap:5px}.side nav a{color:#b6c3d9;text-decoration:none;padding:12px;border-radius:9px}.side nav a.active,.side nav a:hover{background:#ffffff13;color:#fff}.user{display:flex;gap:9px;align-items:center;margin-top:auto;padding:15px 9px;border-top:1px solid #ffffff22}.user>span{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e86e68;color:white;font-weight:800}.user small{display:block;color:#90a3bf;margin-top:3px}.user a{margin-left:auto;color:#9eb0ca;text-decoration:none;font-size:18px}.content{margin-left:245px;padding:32px;max-width:1550px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}header h1{font-size:28px;margin:5px 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:18px}.stats article,.card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px #20365608}.stats article{padding:18px}.stats small{display:block;color:var(--muted);font-weight:700;font-size:11px}.stats strong{display:block;font-size:30px;margin:12px 0 3px}.stats em{font-style:normal;color:#168661;font-size:12px}.card{margin:18px 0}.card-head{padding:17px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}h2{font-size:16px;margin:0}.card-head>a,.edit{color:var(--blue);font-weight:700;text-decoration:none}.form-grid{padding:18px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 15px}.wide{grid-column:1/-1}.actions{text-align:right}.filter{display:flex;gap:7px;margin:0}.filter input,.filter select,.filter button{padding:8px;font-size:12px}.filter button{border:0;border-radius:8px;background:#eef2f7;color:#36506c;font-weight:700}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px}th{text-align:left;color:#7c8ba0;background:#fbfcfe;padding:12px 20px;font-size:11px}td{padding:13px 20px;border-top:1px solid var(--line);vertical-align:middle}td b,td small{display:block}.bar{display:inline-block;vertical-align:middle;width:75px;height:6px;border-radius:5px;background:#e8eef6;margin-right:6px;overflow:hidden}.bar i{display:block;height:100%;background:#3370fb}.pill{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:800}.progress{background:#e4efff;color:#265bd4}.approve{background:#dff7ec;color:#087653}.query{background:#fff2d7;color:#a16400}.cancel{background:#ffeaed;color:#c53f53}.close{background:#edf0f4;color:#57667b}.empty{text-align:center;color:var(--muted);padding:30px}@media(max-width:800px){.login{grid-template-columns:1fr}.login-visual{min-height:36vh}.login-panel{min-height:64vh}.tagline{display:none}.side{position:static;width:auto;height:64px;flex-direction:row;align-items:center;padding:9px}.side-logo{padding:0}.side-logo img{height:42px}.side nav{display:none}.user{margin:0 0 0 auto;padding:0;border:0}.user div{display:none}.content{margin:0;padding:18px}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}header{align-items:end}.add{font-size:0}.add:first-letter{font-size:20px}}