:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#192a3c;background:#f3f6fa;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-height:100vh}.topbar{min-height:76px;background:#fff;border-bottom:1px solid #e1e7ef;display:flex;align-items:center;gap:13px;padding:12px max(20px,calc((100vw - 1050px)/2));position:sticky;top:0;z-index:3}.brand-mark{height:43px;width:43px;flex:0 0 43px;display:grid;place-items:center;background:#123a67;color:#fff;border-radius:12px;font-weight:800;letter-spacing:-1px;text-decoration:none}.topbar>div:nth-child(2){display:grid;gap:3px}.topbar strong{font-size:15px}.topbar span{font-size:12px;color:#6b7b8d}.admin-link{margin-left:auto;color:#123a67;text-decoration:none;font-weight:700;font-size:13px;padding:10px 12px;border-radius:9px;background:#edf4fc}.page-wrap{max-width:1000px;margin:0 auto;padding:35px 20px 50px}.intro{max-width:680px;margin:0 auto 23px;text-align:center}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#2b6bb0;margin:0 0 9px}.intro h1{font-size:clamp(27px,4vw,37px);line-height:1.15;letter-spacing:-1.1px;margin:0 0 12px;color:#102b4b}.intro>p:last-child{color:#627286;font-size:14px;line-height:1.7;margin:0}.panel{background:#fff;border:1px solid #e2e8f0;border-radius:17px;padding:25px;box-shadow:0 8px 28px #233b5510;margin:0 0 20px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.panel-head h2{font-size:19px;margin:0 0 5px;color:#172e49}.panel-head p{font-size:12px;color:#718096;margin:0}.secure-pill{font-size:11px;font-weight:700;color:#1f6d53;background:#eaf8f1;border-radius:30px;padding:9px 11px;white-space:nowrap}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px 18px}label{font-size:12px;font-weight:700;color:#354a60;display:flex;flex-direction:column;gap:8px;min-width:0}.wide{grid-column:1/-1}input,select,textarea{font:inherit;color:#1c3045;width:100%;min-width:0;border:1px solid #d8e0e9;background:#fff;border-radius:9px;padding:12px 13px;outline:none;transition:border-color .15s,box-shadow .15s}input,select{min-height:43px}textarea{resize:vertical;line-height:1.5}input:focus,select:focus,textarea:focus{border-color:#3982c8;box-shadow:0 0 0 3px #3982c81b}input::placeholder,textarea::placeholder{color:#a0acba;font-weight:400}.upload-label input{padding:9px;background:#f8fafc}.upload-label small,small{font-size:11px;font-weight:400;color:#7a899a}.photo-preview{margin-top:5px;width:92px;height:110px;border:1px dashed #bdcad8;border-radius:9px;background:#f7f9fc;display:grid;place-items:center;overflow:hidden;color:#8493a4;font-size:11px;font-weight:500}.photo-preview img{width:100%;height:100%;object-fit:cover}.form-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:23px;padding-top:20px;border-top:1px solid #edf0f4}.form-footer p,.footer-note{font-size:11px;color:#7a899a;line-height:1.6;margin:0}.primary-btn,.secondary-btn,.quiet-btn{border:0;border-radius:9px;padding:12px 15px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap}.primary-btn{background:#164a7e;color:white;box-shadow:0 3px 8px #164a7e20}.primary-btn:hover{background:#103b66}.primary-btn:disabled{opacity:.55;cursor:wait}.primary-btn span{margin-left:10px}.secondary-btn{background:#eaf2fb;color:#164a7e}.quiet-btn{background:#f1f4f8;color:#526579}.message{font-size:12px;line-height:1.5;margin-top:12px}.message:empty{display:none}.message.success{padding:11px 13px;border-radius:9px;background:#eaf8f1;color:#176448}.message.error{padding:11px 13px;border-radius:9px;background:#fff0ef;color:#a52c2c}.footer-note{text-align:center;margin:22px auto 0}.admin-wrap{max-width:1160px}.login-form{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:end}.login-form .primary-btn{height:43px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:13px;padding:17px 19px;display:grid;gap:9px}.stat-card span{font-size:12px;color:#718096}.stat-card strong{font-size:27px;color:#123a67}.button-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.toolbar{display:flex;gap:10px;margin-bottom:15px}.toolbar input{flex:1}.toolbar select{width:160px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}th{background:#f5f8fb;color:#66778a;font-size:10px;letter-spacing:.5px;text-transform:uppercase}th,td{padding:13px 12px;border-bottom:1px solid #edf0f4;vertical-align:top}td{color:#42566b;line-height:1.6}.employee-main{font-weight:800;color:#1b324c;font-size:13px}.employee-sub{font-size:11px;color:#7b8a9b}.status{display:inline-block;padding:5px 8px;border-radius:30px;text-transform:capitalize;font-size:10px;font-weight:800}.status.pending{background:#fff4d8;color:#865a00}.status.approved{background:#e6f7ed;color:#176448}.status.rejected{background:#fff0ef;color:#a52c2c}.actions{display:flex;gap:6px;flex-wrap:wrap}.action-btn{border:0;border-radius:7px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.action-approve{background:#e6f7ed;color:#176448}.action-reject{background:#fff0ef;color:#a52c2c}.action-edit{background:#eaf2fb;color:#164a7e}.add-panel{margin-top:18px}.add-panel .form-footer{border-top:0}.button-row .primary-btn{font-size:11px}.table-empty{text-align:center;padding:25px;color:#8290a0} [hidden]{display:none!important}@media(max-width:680px){.topbar{padding:11px 15px}.topbar span{max-width:210px;line-height:1.4}.page-wrap{padding:25px 12px 35px}.panel{padding:18px 15px;border-radius:13px}.form-grid{grid-template-columns:1fr;gap:15px}.wide{grid-column:auto}.form-footer{align-items:stretch;flex-direction:column}.form-footer .primary-btn{width:100%}.secure-pill{display:none}.panel-head{align-items:flex-start;flex-direction:column}.login-form{grid-template-columns:1fr}.stats-grid{gap:8px}.stat-card{padding:13px 12px}.stat-card strong{font-size:23px}.toolbar{flex-wrap:wrap}.toolbar input{flex-basis:100%}.toolbar select{flex:1}.button-row{justify-content:flex-start}.button-row button{flex:1}.admin-link{font-size:11px;padding:9px}.table-scroll{margin:0 -5px}}