:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#142039;background:#f4f6fb;--portal-brand: #6654ef}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:#fff}.login-art{padding:55px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(145deg,#162541,#293a65 65%,#6654ef)}.login-art div{max-width:580px}.login-art h1{font-size:52px;line-height:1.02;margin:12px 0 20px}.login-art p,.kicker{font-size:11px;font-weight:900;letter-spacing:.13em;color:#7662ff}.login-art p{color:#bcb5ff}.brand{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--portal-brand);color:#fff;font-weight:900;box-shadow:0 8px 22px #3325a24d}.login form{width:min(420px,calc(100% - 40px));margin:auto;display:grid;gap:17px}.login form h2{font-size:35px;margin:0}.login form>span{color:#748099}.login label,.drawer label{display:grid;gap:7px;font-size:12px;font-weight:800}.login input,.drawer input,.form input,.form select,.form textarea{border:1px solid #d5ddec;border-radius:11px;padding:13px;background:#fff;outline:none}.login input:focus,.form input:focus,.form select:focus,.form textarea:focus{border-color:#7662ff;box-shadow:0 0 0 4px #7662ff18}.remember{display:flex!important;align-items:center}.remember input{width:auto}.primary{border:0;border-radius:10px;padding:12px 17px;background:var(--portal-brand);color:#fff;font-weight:800;cursor:pointer}.announcement .primary{margin-top:10px;padding:7px 11px;font-size:11px}.announcement small{display:block;margin-top:8px;color:#6e7890;font-weight:800}.login a{text-align:center;color:#6753ed;font-size:13px}.error{background:#ffebe9;color:#a82e2a;padding:11px;border-radius:9px}header{height:72px;padding:0 max(24px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;background:#172541;color:#fff;position:sticky;top:0;z-index:5}.portal-brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.portal-brand span:last-child{display:grid}.portal-brand small{color:#aebbd2}header>div{display:flex;gap:9px}header button{border:1px solid #50607d;background:transparent;color:#fff;padding:9px 13px;border-radius:9px;cursor:pointer}main{max-width:1180px;margin:auto;padding:35px 24px 80px}.welcome{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.welcome p{color:#6b57ed;font-weight:900;font-size:11px;letter-spacing:.12em}.welcome h1{font-size:36px;margin:4px 0}.welcome span{color:#748099}.today{display:grid;text-align:right;gap:4px}.today small{color:#8590a4}.announcements{display:grid;gap:9px;margin-bottom:18px}.announcement{background:#eeeafd;border-left:4px solid #6654ef;border-radius:11px;padding:14px 17px}.announcement.urgent{background:#ffebe9;border-color:#ed615a}.announcement p{margin:5px 0 0;color:#5e687c}nav{display:flex;gap:6px;padding:6px;background:#e8ecf4;border-radius:13px;overflow-x:auto;margin-bottom:24px}nav button{flex:1;min-width:max-content;border:0;border-radius:9px;background:transparent;color:#68748b;padding:11px 14px;font-weight:800;cursor:pointer}nav button.active{background:#fff;color:#5846e4;box-shadow:0 5px 15px #23304d12}.tab{display:none}.tab.active{display:block;animation:reveal .25s ease}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-head h2{margin:0;font-size:26px}.section-head p{margin:5px 0;color:#778299}.card{background:#fff;border:1px solid #e0e5ef;border-radius:15px;padding:20px;box-shadow:0 9px 28px #27334b0a}.list{display:grid;gap:12px}.record{display:flex;justify-content:space-between;gap:20px;align-items:center}.record h3{margin:0 0 5px}.record p{margin:0;color:#748096}.record small{color:#8691a5}.amount{text-align:right;font-weight:900;font-size:18px}.amount small{display:block}.badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#e9edf5;color:#637087;font-size:10px;font-weight:900}.badge.approved,.badge.paid,.badge.present{background:#dff5eb;color:#187759}.badge.pending,.badge.late{background:#fff1cc;color:#936500}.badge.rejected,.badge.absent{background:#ffe5e2;color:#a63832}.form{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:16px}.form label{display:grid;gap:7px;font-size:11px;font-weight:800}.form .wide{grid-column:1/-1}.form textarea{min-height:90px}.two,.overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.overview-grid{grid-template-columns:repeat(4,1fr);margin-bottom:18px}.metric{display:grid;gap:7px}.metric small{color:#78849a;font-weight:800}.metric strong{font-size:26px}.schedule-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #edf0f5}.schedule-row span{display:grid;gap:3px}.drawer{position:fixed;z-index:20;right:0;top:0;height:100vh;width:min(420px,100%);background:#fff;padding:35px;box-shadow:-25px 0 60px #17233c28}.drawer-close{position:absolute;right:22px;top:20px;border:0;background:#eef1f7;width:34px;height:34px;border-radius:10px;font-size:22px}.drawer form{display:grid;gap:16px;margin-top:25px}#toast{position:fixed;right:24px;bottom:24px;background:#172541;color:#fff;padding:13px 19px;border-radius:10px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}@keyframes reveal{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}[hidden]{display:none!important}@media(max-width:760px){.login{grid-template-columns:1fr}.login-art{display:none}header{padding:0 15px}main{padding:25px 15px 70px}.welcome{align-items:start}.today{display:none}.overview-grid,.two{grid-template-columns:1fr 1fr}.form{grid-template-columns:1fr}.form .wide{grid-column:auto}.record{align-items:flex-start}.section-head{align-items:flex-start;gap:12px}}@media(max-width:480px){.overview-grid,.two{grid-template-columns:1fr}.welcome h1{font-size:29px}.portal-brand strong{font-size:13px}.portal-brand small{font-size:10px}header button{padding:8px;font-size:11px}}body{background:radial-gradient(circle at 90% 0,#ece9ff 0,transparent 24rem),#f4f6fb}header{height:76px;border-bottom:1px solid #2d3c59;box-shadow:0 10px 32px #17254120;background:linear-gradient(105deg,#162541,#1c2d50)}.portal-brand .brand{width:40px;height:40px;border-radius:12px}main{padding-top:32px}.welcome{min-height:142px;align-items:center;padding:24px 26px;border:1px solid #dedafc;border-radius:19px;background:radial-gradient(circle at 88% 10%,#8a77f529,transparent 14rem),#fff;box-shadow:0 14px 36px #27334b0c}.welcome h1{color:#101b31;font-size:34px}.today{padding:11px 14px;border-radius:11px;background:#f5f3ff}.announcements{margin-top:16px}.announcement{border:1px solid #ddd7ff;border-left:4px solid var(--portal-brand);box-shadow:0 8px 24px #27334b0a}nav{position:sticky;top:88px;z-index:4;padding:7px;border:1px solid #dce2ed;background:#eaedf4ed;box-shadow:0 10px 26px #27334b12;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}nav button{min-height:43px;border-radius:10px}.card{border-color:#dfe5ef;border-radius:16px;box-shadow:0 12px 32px #27334b0b}.metric{min-height:122px;position:relative;overflow:hidden;justify-content:center}.metric:after{content:"";position:absolute;width:70px;height:70px;right:-30px;bottom:-34px;border-radius:50%;background:#eeeafd}.metric strong{color:#111c31;font-size:28px}.form input,.form select,.form textarea,.drawer input{min-height:44px;border-radius:11px}.record{min-height:88px}@media(max-width:760px){header{height:70px}.welcome{min-height:0;padding:20px}.welcome h1{font-size:29px}nav{top:78px}.overview-grid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.overview-grid{grid-template-columns:1fr}.welcome{display:block}.portal-brand small{display:none}}.portal-brand .brand{position:relative;overflow:hidden;animation:employeeLogoFloat 4.8s ease-in-out infinite}.portal-brand .brand:after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 38%,#ffffff88 50%,transparent 62%);transform:translate(-90%) rotate(8deg);animation:employeeLogoShine 5.4s 1.2s ease-in-out infinite}#app main>*{animation:employeeRise .42s cubic-bezier(.2,.8,.2,1) both}#app main>*:nth-child(2){animation-delay:.06s}#app main>*:nth-child(3){animation-delay:.12s}#app main>*:nth-child(4){animation-delay:.18s}.tab.active>*{animation:employeeRise .35s cubic-bezier(.2,.8,.2,1) both}.tab.active>*:nth-child(2){animation-delay:55ms}.card,.announcement,.metric{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover,.announcement:hover{transform:translateY(-3px);box-shadow:0 18px 40px #27334b16}.metric:after{animation:employeeOrb 4.6s ease-in-out infinite}nav button{transition:color .2s ease,background .2s ease,transform .2s ease}nav button:hover{transform:translateY(-1px)}.primary{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.primary:hover{transform:translateY(-2px);box-shadow:0 12px 25px color-mix(in srgb,var(--portal-brand) 28%,transparent)}.drawer:not([hidden]){animation:employeeDrawer .32s cubic-bezier(.16,1,.3,1)}#toast.show{animation:employeeToast .35s cubic-bezier(.16,1,.3,1)}@keyframes employeeRise{0%{opacity:0;transform:translateY(11px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}@keyframes employeeLogoFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes employeeLogoShine{0%,58%{transform:translate(-90%) rotate(8deg)}80%,to{transform:translate(90%) rotate(8deg)}}@keyframes employeeOrb{0%,to{transform:scale(1)}50%{transform:scale(1.2) translate(-3px,-2px)}}@keyframes employeeDrawer{0%{opacity:0;transform:translate(35px)}to{opacity:1;transform:none}}@keyframes employeeToast{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){#app *,#app *:before,#app *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.card:hover,.announcement:hover{transform:none}}