*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;min-height:100dvh;margin:0;padding:0}#root{flex-direction:column;display:flex}:root{--primary:#1a56db;--primary-hover:#1e40af;--primary-light:#dbeafe;--success:#059669;--success-light:#d1fae5;--danger:#dc2626;--danger-light:#fee2e2;--text:#111827;--text-secondary:#374151;--text-muted:#6b7280;--bg:#f8fafc;--card-bg:#fff;--border:#e2e8f0;--border-light:#f1f5f9;--shadow-sm:0 1px 2px #0000000a;--shadow:0 1px 3px #00000014, 0 1px 2px #0000000a;--shadow-md:0 4px 6px #0000000f, 0 2px 4px #0000000a;--shadow-lg:0 10px 20px #00000014, 0 4px 8px #0000000a;--radius:clamp(8px, 2vw, 12px);--radius-sm:clamp(6px, 1.5vw, 8px);--radius-lg:clamp(12px, 3vw, 16px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-size:clamp(15px,1.8vw + .5rem,18px)}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5}.app-layout{min-height:100vh;min-height:100dvh;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);flex-direction:column;display:flex}.app-header{background:var(--card-bg);border-bottom:1px solid var(--border);z-index:100;padding:clamp(.875rem,3vw,1.25rem) clamp(1rem,4vw,2rem);padding-left:max(clamp(1rem, 4vw, 2rem), var(--safe-left));padding-right:max(clamp(1rem, 4vw, 2rem), var(--safe-right));justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-brand{color:var(--text);align-items:center;gap:clamp(.5rem,2vw,.75rem);font-size:clamp(1.125rem,4vw,1.375rem);font-weight:600;display:flex}.brand-icon{font-size:clamp(1.375rem,5vw,1.75rem)}.header-user{align-items:center;gap:clamp(.75rem,3vw,1rem);display:flex}.user-name{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;max-width:clamp(100px,30vw,200px);font-size:clamp(.875rem,3vw,1rem);font-weight:500;overflow:hidden}.btn-logout{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);padding:clamp(.5rem,2vw,.75rem) clamp(.875rem,3vw,1.25rem);font-size:clamp(.875rem,3vw,1rem);font-weight:500;transition:all .15s}.btn-logout:hover{background:var(--bg);border-color:var(--text-muted)}.btn-logout:active{transform:scale(.97)}.app-nav{background:var(--card-bg);border-bottom:1px solid var(--border);top:calc(52px + var(--safe-top));z-index:99;padding-left:var(--safe-left);padding-right:var(--safe-right);justify-content:center;display:flex;position:sticky}.nav-link{max-width:clamp(140px,35vw,220px);color:var(--text-muted);text-align:center;border-bottom:3px solid #0000;flex:1;padding:clamp(.875rem,3vw,1.25rem) clamp(1rem,4vw,1.5rem);font-size:clamp(.9375rem,2.8vw,1.0625rem);font-weight:600;text-decoration:none;transition:all .15s}.nav-link:hover{color:var(--text-secondary);background:var(--bg)}.nav-link.active{color:var(--primary);border-bottom-color:var(--primary);background:var(--primary-light)}.app-main{padding:clamp(1rem,4vw,2rem);padding-left:max(clamp(1rem, 4vw, 2rem), var(--safe-left));padding-right:max(clamp(1rem, 4vw, 2rem), var(--safe-right));flex:1;width:100%;max-width:min(100%,1200px);margin:0 auto}.app-footer{background:var(--card-bg);border-top:1px solid var(--border);text-align:center;color:var(--text-muted);padding:clamp(.875rem,3vw,1.25rem);padding-bottom:max(clamp(.875rem, 3vw, 1.25rem), var(--safe-bottom));font-size:clamp(.8125rem,2.5vw,.9375rem)}.loading-screen,.loading{color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:clamp(2rem,8vw,4rem);display:flex}.login-container{min-height:100vh;min-height:100dvh;padding:clamp(1rem,4vw,2rem);padding-top:max(clamp(1rem, 4vw, 2rem), var(--safe-top));padding-bottom:max(clamp(1rem, 4vw, 2rem), var(--safe-bottom));background:linear-gradient(160deg,#1e40af 0%,#1a56db 50%,#3b82f6 100%);justify-content:center;align-items:center;display:flex}.login-card{background:var(--card-bg);border-radius:var(--radius-lg);width:100%;max-width:min(92vw,480px);box-shadow:var(--shadow-lg);padding:clamp(1.75rem,6vw,3rem) clamp(1.5rem,5vw,2.5rem)}.login-header{text-align:center;margin-bottom:clamp(1.5rem,5vw,2.5rem)}.login-header h1{color:var(--text);margin-bottom:clamp(.375rem,1.5vw,.625rem);font-size:clamp(1.5rem,6vw,2rem);font-weight:700}.login-header p{color:var(--text-secondary);font-size:clamp(.9375rem,3vw,1.0625rem)}.form-group{margin-bottom:clamp(1.25rem,4vw,1.75rem)}.form-group label{color:var(--text);margin-bottom:clamp(.5rem,1.5vw,.75rem);font-size:clamp(.9375rem,3vw,1.0625rem);font-weight:600;display:block}.form-group input{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--card-bg);width:100%;color:var(--text);padding:clamp(.875rem,3vw,1.125rem) clamp(1rem,3vw,1.25rem);font-size:clamp(1rem,3.5vw,1.125rem);transition:all .15s}.form-group input::placeholder{color:var(--text-muted)}.form-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.form-group input:disabled{background:var(--bg);color:var(--text-muted)}.phone-input{text-align:center;letter-spacing:.25em;font-weight:600;font-size:clamp(1.375rem,5vw,1.625rem)!important}.otp-input{text-align:center;letter-spacing:.5em;font-family:SF Mono,Menlo,Consolas,monospace;font-weight:700;font-size:clamp(1.625rem,6vw,2rem)!important}.otp-info{text-align:center;background:var(--primary-light);border-radius:var(--radius-sm);border:1px solid #1a56db26;margin-bottom:clamp(1.25rem,4vw,1.75rem);padding:clamp(1rem,3vw,1.25rem)}.otp-info p{color:var(--text-secondary);margin-bottom:.375rem;font-size:clamp(.9375rem,3vw,1rem)}.otp-info strong{color:var(--primary);font-size:clamp(1.0625rem,3.5vw,1.25rem)}.otp-actions{justify-content:center;gap:clamp(1.25rem,5vw,2rem);margin-top:clamp(1rem,4vw,1.5rem);display:flex}.btn-primary{background:var(--primary);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;width:100%;padding:clamp(.875rem,3.5vw,1.125rem);font-size:clamp(1rem,3.5vw,1.125rem);font-weight:600;transition:all .15s}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:active:not(:disabled){transform:scale(.98)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-link{color:var(--primary);cursor:pointer;background:0 0;border:none;padding:.625rem;font-size:clamp(.9375rem,3vw,1.0625rem);font-weight:500}.btn-link:hover{text-decoration:underline}.help-text{text-align:center;color:var(--text-muted);margin-top:clamp(1.25rem,4vw,1.75rem);font-size:clamp(.875rem,2.5vw,.9375rem);line-height:1.6}.error-message{background:var(--danger-light);color:var(--danger);border-radius:var(--radius-sm);text-align:center;margin-bottom:clamp(1rem,3vw,1.25rem);padding:clamp(.875rem,3vw,1rem) clamp(1rem,3vw,1.25rem);font-size:clamp(.9375rem,3vw,1rem);font-weight:500}.hours-page,.schedule-page{width:100%}.page-header{margin-bottom:clamp(1rem,3vw,1.5rem)}.page-header h1{color:var(--text);margin-bottom:.25rem;font-size:clamp(1.375rem,5vw,1.875rem);font-weight:700}.page-header p{color:var(--text-secondary);font-size:clamp(1rem,3.5vw,1.125rem)}.week-nav{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-bottom:clamp(1.25rem,4vw,1.75rem);padding:clamp(1rem,3vw,1.25rem) clamp(1.25rem,4vw,1.75rem);display:flex}.btn-nav{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;width:clamp(44px,12vw,56px);height:clamp(44px,12vw,56px);color:var(--text-secondary);flex-shrink:0;justify-content:center;align-items:center;font-size:clamp(1.125rem,4vw,1.375rem);transition:all .15s;display:flex}.btn-nav:hover:not(:disabled){background:var(--bg);border-color:var(--text-muted)}.btn-nav:active:not(:disabled){transform:scale(.95)}.btn-nav:disabled{opacity:.4;cursor:not-allowed}.week-label{text-align:center;color:var(--text);flex-direction:column;flex:1;align-items:center;gap:.5rem;min-width:0;font-size:clamp(1rem,3.5vw,1.25rem);font-weight:600;display:flex}.current-badge{background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.025em;border-radius:999px;padding:.25rem clamp(.625rem,2vw,.75rem);font-size:clamp(.625rem,2vw,.75rem);font-weight:600}.week-total{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);color:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:clamp(1.25rem,4vw,1.5rem);padding:clamp(1.25rem,4vw,1.5rem) clamp(1.5rem,5vw,2rem);display:flex}.week-total span{opacity:.9;font-size:clamp(1rem,3.5vw,1.25rem)}.week-total strong{font-size:clamp(1.75rem,6vw,2.25rem);font-weight:700}.ot-breakdown{opacity:.9;justify-content:space-between;width:100%;margin-top:.5rem;font-size:clamp(.85rem,2.5vw,1rem);display:flex}.ot-breakdown .regular-label{opacity:.9}.ot-breakdown .ot-label{color:#fbbf24;font-weight:600}.days-list{flex-direction:column;gap:clamp(.75rem,2vw,1rem);display:flex}.day-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);width:100%;overflow:hidden}.day-header{background:var(--bg);border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:clamp(1rem,3vw,1.25rem) clamp(1.25rem,4vw,1.5rem);display:flex}.day-info{align-items:baseline;gap:clamp(.625rem,2.5vw,1rem);display:flex}.day-name{color:var(--text);font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700}.day-date{color:var(--text-muted);font-size:clamp(.9375rem,3vw,1.0625rem)}.day-hours{color:var(--success);font-size:clamp(1rem,3.5vw,1.25rem);font-weight:700}.punches-list{padding:clamp(.875rem,3vw,1.125rem) clamp(1.25rem,4vw,1.5rem)}.punch-item{align-items:center;gap:clamp(.75rem,3vw,1rem);padding:clamp(.625rem,2vw,.75rem) 0;font-size:clamp(1rem,3.5vw,1.125rem);display:flex}.punch-item+.punch-item{border-top:1px solid var(--border-light)}.punch-icon{font-size:clamp(.75rem,2.5vw,1rem)}.punch-event{text-transform:uppercase;width:clamp(2.5rem,8vw,3rem);font-size:clamp(.875rem,3vw,1rem);font-weight:600}.punch-item.clock_in .punch-event{color:var(--success)}.punch-item.clock_out .punch-event{color:var(--danger)}.punch-time{color:var(--text);font-size:clamp(1rem,3.5vw,1.125rem);font-weight:500}.punch-rounded{color:var(--text-muted);margin-left:auto;font-size:clamp(.875rem,3vw,1rem)}.no-punches{color:var(--text-muted);text-align:center;padding:clamp(1.25rem,4vw,1.5rem);font-size:clamp(1rem,3.5vw,1.125rem);font-style:italic}.schedule-name{color:var(--text-secondary);margin-bottom:.375rem;font-size:clamp(.9375rem,3vw,1.0625rem)}.schedule-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(.75rem,2vw,1rem);display:grid}.schedule-day{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:2px solid #0000;padding:clamp(1rem,3vw,1.25rem);transition:all .15s}.schedule-day.today{border-color:var(--primary);background:var(--primary-light)}.schedule-day.off{opacity:.5;background:var(--bg)}.day-label{align-items:center;gap:clamp(.5rem,2vw,.75rem);margin-bottom:clamp(.375rem,1.5vw,.5rem);display:flex}.day-label .day-name{color:var(--text);font-size:clamp(.9375rem,3vw,1.0625rem);font-weight:700}.today-badge{background:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.05em;border-radius:999px;padding:.1875rem clamp(.5rem,1.5vw,.625rem);font-size:clamp(.5625rem,1.5vw,.6875rem);font-weight:700}.shifts{flex-direction:column;gap:.375rem;display:flex}.shift{align-items:center;gap:clamp(.625rem,2vw,1rem);display:flex}.shift-times{color:var(--text);align-items:center;gap:.375rem;font-size:clamp(1rem,3vw,1.125rem);font-weight:600;display:flex}.shift-separator{color:var(--text-muted)}.shift-label{color:var(--text-muted);background:var(--bg);border-radius:4px;padding:.1875rem clamp(.5rem,1.5vw,.625rem);font-size:clamp(.8125rem,2.5vw,.9375rem)}.day-off{color:var(--text-muted);font-size:clamp(.9375rem,3vw,1rem);font-style:italic}.no-schedule{text-align:center;background:var(--card-bg);border-radius:var(--radius);border:1px solid var(--border-light);padding:clamp(2.5rem,8vw,4rem) clamp(1.25rem,4vw,2rem)}.no-schedule p:first-child{color:var(--text);margin-bottom:.5rem;font-size:clamp(1.0625rem,3.5vw,1.25rem);font-weight:600}.schedule-legend{text-align:center;margin-top:clamp(1.25rem,4vw,2rem)}.muted{color:var(--text-muted);font-size:clamp(.8125rem,2.5vw,.9375rem)}@media (min-width:768px){.schedule-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.days-list{grid-template-columns:repeat(2,1fr);display:grid}}@media (min-width:1024px){.schedule-grid{grid-template-columns:repeat(7,1fr);gap:.75rem}.days-list{grid-template-columns:repeat(7,1fr)}}@media (orientation:landscape) and (max-height:500px){.login-container{align-items:flex-start;padding-top:clamp(1rem,3vh,2rem)}.login-header{margin-bottom:clamp(.75rem,2vh,1rem)}.form-group{margin-bottom:clamp(.625rem,2vh,1rem)}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}