:root{--nav:#071b2b;--nav2:#0d2c43;--primary:#0b5278;--teal:#0b8e91;--blue:#245f9f;--amber:#b8892b;--violet:#5c5d8f;--ink:#112b3b;--muted:#647884;--bg:#f3f6f8;--line:#dce5ea;--shadow:0 12px 38px rgba(10,40,60,.07)}.portal aside{background:linear-gradient(180deg,#071b2b 0%,#0b2638 65%,#102d3d 100%);border-right:1px solid #ffffff0e}.portal-brand>span,.portal-mark{border-radius:8px;background:linear-gradient(145deg,#c9a759,#87691e);box-shadow:0 7px 20px #0004}.portal-brand small{color:#b6c7d0}.portal aside nav a{color:#bccbd3;border-left:2px solid transparent;border-radius:4px}.portal aside nav a:hover{background:#ffffff0a;border-left-color:#c9a759}.portal aside nav a:first-child{background:linear-gradient(90deg,#c9a75922,transparent);border-left-color:#c9a759;color:#f1ddaa}.portal-top{background:#ffffffee;border-bottom-color:#e4eaed}.top-search{font-weight:700;letter-spacing:.4px;color:#294b60}.top-user a{border:1px solid #dce5ea;background:#fff;color:#234b63}.portal-head>div>small,.eyebrow{color:#9a7524}.portal-head h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.6px}.panel{border-radius:8px;border-color:#e1e8eb;box-shadow:0 10px 35px rgba(8,37,56,.055)}.metric{border-radius:8px;border:1px solid #ffffff18;box-shadow:0 10px 24px #17394d18}.metric.teal{background:linear-gradient(135deg,#0a5667,#128d91)}.metric.blue{background:linear-gradient(135deg,#163d66,#2d6ca9)}.metric.amber{background:linear-gradient(135deg,#80601f,#c49a3e)}.metric.violet{background:linear-gradient(135deg,#3c456f,#696898)}.primary-btn,.portal-form button{border-radius:4px;background:linear-gradient(135deg,#123f5d,#0b6384);box-shadow:0 7px 16px #0b527827}.status{border-radius:4px}.quick-grid a{border:1px solid #e4eaed;border-radius:5px;background:#f7f9fa}.employee-login{background:#f6f8f9}.login-story{background:linear-gradient(135deg,rgba(5,24,38,.97),rgba(10,64,75,.9)),radial-gradient(circle at 80% 15%,#b99743,#071b2b 58%)}.login-story h1{font-family:Georgia,"Times New Roman",serif;font-weight:500}.employee-login-form button{border-radius:4px;background:linear-gradient(135deg,#173f59,#0a667e)}.payslip-period{border-radius:6px;background:#f1ead7;color:#765a18}.executive-payslip{grid-template-columns:100px 1fr auto;border-top:3px solid #b99743}.pay-breakdown{display:flex;gap:25px}.pay-breakdown span{display:grid;color:var(--muted);font-size:12px}.pay-breakdown b{color:var(--ink);font-size:14px}.pdf-btn{padding:11px 15px;border:1px solid #b99743;color:#765a18;font-weight:800;border-radius:4px}.security-note{padding:15px;margin-top:18px;border:1px solid #dce5ea;background:#fff;color:var(--muted);font-size:13px}.data-tabs{display:flex;gap:8px;margin-bottom:20px}.data-tabs a{padding:10px 15px;background:#fff;border:1px solid var(--line);border-radius:5px}.data-tabs a.active{background:#0b5278;color:#fff;border-color:#0b5278}.data-center-grid{grid-template-columns:1fr 1fr}.import-panel{position:relative;overflow:hidden}.step-no{font:700 52px/1 Georgia,serif;color:#e1e8eb;position:absolute;right:20px;top:17px}.secondary-action{display:inline-block;padding:11px 15px;border:1px solid #b99743;color:#765a18;font-weight:750;margin:15px 0}.format-note{background:#f5f7f8;border-left:3px solid #b99743;padding:13px;font-size:13px}.dropzone{border:1px dashed #97adb8;padding:24px!important;text-align:center;background:#f8fafb}.dropzone input{margin-top:12px}.export-center{margin-top:22px}.export-center>div:first-child{margin-bottom:20px}.export-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.export-grid a{display:grid;gap:5px;border:1px solid var(--line);padding:16px;border-radius:6px}.export-grid a>span{font-size:10px;color:#9a7524;font-weight:900;letter-spacing:1px}.export-grid small{color:var(--primary)}.import-result{display:flex;gap:25px;align-items:center;margin-bottom:20px}.result-number{display:grid;text-align:center;padding:10px 25px;border-right:1px solid var(--line)}.result-number b{font-size:28px}.result-number.success b{color:#16845c}.result-number.failed b{color:#c74747}.import-result details{flex:1}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.guide-grid p{color:var(--muted);margin-bottom:0}@media(max-width:900px){.export-grid,.guide-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.executive-payslip,.data-center-grid{grid-template-columns:1fr}.pay-breakdown{display:grid;gap:8px}.export-grid,.guide-grid{grid-template-columns:1fr}.import-result{align-items:stretch;flex-wrap:wrap}.result-number{flex:1}.data-tabs{overflow:auto}.data-tabs a{white-space:nowrap}}