@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root {
  font-family: 'DM Sans', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #15233b;
  background: #e9eef5;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --blue: #2864e8;
  --blue-dark: #174bc1;
  --ink: #15233b;
  --muted: #79869b;
  --line: #e8edf4;
  --panel: rgba(255, 255, 255, .96);
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }

.map-shell, #map { position: absolute; inset: 0; }
#map { z-index: 0; background: #e7edf2; }

.control-panel {
  position: absolute;
  z-index: 500;
  top: 22px;
  left: 22px;
  width: 396px;
  padding: 23px 24px 18px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 16px 50px rgba(26, 48, 83, .15), 0 2px 8px rgba(26, 48, 83, .05);
  backdrop-filter: blur(18px);
  transition: transform .22s ease, opacity .18s ease;
}

.panel-icon-button { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: 5px; border: 1px solid #e7ecf4; border-radius: 9px; color: #7a879b; background: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.panel-icon-button:hover { color: #245bd0; background: #f5f8ff; }
.panel-show-button { position: absolute; z-index: 600; top: 22px; left: 22px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 12px; color: #2757b6; background: rgba(255,255,255,.96); box-shadow: 0 5px 18px rgba(25,46,78,.13); font-size: 11px; font-weight: 700; cursor: pointer; backdrop-filter: blur(12px); }
.panel-show-button[hidden] { display: none; }
.panel-hidden .control-panel { opacity: 0; transform: translateX(calc(-100% - 30px)); pointer-events: none; }

.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: white; background: linear-gradient(145deg, #397bff, #1e54d8); box-shadow: 0 7px 14px rgba(40, 100, 232, .2); }
.brand-mark svg { width: 27px; height: 27px; }
.brand-copy { min-width: 0; }
.eyebrow { display: block; margin-bottom: 2px; color: #8c98ab; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .15em; }
h1 { margin: 0; color: var(--ink); font-size: 21px; line-height: 1.35; letter-spacing: -.04em; font-weight: 800; }
.estimate-badge { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #e3edff; border-radius: 999px; color: #5070a2; background: #f5f8ff; font-size: 10px; white-space: nowrap; }
.estimate-badge span { width: 6px; height: 6px; border-radius: 100%; background: #4382ed; }
.intro { margin: 13px 0 20px; color: #6c798e; font-size: 12px; line-height: 1.6; }

.field-label { display: block; margin: 0 0 9px; color: #38475e; font-size: 12px; font-weight: 700; }
.search-form { position: relative; }
.search-control { display: flex; align-items: center; height: 46px; padding: 0 8px 0 13px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.search-control:focus-within { border-color: #8db1fa; box-shadow: 0 0 0 3px rgba(40, 100, 232, .09); }
.search-icon { flex: none; width: 17px; height: 17px; margin-right: 9px; fill: none; stroke: #8e9bb0; stroke-width: 1.8; stroke-linecap: round; }
.search-control input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-control input::placeholder { color: #a2adbd; }
.search-control input::-webkit-search-cancel-button { cursor: pointer; }
.locate-button { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border: 0; border-radius: 9px; color: #4677d5; background: #eff5ff; cursor: pointer; transition: background .15s, transform .15s; }
.locate-button:hover { background: #e1ecff; transform: translateY(-1px); }
.locate-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.field-hint { margin: 6px 0 0; color: #9aa5b4; font-size: 10px; }
.search-results { position: absolute; z-index: 1100; top: calc(100% - 15px); right: 0; left: 0; padding: 5px; border: 1px solid #e5eaf2; border-radius: 12px; background: white; box-shadow: 0 14px 30px rgba(25, 46, 78, .16); }
.search-results[hidden] { display: none; }
.search-result { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; text-align: left; background: #fff; cursor: pointer; }
.search-result:hover, .search-result:focus-visible { outline: 0; background: #f4f7fc; }
.search-result strong, .search-result span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result strong { color: #263650; font-size: 11px; font-weight: 600; }
.search-result span { margin-top: 3px; color: #8995a8; font-size: 9px; }
.search-message { padding: 10px; color: #8895a8; font-size: 11px; }

.section-divider { height: 1px; margin: 17px 0 16px; background: var(--line); }
.mode-fieldset { margin: 0; padding: 0; border: 0; }
.mode-fieldset legend { padding: 0; }
.mode-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 80px; padding: 10px 6px 8px; border: 1px solid #e7ebf2; border-radius: 13px; background: #fff; cursor: pointer; transition: .16s ease; }
.mode-card:hover { border-color: #b9ccf4; background: #f9fbff; }
.mode-card.is-active { border-color: #a9c3fa; color: var(--blue-dark); background: #f3f7ff; box-shadow: inset 0 0 0 1px rgba(40, 100, 232, .08); }
.mode-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #657997; background: #f3f6fa; }
.mode-card.is-active .mode-icon { color: #2d67df; background: #e6efff; }
.mode-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mode-name { color: #54637a; font-size: 10px; font-weight: 600; }
.mode-card.is-active .mode-name { color: #2757b6; }
.mode-check { position: absolute; top: 5px; right: 6px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; color: #fff; background: var(--blue); font-size: 9px; opacity: 0; transform: scale(.7); transition: .16s; }
.mode-card.is-active .mode-check { opacity: 1; transform: scale(1); }

.time-section { margin-top: 19px; }
.time-heading-row { display: flex; align-items: center; justify-content: space-between; }
.time-heading-row .field-label { margin: 0; }
.time-value { color: #245bd0; font-size: 20px; line-height: 1; font-weight: 800; letter-spacing: -.05em; }
.time-value span { color: #78869b; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.time-select { display: block; width: 100%; height: 42px; margin-top: 13px; padding: 0 12px; border: 1px solid #dfe7f2; border-radius: 11px; outline: 0; color: #245bd0; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.time-select:focus-visible { border-color: #8db1fa; box-shadow: 0 0 0 3px rgba(40,100,232,.1); }
.time-select optgroup { color: #64738a; font-weight: 600; }
.time-options-note { margin: 6px 0 0; color: #97a2b2; font-size: 9px; line-height: 1.4; }

.mode-hint { margin: 12px 0 0; padding: 9px 10px; border: 1px solid #e6eefb; border-radius: 10px; color: #73829b; background: #f7f9fd; font-size: 10px; line-height: 1.55; }
.overlay-section { margin-top: 14px; }
.overlay-section .field-label { margin-bottom: 7px; }
.overlay-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 49px; padding: 8px 10px; border: 1px solid #e7ecf4; border-radius: 11px; background: #fff; cursor: pointer; }
.overlay-option + .overlay-option { margin-top: 6px; }
.overlay-option:hover { border-color: #c5d6f5; background: #fbfcff; }
.overlay-copy { display: grid; gap: 3px; }
.overlay-copy strong { color: #40516c; font-size: 10px; font-weight: 700; }
.overlay-copy small { color: #95a1b2; font-size: 9px; }
.heritage-site-marker { display: inline-flex; align-items: center; gap: 6px; width: max-content; height: 22px; white-space: nowrap; cursor: pointer; }
.heritage-site-marker__dot { width: 7px; height: 7px; flex: 0 0 auto; border: 0; background: var(--marker-color, #77d9b7); }
.heritage-site-marker__dot--circle { border-radius: 50%; }
.heritage-site-marker__dot--square { border-radius: 2px; }
.heritage-site-marker__dot--diamond { border-radius: 2px; transform: rotate(45deg); }
.heritage-site-marker__dot--triangle { border-radius: 0; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.heritage-site-marker__dot--hexagon { border-radius: 0; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.heritage-site-marker__name { max-width: 130px; overflow: hidden; padding: 2px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #ecf8ff; background: rgba(4,10,20,.72); font-size: 12px; font-weight: 700; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.heritage-info-card { min-width: 210px; max-width: 290px; padding: 3px 2px; color: #34445d; font-family: inherit; }
.heritage-info-card strong { display: block; margin-bottom: 8px; color: #15233b; font-size: 14px; }
.heritage-info-card p { margin: 4px 0; color: #64738a; font-size: 11px; line-height: 1.45; }
.heritage-info-card b { color: #40516c; font-weight: 700; }
.switch { position: relative; display: block; flex: none; width: 34px; height: 20px; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch > span { position: absolute; inset: 0; border-radius: 99px; background: #dbe2ec; transition: background .16s; }
.switch > span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(21,35,59,.2); content: ''; transition: transform .16s; }
.switch input:checked + span { background: #3978ed; }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { outline: 3px solid rgba(40,100,232,.2); outline-offset: 2px; }
.calculate-button { display: block; width: 100%; min-height: 43px; margin-top: 17px; border: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #3779f6, #2056ce); box-shadow: 0 6px 14px rgba(40, 100, 232, .18); font-size: 12px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .15s; }
.calculate-button:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.calculate-button:disabled { color: #fff; background: #9aafd4; box-shadow: none; cursor: wait; }
.calculate-button:focus-visible { outline: 3px solid rgba(40, 100, 232, .25); outline-offset: 2px; }

.results-card { margin-top: 19px; padding: 13px 14px 14px; border: 1px solid #e8eef7; border-radius: 13px; background: linear-gradient(135deg, #f8faff, #f3f7fd); }
.results-heading { display: flex; align-items: center; gap: 7px; color: #566987; font-size: 10px; font-weight: 600; }
.results-dot { width: 7px; height: 7px; border-radius: 50%; background: #3477ee; box-shadow: 0 0 0 3px rgba(52, 119, 238, .12); }
.stats-row { display: flex; align-items: center; margin-top: 12px; }
.stat-item { flex: 1; min-width: 0; }
.stat-item strong { display: block; color: #1e3966; font-size: 21px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.stat-item > span { display: block; margin-top: 4px; color: #8895a9; font-size: 9px; }
.stat-item i { color: #9ba6b6; font-size: 8px; font-style: normal; }
.stat-divider { width: 1px; height: 32px; margin: 0 16px 0 10px; background: #dfe7f2; }
.panel-footer { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; color: #929eaf; }
.panel-footer svg { flex: none; width: 12px; height: 12px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.panel-footer p { margin: 0; font-size: 9px; line-height: 1.5; }

.map-top-right { position: absolute; z-index: 400; top: 23px; right: 24px; pointer-events: none; }
.map-controls { position: absolute; z-index: 400; top: 71px; right: 24px; display: grid; overflow: hidden; border: 1px solid rgba(229, 234, 242, .9); border-radius: 11px; background: rgba(255, 255, 255, .96); box-shadow: 0 5px 15px rgba(25, 46, 78, .1); }
.map-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; color: #526682; background: transparent; font-size: 19px; line-height: 1; cursor: pointer; }
.map-controls button + button { border-top: 1px solid #edf0f5; }
.map-controls button:hover { color: var(--blue-dark); background: #f5f8ff; }
.map-controls button:focus-visible { outline: 2px solid #8db1fa; outline-offset: -2px; }
.map-status { padding: 9px 13px; border: 1px solid rgba(229, 234, 242, .85); border-radius: 999px; color: #64738a; background: rgba(255, 255, 255, .94); box-shadow: 0 5px 15px rgba(25, 46, 78, .08); backdrop-filter: blur(12px); font-size: 10px; }
.map-legend { position: absolute; z-index: 400; right: 24px; bottom: 25px; width: min(242px, calc(100vw - 32px)); padding: 14px 15px 13px; border: 1px solid rgba(229, 234, 242, .9); border-radius: 14px; background: rgba(255, 255, 255, .95); box-shadow: 0 8px 25px rgba(25, 46, 78, .11); backdrop-filter: blur(12px); }
.map-legend[hidden], .toast[hidden] { display: none; }
.legend-title { margin-bottom: 10px; color: #53647f; font-size: 10px; font-weight: 700; }
.legend-pin { margin-right: 3px; color: #2864e8; font-size: 12px; }
.legend-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 7px; }
.legend-item { display: flex; align-items: center; gap: 5px; color: #718098; font-size: 9px; white-space: nowrap; }
.legend-swatch { flex: none; width: 14px; height: 11px; border: 1px solid rgba(36, 93, 203, .14); border-radius: 3px; }
.toast { position: absolute; z-index: 900; left: 50%; bottom: 25px; max-width: min(520px, calc(100vw - 40px)); padding: 10px 15px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; color: white; background: rgba(26, 44, 72, .89); box-shadow: 0 7px 20px rgba(21, 35, 59, .22); font-size: 11px; line-height: 1.5; text-align: center; transform: translateX(-50%); backdrop-filter: blur(10px); }

.origin-marker { display: block; width: 32px; height: 40px; overflow: visible; filter: drop-shadow(0 2px 4px rgba(22, 63, 142, .48)); }
.origin-marker-body { fill: #2864e8; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.origin-marker-center { fill: #fff; }
.origin-marker-dot { fill: #2864e8; }
@media (max-width: 700px) {
  .control-panel { top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(66vh, 610px); padding: 17px 18px calc(15px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 20px; box-shadow: 0 10px 36px rgba(26, 48, 83, .18); }
  .panel-hidden .control-panel { transform: translateY(calc(100% + 30px)); }
  .panel-show-button { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .brand-mark svg { width: 24px; height: 24px; }
  h1 { font-size: 19px; }
  .intro { margin: 9px 0 15px; font-size: 11px; }
  .section-divider { margin: 13px 0 13px; }
  .mode-card { min-height: 69px; }
  .time-section { margin-top: 15px; }
  .time-select { height: 44px; }
  .mode-hint { margin-top: 10px; }
  .calculate-button { margin-top: 13px; }
  .results-card { margin-top: 14px; }
  .panel-footer { margin-top: 9px; }
  .map-top-right { top: 14px; right: 14px; }
  .map-controls { top: 58px; right: 14px; }
  .map-status { padding: 8px 11px; font-size: 9px; }
  .map-legend { right: 14px; bottom: calc(min(66vh, 610px) + 24px); width: 205px; padding: 11px 12px; }
  .legend-items { gap: 7px 5px; }
  .legend-item { font-size: 8px; }
}

@media (max-width: 380px) {
  .control-panel { right: 8px; bottom: 8px; left: 8px; padding-right: 14px; padding-left: 14px; }
  .estimate-badge { padding: 5px 7px; font-size: 9px; }
  .brand-row { gap: 9px; }
  .mode-options { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}