@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0e1a;--bg2:#0f1629;--surface:#ffffff0a;--surface-hover:#ffffff14;--border:#ffffff17;--border-active:#63b3ed80;--text:#e2e8f0;--text-muted:#718096;--text-dim:#4a5568;--primary:#63b3ed;--primary-dark:#3182ce;--primary-glow:#63b3ed40;--accent:#fc8181;--accent-glow:#fc818140;--success:#68d391;--warning:#f6ad55;--danger:#fc8181;--overtime:#f6ad55;--radius:14px;--radius-sm:8px;--shadow:0 8px 32px #0006;--shadow-sm:0 4px 16px #0003;--transition:.2s cubic-bezier(.4,0,.2,1)}html{font-size:15px}body{background:var(--bg);color:var(--text);background-image:radial-gradient(at 20%,#3f82ed14 0%,#0000 60%),radial-gradient(at 80% 20%,#8a5bed14 0%,#0000 60%);min-height:100vh;font-family:Inter,-apple-system,sans-serif;line-height:1.6}.glass-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);transition:border-color var(--transition), box-shadow var(--transition)}.glass-card:hover{border-color:var(--border-active)}.app{flex-direction:column;min-height:100vh;display:flex}.app-header.glass-header{z-index:100;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(20px);background:#0a0e1ad9;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:1100px;height:64px;margin:0 auto;padding:0 1.5rem;display:flex}.logo{align-items:center;gap:.6rem;display:flex}.logo-icon{font-size:1.4rem}.logo-text{letter-spacing:-.02em;color:var(--text);font-size:1.1rem;font-weight:700}.nav-tabs{gap:.4rem;display:flex}.nav-tab{color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:.4rem;padding:.45rem 1.1rem;font-size:.9rem;font-weight:500;display:flex;position:relative}.nav-tab:hover{color:var(--text);background:var(--surface-hover)}.nav-tab.active{color:var(--primary);background:var(--primary-glow);border-color:var(--border-active)}.nav-badge{background:var(--danger);color:#fff;text-align:center;border-radius:999px;min-width:18px;padding:1px 6px;font-size:.7rem;font-weight:700}.app-main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:1.5rem}.btn{border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:all var(--transition);white-space:nowrap;align-items:center;gap:.4rem;padding:.5rem 1.1rem;font-size:.875rem;font-weight:500;display:inline-flex}.btn-primary{background:var(--primary);border-color:var(--primary);color:#0a0e1a}.btn-primary:hover{background:var(--primary-dark);box-shadow:0 4px 12px var(--primary-glow);transform:translateY(-1px)}.btn-accent{background:var(--accent);border-color:var(--accent);color:#0a0e1a}.btn-accent:hover{opacity:.85;box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-1px)}.btn-ghost{border-color:var(--border);color:var(--text-muted);background:0 0}.btn-ghost:hover{color:var(--text);background:var(--surface-hover)}.btn-success{border-color:var(--success);color:var(--success);background:#68d39126}.btn-success:hover{background:#68d39140;transform:translateY(-1px)}.btn-danger{border-color:var(--danger);color:var(--danger);background:#fc818126}.btn-danger:hover{background:#fc818140;transform:translateY(-1px)}.btn-sm{padding:.3rem .7rem;font-size:.8rem}.employee-view{flex-direction:column;gap:1.5rem;display:flex}.clock-card{text-align:center;background:linear-gradient(135deg,#63b3ed0f 0%,#8a5bed0f 100%);padding:2rem 1.5rem}.clock-date{color:var(--text-muted);letter-spacing:.05em;margin-bottom:.4rem;font-size:.9rem}.clock-time{background:linear-gradient(135deg, var(--primary), #b794f4);-webkit-text-fill-color:transparent;letter-spacing:.04em;-webkit-background-clip:text;background-clip:text;font-family:JetBrains Mono,monospace;font-size:3.5rem;font-weight:600}.emp-selector-row{flex-direction:column;gap:.6rem;display:flex}.emp-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}.emp-select-wrap{flex-wrap:wrap;gap:.5rem;display:flex}.emp-pill{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all var(--transition);border-radius:999px;padding:.45rem 1rem;font-size:.875rem;font-weight:500}.emp-pill:hover{color:var(--text);border-color:var(--primary)}.emp-pill.active{background:var(--primary-glow);border-color:var(--primary);color:var(--primary)}.punch-status{padding:1.5rem}.punch-status-header{align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.emp-name-badge{background:linear-gradient(135deg, var(--primary), #b794f4);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.1rem;font-weight:700}.pending-badge{border:1px solid var(--warning);color:var(--warning);background:#f6ad5526;border-radius:999px;padding:.2rem .6rem;font-size:.75rem}.punch-times{flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.punch-time-item{flex-direction:column;align-items:center;gap:.25rem;min-width:80px;display:flex}.punch-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}.punch-value{color:var(--text);font-family:JetBrains Mono,monospace;font-size:1.6rem;font-weight:600}.punch-value.accent{color:var(--primary)}.punch-divider{color:var(--text-dim);margin-top:1.2rem;font-size:1.2rem}.punch-buttons{flex-wrap:wrap;gap:.75rem;margin-bottom:.75rem;display:flex}.punch-btn{border-radius:10px;flex:1;justify-content:center;padding:.8rem 1.5rem;font-size:1rem}.change-req-btn{justify-content:center;width:100%}.records-section{flex-direction:column;gap:.75rem;display:flex}.section-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:600}.records-table-wrap{border-radius:var(--radius);border:1px solid var(--border);overflow-x:auto}.records-table{border-collapse:collapse;width:100%;font-size:.875rem}.records-table th{text-align:left;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--border);white-space:nowrap;background:#ffffff08;padding:.75rem 1rem;font-size:.75rem;font-weight:600}.records-table td{color:var(--text);white-space:nowrap;border-bottom:1px solid #ffffff0a;padding:.7rem 1rem}.records-table tbody tr{transition:background var(--transition)}.records-table tbody tr:hover{background:var(--surface-hover)}.records-table tbody tr:last-child td{border-bottom:none}.records-table tfoot td{border-top:1px solid var(--border);padding:.75rem 1rem}.overtime-cell{color:var(--overtime)!important}.modified-row{background:#63b3ed0a}.empty-row{text-align:center;color:var(--text-dim);padding:2rem!important}.clickable-row{cursor:pointer}.total-row{background:#ffffff08}.badge{border:1px solid;border-radius:999px;padding:.15rem .5rem;font-size:.7rem;font-weight:600;display:inline-block}.badge-pending{border-color:var(--warning);color:var(--warning);background:#f6ad5526}.badge-approved{border-color:var(--success);color:var(--success);background:#68d39126}.badge-rejected{border-color:var(--danger);color:var(--danger);background:#fc818126}.badge-modified{border-color:var(--primary);color:var(--primary);background:#63b3ed26}.modal-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;padding:1rem;animation:.15s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{width:100%;max-width:420px;padding:1.75rem;animation:.2s cubic-bezier(.4,0,.2,1) slideUp}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.modal-title{margin-bottom:.4rem;font-size:1.1rem;font-weight:700}.modal-date{color:var(--text-muted);margin-bottom:1.25rem;font-size:.85rem}.form-row{flex-direction:column;gap:.4rem;margin-bottom:1rem;display:flex}.form-row label{color:var(--text-muted);font-size:.8rem;font-weight:500}.time-input,.reason-input{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);transition:border-color var(--transition);width:100%;padding:.6rem .8rem;font-family:inherit;font-size:.9rem}.time-input:focus,.reason-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);outline:none}.reason-input{resize:vertical}.modal-buttons{justify-content:flex-end;gap:.6rem;margin-top:1.25rem;display:flex}.toast{z-index:300;border:1px solid var(--primary);color:var(--primary);background:#0f1629f2;border-radius:999px;padding:.7rem 1.5rem;font-size:.875rem;font-weight:500;animation:.25s cubic-bezier(.4,0,.2,1) toastIn;position:fixed;bottom:2rem;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0006}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(12px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.management-view{flex-direction:column;gap:1.5rem;display:flex}.mgmt-header{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.period-label{color:var(--text-muted);white-space:nowrap;font-size:.8rem}.period-select{border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);cursor:pointer;transition:border-color var(--transition);background:#ffffff0f;padding:.5rem .8rem;font-size:.875rem}.period-select:focus{border-color:var(--primary);outline:none}.period-selector-wrap{align-items:center;gap:.6rem;display:flex}.period-range-display{color:var(--text-muted);margin-left:auto;font-size:.85rem}.mgmt-tabs{border-bottom:1px solid var(--border);gap:.4rem;padding-bottom:0;display:flex}.tab-btn{color:var(--text-muted);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:.4rem;margin-bottom:-1px;padding:.6rem 1rem;font-size:.875rem;font-weight:500;display:flex}.tab-btn:hover{color:var(--text)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.tab-badge{background:var(--danger);color:#fff;border-radius:999px;padding:1px 6px;font-size:.7rem;font-weight:700}.summary-cards{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.summary-card{cursor:pointer;transition:all var(--transition);padding:1.25rem}.summary-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px #0006}.summary-emp-name{color:var(--text);margin-bottom:1rem;font-size:1rem;font-weight:700}.summary-metrics{flex-direction:column;gap:.6rem;display:flex}.metric{justify-content:space-between;align-items:center;display:flex}.metric-label{color:var(--text-muted);font-size:.78rem}.metric-value{color:var(--text);font-family:JetBrains Mono,monospace;font-size:.95rem;font-weight:600}.metric-value.overtime{color:var(--overtime)}.card-hint{color:var(--text-dim);text-align:right;margin-top:.75rem;font-size:.72rem}.summary-table-wrap{flex-direction:column;gap:.75rem;display:flex}.summary-section{flex-direction:column;gap:1rem;display:flex}.requests-section,.requests-list{flex-direction:column;gap:.75rem;display:flex}.request-card{padding:1.25rem}.req-header{flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.6rem;display:flex}.req-emp{font-size:.95rem;font-weight:700}.req-date-label{color:var(--text-muted);margin-left:auto;font-size:.8rem}.req-times{margin-bottom:.5rem;font-size:.9rem}.req-reason{color:var(--text-muted);margin-bottom:.4rem;font-size:.85rem}.req-created{color:var(--text-dim);font-size:.78rem}.req-actions{gap:.6rem;margin-top:.75rem;display:flex}.empty-state{text-align:center;color:var(--text-dim);padding:3rem}.detail-section{flex-direction:column;gap:1rem;display:flex}.detail-header{align-items:center;gap:1rem;display:flex}.detail-period{color:var(--text-muted);font-size:.85rem}.row-actions{gap:.4rem;display:flex}.pin-overlay{z-index:500;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000b3;justify-content:center;align-items:center;padding:1rem;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.pin-modal{text-align:center;width:100%;max-width:320px;padding:2rem 1.75rem;animation:.25s cubic-bezier(.4,0,.2,1) slideUp}.pin-header{margin-bottom:1.5rem}.pin-title{margin-bottom:.3rem;font-size:1.3rem;font-weight:700}.pin-subtitle{color:var(--text-muted);font-size:.85rem}.pin-dots{justify-content:center;gap:1rem;margin-bottom:.75rem;display:flex}.pin-dot{border:2px solid var(--border);background:0 0;border-radius:50%;width:14px;height:14px;transition:all .15s}.pin-dot.filled{background:var(--primary);border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow)}.pin-hint{color:var(--danger);height:1rem;margin-bottom:.75rem;font-size:.8rem}.pin-keypad{grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.25rem 0;display:grid}.pin-key{aspect-ratio:1;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:all var(--transition);border-radius:12px;justify-content:center;align-items:center;font-size:1.4rem;font-weight:600;display:flex}.pin-key:hover{background:var(--surface-hover);border-color:var(--primary);color:var(--primary);transform:scale(1.04)}.pin-key:active{transform:scale(.96)}.pin-key-empty{cursor:default;pointer-events:none;background:0 0;border:none}.pin-key-del{color:var(--text-muted);font-size:1.2rem}.pin-key-del:hover{color:var(--danger);border-color:var(--danger)}.pin-cancel{justify-content:center;width:100%;margin-top:.5rem}@keyframes pin-shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-8px)}80%{transform:translate(8px)}}.pin-shake{animation:.6s cubic-bezier(.36,.07,.19,.97) pin-shake}.punch-mode-hint{color:var(--text-dim);justify-content:center;align-items:center;gap:.6rem;margin-bottom:.75rem;font-size:.78rem;display:flex}.btn-link{cursor:pointer;color:var(--primary);background:0 0;border:none;padding:0;font-size:.78rem;line-height:1;text-decoration:underline}.btn-link:hover{opacity:.8}.punch-btn-main{border-radius:12px;justify-content:center;width:100%;padding:1rem;font-size:1.1rem}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}@media (width>=601px) and (width<=1024px){html{font-size:16px}.app-main{padding:1.25rem}.clock-time{font-size:4rem}.clock-card{padding:2.5rem 2rem}.emp-pill{min-height:48px;padding:.65rem 1.4rem;font-size:1rem}.punch-btn-main{border-radius:14px;min-height:64px;padding:1.25rem;font-size:1.2rem}.btn{min-height:44px;padding:.6rem 1.25rem}.btn-sm{min-height:40px}.punch-value{font-size:1.8rem}.summary-cards{grid-template-columns:repeat(2,1fr);gap:1.25rem}.summary-card{padding:1.5rem}.summary-emp-name{font-size:1.1rem}.metric-value{font-size:1.05rem}.records-table td,.records-table th{padding:.85rem 1rem}.pin-key{border-radius:14px;font-size:1.6rem}.pin-modal{max-width:360px;padding:2.5rem 2rem}.pin-dot{width:16px;height:16px}.modal{max-width:480px;padding:2rem}.time-input,.reason-input{min-height:48px;padding:.75rem 1rem;font-size:1rem}.nav-tab{min-height:44px;padding:.6rem 1.4rem;font-size:1rem}.header-inner{height:72px}.tab-btn{min-height:44px;padding:.75rem 1.25rem;font-size:.95rem}.period-select{min-height:44px;font-size:.95rem}.request-card{padding:1.5rem}.req-actions{gap:.75rem}.req-actions .btn{flex:1;justify-content:center;min-height:48px;font-size:.95rem}}@media (width<=600px){.clock-time{font-size:2.5rem}.punch-times{gap:.5rem}.punch-value{font-size:1.3rem}.summary-cards{grid-template-columns:1fr 1fr}.header-inner{padding:0 1rem}.app-main{padding:1rem}.emp-pill{min-height:44px;padding:.5rem .9rem}.punch-btn-main{min-height:60px;font-size:1.1rem}.btn{min-height:44px}}