:root{--blue:#087cf1;--blue2:#287ff7;--navy:#111f4d;--ink:#1c2b45;--muted:#8290a7;--border:#e6ebf3;--bg:#f7f9fd;--green:#19a97b;--amber:#e9a23b;--red:#e35963;--shadow:0 12px 40px rgba(30,55,100,.05)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}a{color:var(--blue)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:31px;letter-spacing:-1px}h2{font-size:22px;letter-spacing:-.6px}h3{font-size:16px;letter-spacing:-.2px}.muted{color:var(--muted)}.small{font-size:12px}.auth-screen{display:grid;grid-template-columns:47% 53%;min-height:100vh;background:white}.auth-brand{padding:72px clamp(35px,7vw,130px);background:linear-gradient(155deg,#f0f7ff 0%,#e5f5ff 70%,#e1faff 100%);display:flex;flex-direction:column;position:relative;overflow:hidden}.auth-brand:before{content:'';width:660px;height:660px;border:90px solid rgba(15,131,244,.06);border-radius:50%;position:absolute;left:-320px;bottom:-280px}.auth-brand img{width:193px;height:auto;max-height:61px;object-fit:contain;object-position:left center;margin-bottom:auto}.auth-brand h1{font-size:clamp(40px,4vw,64px);max-width:450px;line-height:1.09;color:#102454;margin:140px 0 22px;letter-spacing:-2.6px}.auth-brand p{color:#7284a6;font-size:17px;line-height:1.7;max-width:350px}.auth-art{display:flex;flex-direction:column;gap:13px;margin-top:56px}.mini-tile{background:#ffffffbd;border:1px solid #e6f0ff;box-shadow:0 10px 24px #3978b20b;border-radius:13px;padding:15px 20px;max-width:315px;font-weight:600;color:#335679}.mini-tile span{color:var(--blue);font-size:21px;margin-right:13px}.auth-foot{font-size:10px;letter-spacing:2px;margin-top:auto;padding-top:80px;color:#8097bd}.auth-form-area{display:flex;justify-content:center;align-items:center;padding:38px}.auth-card{width:min(430px,100%)}.welcome-dot{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:#e8f3ff;color:var(--blue);font-size:29px;margin-bottom:25px}.auth-card h2{font-size:32px;color:var(--navy);margin-bottom:8px;letter-spacing:-1px}.auth-card>p{color:#8a97a9;margin-bottom:35px}form label{display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:700;color:#465671;margin-bottom:19px}input,textarea,select{border:1px solid #e0e7f2;border-radius:10px;padding:12px 13px;outline:none;background:#fff;color:#26374e;min-width:0;width:100%;transition:border .17s,box-shadow .17s}input:focus,textarea:focus,select:focus{border-color:#6eb6ff;box-shadow:0 0 0 4px #ecf6ff}textarea{resize:vertical;min-height:90px}input[type=checkbox]{width:auto;accent-color:var(--blue)}.btn{border:1px solid var(--border);border-radius:10px;background:#fff;padding:11px 15px;font-size:12px;font-weight:700;color:#354862;display:inline-flex;align-items:center;gap:9px;justify-content:center;white-space:nowrap;transition:transform .18s,background .18s}.btn:hover:not(:disabled){transform:translateY(-1px);background:#f8fbff}.btn.primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 7px 16px #0b7bf222}.btn.primary:hover:not(:disabled){background:#076bd2}.btn.danger{border-color:#ffced1;color:#d8434d;background:#fff4f4}.btn.sm{font-size:11px;padding:8px 11px}.wide{width:100%}.auth-note{display:flex;align-items:center;gap:8px;color:#9ba6b6;font-size:11px!important;margin-top:24px}.link-btn{border:0;background:transparent;color:var(--blue);font-weight:700;padding:16px 0}.secret{display:block;letter-spacing:2px;padding:15px;background:#f2f7ff;border-radius:8px;text-align:center;overflow-wrap:anywhere;margin:10px 0}.info-box{line-height:1.6;color:#536884;background:#ecf5ff;padding:13px;border-radius:9px;font-size:12px}.sidebar{position:fixed;top:0;bottom:0;width:250px;background:white;border-right:1px solid var(--border);z-index:15;display:flex;flex-direction:column;padding:28px 17px 20px}.sidebar-head{padding:0 14px 22px;display:flex;align-items:center;gap:9px}.sidebar-head img{width:143px;height:45px;object-fit:contain;object-position:left}.workspace-label{font-size:8px;color:#94a3b7;letter-spacing:1.6px;border-left:1px solid #e1e7f0;padding-left:9px;margin-left:-10px;align-self:center;margin-top:24px}.sidebar-workspace{display:flex;align-items:center;gap:9px;background:#f5f8fe;border:1px solid #e9eef8;padding:11px 10px;border-radius:11px;margin-bottom:29px}.workspace-avatar{background:#e0edff;color:var(--blue);width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-weight:850;font-size:17px}.sidebar-workspace b{font-size:11px;color:#213654}.sidebar-workspace small{display:block;font-size:10px;color:#8997a8;margin-top:3px}.chevron{margin-left:auto;color:#8a98ad}.nav-label{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#9daabd;padding:0 13px;margin-bottom:10px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;color:#77869a;font-size:12px;font-weight:650;border-radius:10px;margin:3px 0;background:transparent;border:0;width:100%;text-align:left}.nav-item:hover{background:#f4f8ff}.nav-item.active{color:var(--blue);background:#eaf4ff}.nav-item svg{width:18px;height:18px}.nav-subtitle{font-size:9px;letter-spacing:1.4px;color:#a0acbd;font-weight:800;padding:18px 14px 7px}.sidebar-bottom{margin-top:auto}.help-panel{background:linear-gradient(125deg,#eaf4ff,#f6faff);border-radius:12px;padding:15px;margin:10px 0 14px;display:flex;flex-direction:column;gap:5px}.help-star{font-size:17px;color:var(--blue)}.help-panel b{font-size:12px}.help-panel small{font-size:10px;color:#7a93b2}.logout{border:0;background:none;color:#8492a7;font-size:12px;padding:12px;display:flex;align-items:center;width:100%}.main-area{margin-left:250px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:79px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,3.5vw,58px);gap:10px}.breadcrumb{color:#a3acba;font-size:12px}.breadcrumb span{padding:0 9px;color:#c9d1df}.breadcrumb b{font-weight:750;color:#40516a}.top-right{display:flex;align-items:center;gap:18px}.date-pill{font-size:11px;font-weight:600;color:#8190a4}.icon-btn{border:1px solid #e9edf5;background:white;border-radius:9px;width:37px;height:37px;display:grid;place-items:center;position:relative;font-size:17px;color:#6f8099}.bell-dot{width:5px;height:5px;border-radius:50%;background:#ef656f;position:absolute;top:7px;right:9px}.top-divider{height:30px;width:1px;background:#e8ecf4}.profile-chip{display:flex;align-items:center;gap:10px}.initials{width:35px;height:35px;border-radius:10px;background:#dcecff;color:#0d7df0;display:grid;place-items:center;font-weight:800;font-size:12px}.profile-words{display:flex;flex-direction:column;gap:2px}.profile-words b{font-size:11px;color:#26364f}.profile-words small{font-size:10px;color:#8c9bb0;text-transform:capitalize}.page-content{width:100%;max-width:1640px;margin:auto;padding:34px clamp(22px,3.5vw,58px);flex:1}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:27px}.page-kicker{color:var(--blue);font-size:10px;text-transform:uppercase;letter-spacing:1.7px;font-weight:800;margin-bottom:9px}.page-header h1{font-size:28px;letter-spacing:-1px;color:var(--navy);margin-bottom:7px}.page-header p{color:#8a97aa;font-size:12px;line-height:1.6}.header-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.panel{background:white;border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow);overflow:hidden}.panel.pad{padding:21px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}.panel-heading h3{font-size:14px;color:var(--navy)}.subtext{color:#9ca7b8;font-size:11px;margin-top:5px}.grid-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat-card{background:white;border:1px solid var(--border);border-radius:14px;padding:20px;position:relative;box-shadow:var(--shadow);min-height:143px}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#8b99ac;font-size:11px;font-weight:650}.stat-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#eaf4ff;color:var(--blue)}.stat-icon svg{width:18px;height:18px}.stat-icon.green{background:#e8f9f3;color:#14a87b}.stat-icon.amber{background:#fff5e8;color:#e3a13a}.stat-icon.purple{background:#f2edff;color:#8964de}.stat-value{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:-1px;margin-top:14px}.stat-foot{font-size:10px;color:#9aa7b8;margin-top:7px}.two-cols{display:grid;grid-template-columns:1.45fr 1fr;gap:20px;margin-bottom:22px}.split-even{grid-template-columns:1fr 1fr}.welcome-card{background:linear-gradient(105deg,#157cf2,#1aa6f7);color:white;border-radius:15px;padding:25px 27px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:170px;position:relative;overflow:hidden}.welcome-card:after{content:'✦';position:absolute;right:32px;top:-53px;color:#ffffff24;font-size:220px;transform:rotate(-20deg)}.welcome-card .eyebrow{font-size:10px;letter-spacing:1px;font-weight:700;opacity:.8;margin-bottom:10px}.welcome-card h2{font-size:24px;letter-spacing:-.8px}.welcome-card p{font-size:12px;line-height:1.7;opacity:.9;margin-top:9px;max-width:520px}.welcome-card .btn{margin-top:18px;background:white;color:#167bf1;border:0;position:relative;z-index:1}.attendance-today{display:grid;gap:16px}.time-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.time-box{background:#f7f9fd;border-radius:10px;padding:14px}.time-box small{font-size:10px;color:#9ca8b6;display:block;margin-bottom:7px}.time-box strong{font-size:19px;color:#142348}.status{display:inline-flex;align-items:center;border-radius:50px;font-size:10px;font-weight:750;padding:6px 10px;white-space:nowrap;background:#eaf5ff;color:#2b8bea}.status.green{background:#e5f8f1;color:#17a976}.status.red{background:#fff0f0;color:#d54e55}.status.amber{background:#fff5e8;color:#cf8830}.status.purple{background:#f4f0ff;color:#825bc9}.status.gray{background:#f0f3f7;color:#8692a4}.status:before{content:'';width:5px;height:5px;border-radius:100%;background:currentColor;margin-right:6px}.notice-card{background:#f0f7ff;border:1px solid #dfedff;color:#42698d;font-size:11px;padding:13px;border-radius:10px;line-height:1.65}.notice-card strong{color:#1b69ae}.notice-card.warning{background:#fff5e9;border-color:#ffe2c4;color:#935a17}.notice-card.danger{background:#fff0f1;border-color:#ffd6da;color:#a63c44}.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:11px;min-width:590px}.data-table th{text-align:left;font-size:10px;color:#9aa7bb;letter-spacing:.4px;padding:13px 12px;background:#fafbfe;border-bottom:1px solid #eff2f6;font-weight:750;white-space:nowrap}.data-table td{padding:14px 12px;border-bottom:1px solid #f0f2f6;color:#52637a;vertical-align:middle}.data-table tr:last-child td{border-bottom:0}.cell-strong{font-weight:750;color:#223550}.cell-sub{color:#a0acba;font-size:10px;margin-top:4px}.badge-blue{font-size:9px;border-radius:7px;background:#eff5ff;color:#247bef;padding:5px 7px;font-weight:800}.empty{text-align:center;color:#94a3b9;padding:40px 20px;font-size:12px}.empty .empty-icon{font-size:30px;display:block;color:#bdd4f2;margin-bottom:12px}.bar{height:7px;background:#edf2f8;border-radius:99px;overflow:hidden;margin-top:9px}.bar-fill{background:var(--blue);height:100%;border-radius:99px}.bar-fill.green{background:#20b184}.bar-fill.amber{background:#e9a440}.leave-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:22px}.leave-card{padding:20px;background:white;border:1px solid var(--border);border-radius:14px}.leave-card .line{height:5px;border-radius:5px;background:#e5edfa;overflow:hidden;margin:16px 0 11px}.leave-card .line>span{display:block;height:100%;background:var(--blue);border-radius:5px}.leave-card:nth-child(2) .line>span{background:#28b19c}.leave-card:nth-child(3) .line>span{background:#f1a85e}.leave-card strong{font-size:28px;letter-spacing:-1px;color:var(--navy)}.leave-card small{font-size:11px;color:#9eabbd}.leave-card h3{font-size:12px;color:#455671;margin-bottom:12px}.leave-foot{display:flex;justify-content:space-between;color:#95a3b5;font-size:10px}.mini-list{display:grid;gap:10px}.announcement{border:1px solid #edf1f7;border-radius:11px;padding:14px;display:flex;gap:11px}.announcement-icon{width:34px;height:34px;display:grid;place-items:center;color:var(--blue);background:#edf6ff;border-radius:9px;flex:none}.announcement b{font-size:12px;color:#253b59}.announcement p{color:#8e9cae;font-size:11px;line-height:1.6;margin-top:6px;white-space:pre-wrap}.announcement small{display:block;color:#a5afbe;font-size:10px;margin-top:7px}.action-small{border:0;background:#ebf4ff;color:#157af0;padding:6px 8px;border-radius:6px;font-weight:700;font-size:10px;margin-right:4px}.action-small.approve{background:#eaf8ee;color:#1a966c}.action-small.reject{background:#fff0f1;color:#d64d54}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{margin:0}.form-grid .full{grid-column:1/-1}.input-help{color:#9aa6b9;font-size:10px;line-height:1.6}.form-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}.modal-wrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center}.modal-shade{position:absolute;inset:0;background:#101a35a1;backdrop-filter:blur(2px)}.modal-card{position:relative;width:min(660px,calc(100vw - 26px));max-height:90vh;overflow-y:auto;background:white;border-radius:18px;box-shadow:0 20px 100px #111a3450}.modal-top{display:flex;align-items:start;justify-content:space-between;gap:10px;padding:26px 27px 17px;border-bottom:1px solid #eef1f6}.modal-top h2{font-size:21px;color:var(--navy)}.modal-top p{color:#9aa9ba;font-size:12px;margin-top:7px}.modal-card #modal-body{padding:24px 27px 27px}.app-footer{padding:18px clamp(22px,3.5vw,58px);border-top:1px solid #edf0f6;color:#a0abba;font-size:10px;display:flex;justify-content:space-between}.lunch-alert{margin:20px clamp(22px,3.5vw,58px) 0;display:flex;align-items:center;gap:13px;background:#fff8e9;border:1px solid #ffe2a8;padding:14px 17px;border-radius:12px}.lunch-icon{font-size:22px}.lunch-alert b{font-size:12px;color:#986b26}.lunch-alert p{font-size:11px;color:#a88856;margin-top:4px}.lunch-close{margin-left:auto;border:0;background:transparent;font-size:18px;color:#ad915f}#toast-region{position:fixed;bottom:22px;right:24px;z-index:400;display:grid;gap:10px}.toast{border-radius:11px;box-shadow:0 12px 40px #18274b33;background:#142b51;color:white;padding:14px 19px;font-size:12px;max-width:360px}.toast.error{background:#a83e4c}.muted-link{font-size:11px;color:var(--blue);font-weight:700;border:0;background:transparent}.quick-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.metric-item{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f3f9;padding:13px 0;gap:10px}.metric-item:last-child{border:0}.metric-item b{font-size:12px}.metric-item small{font-size:10px;color:#96a5b8}.metric-item strong{color:var(--navy);font-size:14px}.progress-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;margin-bottom:17px;font-size:11px;color:#73849b}.progress-row .bar{margin:0}.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #e7eefa;color:#6d82a0;border-radius:8px;font-size:10px;font-weight:700}.feature-note{margin-top:15px;color:#a0aabb;font-size:10px;line-height:1.6}.mobile-menu{display:none}.right-align{text-align:right}.select-mini{font-size:11px;padding:7px 8px;min-width:120px}.pill-tabs{display:flex;gap:6px}.pill-tabs button{border:1px solid #e8edf4;padding:9px 13px;border-radius:8px;background:#fff;color:#8c9bac;font-size:11px;font-weight:700}.pill-tabs button.active{border-color:#d9eaff;background:#edf6ff;color:#1684f5}.value-positive{color:#17a575!important;font-weight:750}.loading{display:flex;align-items:center;justify-content:center;height:55vh;color:#9aa9ba}.mobile-backdrop{display:none}
@media(max-width:1150px){.grid-stats{grid-template-columns:repeat(2,1fr)}.two-cols{grid-template-columns:1fr}.auth-brand{padding:45px}.auth-brand h1{margin-top:120px}}
@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:transform .25s;width:260px}.sidebar.show{transform:translateX(0)}.mobile-backdrop.show{display:block;position:fixed;inset:0;background:#15274b55;z-index:13}.main-area{margin-left:0}.mobile-menu{display:grid}.topbar{height:68px}.profile-words,.date-pill{display:none}.auth-screen{grid-template-columns:1fr}.auth-brand{display:none}.auth-form-area{min-height:100vh}.page-content{padding:25px 20px}}
@media(max-width:520px){.grid-stats,.leave-grid{grid-template-columns:1fr 1fr}.stat-card{padding:15px}.stat-value{font-size:23px}.page-header{flex-direction:column}.page-header h1{font-size:24px}.form-grid{grid-template-columns:1fr}.two-cols{gap:14px}.welcome-card h2{font-size:21px}.topbar{padding:0 15px}.page-content{padding:20px 14px}.lunch-alert{margin:12px 14px 0}.leave-card{padding:13px}.leave-card strong{font-size:22px}.app-footer{padding:16px}.auth-card h2{font-size:25px}.profile-chip{gap:0}}