:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f2f0ed;
  --stat-surface: #efebe6;
  --text: #222222;
  --muted: #6f6a64;
  --border: rgba(34, 34, 34, 0.12);
  --primary: #222222;
  --primary-strong: #111111;
  --primary-soft: #f4f0eb;
  --classic: #2f2b26;
  --history: #6f5b3e;
  --river: #668434;
  --family: #4f8f5b;
  --cafe: #a4622b;
  --hidden: #7a527c;
  --museum: #365f7d;
  --shopping: #8a6a3f;
  --free: #386b3f;
  --food: #a4622b;
  --culture: #365f7d;
  --nature: #668434;
  --playground: #4f8f5b;
  --secondhand: #7a527c;
  --stay: #6f5b3e;
  --rain: #5b6c78;
  --shadow: 0 16px 38px rgba(34, 34, 34, 0.08);
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.35rem;
  --font-body: "Satoshi", "Inter", sans-serif;
  --font-display: "Switzer", "Satoshi", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10170f;
  --surface: #1d1f18;
  --surface-2: #25311f;
  --stat-surface: #2c3f25;
  --text: #eeeadf;
  --muted: #aaa799;
  --border: rgba(238, 234, 223, 0.14);
  --primary: #9cc58f;
  --primary-strong: #c4e3bd;
  --primary-soft: #273827;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Leaflet fallback if CDN CSS is blocked */
.leaflet-container { overflow: hidden; touch-action: pan-x pan-y; font-family: var(--font-body); }
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer { position: absolute; left: 0; top: 0; }
.leaflet-tile { user-select: none; -webkit-user-drag: none; max-width: none !important; max-height: none !important; }
.leaflet-tile-pane { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-marker-pane { z-index: 600; }
.leaflet-popup-pane { z-index: 700; }
.leaflet-control { position: relative; z-index: 800; pointer-events: auto; }
.leaflet-top,.leaflet-bottom { position: absolute; z-index: 1000; pointer-events: none; }
.leaflet-top { top: 0; }
.leaflet-left { left: 0; }
.leaflet-right { right: 0; }
.leaflet-bottom { bottom: 0; }
.leaflet-control-zoom { margin: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.leaflet-control-zoom a { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); }
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-popup { position: absolute; text-align: center; margin-bottom: 20px; }
.leaflet-popup-content-wrapper { padding: 0.65rem; text-align: left; border-radius: var(--radius-md); box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 0; min-width: 190px; }
.leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; margin-left: -20px; overflow: hidden; pointer-events: none; }
.leaflet-popup-tip { width: 17px; height: 17px; padding: 1px; margin: -10px auto 0; transform: rotate(45deg); }
.leaflet-popup-close-button { position: absolute; top: 0; right: 0; padding: 0.35rem 0.55rem; color: var(--muted); text-decoration: none; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-body);
  line-height: 1.55;
  color: var(--text);
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 35%, #f7f5f2 100%);
}
button,input,select { font: inherit; min-height: 44px; }
button { cursor: pointer; }
a { color: var(--primary-strong); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: 1rem; transform: translateY(-150%); background: var(--surface); color: var(--text); padding: .7rem 1rem; border-radius: .5rem; z-index: 10000; }
.skip-link:focus { transform: translateY(0); }
.site-header,.app-shell { width: min(1440px, calc(100% - 2rem)); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: .85rem; }
.brand-mark { width: 48px; height: 48px; color: var(--primary); }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.08; }
h1 { font-size: clamp(1.4rem, 1.15rem + 0.9vw, 2.15rem); }
h2 { font-size: clamp(1.25rem, 1.1rem + 0.65vw, 1.75rem); }
h3 { font-size: 1.05rem; }
.eyebrow { color: var(--primary-strong); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.theme-toggle,.primary-button,.ghost-button { border: 1px solid var(--border); border-radius: 0; padding: .55rem .9rem; background: var(--surface); color: var(--text); letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; }
.primary-button { background: var(--primary); color: #fff; border-color: var(--primary); }
:root[data-theme="dark"] .primary-button { color: #102012; }
.ghost-button { background: transparent; }
.app-shell { display: grid; gap: 1rem; padding-bottom: 2rem; }
.hero-card,.controls,.map-panel,.results-panel,.notes,.tips-section { border: 1px solid var(--border); border-radius: 0; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow); }
.hero-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: clamp(.9rem, 2vw, 1.45rem); }
.hero-card p:not(.eyebrow) { color: var(--muted); max-width: 70ch; margin-top: .55rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: .55rem; align-self: end; }
.stats div { border: 1px solid var(--border); border-radius: 0; padding: .75rem; background: var(--stat-surface); }
.stats strong { display: block; font-size: 1.32rem; line-height: 1; }
.stats span { display: block; color: var(--muted); font-size: .78rem; margin-top: .2rem; }
.controls { display: grid; grid-template-columns: 1.1fr 1.1fr; gap: .75rem 1rem; padding: .85rem; }
.search-box,.controls label { display: grid; gap: .35rem; }
.search-box span,.controls label span,legend { color: var(--muted); font-size: .8rem; font-weight: 700; }
input,select { width: 100%; border: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--text); padding: .55rem .75rem; }
.select-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; align-items: end; gap: .6rem; }
fieldset { margin: 0; padding: 0; border: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
.chip { border: 1px solid var(--primary); border-radius: 0; padding: .45rem .7rem; background: var(--primary-soft); color: var(--text); min-height: 44px; }
.chip[aria-pressed="false"] { background: var(--surface); border-color: var(--border); color: var(--muted); }
.status-message { grid-column: 1 / -1; min-height: 1.25rem; color: var(--muted); font-size: .86rem; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .88fr); gap: 1rem; height: 620px; min-height: 620px; }
.map-panel { position: relative; overflow: hidden; height: 620px; min-height: 580px; }
#map { width: 100%; height: 620px; min-height: 580px; background: var(--surface-2); }
.legend { position: absolute; left: 1rem; bottom: 1rem; z-index: 500; display: flex; flex-wrap: wrap; gap: .45rem; border: 1px solid var(--border); border-radius: 0; padding: .55rem; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); font-size: .78rem; }
.legend span { display: inline-flex; align-items: center; gap: .28rem; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; display: inline-block; }
.classic { background: var(--classic); } .history { background: var(--history); } .river { background: var(--river); } .family { background: var(--family); } .cafe { background: var(--cafe); } .food { background: var(--food); } .hidden { background: var(--hidden); } .museum { background: var(--museum); } .shopping { background: var(--shopping); } .stay { background: var(--stay); }
.free { background: var(--free); } .culture { background: var(--culture); } .nature { background: var(--nature); } .playground { background: var(--playground); } .secondhand { background: var(--secondhand); } .stay { background: var(--stay); }
.results-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 620px; min-height: 580px; overflow: hidden; }
.results-header { display: flex; align-items: start; justify-content: space-between; gap: .8rem; border-bottom: 1px solid var(--border); padding: 1rem; }
.results-header p:last-child { color: var(--muted); font-size: .82rem; text-align: right; }
.results-list { overflow: auto; padding: .75rem; }
.place-card { border: 1px solid var(--border); border-radius: 0; background: var(--surface); padding: .85rem; margin-bottom: .75rem; }
.place-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.place-top { display: flex; justify-content: space-between; gap: .7rem; }
.place-meta,.place-tags,.place-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.place-meta span,.tag { border-radius: 0; background: var(--surface-2); color: var(--muted); padding: .22rem .48rem; font-size: .76rem; }
.place-card address,.place-card p { color: var(--muted); font-size: .9rem; font-style: normal; margin-top: .55rem; }
.place-actions a,.place-actions button { border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--primary-strong); padding: .42rem .65rem; min-height: 38px; text-decoration: none; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.marker-pin { width: 32px; height: 32px; border: 2px solid white; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 8px 20px rgba(0,0,0,.24); }
.marker-pin span { display: grid; place-items: center; width: 100%; height: 100%; transform: rotate(45deg); color: white; font-size: .72rem; font-weight: 800; }
.leaflet-popup-content-wrapper,.leaflet-popup-tip { background: var(--surface); color: var(--text); }
.popup-title { font-weight: 800; margin-bottom: .25rem; }
.notes { padding: 1rem; }
.notes p { color: var(--muted); margin-top: .45rem; max-width: 88ch; }
.credit { font-size: .82rem; }
.tips-section { padding: clamp(1rem, 2vw, 1.35rem); }
.tips-heading { display: grid; gap: .45rem; max-width: 78ch; margin-bottom: 1rem; }
.tips-heading p:not(.eyebrow) { color: var(--muted); }
.tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tip-card { border: 1px solid var(--border); border-radius: 0; background: var(--surface); padding: .9rem; display: grid; gap: .55rem; align-content: start; }
.tip-card p { color: var(--muted); font-size: .9rem; }
.tip-card a { color: var(--primary-strong); font-weight: 700; text-decoration-thickness: .08em; text-underline-offset: .18em; font-size: .86rem; }
@media (max-width: 980px) {
  .hero-card,.controls,.map-layout { grid-template-columns: 1fr; }
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .select-row { grid-template-columns: 1fr; }
  .map-layout { height: auto; min-height: 0; }
  .map-panel,#map,.results-panel { height: auto; min-height: 480px; }
  #map { height: 480px; }
}
@media (max-width: 620px) {
  .site-header,.app-shell { width: min(100% - 1rem, 1440px); }
  .site-header { align-items: start; }
  .brand-mark { width: 40px; height: 40px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .hero-card,.controls,.notes,.tips-section { border-radius: var(--radius-lg); }
  .tip-grid { grid-template-columns: 1fr; }
}