/* ── TOKENS ─────────────────────────────── */
  :root {
    --gecko:    #78BE20;
    --gecko2:   #5fa012;
    --gecko3:   #a8e050;
    --bg:       #F5F2EC;
    --surface:  #FFFFFF;
    --card:     #FFFFFF;
    --border:   #E0DDD5;
    --border2:  #C8C4BA;
    --ink:      #1A1A18;
    --muted:    #6B6860;
    --dim:      #A8A49C;
    --tread:    url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='8' height='4' rx='1' fill='%23E0DDD5'/%3E%3Crect x='12' y='0' width='8' height='4' rx='1' fill='%23E0DDD5'/%3E%3Crect x='4' y='8' width='8' height='4' rx='1' fill='%23E0DDD5'/%3E%3Crect x='16' y='8' width='8' height='4' rx='1' fill='%23E0DDD5'/%3E%3C/svg%3E");
  }

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

  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    background-image: var(--tread);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.6;
  }

  /* ── HEADER ─────────────────────────────── */
  header {
    background: var(--ink);
    padding: 0 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(120,190,32,0.04) 60px,
      rgba(120,190,32,0.04) 61px
    );
    pointer-events: none;
  }
  .header-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 48px 0 40px;
    position: relative;
  }
  .eyebrow {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--gecko);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .eyebrow::before, .eyebrow::after {
    content: '';
    height: 1px;
    width: 40px;
    background: var(--gecko);
    opacity: 0.5;
  }
  h1 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(52px, 10vw, 110px);
    font-weight: 900;
    color: #FFFFFF;
    letter-spacing: -1px; text-transform: uppercase;
    line-height: 0.9;
    margin-bottom: 6px;
  }
  h1 em {
    color: var(--gecko);
    font-style: normal;
  }
  .tagline {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #888;
    letter-spacing: 0.1em;
    margin-bottom: 36px;
    text-transform: uppercase;
  }

  /* ── STATS ───────────────────────────────── */
  .stats {
    display: inline-flex;
    gap: 0;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
  }
  .stat {
    padding: 12px 28px;
    border-right: 1px solid #333;
    text-align: center;
  }
  .stat:last-child { border-right: none; }
  .stat-num {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: var(--gecko);
    display: block;
    line-height: 1;
    letter-spacing: -1px;
  }
  .stat-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: #666;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* ── JEEP BADGE ──────────────────────────── */
  .jeep-strip {
    background: var(--gecko);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 500;
  }
  .jeep-strip img { flex-shrink: 0; }

  /* ── CONTROLS ───────────────────────────── */
  .controls {
    background: var(--surface);
    border-bottom: 2px solid var(--border);
    padding: 14px 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  }
  .search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
  }
  .search-wrap::before {
    content: '⌕';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dim);
    font-size: 18px;
    pointer-events: none;
  }
  input[type="search"] {
    width: 100%;
    background: var(--bg);
    border: 1.5px solid var(--border2);
    color: var(--ink);
    padding: 10px 14px 10px 40px;
    border-radius: 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
  }
  input[type="search"]:focus { border-color: var(--gecko); box-shadow: 0 0 0 3px rgba(120,190,32,0.15); }
  input[type="search"]::placeholder { color: var(--dim); }

  select {
    background: var(--bg);
    border: 1.5px solid var(--border2);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
  }
  select:focus { border-color: var(--gecko); }

  .result-count {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: var(--dim);
    white-space: nowrap;
    margin-left: auto;
  }
  .result-count span { color: var(--gecko2); font-weight: 600; }

  /* ── FEATURE FILTERS ─────────────────────── */
  .feature-filters {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
  }
  .filter-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: 0.08em;
    margin-right: 4px;
    text-transform: uppercase;
  }
  .feat-btn {
    background: var(--surface);
    border: 1.5px solid var(--border2);
    color: var(--muted);
    padding: 5px 12px;
    border-radius: 20px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    font-weight: 500;
  }
  .feat-btn:hover { border-color: var(--gecko); color: var(--gecko2); }
  .feat-btn.active { background: var(--gecko); color: var(--ink); border-color: var(--gecko); font-weight: 600; }

  /* ── GRID ───────────────────────────────── */
  .grid-wrap { padding: 24px; }
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
  }

  /* ── BREWERY CARD ───────────────────────── */
  .card {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    min-height: 200px;
  }
  .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--province-color, var(--gecko));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .card:hover {
    border-color: var(--gecko);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(120,190,32,0.15), 0 4px 12px rgba(0,0,0,0.08);
  }
  .card:hover::before { transform: scaleX(1); }

/* Visit date badge - next to Jeep icon */
.visit-badge {
  position: absolute;
  top: 10px;
  right: 40px;
  background: rgba(120, 190, 32, 0.15);
  color: var(--gecko2);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(120, 190, 32, 0.3);
  z-index: 1;
  pointer-events: none;
  letter-spacing: 0.02em;
}

  @keyframes fadeUp {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
  }
  .province-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--province-color, var(--gecko));
    flex-shrink: 0; margin-top: 4px;
  }
  .card-region {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: var(--dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .ocb-badge {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 0.06em;
    background: #EDF7D8;
    border: 1px solid #C5E89A;
    color: var(--gecko2);
    border-radius: 12px;
    padding: 2px 8px;
    white-space: nowrap;
  }
  .card-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: 0.03em;
  }
  .card-city {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 14px;
  }

  .styles { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
  .style-tag {
    background: #F0EDE8;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: var(--muted);
  }

  .features { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
  .feat-tag {
    background: #F7F9F2;
    border: 1px solid #DFF0C0;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 10px;
    color: var(--gecko2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
  }

  .card-footer { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 12px; }
  .btn-directions {
    flex: 1;
    background: var(--gecko);
    color: var(--ink);
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: background 0.15s;
  }
  .btn-directions:hover { background: var(--gecko2); color: #fff; }
  .btn-web {
    background: var(--bg);
    border: 1.5px solid var(--border2);
    color: var(--muted);
    border-radius: 8px;
    padding: 9px 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    display: block;
    transition: all 0.15s;
    font-weight: 500;
  }
  .btn-web:hover { border-color: var(--gecko); color: var(--gecko2); }
  .btn-visited {
    background: #F7F9F2;
    border: 1.5px solid var(--gecko);
    color: var(--gecko2);
    border-radius: 8px;
    padding: 9px 12px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-weight: 600;
  }
  .btn-visited:hover, .btn-visited.marked { background: var(--gecko); color: var(--ink); }

  /* ── EMPTY STATE ─────────────────────────── */
  .empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 80px 20px;
    color: var(--dim);
  }
  .empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
  .empty h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 28px;
    color: var(--muted);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
  }
  .empty p { font-size: 12px; }

  /* ── TRAIL DASHBOARD ────────────────────── */
  .dashboard {
    background: var(--ink);
    border-top: 3px solid var(--gecko);
    border-bottom: 3px solid var(--gecko);
    padding: 32px 24px;
    color: #fff;
  }
  .dashboard-inner {
    max-width: 960px;
    margin: 0 auto;
  }
  .dashboard-heading {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2em;
    color: var(--gecko);
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dashboard-heading::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #333;
  }
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
  }
  .dash-stat {
    background: #242420;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px;
  }
  .dash-stat-num {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 42px;
    color: var(--gecko);
    line-height: 1;
    letter-spacing: -1px;
  }
  .dash-stat-unit {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--gecko3);
    margin-left: 3px;
  }
  .dash-stat-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
  }
  .dash-trail {
    background: #242420;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 16px 20px;
  }
  .dash-trail-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
  }
  .trail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
  }
  .trail-stop {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .trail-dot {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gecko);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: var(--ink);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.15s;
    position: relative;
  }
  .trail-dot:hover { transform: scale(1.2); }
  .trail-dot[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
  }
  .trail-line {
    width: 24px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--gecko) 0, var(--gecko) 4px, transparent 4px, transparent 8px);
    flex-shrink: 0;
  }
  .trail-empty {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #555;
    font-style: italic;
  }

  /* ── VIEW TOGGLE ─────────────────────────── */
  .view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border: 1.5px solid var(--border2);
    border-radius: 8px;
    padding: 3px;
  }
  .view-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.15s;
  }
  .view-btn.active { background: var(--gecko); color: var(--ink); }

  /* ── MAP VIEW ────────────────────────────── */
  #mapView {
    position: relative;
    z-index: 1;
    display: none;
    height: calc(100vh - 160px);
    min-height: 500px;
  }
  #mapView.active { display: block; }
  .grid-wrap.hidden { display: none; }

  /* Leaflet popup overrides */
  .leaflet-popup-content-wrapper {
    background: var(--ink);
    color: #fff;
    border-radius: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
  .leaflet-popup-tip { background: var(--ink); }
  .leaflet-popup-content { margin: 12px 14px; }
  .map-popup-name {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin-bottom: 2px;
  }
  .map-popup-city { font-size: 11px; color: #aaa; margin-bottom: 8px; }
  .map-popup-visited { color: var(--gecko); font-size: 11px; font-weight: 700; margin-bottom: 6px; }
  .map-popup-btn {
    display: inline-block;
    background: var(--gecko);
    color: var(--ink);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-right: 5px;
  }

  /* ── ROUTE PLANNER ───────────────────────── */
  .route-planner {
    background: var(--ink);
    border-bottom: 2px solid var(--gecko);
    padding: 12px 24px;
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .route-planner.active { display: flex; }
  .route-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gecko);
    white-space: nowrap;
  }
  .route-input {
    background: #2a2a28;
    border: 1.5px solid #444;
    color: #fff;
    padding: 8px 12px;
    border-radius: 7px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    width: 180px;
    transition: border-color 0.15s;
  }
  .route-input:focus { border-color: var(--gecko); }
  .route-input::placeholder { color: #666; }
  .route-arrow { color: var(--gecko); font-size: 16px; font-weight: 900; }
  .route-btn {
    background: var(--gecko);
    color: var(--ink);
    border: none;
    border-radius: 7px;
    padding: 8px 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.15s;
  }
  .route-btn:hover { background: var(--gecko2); color: #fff; }
  .route-btn.clear {
    background: transparent;
    border: 1.5px solid #444;
    color: #888;
  }
  .route-btn.clear:hover { border-color: #888; color: #fff; }
  .route-status {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 11px;
    color: #888;
    font-style: italic;
  }
  .route-km-badge {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #1a2a10;
    border: 1px solid var(--gecko);
    color: var(--gecko);
    border-radius: 10px;
    padding: 2px 7px;
    margin-left: 6px;
  }

  /* ── FOOTER ──────────────────────────────── */
  footer {
    background: var(--ink);
    border-top: 3px solid var(--gecko);
    padding: 24px;
    text-align: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: #666;
    letter-spacing: 0.06em;
  }
  footer a { color: var(--gecko); text-decoration: none; }

  /* ── DETAIL MODAL ────────────────────────── */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(26,26,24,0.6);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px;
    transform: translateY(40px);
    transition: transform 0.25s ease;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
  }
  .modal-overlay.open .modal { transform: translateY(0); }

  /* Green top bar on modal */
  .modal::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--gecko);
    margin: -28px -28px 24px;
    border-radius: 0;
  }

  .modal-top { display: flex; justify-content: space-between; margin-bottom: 20px; }
  .modal-close {
    background: var(--bg);
    border: 1.5px solid var(--border2);
    color: var(--muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .modal-close:hover { background: var(--gecko); color: var(--ink); border-color: var(--gecko); }
  .modal-name {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1;
  }
  .modal-section { margin-bottom: 18px; }
  .modal-section-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .modal-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }
  .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .modal-stat {
    background: var(--bg);
    border-radius: 10px;
    padding: 14px;
    border: 1px solid var(--border);
  }
  .modal-stat-val {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 26px;
    color: var(--gecko2);
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .modal-stat-label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
  }
  .social-links { display: flex; gap: 8px; flex-wrap: wrap; }
  .social-link {
    color: var(--gecko2);
    text-decoration: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    background: #F7F9F2;
    border: 1px solid #DFF0C0;
    border-radius: 6px;
    padding: 5px 12px;
    transition: all 0.15s;
    font-weight: 500;
  }
  .social-link:hover { background: var(--gecko); color: var(--ink); border-color: var(--gecko); }
  .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
  .modal-actions .btn-directions { font-size: 13px; padding: 12px 0; }
  .modal-actions .btn-web { font-size: 13px; padding: 12px 18px; }
  .verified-row {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 9px;
    color: var(--dim);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .status-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gecko);
    margin-right: 5px;
  }
#visitedListOverlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  overflow-y: auto;
  align-items: center;
  justify-content: center;
}

#visitedListModal {
  background: white;
  border-radius: 12px;
  max-width: 800px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0;
}

#visitedListContent {
  padding: 24px;
}

/* Thelma circular badge - top right corner */
.card.visited {
  border-color: var(--gecko);
}

.card.visited::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/png;base64,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");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgba(120,190,32,0.6));
  pointer-events: none;
}