* { margin: 0; padding: 0; box-sizing: border-box; }

    /* Navbar responsive styles */
    #vicbug-navbar {
      width: 100%;
      max-width: 100vw;
      overflow: hidden;
    }
    #desktop-nav { display: none !important; }
    #navbar-menu-toggle { display: block; }
    @media (min-width: 768px) {
      #desktop-nav { display: flex !important; }
      #navbar-menu-toggle { display: none !important; }
    }
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
    body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .container { display: contents; }
    #map { position: fixed !important; top: 64px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100vw !important; height: calc(100vh - 64px) !important; z-index: 1; }

    /* Tooltip styles */
    .js-tooltip {
      position: fixed;
      background: #1f2937;
      color: white;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      z-index: 99999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s;
    }
    .js-tooltip.visible {
      opacity: 1;
    }

    /* Minimized toggle buttons container - hidden by default, shown when minimized AND route exists */
    .minimized-toggles-container {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 8px;
    }
    .sidebar.minimized .minimized-toggles-container.has-route {
      display: flex;
    }
    /* Minimized toggle buttons - styled like download/upload buttons */
    .minimized-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      padding: 0;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      cursor: pointer;
      color: #374151;
      transition: all 0.15s ease;
    }
    .minimized-toggle-btn:hover {
      background: #f3f4f6;
      border-color: #d1d5db;
    }
    .minimized-toggle-btn svg {
      width: 24px;
      height: 24px;
    }
    /* Active state - blue when toggled on */
    .minimized-toggle-btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: white;
    }
    .minimized-toggle-btn.active:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    /* Preline-style sidebar */
    .sidebar {
      position: fixed;
      top: 64px;
      left: 0;
      width: 320px;
      height: calc(100vh - 64px);
      background: white;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #e5e7eb;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
      overflow: hidden;
      transition: width 0.3s ease;
      z-index: 100;
    }

    /* Minimized sidebar state */
    .sidebar.minimized {
      width: 72px;
    }
    .sidebar.minimized .sidebar-logo,
    .sidebar.minimized .section-label,
    .sidebar.minimized .waypoint-inputs,
    .sidebar.minimized .action-buttons,
    .sidebar.minimized .undo-redo-buttons,
    .sidebar.minimized .accordion,
    .sidebar.minimized .toggle-item span,
    .sidebar.minimized .loading-indicator span,
    .sidebar.minimized .footer-btn span,
    .sidebar.minimized select,
    .sidebar.minimized .nav-select-wrapper,
    .sidebar.minimized #instructions-container,
    .sidebar.minimized .lights-toilets-toggles {
      display: none !important;
    }
    .sidebar.minimized .sidebar-content {
      padding: 8px;
    }
    .sidebar.minimized .toggle-item {
      justify-content: center;
      padding: 12px;
      gap: 0;
    }
    .sidebar.minimized .toggle-item input[type="checkbox"] {
      display: none;
    }
    .sidebar.minimized .toggle-item .toggle-icon {
      width: 24px;
      height: 24px;
    }
    .sidebar.minimized .sidebar-footer {
      display: flex;
      flex-direction: column;
      padding: 8px;
      gap: 4px;
    }
    .sidebar.minimized .footer-btn {
      padding: 12px;
      justify-content: center;
    }
    .sidebar.minimized .footer-btn svg {
      width: 20px;
      height: 20px;
    }
    /* Hide mobile-only buttons by default */
    .footer-btn.mobile-only {
      display: none !important;
    }
    /* Stats indicator button - blue when route exists */
    .footer-btn.stats-indicator {
      background: #3b82f6;
      color: white;
    }
    .footer-btn.stats-indicator:hover {
      background: #2563eb;
    }
    /* Top stats indicator - blue icon only, transparent background */
    /* Hidden by default, only shown when sidebar is minimized */
    .stats-indicator-top {
      display: none;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      margin: 0 auto 8px auto;
      background: transparent;
      border-radius: 50%;
      cursor: pointer;
      color: #3b82f6;
    }
    .sidebar.minimized .stats-indicator-top:not(.hidden) {
      display: flex;
    }
    .stats-indicator-top:hover {
      background: rgba(59, 130, 246, 0.15);
    }
    .stats-indicator-top svg {
      width: 22px;
      height: 22px;
    }
    .sidebar.minimized .loading-indicator {
      justify-content: center;
      padding: 12px;
      margin: 4px 8px;
    }
    .sidebar.minimized .sidebar-header {
      padding: 16px 8px;
      flex-direction: column;
      gap: 12px;
    }
    .sidebar.minimized .sidebar-logo {
      justify-content: center;
    }
    .sidebar.minimized .sidebar-toggle {
      position: static;
      padding: 8px;
    }

    /* Header with logo */
    .sidebar-header {
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e5e7eb;
      position: relative;
    }
    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sidebar-logo svg {
      width: 28px;
      height: 28px;
      color: #3b82f6;
      flex-shrink: 0;
    }
    .sidebar-logo span {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      white-space: nowrap;
      overflow: hidden;
      transition: opacity 0.2s;
    }
    .sidebar-toggle {
      background: none;
      border: none;
      color: #9ca3af;
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      transition: all 0.2s;
    }
    .sidebar-toggle:hover {
      background: #f3f4f6;
      color: #6b7280;
    }
    .sidebar-toggle svg {
      width: 18px;
      height: 18px;
    }

    /* Navigation content */
    .sidebar-content {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: scroll;
      padding: 12px;
      padding-bottom: 80px;
      transition: padding 0.3s;
    }

    /* Make route breakdown accordion fill remaining space and scroll */
    #road-breakdown {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #breakdown-content {
      flex: 1;
      overflow-y: auto;
      max-height: none;
    }

    /* Menu items - Preline style */
    .menu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      font-size: 14px;
      color: #374151;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .menu-item:hover {
      background: #f3f4f6;
    }
    .menu-item.active {
      background: #eff6ff;
      color: #2563eb;
    }
    .menu-item svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    .menu-item-badge {
      margin-left: auto;
      font-size: 11px;
      padding: 2px 8px;
      background: #e5e7eb;
      border-radius: 10px;
      color: #6b7280;
    }

    /* Section labels */
    .section-label {
      font-size: 11px;
      font-weight: 600;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 16px 12px 8px;
    }

    /* Waypoint inputs */
    .waypoint-inputs { padding: 4px 0; }
    .waypoint-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
    }
    .waypoint-letter {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: white;
      flex-shrink: 0;
    }
    .waypoint-letter.start { background: #22c55e; }
    .waypoint-letter.end { background: #ef4444; }
    .waypoint-letter.mid { background: #3b82f6; }
    .input-wrapper { flex: 1; position: relative; }
    .input-wrapper input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 13px;
      background: #f9fafb;
      transition: all 0.15s;
    }
    .input-wrapper input:focus {
      outline: none;
      border-color: #3b82f6;
      background: white;
      box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    }
    .input-wrapper input.filled {
      background: white;
      border-color: #d1d5db;
    }
    .input-wrapper input::placeholder {
      color: #9ca3af;
    }
    .remove-stop {
      background: none;
      border: none;
      color: #d1d5db;
      cursor: pointer;
      font-size: 16px;
      padding: 4px 6px;
      border-radius: 4px;
    }
    .remove-stop:hover {
      color: #ef4444;
      background: #fef2f2;
    }

    /* Action buttons row */
    .action-buttons {
      display: flex;
      gap: 6px;
      padding: 8px 12px 16px;
    }
    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px;
      font-size: 13px;
      color: #374151;
      background: #f3f4f6;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .action-btn:hover {
      background: #e5e7eb;
    }
    .action-btn.primary {
      background: #3b82f6;
      color: white;
    }
    .action-btn.primary:hover {
      background: #2563eb;
    }
    .action-btn.danger {
      color: #ef4444;
    }
    .action-btn.danger:hover {
      background: #fef2f2;
    }
    .action-btn svg {
      width: 16px;
      height: 16px;
    }
    .action-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }
    .action-btn:disabled:hover {
      background: #f3f4f6;
    }

    /* Undo/Redo buttons row */
    .undo-redo-buttons {
      display: flex;
      gap: 6px;
      padding: 0 12px 12px;
    }

    /* Undo button styling */
    #undo-btn:not(:disabled),
    #undo-footer-btn:not(:disabled) {
      background: #fef3c7;
      color: #b45309;
    }
    #undo-btn:not(:disabled):hover,
    #undo-footer-btn:not(:disabled):hover {
      background: #fde68a;
    }

    /* Redo button styling */
    #redo-btn:not(:disabled),
    #redo-footer-btn:not(:disabled) {
      background: #dbeafe;
      color: #1d4ed8;
    }
    #redo-btn:not(:disabled):hover,
    #redo-footer-btn:not(:disabled):hover {
      background: #bfdbfe;
    }

    /* Search results dropdown */
    .search-results {
      position: absolute;
      z-index: 100;
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      max-height: 200px;
      overflow-y: auto;
      width: 100%;
      margin-top: 4px;
      left: 0;
    }
    .search-result {
      padding: 10px 12px;
      cursor: pointer;
      border-bottom: 1px solid #f3f4f6;
    }
    .search-result:hover { background: #f9fafb; }
    .search-result:last-child { border-bottom: none; }
    .search-result-name { font-size: 13px; font-weight: 500; color: #111827; }
    .search-result-address { font-size: 11px; color: #6b7280; margin-top: 2px; }

    /* Toggle items */
    .toggle-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      font-size: 13px;
      color: #374151;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
    }
    .toggle-item:hover {
      background: #f3f4f6;
    }
    .toggle-item .toggle-icon {
      color: #9ca3af;
      flex-shrink: 0;
    }
    .toggle-item:has(input:checked) .toggle-icon {
      color: #3b82f6;
    }
    .toggle-item input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #3b82f6;
    }
    .toggle-item .badge {
      margin-left: auto;
      font-size: 11px;
      color: #9ca3af;
    }
    /* Minimized toggle items - show icon + checkbox */
    .sidebar.minimized .toggle-item .toggle-icon {
      display: block;
    }

    /* Loading indicator */
    .loading-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      margin: 4px 12px;
      background: #f3e8ff;
      border-radius: 6px;
      font-size: 12px;
      color: #7c3aed;
    }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* Stats card */
    .stats-card {
      margin: 8px 12px;
      padding: 16px;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      border-radius: 12px;
      color: white;
    }
    .stats-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      opacity: 0.9;
      margin-bottom: 12px;
    }
    .stats-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .stats-card-item {
      text-align: center;
    }
    .stats-card-value {
      font-size: 18px;
      font-weight: 700;
    }
    .stats-card-value .stats-unit {
      font-size: 10px;
      font-weight: 500;
      opacity: 0.8;
      margin-left: 1px;
    }
    .stats-card-label {
      font-size: 9px;
      opacity: 0.8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .stats-card-note {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.2);
      font-size: 12px;
      font-weight: 500;
      opacity: 0.95;
      line-height: 1.6;
    }

    /* Accordion sections with animated transitions */
    .accordion {
      border-top: 1px solid #e5e7eb;
      overflow: hidden;
    }
    .accordion-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      background: none;
      border: none;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      transition: background 0.15s;
    }
    .accordion-toggle:hover {
      background: #f9fafb;
    }
    .accordion-arrow {
      transition: transform 0.3s ease;
      color: #9ca3af;
    }
    .accordion-arrow.collapsed {
      transform: rotate(0deg) !important;
    }
    .accordion-content {
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
      max-height: 1000px;
      padding: 0 12px 12px;
      opacity: 1;
    }
    .accordion-content.collapsed {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
    }

    /* Breakdown styles */
    .breakdown-highlight {
      padding: 12px;
      background: #f0fdf4;
      border-radius: 8px;
      margin-bottom: 12px;
    }
    .breakdown-highlight.warning {
      background: #fef9c3;
    }
    .breakdown-highlight.danger {
      background: #fee2e2;
    }
    .breakdown-highlight-label {
      font-size: 11px;
      color: #6b7280;
      margin-bottom: 4px;
    }
    .breakdown-highlight-value {
      font-size: 24px;
      font-weight: 700;
      color: #16a34a;
    }
    .breakdown-highlight.warning .breakdown-highlight-value {
      color: #ca8a04;
    }
    .breakdown-highlight.danger .breakdown-highlight-value {
      color: #dc2626;
    }
    .breakdown-highlight-note {
      font-size: 11px;
      color: #6b7280;
      margin-top: 2px;
    }

    .breakdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0;
    }
    .breakdown-item-icon {
      font-size: 16px;
      width: 24px;
      text-align: center;
    }
    .breakdown-item-content {
      flex: 1;
    }
    .breakdown-item-header {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      margin-bottom: 4px;
    }
    .breakdown-item-name {
      color: #374151;
      font-weight: 500;
    }
    .breakdown-item-value {
      color: #6b7280;
    }
    .breakdown-item-bar {
      height: 4px;
      background: #e5e7eb;
      border-radius: 2px;
      overflow: hidden;
    }
    .breakdown-item-bar-fill {
      height: 100%;
      border-radius: 2px;
    }

    /* Footer actions */
    .sidebar-footer {
      padding: 12px;
      border-top: 1px solid #e5e7eb;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .footer-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 10px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 8px;
      cursor: pointer;
      border: none;
      transition: all 0.15s;
    }
    .footer-btn.secondary {
      background: #f3f4f6;
      color: #374151;
    }
    .footer-btn.secondary:hover {
      background: #e5e7eb;
    }
    .footer-btn.primary {
      background: #3b82f6;
      color: white;
    }
    .footer-btn.primary:hover {
      background: #2563eb;
    }
    .footer-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .footer-btn svg {
      width: 16px;
      height: 16px;
    }
    /* Hide Undo/Redo in footer on desktop - save space */
    @media (min-width: 769px) {
      #undo-footer-btn,
      #redo-footer-btn {
        display: none;
      }
    }


    /* Modal */
    .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
    .modal-content { background: white; border-radius: 12px; padding: 24px; max-width: 480px; width: calc(100% - 32px); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .modal-header h3 { font-size: 18px; font-weight: 600; color: #111827; }
    .modal-close { background: none; border: none; color: #9ca3af; cursor: pointer; font-size: 20px; }
    .modal-body p { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
    .modal-input-row { display: flex; gap: 8px; }
    .modal-input-row input { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; background: #f9fafb; }
    .modal-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 12px; color: #9ca3af; }

    /* Map Context Menu */
    .map-context-menu {
      position: fixed;
      background: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
      padding: 6px;
      z-index: 10000;
      min-width: 180px;
    }
    .ctx-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 10px 12px;
      border: none;
      background: none;
      font-size: 14px;
      color: #374151;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
    }
    .ctx-menu-item:hover {
      background: #f3f4f6;
    }
    .ctx-menu-item svg {
      width: 18px;
      height: 18px;
      color: #6b7280;
    }
    .ctx-menu-item:first-child svg {
      color: #ef4444;
    }

    /* Form elements */
    .form-group {
      margin-bottom: 16px;
    }
    .form-group label {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      margin-bottom: 6px;
    }
    .form-select,
    .form-textarea {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      background: #f9fafb;
      font-family: inherit;
    }
    .form-select:focus,
    .form-textarea:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    .form-textarea {
      resize: vertical;
      min-height: 80px;
    }
    /* =====================================================
       HAZARD REPORT PANEL (iOS-style)
       Desktop: side panel | Mobile: bottom sheet
       ===================================================== */
    .hazard-panel {
      position: fixed;
      background: white;
      z-index: 9500;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    }
    .hazard-panel.visible {
      opacity: 1;
      visibility: visible;
    }
    /* Desktop: Side panel */
    @media (min-width: 769px) {
      .hazard-panel {
        top: 64px;
        right: 0;
        width: 400px;
        height: calc(100vh - 64px);
        border-left: 1px solid #e5e7eb;
        box-shadow: -4px 0 20px rgba(0,0,0,0.1);
        transform: translateX(100%);
      }
      .hazard-panel.visible {
        transform: translateX(0);
      }
    }
    /* Mobile: Bottom sheet */
    @media (max-width: 768px) {
      .hazard-panel {
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 70vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        transform: translateY(100%);
      }
      .hazard-panel.visible {
        transform: translateY(0);
      }
    }
    .hazard-panel-grabber {
      display: none;
    }
    @media (max-width: 768px) {
      .hazard-panel-grabber {
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 8px auto 0;
      }
    }
    .hazard-panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .hazard-panel-title {
      font-size: 18px;
      font-weight: 600;
      color: #111827;
    }
    .hazard-panel-location {
      font-size: 13px;
      color: #6b7280;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .hazard-panel-location svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .hazard-panel-close {
      background: #f3f4f6;
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .hazard-panel-close:hover {
      background: #e5e7eb;
    }
    .hazard-panel-close svg {
      width: 18px;
      height: 18px;
    }
    .hazard-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    /* Hazard Type Section */
    .hazard-type-section {
      margin-bottom: 20px;
    }
    .hazard-type-label {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .hazard-type-scroll {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .hazard-type-scroll::-webkit-scrollbar {
      display: none;
    }
    .hazard-type-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 12px 16px;
      border: 2px solid transparent;
      border-radius: 12px;
      background: rgba(0,0,0,0.04);
      cursor: pointer;
      transition: all 0.2s;
      flex-shrink: 0;
      min-width: 80px;
    }
    .hazard-type-btn:hover {
      background: rgba(0,0,0,0.08);
    }
    .hazard-type-btn.selected {
      background: color-mix(in srgb, var(--hazard-color) 15%, transparent);
      border-color: var(--hazard-color);
    }
    .hazard-type-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--hazard-color) 20%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--hazard-color);
      transition: all 0.2s;
    }
    .hazard-type-btn.selected .hazard-type-icon {
      background: var(--hazard-color);
      color: white;
    }
    .hazard-type-icon svg {
      width: 22px;
      height: 22px;
    }
    .hazard-type-btn span {
      font-size: 12px;
      font-weight: 500;
      color: #374151;
    }
    .hazard-type-btn.selected span {
      color: var(--hazard-color);
      font-weight: 600;
    }

    /* Hazard Drawing Section (for Closure/Detour) */
    .hazard-drawing-section {
      margin-bottom: 20px;
      padding: 16px;
      background: color-mix(in srgb, var(--drawing-color, #dc2626) 8%, #f3f4f6);
      border-radius: 12px;
      border: 2px solid var(--drawing-color, #dc2626);
    }
    .hazard-drawing-info {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 500;
      color: var(--drawing-color, #dc2626);
    }
    .hazard-drawing-info svg {
      flex-shrink: 0;
    }
    .hazard-drawing-controls {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    .hazard-drawing-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      background: white;
      color: #374151;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }
    .hazard-drawing-btn:hover {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    .hazard-drawing-btn svg {
      width: 14px;
      height: 14px;
    }
    .hazard-waypoint-count {
      font-size: 13px;
      color: #6b7280;
    }
    .hazard-waypoint-count span {
      font-weight: 600;
      color: var(--drawing-color, #dc2626);
    }

    /* Hazard drawing waypoint markers */
    .hazard-waypoint-marker {
      width: 16px;
      height: 16px;
      background: var(--marker-color, #dc2626);
      border: 2px solid white;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    }
    .hazard-waypoint-marker.start {
      width: 20px;
      height: 20px;
    }

    /* Drawing Section Blocks (Collapsible) */
    .drawing-section-block {
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      background: white;
    }
    .drawing-section-block.closure {
      border-left: 3px solid #ef4444;
    }
    .drawing-section-block.detour {
      border-left: 3px solid #22c55e;
    }
    .drawing-section-block.expanded {
      border-color: #d1d5db;
    }
    .drawing-section-block.closure.expanded {
      border-left-color: #ef4444;
      background: rgba(239, 68, 68, 0.02);
    }
    .drawing-section-block.detour.expanded {
      border-left-color: #22c55e;
      background: rgba(34, 197, 94, 0.02);
    }
    .drawing-section-header {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 12px;
      background: transparent;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .drawing-section-header:hover {
      background: #f9fafb;
    }
    .drawing-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      font-size: 13px;
      font-weight: 600;
      color: #374151;
    }
    .drawing-section-block.closure .drawing-section-title svg {
      color: #ef4444;
    }
    .drawing-section-block.detour .drawing-section-title svg {
      color: #22c55e;
    }
    .drawing-section-status {
      font-size: 11px;
      color: #9ca3af;
      margin-right: 8px;
    }
    .drawing-section-status.has-data {
      color: #22c55e;
      font-weight: 500;
    }
    .drawing-section-block.closure .drawing-section-status.has-data {
      color: #ef4444;
    }
    .drawing-section-header .chevron {
      width: 16px;
      height: 16px;
      color: #9ca3af;
      transition: transform 0.2s;
    }
    .drawing-section-block.expanded .drawing-section-header .chevron {
      transform: rotate(180deg);
    }
    .drawing-section-content {
      padding: 12px;
      background: #f9fafb;
      border-top: 1px solid #e5e7eb;
    }
    .drawing-section-block.closure .drawing-section-content {
      background: rgba(239, 68, 68, 0.03);
    }
    .drawing-section-block.detour .drawing-section-content {
      background: rgba(34, 197, 94, 0.03);
    }

    /* Drawing Controls */
    .drawing-controls {
      padding: 12px;
      background: #f9fafb;
      border-radius: 10px;
      margin-top: 8px;
    }
    .drawing-hint {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: rgba(59, 130, 246, 0.1);
      border-radius: 8px;
      margin-bottom: 12px;
      font-size: 13px;
      color: #3b82f6;
      font-weight: 500;
    }
    .drawing-section-block.closure .drawing-hint {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
    .drawing-section-block.detour .drawing-hint {
      background: rgba(34, 197, 94, 0.1);
      color: #22c55e;
    }
    .drawing-waypoints-list {
      max-height: 120px;
      overflow-y: auto;
      margin-bottom: 12px;
    }
    .drawing-waypoint-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      font-size: 12px;
      color: #4b5563;
      background: white;
      border-radius: 6px;
      margin-bottom: 4px;
    }
    .drawing-waypoint-item .waypoint-num {
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #e5e7eb;
      border-radius: 50%;
      font-size: 11px;
      font-weight: 600;
      color: #374151;
    }
    .drawing-waypoint-item.closure .waypoint-num {
      background: rgba(239, 68, 68, 0.2);
      color: #ef4444;
    }
    .drawing-waypoint-item.detour .waypoint-num {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
    }
    .drawing-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .snap-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #4b5563;
      cursor: pointer;
    }
    .snap-toggle input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #3b82f6;
    }
    .drawing-action-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 6px 10px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      background: white;
      color: #374151;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }
    .drawing-action-btn:hover:not(:disabled) {
      background: #f3f4f6;
      border-color: #9ca3af;
    }
    .drawing-action-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .drawing-action-btn svg {
      width: 14px;
      height: 14px;
    }

    /* Description Section */
    .hazard-description-section {
      margin-bottom: 20px;
    }
    .hazard-textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #d1d5db;
      border-radius: 10px;
      font-size: 14px;
      font-family: inherit;
      resize: vertical;
      min-height: 80px;
      background: #f9fafb;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .hazard-textarea:focus {
      outline: none;
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      background: white;
    }

    /* Submit Section */
    .hazard-submit-section {
      padding-top: 10px;
    }
    .hazard-submit-btn {
      width: 100%;
      padding: 14px 20px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: background 0.2s, transform 0.1s;
    }
    .hazard-submit-btn:hover {
      background: #2563eb;
    }
    .hazard-submit-btn:active {
      transform: scale(0.98);
    }
    .hazard-submit-btn:disabled {
      background: #9ca3af;
      cursor: not-allowed;
      transform: none;
    }
    .hazard-submit-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Hazard Placeholder Marker (shown while reporting) */
    .hazard-placeholder-marker {
      position: relative;
      cursor: default;
    }
    .hazard-placeholder-inner {
      width: 40px;
      height: 40px;
      background: #ef4444;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.4);
      border: 3px solid white;
    }
    .hazard-placeholder-inner svg {
      width: 20px;
      height: 20px;
      transform: rotate(45deg);
    }
    .hazard-placeholder-pulse {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(239, 68, 68, 0.3);
      border-radius: 50%;
      animation: hazard-pulse 1.5s ease-out infinite;
      pointer-events: none;
    }
    @keyframes hazard-pulse {
      0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
      }
    }

    .hidden { display: none !important; }
    .route-marker { width: 32px; height: 32px; border: 3px solid white; border-radius: 50%; cursor: grab; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; color: white; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 100; }

    /* Map legend */
    .legend {
      padding: 8px 12px;
      margin: 4px 12px 8px;
      background: #f9fafb;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }
    .legend-title {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      font-size: 12px;
      color: #374151;
    }
    .legend-line {
      width: 24px;
      height: 4px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .legend-line.dashed {
      background: repeating-linear-gradient(
        90deg,
        currentColor 0px,
        currentColor 4px,
        transparent 4px,
        transparent 8px
      );
      height: 3px;
    }
    .legend-marker-balloon {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
    }
    .legend-marker-balloon .marker-circle {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1.5px solid rgba(255,255,255,0.8);
    }
    .legend-marker-balloon .marker-point {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      margin-top: -1px;
    }
    .legend-section {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e5e7eb;
    }
    .legend-section:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .legend-section-title {
      font-size: 10px;
      font-weight: 500;
      color: #9ca3af;
      margin-bottom: 4px;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .auth-container {
      padding: 8px 12px;
    }
    .login-prompt {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      background: #f3f4f6;
      border-radius: 8px;
      cursor: pointer;
      border: 1px solid #e5e7eb;
      transition: all 0.2s;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
    }
    .login-prompt:hover {
      background: #e5e7eb;
      border-color: #d1d5db;
    }
    .login-prompt svg {
      width: 18px;
      height: 18px;
      color: #6b7280;
      flex-shrink: 0;
    }
    .auth-status {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: #f3f4f6;
      border-radius: 8px;
    }
    .auth-status .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #9333ea;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      flex-shrink: 0;
      overflow: hidden;
    }
    .auth-status .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .auth-status .user-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
    }
    .auth-status .user-name {
      font-size: 13px;
      font-weight: 500;
      color: #111827;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .auth-status .signout-link {
      font-size: 11px;
      color: #6b7280;
      cursor: pointer;
    }
    .auth-status .signout-link:hover {
      color: #ef4444;
    }
    /* Minimized state */
    .sidebar.minimized .auth-container {
      padding: 8px;
      display: flex;
      justify-content: center;
    }
    .sidebar.minimized .login-prompt {
      width: 36px;
      height: 36px;
      padding: 0;
      justify-content: center;
      border-radius: 50%;
    }
    .sidebar.minimized .login-prompt span {
      display: none;
    }
    .sidebar.minimized .auth-status {
      padding: 0;
      background: none;
      justify-content: center;
    }
    .sidebar.minimized .auth-status .user-info {
      display: none;
    }
    .sidebar.minimized .auth-status .user-avatar {
      cursor: pointer;
    }

    /* Login Modal */
    .login-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }
    .login-modal-content {
      background: white;
      border-radius: 16px;
      padding: 32px;
      max-width: 400px;
      width: 90%;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    }
    .login-modal-header {
      text-align: center;
      margin-bottom: 24px;
    }
    .login-modal-header h2 {
      font-size: 24px;
      font-weight: 700;
      color: #111827;
      margin-bottom: 8px;
    }
    .login-modal-header p {
      color: #6b7280;
      font-size: 14px;
    }
    .login-btn {
      width: 100%;
      padding: 14px 20px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-bottom: 12px;
      transition: all 0.2s;
    }
    .login-btn.google {
      background: white;
      border: 1px solid #e5e7eb;
      color: #374151;
    }
    .login-btn.google:hover {
      background: #f9fafb;
      border-color: #d1d5db;
    }
    .login-btn.apple {
      background: #000;
      border: none;
      color: white;
    }
    .login-btn.apple:hover {
      background: #1a1a1a;
    }
    .login-btn.email {
      background: #9333ea;
      border: none;
      color: white;
    }
    .login-btn.email:hover {
      background: #7c3aed;
    }
    .login-divider {
      display: flex;
      align-items: center;
      margin: 20px 0;
      color: #9ca3af;
      font-size: 13px;
    }
    .login-divider::before,
    .login-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: #e5e7eb;
    }
    .login-divider span {
      padding: 0 12px;
    }
    .login-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #9ca3af;
    }
    .email-form {
      display: none;
    }
    .email-form.active {
      display: block;
    }
    .email-form input {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      margin-bottom: 12px;
    }
    .email-form input:focus {
      outline: none;
      border-color: #9333ea;
      box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
    }
    .back-to-options {
      background: none;
      border: none;
      color: #9333ea;
      cursor: pointer;
      font-size: 13px;
      margin-top: 12px;
    }

    /* Bike path hover tooltip */

    /* Map layer controls - floating on map */
    .map-layer-controls {
      position: fixed;
      top: 80px;
      right: 16px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
      z-index: 1000;
      overflow: hidden;
    }
    .map-layer-controls .layer-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      cursor: pointer;
      font-size: 13px;
      color: #374151;
      border: none;
      background: transparent;
      width: 100%;
      transition: background 0.15s;
    }
    .map-layer-controls .layer-toggle:hover {
      background: #f3f4f6;
    }
    .map-layer-controls .layer-toggle:not(:last-child) {
      border-bottom: 1px solid #e5e7eb;
    }
    .map-layer-controls .layer-toggle svg {
      width: 18px;
      height: 18px;
      color: #6b7280;
      flex-shrink: 0;
    }
    .map-layer-controls .layer-toggle.active svg {
      color: #3b82f6;
    }
    .map-layer-controls .layer-toggle .check-icon {
      width: 16px;
      height: 16px;
      margin-left: auto;
      opacity: 0;
      color: #22c55e;
    }
    .map-layer-controls .layer-toggle.active .check-icon {
      opacity: 1;
    }
    .map-layer-controls .badge {
      font-size: 11px;
      color: #9ca3af;
      margin-left: auto;
    }
    .map-layer-controls .layer-toggle.active .badge {
      margin-left: 0;
      margin-right: 4px;
    }

    /* Map legend accordion */
    .map-legend-accordion {
      border-top: 1px solid #e5e7eb;
    }
    .legend-accordion-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 10px 14px;
      background: transparent;
      border: none;
      font-size: 13px;
      font-weight: 500;
      color: #374151;
      cursor: pointer;
      transition: background 0.15s;
    }
    .legend-accordion-toggle:hover {
      background: #f3f4f6;
    }
    .legend-accordion-toggle .accordion-arrow {
      transition: transform 0.2s;
    }
    .map-legend-accordion.open .legend-accordion-toggle .accordion-arrow {
      transform: rotate(180deg);
    }
    .legend-accordion-content {
      display: none;
      padding: 0 14px 12px;
      background: #f9fafb;
    }
    .map-legend-accordion.open .legend-accordion-content {
      display: block;
    }
    .legend-section {
      margin-bottom: 8px;
    }
    .legend-section:last-child {
      margin-bottom: 0;
    }
    .legend-section-title {
      font-size: 10px;
      font-weight: 600;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 4px;
      margin-top: 8px;
    }
    .legend-section:first-child .legend-section-title {
      margin-top: 0;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #4b5563;
      padding: 2px 0;
    }
    .legend-line {
      width: 20px;
      height: 3px;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .legend-line.dashed {
      background-size: 6px 100% !important;
    }

    /* Bike path hover tooltip */
    .bike-path-tooltip {
      position: fixed;
      background: rgba(147, 51, 234, 0.95);
      color: white;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 500;
      pointer-events: none;
      z-index: 1000;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      opacity: 0;
      transition: opacity 0.15s;
    }
    .bike-path-tooltip.visible {
      opacity: 1;
    }

    /* Hazard tooltip - Preline style */
    .hazard-tooltip {
      position: fixed;
      background: white;
      color: #1f2937;
      padding: 12px 14px;
      padding-right: 28px;
      border-radius: 8px;
      font-size: 13px;
      pointer-events: none;
      z-index: 1000;
      max-width: 280px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.15s, visibility 0.15s;
    }
    .hazard-tooltip.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .hazard-tooltip-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 4px;
      text-transform: capitalize;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hazard-tooltip-close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      color: #9ca3af;
      cursor: pointer;
      padding: 2px;
      line-height: 1;
      font-size: 16px;
      pointer-events: auto;
    }
    .hazard-tooltip-close:hover {
      color: #6b7280;
    }
    .hazard-tooltip-image {
      width: 100%;
      max-width: 250px;
      margin-top: 8px;
      border-radius: 6px;
      cursor: zoom-in;
      transition: transform 0.2s;
    }
    .hazard-tooltip-image:hover {
      opacity: 0.9;
    }

    /* Full-screen image overlay */
    .image-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      cursor: zoom-out;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.2s, visibility 0.2s;
    }
    .image-overlay.visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .image-overlay img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .image-overlay-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      font-size: 32px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }
    .image-overlay-close:hover {
      background: rgba(255,255,255,0.3);
    }
    .image-overlay-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.5);
      border: none;
      color: white;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, opacity 0.2s;
      z-index: 10;
    }
    .image-overlay-nav:hover {
      background: rgba(0,0,0,0.7);
    }
    .image-overlay-nav .material-icons-outlined {
      font-size: 36px;
    }
    .image-overlay-prev {
      left: 20px;
    }
    .image-overlay-next {
      right: 20px;
    }
    .image-overlay-nav.hidden {
      opacity: 0;
      pointer-events: none;
    }
    .image-overlay-counter {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.6);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
    }
    .hazard-tooltip-desc {
      color: #4b5563;
      line-height: 1.4;
      margin-bottom: 6px;
    }
    .hazard-tooltip-meta {
      font-size: 11px;
      color: #9ca3af;
    }

    /* Hazard marker - iOS teardrop style */
    .hazard-marker {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    .hazard-marker-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.7);
    }
    .hazard-marker-point {
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid #ef4444;
      margin-top: -2px;
    }

    /* Toast notification - combined loading and hint */
    .map-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 20px;
      background: #1f2937;
      color: white;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      z-index: 1000;
      opacity: 0;
      transition: opacity 0.3s, transform 0.3s;
      pointer-events: none;
    }
    .map-toast.visible {
      opacity: 1;
    }
    .map-toast .spinner {
      animation: spin 1s linear infinite;
    }
    .map-toast .toast-text {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .map-toast .divider {
      width: 1px;
      height: 16px;
      background: rgba(255,255,255,0.3);
    }

    /* Context Menu - Preline style */
    .context-menu {
      position: fixed;
      background: white;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
      padding: 6px;
      min-width: 200px;
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.95);
      transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
    }
    .context-menu.visible {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }
    .context-menu-header {
      padding: 10px 12px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid #f3f4f6;
      margin-bottom: 4px;
    }
    .context-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      font-size: 14px;
      color: #374151;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.1s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }
    .context-menu-item:hover {
      background: #f3f4f6;
    }
    .context-menu-item svg {
      width: 18px;
      height: 18px;
      color: #6b7280;
    }
    .context-menu-item.primary {
      color: #3b82f6;
    }
    .context-menu-item.primary svg {
      color: #3b82f6;
    }

    /* Trail Detail Panel */
    .trail-panel {
      position: fixed;
      background: white;
      z-index: 9000;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    }
    .trail-panel.visible {
      opacity: 1;
      visibility: visible;
    }
    /* Desktop: Side panel */
    @media (min-width: 769px) {
      .trail-panel {
        top: 64px;
        right: 0;
        width: 540px;
        height: calc(100vh - 64px);
        border-left: 1px solid #e5e7eb;
        box-shadow: -4px 0 20px rgba(0,0,0,0.1);
        transform: translateX(100%);
      }
      .trail-panel.visible {
        transform: translateX(0);
      }
    }
    /* Mobile: Bottom sheet */
    @media (max-width: 768px) {
      .trail-panel {
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        transform: translateY(100%);
      }
      .trail-panel.visible {
        transform: translateY(0);
      }
    }
    .trail-panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .trail-panel-grabber {
      display: none;
    }
    @media (max-width: 768px) {
      .trail-panel-grabber {
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 8px auto 0;
      }
    }
    .trail-panel-title {
      font-size: 18px;
      font-weight: 600;
      color: #111827;
      line-height: 1.3;
    }
    .trail-panel-subtitle {
      font-size: 13px;
      color: #6b7280;
      margin-top: 4px;
    }
    .trail-panel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .trail-panel-reverse {
      background: #f3f4f6;
      border: none;
      border-radius: 8px;
      padding: 8px;
      cursor: pointer;
      color: #6b7280;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, transform 0.2s;
    }
    .trail-panel-reverse:hover {
      background: #e5e7eb;
      color: #374151;
    }
    .trail-panel-reverse.reversed {
      background: #3b82f6;
      color: white;
    }
    .trail-panel-reverse.reversed:hover {
      background: #2563eb;
    }
    .trail-panel-reverse .material-icons-outlined {
      font-size: 20px;
    }
    .trail-panel-close {
      background: #f3f4f6;
      border: none;
      border-radius: 8px;
      padding: 8px;
      cursor: pointer;
      color: #6b7280;
      flex-shrink: 0;
    }
    .trail-panel-close:hover {
      background: #e5e7eb;
      color: #374151;
    }
    .trail-panel-close svg {
      width: 20px;
      height: 20px;
    }
    .trail-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
    }
    .trail-panel-stats {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
    }
    .trail-stats-row {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
    }
    .trail-stat-inline {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 500;
      color: #374151;
    }
    .trail-stat-inline svg {
      width: 16px;
      height: 16px;
      color: #6b7280;
      flex-shrink: 0;
    }
    .trail-stat-inline.muted {
      color: #9ca3af;
      font-weight: 400;
    }
    /* Legacy stat boxes - keep for backwards compat */
    .trail-stat {
      text-align: center;
      padding: 10px 12px;
      background: #f9fafb;
      border-radius: 10px;
      min-width: 60px;
      flex: 1;
    }
    .trail-stat-value {
      font-size: 16px;
      font-weight: 700;
      color: #111827;
      white-space: nowrap;
    }
    .trail-stat-label {
      font-size: 10px;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 2px;
    }
    .trail-section {
      margin-bottom: 20px;
    }
    .trail-section-title {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .trail-section-title svg {
      width: 16px;
      height: 16px;
      color: #9ca3af;
    }
    /* Elevation chart */
    .trail-elevation-chart {
      min-height: 100px;
      background: #f9fafb;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6b7280;
      font-size: 13px;
      overflow: hidden;
    }
    .trail-elevation-chart svg {
      display: block;
    }
    /* Photo gallery */
    .trail-photos {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 8px;
      -webkit-overflow-scrolling: touch;
    }
    .trail-photo {
      flex-shrink: 0;
      width: 120px;
      height: 90px;
      border-radius: 8px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .trail-photo:hover {
      transform: scale(1.02);
    }
    /* Way type breakdown */
    .trail-waytype-bar {
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      margin-bottom: 10px;
    }
    .trail-waytype-segment {
      height: 100%;
    }
    .trail-waytype-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .trail-waytype-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #374151;
    }
    .trail-waytype-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    /* Loading state */
    .trail-panel-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: #6b7280;
    }
    .trail-panel-loading svg {
      width: 32px;
      height: 32px;
      animation: spin 1s linear infinite;
      margin-bottom: 12px;
    }

    /* Trail Description Accordions */
    .trail-intro {
      margin-bottom: 16px;
    }
    .trail-intro-paragraph {
      font-size: 14px;
      line-height: 1.6;
      color: #374151;
      margin: 0 0 12px 0;
    }
    .trail-intro-paragraph:last-child {
      margin-bottom: 0;
    }
    .trail-accordions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .trail-accordion {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      background: white;
    }
    .trail-accordion-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: #f9fafb;
      border: none;
      width: 100%;
      text-align: left;
      cursor: pointer;
      transition: background 0.15s;
    }
    .trail-accordion-header:hover {
      background: #f3f4f6;
    }
    .trail-accordion-header .accordion-icon {
      font-size: 20px;
      color: #6b7280;
      flex-shrink: 0;
    }
    .trail-accordion-header .accordion-title {
      font-size: 14px;
      font-weight: 500;
      color: #374151;
      flex: 1;
    }
    .trail-accordion-header .accordion-chevron {
      font-size: 20px;
      color: #9ca3af;
      transition: transform 0.2s;
    }
    .trail-accordion.open .accordion-chevron {
      transform: rotate(180deg);
    }
    .trail-accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-out, padding 0.3s ease;
      padding: 0 14px;
    }
    .trail-accordion.open .trail-accordion-content {
      max-height: 2000px;
      padding: 8px 14px 14px;
      overflow-y: auto;
    }
    .trail-accordion-content p {
      font-size: 13px;
      line-height: 1.6;
      color: #4b5563;
      margin: 0;
    }
    /* Paragraph styles (matching iOS 8px spacing) */
    .trail-paragraph {
      font-size: 15px;
      line-height: 1.5;
      color: #1f2937;
      margin-bottom: 8px;
    }
    .trail-paragraph:last-child {
      margin-bottom: 0;
    }
    .trail-bullet {
      display: flex;
      align-items: flex-start;
      gap: 8px;
    }
    .trail-bullet .bullet {
      font-weight: 600;
      color: #1f2937;
      flex-shrink: 0;
    }

    /* Station Panel Styles */
    .station-panel-loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: #6b7280;
      font-size: 14px;
    }
    .station-panel-loading svg {
      width: 32px;
      height: 32px;
      margin-bottom: 12px;
      color: #3b82f6;
    }
    .station-panel-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: #6b7280;
      font-size: 14px;
      text-align: center;
      gap: 8px;
    }
    .station-retry-btn {
      margin-top: 12px;
      padding: 8px 16px;
      background: #3b82f6;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
    }
    .station-retry-btn:hover {
      background: #2563eb;
    }
    .station-departures {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .departure-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      background: #f9fafb;
      border-radius: 10px;
      transition: background 0.15s;
    }
    .departure-item:hover {
      background: #f3f4f6;
    }
    .departure-time {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 50px;
    }
    .departure-minutes {
      font-size: 20px;
      font-weight: 700;
      color: #111827;
      line-height: 1;
    }
    .departure-minutes.soon {
      color: #22c55e;
    }
    .departure-minutes.delayed {
      color: #f59e0b;
    }
    .departure-min-label {
      font-size: 10px;
      color: #9ca3af;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .departure-info {
      flex: 1;
      min-width: 0;
    }
    .departure-destination {
      font-size: 14px;
      font-weight: 500;
      color: #111827;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .departure-route {
      font-size: 12px;
      color: #6b7280;
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .departure-platform {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      background: #e5e7eb;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #374151;
      flex-shrink: 0;
    }
    .departure-scheduled {
      font-size: 11px;
      color: #9ca3af;
      text-align: right;
      min-width: 50px;
    }
    .departure-no-results {
      text-align: center;
      padding: 40px 20px;
      color: #6b7280;
      font-size: 14px;
    }
    .departure-no-results svg {
      width: 40px;
      height: 40px;
      color: #d1d5db;
      margin-bottom: 12px;
    }
    /* Metro/V-Line color accent */
    .departure-item.metro {
      border-left: 3px solid #3b82f6;
    }
    .departure-item.vline {
      border-left: 3px solid #b45309;
    }

    /* Timetable Accordions */
    .station-timetables {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid #e5e7eb;
    }
    .timetable-section-title {
      font-size: 13px;
      font-weight: 600;
      color: #374151;
      margin-bottom: 12px;
    }
    .timetable-accordion {
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 8px;
      background: white;
    }
    .timetable-accordion-header {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 12px 14px;
      background: #f9fafb;
      border: none;
      cursor: pointer;
      font-size: 14px;
      color: #374151;
      text-align: left;
      transition: background 0.15s;
    }
    .timetable-accordion-header:hover {
      background: #f3f4f6;
    }
    .timetable-accordion-header svg:first-child {
      color: #6b7280;
      flex-shrink: 0;
    }
    .timetable-accordion-title {
      font-weight: 500;
      flex: 1;
    }
    .timetable-accordion-date {
      font-size: 12px;
      color: #9ca3af;
    }
    .timetable-chevron {
      color: #9ca3af;
      transition: transform 0.2s;
      flex-shrink: 0;
    }
    .timetable-accordion.open .timetable-chevron {
      transform: rotate(180deg);
    }
    .timetable-accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    .timetable-accordion.open .timetable-accordion-content {
      max-height: 2000px;
      overflow-y: auto;
    }
    .timetable-inner {
      padding: 12px 14px;
    }
    .timetable-direction {
      margin-bottom: 16px;
    }
    .timetable-direction:last-child {
      margin-bottom: 0;
    }
    .timetable-direction-name {
      font-size: 13px;
      font-weight: 600;
      color: #111827;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid #e5e7eb;
    }
    .timetable-period {
      margin-bottom: 10px;
    }
    .timetable-period-label {
      font-size: 11px;
      font-weight: 600;
      color: #6b7280;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }
    .timetable-times {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .timetable-time {
      display: inline-block;
      padding: 4px 8px;
      background: #f3f4f6;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      color: #374151;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    }
    .timetable-time.metro {
      background: #eff6ff;
      color: #1d4ed8;
    }
    .timetable-time.vline {
      background: #fef3c7;
      color: #92400e;
    }
    .timetable-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      color: #6b7280;
      font-size: 13px;
      gap: 8px;
    }
    .timetable-loading svg {
      width: 16px;
      height: 16px;
      animation: spin 1s linear infinite;
    }
    .timetable-empty {
      padding: 16px;
      text-align: center;
      color: #9ca3af;
      font-size: 13px;
    }

    /* Hide info icon on desktop */
    .legend-info-icon {
      display: none;
    }

    /* =====================================================
       MOBILE: Layer controls as icon rail
       ===================================================== */
    @media (max-width: 768px) {

      /* Sidebar 20% thinner on mobile */
      .sidebar {
        width: 328px;
      }
      .sidebar.minimized {
        width: 58px;
      }

      /* Show mobile-only buttons when sidebar is minimized on mobile (but not if hidden) */
      .sidebar.minimized .footer-btn.mobile-only:not(.hidden) {
        display: flex !important;
      }

      /* Move footer up on mobile when minimized (raised higher to avoid nav bar) */
      .sidebar.minimized .sidebar-footer {
        margin-bottom: 105px;
      }

      /* Hide hover tooltips on mobile - tap shows popup instead */
      .js-tooltip,
      .bike-path-tooltip,
      .hazard-hover-tooltip {
        display: none !important;
      }

      /* Faded red style for clear button on mobile */
      .sidebar.minimized .footer-btn.danger-subtle {
        background: #fef2f2;
        color: #dc2626;
        border: 1px solid #fecaca;
      }
      .sidebar.minimized .footer-btn.danger-subtle:hover:not(:disabled) {
        background: #fee2e2;
      }
      .sidebar.minimized .footer-btn.danger-subtle:disabled {
        background: #f9fafb;
        color: #d1d5db;
        border-color: #e5e7eb;
      }

      /* Fix profile circle on mobile */
      .sidebar.minimized .login-prompt {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        aspect-ratio: 1;
        border-radius: 50%;
      }


      /* Scale down toast notification and layer behind sidebar */
      .map-toast {
        transform: translateX(-50%) scale(0.65);
        white-space: nowrap;
        z-index: 50;
      }

      /* Make expanded sidebar scrollable on mobile */
      .sidebar:not(.minimized) {
        max-height: calc(100vh - 64px);
        overflow: hidden;
      }
      .sidebar:not(.minimized) .sidebar-content {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        max-height: none;
        padding-bottom: 100px;
      }

      /* Hide undo/redo buttons and footer in expanded sidebar on mobile */
      .sidebar:not(.minimized) .undo-redo-buttons {
        display: none !important;
      }
      .sidebar:not(.minimized) .sidebar-footer {
        display: none !important;
      }

      .map-layer-controls {
        top: 74px;
        right: 10px;
      }

      /* Move Mapbox controls up */
      .mapboxgl-ctrl-bottom-right {
        bottom: 80px !important;
      }

      /* Hide other toggles when weather is expanded on mobile */
      .map-layer-controls.weather-expanded .layer-toggle:not(#toggle-wind),
      .map-layer-controls.weather-expanded .map-legend-accordion {
        display: none !important;
      }

      /* Hide other toggles when legend is expanded on mobile */
      .map-layer-controls.legend-expanded .layer-toggle {
        display: none !important;
      }

      /* Hide POI filter accordion on mobile */
      #poi-filter-accordion {
        display: none !important;
      }

      /* Hide text, badges, check icons - show only main icon */
      .map-layer-controls .layer-toggle span,
      .map-layer-controls .layer-toggle .badge,
      .map-layer-controls .layer-toggle .check-icon {
        display: none;
      }

      /* Compact icon-only buttons */
      .map-layer-controls .layer-toggle {
        padding: 10px;
        justify-content: center;
        gap: 0;
      }

      .map-layer-controls .layer-toggle svg {
        width: 20px;
        height: 20px;
      }

      /* Legend section - completely hidden by default on mobile */
      .map-legend-accordion .legend-accordion-content {
        display: none !important;
      }

      /* Only show when explicitly opened */
      .map-legend-accordion.open .legend-accordion-content {
        display: block !important;
      }

      /* Legend toggle - show as icon button */
      .legend-accordion-toggle {
        padding: 10px;
        justify-content: center;
      }

      /* Hide "Legend" text and chevron on mobile */
      .legend-accordion-toggle span,
      .legend-accordion-toggle .accordion-arrow {
        display: none;
      }

      /* Show info icon on mobile */
      .legend-accordion-toggle .legend-info-icon {
        display: block !important;
        width: 20px;
        height: 20px;
        color: #6b7280;
      }
    }