:root{--bg:#f3f7fb;--text:#101727;--muted:#7b8794;--teal:#0aa77c;--cyan:#17a6df;--green:#43b757;--red:#ff463d;--orange:#ff9700;--purple:#9c27b0;--blue:#4389ed;--line:#e7edf3;--card:#fff;--shadow:0 10px 28px rgba(21,61,89,.10);--radius:26px;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}body{min-height:100vh}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.mobile-shell{width:100%;max-width:540px;min-height:100vh;margin:0 auto;background:linear-gradient(#fff 0,#f3f7fb 170px);position:relative;box-shadow:0 0 25px rgba(0,0,0,.06)}.app-header{height:82px;padding:12px 16px;display:flex;align-items:center;gap:14px;background:#fff;position:sticky;top:0;z-index:30;border-bottom:1px solid #edf1f5}.icon-btn{border:0;background:#eaf8f4;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:27px;color:#059c76}.header-user{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.header-user b{font-size:20px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-user small{display:block;color:var(--muted);font-size:15px;margin-top:3px}.avatar{width:48px;height:48px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-weight:800;font-size:22px;flex:0 0 auto}.avatar-purple{background:var(--purple)}.avatar-red{background:#ff5650}.avatar-xl{width:76px;height:76px;font-size:35px}.avatar-lg{width:72px;height:72px;font-size:32px}.page-content{padding:18px 18px calc(100px + var(--safe-bottom));min-height:calc(100vh - 82px)}.hero-card{padding:28px 30px;border-radius:34px;background:linear-gradient(120deg,#079c78,#31d18c);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 16px 34px rgba(10,167,124,.20)}.hero-card span{font-size:19px}.hero-card h1{font-size:30px;margin:11px 0}.hero-card p{font-size:17px;margin:0;color:#def7ec}.hero-card.compact{background:linear-gradient(120deg,#17a6df,#0ecb86);margin-bottom:22px}.hero-card.compact p{line-height:1.5}.section-block{margin-top:28px}.section-block h2,.panel-card h2{font-size:27px;margin:0 0 18px}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.stat-card{background:#fff;border:2px solid #d9eee8;border-radius:28px;padding:22px 20px;min-height:160px;position:relative;box-shadow:0 8px 20px rgba(0,0,0,.03)}.stat-card strong{font-size:39px;position:absolute;right:22px;top:23px}.stat-card span:last-child{display:block;margin-top:20px;color:#667480;font-size:17px}.stat-icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:28px}.stat-teal .stat-icon{background:#e3f7f2;color:#079d79}.stat-green{border-color:#e1f1df}.stat-green .stat-icon{background:#eef8ec;color:#43b757}.stat-red{border-color:#ffd7d3}.stat-red .stat-icon{background:#fff0ef;color:#ff463d}.stat-orange{border-color:#ffe6bd}.stat-orange .stat-icon{background:#fff5e6;color:#ff9700}.section-title-row>div{display:flex;align-items:center;gap:12px}.section-icon,.dept-icon{width:52px;height:52px;border-radius:16px;background:#e3f7f2;color:#079d79;display:grid;place-items:center;font-size:27px}.department-card{display:block;background:#fff;border-radius:28px;padding:22px;margin-top:16px;box-shadow:var(--shadow)}.department-top{display:flex;align-items:center;gap:14px}.department-top>div{flex:1}.department-top h3{font-size:27px;margin:0 0 5px}.department-top p{margin:0;color:#8a98a4}.go{font-size:38px;color:#8dbeb2}.dept-mini-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}.mini{border-radius:20px;padding:14px 5px;text-align:center;border:1px solid}.mini span,.mini b,.mini small{display:block}.mini b{font-size:28px;margin:6px 0}.mini small{font-size:12px}.mini.teal{background:#eaf8f5;color:#069f79;border-color:#bde8dc}.mini.green{background:#eff9ef;color:#48b85b;border-color:#ceeacb}.mini.red{background:#fff1f0;color:#ff463d;border-color:#ffd7d3}.mini.orange{background:#fff6e9;color:#ff9700;border-color:#ffe5b9}.bottom-nav{position:fixed;z-index:40;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);height:76px;padding-bottom:var(--safe-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.97);border-top:1px solid #e7edf3;box-shadow:0 -8px 22px rgba(0,0,0,.06)}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#95a0aa;font-size:20px}.bottom-nav small{font-size:11px}.bottom-nav a.active{color:#079d79;font-weight:700}.drawer{display:none;position:fixed;inset:0;z-index:80}.drawer.open{display:block}.drawer-backdrop{position:absolute;inset:0;background:rgba(6,20,30,.38)}.drawer-panel{position:absolute;left:0;top:0;bottom:0;width:min(340px,84%);background:#fff;padding:30px 20px;box-shadow:15px 0 40px rgba(0,0,0,.18)}.drawer-profile{text-align:center;padding-bottom:20px;border-bottom:1px solid var(--line)}.drawer-profile img{width:88px;height:88px;object-fit:contain;display:block;margin:0 auto 8px}.drawer-profile strong{display:block;font-size:22px}.drawer-profile small{color:var(--muted)}.drawer nav{margin-top:16px}.drawer nav a{display:flex;gap:15px;padding:15px;border-radius:15px;font-size:17px}.drawer nav a:hover{background:#edf9f6;color:#079d79}.page-heading{display:flex;align-items:center;gap:17px;margin:0 2px 18px}.page-heading>a{font-size:36px}.page-heading h1{margin:0;font-size:32px}.page-heading p{margin:4px 0 0;color:#8995a0;font-size:17px}.page-heading.simple{padding-top:0}.summary-strip{background:#fff;border-radius:28px;padding:25px 12px;box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}.summary-strip div{display:flex;flex-direction:column;align-items:center;gap:9px}.summary-strip b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:24px}.summary-strip span{font-size:13px;color:#68737c}.teal-circle{background:#e6f8f3;color:#08a17c}.green-circle{background:#edf8ed;color:#43b757}.red-circle{background:#fff0ef;color:#ff463d}.orange-circle{background:#fff4e2;color:#ff9700}.purple-circle{background:#f4e7f7;color:#9c27b0}.employee-list{margin-top:20px;display:grid;gap:16px}.employee-card{background:#fff;padding:20px;border-radius:25px;display:flex;align-items:center;gap:18px;box-shadow:0 7px 18px rgba(0,0,0,.04)}.employee-card>div{flex:1}.employee-card h3{font-size:23px;margin:0 0 8px}.status{display:inline-block;padding:7px 12px;border-radius:10px;font-weight:700}.status-absent{background:#ffe2df;color:#f0443b}.profile-heading{display:flex;align-items:center;gap:12px;margin:-8px 0 20px}.profile-heading>a{font-size:36px}.profile-heading>div{flex:1}.profile-heading h2{margin:0;font-size:23px}.profile-heading p{margin:3px 0 0;color:#81909b}.bell{font-size:28px}.three-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.month-stat{text-align:center;border-radius:22px;padding:20px 8px;border:2px solid}.month-stat span,.month-stat b,.month-stat small{display:block}.month-stat span{font-size:30px}.month-stat b{font-size:38px;margin:7px}.month-stat small{font-size:15px;color:#65717b}.month-stat.green{background:#edf9f6;border-color:#c7ebe1;color:#0aaa7f}.month-stat.red{background:#fff1f0;border-color:#ffd8d4;color:#ef493f}.month-stat.blue{background:#edf4ff;border-color:#cfddf9;color:#4389ed}.segmented{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:28px;overflow:hidden;margin:26px 0 22px}.segmented button{border:0;background:#fff;padding:15px 5px;color:#1a9ab3;font-size:17px}.segmented .active{background:#1197b6;color:#fff;border-radius:28px;font-weight:700}.list-heading{display:flex;align-items:center;justify-content:space-between}.list-heading h2{font-size:27px}.list-heading span{color:#6f7780}.attendance-days{display:grid;gap:12px}.day-card{display:grid;grid-template-columns:120px 1fr 20px;align-items:center;padding:20px;border-radius:22px;border:2px solid;background:#fff}.day-card>div:first-child{text-align:center}.day-card small,.day-card b,.day-card strong,.day-card span{display:block}.day-card b{font-size:28px}.day-card strong{font-size:24px}.day-card span{color:#9a9fa4;margin-top:5px}.day-card i{width:14px;height:14px;border-radius:50%}.day-card.absent{background:#fff0ef;border-color:#ff463d}.day-card.absent i{background:#ff463d}.day-card.off{background:#f7eafa;border-color:transparent}.day-card.off strong{color:#9c27b0}.day-card.off i{background:#9c27b0}.day-card.late{background:#fff5e8;border-color:transparent}.day-card.late i{background:#ff9700}.panel-card{background:#fff;border-radius:28px;padding:24px;margin-top:20px;box-shadow:var(--shadow)}.donut{width:300px;max-width:88%;aspect-ratio:1;border-radius:50%;margin:10px auto 18px;background:conic-gradient(#ff3e36 0 87.5%,#ff9900 87.5% 100%);position:relative}.donut-hole{position:absolute;inset:31%;background:#fff;border-radius:50%}.donut-label{position:absolute;color:#fff;font-weight:700;text-align:center}.absent-label{left:18%;top:40%}.late-label{right:10%;top:49%}.legend{display:flex;flex-direction:column;gap:12px}.legend span{display:flex;align-items:center;gap:8px}.dot{width:14px;height:14px;border-radius:50%;display:inline-block}.dot.orange{background:#ff9700}.dot.red{background:#ff463d}.stats-inline{display:grid;grid-template-columns:repeat(3,1fr);margin:10px 0 28px}.stats-inline div{text-align:center}.stats-inline b,.stats-inline span,.stats-inline strong{display:block;margin:6px auto}.stats-inline b{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:23px}.stats-inline span{color:#8d9398}.orange-text{color:#ff9700}.red-text{color:#ff463d}.purple-text{color:#9c27b0}.working-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;color:#8d9398}.working-line b{color:#111}.center-title{text-align:center;font-size:32px;margin:0 0 28px}.action-banner{width:100%;border:0;border-radius:28px;padding:23px;background:linear-gradient(120deg,#19a6df,#0bbb81);color:#fff;display:flex;align-items:center;text-align:left;box-shadow:0 13px 28px rgba(0,160,150,.19)}.action-banner .banner-icon{width:72px;height:72px;border-radius:20px;background:rgba(255,255,255,.17);display:grid;place-items:center;font-size:28px;margin-right:18px}.action-banner span:nth-child(2){flex:1}.action-banner b,.action-banner small{display:block}.action-banner b{font-size:25px}.action-banner small{font-size:15px;margin-top:7px;color:#dff7f2}.action-banner i{font-size:40px}.empty-card{background:#fff;border-radius:28px;min-height:250px;display:grid;place-items:center;text-align:center;box-shadow:var(--shadow);padding:30px}.empty-icon{font-size:70px;color:#c9c9c9}.empty-card p{font-size:22px;color:#888}.floating-plus{position:fixed;right:max(24px,calc((100vw - 540px)/2 + 24px));bottom:calc(98px + var(--safe-bottom));width:70px;height:70px;border:0;border-radius:22px;background:#119bb7;color:#fff;font-size:42px;box-shadow:0 10px 20px rgba(0,0,0,.2);z-index:34}.approval-hero{margin-bottom:24px}.approval-tabs{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:30px;overflow:hidden}.approval-tabs button{border:0;background:#fff;color:#079d79;padding:18px 5px;font-size:15px;line-height:1.4}.approval-tabs button.active{background:#079d79;color:#fff;border-radius:30px;font-weight:700}.approval-empty{height:470px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#929292}.approval-empty div{font-size:95px;color:#dedede}.approval-empty p{font-size:24px}.attendance-title{align-items:center}.attendance-title>div{flex:1}.ready-badge{padding:10px 17px;border-radius:20px;background:#eaf8ed;color:#46b65b;font-weight:700}.checks-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.check-card{background:#eaf8f5;border:2px solid #c5e9df;border-radius:22px;padding:18px 5px;text-align:center;color:#65737f}.check-card span,.check-card b,.check-card strong{display:block}.check-card span{font-size:35px;color:#0fb684}.check-card b{font-size:14px;margin:8px 0}.check-card strong{font-size:14px;color:#0fb684}.check-card.bad{background:#fff0ef;border-color:#ffd4cf}.check-card.bad span,.check-card.bad strong{color:#f14a40}.punch-card{background:linear-gradient(125deg,#18a7df,#0dc482);border-radius:34px;padding:30px 24px;margin-top:18px;color:#e6fbf6;text-align:center;box-shadow:0 16px 30px rgba(0,160,150,.2)}.punch-date{text-align:left;font-size:18px}.timer{display:flex;justify-content:center;align-items:center;margin:32px 0 8px}.timer b{font-size:55px;color:rgba(255,255,255,.48);font-weight:500}.timer em{font-size:47px;font-style:normal;color:rgba(255,255,255,.48);margin:0 3px}.timer-labels{display:grid;grid-template-columns:repeat(3,1fr);font-size:14px;margin-bottom:25px}.punch-card button{width:100%;padding:19px;border:0;border-radius:24px;background:rgba(9,164,184,.55);color:#fff;font-size:24px;font-weight:700}.clock-cards{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:16px}.clock-cards>div{background:#fff;border-radius:22px;padding:22px}.clock-cards span,.clock-cards b{display:block}.clock-cards span{color:#92999f}.clock-cards b{font-size:24px;margin-top:20px}.last-punch{background:#fff;border-radius:20px;padding:18px;font-weight:700;margin-top:15px}.location-card{background:#fff;border-radius:28px;padding:20px;margin-top:30px;box-shadow:var(--shadow)}.location-card h2{margin:0 0 16px}.map-placeholder{height:240px;border-radius:20px;background:#e8ece7;position:relative;overflow:hidden}.map-grid{position:absolute;inset:0;background:linear-gradient(28deg,transparent 48%,rgba(255,255,255,.9) 49% 54%,transparent 55%),linear-gradient(93deg,transparent 46%,rgba(255,255,255,.8) 47% 52%,transparent 53%),repeating-linear-gradient(0deg,rgba(113,130,128,.12) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(113,130,128,.12) 0 1px,transparent 1px 22px)}.map-pin{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);font-size:42px;color:#ef3c36;text-shadow:0 3px 8px rgba(0,0,0,.25)}.map-placeholder p{position:absolute;left:12px;right:12px;bottom:8px;background:rgba(255,255,255,.9);padding:9px;border-radius:10px;margin:0;font-size:12px}.location-details{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:16px 4px}.location-details span{color:#7c8892}.secondary-btn,.primary-btn,.danger-btn{width:100%;border:0;border-radius:17px;padding:15px;font-weight:700}.secondary-btn{background:#e8f8f4;color:#079d79}.primary-btn{background:linear-gradient(120deg,#17a6df,#0bbb81);color:#fff}.danger-btn{background:#fff0ef;color:#ee4038;margin-top:18px}.info-note{font-size:12px;color:#75828b;text-align:center;padding:16px}.modal{display:none;position:fixed;inset:0;z-index:100}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}.modal-sheet{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:min(540px,100%);background:#fff;border-radius:28px 28px 0 0;padding:22px 20px calc(22px + var(--safe-bottom))}.sheet-handle{width:45px;height:5px;background:#ddd;border-radius:5px;margin:0 auto 17px}.modal-sheet h2{font-size:26px;margin:0 0 17px}.modal-sheet label{display:block;color:#6a7781;font-size:14px;margin-bottom:13px}.modal-sheet input,.modal-sheet select,.modal-sheet textarea{width:100%;border:1px solid #dde5eb;border-radius:13px;padding:12px;margin-top:6px;background:#fafcfd}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}.text-btn{width:100%;border:0;background:none;padding:13px;color:#777}.profile-card{text-align:center;background:linear-gradient(120deg,#17a6df,#0bbb81);color:#fff;border-radius:30px;padding:30px}.profile-avatar{width:92px;height:92px;font-size:42px;border:5px solid rgba(255,255,255,.7)}.profile-card h2{font-size:28px;margin:13px 0 3px}.profile-card p{margin:0;color:#e2fbf5}.employee-badge{display:inline-block;background:rgba(255,255,255,.17);padding:8px 12px;border-radius:14px;margin-top:14px}.settings-list{background:#fff;border-radius:26px;margin-top:18px;padding:4px 18px;box-shadow:var(--shadow)}.settings-list>div{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}.settings-list>div:last-child{border-bottom:0}.settings-list>div>span{font-size:28px}.settings-list p{flex:1;margin:0}.settings-list b,.settings-list small{display:block}.settings-list small{color:#87939c;margin-top:4px}.status-pill{font-style:normal;padding:6px 10px;border-radius:12px;font-size:12px}.status-pill.green{background:#ecf8ed;color:#43b757}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.menu-grid a{background:#fff;border-radius:24px;padding:22px;min-height:145px;box-shadow:var(--shadow)}.menu-grid span{font-size:36px;color:#0aa77c}.menu-grid b,.menu-grid small{display:block}.menu-grid b{font-size:18px;margin:11px 0 4px}.menu-grid small{color:#87939c}.login-body{background:#f7f7f7}.login-screen{width:100%;max-width:540px;min-height:100vh;margin:0 auto;background:#fafafa;padding:calc(15vh + env(safe-area-inset-top,0px)) 30px 35px;text-align:center}.brand-logo-wrap{width:168px;height:168px;margin:0 auto 28px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 5px 35px rgba(16,168,226,.18)}.brand-logo{width:140px;height:140px;object-fit:contain;border-radius:50%}.login-screen h1{color:#2297e3;font-size:38px;margin:0}.login-screen .subtitle{font-size:20px;color:#727272;margin:17px 0 35px}.login-fields{display:grid;gap:18px}.floating-field{height:83px;border:1.8px solid #d8d8d8;border-radius:20px;background:#fff;display:flex;align-items:center;padding:0 18px;position:relative}.floating-field:focus-within{border:2.5px solid #2196e2}.field-label{display:none;position:absolute;top:-11px;left:18px;background:#fafafa;padding:0 8px;color:#1596c6;font-size:13px}.floating-field:focus-within .field-label{display:block}.field-icon{width:48px;text-align:center;font-size:26px;color:#2196e2}.floating-field input{border:0;outline:0;background:transparent;font-size:22px;flex:1;width:100%;min-width:0}.password-toggle{border:0;background:transparent;color:#aaa;font-size:20px}.primary-login-btn{width:100%;height:83px;border:0;border-radius:20px;background:#2498e6;color:#fff;font-size:25px;margin-top:36px;box-shadow:0 8px 18px rgba(36,152,230,.34)}.login-message{min-height:20px;color:#d33;margin-top:15px}.toast{position:fixed;left:50%;bottom:105px;transform:translateX(-50%);z-index:200;background:#111;color:#fff;padding:12px 16px;border-radius:14px;font-size:14px;box-shadow:0 8px 25px rgba(0,0,0,.25);max-width:calc(100vw - 40px);text-align:center}@media(min-width:700px){body:before{content:"This interface is designed for mobile screens. Resize the browser or open on a phone.";position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:999;background:#111;color:#fff;padding:8px 14px;border-radius:12px;font-size:12px}.mobile-shell,.login-screen{border-left:1px solid #e4e8eb;border-right:1px solid #e4e8eb}}@media(max-width:370px){.page-content{padding-left:12px;padding-right:12px}.hero-card{padding:22px}.hero-card h1{font-size:25px}.stats-grid{gap:10px}.stat-card{padding:16px}.stat-card strong{font-size:32px}.dept-mini-stats{grid-template-columns:1fr 1fr}.summary-strip{grid-template-columns:1fr 1fr}.day-card{grid-template-columns:95px 1fr 16px}.timer b{font-size:47px}}
.request-card{background:#fff;border-radius:24px;padding:20px;box-shadow:var(--shadow)}.request-card b,.request-card span,.request-card small{display:block}.request-card b{font-size:20px}.request-card span{color:#77838d;margin:7px 0}.request-card small{display:inline-block;background:#fff4e2;color:#ff9700;padding:6px 10px;border-radius:10px}