* { box-sizing: border-box; }
*[hidden] { display: none !important; }
:root { --app-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #172c2b; }
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }
html, body { width: 100%; height: var(--app-height); margin: 0; overflow: hidden; }
body { position: relative; background: #e9ece6; }
#map { position: absolute; inset: 0; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: progress; opacity: .65; }
.map-actions { position: absolute; z-index: 8; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 14px); left: 14px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.round-button { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border: 1px solid #ffffffdc; border-radius: 50%; background: #fffefa; box-shadow: 0 5px 22px #10232130; color: #23483f; pointer-events: auto; }
.locate-button { margin-left: auto; }
.place-toolbar { position: absolute; z-index: 10; top: calc(env(safe-area-inset-top) + 12px); left: 12px; display: flex; align-items: start; gap: 8px; }
.toolbar-actions { display: flex; align-items: start; gap: 8px; }
.toolbar-actions[hidden], .toolbar-panel[hidden] { display: none; }
.place-tool-button { display: grid; width: 54px; height: 54px; flex: none; place-items: center; border: 1px solid #ffffffdc; border-radius: 50%; background: #fffefa; box-shadow: 0 5px 22px #10232130; color: #23483f; pointer-events: auto; }
.place-tool-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.place-tool-button[hidden], .places-menu[hidden] { display: none; }
.menu-toggle svg { width: 24px; height: 24px; transition: transform .18s ease; }
.menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.places-menu { position: absolute; top: 62px; left: 0; display: flex; width: min(300px, calc(100vw - 24px)); max-height: min(65vh, 480px); max-height: min(480px, calc(var(--app-height) - 110px)); flex-direction: column; overflow: auto; border: 1px solid #ffffffdc; border-radius: 14px; padding: 9px; background: #fffefaF5; box-shadow: 0 8px 28px #10232130; backdrop-filter: blur(12px); }
.places-menu[hidden] { display: none; }
.menu-panel-heading { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 3px 7px; border-bottom: 1px solid #e2e6df; color: #29423d; }
.menu-panel-heading strong { font-size: 14px; }
.toolbar-back { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid #dce3dc; border-radius: 50%; background: #fffefa; color: #29423d; }
.toolbar-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.account-user-label { display: block; overflow-wrap: anywhere; padding: 9px 9px 4px; color: #61736a; font-size: 12px; }
.account-user-label[hidden] { display: none; }
.place-login-hint { padding: 7px 9px; color: #65746e; font-size: 13px; }
.account-button { border-top: 1px solid #e2e6df !important; margin-top: 5px; }
.invite-form { border-top: 1px solid #e2e6df; padding: 10px 5px 3px; }
.invite-form label { display: block; color: #53635d; font-size: 12px; margin-bottom: 6px; }
.invite-form div { display: flex; gap: 5px; }
.invite-form input { min-width: 0; flex: 1; border: 1px solid #d7ded8; border-radius: 8px; padding: 8px; background: white; color: #253a33; }
.invite-form button { border: 0; border-radius: 8px; padding: 8px 10px; color: white; background: #315a4d; }
.account-close { display: block; margin: 12px auto 0; border: 0; background: transparent; color: #64736d; }
.account-dialog input[type="email"], .account-dialog input[type="password"] { width: 100%; box-sizing: border-box; }
.menu-section-title { margin: 2px 8px 5px; color: #61736a; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.saved-place-list { display: flex; max-height: 180px; flex-direction: column; overflow: auto; }
.saved-place-list[hidden] { display: none; }
.saved-place-list:empty::before { padding: 8px; color: #748179; content: "Пока нет сохранённых мест"; font-size: 13px; }
.saved-place-list button, .map-menu-item { display: flex; width: 100%; min-height: 44px; flex: none; align-items: center; gap: 11px; border: 0; border-radius: 9px; padding: 8px 10px; background: transparent; color: #29423d; font-size: 14px; font-weight: 650; text-align: left; }
.saved-place-list button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-place-list button:active, .map-menu-item:active { background: #e9f0e8; }
.map-menu-item svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-menu-item[hidden] { display: none; }
.labels-toggle { justify-content: space-between; }
.menu-switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; background: #c3cbc4; transition: background .18s ease; }
.menu-switch::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #10232135; content: ""; transition: transform .18s ease; }
.labels-toggle[aria-pressed="true"] .menu-switch { background: #38735e; }
.labels-toggle[aria-pressed="true"] .menu-switch::after { transform: translateX(14px); }
.place-add { border-top: 1px solid #e3e7e1; border-radius: 0 0 9px 9px; color: #22664f; }
.search-menu-item { border-top: 1px solid #e3e7e1; border-radius: 0; }
.round-button:active, .route-action:active { transform: scale(.96); }
.round-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.back-button, .route-action { display: none; }
.back-button.visible { display: grid; }
.primary.route-action { position: absolute; left: 50%; display: none; min-width: 148px; height: 54px; transform: translateX(-50%); border: 1px solid #1d4840; border-radius: 999px; padding: 0 24px; background: #1d4840; box-shadow: 0 5px 22px #10232135; color: #fff; font-size: 15px; font-weight: 750; pointer-events: auto; }
.primary.route-action.visible { display: inline-flex; align-items: center; justify-content: center; }
.primary.route-action:active { transform: translateX(-50%) scale(.96); }
.primary.route-action:disabled { cursor: progress; opacity: .72; }
.location-target { position: relative; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 50%; }
.location-target::before { position: absolute; inset: 5px; border-radius: 50%; background: currentColor; content: ""; }
.location-target::after { position: absolute; inset: -5px; border: 1.5px solid currentColor; border-radius: 50%; content: ""; opacity: .45; }
.status { position: absolute; z-index: 9; top: calc(env(safe-area-inset-top) + 12px); right: 12px; display: none; width: fit-content; max-width: min(360px, calc(100vw - 78px)); border: 1px solid #ffffffd4; border-radius: 13px; padding: 10px 14px; background: #fffefaed; box-shadow: 0 5px 22px #10232124; color: #50655e; font-size: 12px; line-height: 1.35; text-align: left; pointer-events: none; }
.status.visible { display: block; }
.status.error { color: #ad4937; }
.route-summary { position: absolute; z-index: 7; bottom: calc(100% + 12px); left: 50%; display: none; width: min(440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(var(--app-height) - 144px); overflow-y: auto; overscroll-behavior: contain; transform: translateX(-50%); border: 1px solid #ffffffdc; border-radius: 15px; padding: 11px 14px; background: #fffefaed; box-shadow: 0 5px 22px #10232124; text-align: left; pointer-events: auto; }
.route-summary.visible { display: block; }
.route-summary strong { display: block; font-size: 16px; font-weight: 850; line-height: 1.2; }
.route-summary > span { display: block; margin-top: 2px; color: #425a51; font-size: 14px; font-weight: 750; }
.route-summary.navigation-summary { right: 72px; bottom: 0; left: 72px; width: auto; max-width: none; min-height: 54px; transform: none; border-radius: 14px; padding: 7px 12px; background: #fffefaF2; box-shadow: 0 5px 22px #10232130; }
.route-summary.navigation-summary strong { font-size: 17px; }
.route-summary.navigation-summary > span { font-size: 13px; }
.route-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.route-choice { display: flex; min-height: 48px; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid #d1dcd2; border-radius: 11px; padding: 6px 8px; background: #fff; color: #29423d; text-align: left; }
.route-choice strong { font-size: 11px; }
.route-choice span { color: #64756c; font-size: 12px; font-weight: 750; }
.route-choice.selected { border-color: #32745f; background: #e8f0e9; box-shadow: inset 0 0 0 1px #32745f; }
.navigation-summary .route-choices { display: none; }
.guidance { position: absolute; z-index: 7; top: auto; right: auto; bottom: calc(env(safe-area-inset-bottom) + 80px); left: 50%; display: none; width: min(460px, calc(100vw - 28px)); transform: translateX(-50%); border: 1px solid #ffffffd4; border-radius: 15px; padding: 12px 16px; background: #193b36f2; box-shadow: 0 6px 24px #10232135; color: #fff; pointer-events: none; }
.guidance.visible { display: block; }
.guidance small { color: #c8d9c9; font: 700 10px/1.2 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.guidance strong { display: block; margin-top: 4px; font-size: 16px; line-height: 1.25; }
.guidance span { display: block; margin-top: 5px; color: #d6e3d7; font-size: 11px; }
.attribution { position: absolute; z-index: 5; bottom: calc(env(safe-area-inset-bottom) + 5px); left: 10px; padding: 2px 4px; color: #52635e; font-size: 8px; line-height: 1.2; text-shadow: 0 1px 3px #fff, 0 0 5px #fff; pointer-events: auto; }
body.route-controls-visible .attribution { bottom: calc(env(safe-area-inset-bottom) + 68px); }
.attribution a { color: inherit; text-decoration: none; }
.place-dialog { width: min(360px, calc(100vw - 32px)); max-height: calc(var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #ffffffd4; border-radius: 18px; padding: 0; background: #fffefa; box-shadow: 0 14px 50px #10232145; color: #172c2b; }
.place-dialog::backdrop { background: #10232155; backdrop-filter: blur(3px); }
.place-dialog form { padding: 22px; }
.place-dialog h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.place-dialog p { margin: 7px 0 18px; color: #64756c; font-size: 13px; line-height: 1.4; }
.place-dialog label { display: block; margin-bottom: 6px; color: #53635e; font-size: 12px; font-weight: 700; }
.place-dialog input { width: 100%; height: 46px; border: 1px solid #d5ddd4; border-radius: 11px; padding: 0 12px; color: #172c2b; font: inherit; font-size: 16px; }
.place-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.place-dialog-actions button { min-height: 42px; border: 1px solid #d5ddd4; border-radius: 11px; padding: 0 14px; background: #fff; color: #29423d; font-weight: 700; }
.place-dialog-actions button.primary { border-color: #1d4840; background: #1d4840; color: #fff; }
.place-card { position: absolute; z-index: 12; bottom: calc(env(safe-area-inset-bottom) + 78px); left: 50%; display: flex; width: min(420px, calc(100vw - 24px)); max-height: calc(var(--app-height) - 140px); flex-direction: column; gap: 12px; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-50%); border: 1px solid #ffffffdc; border-radius: 16px; padding: 14px; background: #fffefaed; box-shadow: 0 8px 30px #10232135; }
.place-card[hidden] { display: none; }
.place-card-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.place-card-heading strong { overflow: hidden; color: #1b3732; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.place-card-close { display: grid; width: 32px; height: 32px; flex: none; place-items: center; border: 1px solid #d5ddd4; border-radius: 50%; background: #fff; color: #496159; font-size: 22px; line-height: 1; }
.place-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place-card-actions button { min-height: 42px; border: 1px solid #d5ddd4; border-radius: 11px; background: #fff; color: #29423d; font-size: 13px; font-weight: 700; }
.place-card-actions .saved-place-route { grid-column: 1 / -1; border-color: #1d4840; background: #1d4840; color: #fff; }
.place-card-actions .delete-place { border-color: #e6cbc5; color: #a24732; }
.search-panel { position: absolute; top: 62px; left: 0; display: flex; width: min(390px, calc(100vw - 24px)); max-height: min(72vh, 620px); max-height: min(620px, calc(var(--app-height) - 110px)); flex-direction: column; overflow: hidden; border: 1px solid #ffffffdc; border-radius: 16px; padding: 12px; background: #fffefaF5; box-shadow: 0 8px 30px #10232135; backdrop-filter: blur(14px); }
.search-panel[hidden] { display: none; }
.search-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #213b34; }
.search-heading strong { font-size: 16px; }
.search-heading button { width: 30px; height: 30px; border: 1px solid #d5ddd4; border-radius: 50%; background: #fff; color: #496159; font-size: 21px; line-height: 1; }
.search-form { display: flex; gap: 7px; }
.search-form input { min-width: 0; height: 42px; flex: 1; border: 1px solid #d5ddd4; border-radius: 10px; padding: 0 10px; color: #172c2b; font: inherit; font-size: 15px; }
.search-form button, .search-route { min-height: 40px; border: 1px solid #1d4840; border-radius: 10px; padding: 0 13px; background: #1d4840; color: #fff; font-size: 13px; font-weight: 750; }
.search-results { min-height: 0; overflow: auto; margin-top: 8px; overscroll-behavior: contain; }
.search-result { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid #e1e6df; padding: 10px 2px; }
.search-result:last-child { border-bottom: 0; }
.search-result > strong { color: #213b34; font-size: 14px; }
.search-result-address, .search-result-category { color: #61746b; font-size: 12px; line-height: 1.35; }
.search-result-source { align-self: flex-start; border-radius: 999px; padding: 2px 7px; background: #e6eee7; color: #496258; font-size: 10px; font-weight: 750; }
.search-result-actions { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.search-result-actions a { color: #32745f; font-size: 12px; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.search-attribution { margin: 8px 0 0; color: #6e7c74; font-size: 10px; line-height: 1.3; }
.search-attribution a { color: inherit; }
.search-message { margin: 10px 2px; color: #52665d; font-size: 13px; line-height: 1.4; }
.search-message.error { color: #ad4937; }
.maplibregl-ctrl-group { overflow: hidden; border: 1px solid #ffffffc9 !important; border-radius: 12px !important; box-shadow: 0 6px 20px #10232120 !important; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 !important; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid #ffffffdc !important; border-radius: 50% !important; background: #fffefa; box-shadow: 0 5px 22px #10232130 !important; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button { width: 100%; height: 100%; border-radius: 50%; }
.maplibregl-ctrl-bottom-right .maplibregl-ctrl-compass .maplibregl-ctrl-icon { background-size: 24px; }
.maplibregl-ctrl-bottom-right { right: 14px !important; bottom: calc(env(safe-area-inset-bottom) + 78px) !important; }
.maplibregl-ctrl-logo { display: none !important; }
.destination-marker { width: 20px; height: 20px; border: 4px solid #fff; border-radius: 50%; background: #32745f; box-shadow: 0 0 0 5px #32745f35, 0 2px 8px #10232165; }
.user-marker { display: grid; width: 18px; height: 18px; place-items: center; filter: drop-shadow(0 2px 5px #10232170); }
.user-location-dot { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #3987ed; box-shadow: 0 0 0 5px #3987ed35; }
.user-direction-arrow { display: none; width: 34px; height: 42px; overflow: visible; fill: #3987ed; stroke: #fff; stroke-linejoin: round; stroke-width: 3.5px; }
.user-marker.navigating { width: 38px; height: 44px; }
.user-marker.navigating .user-location-dot { display: none; }
.user-marker.navigating .user-direction-arrow { display: block; }
.saved-place-marker { position: relative; width: 0; height: 0; cursor: pointer; pointer-events: auto; }
.saved-place-marker:focus-visible .saved-place-label { outline: 2px solid #32745f; outline-offset: 2px; }
.saved-place-marker::before { position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #32745f; box-shadow: 0 1px 5px #10232165; content: ""; }
.saved-place-label { position: absolute; bottom: 8px; left: 0; max-width: 160px; transform: translateX(-50%); overflow: hidden; border: 1px solid #ffffffd4; border-radius: 7px; padding: 3px 6px; background: #fffefaed; box-shadow: 0 2px 8px #10232125; color: #29423d; cursor: pointer; font-size: 10px; font-weight: 700; line-height: 1.2; pointer-events: auto; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 650px) {
  .map-actions { right: 12px; left: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); }
  .round-button, .primary.route-action { width: 52px; height: 52px; flex-basis: 52px; }
  .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { width: 52px; height: 52px; }
  .place-toolbar { left: 10px; }
  .place-tool-button { width: 52px; height: 52px; }
  .places-menu { top: 60px; }
  .primary.route-action { min-width: 140px; width: auto; padding: 0 22px; }
  .route-summary { bottom: calc(100% + 12px); }
  .route-summary.navigation-summary { right: 72px; bottom: 0; left: 72px; width: auto; min-height: 52px; padding: 7px 9px; }
  .route-summary.navigation-summary strong { font-size: 15px; }
  .route-summary.navigation-summary > span { font-size: 11px; }
  .route-choices { gap: 5px; }
  .route-choice { min-height: 44px; padding: 5px 6px; }
  .route-choice strong { font-size: 10px; }
  .route-choice span { font-size: 11px; }
  .guidance { bottom: calc(env(safe-area-inset-bottom) + 76px); }
  .maplibregl-ctrl-bottom-right { bottom: calc(env(safe-area-inset-bottom) + 76px) !important; }
  .maplibregl-ctrl-bottom-right { right: 12px !important; }
}