:root{--primary: #1e40af;--primary-light: #3b82f6;--success: #16a34a;--warning: #d97706;--danger: #dc2626;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-400: #94a3b8;--gray-500: #64748b;--gray-700: #334155;--gray-900: #0f172a;--purple: #7c3aed}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);min-height:100vh;padding:15px}.app-container{display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - 30px);padding-top:20px}.card{background:#fff;border-radius:24px;box-shadow:0 25px 50px -12px #00000040;padding:25px 20px;width:100%;max-width:400px}.pin-screen{outline:none;text-align:center}.logo{width:60px;height:60px;background:var(--primary);border-radius:16px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:#fff}.logo svg{width:30px;height:30px}.company-name{font-size:1.2rem;font-weight:700;color:var(--gray-900);margin-bottom:5px}.current-time{font-size:2.5rem;font-weight:700;color:var(--primary);margin:12px 0}.current-date{color:var(--gray-500);margin-bottom:20px;font-size:.9rem;text-transform:capitalize}.pin-label{font-size:.95rem;color:var(--gray-700);margin-bottom:15px}.pin-display{display:flex;justify-content:center;gap:10px;margin-bottom:20px}.pin-dot{width:45px;height:50px;border:2px solid var(--gray-200);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:600;color:var(--primary);transition:all .15s}.pin-dot.filled{background:var(--gray-100);border-color:var(--primary)}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}.numpad-btn{padding:18px;font-size:1.4rem;font-weight:600;border:none;border-radius:14px;background:var(--gray-100);color:var(--gray-900);cursor:pointer;transition:all .1s}.numpad-btn:active{transform:scale(.95);background:var(--gray-200)}.numpad-btn:disabled{opacity:.5;cursor:not-allowed}.numpad-btn.action{background:var(--primary);color:#fff}.numpad-btn.delete{background:#fee2e2;color:var(--danger)}.clock-screen{text-align:center}.employee-header{display:flex;align-items:center;gap:15px;margin-bottom:20px;text-align:left}.employee-avatar{width:55px;height:55px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;font-weight:700}.employee-name{font-size:1.15rem;font-weight:600;color:var(--gray-900)}.employee-dept{color:var(--gray-500);font-size:.85rem}.status-badge{display:inline-block;padding:10px 22px;border-radius:50px;font-weight:600;font-size:.9rem;margin:5px 0 15px}.status-badge.not_started{background:var(--gray-100);color:var(--gray-500)}.status-badge.working{background:#dcfce7;color:var(--success)}.status-badge.on_break{background:#fef3c7;color:var(--warning)}.status-badge.finished{background:#dbeafe;color:var(--primary)}.work-timer{font-size:2.5rem;font-weight:700;color:var(--primary);margin:10px 0 20px;font-variant-numeric:tabular-nums}.work-timer.on-break{color:var(--warning)}.work-timer .timer-label{display:block;font-size:.85rem;font-weight:500;margin-top:5px}.today-info{background:var(--gray-50);border-radius:16px;padding:15px;margin-bottom:20px}.today-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--gray-200);font-size:.95rem}.today-row:last-child{border-bottom:none}.today-label{color:var(--gray-500)}.today-value{font-weight:600;color:var(--gray-900);display:flex;align-items:center;gap:8px}.today-value.auto{color:var(--purple)}.auto-badge{background:#f3e8ff;color:var(--purple);font-size:.7rem;padding:2px 6px;border-radius:4px}.action-buttons{display:flex;flex-direction:column;gap:12px}.btn{padding:16px;border:none;border-radius:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--success);color:#fff}.btn-warning{background:var(--warning);color:#fff}.btn-danger{background:var(--danger);color:#fff}.finished-message{color:var(--success);font-weight:500;padding:20px}.bottom-actions{display:flex;justify-content:space-between;margin-top:20px;padding-top:15px;border-top:1px solid var(--gray-200)}.btn-link{background:none;border:none;color:var(--gray-500);font-size:.9rem;cursor:pointer;padding:8px}.btn-link:hover{color:var(--primary)}.history-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.history-header h2{font-size:1.2rem;color:var(--gray-900)}.back-btn{background:var(--gray-100);border:none;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:500}.month-selector{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px;background:var(--gray-100);border-radius:12px}.month-selector button{background:#fff;border:none;width:36px;height:36px;border-radius:8px;cursor:pointer;font-weight:600}.month-selector span{font-weight:600;color:var(--gray-900)}.month-summary{background:#eff6ff;border-radius:12px;padding:15px;margin-bottom:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.summary-item .summary-value{font-size:1.2rem;font-weight:700;color:var(--primary)}.summary-item .summary-label{font-size:.75rem;color:var(--gray-500);margin-top:2px}.auto-summary{background:#f3e8ff;border-radius:10px;padding:10px;margin-bottom:15px;text-align:center;font-size:.85rem;color:var(--purple)}.history-list{max-height:350px;overflow-y:auto}.history-item{background:var(--gray-50);border-radius:12px;padding:14px;margin-bottom:10px}.history-item.has-auto{border-left:4px solid var(--purple)}.history-date{font-weight:600;color:var(--gray-900);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.history-day{font-size:.8rem;color:var(--gray-500);font-weight:400;margin-left:8px;text-transform:capitalize}.history-hours{background:#dcfce7;color:var(--success);padding:4px 10px;border-radius:20px;font-size:.8rem}.history-times{display:flex;gap:15px;font-size:.85rem;color:var(--gray-500);flex-wrap:wrap}.history-times .auto{color:var(--purple)}.no-entries{text-align:center;color:var(--gray-500);padding:30px}.slug-input-screen{text-align:center;padding:30px 0}.slug-input-screen h1{font-size:1.8rem;color:var(--primary);margin-bottom:10px}.slug-input-screen p{color:var(--gray-500);margin-bottom:25px}.slug-input-screen input{width:100%;padding:14px;border:2px solid var(--gray-200);border-radius:12px;font-size:1rem;text-align:center;margin-bottom:15px}.slug-input-screen input:focus{border-color:var(--primary);outline:none}.slug-input-screen button{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer}.message{padding:12px;border-radius:10px;margin-bottom:15px;font-size:.9rem;font-weight:500}.message.success{background:#dcfce7;color:var(--success)}.message.error{background:#fee2e2;color:var(--danger)}.error-message{color:var(--danger);font-size:.9rem;margin:10px 0}.loading{text-align:center;color:var(--gray-500);padding:40px}@media(max-width:420px){body{padding:10px}.card{padding:20px 15px}.current-time{font-size:2.2rem}.pin-dot{width:40px;height:45px}.numpad-btn{padding:15px;font-size:1.2rem}}.company-label{text-align:center;color:var(--gray-500);font-size:.85rem;margin-bottom:10px}.documents-screen{text-align:left}.documents-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.documents-header h2{font-size:1.2rem;color:var(--gray-900)}.documents-list{display:flex;flex-direction:column;gap:10px}.document-item{display:flex;align-items:center;gap:12px;background:var(--gray-50);border-radius:12px;padding:14px;text-decoration:none;color:inherit;transition:all .15s}.document-item:hover{background:var(--gray-100)}.doc-icon{font-size:1.5rem}.doc-info{flex:1}.doc-name{display:block;font-weight:600;color:var(--gray-900)}.doc-date{font-size:.8rem;color:var(--gray-500)}.doc-download{color:var(--primary);font-size:1.2rem}.no-documents{text-align:center;color:var(--gray-500);padding:40px 20px}