body { color: #253b34; }
.home-page { background: #f5f8f6; padding: 12px 16px; }
.home-page > div { max-width: 1080px; margin: auto; padding: 16px; }
.home-page h1 { color: #253b34; font-size: clamp(36px, 5vw, 56px); font-weight: 600; letter-spacing: -.035em; }
.home-page p, .home-page li { line-height: 1.7; }
.view-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.view-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; text-align: left; background: white; border: 1px solid #dce5e0; border-radius: 14px; box-shadow: 0 3px 12px #163c2408; }
.view-card:hover { border-color: #277453; background: #fafffc; }
.view-card svg { width: 28px; height: 28px; color: #277453; }
.view-card span { font-size: 18px; font-weight: 600; }
.view-card small { color: #64766c; font-size: 14px; }
.view-card { overflow: hidden; padding: 0 0 24px; }
.view-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-bottom: 1px solid #e5ece7; }
.view-card > span, .view-card > small { padding: 0 20px; }
.age-page > .relative { padding-top: 76px; }
.age-page .title { font-weight: 600; letter-spacing: -.02em; }
#toggleView { background: white; color: #277453; border: 1px solid #dce5e0; border-radius: 8px; min-height: 44px; }
#toggleView:hover { background: #f0f7f3; }
.leaflet-tooltip, .leaflet-popup-content-wrapper { border-radius: 10px; box-shadow: 0 3px 12px #163c2420; }
.leaflet-tooltip { border-color: #dce5e0; }
.map-toolbar { position: absolute; top: 16px; right: 16px; z-index: 1000; display: flex; gap: 4px; padding: 4px; background: white; border: 1px solid #dce5e0; border-radius: 12px; box-shadow: 0 3px 12px #163c2414; }
.map-toolbar button { position: static; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; background: transparent; border-radius: 8px; box-shadow: none; font-size: 14px; font-weight: 500; color: #315b49; }
.map-toolbar button:hover { background: #f0f7f3; }
.map-toolbar svg { width: 19px; height: 19px; }
#settingsModal, #tableModal { background: #152b2466; padding: 12px; }
#settingsModal > div, #tableModal > div { border-radius: 16px; padding: 24px; margin: 0; box-shadow: 0 16px 60px #152b2426; }
#settingsModal h2, #tableModal h2 { font-size: 20px; font-weight: 600; line-height: 1.4; }
#closeModal, #closeTableModal { min-width: 44px; min-height: 44px; border-radius: 8px; }
#closeModal:hover, #closeTableModal:hover { background: #f0f7f3; }
#selectAll, #selectNone, #resetButton, #applySettings { min-height: 40px; border: 1px solid #dce5e0; border-radius: 8px; padding: 8px 12px; background: white; color: #315b49; font-size: 14px; }
#selectAll:hover, #selectNone:hover, #resetButton:hover { background: #f0f7f3; }
#applySettings { background: #277453; color: white; border-color: #277453; }
#applySettings:hover { background: #205e44; }
#settingsModal .flex:has(> #selectAll) { flex-wrap: wrap; margin: 20px 0; }
#settingsModal input[type=number], #districtSearch { border: 1px solid #dce5e0; border-radius: 8px; padding: 8px 10px; }
#checkboxContainer { gap: 4px 16px; }
#checkboxContainer > div { padding: 6px; border-radius: 6px; }
#checkboxContainer > div:hover { background: #f5f8f6; }
#checkboxContainer input { accent-color: #277453; }
button:focus-visible, input:focus-visible { outline: 2px solid #277453; outline-offset: 3px; }
.legend { padding: 12px 14px; border: 1px solid #dce5e0; border-radius: 10px; font: 12px/1.6 system-ui, sans-serif; box-shadow: 0 3px 12px #163c2414; }
.legend h4 { font-weight: 600; margin-bottom: 6px; }
@media (max-width: 640px) {
  .view-cards { grid-template-columns: 1fr; }
  .home-page { padding: 8px; }
  #settingsModal > div, #tableModal > div { padding: 16px; max-height: 90dvh; }
  .map-toolbar { top: 12px; right: 12px; }
}