:root { --bg: #07090f; --card: #111820; --border: #1c2a3a; --muted: #4a6070; --text: #dce8f0; --text-dim: #7a98a8; --gold: #CEB888; --gold-dark: #8E6F3E; --success: #2ecc8a; --route-a: #e8a020; --route-b: #3b9eff; --repo: #ff4f4f; --violet: #a78bfa;  --surface: #0d1117; }  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }  ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--card); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #8E6F3E; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); }   .main-header { background: var(--gold); border-bottom: 2px solid #000; padding: 0 20px; display: flex; align-items: center; gap: 14px; min-height: 100px; flex-shrink: 0; } .header-logo { height: 85px; width: auto; object-fit: contain; flex-shrink: 0; } .header-titles { display: flex; flex-direction: column; } .header-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: 1px; color: #000; } .header-subtitle { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 26px; font-style: italic; color: #5a4500; letter-spacing: 3px; margin-top: 5px; padding-left: 120px; } .header-badge { margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--gold); border-radius: 20px; padding: 6px 16px 6px 8px; border: 3px solid #000; } .badge-logo { height: 48px; width: auto; object-fit: contain; flex-shrink: 0; } .badge-info { display: flex; flex-direction: column; gap: 2px; } .badge-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; color: #000; } .badge-email { font-size: 16px; color: #000; opacity: 0.75; text-decoration: none; letter-spacing: 0.5px; }  .btn-signout { margin-left: auto; white-space: nowrap; background: transparent; border: 2px solid #000; color: #000; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; padding: 5px 12px; border-radius: 3px; cursor: pointer; text-transform: uppercase; transition: all 0.15s; text-decoration: none; } .btn-signout:hover { background: rgba(0,0,0,0.1); }  @media (max-width: 1600px) { html:not([data-scaled]) .main-header { min-height: 84px; gap: 10px; } html:not([data-scaled]) .header-logo { height: 66px; } html:not([data-scaled]) .header-title { font-size: 22px; }  html:not([data-scaled]) .header-subtitle { font-size: 18px; letter-spacing: 2px; padding-left: 0; } html:not([data-scaled]) .badge-logo { height: 38px; } html:not([data-scaled]) .badge-name { font-size: 15px; } html:not([data-scaled]) .badge-email { font-size: 12px; } } @media (max-width: 1150px) { .main-header { min-height: 0; padding: 10px 14px; gap: 8px; flex-wrap: wrap; } .header-logo { height: 48px; } .header-title { font-size: 17px; letter-spacing: 0; } .header-subtitle { font-size: 12px; letter-spacing: 1px; margin-top: 3px; } .header-badge { padding: 4px 12px 4px 6px; border-width: 2px; } .badge-logo { height: 30px; } .badge-name { font-size: 13px; } .badge-email { font-size: 11px; } }  @media (max-width: 600px) { .header-badge { margin-left: 0; width: 100%; justify-content: center; } }  .form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }  .form-row { display: flex; gap: 12px; } .form-row .form-group { flex: 1; } .form-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); } .form-input { background: var(--card); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; border-radius: 4px; outline: none; transition: border-color 0.2s; width: 100%; } select.form-input { appearance: none; -webkit-appearance: none; background-color: var(--card); background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; padding-right: 32px; } select option { background: var(--card); color: var(--text); } .form-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(206,184,136,0.12); }  input.toolbar-search.search-active { border-color: var(--gold); color: var(--gold); }  .btn-edit, .btn-del { background: transparent; border: 1px solid var(--border); color: var(--muted); font-size: 10px; width: 24px; height: 24px; border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; } .btn-edit:hover { border-color: #3b9eff; color: #3b9eff; } .btn-del:hover { border-color: #ff4f4f; color: #ff4f4f; } .btn-csv { flex: 1; background: transparent; border: 1px solid var(--muted); color: var(--muted); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 9px; letter-spacing: 1.5px; padding: 6px 10px; border-radius: 3px; cursor: pointer; transition: all 0.15s; } .btn-csv:hover { border-color: var(--gold); color: var(--gold); }  .route-num { width: 22px; height: 22px; background: var(--card); border: 1px solid var(--gold); color: var(--gold); font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 3px; flex-shrink: 0; } .route-cities { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); } .route-arrow { color: var(--gold); font-size: 14px; } .route-freq { background: rgba(206,184,136,0.12); border: 1px solid rgba(206,184,136,0.25); color: var(--gold); font-size: 14px; padding: 2px 7px; border-radius: 3px; text-align: center; white-space: nowrap; }  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; } .modal-overlay.visible { display: flex; } .modal { background: #0d1117; border: 1px solid var(--border); border-radius: 6px; padding: 28px; width: 380px; animation: fadeUp 0.2s ease; } .modal-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: var(--gold); margin-bottom: 20px; letter-spacing: 1px; } .modal-footer { display: flex; gap: 8px; margin-top: 20px; } .btn-cancel { flex: 1; background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 9px; border-radius: 4px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .btn-cancel:hover { border-color: var(--muted); color: var(--text); }  .btn-save, .btn-save-modal { flex: 2; background: var(--gold); border: none; color: #000; padding: 9px; border-radius: 4px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .btn-save:hover, .btn-save-modal:hover { background: #d9c99f; }  .section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .section-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }  .tab-bar { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; } .tab-btn { flex: 1; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.5px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 4px; cursor: pointer; transition: all 0.15s; } .tab-btn:hover { color: var(--text); } .tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }  @keyframes slideIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes sweep { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }  .sync-status { --accent: var(--gold); position: fixed; right: 18px;  bottom: 96px; z-index: 9999; display: flex; align-items: center; gap: 9px; max-width: 330px; padding: 9px 14px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 4px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3px; line-height: 1.5; color: var(--text);  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .sync-status.visible { opacity: 1; transform: translateY(0); }  .sync-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .sync-status.pending { --accent: var(--gold); }  .sync-status.offline { --accent: var(--repo); }  .sync-status.saved { --accent: var(--success); }  @media (max-width: 700px) { .sync-status { left: 12px; right: 12px; bottom: 88px; max-width: none; } }