*{box-sizing:border-box}html,body,#root{color:#183454;background:#f4f7fb;min-height:100%;margin:0;font-family:Inter,Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}.ess-app-shell{max-width:680px;min-height:100vh;margin:auto;padding:76px 16px 92px}.app-head{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;border-bottom:1px solid #e2e9f0;align-items:center;width:min(680px,100%);height:64px;padding:0 18px;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.brand-logo{width:142px;height:auto;display:block}.brand-logo.compact{object-fit:contain;object-position:left center;width:74px;max-height:34px;margin-right:11px}.app-head>div:nth-child(2){gap:1px;display:grid}.app-head small{letter-spacing:1.2px;color:#75879b;font-size:9px}.app-head b{font-size:12px}.app-head>span{color:#128161;background:#e9f7f3;border-radius:999px;align-items:center;gap:6px;margin-left:auto;padding:6px 9px;font-size:10px;font-weight:800;display:flex}.app-head>span i,.live-dot{background:#1aaa7b;border-radius:50%;width:7px;height:7px}.app-hero{color:#fff;background:linear-gradient(135deg,#173a64,#176f7e);border-radius:20px;padding:25px 22px;position:relative;overflow:hidden;box-shadow:0 14px 35px #1843622e}.app-hero>span,.page-title>span,.verify-panel header>span,.enroll-copy>span{letter-spacing:1.2px;opacity:.76;font-size:9px;font-weight:800}.app-hero h1,.page-title h1,.verify-panel h1{margin:8px 0 6px;font-size:25px}.app-hero p,.page-title p,.verify-panel header p{opacity:.78;margin:0;font-size:12px;line-height:1.5}.app-hero>div{border-top:1px solid #ffffff29;align-items:center;gap:7px;margin-top:18px;padding-top:15px;font-size:11px;display:flex}.app-card{background:#fff;border:1px solid #e1e8ef;border-radius:16px;margin-top:14px;padding:18px;box-shadow:0 3px 12px #17325309}.attendance-card{align-items:end;gap:14px;display:flex}.attendance-card>div{flex:1}.attendance-card small{color:#698097;margin-left:7px;font-size:9px;font-weight:800}.attendance-card h2{margin:9px 0 4px;font-size:17px}.attendance-card p{color:#73879c;margin:0;font-size:11px}.live-dot{background:#aab8c5;display:inline-block}.live-dot.active{background:#18a878;box-shadow:0 0 0 4px #18a8781f}.primary{color:#fff;background:#176f7e;border:0;border-radius:10px;justify-content:center;align-items:center;gap:7px;padding:11px 15px;font-size:12px;font-weight:800;display:inline-flex}.primary:disabled{opacity:.48;cursor:not-allowed}.app-card header span{color:#7d8da0;letter-spacing:1px;font-size:9px;font-weight:800}.app-card header h2{margin:4px 0 13px;font-size:16px}.quick-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.quick-grid button{text-align:left;color:#1b425e;background:#f8fbfc;border:1px solid #dce7ed;border-radius:12px;gap:7px;padding:14px;display:grid}.quick-grid svg{color:#176f7e}.quick-grid b{font-size:12px}.quick-grid small{color:#7c8da0;font-size:10px}.trust-note{color:#17665f;background:#eaf6f4;border-radius:14px;align-items:center;gap:12px;margin-top:14px;padding:15px;display:flex}.trust-note svg{flex:none}.trust-note b,.trust-note small{display:block}.trust-note b{font-size:12px}.trust-note small{margin-top:3px;font-size:10px;line-height:1.5}.bottom-nav{z-index:20;width:min(680px,100%);padding:7px 8px max(7px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff7;border-top:1px solid #e1e8ef;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.bottom-nav button{color:#8493a3;background:0 0;border:0;place-items:center;gap:3px;padding:6px 2px;display:grid}.bottom-nav small{font-size:9px}.bottom-nav .active{color:#176f7e;font-weight:800}.page-title{padding:13px 5px 5px}.page-title h1{color:#183454}.page-title p{color:#73869a}.action-card{text-align:center;padding:24px 20px}.action-icon{color:#176f7e;background:#e9f6f4;border-radius:18px;place-items:center;width:54px;height:54px;margin:auto;display:grid}.action-card h2{margin:14px 0 7px}.action-card p{color:#718397;max-width:420px;margin:0 auto 18px;font-size:11px;line-height:1.55}.attendance-success .action-icon{color:#16936d;background:#e8f8f1}.attendance-success>small{color:#718397;font-size:10px}.wide-button{width:100%;min-height:44px}.history header h2{margin:0 0 9px}.history>div{border-top:1px solid #edf1f4;align-items:center;gap:12px;padding:12px 0;font-size:11px;display:flex}.history>div>span:first-child{flex:1;gap:3px;display:grid}.history small{color:#8291a2;text-transform:capitalize}.history em{text-transform:capitalize;color:#176f7e;font-style:normal;font-weight:800}.verify-panel{padding:8px 0}.verify-panel header{text-align:center;padding:10px}.camera-frame{aspect-ratio:3/4;background:#12263a;border-radius:22px;max-height:62vh;margin:14px auto;position:relative;overflow:hidden;box-shadow:0 18px 40px #10263c33}.camera-frame video{object-fit:cover;width:100%;height:100%;transform:scaleX(-1)}.camera-frame i{border:2px solid #ffffffd9;border-radius:48%;position:absolute;inset:12%}.camera-frame em{color:#fff;background:#081522b8;border-radius:99px;padding:7px 11px;font-size:10px;font-style:normal;position:absolute;bottom:17px;left:50%;transform:translate(-50%)}.camera-direction{z-index:2;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#081522c7;border:1px solid #ffffff57;border-radius:999px;justify-content:center;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 28px);padding:9px 14px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 8px 22px #0003}.camera-direction strong{font-size:27px;line-height:.7}.camera-direction b{white-space:nowrap;font-size:12px}.error{color:#b33c3c;text-align:center;background:#fff0f0;border-radius:9px;padding:10px;font-size:11px}.text-button{color:#6f8195;background:0 0;border:0;margin:10px auto;display:block}.enrollment-page{z-index:50;width:100%;max-width:520px;height:100dvh;padding:max(12px, env(safe-area-inset-top)) 16px max(10px, env(safe-area-inset-bottom));background:#f4f7fb;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;margin:auto;display:grid;position:fixed;inset:0;overflow:hidden}.enroll-copy{border-bottom:1px solid #dfe8ed;align-items:center;min-height:44px;padding-bottom:8px;display:flex}.enroll-copy>div{min-width:0}.enroll-copy span{letter-spacing:1.15px;color:#176f7e;font-size:8px;font-weight:900}.enroll-copy h1{margin:2px 0 1px;font-size:clamp(17px,5vw,22px)}.enroll-copy p{color:#718397;margin:0;font-size:10px;line-height:1.35}.enrollment-verification{grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;min-height:0;padding:0;display:grid;overflow:hidden}.enrollment-verification header{padding:0 4px}.enrollment-verification header>span{display:none}.enrollment-verification header h1{margin:0 0 2px;font-size:clamp(20px,6vw,27px)}.enrollment-verification header p{font-size:10px}.enrollment-progress{grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.enrollment-progress li{color:#7a8b9b;background:#fff;border:1px solid #dbe5ea;border-radius:10px;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:5px;min-width:0;padding:7px 6px;display:grid}.enrollment-progress li>span{background:#edf2f5;border-radius:50%;place-items:center;width:22px;height:22px;font-size:10px;font-weight:900;display:grid}.enrollment-progress small{font-size:8px;font-weight:800;line-height:1.15;overflow:hidden}.enrollment-progress li.current{color:#155d69;background:#edf8f7;border-color:#176f7e}.enrollment-progress li.current>span{color:#fff;background:#176f7e}.enrollment-progress li.done{color:#14805f;background:#f0faf6;border-color:#bde5d7}.enrollment-progress li.done>span{color:#fff;background:#19a376}.enrollment-page .camera-frame{aspect-ratio:auto;width:min(100%,410px);height:100%;min-height:0;max-height:none;margin:0 auto}.enrollment-page .error{z-index:3;margin:0;position:absolute;bottom:58px;left:12px;right:12px;box-shadow:0 8px 24px #10263c29}.enrollment-verification .wide-button{min-height:44px}.auto-capture-status{color:#176f7e;background:#edf8f7;border:1px solid #cce4df;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:7px 12px;display:flex}.auto-capture-status>svg{flex:none;width:18px}.auto-capture-status>span{gap:1px;display:grid}.auto-capture-status b{font-size:10px}.auto-capture-status small{color:#657d8d;font-size:8px}.enrollment-privacy{color:#667d90;justify-content:center;align-items:center;gap:6px;min-height:18px;font-size:9px;display:flex}.standalone-state{text-align:center;background:radial-gradient(circle at top,#e1f2f0,#f4f7fb 50%);place-content:center;justify-items:center;min-height:100vh;padding:25px;display:grid}.standalone-state>span{color:#176f7e;background:#fff;border-radius:20px;place-items:center;width:62px;height:62px;margin-top:20px;display:grid;box-shadow:0 14px 35px #1843621f}.standalone-state h1{margin:17px 0 6px}.standalone-state p{color:#718397;max-width:360px;line-height:1.6}.standalone-state em{color:#ac3e3e;background:#fff0f0;border-radius:9px;max-width:420px;padding:10px;font-size:12px;font-style:normal}.spin{animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.balance-grid{grid-template-columns:repeat(3,1fr);gap:9px;display:grid}.balance-grid>div{background:#f3f8fa;border-radius:11px;gap:5px;padding:12px;display:grid}.balance-grid span,.balance-grid small{color:#788b9d;font-size:9px}.balance-grid b{font-size:16px}.app-form{gap:14px;display:grid}.app-form label{color:#5e748b;gap:6px;font-size:11px;font-weight:800;display:grid}.app-form input,.app-form select,.app-form textarea{color:#173451;background:#fff;border:1px solid #d8e3ea;border-radius:9px;width:100%;padding:11px}.app-form textarea{resize:vertical;min-height:78px}.form-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.leave-summary{color:#17665f;background:#eaf6f4;border-radius:10px;grid-template-columns:minmax(0,1fr) auto;justify-content:space-between;gap:12px;padding:12px;font-size:12px;display:grid}.leave-summary>span{gap:3px;display:grid}.leave-summary>span:last-child{text-align:right}.leave-summary small{letter-spacing:.08em;font-size:8px}.leave-summary b{font-size:10px;line-height:1.4}.leave-duration-options,.half-day-options{background:#f4f7f9;border:1px solid #d8e3ea;border-radius:11px;grid-template-columns:repeat(3,1fr);gap:5px;padding:4px;display:grid}.half-day-options{grid-template-columns:repeat(2,1fr)}.leave-duration-options button,.half-day-options button{color:#718397;min-height:36px;font:inherit;background:0 0;border:0;border-radius:8px;padding:7px 5px;font-size:9px;font-weight:800}.leave-duration-options button.active,.half-day-options button.active{color:#176f7e;background:#fff;box-shadow:0 2px 8px #12364e1a}.ess-leave-calendar{background:#fff;border:1px solid #dce6eb;border-radius:13px;overflow:hidden}.ess-leave-calendar>header{text-align:center;border-bottom:1px solid #e8eef1;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px;padding:11px;display:grid}.ess-leave-calendar>header div{gap:2px;display:grid}.ess-leave-calendar>header span{color:#8293a3;letter-spacing:.12em;font-size:7px;font-weight:900}.ess-leave-calendar>header b{color:#173451;font-size:12px}.ess-leave-calendar>header button{color:#176f7e;background:#fff;border:1px solid #dce6eb;border-radius:9px;place-items:center;width:34px;height:34px;padding:0;display:grid}.leave-calendar-weekdays,.leave-calendar-days{grid-template-columns:repeat(7,1fr);display:grid}.leave-calendar-weekdays{padding:7px 7px 3px}.leave-calendar-weekdays span{color:#91a0ae;text-align:center;font-size:7px;font-weight:800}.leave-calendar-days{gap:3px;padding:4px 7px 9px}.leave-calendar-days>i,.leave-calendar-days>button{aspect-ratio:1;min-width:0}.leave-calendar-days>button{color:#28465f;background:#f8fafb;border:1px solid #0000;border-radius:8px;align-content:center;place-items:center;gap:1px;padding:2px;display:grid}.leave-calendar-days button b{font-size:9px}.leave-calendar-days button small{width:100%;color:inherit;text-overflow:ellipsis;text-transform:capitalize;white-space:nowrap;font-size:5px;line-height:1;overflow:hidden}.leave-calendar-days button.today{border-color:#176f7e}.leave-calendar-days button.selected{color:#fff;background:#176f7e}.leave-calendar-days button.in-range{color:#176f7e;background:#dff2ef}.leave-calendar-days button.holiday{color:#b44747;background:#fff0f0}.leave-calendar-days button.non-working{color:#a5afb9;background:#f2f4f6}.leave-calendar-days button.has-leave:not(.selected){color:#906a00;background:#fff6dc}.ess-leave-calendar>footer{color:#718397;border-top:1px solid #edf1f3;flex-wrap:wrap;gap:6px 10px;padding:8px 10px;font-size:7px;display:flex}.ess-leave-calendar>footer span{align-items:center;gap:4px;display:flex}.ess-leave-calendar>footer i{background:#176f7e;border-radius:2px;width:7px;height:7px}.ess-leave-calendar>footer i.has-leave{background:#e4b32d}.ess-leave-calendar>footer i.holiday{background:#d96b6b}.ess-leave-calendar>footer i.non-working{background:#c9d0d6}.leave-calendar-holidays{color:#718397;gap:4px;padding:0 10px 9px;font-size:8px;display:grid}.leave-calendar-holidays b{color:#b44747}.payslip-list article{border-top:1px solid #edf1f4;align-items:center;gap:12px;padding:14px 0;display:flex}.payslip-list article:first-child{border-top:0}.payslip-list article>span{color:#176f7e;background:#e9f3f6;border-radius:12px;place-items:center;width:42px;height:42px;display:grid}.payslip-list article>div{flex:1;gap:4px;display:grid}.payslip-list small{color:#77899d}.payslip-list button{color:#176f7e;background:#fff;border:1px solid #d8e5ea;border-radius:10px;place-items:center;width:37px;height:37px;display:grid}.profile-hero{text-align:center;padding:20px}.profile-hero>span{color:#176f7e;background:#dfeff0;border-radius:50%;place-items:center;width:76px;height:76px;margin:auto;font-size:21px;font-weight:900;display:grid}.profile-hero h1{margin:12px 0 5px}.profile-hero p{color:#718397;margin:0}.profile-list>div{border-top:1px solid #edf1f4;align-items:center;gap:11px;padding:13px 0;display:flex}.profile-list>div:first-child{border-top:0}.profile-list svg{color:#176f7e}.profile-list span{flex:1;gap:4px;display:grid}.profile-list small{color:#8190a0}.profile-list em{color:#19815f;font-size:9px;font-style:normal;font-weight:800}.logout-button{color:#b44747;background:#fff5f5;border:1px solid #efcece;border-radius:12px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:14px;padding:13px;font-weight:800;display:flex}.empty{color:#788a9d;text-align:center;place-items:center;gap:7px;padding:30px;display:grid}.empty svg{color:#a5b4c1}.toast{z-index:50;color:#fff;background:#173451;border-radius:10px;width:max-content;max-width:calc(100% - 30px);padding:11px 15px;font-size:11px;position:fixed;bottom:88px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #0f233740}.install-page{min-height:100vh;padding:max(24px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));background:radial-gradient(circle at 12% 0,#176f7e29,#0000 34%),linear-gradient(#f7fafc 0%,#edf4f6 100%)}.install-brand{justify-content:space-between;align-items:center;width:min(100%,480px);margin:0 auto 20px;display:flex}.install-brand span{color:#64798e;letter-spacing:1.25px;font-size:9px;font-weight:900}.install-card{text-align:center;background:#fff;border:1px solid #dce7ec;border-radius:24px;width:min(100%,480px);margin:auto;padding:26px 22px 22px;box-shadow:0 24px 60px #1734511f}.install-icon-wrap{width:92px;height:92px;margin:0 auto 18px;position:relative}.install-icon-wrap>img{border:1px solid #e1e8ed;border-radius:22px;width:92px;height:92px;display:block;box-shadow:0 12px 28px #17345124}.install-icon-wrap>i{color:#fff;background:#176f7e;border:3px solid #fff;border-radius:50%;place-items:center;width:34px;height:34px;display:grid;position:absolute;bottom:-7px;right:-7px}.install-card>h1{color:#183454;margin:8px 0;font-size:clamp(24px,6vw,30px);line-height:1.12}.install-card>p{color:#6d8194;max-width:390px;margin:0 auto;font-size:12px;line-height:1.6}.install-instructions{background:#f2f7f8;border-radius:15px;margin-top:20px;padding:16px}.install-primary{width:100%;min-height:48px;font-size:13px}.install-instructions>small,.install-success small{color:#64798d;margin-top:10px;font-size:10px;line-height:1.5;display:block}.install-instructions>em{color:#a65335;margin-top:10px;font-size:10px;font-style:normal;display:block}.install-success{color:#167858;text-align:left;align-items:center;gap:11px;display:flex}.install-success>svg{flex:none}.install-success span{display:grid}.install-success small{margin-top:3px}.install-instructions h2{color:#183454;margin:0 0 12px;font-size:16px}.safari-install ol{text-align:left;gap:10px;margin:0;padding:0;list-style:none;display:grid}.safari-install li{align-items:center;gap:10px;display:flex}.safari-install li>span{color:#176f7e;background:#dff0ed;border-radius:50%;flex:none;place-items:center;width:27px;height:27px;font-size:10px;font-weight:900;display:grid}.safari-install p{color:#506a7f;align-items:center;gap:4px;margin:0;font-size:11px;line-height:1.45;display:flex}.unsupported-browser>svg{color:#176f7e;margin-bottom:9px}.unsupported-browser>p{color:#64798d;margin:-4px auto 14px;font-size:11px;line-height:1.5}.install-page>footer{color:#667d90;text-align:center;justify-content:center;align-items:center;gap:7px;max-width:430px;margin:15px auto 0;font-size:10px;display:flex}.pairing-page{min-height:100vh;padding:max(24px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));background:radial-gradient(circle at 12% 0,#176f7e29,#0000 34%),linear-gradient(#f7fafc 0%,#edf4f6 100%)}.pairing-brand{justify-content:space-between;align-items:center;width:min(100%,520px);margin:0 auto 18px;display:flex}.pairing-brand span{color:#64798e;letter-spacing:1.25px;font-size:9px;font-weight:900}.pairing-card{background:#fff;border:1px solid #dce7ec;border-radius:24px;width:min(100%,520px);margin:auto;overflow:hidden;box-shadow:0 24px 60px #1734511f}.pairing-copy{text-align:center;padding:22px 22px 16px}.eyebrow{color:#176f7e;letter-spacing:1.25px;font-size:9px;font-weight:900}.pairing-copy h1{color:#183454;margin:8px 0;font-size:clamp(23px,6vw,29px);line-height:1.12}.pairing-copy p{color:#6d8194;max-width:420px;margin:auto;font-size:12px;line-height:1.55}.qr-scanner{background:linear-gradient(145deg,#173451,#10273e);border-radius:18px;min-height:272px;margin:0 16px;position:relative;overflow:hidden}.qr-scanner video{object-fit:cover;width:100%;height:272px;display:block}.scan-frame{width:190px;height:190px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scan-frame i{filter:drop-shadow(0 2px 5px #00000059);border-style:solid;border-color:#fff;width:38px;height:38px;position:absolute}.scan-frame i:first-child{border-width:3px 0 0 3px;border-radius:10px 0 0;top:0;left:0}.scan-frame i:nth-child(2){border-width:3px 3px 0 0;border-radius:0 10px 0 0;top:0;right:0}.scan-frame i:nth-child(3){border-width:0 0 3px 3px;border-radius:0 0 0 10px;bottom:0;left:0}.scan-frame i:nth-child(4){border-width:0 3px 3px 0;border-radius:0 0 10px;bottom:0;right:0}.qr-scanner.active .scan-frame:after{content:"";background:#43e0c2;height:2px;animation:2s ease-in-out infinite scan;position:absolute;top:50%;left:6px;right:6px;box-shadow:0 0 14px #43e0c2}@keyframes scan{0%,to{transform:translateY(-72px)}50%{transform:translateY(72px)}}.scanner-status{color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#091927c7;border-radius:999px;justify-content:center;align-items:center;gap:7px;padding:9px 12px;font-size:11px;display:flex;position:absolute;bottom:12px;left:12px;right:12px}.pairing-error{color:#a83c3c;background:#fff0f0;border-radius:10px;align-items:flex-start;gap:8px;margin:12px 16px 0;padding:11px 12px;font-size:11px;line-height:1.45;display:flex}.pairing-error svg{flex:none;width:16px}.pairing-retry{width:calc(100% - 32px);margin:12px 16px 0}.pairing-steps{gap:9px;margin:0;padding:17px 22px 14px;list-style:none;display:grid}.pairing-steps li{align-items:center;gap:10px;display:flex}.pairing-steps li>span{color:#176f7e;background:#e8f5f3;border-radius:50%;flex:none;place-items:center;width:24px;height:24px;font-size:10px;font-weight:900;display:grid}.pairing-steps p{color:#5f7489;margin:0;font-size:11px;line-height:1.4}.manual-toggle{color:#176f7e;background:#f8fbfc;border:0;border-top:1px solid #e8eef2;justify-content:center;align-items:center;gap:7px;width:100%;padding:14px;font-size:11px;font-weight:800;display:flex}.manual-pairing{border-top:1px solid #e8eef2;gap:9px;padding:16px;display:grid}.manual-pairing label{color:#5e748b;font-size:10px;font-weight:800}.manual-pairing input{color:#173451;border:1px solid #d5e1e8;border-radius:10px;width:100%;padding:12px}.pairing-page>footer{color:#667d90;justify-content:center;align-items:center;gap:7px;margin:15px auto 0;font-size:10px;display:flex}@media (width<=720px){.enrollment-page,.ess-app-shell{padding-left:12px;padding-right:12px}.balance-grid{grid-template-columns:1fr}.attendance-card{flex-direction:column;align-items:stretch}.attendance-card .primary{width:100%}}