:root{--eg-primary:#435ebe;--eg-ink:#182433;--eg-bg:#f2f5fb}body{background:var(--eg-bg)}.egaji-brand{display:flex;align-items:center;gap:.7rem;font-size:1.6rem;font-weight:800;color:var(--eg-ink)}.brand-mark,.payslip-logo{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#435ebe,#6578d8);color:#fff}.sidebar-footer{margin-top:auto}.sidebar-wrapper{display:flex;flex-direction:column}.sidebar-menu{flex:1}.employee-mini{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#f4f6fb;border-radius:14px}.min-w-0{min-width:0}.hero-card{background:linear-gradient(120deg,#fff 20%,#eef1ff);border:1px solid #e8ebf6;border-radius:18px;padding:2rem}.eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em}.stat-card,.card{border:0;border-radius:16px;box-shadow:0 4px 22px rgba(35,46,80,.055)}.stats-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;color:#fff;font-size:1.35rem}.stats-icon.purple{background:#9694ff}.stats-icon.blue{background:#57caeb}.stats-icon.green{background:#5ddab4}.profile-summary .avatar,.profile-grid+.avatar{font-size:1.7rem}.profile-row{display:flex;justify-content:space-between;gap:1rem;text-align:left;padding:.8rem 0;border-bottom:1px solid #eee}.profile-row span{color:#7c8a9a}.profile-row strong{text-align:right}.payslip-card{transition:transform .2s,box-shadow .2s}.payslip-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(35,46,80,.11)}.payslip-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#eef1ff;color:var(--eg-primary);font-size:1.4rem}.empty-state{text-align:center;padding:4rem}.empty-state i{font-size:3rem;color:#a8b1c5}.payslip-heading{border-bottom:2px solid #eef0f6}.info-panel{height:100%;background:#f7f8fc;border-radius:14px;padding:1.1rem 1.25rem}.info-panel>div{display:grid;grid-template-columns:110px 1fr;gap:1rem;padding:.48rem 0}.info-panel span,.amount-box span,.contribution-panel span{color:#7c8a9a;font-size:.85rem}.amount-box{background:#f7f8fc;border:1px solid #edf0f6;border-radius:13px;padding:1rem;height:100%}.amount-box span,.amount-box strong{display:block}.amount-box strong{margin-top:.35rem;font-size:1.08rem}.amount-box.danger{background:#fff6f6}.amount-box.primary{background:#435ebe;color:#fff}.amount-box.primary span{color:#dce2ff}.section-label{font-size:1rem;margin-bottom:1rem}.pay-lines thead th{font-size:.72rem;text-transform:uppercase;color:#8792a5;border-bottom-width:1px}.code-pill{font-family:monospace;background:#f0f2f8;padding:.25rem .45rem;border-radius:6px}.contribution-panel{background:#f7f8fc;border-radius:14px;padding:1.25rem}.contribution-panel h5{font-size:1rem}.contribution-panel span,.contribution-panel strong{display:block}.profile-grid{border:1px solid #edf0f5;border-radius:14px;overflow:hidden}.profile-item{padding:1rem 1.25rem;border-bottom:1px solid #edf0f5}.profile-item:nth-child(odd){border-right:1px solid #edf0f5}.profile-item span,.profile-item strong{display:block}.profile-item span{font-size:.78rem;color:#7c8a9a;margin-bottom:.3rem}.login-page{min-height:100vh;background:radial-gradient(circle at 10% 10%,#536bd1 0,#293d92 32%,#111b45 100%);display:flex;align-items:center}.login-shell{max-width:1080px;min-height:650px;border-radius:26px;overflow:hidden;box-shadow:0 30px 90px rgba(5,12,40,.35)}.login-visual{background:linear-gradient(150deg,rgba(67,94,190,.88),rgba(22,36,86,.94)),radial-gradient(circle at top right,#8394ef,transparent 45%);color:#fff}.login-logo{display:flex;align-items:center;gap:.7rem;font-size:1.7rem;font-weight:800}.login-logo i{display:grid;place-items:center;width:48px;height:48px;background:rgba(255,255,255,.16);border-radius:15px}.login-form-wrap{max-width:390px;margin:auto}.login-btn{border-radius:12px;padding:.9rem}.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#697386;padding:.5rem;z-index:5}@media(max-width:767px){.hero-card{padding:1.4rem}.profile-item:nth-child(odd){border-right:0}.info-panel>div{grid-template-columns:90px 1fr}.payslip-detail .card-body{padding:1.2rem!important}}@media(max-width:991px){.login-shell{max-width:580px}.login-visual{min-height:330px}}