@font-face{font-family:Inter;src:url(/fonts/inter-400.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-500.ttf) format("truetype");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-600.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}@font-face{font-family:Inter;src:url(/fonts/inter-700.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}.employee-app{--navy:#12317c;--blue:#2563eb;--blue-soft:#edf3ff;--canvas:#f5f7fd;--text:#17233c;--muted:#68758b;--line:#e5eaf4;min-height:100dvh;background:radial-gradient(ellipse at top,#ecf2ff 0,transparent 45%),var(--canvas);color:var(--text);font-family:Inter,sans-serif;font-size:14px;line-height:1.5}.employee-app *{box-sizing:border-box}.employee-app button,.employee-app input,.employee-app select,.employee-app textarea{font:inherit}.employee-app a,.employee-app button{touch-action:manipulation}.employee-app button:disabled{cursor:not-allowed;opacity:.45}.employee-app a{color:inherit;text-decoration:none}.employee-app :focus-visible{outline:3px solid #93b4ff;outline-offset:3px}.employee-app h1,.employee-app h2,.employee-app h3,.employee-app p{margin:0}.employee-app h1{font-size:28px;line-height:1.2;letter-spacing:-.8px;font-weight:700}.employee-app h2{font-size:17px;line-height:1.4;font-weight:700}.employee-app h3{font-size:14px;font-weight:650}.portal-header{position:sticky;top:0;z-index:20;background:#ffffffed;border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.portal-header>div{max-width:860px;margin:auto;min-height:70px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:12px}.portal-brand{display:flex;align-items:center;gap:10px}.portal-logo{display:grid;place-items:center;width:36px;height:36px;color:#fff;background:linear-gradient(140deg,#3074f6,#102c78);border-radius:10px;box-shadow:0 3px 8px #17439530}.portal-brand strong{display:block;font-size:15px;letter-spacing:1px}.portal-brand small{display:block;font-size:8px;color:var(--muted);letter-spacing:1.3px}.portal-text-button{color:var(--blue);background:transparent;border:0;min-height:44px;font-size:13px;font-weight:600;cursor:pointer}.employee-content{max-width:860px;margin:0 auto;padding:26px 20px 120px;animation:portal-enter .3s ease-out}.portal-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;background:#fffffff5;backdrop-filter:blur(16px);border:1px solid var(--line);border-bottom:0;border-radius:20px 20px 0 0;display:grid;grid-template-columns:repeat(4,1fr);padding:9px 8px calc(10px + env(safe-area-inset-bottom));z-index:30;box-shadow:0 -6px 24px #142b6408}.portal-nav a{display:flex;min-height:52px;flex-direction:column;justify-content:center;align-items:center;gap:5px;color:var(--muted);font-size:11px;font-weight:600;border-radius:12px}.portal-nav a[aria-current=page]{color:var(--blue);background:var(--blue-soft)}.portal-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;margin-bottom:18px;box-shadow:0 3px 10px #192e5f03}.portal-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.portal-card-heading h2{display:flex;align-items:center;gap:8px}.portal-card-heading a{color:var(--blue);font-size:12px;font-weight:600}.portal-muted{color:var(--muted);font-size:13px}.portal-eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--blue);margin-bottom:9px!important}.portal-page-title{margin:0 0 24px}.portal-page-title>p:last-child{margin-top:10px}.portal-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.portal-stack{display:grid;gap:15px}.portal-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr}.portal-grid>.portal-card{margin-bottom:0}.portal-message{border:1px solid;border-radius:12px;padding:14px 16px;margin-bottom:18px!important;font-size:13px}.portal-message.error{color:#a33434;background:#fff3f3;border-color:#f7d2d2}.portal-message.success{color:#146b4b;background:#effbf4;border-color:#c5ead7}.portal-empty{padding:36px 15px;text-align:center;color:var(--muted)}.portal-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:11px;padding:10px 20px;font-weight:600;color:#fff!important;border:1px solid transparent;background:linear-gradient(110deg,var(--navy),var(--blue));cursor:pointer}.portal-button.secondary{background:#fff;color:var(--navy)!important;border-color:var(--line)}.portal-button.full{width:100%}.portal-badge{display:inline-flex;align-items:center;gap:5px;background:var(--blue-soft);color:var(--blue);border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;white-space:nowrap}.portal-badge.approved,.portal-badge.complete{background:#eaf8f1;color:#16835b}.portal-badge.pending{background:#fff6e6;color:#ac721a}.portal-badge.rejected{background:#fef0f0;color:#bf4242}.portal-welcome{display:flex;align-items:center;gap:14px;margin-bottom:22px}.portal-avatar{display:grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,#d5e4ff,#e9effd);color:var(--navy);width:48px;height:48px;border-radius:50%;font-size:18px;font-weight:700}.portal-welcome h1{font-size:23px}.portal-welcome .portal-muted{margin-top:4px}.portal-clock-card{text-align:center;position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#f8faff);padding:28px 20px}.portal-clock-ring{border-radius:50%;padding:10px;background:#e3edff;box-shadow:0 0 0 8px #f0f5ff;margin:30px auto 26px;width:184px;height:184px}.portal-clock-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;border:0;border-radius:50%;width:164px;height:164px;background:linear-gradient(160deg,#347dff,#133690);box-shadow:0 8px 18px #21458b30;cursor:pointer;transition:transform .15s}.portal-clock-button:active:not(:disabled){transform:scale(.96)}.portal-clock-button span{font-size:20px;font-weight:650}.portal-clock-button small{font-size:12px;opacity:.8;font-variant-numeric:tabular-nums}.portal-clock-status{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:8px}.portal-time{font-size:30px;font-weight:700;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:4px 0}.portal-timeline{border-left:2px solid #dce6f8;margin-left:7px;padding-left:21px}.portal-timeline>div{position:relative;margin-bottom:22px;padding:12px;background:#f5f8ff;border-radius:10px}.portal-timeline>div:before{content:"";position:absolute;left:-28px;top:17px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #82aafa}.portal-timeline>div.complete:before{border-color:#32b184}.portal-timeline strong{display:block;font-size:22px;margin:6px 0;font-variant-numeric:tabular-nums}.portal-shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.portal-shortcuts a{padding:18px 8px;border-radius:12px;background:#f3f6ff;text-align:center;font-size:12px;font-weight:600}.portal-shortcuts svg{display:block;margin:0 auto 10px;color:var(--blue)}.portal-field{display:grid;gap:7px;font-size:12px;font-weight:600}.portal-field input,.portal-field textarea,.portal-month input{width:100%;min-width:0;min-height:48px;border:1px solid var(--line);border-radius:10px;background:#f5f7fc;color:var(--text);padding:11px 13px;font-size:16px}.portal-field textarea{resize:vertical;min-height:115px}.portal-form{display:grid;gap:19px}.portal-form .portal-grid{gap:12px}.portal-login{max-width:440px;margin:auto;padding:65px 20px 40px}.portal-login-intro{text-align:center;margin-bottom:30px}.portal-login-intro>.portal-logo{margin:0 auto 22px;width:58px;height:58px;border-radius:17px}.portal-login-intro h1{font-size:27px;margin:8px 0 10px}.portal-login-note{text-align:center;margin:22px 0!important;color:var(--muted);font-size:12px}.portal-login-note a{color:var(--blue);text-decoration:underline}.portal-login-features{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:12px;margin-top:26px}.portal-login-features span{font-size:11px;color:var(--muted)}.portal-login-features svg{display:block;margin:0 auto 8px;color:var(--blue)}.portal-month{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}.portal-month input{width:190px;text-align:center;background:#fff}.portal-icon-button{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--navy);cursor:pointer}.portal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-bottom:20px}.portal-stats>div{padding:18px 12px;background:#fff}.portal-stats span{font-size:11px;color:var(--muted)}.portal-stats strong{display:block;font-size:27px;letter-spacing:-.8px;margin-top:5px;font-variant-numeric:tabular-nums}.portal-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.portal-calendar>span{text-align:center;font-size:11px;color:var(--muted);padding:4px 0}.portal-calendar button{position:relative;min-height:44px;aspect-ratio:1.15;border:0;border-radius:9px;background:#f5f7fc;color:var(--muted);cursor:pointer;font-size:13px}.portal-calendar button.has-record{background:#eaf2ff;color:var(--navy);font-weight:700}.portal-calendar button.has-record:after{content:"";width:4px;height:4px;border-radius:50%;background:#20a373;position:absolute;bottom:6px;left:calc(50% - 2px)}.portal-calendar button[aria-pressed=true]{background:var(--blue);color:#fff}.portal-record{padding:16px 0;border-bottom:1px solid var(--line)}.portal-record:last-child{border:0}.portal-record p{margin-top:6px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}.portal-record dl{display:flex;gap:22px;margin:12px 0 0;font-variant-numeric:tabular-nums}.portal-record dt{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px}.portal-record dd{margin:2px 0 0;font-size:15px}.portal-payslip-hero{padding:26px;border-radius:16px;background:linear-gradient(120deg,#0e2867,#2453c8);color:#fff;margin-bottom:20px}.portal-payslip-hero h2{font-size:26px;margin:12px 0}.portal-payslip-hero p{color:#c7d8ff;font-size:13px}.portal-file-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.portal-preview{position:fixed;inset:0;z-index:50;background:#f5f7fd;display:flex;flex-direction:column;padding:16px;gap:12px}.portal-preview header{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.portal-preview iframe{flex:1;width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;min-height:0}.portal-preview-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}@keyframes portal-enter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){.employee-content{padding:20px 16px 112px}.portal-grid{grid-template-columns:1fr}.portal-form .portal-grid{grid-template-columns:1fr 1fr}.portal-card{padding:18px}.portal-header>div{padding:9px 16px;min-height:64px}.employee-app h1{font-size:25px}.portal-calendar{gap:3px}.portal-calendar button{aspect-ratio:auto}.portal-clock-ring{margin:24px auto}.portal-stats>div{padding:15px 10px}.portal-stats strong{font-size:24px}}@media(prefers-reduced-motion:reduce){.employee-content{animation:none}.portal-clock-button{transition:none}}