*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8fafc;font-family:Inter,system-ui,-apple-system,sans-serif}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}:root{--primary:#4f46e5;--primary-hover:#4338ca;--secondary:#6366f1;--text-main:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--surface-hover:#f8fafc;--error:#ef4444}.login-container{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);justify-content:center;align-items:center;width:100%;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden}.login-container:before{content:"";pointer-events:none;background:radial-gradient(circle,#4f46e50d 0%,#4f46e500 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-200px;right:-200px}.login-container:after{content:"";pointer-events:none;background:radial-gradient(circle,#10b9810d 0%,#10b98100 70%);border-radius:50%;width:400px;height:400px;position:absolute;bottom:-100px;left:-100px}.login-panel{text-align:center;z-index:10;box-sizing:border-box;background:#fff;border:1px solid #00000008;border-radius:24px;width:100%;max-width:440px;padding:48px;position:relative;box-shadow:0 20px 40px -10px #0000000d,0 10px 20px -5px #00000005}.login-logo{background:linear-gradient(135deg, var(--primary), var(--secondary));border-radius:12px;width:48px;height:48px;margin:0 auto 24px;box-shadow:0 8px 16px #4f46e533}.login-title{color:var(--text-main);letter-spacing:-.02em;margin-bottom:8px;font-size:1.85rem;font-weight:700}.login-subtitle{color:var(--text-muted);margin-bottom:32px;font-size:.95rem;line-height:1.5}.input-group{text-align:left;margin-bottom:20px}.input-label{color:var(--text-main);margin-bottom:8px;font-size:.875rem;font-weight:600;display:block}.input-field{border:1px solid var(--border);width:100%;color:var(--text-main);box-sizing:border-box;border-radius:10px;outline:none;padding:12px 16px;font-size:1rem;transition:all .2s}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 4px #4f46e51a}.input-error{color:var(--error);text-align:left;margin-top:6px;font-size:.875rem}.password-header{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.password-header .input-label{margin-bottom:0}.forgot-password{color:var(--primary);font-size:.85rem;font-weight:500;text-decoration:none;transition:color .2s}.forgot-password:hover{color:var(--primary-hover);text-decoration:underline}.login-btn-wrapper{margin-top:32px}.btn-primary{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:14px 24px;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 4px 12px #4f46e533}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #4f46e54d}.btn-primary:active{transform:translateY(0)}.register-link{color:var(--text-muted);margin-top:24px;font-size:.9rem}.register-link a{color:var(--primary);font-weight:600;text-decoration:none}.register-link a:hover{text-decoration:underline}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.5s ease-out forwards fadeIn}.password-input-wrapper{align-items:center;width:100%;display:flex;position:relative}.password-input-wrapper .input-field{padding-right:44px}.password-toggle-btn{cursor:pointer;color:var(--text-muted);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;margin:0;padding:6px;line-height:1;transition:color .15s,background-color .15s;display:inline-flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.password-toggle-btn:hover{color:var(--primary);background-color:#4f46e514}.password-toggle-btn:focus-visible{outline:2px solid var(--primary);outline-offset:1px}.dashboard-container{background-color:#f3f4f6;flex-direction:column;width:100%;max-width:768px;min-height:100vh;margin:0 auto;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;box-shadow:0 0 20px #0000000d}.dashboard-header{color:#fff;z-index:10;background-color:#0d6efd;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.dashboard-header h1{margin:0;font-size:1.1rem;font-weight:600}.profile-btn{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.dashboard-main{flex:1;padding:20px 20px 80px}.summary-cards{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.summary-card{cursor:pointer;background:#fff;border-left:4px solid #0000;border-radius:12px;align-items:center;gap:16px;padding:16px;transition:all .2s;display:flex;box-shadow:0 2px 8px #0000000a}.summary-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.summary-card.active{border-left:4px solid #0d6efd}.icon-wrapper{color:#fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.icon-wrapper.blue{background-color:#0d6efd}.icon-wrapper.yellow{color:#333;background-color:#ffc107}.icon-wrapper.cyan{color:#333;background-color:#0dcaf0}.icon-wrapper.green{background-color:#198754}.summary-info h3{color:#1f2937;margin:0;font-size:1rem;font-weight:600}.summary-info p{color:#6b7280;margin:4px 0 0;font-size:.85rem}.job-list{flex-direction:column;gap:16px;display:flex}.empty-state{text-align:center;color:#6b7280;padding:32px 0;font-size:.95rem;font-weight:500}.job-card{background:#fff;border-radius:12px;padding:16px;box-shadow:0 2px 8px #0000000a}.job-card-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.job-title{color:#1f2937;margin:0;font-size:1.1rem;font-weight:600}.job-id{color:#fff;background-color:#0d6efd;border-radius:16px;padding:4px 8px;font-size:.75rem;font-weight:600}.job-details{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.job-date{color:#4b5563;margin:0;font-size:.9rem;font-weight:500}.job-customer-section{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;gap:6px;padding:10px 12px;display:flex}.job-customer-item{color:#334155;align-items:center;gap:8px;font-size:.9rem;display:flex}.customer-icon{color:#64748b;flex-shrink:0}.contact-link{color:#0d6efd;font-weight:500;text-decoration:none}.contact-link:hover{text-decoration:underline}.job-location-section{background-color:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;align-items:flex-start;gap:8px;padding:10px 12px;display:flex}.location-icon{color:#16a34a;flex-shrink:0;margin-top:2px}.location-content{flex-direction:column;gap:4px;display:flex}.address-text{line-height:1.4;color:#166534!important;margin:0!important;font-size:.85rem!important}.directions-link{color:#15803d;margin-top:2px;font-size:.85rem;font-weight:600;text-decoration:underline;display:inline-block}.directions-link:hover{color:#16a34a}.job-actions{flex-wrap:wrap;gap:12px;display:flex}.btn-action{cursor:pointer;border:none;border-radius:8px;flex:1;min-width:140px;padding:12px;font-size:.95rem;font-weight:500;transition:all .2s}.btn-start-work{color:#fff;background-color:#0d6efd}.btn-start-work:hover{background-color:#0b5ed7}.btn-previous-progress{color:#0d6efd;background:0 0;border:1px solid #0d6efd}.btn-previous-progress:hover{background-color:#f3f4f6}.btn-add-progress{color:#fff;background-color:#f59e0b}.btn-add-progress:hover{background-color:#d97706}.btn-complete-work{color:#fff;background-color:#10b981}.btn-complete-work:hover{background-color:#059669}.modal-overlay{z-index:1000;background-color:#0006;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:8px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 4px 20px #00000026}.start-modal{text-align:center;padding:32px 24px}.modal-icon-circle{border:4px solid #94a3b8;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 24px;display:flex}.question-mark{color:#94a3b8;font-size:40px;font-weight:300}.start-modal h2{color:#334155;margin:0 0 24px;font-size:1.5rem;font-weight:500}.modal-actions-center{justify-content:center;gap:16px;display:flex}.complete-modal-header{color:#fff;background-color:#198754;justify-content:space-between;align-items:center;padding:16px;display:flex}.complete-modal-header h2{margin:0;font-size:1.25rem;font-weight:600}.close-btn{color:#fff;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.complete-modal-body{padding:16px}.complete-modal-body textarea,.complete-modal-body .work-description-input{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;width:100%;padding:12px;font-family:inherit;font-size:.95rem}.complete-modal-body textarea{resize:vertical}.complete-modal-body textarea:focus,.complete-modal-body .work-description-input:focus{border-color:#198754;outline:none}.complete-modal-footer{justify-content:flex-end;gap:12px;padding:16px;display:flex}.previous-progress-body{background-color:#f8f9fa;border-radius:8px;max-height:400px;padding:16px;overflow-y:auto}.progress-timeline{flex-direction:column;gap:16px;display:flex}.progress-timeline-item{background:#fff;border-left:4px solid #0d6efd;border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000000d}.progress-timeline-date{color:#6b7280;margin-bottom:8px;font-size:.85rem;font-weight:500}.progress-timeline-desc{color:#1f2937;margin-bottom:12px;font-size:.95rem;line-height:1.5}.progress-timeline-photos{flex-wrap:wrap;gap:8px;display:flex}.progress-photo-thumb{object-fit:cover;border:1px solid #e5e7eb;border-radius:6px;width:80px;height:80px}.btn-modal{cursor:pointer;border:none;border-radius:6px;padding:10px 24px;font-size:1rem;font-weight:600;transition:opacity .2s}.btn-modal:hover{opacity:.9}.btn-yes{color:#fff;background-color:#6366f1}.btn-cancel{color:#fff;background-color:#64748b}.btn-submit{color:#fff;background-color:#198754}.photo-upload-section{text-align:left;margin:16px 0 24px}.upload-instruction{color:#64748b;text-align:center;margin-bottom:12px;font-size:.9rem}.photo-previews{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.photo-thumbnail{border:1px solid #e2e8f0;border-radius:8px;width:80px;height:80px;position:relative;overflow:hidden}.photo-thumbnail img{object-fit:cover;width:100%;height:100%}.remove-photo-btn{color:#fff;cursor:pointer;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;padding:0;display:flex;position:absolute;top:4px;right:4px}.remove-photo-btn:hover{background:#000c}.hidden-file-input{display:none}.photo-upload-label{cursor:pointer}.upload-placeholder{color:#64748b;background-color:#f8fafc;border:2px dashed #cbd5e1;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:80px;height:80px;font-size:.75rem;transition:all .2s;display:flex}.upload-placeholder:hover{color:#6366f1;background-color:#f1f5f9;border-color:#6366f1}.upload-placeholder span{margin-top:4px}.btn-yes:disabled,.btn-submit:disabled{cursor:not-allowed;opacity:.7;background-color:#94a3b8}.bottom-nav{z-index:10;background:#fff;justify-content:space-around;width:100%;max-width:768px;padding:12px 0;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -2px 10px #0000000d}.nav-item{color:#6b7280;cursor:pointer;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;display:flex}.nav-item.active{color:#0d6efd}.nav-item:hover:not(.active){color:#374151}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}