@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";:root{--bg: #f4f4f4;--bg-white: #ffffff;--bg-card: #ffffff;--primary: #E53935;--primary-dark: #C62828;--primary-light: rgba(229, 57, 53, .1);--text-dark: #212121;--text-mid: #424242;--text-muted: #9E9E9E;--border: #E0E0E0;--border-light: #EEEEEE;--shadow: 0 2px 12px rgba(0, 0, 0, .08);--shadow-sm: 0 1px 4px rgba(0, 0, 0, .06);--radius: 14px;--radius-sm: 10px;--radius-xs: 6px;--header-h: 180px;--green: #388E3C;--red: #E53935;--orange: #F57C00}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text-dark);-webkit-font-smoothing:antialiased;line-height:1.5}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#bdbdbd;border-radius:99px}.wavy-header{width:100%;height:var(--header-h);background:linear-gradient(135deg,#26c6da,#7b1fa2 35%,#e91e63 60%,#ff9800,#66bb6a);position:relative;overflow:hidden;flex-shrink:0}.wavy-header:before{content:"";position:absolute;bottom:-30px;left:-5%;width:110%;height:80px;background:var(--bg);border-radius:50% 50% 0 0/100% 100% 0 0}.wavy-header-dashboard{height:100px}.login-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);max-width:480px;margin:0 auto}.login-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:0 28px 40px;margin-top:-30px;position:relative;z-index:2}.login-welcome{font-size:24px;font-weight:700;color:var(--primary);text-align:center;margin-bottom:28px}.login-form{width:100%}.form-input-wrap{position:relative;width:100%;margin-bottom:16px}.form-input{width:100%;background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;font-size:15px;color:var(--text-dark);font-family:inherit;transition:border-color .2s;outline:none}.form-input::placeholder{color:var(--text-muted)}.form-input:focus{border-color:var(--primary)}.pin-toggle{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;line-height:1;padding:0}.btn-login{width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:15px;font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:background .2s,transform .15s;letter-spacing:.02em;margin-top:8px}.btn-login:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.btn-login:disabled{opacity:.65;cursor:not-allowed}.error-msg{display:flex;align-items:flex-start;gap:8px;background:#e5393514;border:1px solid rgba(229,57,53,.2);color:var(--primary);padding:12px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;margin-bottom:16px}.login-illustration{width:240px;margin-top:32px;opacity:.85}.app-container{min-height:100vh;display:flex;flex-direction:column;max-width:480px;margin:0 auto;background:var(--bg)}.dash-header{position:relative;z-index:10}.dash-header-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 16px 0;margin-top:-50px}.dash-app-name{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.dash-user-name{font-size:20px;font-weight:700;color:var(--text-dark)}.btn-logout{display:inline-flex;align-items:center;gap:5px;background:var(--primary-light);color:var(--primary);border:1px solid rgba(229,57,53,.25);border-radius:var(--radius-sm);padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .2s}.btn-logout:hover{background:#e539352e}.month-tabs{display:flex;background:var(--bg-white);border-bottom:1.5px solid var(--border);margin:16px 0 0}.tab-btn{flex:1;padding:13px 8px;border:none;background:transparent;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;color:var(--text-muted);position:relative;transition:color .2s;border-bottom:3px solid transparent;margin-bottom:-1.5px}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-label-main{display:block}.tab-label-sub{display:block;font-size:11px;opacity:.7;margin-top:1px;font-weight:500}.dashboard-content{padding:16px;flex:1}.summary-box{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow-sm)}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}.summary-row{display:contents}.summary-cell{display:flex;align-items:center;padding:5px 4px;font-size:13px;color:var(--text-mid);border-bottom:1px solid var(--border-light)}.summary-cell:nth-child(odd){padding-right:10px;border-right:1px solid var(--border-light)}.summary-cell .s-label{flex:1;color:var(--text-mid)}.summary-cell .s-sep{color:var(--text-muted);margin:0 4px}.summary-cell .s-val{font-weight:700;color:var(--text-dark);min-width:28px;text-align:right;white-space:nowrap}.s-deduct{color:var(--primary);font-weight:700;font-size:12px;margin-left:2px}.summary-footer{display:flex;align-items:center;padding:7px 4px 2px;font-size:13px;color:var(--text-mid);border-top:1.5px solid var(--primary);margin-top:4px;gap:16px}.summary-footer .s-label{flex:1}.summary-footer .s-val{font-weight:700;color:var(--text-dark)}.att-list-header{display:grid;grid-template-columns:90px 28px 1fr 1fr 60px;padding:8px 12px;font-size:12px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-bottom:none}.att-list{display:flex;flex-direction:column;background:var(--bg-white);border:1.5px solid var(--border);border-radius:0 0 var(--radius-sm) var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-sm)}.att-item{border-top:1px solid var(--border-light)}.att-item:first-child{border-top:none}.att-main-row{display:grid;grid-template-columns:90px 28px 1fr 1fr 60px;padding:9px 12px;font-size:13px;align-items:center}.att-main-row .col-date{color:var(--text-dark);font-weight:600}.att-main-row .col-day{color:var(--text-mid);font-weight:600}.att-main-row .col-in,.att-main-row .col-out{color:var(--text-dark)}.att-main-row .col-hrs{color:var(--text-dark);font-weight:600;text-align:right}.col-in.late{color:var(--orange);font-weight:600}.col-hrs.less{color:var(--orange)}.att-wr-row{display:grid;grid-template-columns:90px 1fr 1fr 1fr;padding:0 12px 9px;font-size:12px;color:var(--text-muted);align-items:center;gap:4px}.wr-status{display:flex;align-items:center;gap:4px}.wr-label{font-weight:600}.wr-ns{color:var(--primary);font-weight:600}.wr-na{color:var(--text-muted)}.wr-loc{color:var(--text-muted);font-size:11px}.att-holiday-row{display:grid;grid-template-columns:90px 28px 1fr;padding:9px 12px;font-size:13px;align-items:center;background:#fff8e1}.col-holiday-label{color:var(--orange);font-weight:600}.att-weekend-row{display:grid;grid-template-columns:90px 28px 1fr;padding:9px 12px;font-size:13px;align-items:center}.col-weekend-label{color:var(--primary);font-weight:600}.loader-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:14px}.spinner{width:36px;height:36px;border:3px solid rgba(229,57,53,.2);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loader-text{font-size:13px;color:var(--text-muted)}.state-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.state-icon{font-size:36px}.state-title{font-size:15px;font-weight:600;color:var(--text-dark)}.state-subtitle{font-size:13px;color:var(--text-muted)}.retry-btn{margin-top:8px;background:var(--primary-light);border:1px solid rgba(229,57,53,.25);color:var(--primary);padding:8px 20px;font-size:13px;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit;transition:background .2s}.retry-btn:hover{background:#e539352e}.section-title{font-size:13px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}