* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, sans-serif; color: #1c2430; background: #f5f7f9; }
a { color: #0b5ea8; text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: #0e3a5d; color: #fff;
}
.site-header .logo { color: #fff; font-weight: 700; font-size: 1.15rem; }
.site-header nav a { color: #cfe3f5; margin-left: 16px; }

main { max-width: 1100px; margin: 0 auto; padding: 16px; }

#map, #home-map { width: 100%; height: 480px; border-radius: 10px; }
#map.fullpage { height: calc(100vh - 120px); }
#route-map { width: 100%; height: 380px; border-radius: 10px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.filters select, .filters label { font-size: 0.92rem; }
.filters select { padding: 6px 8px; border: 1px solid #c6d2dc; border-radius: 8px; background: #fff; }
.filters button { padding: 6px 14px; border: 0; border-radius: 8px; background: #0b5ea8; color: #fff; cursor: pointer; }

h1 { font-size: 1.5rem; margin: 14px 0 8px; }
h2 { font-size: 1.2rem; margin: 22px 0 10px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.card {
  background: #fff; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px;
}
.card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.card .meta { font-size: 0.85rem; color: #5b6b7b; margin-bottom: 6px; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 0.78rem; color: #fff; }
.badge.beginner { background: #2e9e44; }
.badge.medium { background: #c79a10; }
.badge.hard { background: #d8342c; }
.badge.sport { background: #222; }
.badge.fresh { background: #2e9e44; }
.badge.normal { background: #5b8db8; }
.badge.outdated { background: #99a4ae; }
.badge.needs_check { background: #d8342c; }

.updates-list { list-style: none; }
.updates-list li { background: #fff; border: 1px solid #e2e8ee; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; font-size: 0.93rem; }
.updates-list .date { color: #5b6b7b; margin-right: 8px; white-space: nowrap; }
.updates-list .warning { color: #b3261e; font-weight: 600; }

.route-header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.route-props { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 14px 0; }
.route-props .prop { background: #fff; border: 1px solid #e2e8ee; border-radius: 8px; padding: 8px 12px; font-size: 0.92rem; }
.route-props .prop b { display: block; color: #5b6b7b; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; }

.section-block { background: #fff; border: 1px solid #e2e8ee; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
.section-block h2 { margin-top: 0; }

.hazard-block { border-left: 4px solid #d8342c; background: #fdf3f2; }

.points-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.points-table th, .points-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eef2f5; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.actions .btn {
  padding: 9px 16px; border-radius: 8px; background: #0b5ea8; color: #fff; font-size: 0.95rem; border: 0; cursor: pointer;
}
.actions .btn.secondary { background: #eef3f8; color: #0b5ea8; border: 1px solid #b9cfe2; }
.actions .btn.report { background: #d8342c; }

.comment { border-bottom: 1px solid #eef2f5; padding: 10px 0; font-size: 0.94rem; }
.comment .author { font-weight: 600; }
.comment .date { color: #8795a1; font-size: 0.82rem; margin-left: 6px; }

.site-footer { max-width: 1100px; margin: 24px auto; padding: 0 16px 24px; }
.disclaimer { font-size: 0.85rem; color: #6a7682; background: #fff8e6; border: 1px solid #f0e0b0; border-radius: 8px; padding: 10px 14px; }

/* © OSM обязателен по лицензии, но делаем максимально скромным */
.leaflet-control-attribution { font-size: 9px; opacity: 0.55; background: rgba(255,255,255,0.5) !important; }

@media (max-width: 640px) {
  #map, #home-map { height: 340px; }
  .site-header nav a { margin-left: 10px; }
}