*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #3b82f6;--primary-dark: #2563eb;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--bg-primary: #f9fafb;--bg-secondary: #ffffff;--bg-tertiary: #f3f4f6;--text-primary: #111827;--text-secondary: #4b5563;--text-muted: #6b7280;--border-color: #e5e7eb;--card-bg: #ffffff;--header-bg: #ffffff;--input-bg: #ffffff}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #334155;--card-bg: #1e293b;--header-bg: #1e293b;--input-bg: #334155;--gray-100: #334155;--gray-200: #475569;--gray-300: #64748b;--gray-400: #94a3b8;--gray-500: #94a3b8;--gray-600: #cbd5e1;--gray-700: #cbd5e1;--gray-900: #f1f5f9;--danger-bg: #450a0a;--success-bg: #052e16;--status-delivered-bg: #166534;--status-delivered-text: #86efac;--status-transit-bg: #1e40af;--status-transit-text: #93c5fd;--status-out-bg: #92400e;--status-out-text: #fde68a;--status-exception-bg: #991b1b;--status-exception-text: #fecaca}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5;transition:background-color .2s,color .2s}.app{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--header-bg);border-bottom:1px solid var(--border-color);padding:0 1.5rem;position:sticky;top:0;z-index:100;transition:background-color .2s,border-color .2s}.header-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px}.logo{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.125rem;color:var(--text-primary);text-decoration:none}.logo svg{width:24px;height:24px;color:var(--primary)}.nav{display:flex;gap:.5rem}.nav a{padding:.5rem 1rem;color:var(--text-secondary);text-decoration:none;border-radius:6px;font-size:.875rem;font-weight:500;transition:all .15s}.nav a:hover{background:var(--bg-tertiary);color:var(--text-primary)}.theme-toggle{padding:.5rem;background:var(--bg-tertiary);border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}.theme-toggle:hover{background:var(--border-color);color:var(--text-primary)}.theme-toggle svg{width:20px;height:20px}.nav a.active{background:var(--primary);color:#fff}.main-content{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:2rem 1.5rem}.dashboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.dashboard-title h1{font-size:1.5rem;font-weight:600}.shipment-stats{display:flex;gap:1rem;margin-top:.25rem}.shipment-stats .stat{font-size:.875rem;color:var(--gray-500)}.shipment-stats .stat.active{color:var(--primary)}.shipment-stats .stat.countdown{display:inline-flex;align-items:center;background:var(--bg-tertiary);padding:.25rem .5rem;border-radius:4px;font-family:monospace;font-weight:500}.shipment-stats .stat.delivered{color:var(--success)}.filter-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--gray-200);padding-bottom:1rem}.filter-tab{padding:.5rem 1rem;border:none;background:none;font-size:.875rem;font-weight:500;color:var(--gray-500);cursor:pointer;border-radius:6px;transition:all .15s}.filter-tab:hover{background:var(--gray-100);color:var(--gray-700)}.filter-tab.active{background:var(--gray-900);color:#fff}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s}.btn svg{width:16px;height:16px}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--gray-100);color:var(--gray-700)}.btn-secondary:hover{background:var(--gray-200)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-icon{padding:.5rem;background:none;border:none;color:var(--gray-400);cursor:pointer;border-radius:4px;transition:all .15s}.btn-icon:hover{background:var(--gray-100);color:var(--gray-600)}.btn-icon.btn-danger:hover{background:var(--danger-bg, #fef2f2);color:var(--danger)}.btn-icon svg{width:18px;height:18px}.btn-sm{padding:.375rem .75rem;font-size:.8125rem}.shipment-list{display:flex;flex-direction:column;gap:.75rem}.shipment-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:1rem 1.25rem;text-decoration:none;color:inherit;transition:all .2s;display:block}.shipment-card:hover{border-color:var(--primary);box-shadow:0 2px 8px #0000001a}.shipment-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.shipment-name{font-size:1rem;font-weight:600;margin-bottom:.25rem}.shipment-carrier{font-size:.8125rem;color:var(--text-muted);display:flex;align-items:center;gap:.5rem}.tracking-number{font-family:monospace;background:var(--gray-100);padding:.125rem .375rem;border-radius:4px;font-size:.75rem}.status-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.status-badge svg{width:14px;height:14px}.status-badge.large{padding:.5rem 1rem;font-size:.875rem}.status-badge.large svg{width:18px;height:18px}.status-delivered{background:var(--status-delivered-bg, #dcfce7);color:var(--status-delivered-text, #166534)}.status-transit{background:var(--status-transit-bg, #dbeafe);color:var(--status-transit-text, #1e40af)}.status-out{background:var(--status-out-bg, #fef3c7);color:var(--status-out-text, #92400e)}.status-exception{background:var(--status-exception-bg, #fee2e2);color:var(--status-exception-text, #991b1b)}.status-pending{background:var(--gray-100);color:var(--gray-600)}.shipment-card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:.75rem;border-top:1px solid var(--border-color)}.last-update{font-size:.8125rem;color:var(--text-muted)}.last-update .label{margin-right:.25rem}.last-update .value{color:var(--text-secondary)}.last-update .relative{color:var(--text-muted);margin-left:.5rem}.shipment-actions{display:flex;align-items:center;gap:.25rem}.notification-badge{padding:.375rem;color:var(--gray-400)}.notification-badge svg{width:16px;height:16px}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:4rem 2rem;background:var(--card-bg);border-radius:8px;border:1px solid var(--border-color)}.empty-state svg{width:64px;height:64px;color:var(--gray-300);margin-bottom:1rem}.empty-state h3{font-size:1.125rem;margin-bottom:.5rem}.empty-state p{color:var(--text-muted);margin-bottom:1.5rem}.loading{text-align:center;padding:4rem;color:var(--gray-500)}.error{text-align:center;padding:2rem;color:var(--danger);background:var(--danger-bg, #fef2f2);border-radius:8px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:200}.modal{background:var(--card-bg);border-radius:12px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;border:1px solid var(--border-color)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid var(--border-color)}.modal-header h2{font-size:1.125rem}.btn-close{padding:.5rem;background:none;border:none;color:var(--gray-400);cursor:pointer;border-radius:4px}.btn-close:hover{background:var(--gray-100);color:var(--gray-600)}.btn-close svg{width:20px;height:20px}.modal form{padding:1.25rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border-color)}.form-group{margin-bottom:1.25rem}.form-group label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem;color:var(--text-secondary)}.form-group input[type=text],.form-group input[type=url],.form-group input[type=email],.form-group input[type=password],.form-group input[type=number]{width:100%;padding:.625rem .875rem;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem;transition:border-color .15s,background-color .15s;background:var(--input-bg);color:var(--text-primary)}.form-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.form-hint{display:block;margin-top:.375rem;font-size:.75rem;color:var(--text-muted)}.form-error{padding:.75rem;background:var(--danger-bg, #fef2f2);border-radius:6px;color:var(--danger);font-size:.875rem;margin-bottom:1rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.checkbox-group{display:flex;gap:1.5rem}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.875rem}.checkbox-label input{display:none}.checkbox-custom{width:18px;height:18px;border:2px solid var(--gray-300);border-radius:4px;position:relative;transition:all .15s}.checkbox-label input:checked+.checkbox-custom{background:var(--primary);border-color:var(--primary)}.checkbox-label input:checked+.checkbox-custom:after{content:"";position:absolute;top:2px;left:5px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.detail-header{margin-bottom:1.5rem}.back-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--gray-600);text-decoration:none;font-size:.875rem;font-weight:500}.back-link:hover{color:var(--gray-900)}.back-link svg{width:18px;height:18px}.detail-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.detail-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.detail-title h1{font-size:1.5rem;margin-bottom:.75rem;cursor:pointer;display:flex;align-items:center;gap:.5rem}.edit-icon{width:16px;height:16px;color:var(--gray-400);opacity:0;transition:opacity .15s}.detail-title h1:hover .edit-icon{opacity:1}.edit-name{display:flex;gap:.5rem;align-items:center}.edit-name input{padding:.5rem .75rem;border:1px solid var(--gray-300);border-radius:6px;font-size:1rem;font-weight:600}.detail-actions{display:flex;gap:.5rem}.detail-info{display:grid;gap:.75rem}.info-row{display:flex;gap:1rem}.info-label{width:140px;flex-shrink:0;font-size:.875rem;color:var(--text-muted)}.info-value{font-size:.875rem;color:var(--text-primary)}.info-value.link{color:var(--primary);display:inline-flex;align-items:center;gap:.375rem}.info-value.link svg{width:14px;height:14px}.notification-settings{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.notification-settings h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem}.notification-toggles{display:flex;gap:.5rem}.toggle-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:6px;background:var(--card-bg);font-size:.875rem;color:var(--text-secondary);cursor:pointer;transition:all .15s}.toggle-btn svg{width:18px;height:18px}.toggle-btn:hover{border-color:var(--gray-400)}.toggle-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}.timeline-section{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem}.timeline-section h2{font-size:1.125rem;margin-bottom:1.5rem}.timeline{position:relative;padding-left:2rem}.timeline:before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--gray-200)}.timeline-item{position:relative;padding-bottom:1.5rem}.timeline-item:last-child{padding-bottom:0}.timeline-marker{position:absolute;left:-2rem;top:4px;width:16px;height:16px;background:var(--card-bg);border:2px solid var(--gray-300);border-radius:50%}.timeline-item.latest .timeline-marker{background:var(--primary);border-color:var(--primary)}.timeline-content{padding-left:.5rem}.timeline-status{font-weight:600;font-size:.9375rem;margin-bottom:.25rem}.timeline-location{font-size:.875rem;color:var(--gray-600)}.timeline-details{font-size:.8125rem;color:var(--gray-500);margin-top:.25rem}.timeline-date{font-size:.75rem;color:var(--gray-400);margin-top:.375rem}.no-history{text-align:center;padding:2rem;color:var(--gray-500)}.no-history p{margin-bottom:1rem}.settings-page h1{font-size:1.5rem;margin-bottom:1.5rem}.settings-section{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.settings-section h2{font-size:1rem;font-weight:600;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:1px solid var(--border-color)}.settings-actions{display:flex;justify-content:flex-end}.message{padding:.875rem 1rem;border-radius:8px;margin-bottom:1.5rem;font-size:.875rem}.message.success{background:#dcfce7;color:#166534}.message.error{background:#fee2e2;color:#991b1b}.error-page{text-align:center;padding:4rem 2rem}.error-page h2{margin-bottom:1rem}@media (max-width: 640px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:1rem}.filter-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.shipment-card-footer{flex-direction:column;align-items:flex-start;gap:.75rem}.form-row{grid-template-columns:1fr}.detail-card-header{flex-direction:column;gap:1rem}.detail-actions{width:100%}.detail-actions .btn{flex:1;justify-content:center}.info-row{flex-direction:column;gap:.25rem}.info-label{width:auto}}