body{margin:0}:root{--blue:#1f6feb;--blue2:#2f80ed;--navy:#154db3;--soft:#e8f1fe;--bg:#eff5fd;--card:#fff;--tx:#14233c;--mu:#6a7b92;--bd:#e2eaf5;--ok:#1a9d5c;--bad:#e0453f;--r:16px;--sh:0 1px 2px #143c780f,0 8px 24px #143c780f;--sh2:0 4px 10px #143c7814,0 16px 36px #143c7824;--ease:cubic-bezier(.22,.61,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(900px 380px at 50% -160px,#d6e6fd,transparent),var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45}h3,h4{margin:0}h4{margin:20px 0 10px;font-size:15px}.muted{color:var(--mu);font-size:13px}.pos{color:var(--ok)}.neg{color:var(--bad)}.note{color:var(--navy);background:var(--soft);animation:fadeUp .3s var(--ease) both;border-radius:10px;padding:8px 12px}.error{color:var(--bad);background:#fdeceb;border-radius:10px;margin-bottom:10px;padding:8px 12px}.center{text-align:center;color:var(--mu);padding:90px 20px}.wide{width:100%;margin-bottom:8px}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@keyframes grow{0%{width:0}}@keyframes welcome{0%{opacity:0}14%{opacity:1}82%{opacity:1}to{opacity:0}}@keyframes welcomeCard{0%{transform:translateY(24px)scale(.94)}16%{transform:none}to{transform:scale(1.03)}}.view{animation:fadeUp .45s var(--ease) both}.stagger>*{animation:fadeUp .55s var(--ease) both}.stagger>:nth-child(2){animation-delay:60ms}.stagger>:nth-child(3){animation-delay:.12s}.stagger>:nth-child(4){animation-delay:.18s}.stagger>:nth-child(5){animation-delay:.24s}.topbar{z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd);background:#ffffffe0;justify-content:space-between;align-items:center;padding:4px 18px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.brand img{width:auto;height:56px;display:block}.role{background:var(--soft);color:var(--navy);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}.who{align-items:center;gap:12px;display:flex}.who span{font-weight:600}button{font:inherit;color:var(--tx);border:1px solid var(--bd);cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s,background .18s;background:#fff;border-radius:10px;padding:8px 14px}button:hover{box-shadow:var(--sh);border-color:#b9d1f6;transform:translateY(-1px)}button:active{transform:scale(.97)}button:disabled{opacity:.6;cursor:default}button.primary{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;border:0;box-shadow:0 6px 16px #1f6feb4d}button.primary:hover{box-shadow:0 10px 22px #1f6feb66}button.ghost{background:0 0}input,select,textarea{border:1px solid var(--bd);font:inherit;color:var(--tx);background:#fff;border-radius:10px;padding:10px 12px;transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px #1f6feb24}textarea{width:100%;margin-bottom:10px}input.small{width:100px}.row{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px;display:flex}.row input{flex:1;min-width:130px}.row input[type=month],.row input[type=date]{flex:0 auto}.page{max-width:980px;margin:0 auto;padding:16px 14px 40px}.tabs{border:1px solid var(--bd);box-shadow:var(--sh);scrollbar-width:none;background:#fff;border-radius:999px;gap:6px;margin-bottom:18px;padding:5px;display:flex;overflow-x:auto}.tabs::-webkit-scrollbar{display:none}.tabs button{box-shadow:none;white-space:nowrap;color:var(--mu);background:0 0;border:0;border-radius:999px;padding:9px 16px;font-weight:600}.tabs button:hover{background:var(--soft);color:var(--navy);transform:none}.tabs button.on{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;box-shadow:0 6px 14px #1f6feb4d}.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px;padding:18px}.card>h3{margin-bottom:14px;font-size:20px}.badge{background:var(--bad);color:#fff;border-radius:10px;margin-left:6px;padding:1px 7px;font-size:11px}.banner{cursor:pointer;animation:fadeUp .4s var(--ease) both;background:linear-gradient(135deg,#fff7df,#ffefc2);border:1px solid #f0d58a;border-radius:12px;margin-bottom:14px;padding:11px 15px}.scroll{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap;padding:10px 8px}th{color:var(--mu);text-transform:uppercase;letter-spacing:.05em;font-size:11px}tbody tr{transition:background .15s}tbody tr:hover{background:#f5f9ff}.tag{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-block}.tag.ok,.tag.full,.tag.received{color:var(--ok);background:#dff5e8}.tag.half,.tag.due{color:#a16a00;background:#fff1d6}.tag.custom,.tag.salary{color:#2b55b8;background:#e3ecff}.tag.leave,.tag.paid{color:var(--bad);background:#fde4e2}.tag.holiday{color:#6a3fb0;background:#ece3fb}.seg{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}.seg button.on{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;border-color:#0000}.monthnav{align-items:center;gap:12px;display:flex}.cal{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.dow{text-align:center;color:var(--mu);padding:4px 0;font-size:12px;font-weight:600}.day{border:1px solid var(--bd);cursor:pointer;min-height:64px;transition:transform .18s var(--ease),box-shadow .18s var(--ease);animation:pop .35s var(--ease) both;background:#fff;border-radius:12px;padding:5px;overflow:hidden}.day:hover{box-shadow:var(--sh2);transform:translateY(-2px)}.day.blank{cursor:default;box-shadow:none;background:0 0;border:0;transform:none}.day .num{color:var(--mu);font-size:12px;font-weight:600}.day .amt{margin-top:4px;font-size:11px;font-weight:700}.day.today{outline:2px solid var(--blue);outline-offset:-1px}.day.picked{box-shadow:0 0 0 2px var(--blue) inset}.day.s-full{background:linear-gradient(160deg,#d9f4e5,#bfebd2)}.day.s-half{background:linear-gradient(160deg,#fff0c9,#ffe29a)}.day.s-custom{background:linear-gradient(160deg,#dbe8ff,#bcd3fb)}.day.s-leave{background:linear-gradient(160deg,#fde3e1,#f8c6c3)}.day.s-holiday{background:linear-gradient(160deg,#eee5fc,#dccdf6)}.hname{color:#6a3fb0;margin-top:2px;font-size:10px;line-height:1.2}.chips{flex-wrap:wrap;gap:2px;margin-top:3px;display:flex}.chip{border-radius:6px;padding:1px 4px;font-size:10px}.c-full{background:#7ccf9a}.c-half{background:#f3c25b}.c-custom{background:#8db0f7}.c-leave{background:#ee8f8f}.c-holiday{background:#b79be0}.legend{color:var(--mu);flex-wrap:wrap;gap:12px;margin:12px 0;font-size:13px;display:flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.detail{background:var(--soft);animation:fadeUp .3s var(--ease) both;border-radius:12px;margin-bottom:12px;padding:12px}.holiday-form{background:var(--soft);animation:fadeUp .3s var(--ease) both;border-radius:12px;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:12px;display:flex}.stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;display:grid}.stats>div{background:linear-gradient(160deg,#f6faff,var(--soft));border:1px solid var(--bd);transition:transform .2s var(--ease),box-shadow .2s;border-radius:14px;padding:12px}.stats>div:hover{box-shadow:var(--sh);transform:translateY(-2px)}.stats small{color:var(--mu);font-size:12px;display:block}.stats b{font-size:17px}.msgform{background:var(--soft);border-radius:14px;margin-bottom:16px;padding:14px}.msgitem{border:1px solid var(--bd);border-left:4px solid var(--blue);animation:fadeUp .4s var(--ease) both;background:#fff;border-radius:12px;margin-bottom:10px;padding:12px;transition:box-shadow .2s}.msgitem:hover{box-shadow:var(--sh)}.msgitem.t-working{border-left-color:var(--ok)}.msgitem.t-holiday{border-left-color:#8a5cd6}.msghead{margin-bottom:6px}.newtag{background:var(--bad);color:#fff;border-radius:6px;margin-left:8px;padding:1px 6px;font-size:11px}.bigpay{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;border-radius:18px;margin-bottom:14px;padding:20px;box-shadow:0 14px 30px #1f6feb4d}.bigpay div{margin:4px 0;font-size:32px;font-weight:800}.bars{margin-top:8px}.barrow{align-items:center;gap:8px;margin:6px 0;font-size:13px;display:flex}.barrow .l{width:90px}.barrow .fill{background:linear-gradient(90deg,var(--blue2),var(--navy));min-width:3px;height:12px;animation:grow .8s var(--ease) both;border-radius:6px}.hero{color:#fff;background:radial-gradient(500px 220px at 90% -20%,#ffffff38,#0000),linear-gradient(135deg,#2f80ed,#154db3 70%,#0d3a8c);border-radius:22px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;padding:24px;display:flex;box-shadow:0 18px 40px #154db359}.hero h2{margin:0;font-size:26px}.hero p{opacity:.85;margin:4px 0 0}.heromonth{align-items:center;gap:8px;display:flex}.heromonth input{color:#fff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#ffffff29;border:1px solid #ffffff59}.heromonth button{color:var(--navy);background:#fff;border:0;font-weight:600}.kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px;display:grid}.kpi{border:1px solid var(--bd);box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease);background:#fff;border-radius:18px;padding:16px;position:relative;overflow:hidden}.kpi:hover{box-shadow:var(--sh2);transform:translateY(-4px)}.kpi:after{content:"";opacity:.12;background:var(--accent);border-radius:50%;width:90px;height:90px;position:absolute;top:-24px;right:-24px}.kpi .ico{background:color-mix(in srgb,var(--accent) 14%,white);border-radius:12px;place-items:center;width:38px;height:38px;margin-bottom:10px;font-size:18px;display:grid}.kpi small{color:var(--mu);font-size:12px;display:block}.kpi b{color:var(--tx);font-size:21px}.kpi.g{--accent:#1a9d5c}.kpi.r{--accent:#e0453f}.kpi.b{--accent:#1f6feb}.kpi.a{--accent:#e0a21c}.kpi.p{--accent:#7a56d6}.todaycard{border:1px solid var(--bd);box-shadow:var(--sh);background:#fff;border-radius:18px;margin-bottom:16px;padding:14px 16px}.todaylist{flex-wrap:wrap;gap:10px;display:flex}.todayitem{background:var(--soft);animation:pop .4s var(--ease) both;border-radius:14px;align-items:center;gap:10px;padding:8px 14px 8px 8px;display:flex}.todayitem small{color:var(--mu);display:block}.avatar{color:#fff;background:linear-gradient(135deg,var(--blue2),var(--navy));border-radius:50%;place-items:center;width:36px;height:36px;font-weight:700;display:grid}.dotstat{background:#c4cfdd;border-radius:50%;width:10px;height:10px}.dotstat.full{background:#3fae6a}.dotstat.half{background:#f0b429}.dotstat.custom{background:#4f7fe0}.dotstat.leave{background:#e26565}.charts{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;display:grid}.chartbox{border:1px solid var(--bd);min-width:0;box-shadow:var(--sh);transition:transform .25s var(--ease),box-shadow .25s var(--ease);background:#fff;border-radius:18px;padding:14px}.chartbox:hover{box-shadow:var(--sh2)}.chartbox h4{margin:0 0 8px;font-size:14px}.chartbox.wide2{grid-column:1/-1}.loginwrap{background:linear-gradient(135deg,#2f80ed 0%,#154db3 55%,#0d3a8c 100%);place-items:center;min-height:100vh;padding:20px;display:grid;position:relative;overflow:hidden}.loginwrap:before,.loginwrap:after{content:"";background:#ffffff14;border-radius:50%;position:absolute}.loginwrap:before{width:520px;height:520px;top:-180px;left:-160px}.loginwrap:after{width:420px;height:420px;bottom:-160px;right:-120px}.logincard{z-index:1;width:100%;max-width:390px;animation:fadeUp .7s var(--ease) both;background:#fff;border-radius:26px;padding:26px 28px 30px;position:relative;box-shadow:0 30px 70px #00145066}.loginlogo{width:170px;height:auto;margin:0 auto 4px;display:block}.logincard h2{text-align:center;margin:0}.logincard .muted{text-align:center;margin:4px 0 16px}.logincard label{color:var(--mu);margin:10px 0 4px;font-size:12px;font-weight:600;display:block}.logincard input{width:100%}.logincard button{width:100%;margin-top:16px;padding:12px;font-size:15px}.welcome{z-index:100;cursor:pointer;animation:welcome 2.4s var(--ease) both;background:linear-gradient(135deg,#2f80ed,#154db3 60%,#0d3a8c);place-items:center;display:grid;position:fixed;inset:0}.welcome-card{text-align:center;color:#fff;animation:welcomeCard 2.4s var(--ease) both}.welcome-card img{background:#fff;border-radius:26px;width:150px;padding:10px;box-shadow:0 20px 50px #0000004d}.welcome-card h1{margin:18px 0 0;font-size:30px;font-weight:600}.welcome-card h2{margin:2px 0 6px;font-size:38px}.welcome-card p{opacity:.85;margin:0}@media (width<=640px){.who span{display:none}.hero h2{font-size:21px}.brand img{height:48px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}@media (width>=1000px){.page{max-width:1100px}}@media (hover:none){button:hover,.kpi:hover,.day:hover,.chartbox:hover,.stats>div:hover,.msgitem:hover{transform:none}button:active{transform:scale(.96)}}@media (width<=1024px){button{min-height:44px}input,select,textarea{min-height:44px;font-size:16px}}@media (width<=768px){.tabs{z-index:30;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:#fffffff7;border-width:1px 0 0;border-radius:20px 20px 0 0;justify-content:space-around;gap:2px;margin:0;position:fixed;bottom:0;left:0;right:0;overflow:visible;box-shadow:0 -6px 24px #143c781f}.tabs button{border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;min-width:0;min-height:52px;padding:6px 2px;font-size:10.5px;display:flex;position:relative}.tabs .ti{font-size:20px;line-height:1}.tabs .tl{text-overflow:ellipsis;max-width:100%;overflow:hidden}.tabs button.on{background:var(--soft);color:var(--navy);box-shadow:none}.tabs .badge{margin:0;position:absolute;top:2px;right:14%}.page{padding:12px 12px calc(96px + env(safe-area-inset-bottom))}.topbar{padding:2px 12px}}@media (width<=640px){.card{border-radius:14px;padding:14px}.hero{border-radius:18px;padding:18px}.heromonth{width:100%}.heromonth input{flex:1}.kpis{grid-template-columns:repeat(2,1fr)}.kpi:last-child:nth-child(odd){grid-column:1/-1}.kpi b{font-size:18px}.charts{grid-template-columns:1fr}.row>*{flex:100%;min-width:0}.row .monthnav{flex:100%;justify-content:space-between}.seg button{flex:45%}.stats{grid-template-columns:repeat(2,1fr)}.bigpay div{font-size:26px}.cal{gap:3px}.day{border-radius:9px;min-height:54px;padding:3px}.day .num{font-size:11px}.day .amt{font-size:10px}.hname{display:none}.chip{padding:0 3px;font-size:9px}.todaylist{flex-direction:column}.todayitem{width:100%}.barrow .l{width:70px}.welcome-card h2{font-size:30px}.scroll{overflow:visible}table,thead,tbody,tr,td{width:100%;display:block}thead{display:none}tbody tr{border:1px solid var(--bd);box-shadow:var(--sh);background:#fff;border-radius:14px;margin-bottom:10px;padding:6px 12px}tbody tr:hover{background:#fff}td{border-bottom:1px solid var(--bd);white-space:normal;text-align:right;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;display:flex}td:last-child{border-bottom:0}td:before{content:attr(data-label);color:var(--mu);text-align:left;flex:none;font-size:12px;font-weight:600}td[data-label=""]{justify-content:flex-end}td[data-label=""]:before{display:none}td[colspan]{text-align:center;border:0;display:block}td[colspan]:before{display:none}input.small{width:110px}}.slipbox{background:var(--soft);border:1px solid var(--bd);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 14px;padding:12px 14px;display:flex}@media (width<=640px){.slipbox>*{flex:100%}}.balcard{border:1px solid var(--bd);box-shadow:var(--sh);background:#fff;border-radius:16px;margin-bottom:14px;padding:6px 16px 10px}.balcard h4{margin:12px 0 6px}.balrow{border-bottom:1px solid var(--bd);justify-content:space-between;gap:12px;padding:9px 0;display:flex}.balrow.tot{background:var(--soft);color:var(--navy);margin:0 -16px;padding:9px 16px;font-weight:700}.balrow.close{background:linear-gradient(135deg,var(--blue2),var(--navy));color:#fff;border-bottom:0;border-radius:12px;margin:8px -8px 0;padding:12px;font-size:17px}.balrow.close.adv{background:linear-gradient(135deg,#f3b93c,#d98e0b)}.backupbar{border:1px solid var(--bd);border-left:4px solid var(--ok);box-shadow:var(--sh);background:#fff;border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;display:flex}.backupbar.stale{background:#fffaf0;border-left-color:#e0a21c}@media (width<=640px){.backupbar>button{flex:100%}}.backupact{flex-wrap:wrap;align-items:center;gap:8px;display:flex}@media (width<=640px){.backupact>*{flex:100%}}