:root{--nav:#071522;--nav2:#0b2031;--panel:#fff;--bg:#edf2f6;--ink:#13293a;--muted:#6e8291;--blue:#0078bd;--cyan:#10a7df;--line:#d7e1e8;--green:#16865d;--amber:#c77a00;--red:#c33c3c;--shadow:0 8px 30px rgba(15,41,58,.08)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font:14px Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}[hidden]{display:none!important}button,input,select,textarea{font:inherit}.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 18% 15%,#17435f,#06111a 55%,#03080d)}.login form{width:min(440px,92vw);background:#fff;padding:42px;border-radius:14px;box-shadow:0 35px 90px #0009;border-top:4px solid var(--cyan)}.login-mark,.side-head{display:flex;align-items:center;gap:12px}.logo-box{display:grid;place-items:center;width:40px;height:40px;background:linear-gradient(145deg,#0aa2df,#00629c);color:#fff;font-size:21px;font-weight:800;border-radius:7px}.brand{font-size:20px;letter-spacing:2px;font-weight:800}.brand b{color:#16a6e3}.login-mark small,.side-head small{font-size:9px;letter-spacing:2px;color:#7b8b96}.login h1{margin:34px 0 7px;font-size:25px}.login p{color:var(--muted);margin:0 0 28px}.login label{display:grid;gap:7px;margin:15px 0;font-weight:650;color:#41596a}.login input,input,select,textarea{padding:12px 13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);outline:none}.login input:focus,input:focus,select:focus,textarea:focus{border-color:#2b9ed5;box-shadow:0 0 0 3px #1b9bd21c}.login button,.primary{width:100%;border:0;border-radius:7px;padding:12px;background:var(--blue);color:#fff;cursor:pointer;font-weight:650}.login button:hover,.primary:hover{background:#006aa8}.login #loginError{display:block;color:var(--red);min-height:18px;margin-top:12px}.login-foot{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;display:flex;justify-content:space-between;color:#81929e;font-size:11px}
#app{display:grid;grid-template-columns:268px 1fr;min-height:100vh}aside{background:var(--nav);color:#d6e1e9;padding:22px 14px;display:flex;flex-direction:column;min-height:100vh}.side-head{padding:0 10px 20px}.side-head .brand{font-size:16px}.side-search{margin:6px 7px 18px;padding:10px 11px;border:1px solid #294153;border-radius:6px;color:#91a5b4;display:flex;gap:8px}.side-search kbd{margin-left:auto;color:#7890a0;background:#112a3c;padding:1px 5px;border-radius:3px}nav{display:grid;gap:15px}.nav-group{display:grid;gap:3px}.nav-group>label{font-size:9px;letter-spacing:1.5px;color:#60798c;padding:7px 12px}.nav-group button,#logout{border:0;background:transparent;color:#a9bdca;text-align:left;padding:9px 11px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:10px}.nav-group button i{font-style:normal;width:18px;text-align:center;color:#7894a7}.nav-group button em{font-style:normal;margin-left:auto;background:#16415c;padding:2px 7px;border-radius:12px;font-size:10px}.nav-group button:hover,.nav-group button.active{background:#12354d;color:#fff}.nav-group button.active{box-shadow:inset 3px 0 var(--cyan)}.nav-group button.active i{color:#21b4e8}.side-bottom{margin-top:auto}.env{margin:18px 7px 8px;padding:9px;background:#3a3105;color:#ffd55c;border:1px solid #63530c;border-radius:6px;text-align:center;font-size:10px;letter-spacing:1.2px}.env span,.health span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#24c47a;margin-right:7px;box-shadow:0 0 8px #24c47a}.side-bottom #logout{width:100%}
main{min-width:0}header{height:80px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px}header h2{margin:3px 0 0;font-size:21px}.crumb{color:#7b8d9a;font-size:11px}.top-actions{display:flex;align-items:center;gap:14px}.health{font-size:11px;color:#486272;border-right:1px solid var(--line);padding-right:14px}.clock{font-size:11px;color:#6d8190}.icon-btn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:6px;color:#536d7d}#identity{padding-left:12px;border-left:1px solid var(--line);font-weight:700;font-size:12px;text-align:right}#identity span{font-weight:500;color:#718593;font-size:10px}.uat-band{height:28px;background:#fff7da;color:#775800;border-bottom:1px solid #eadca6;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.8px}section{padding:24px 28px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:18px}.hero h3{margin:0 0 5px;font-size:18px}.hero p{margin:0;color:var(--muted)}.btn-row{display:flex;gap:8px}.btn{border:1px solid var(--line);background:#fff;color:#335063;border-radius:6px;padding:9px 12px;cursor:pointer}.btn.primary{width:auto;border-color:var(--blue);color:#fff}.btn.danger{border-color:#e7bcbc;color:var(--red)}.cards{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:14px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}.card{padding:17px 18px;position:relative;overflow:hidden}.card:after{content:"";position:absolute;right:-18px;top:-18px;width:58px;height:58px;border-radius:50%;background:#0aa1df0d}.card small{font-size:10px;color:#728694;text-transform:uppercase;letter-spacing:.6px}.card strong{display:block;font-size:27px;margin:9px 0 3px}.card .trend{font-size:10px;color:var(--green)}.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:14px;margin-top:14px}.panel{padding:18px;margin-top:14px}.grid2 .panel{margin-top:0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.panel h3{margin:0;font-size:14px}.muted{color:var(--muted)}.table-wrap{overflow:auto;border:1px solid #e4ebef;border-radius:7px}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid #e7edf1;white-space:nowrap}th{font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:#657d8c;background:#f6f9fb}tbody tr:hover{background:#f7fbfd}.badge{display:inline-block;padding:5px 8px;border-radius:12px;font-size:9px;font-weight:700;background:#e8eef2;color:#526979}.APPROVED,.COMPLETED,.ACKNOWLEDGED,.VALIDATED,.ONLINE{background:#dff4ea;color:#116f4b}.PENDING_APPROVAL,.ON_HOLD,.QUEUED{background:#fff0cd;color:#895400}.REJECTED,.VALIDATION_FAILED,.EXCEPTION,.OFFLINE{background:#fde2e2;color:#9c2929}.NOT_CONFIGURED{background:#edf1f3;color:#637786}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px}.form-grid label{display:grid;gap:7px;margin:10px 0;color:#526978;font-weight:600;font-size:12px}.full{grid-column:1/-1}.toolbar{display:flex;gap:8px;align-items:center;margin-top:14px}.toolbar button{width:auto}.decision{display:flex;gap:5px}.decision button{border:0;color:white;background:var(--blue);padding:6px 8px;border-radius:5px}.decision .reject{background:var(--red)}.decision .hold{background:var(--amber)}.status-list{display:grid;gap:10px}.status-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f3}.status-row>span{width:8px;height:8px;background:var(--green);border-radius:50%}.status-row small{color:var(--muted)}.timeline{display:flex;align-items:flex-start;padding:24px 0;overflow:auto}.step{min-width:150px;text-align:center;position:relative;color:#84939d}.step:before{content:"";display:block;width:14px;height:14px;border:3px solid #becbd3;background:white;border-radius:50%;margin:0 auto 10px;position:relative;z-index:2}.step:after{content:"";height:2px;background:#d7e2e8;position:absolute;top:7px;left:50%;width:100%}.step:last-child:after{display:none}.step.active{color:var(--green);font-weight:700}.step.active:before{background:var(--green);border-color:#bde6d3}.toast{position:fixed;right:25px;bottom:25px;background:#0c2739;color:#fff;padding:13px 17px;border-radius:7px;opacity:0;transform:translateY(15px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:none}
@media(max-width:1050px){#app{grid-template-columns:220px 1fr}.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.health,.clock{display:none}}@media(max-width:760px){#app{grid-template-columns:1fr}aside{min-height:auto}.nav-group{grid-template-columns:repeat(2,1fr)}.nav-group>label{grid-column:1/-1}.side-bottom{margin-top:10px}header{padding:0 15px}.cards{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}section{padding:16px}.top-actions .icon-btn{display:none}}
.modal{position:fixed;inset:0;background:#03101bcc;z-index:50;padding:4vh 4vw;overflow:auto}.modal-card{max-width:1180px;margin:auto;background:#f3f7f9;border-radius:10px;box-shadow:0 30px 100px #000;overflow:hidden}.modal-head{background:#071522;color:#fff;padding:18px 22px;display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-body{padding:22px}.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.detail-item{background:#fff;border:1px solid var(--line);padding:12px;border-radius:7px}.detail-item small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;margin-bottom:6px}.code-view{background:#07121b;color:#a9e7c9;border-radius:7px;padding:17px;white-space:pre-wrap;overflow:auto;min-height:220px;font:12px/1.6 Consolas,monospace}.tabs{display:flex;gap:6px;margin:16px 0 8px}.tabs button{border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:6px}.close-modal{background:transparent;border:1px solid #456075;color:#fff;padding:6px 10px;border-radius:5px}.clickable{cursor:pointer}.clickable:hover{background:#eef8fc}@media print{aside,header,.uat-band,.hero,.modal-head button,.tabs{display:none!important}.modal{position:static;background:#fff;padding:0}.modal-card{box-shadow:none}.modal-body{padding:0}.code-view{color:#000;background:#fff;border:1px solid #bbb}.detail-grid{grid-template-columns:repeat(2,1fr)}}

.btn.primary{
  background:#0078bd!important;
  border-color:#0078bd!important;
  color:#fff!important;
}

.btn.primary:hover{
  background:#006aa8!important;
}

.badge{
  white-space:nowrap;
}