:root{--primary-h:230;--primary-s:85%;--primary-l:60%;--primary:hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-hover:hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 10%));--primary-light:hsl(var(--primary-h), var(--primary-s), 95%);--accent-h:280;--accent-s:80%;--accent-l:60%;--accent:hsl(var(--accent-h), var(--accent-s), var(--accent-l));--text-main:#1a1a1a;--text-muted:#666;--bg-main:#fff;--bg-secondary:#f8fafc;--border:#e2e8f0;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--glass-bg:#ffffffb3;--glass-border:#ffffff4d;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif}@media (prefers-color-scheme:dark){:root{--text-main:#1a1a1a;--text-muted:#666;--bg-main:#fff;--bg-secondary:#f8fafc;--border:#e2e8f0;--glass-bg:#ffffffb3;--glass-border:#ffffff1a}}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);color:var(--text-main);background-color:var(--bg-main);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}a{color:inherit;text-decoration:none;transition:all .2s}button{cursor:pointer;border:none;outline:none;font-family:inherit}.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.animate-fadeIn{animation:.8s cubic-bezier(.16,1,.3,1) forwards fadeIn}.animate-float{animation:3s ease-in-out infinite float}.gradient-text{background:linear-gradient(135deg, var(--primary), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.app-container{background-color:#fff;flex-direction:column;min-height:100vh;display:flex}.navbar{z-index:1000;width:100%;padding:1.5rem 5%;transition:all .3s;position:fixed;top:0;left:0}.navbar.scrolled{padding:.75rem 5%}.nav-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;display:flex}.logo-group{align-items:center;display:flex}.logo-link{align-items:center;gap:.75rem;text-decoration:none;transition:transform .3s;display:flex}.logo-link:hover{transform:scale(1.02)}.logo-img{object-fit:contain;filter:drop-shadow(0 4px 8px #0000001f);object-fit:contain;width:auto;height:48px;transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}.logo-link:hover .logo-img{transform:scale(1.1)rotate(-3deg)}.brand-text-wrap{border-left:2px solid #0000000f;align-items:baseline;margin-left:1.25rem;padding-left:1.25rem;display:flex}.brand-main{color:#0f172a;letter-spacing:-.02em;text-shadow:0 2px 4px #0000000d;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:900;display:flex}.brand-accent{background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 50%,#1e40af 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 8px #2563eb33);-webkit-background-clip:text;font-weight:950}.com-text{color:var(--text-muted);opacity:.5;letter-spacing:.05em;margin-left:1px;font-size:.8rem;font-weight:800}@media (width<=768px){.logo-img{height:36px}.brand-text-wrap{border-left-width:1px;margin-left:.75rem;padding-left:.75rem}.brand-main{gap:.3rem;font-size:1.1rem}.com-text{font-size:.65rem}}.nav-links a{opacity:.8;color:inherit;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .3s}.nav-links a:hover{opacity:1;color:var(--primary)}.btn{border-radius:var(--radius-md);padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-primary{background-color:var(--primary);color:#fff;box-shadow:0 4px 14px 0 rgba(var(--primary-h), var(--primary-s), var(--primary-l), .39)}.btn-primary:hover{background-color:var(--primary-hover);transform:translateY(-2px)}.banner-container{width:100%;padding-top:140px;overflow:hidden}.main-banner{width:100%;height:auto;display:block}.tracking-section{flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;padding:4rem 5%;display:flex}.tracking-card{border-radius:var(--radius-lg);text-align:center;width:100%;max-width:800px;box-shadow:var(--shadow-xl);background:#fff;padding:3rem}.tracking-card h2{margin-bottom:1rem;font-size:2.5rem}.tracking-card p{color:var(--text-muted);margin-bottom:2rem;font-size:1.1rem}.tracking-input-group{border-radius:var(--radius-md);border:2px solid var(--border);background:#fff;gap:1rem;padding:.5rem;transition:border-color .3s;display:flex}.tracking-input-group:focus-within{border-color:var(--primary)}.tracking-input{color:var(--text-main);background:0 0;border:none;outline:none;flex:1;padding:1rem 1.5rem;font-family:inherit;font-size:1.1rem}.track-btn{white-space:nowrap;padding:1rem 2.5rem;font-size:1.1rem}.tracking-results{border-radius:var(--radius-lg);text-align:left;width:100%;max-width:800px;box-shadow:var(--shadow-xl);border:1px solid var(--border);background:#fff;padding:3rem}.results-header{border-bottom:2px solid #f8fafc;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;padding-bottom:2.5rem;display:flex}.tracking-id span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.tracking-id h3{color:var(--primary);font-size:2.5rem;font-weight:800;line-height:1}.product-display{color:var(--text-main);background:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .05);border-radius:var(--radius-md);border-left:4px solid var(--primary);margin-top:1rem;padding:.75rem 1.25rem;font-size:1.25rem;display:inline-block}.product-display strong{color:var(--primary);margin-left:.25rem;font-weight:800}.current-status .status-badge{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;padding:.6rem 1.2rem;font-size:1rem;font-weight:700;box-shadow:0 4px 12px #0000000d}.status-badge.out-for-delivery,.status-badge.delivered{color:#166534;background:#dcfce7}.tracking-timeline{padding-left:2.5rem;position:relative}.tracking-timeline:before{content:"";background:linear-gradient(to bottom, var(--primary) 0%, #f1f5f9 100%);border-radius:2px;width:2px;position:absolute;top:0;bottom:0;left:.45rem}.timeline-item{padding-bottom:3rem;position:relative}.timeline-item:last-child{padding-bottom:0}.timeline-dot{border:3px solid var(--primary);z-index:1;width:1rem;height:1rem;box-shadow:0 0 0 4px rgba(var(--primary-h), var(--primary-s), var(--primary-l), .1);background-color:#fff;border-radius:50%;position:absolute;top:0;left:-2.5rem}.timeline-info{justify-content:space-between;align-items:baseline;margin-bottom:.6rem;display:flex}.timeline-info h4{color:var(--text-main);font-size:1.2rem;font-weight:700}.timeline-info span{color:var(--text-muted);font-size:.9rem;font-weight:500}.timeline-content p{color:#64748b;font-size:1rem;line-height:1.6}.results-page{min-height:80vh;padding-top:120px}.results-container{max-width:800px;margin:0 auto;padding:0 5%}.back-btn{color:var(--text-muted);margin-bottom:2rem;padding:.6rem 1.2rem;font-size:.95rem;text-decoration:none;display:inline-block}.back-btn:hover{color:var(--primary);background:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .05)}.error-card{text-align:center;border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:4rem 2rem}.error-card h2{color:var(--primary);margin-bottom:1rem;font-size:3rem}.error-card p{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem}.loading-state{text-align:center;color:var(--primary);padding:5rem;font-size:1.2rem;font-weight:600}.footer-simple{text-align:center;border-top:1px solid var(--border);color:var(--text-muted);padding:2rem;font-size:.9rem}@media (width<=768px){.page-header h1{font-size:2.5rem}.tracking-card{padding:2rem 1.5rem}.tracking-card h2{font-size:1.75rem}.tracking-input-group{background:0 0;border:none;flex-direction:column;padding:0}.tracking-input{border:2px solid var(--border);border-radius:var(--radius-md);background:#fff;width:100%;margin-bottom:1rem}.track-btn{width:100%;padding:1rem}.tracking-results{border-radius:var(--radius-md);margin-top:1rem;padding:1.5rem}.results-header{flex-direction:column;align-items:flex-start;gap:1.25rem;margin-bottom:1.5rem;padding-bottom:1.5rem}.tracking-id span{font-size:.75rem}.tracking-id h3{font-size:1.75rem}.current-status .status-badge{padding:.5rem 1rem;font-size:.85rem}.tracking-timeline{padding-left:1.75rem}.tracking-timeline:before{left:.4rem}.timeline-dot{width:.85rem;height:.85rem;left:-1.75rem}.timeline-info{flex-direction:column;align-items:flex-start;gap:.25rem;margin-bottom:.4rem}.timeline-info h4{font-size:1.05rem}.timeline-info span{font-size:.8rem}.timeline-content p{font-size:.9rem}.navbar{padding:1rem 3%}.logo-img{height:60px}.banner-container{padding-top:100px}}.message-link{color:var(--primary);font-weight:500;text-decoration:underline;transition:opacity .2s}.message-link:hover{opacity:.7}.whatsapp-fab{z-index:9999;color:#fff;border-radius:var(--radius-full);background-color:#25d366;align-items:center;gap:.5rem;max-width:56px;height:56px;padding:.5rem;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:fixed;bottom:2rem;right:2rem;overflow:hidden;box-shadow:0 4px 20px #25d36680}.whatsapp-fab:hover{background-color:#20ba5a;max-width:200px;padding-right:1.5rem;box-shadow:0 8px 30px #25d36699}.pulse-ring{z-index:-1;opacity:.5;background-color:#25d366;border-radius:50%;width:56px;height:56px;animation:2s infinite pulse;position:absolute;top:0;left:0}@keyframes pulse{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}.fab-icon{flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.fab-icon svg{filter:drop-shadow(0 2px 4px #0000001a)}.fab-text{white-space:nowrap;opacity:0;font-size:1rem;font-weight:700;transition:all .3s;transform:translate(-10px)}.whatsapp-fab:hover .fab-text{opacity:1;transform:translate(0)}@media (width<=768px){.whatsapp-fab{max-width:160px;height:50px;padding-right:1.25rem;bottom:1.5rem;right:1.5rem}.pulse-ring{width:50px;height:50px}.fab-icon{width:38px;height:38px}.fab-icon svg{width:24px;height:24px}.fab-text{opacity:1;font-size:.9rem;transform:translate(0)}}.login-container{background-color:var(--bg-secondary);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{border-radius:var(--radius-lg);width:100%;max-width:450px;box-shadow:var(--shadow-xl);text-align:center;padding:3rem}.login-logo{height:80px;margin-bottom:1.5rem}.login-header h1{margin-bottom:.5rem;font-size:2rem}.login-header p{color:var(--text-muted);margin-bottom:2.5rem;font-size:.95rem}.login-form{text-align:left}.form-group{margin-bottom:1.5rem}.form-group label{color:var(--text-main);margin-bottom:.5rem;font-size:.9rem;font-weight:600;display:block}.form-group input{border-radius:var(--radius-md);border:2px solid var(--border);background:#fff;width:100%;padding:.85rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .3s}.form-group input:focus{border-color:var(--primary);outline:none}.login-btn{width:100%;margin-top:1rem;padding:1rem;font-size:1rem}.login-footer{margin-top:2rem}.login-footer a{color:var(--text-muted);font-size:.9rem;font-weight:500}.login-footer a:hover{color:var(--primary)}.dashboard-container{background-color:var(--bg-secondary);min-height:100vh}.dash-nav{z-index:100;padding:1rem 5%;position:sticky;top:0}.dash-nav-content{justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;display:flex}.dash-logo{height:40px;margin-right:1rem}.dash-user{align-items:center;gap:1.5rem;font-weight:600;display:flex}.dash-main{max-width:1400px;margin:0 auto;padding:3rem 5%}.dash-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.dash-card{border-radius:var(--radius-lg);padding:0;overflow:hidden}.dash-table{border-collapse:collapse;text-align:left;width:100%}.dash-table th{background-color:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .05);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:1.25rem 1.5rem;font-size:.9rem;font-weight:700}.dash-table td{border-top:1px solid var(--border);padding:1.25rem 1.5rem;font-size:.95rem}.status-badge{border-radius:var(--radius-full);text-transform:uppercase;padding:.4rem .8rem;font-size:.8rem;font-weight:700}.status-badge.in-transit{color:#0369a1;background:#e0f2fe}.status-badge.delivered{color:#15803d;background:#dcfce7}.status-badge.pending{color:#a16207;background:#fef3c7}.status-badge.delayed{color:#b91c1c;background:#fee2e2}.actions{gap:.75rem;display:flex}.dash-add-btn{align-items:center;gap:.5rem;display:flex}.btn-icon{border-radius:var(--radius-sm);cursor:pointer;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:.6rem;transition:all .2s;display:flex}.btn-icon:hover{background-color:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .1);color:var(--primary)}.btn-icon.delete:hover{color:#ef4444;background-color:#ef44441a}.btn-sm{padding:.5rem 1rem;font-size:.85rem}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{border-radius:var(--radius-lg);background:#fff;width:100%;max-width:500px;padding:2.5rem}.modal-content h2{text-align:center;margin-bottom:2rem}.modal-form select{border-radius:var(--radius-md);border:2px solid var(--border);background:#fff;width:100%;padding:.85rem 1rem;font-family:inherit;font-size:1rem}.modal-content.large-modal{max-width:800px}.form-row{gap:1.5rem;margin-bottom:1.5rem;display:flex}.flex-1{flex:1}.steps-manager{background:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .03);border-radius:var(--radius-md);border:1px solid var(--border);margin-top:2rem;padding:1.5rem}.steps-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.steps-header h3{color:var(--text-main);font-size:1.1rem}.steps-list{flex-direction:column;gap:1rem;max-height:300px;padding-right:.5rem;display:flex;overflow-y:auto}.step-item{border-radius:var(--radius-sm);border:1px solid var(--border);background:#fff;align-items:center;gap:1rem;padding:1rem;display:flex}.step-fields{flex:1;gap:.75rem;display:flex}.step-fields input{border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;flex:1;padding:.6rem .8rem;font-size:.9rem}.step-fields input:focus{border-color:var(--primary)}.remove-step{color:#ef4444}.remove-step:hover{background-color:#ef44441a!important}.modal-actions{justify-content:flex-end;gap:1rem;margin-top:2.5rem;display:flex}.delete-modal{text-align:center;max-width:400px}.modal-icon.warning{margin-bottom:1rem;font-size:3rem;display:block}.delete-modal p{color:var(--text-muted);margin-top:1rem}.btn-danger{background-color:#ef4444;box-shadow:0 4px 14px #ef444463}.btn-danger:hover{background-color:#dc2626;box-shadow:0 6px 20px #ef44443b}.view-modal{max-width:600px}.view-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.view-info-grid{background:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .03);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:2rem;margin-bottom:2.5rem;padding:1.5rem;display:grid}.info-item label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.85rem;display:block}.info-item p{color:var(--primary);font-size:1.2rem}.view-timeline-section h3{color:var(--text-main);margin-bottom:1.5rem;font-size:1.1rem}.view-timeline{padding-left:1.5rem;position:relative}.view-timeline:before{content:"";background:var(--border);width:2px;position:absolute;top:0;bottom:0;left:0}.v-timeline-item{padding-bottom:2rem;position:relative}.v-timeline-item:last-child{padding-bottom:0}.v-timeline-dot{background:var(--primary);width:10px;height:10px;box-shadow:0 0 0 4px white, 0 0 0 6px rgba(var(--primary-h), var(--primary-s), var(--primary-l), .1);border-radius:50%;position:absolute;top:.3rem;left:-1.5rem;transform:translate(-40%)}.v-timeline-meta{justify-content:space-between;align-items:center;margin-bottom:.3rem;display:flex}.v-timeline-meta strong{color:var(--text-main);font-size:1rem}.v-timeline-meta span{color:var(--text-muted);font-size:.85rem}.v-timeline-content p{color:var(--text-muted);font-size:.95rem}.welcome-text{cursor:pointer;border-radius:var(--radius-sm);padding:.5rem;font-weight:500;transition:color .2s}.welcome-text:hover{color:var(--primary);background:rgba(var(--primary-h), var(--primary-s), var(--primary-l), .05)}.profile-modal{max-width:500px}.modal-sections{flex-direction:column;gap:2rem;display:flex}.modal-section h3{color:var(--text-main);border-left:4px solid var(--primary);margin-bottom:1.25rem;padding-left:.75rem;font-size:1.1rem}.divider{background:var(--border);width:100%;height:1px}.status-message{border-radius:var(--radius-sm);text-align:center;margin-bottom:1.5rem;padding:1rem;font-size:.9rem}.status-message.success{color:#059669;background:#ecfdf5;border:1px solid #10b981}.status-message.error{color:#dc2626;background:#fef2f2;border:1px solid #f87171}.status-message.loading{color:#0284c7;background:#f0f9ff;border:1px solid #38bdf8}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{padding-right:3rem!important}.password-toggle{cursor:pointer;color:var(--text-muted);background:0 0;border:none;justify-content:center;align-items:center;padding:.5rem;transition:color .2s;display:flex;position:absolute;right:.75rem}.password-toggle:hover{color:var(--primary)}@media (width<=768px){.dash-nav{padding:1rem 3%}.logo>span{display:none}.dash-user .welcome-text{font-size:.85rem;display:inline-block}.dash-main{padding:2rem 3%}.dash-header{flex-direction:column;align-items:flex-start;gap:1.5rem}.dash-add-btn{justify-content:center;width:100%}.dash-table{white-space:nowrap;display:block;overflow-x:auto}.modal-content{width:95%;max-height:90vh;padding:1.5rem;overflow-y:auto}.modal-content h2{margin-bottom:1.5rem;font-size:1.5rem}.form-row{flex-direction:column;gap:1rem}.steps-manager{padding:1rem}.step-item{flex-direction:column;align-items:stretch;padding-bottom:3.5rem;position:relative}.step-fields{flex-direction:column}.remove-step{position:absolute;bottom:.5rem;right:.5rem}.modal-actions{flex-direction:column;gap:.75rem}.modal-actions .btn{width:100%}}