:root {
  --ink: #10253f;
  --muted: #64748b;
  --line: #dce5ef;
  --paper: #ffffff;
  --canvas: #eef3f8;
  --blue: #0d5bd7;
  --blue-dark: #0847ab;
  --teal: #0aa897;
  --shadow: 0 14px 40px rgba(15, 38, 66, 0.15);
  --small-shadow: 0 8px 24px rgba(15, 38, 66, 0.12);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--canvas);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea { font: inherit; }

button { color: inherit; }

button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(13, 91, 215, 0.35);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden { display: none !important; }

.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1001;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 1.18rem;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--blue);
  box-shadow: 0 5px 14px rgba(13, 91, 215, 0.28);
}

.brand-mark svg { width: 22px; fill: white; }

.install-mini {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #cbd9e8;
  border-radius: 13px;
  background: white;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
}

.install-mini:hover { background: #f4f8ff; border-color: #adc5e4; }
.install-mini svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.account-button { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #d7e2ee; border-radius: 13px; color: #20384f; background: white; font-weight: 800; cursor: pointer; }
.account-button:hover { background: #f4f8ff; border-color: #adc5e4; }
.account-avatar { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: 0.55rem; }
.notice-button { position:relative; flex:none; min-width:40px; min-height:42px; border:1px solid #d7e2ee; border-radius:13px; background:#fff; cursor:pointer; }
.notice-count { position:absolute; top:-6px; right:-6px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:12px; color:#fff; background:#d7394e; font-size:.7rem; font-weight:800; }
.notice-dialog { width:min(440px, calc(100% - 24px)); max-height:80dvh; overflow:auto; padding:18px; border:1px solid #dbe5ee; border-radius:17px; background:#fff; color:var(--ink); box-shadow:var(--shadow); }
.notice-dialog::backdrop { background:rgba(7,24,43,.52); }
.notice-dialog h2 { margin:0; }
.notice-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.notice-actions button { flex:1 1 145px; min-width:0; min-height:40px; padding:8px 10px; border:1px solid #bdd0e6; border-radius:10px; background:#f3f8ff; color:var(--blue-dark); font:inherit; font-size:.875rem; font-weight:700; cursor:pointer; }
.notice-actions button:last-child { background:#fff; color:#9b3246; border-color:#eac7cf; }
.notice-actions button:disabled { opacity:.55; cursor:default; }
.notice-list { display:grid; gap:8px; margin:12px 0; }
.notice-item { width:100%; padding:12px; text-align:left; border:1px solid #e0e9f2; border-radius:12px; background:#f8fbff; cursor:pointer; overflow-wrap:anywhere; }
.notice-item.unread { border-color:#81adea; background:#edf5ff; }
.notice-item strong { display:block; font-size:.92rem; }
.notice-item small { display:block; margin-top:4px; color:var(--muted); }
.notice-enable { max-width:100%; padding:10px 13px; border:1px solid #bdd0e6; border-radius:10px; background:#f3f8ff; color:var(--blue-dark); font-weight:700; cursor:pointer; }
.comment-reactions { display:inline-flex; gap:5px; margin-left:8px; }
.comment-reactions button { min-height:32px; padding:4px 8px; border:1px solid #dae4ef; border-radius:9px; background:#fff; cursor:pointer; }
.comment-reactions button[aria-pressed="true"] { color:var(--blue-dark); border-color:#86aeec; background:#eaf3ff; }

.workspace {
  height: calc(100dvh - 64px);
  display: grid;
  grid-template-columns: minmax(350px, 410px) minmax(0, 1fr);
}

.map-wrap {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #d7e3eb;
}

#map { position: absolute; inset: 0; z-index: 1; }

.leaflet-control-zoom { border: 0 !important; box-shadow: var(--small-shadow) !important; }
.leaflet-control-zoom a { width: 38px !important; height: 38px !important; line-height: 38px !important; color: var(--ink) !important; }
.leaflet-control-attribution { font-size: 11px; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--small-shadow); }
.leaflet-popup-content { margin: 12px 14px; font-size: 0.88rem; font-weight: 700; }

.control-panel {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 0;
  z-index: 500;
  background: white;
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 28px rgba(15, 38, 66, 0.07);
}

.search-surface {
  padding: 18px 18px 14px;
  max-height: 60%;
  overflow-y: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
  background: white;
}

.search-form {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  height: 54px;
  padding: 5px 5px 5px 15px;
  background: #f3f7fb;
  border: 1px solid #d6e1ec;
  border-radius: 16px;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
}

.search-form:focus-within { background: white; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(13, 91, 215, 0.1); }
.search-form svg { width: 21px; fill: none; stroke: #688097; stroke-width: 2; stroke-linecap: round; }
.search-form input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.search-form input::placeholder { color: #768aa0; }
.search-form button {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: var(--blue);
  font-weight: 750;
  cursor: pointer;
}
.search-form button:hover { background: var(--blue-dark); }

.category-scroll {
  width: 100%;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 1px 8px;
  scrollbar-width: thin;
  scrollbar-color: #b8c7d6 transparent;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-behavior: smooth;
}
.category-scroll::-webkit-scrollbar { height: 5px; }
.category-scroll::-webkit-scrollbar-thumb { border-radius: 9px; background: #b8c7d6; }
.category-scroll:focus-visible { outline: 2px solid rgba(13, 91, 215, 0.5); outline-offset: 2px; border-radius: 8px; }

.category-chip {
  min-height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid #d6e1ec;
  border-radius: 999px;
  background: white;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms, background 120ms, color 120ms, border-color 120ms;
}
.category-chip:hover { transform: translateY(-1px); border-color: #afc5dd; }
.category-chip.active { background: #e9f1ff; color: #084cad; border-color: #a8c4ee; }
.category-chip span { font-size: 1rem; }

.location-line {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}
.location-line > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.location-line button { padding: 4px; border: 0; background: transparent; color: var(--blue); font-size: 0.82rem; font-weight: 750; cursor: pointer; }
.location-line #share-location { padding: 5px 9px; border-radius: 8px; background: #e8f0ff; }
.my-coordinates { display:flex; align-items:center; flex-wrap:wrap; gap:8px; max-width:100%; min-width:0; margin-top:8px; padding:9px 10px; border:1px solid #d7e6f6; border-radius:12px; background:#f4f9ff; }
.my-coordinates-copy { display:flex; flex:1 1 180px; flex-direction:column; min-width:0; gap:3px; font-size:.78rem; line-height:1.4; color:#425d77; }
.my-coordinates-copy strong { font-size:.84rem; color:var(--ink); }
.my-coordinates-copy #my-location-address { overflow-wrap:anywhere; }
.coordinate-pair { display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; font-variant-numeric:tabular-nums; }
.coordinate-pair output { color:#153e6e; font-weight:750; }
.location-update { display:block; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.location-update time { color:#153e6e; font-weight:750; }
.my-coordinates-copy small { color:var(--muted); font-size:.72rem; }
.my-coordinates button { flex:0 0 auto; min-height:44px; padding:0 12px; border:1px solid #abc6e9; border-radius:10px; background:white; color:var(--blue-dark); font-size:.82rem; font-weight:750; cursor:pointer; }
.my-coordinates button:hover { background:#e8f1ff; }
.community-panel { margin-top: 9px; border-top: 1px solid #e5ebf1; padding-top: 8px; }
.community-tabs { display:flex; flex-wrap:nowrap; gap:6px; min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:thin; }
.language-toggle { min-height:40px; padding:0 6px; border:1px solid #d4dfeb; border-radius:11px; background:#fff; color:#285c93; font-size:.76rem; font-weight:800; white-space:nowrap; cursor:pointer; }
.language-prompt { position:fixed; z-index:1200; right:max(12px,env(safe-area-inset-right)); bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px)); width:min(340px,calc(100vw - 24px)); padding:14px; border:1px solid #c8dbf5; border-radius:14px; background:#fff; box-shadow:0 9px 30px #12345629; color:#16324f; }
.language-prompt.is-hidden { display:none; }
body:has(dialog[open]) .language-prompt { display:none; }
.language-prompt p { margin:0 0 10px; font-size:.88rem; font-weight:700; }
.language-prompt div { display:flex; gap:8px; }
.language-prompt button { min-height:36px; padding:6px 12px; border:1px solid #bfd1e5; border-radius:8px; background:#eaf3ff; color:#124a8a; font:inherit; font-size:.85rem; font-weight:700; cursor:pointer; }
.community-tab { flex:0 0 auto; min-height:34px; border:1px solid transparent; border-radius:9px; padding:0 9px; color:#52677b; background:transparent; font-size:.82rem; font-weight:800; white-space:nowrap; cursor:pointer; }
.community-tab.active { border-color: #c8dbf5; color: #084cad; background: #e9f1ff; }
.community-content { max-height: min(48vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.trending-list { display: grid; gap: 7px; padding: 5px 1px 10px; }
.trend-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 10px 11px; border: 1px solid #e1e9f0; border-radius: 12px; background: white; }
.trend-card strong { overflow: hidden; color: var(--ink); font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.trend-card small { grid-column: 1; color: var(--muted); font-size: .76rem; }
.trend-card button { grid-column: 2; grid-row: 1 / span 2; align-self: center; border: 0; padding: 6px 9px; border-radius: 8px; color: #075249; background: #d9f7f0; font-size: .75rem; font-weight: 750; cursor: pointer; }
.trend-rule { margin: 9px 1px; color: var(--muted); font-size: .875rem; line-height: 1.45; }
.trend-card { grid-template-columns: minmax(0, 1fr); }
.trend-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.trend-card strong { white-space: normal; }
.member-directory-filter { display:flex; align-items:center; gap:9px; margin:10px 0; min-width:0; }
.member-directory-filter label { flex:none; font-size:.88rem; font-weight:750; }
.member-directory-filter select { min-width:0; flex:1; min-height:40px; padding:7px 10px; border:1px solid #cbd9e8; border-radius:9px; background:white; color:var(--ink); font:inherit; font-size:1rem; }
.member-places-list { display:grid; gap:9px; }
.member-directory-card { min-width:0; padding:12px; border:1px solid #dbe5ee; border-radius:12px; background:white; }
.member-directory-place { display:grid; gap:5px; width:100%; min-width:0; padding:0; border:0; text-align:left; background:transparent; color:var(--ink); cursor:pointer; }
.member-directory-place strong { overflow-wrap:anywhere; font-size:1rem; }
.member-directory-place span { color:var(--muted); font-size:.86rem; overflow-wrap:anywhere; }
.member-directory-place small { color:#1356a6; font-size:.83rem; font-weight:750; line-height:1.4; }
.member-directory-card .member-attribution { margin:8px 0; font-size:.82rem; }
.member-directory-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.member-directory-actions button,.member-places-more { min-height:36px; padding:7px 10px; border:1px solid #c8dbf5; border-radius:9px; color:#1356a6; background:#edf5ff; font:inherit; font-size:.83rem; font-weight:750; cursor:pointer; }
.member-places-more { margin:10px 0; width:100%; }
@media(max-width:390px) { .community-tab { padding-inline:7px; font-size:.77rem; } .language-toggle { margin-left:0; } .member-directory-filter { flex-wrap:wrap; } .member-directory-filter select { flex-basis:100%; } }
.favorite-button.selected { color: #71520c; border-color: #e1c66f; background: #fff5ca; }
.favorite-button:disabled { opacity: .65; cursor: wait; }
.search-area-fields { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.55fr); gap:8px; margin:9px 0 4px; }
.search-area-fields label { min-width:0; display:block; color:var(--muted); font-size:.77rem; }
.search-area-fields input, .search-area-fields select { width:100%; min-width:0; min-height:39px; margin-top:3px; padding:7px 8px; border:1px solid #d4dfeb; border-radius:9px; background:white; color:#243b53; font:inherit; font-size:.9rem; }
.general-search-fields { display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; margin:9px 0; }
.search-options { margin:8px 0; font-size:.875rem; }
.search-options summary { cursor:pointer; color:#134b96; }
.general-search-fields label, #journey-consent label { display:block; color:var(--muted); font-size:.875rem; }
.general-search-fields input, .general-search-fields select, #journey-label { width:100%; min-width:0; min-height:40px; margin-top:4px; padding:8px; border:1px solid #d4dfeb; border-radius:9px; background:white; color:#243b53; font:inherit; font-size:1rem; }
.search-detail-label { grid-column:1/-1; }
.search-expansion { padding:10px; border-radius:10px; background:#eef5ff; font-size:.875rem; }
.search-expansion p { margin:0 0 8px; }
.search-expansion button, .incoming-panel button { min-height:36px; border:1px solid #bdd4f0; border-radius:8px; padding:6px 10px; color:#134b96; background:white; cursor:pointer; }
.incoming-panel { margin-top:10px; font-size:.875rem; }
.incoming-panel summary { cursor:pointer; font-weight:700; }
#incoming-list { max-height:180px; overflow-y:auto; }
.incoming-item { padding:10px 0; border-top:1px solid #dde6ef; }
.incoming-item p { margin:5px 0; }
.journey-status { position:fixed; z-index:1500; bottom:12px; left:12px; right:12px; max-width:600px; margin:auto; padding:12px; display:flex; gap:12px; align-items:center; border:1px solid #0d5bd7; border-radius:14px; background:white; color:#173b63; box-shadow:0 4px 24px #18344f30; font-size:.875rem; }
.journey-status button { flex-shrink:0; padding:10px; border:0; border-radius:8px; background:#a92535; color:white; cursor:pointer; }
.journey-status #journey-status-copy { flex:1; min-width:0; }
.journey-status .journey-chat-button { background:#0d5bd7; }
.journey-chat { width:min(440px, calc(100% - 24px)); max-height:min(80dvh,680px); padding:16px 16px max(16px,env(safe-area-inset-bottom)); border:1px solid #dbe5ee; border-radius:17px; background:white; color:var(--ink); box-shadow:var(--shadow); }
.journey-chat::backdrop { background:rgba(7,24,43,.52); }
.journey-chat-header { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.journey-chat-header h2 { margin:0; font-size:clamp(1.05rem,4vw,1.3rem); }
.journey-chat-header p { margin:3px 0 12px; color:var(--muted); font-size:.86rem; }
.journey-chat-header button { flex:none; min-width:36px; min-height:36px; border:0; background:#eef5ff; border-radius:9px; cursor:pointer; }
.journey-chat-list { display:flex; flex-direction:column; gap:8px; height:min(35dvh,280px); min-height:100px; overflow-y:auto; overscroll-behavior:contain; padding:10px; border-radius:11px; background:#f4f7fa; }
.journey-chat-empty { margin:auto; color:var(--muted); font-size:.86rem; text-align:center; }
.journey-chat-message { max-width:88%; align-self:flex-start; padding:8px 11px; border-radius:11px; background:white; line-height:1.4; overflow-wrap:anywhere; white-space:pre-wrap; font-size:.9rem; }
.journey-chat-message.mine { align-self:flex-end; background:#dcecff; }
.journey-chat-message small { display:block; color:var(--muted); font-size:.75rem; margin-bottom:2px; }
.journey-chat-form { margin-top:10px; }
.journey-chat-form label { font-size:.86rem; font-weight:700; }
.journey-chat-form > div { display:flex; gap:8px; margin-top:5px; }
.journey-chat-form input { flex:1; min-width:0; padding:9px 10px; border:1px solid #cbd8e6; border-radius:9px; font:inherit; font-size:1rem; }
.journey-chat-form .primary-button { flex:none; min-width:74px; }
.journey-chat-form p { min-height:16px; margin:5px 0 0; color:#a92535; font-size:.82rem; }
.journey-chat-hint { margin:5px 0 0; color:var(--muted); font-size:.78rem; }
@media (max-width:480px) { .journey-status { flex-wrap:wrap; bottom:calc(8px + env(safe-area-inset-bottom)); gap:8px; } .journey-status #journey-status-copy { flex-basis:100%; } .journey-status button { flex:1; } }
#journey-consent { max-height:85dvh; overflow:auto; padding:24px; }
#journey-travel-mode { display:block; width:100%; min-height:44px; margin:6px 0 12px; padding:0 10px; border:1px solid #cbd9e8; border-radius:10px; background:#fff; color:var(--ink); font:inherit; }
#journey-consent p { line-height:1.5; }
#journey-consent .tracking-notice-choice { display:flex; align-items:flex-start; gap:10px; margin:12px 0 4px; font-weight:700; line-height:1.4; }
.tracking-notice-choice input { flex:none; width:18px; height:18px; margin-top:2px; accent-color:var(--blue); }
#journey-consent .tracking-notice-hint, .tracking-notice-hint { margin:5px 0 12px; color:var(--muted); font-size:.82rem; line-height:1.45; }
.place-comments-dialog { width:min(480px, calc(100% - 24px)); max-height:min(80dvh, 680px); overflow-y:auto; padding:18px 18px max(18px, env(safe-area-inset-bottom)); border:1px solid #dbe5ee; border-radius:17px; color:var(--ink); background:white; box-shadow:var(--shadow); }
.place-comments-dialog::backdrop { background:rgba(7, 24, 43, .52); }
.report-content-button { border:1px solid #d3e1ee; border-radius:9px; padding:7px 10px; background:#f6f9fc; color:#325576; font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.report-content-button:hover { background:#e7f1fb; }
.content-report-dialog { width:min(420px, calc(100% - 24px)); max-height:85dvh; overflow-y:auto; border:1px solid #dbe5ee; border-radius:18px; padding:22px max(18px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)); background:white; color:#17304c; box-shadow:0 15px 50px #07182b3b; }
.content-report-dialog::backdrop { background:#07182b9c; }
.content-report-dialog h2 { margin:0 0 8px; font-size:20px; }
.content-report-dialog p { margin:0 0 16px; font-size:13px; }
.content-report-dialog label { display:block; margin:12px 0 6px; font-size:13px; font-weight:700; }
.content-report-dialog select,.content-report-dialog textarea { width:100%; box-sizing:border-box; padding:10px; border:1px solid #ccd9e5; border-radius:10px; background:white; color:#17304c; font:inherit; }
.content-report-dialog #content-report-error { margin:10px 0; color:#b42333; }
.content-report-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.content-report-actions button { padding:10px 12px; border-radius:10px; border:1px solid #d1e1ee; background:#f2f6fb; color:#17304c; font:inherit; font-weight:700; }
.content-report-actions [data-report-submit] { background:#1767c8; color:white; border-color:#1767c8; }
.place-comments-header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.place-comments-header h2 { margin:2px 0 0; font-size:clamp(1.05rem, 4vw, 1.3rem); overflow-wrap:anywhere; }
.place-comments-header .dialog-close { position:static; flex:none; }
.place-comment-list { display:grid; gap:7px; max-height:35dvh; min-height:52px; overflow-y:auto; overscroll-behavior:contain; }
.place-comment-thread { display:grid; gap:6px; }
.place-comment { padding:9px; border-radius:9px; background:#f4f7fa; font-size:.86rem; line-height:1.45; overflow-wrap:anywhere; }
.place-comment strong { display:block; margin-bottom:3px; font-size:.8rem; }
.place-comment p { margin:0; }
.place-comment > button { margin-top:7px; padding:4px 8px; border:0; border-radius:7px; color:var(--blue); background:#e5effc; font-size:.76rem; font-weight:800; cursor:pointer; }
.place-comment-replies { display:grid; gap:5px; margin-left:18px; padding-left:9px; border-left:2px solid #cfe0f4; }
.place-comment.reply { background:#eef5fc; }
.place-comment-form { display:grid; gap:8px; margin-top:12px; }
.comment-reply-context { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:9px; color:#174c86; background:#eaf3fe; font-size:.8rem; font-weight:750; }
.comment-reply-context span { min-width:0; overflow-wrap:anywhere; }
.comment-reply-context button { flex:none; min-height:auto; padding:5px 8px; color:#41576c; background:white; font-size:.75rem; }
.place-comment-form label { font-size:.87rem; font-weight:700; }
.place-comment-form label span { color:var(--muted); font-weight:400; }
.place-comment-form textarea { width:100%; min-width:0; min-height:72px; max-height:130px; padding:10px; border:1px solid #d4dfeb; border-radius:9px; font:inherit; font-size:16px; resize:vertical; }
.place-comment-form button { justify-self:end; min-height:40px; border:0; padding:0 14px; border-radius:9px; color:white; background:var(--blue); font-weight:750; cursor:pointer; }
.place-comment-form button:disabled { opacity:.6; cursor:wait; }
.share-notification-dialog { width: min(420px, calc(100% - 28px)); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 24px 70px rgba(4,23,44,.28); }
.share-notification-dialog::backdrop { background: rgba(7,24,43,.52); backdrop-filter: blur(3px); }
.share-notification-dialog .guest-dialog-inner { padding: 22px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #a7b4c2; flex: 0 0 auto; }
.pulse-dot.ready { background: var(--teal); box-shadow: 0 0 0 5px rgba(10, 168, 151, 0.12); }

.results-panel {
  min-height: 0;
  height: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  padding: 17px 18px 8px;
  background: #f8fafc;
}

.mobile-handle { display: none; }
.results-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 14px; }
.results-kicker { margin: 0 0 3px; color: var(--blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.results-heading h2 { margin: 0; font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.018em; }
.result-count { flex: 0 0 auto; display: grid; place-items: center; min-width: 31px; height: 31px; padding: 0 8px; border-radius: 999px; color: #075249; background: #d9f7f0; font-size: 0.78rem; font-weight: 800; }

.result-list { height: 0; min-height: 0; flex: 1 1 0%; overflow-x: hidden; overflow-y: scroll; padding: 0 2px 12px; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #b8c8d9 transparent; }
.result-list::-webkit-scrollbar { width: 8px; }
.result-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #b8c8d9; background-clip: padding-box; }
.show-more-results { display:block; width:100%; min-height:46px; margin:10px 0 4px; padding:10px; border:1px solid #bad3f5; border-radius:12px; background:#edf5ff; color:var(--blue-dark); font:inherit; font-weight:750; cursor:pointer; }
.show-more-results:hover, .show-more-results:focus-visible { background:#e0efff; }
.result-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border: 1px solid #dce5ef;
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 14px rgba(15, 38, 66, 0.04);
  cursor: pointer;
  transition: border-color 130ms, box-shadow 130ms, transform 130ms;
}
.result-card:hover, .result-card.selected { border-color: #90b3e5; box-shadow: 0 8px 20px rgba(15, 38, 66, 0.09); transform: translateY(-1px); }
.result-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #edf4ff; font-size: 1.2rem; }
.result-main { min-width: 0; }
.result-name-row { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.result-name { min-width:0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.98rem; line-height: 1.35; }
.distance { flex:0 1 auto; max-width:52%; padding:3px 7px; border-radius:7px; background:#eef2f6; color:#4c6175; font-size:.73rem; font-weight:750; text-align:right; overflow-wrap:anywhere; }
.result-address { margin: 5px 0 10px; color: var(--muted); font-size: 0.81rem; line-height: 1.35; }
.place-phones:not(:empty) { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:5px 0 10px; min-width:0; }
.place-phone-guest { color:var(--muted); font-size:.83rem; }
.phone-source { position:relative; font-size:.78rem; }
.phone-source summary { display:grid; place-items:center; width:28px; height:28px; border:1px solid #91b9e8; border-radius:50%; cursor:pointer; color:var(--blue-dark); font-weight:800; list-style:none; }
.phone-source summary::-webkit-details-marker { display:none; }
.phone-source[open] { flex-basis:100%; }
.phone-source a { color:var(--blue-dark); }
.phone-disclaimer { flex-basis:100%; display:block; color:var(--muted); font-size:.72rem; line-height:1.35; }
.site-info-link { width:100%; max-width:100%; padding:16px 12px max(18px,calc(env(safe-area-inset-bottom) + 12px)); border-top:1px solid var(--line); background:white; text-align:center; font-size:.875rem; line-height:1.5; }
.site-info-link a { color:var(--blue-dark); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.site-intro { max-width:780px; margin:0 auto 10px; color:var(--muted); }
.site-guides { line-height:1.8; }
.site-guide { max-width:780px; margin:14px auto 0; text-align:left; }
.site-guide summary { cursor:pointer; color:var(--blue-dark); font-weight:750; }
.site-guide p { line-height:1.7; }
.site-guide nav { display:flex; flex-wrap:wrap; gap:8px 16px; }
.site-guide nav a { min-height:32px; padding-block:5px; }
body.navigation-mode .site-info-link { display:none; }
.nearby-message-button { min-height:36px; padding:4px 10px; border:1px solid #abc9ed; border-radius:9px; background:#ecf5ff; color:var(--blue-dark); cursor:pointer; font-weight:700; }
.account-dialog.nearby-chat-dialog { position:fixed; inset:auto 16px calc(16px + env(safe-area-inset-bottom)) auto; width:min(420px,calc(100% - 32px)); max-height:min(78dvh,700px); margin:0; border-radius:18px; }
.nearby-chat-dialog .account-dialog-inner { max-height:min(78dvh,700px); padding:16px; }
.nearby-chat-privacy { margin:0 0 8px; color:var(--muted); font-size:.78rem; line-height:1.4; }
.nearby-chat-consent { width:min(440px,calc(100% - 24px)); }
.nearby-chat-consent p { line-height:1.5; }
@media(max-width:480px) { .account-dialog.nearby-chat-dialog { inset:auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; width:calc(100% - 16px); max-height:85dvh; } .nearby-chat-dialog .account-dialog-inner { max-height:85dvh; padding:12px; } }
.nearby-chat-list { display:flex; gap:6px; overflow-x:auto; padding:8px 0; max-width:100%; }
.nearby-chat-list button { min-width:130px; max-width:190px; min-height:50px; padding:6px 9px; border:1px solid #d6e4f2; border-radius:10px; background:#f6f9ff; text-align:left; cursor:pointer; }
.nearby-chat-list button.active { border-color:var(--blue); background:#e8f1ff; }
.nearby-chat-list strong,.nearby-chat-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nearby-chat-thread { display:flex; flex-direction:column; gap:7px; min-height:150px; max-height:min(42dvh,360px); overflow-y:auto; padding:8px; border:1px solid #e0e9f4; border-radius:12px; background:#fbfdff; }
.nearby-chat-bubble { max-width:86%; align-self:flex-start; padding:9px 11px; border-radius:12px; background:#edf3fa; overflow-wrap:anywhere; }
.nearby-chat-bubble.mine { align-self:flex-end; background:#deebff; }
.nearby-chat-bubble strong { font-size:.78rem; }
.nearby-chat-bubble p { margin:4px 0; white-space:pre-wrap; font-size:.9rem; }
.nearby-chat-bubble time { font-size:.7rem; color:var(--muted); }
.nearby-chat-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nearby-chat-form label { flex:1 1 170px; min-width:0; font-size:.83rem; }
.nearby-chat-form input { width:100%; min-height:42px; border:1px solid #cbd9e8; border-radius:9px; padding:8px; }
.nearby-chat-report { margin-top:10px; }
.nearby-chat-report summary { cursor:pointer; color:#96521b; font-size:.85rem; }
.nearby-chat-report label { display:block; margin:9px 0; font-size:.85rem; }
.nearby-chat-report textarea { width:100%; min-height:74px; padding:8px; border:1px solid #d5dfeb; border-radius:9px; }
.place-phone-label { color:var(--muted); font-size:.79rem; }
.call-place-link { display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; min-height:40px; max-width:100%; padding:6px 10px; border:1px solid #abdacb; border-radius:10px; background:#ecfaf4; color:#075b46; font-size:.82rem; font-weight:750; text-decoration:none; overflow-wrap:anywhere; }
.call-place-link:hover, .call-place-link:focus-visible { background:#d9f4e9; outline-offset:2px; }
.result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.route-button, .maps-link, .save-place-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.route-button { border: 0; background: var(--blue); color: white; }
.route-button:hover { background: var(--blue-dark); }
.save-place-button { border: 1px solid #cfdceb; color: #27445f; background: white; }
.save-place-button:hover { background: #eef5ff; }
.save-place-button.pin { color: #6f4a00; background: #fff9e9; border-color: #ead8a9; }
.maps-link { border: 1px solid #d7e1eb; background: white; color: #314b64; }
.route-button svg, .maps-link svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #7c8fa2; text-align: center; }
.empty-state span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #eaf0f6; font-size: 1.5rem; }
.empty-state p { margin: 0; max-width: 230px; font-size: 0.9rem; line-height: 1.45; }
.retry-search-button { min-height: 40px; margin-top: 4px; padding: 0 16px; border: 0; border-radius: 11px; color: white; background: var(--blue); font-weight: 800; cursor: pointer; }
.retry-search-button:hover { background: var(--blue-dark); }
.loading-list { display: grid; gap: 10px; }
.skeleton { height: 106px; border-radius: 16px; background: linear-gradient(90deg, #e8eef4 20%, #f5f8fb 42%, #e8eef4 65%); background-size: 300% 100%; animation: shimmer 1.3s infinite linear; }
@keyframes shimmer { to { background-position: -150% 0; } }
.data-note { margin: 2px 0 0; padding: 8px 0 env(safe-area-inset-bottom); color: #8595a6; font-size: 0.68rem; text-align: center; }
.data-note a { color: inherit; text-decoration: underline; }

.permission-card {
  position: absolute;
  z-index: 550;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100% - 42px));
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(12, 44, 75, 0.2);
  backdrop-filter: blur(16px);
  text-align: center;
}
.permission-icon { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 17px; color: white; background: linear-gradient(145deg, var(--blue), #3385f4); box-shadow: 0 12px 24px rgba(13, 91, 215, 0.26); }
.permission-icon svg { width: 29px; fill: currentColor; }
.eyebrow { margin: 0 0 6px; color: var(--blue); font-size: 0.73rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.permission-card h1 { margin: 0; font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.15; letter-spacing: -0.035em; }
.permission-card p:not(.eyebrow) { margin: 10px auto 18px; max-width: 330px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.primary-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--blue); color: white; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px rgba(13, 91, 215, 0.2); }
.primary-button:hover { background: var(--blue-dark); }
.primary-button svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.permission-card .primary-button { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 750; cursor: pointer; }
.permission-card .text-button { margin-top: 12px; padding: 6px 10px; }

.map-actions { position: absolute; z-index: 450; right: 16px; bottom: 28px; display: grid; gap: 9px; }
.map-action { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(205, 218, 231, 0.9); border-radius: 14px; background: white; box-shadow: var(--small-shadow); cursor: pointer; }
.map-action:hover { background: #f3f7fb; }
.map-action svg { width: 21px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.manual-tip, .route-summary { position: absolute; z-index: 520; left: 50%; transform: translateX(-50%); border-radius: 13px; box-shadow: var(--small-shadow); }
.manual-tip { top: 18px; padding: 11px 15px; background: var(--ink); color: white; font-size: 0.86rem; font-weight: 700; }
.route-summary { bottom: 24px; display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: white; color: var(--ink); font-size: 0.83rem; font-weight: 700; white-space: nowrap; }
.route-summary button { padding: 6px 9px; border: 0; border-radius: 8px; color: white; background: var(--blue); font-size: 0.78rem; font-weight: 750; cursor: pointer; }
.route-summary .route-close-button { color: #41576c; background: #edf2f7; }
.route-summary { max-width:min(580px,calc(100% - 24px)); flex-wrap:wrap; white-space:normal; }
.route-summary > span { flex:1 1 170px; min-width:0; overflow-wrap:anywhere; }
.route-summary > button { flex:0 0 auto; }

.navigation-screen { position: absolute; inset: 0; z-index: 700; pointer-events: none; }
.navigation-header {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  right: 14px;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 225, 235, 0.92);
  border-radius: 19px;
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  pointer-events: auto;
}
.navigation-brand { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 850; letter-spacing: -0.025em; }
.navigation-brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
.navigation-header button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 11px; color: white; background: #10253f; font-size: 0.8rem; font-weight: 800; cursor: pointer; }
.navigation-card {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 76px);
  left: 50%;
  width: min(440px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  padding: 13px 15px;
  border-radius: 17px;
  color: white;
  background: #0d5bd7;
  box-shadow: 0 14px 34px rgba(8, 71, 171, 0.3);
  pointer-events: auto;
}
.navigation-arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,0.17); font-size: 2rem; font-weight: 900; }
.navigation-card p { margin: 0 0 2px; font-size: 0.75rem; font-weight: 700; opacity: 0.82; }
.navigation-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.navigation-card div > span { display: block; margin-top: 3px; font-size: 0.82rem; font-weight: 750; opacity: 0.9; }
#navigation-conditions { white-space:normal; overflow-wrap:anywhere; font-size:.74rem; line-height:1.35; }
#navigation-route-source { display:block; width:max-content; max-width:100%; color:#fff; font-size:.68rem; font-weight:600; opacity:.8; text-decoration:underline; }
.voice-toggle { min-height: 42px; padding: 0 10px; border: 1px solid rgba(255,255,255,0.5); border-radius: 11px; color: white; background: rgba(255,255,255,0.16); font-size: 0.75rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.voice-toggle:disabled { opacity: 0.58; cursor: not-allowed; }
.route-road-label-marker { width: 160px !important; height: 24px !important; border: 0; background: transparent; text-align: center; pointer-events: none; }
.route-road-label-marker span { display: inline-block; max-width: 156px; overflow: hidden; padding: 3px 7px; border: 1px solid rgba(13,91,215,0.44); border-radius: 999px; color: #123658; background: rgba(255,255,255,0.94); box-shadow: 0 2px 8px rgba(15,38,66,0.2); font-size: 0.68rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.navigation-live { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; background: rgba(16,37,63,0.92); color: white; box-shadow: var(--small-shadow); font-size: 0.78rem; font-weight: 750; white-space: nowrap; }
.navigation-live span { width: 9px; height: 9px; border-radius: 50%; background: #38d9bd; box-shadow: 0 0 0 5px rgba(56,217,189,0.16); }
.alternative-route-dialog { width: min(410px, calc(100% - 28px)); max-height: calc(100dvh - 36px); padding: 23px; border: 0; border-radius: 20px; color: #10253f; background: #fff; box-shadow: 0 24px 70px rgba(7,24,43,.28); }
.travel-mode-dialog { width:min(410px,calc(100% - 28px)); max-height:calc(100dvh - 36px); padding:20px; border:0; border-radius:18px; color:var(--ink); background:#fff; box-shadow:var(--shadow); }
.travel-mode-dialog::backdrop { background:rgba(7,24,43,.48); }
.travel-mode-dialog h2 { margin:0 0 7px; font-size:clamp(1.15rem,5vw,1.4rem); }
.travel-mode-dialog p { margin:0 0 16px; color:var(--muted); font-size:.86rem; }
.travel-mode-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.travel-mode-options button { display:grid; place-items:center; gap:5px; min-width:0; min-height:74px; padding:9px 5px; border:1px solid #c3d8f4; border-radius:13px; background:#eff6ff; color:var(--blue-dark); font:inherit; font-size:1.35rem; cursor:pointer; }
.travel-mode-options button span { font-size:clamp(.72rem,3vw,.88rem); font-weight:800; }
.travel-mode-options button:focus-visible, .travel-mode-options button:hover { border-color:var(--blue); background:#e3f0ff; }
.travel-mode-cancel { display:block; min-height:44px; margin:12px auto 0; border:0; background:transparent; color:var(--muted); font:inherit; font-weight:700; cursor:pointer; }
.route-summary .route-source { display:block; margin-top:3px; font-size:.68rem; font-weight:500; color:var(--muted); }
.route-summary .route-source a { color:var(--blue-dark); }
.route-summary [data-change-travel-mode] { min-height:38px; }
.alternative-route-dialog::backdrop { background: rgba(7,24,43,.48); }
.alternative-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: #0d5bd7; background: #e8f2ff; font-size: 1.6rem; font-weight: 800; }
.alternative-route-dialog h2 { margin: 14px 0 8px; font-size: clamp(1.1rem, 5vw, 1.3rem); }
.alternative-route-dialog p { margin: 0; line-height: 1.5; font-size: .9rem; }
.alternative-route-dialog .alternative-comparison { margin-top: 13px; padding: 11px; border-radius: 11px; background: #eff5fc; font-weight: 750; }
.alternative-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.alternative-actions button { flex: 1 1 130px; min-height: 43px; padding: 9px; border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
#alternative-dismiss { color: #32495e; background: #eef2f6; }
#alternative-accept { color: white; background: #0d5bd7; }
#alternative-accept:disabled { opacity: .55; }

body.navigation-mode .topbar, body.navigation-mode .control-panel, body.navigation-mode .permission-card, body.navigation-mode .shared-location-card, body.navigation-mode .route-summary { display: none !important; }
body.navigation-mode .workspace { position: fixed; inset: 0; width: 100%; height: 100dvh; display: block; }
body.navigation-mode .map-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
body.navigation-mode .map-actions { right: 14px; bottom: max(74px, calc(env(safe-area-inset-bottom) + 64px)); }

.shared-location-card {
  position: absolute;
  z-index: 540;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, calc(100% - 36px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 20px;
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.shared-location-pin { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--teal); }
.shared-location-pin svg { width: 26px; fill: currentColor; }
.shared-location-copy { min-width: 0; }
.shared-location-copy h2 { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.shared-location-copy > p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.4; overflow-wrap: anywhere; }
.shared-location-actions { display: flex; flex-wrap:wrap; align-items: center; gap: 8px; margin-top: 11px; }
.shared-location-actions button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; border-radius: 10px; font-size: 0.8rem; font-weight: 780; cursor: pointer; }
.shared-location-actions #shared-directions { border: 0; color: white; background: var(--blue); }
.shared-location-actions #shared-comments { border: 1px solid var(--line); color: var(--blue); background: white; }
.shared-location-actions #shared-location-close { border: 1px solid var(--line); color: #41576c; background: white; }

.share-dialog {
  width: min(480px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  color: var(--ink);
  background: white;
  box-shadow: 0 26px 80px rgba(6, 27, 50, 0.3);
}
.share-dialog::backdrop { background: rgba(7, 24, 43, 0.52); backdrop-filter: blur(3px); }
.account-dialog { width: min(620px, calc(100% - 26px)); max-height: min(82dvh, 760px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: white; box-shadow: 0 22px 70px rgba(7, 24, 43, 0.26); }
.account-dialog::backdrop { background: rgba(7, 24, 43, 0.55); backdrop-filter: blur(3px); }
.account-dialog-inner { padding: 22px; overflow-y: auto; max-height: min(82dvh, 760px); }
.account-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.account-dialog h2, .account-dialog h3 { margin: 0; }
.account-loading, .account-anonymous { padding: 24px 4px; color: var(--muted); text-align: center; }
.account-anonymous p { margin: 0 auto 18px; max-width: 420px; line-height: 1.5; }
.account-anonymous .primary-button { width: 100%; text-decoration: none; }
.account-profile { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 15px; background: #edf4ff; }
.account-profile strong, .account-profile span { display: block; }
.account-profile span { margin-top: 3px; color: var(--muted); font-size: 0.8rem; }
.account-profile a { color: var(--blue); font-weight: 800; text-decoration: none; }
.account-section { margin-top: 20px; }
.account-section h3 { margin-bottom: 10px; font-size: 1rem; }
.saved-location-list { display: grid; gap: 10px; }
.saved-location-card { overflow: hidden; border: 1px solid #dce5ef; border-radius: 15px; background: white; }
.saved-location-main { width: 100%; padding: 13px 14px 10px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.saved-location-main strong, .saved-location-main small { display: block; }
.saved-location-main small { margin-top: 4px; color: var(--muted); font-size: 0.8rem; }
.saved-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.saved-badges span { padding: 3px 7px; border-radius: 999px; color: #075249; background: #d9f7f0; font-size: 0.7rem; font-weight: 800; }
.saved-location-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 12px; border-top: 1px solid #edf1f5; background: #f8fafc; }
.saved-location-actions button { min-height: 32px; padding: 0 9px; border: 1px solid #d4dfeb; border-radius: 9px; color: #314b64; background: white; font-size: 0.75rem; font-weight: 750; cursor: pointer; }
.saved-location-actions button.delete { color: #a22b35; }
.saved-empty { margin: 0; padding: 16px; border-radius: 13px; color: var(--muted); background: #f5f8fb; text-align: center; font-size: 0.84rem; }
.account-privacy { margin: 18px 0 0; color: var(--muted); font-size: 0.76rem; line-height: 1.45; }
.guest-dialog { position: relative; width: min(430px, calc(100% - 28px)); padding: 0; overflow: visible; border: 0; border-radius: 22px; color: var(--ink); background: white; box-shadow: 0 24px 76px rgba(6, 27, 50, 0.3); }
.guest-dialog::backdrop { background: rgba(7, 24, 43, 0.48); backdrop-filter: blur(2px); }
.guest-dialog-inner { position: relative; padding: 27px 24px 22px; text-align: center; }
.guest-dialog h2 { margin: 12px 0 9px; font-size: 1.28rem; letter-spacing: -0.025em; }
.guest-dialog p { margin: 0; color: #586d80; font-size: 0.94rem; line-height: 1.52; }
.guest-mark { display: inline-grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; color: white; background: var(--blue); font-size: 1.8rem; }
.guest-close { position: absolute; top: 12px; right: 12px; }
.guest-actions { display: grid; gap: 5px; margin-top: 19px; }
.guest-actions .primary-button, .guest-actions .text-button { width: 100%; min-height: 44px; }
.member-gate { width: min(400px, calc(100% - 28px)); }
.account-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 17px; padding: 4px; border-radius: 12px; background: #f0f4f8; }
.account-tabs button { min-height: 40px; border: 0; border-radius: 9px; color: #4e6276; background: transparent; font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.account-tabs button.active { color: #12385d; background: white; box-shadow: 0 2px 7px rgba(24, 55, 85, 0.1); }
.account-form { display: grid; gap: 12px; margin-top: 10px; }
.account-form label { display: grid; gap: 6px; color: #28445e; font-size: 0.88rem; font-weight: 780; }
.account-form input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid #cbd8e5; border-radius: 11px; outline: 0; color: var(--ink); background: #fbfcfe; font-size: 1rem; }
.account-form input:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(13, 91, 215, 0.1); }
.account-form .primary-button, .secondary-button { min-height: 44px; border: 0; border-radius: 11px; color: white; background: var(--blue); font-size: 0.9rem; font-weight: 820; cursor: pointer; }
.account-form button:disabled { opacity: 0.6; cursor: wait; }
.secondary-button { padding: 0 13px; color: #23415c; background: #edf3f9; }
.secondary-button:hover { background: #e2edf8; }
.forgot-link { min-height: 36px; padding: 3px; border: 0; color: var(--blue); background: transparent; font-size: 0.84rem; font-weight: 760; cursor: pointer; }
.field-hint { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.recovery-result { display: grid; gap: 10px; margin-top: 13px; padding: 14px; border: 1px solid #e8d49f; border-radius: 12px; color: #594511; background: #fff9e8; text-align: left; }
.recovery-result p { margin: 0; font-size: 0.86rem; line-height: 1.45; }
.recovery-code { overflow-wrap: anywhere; padding: 9px; border-radius: 8px; color: #263d54; background: white; font: 700 0.83rem ui-monospace, SFMono-Regular, Menlo, monospace; user-select: all; }
.account-message { margin: 12px 0 0; padding: 11px; border-radius: 10px; color: #116650; background: #e6f8f2; font-size: 0.87rem; line-height: 1.4; }
.account-message.error { color: #9d2635; background: #fff0f0; }
.account-settings { padding-top: 16px; border-top: 1px solid #e7edf3; }
.account-settings > .secondary-button { margin-top: 11px; }
.share-dialog form { padding: 23px; }
.share-dialog-header { display: grid; grid-template-columns: 48px minmax(0, 1fr) 38px; align-items: center; gap: 12px; margin-bottom: 19px; }
.share-dialog-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--blue), #3385f4); }
.share-dialog-icon svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-dialog h2 { margin: 0; font-size: 1.28rem; letter-spacing: -0.025em; }
.dialog-close { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #eff3f7; color: #5d7184; font-size: 1.55rem; line-height: 1; cursor: pointer; }
.share-dialog label { display: block; margin-bottom: 8px; font-size: 0.88rem; font-weight: 780; }
.share-dialog label span { color: var(--muted); font-weight: 550; }
.share-dialog textarea { width: 100%; min-height: 94px; resize: vertical; padding: 13px 14px; border: 1px solid #ccd9e6; border-radius: 14px; outline: 0; color: var(--ink); background: #f8fafc; font-size: 1rem; line-height: 1.45; }
.share-dialog textarea:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 4px rgba(13, 91, 215, 0.1); }
.share-dialog textarea::placeholder { color: #8495a6; }
.share-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.share-counter { flex: 0 0 auto; color: #425a70; font-variant-numeric: tabular-nums; font-weight: 750; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.share-actions button { min-height: 48px; }
.share-actions .primary-button { width: 100%; }
.share-actions svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-link-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #cbd9e8; border-radius: 14px; color: #314b64; background: white; font-weight: 780; cursor: pointer; }
.copy-link-button:hover { background: #f4f8ff; }

.install-dialog {
  width: min(430px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: white;
  box-shadow: 0 26px 80px rgba(6, 27, 50, 0.3);
  overflow: hidden;
}
.install-dialog::backdrop { background: rgba(7, 24, 43, 0.48); backdrop-filter: blur(3px); }
.install-art { height: 112px; display: grid; place-items: center; position: relative; background: radial-gradient(circle at 50% 130%, #6ba6ff, transparent 47%), linear-gradient(135deg, #083e9a, #0d65e8); overflow: hidden; }
.phone-shape { width: 48px; height: 76px; display: grid; place-items: center; border: 4px solid white; border-radius: 12px; background: rgba(255,255,255,0.13); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.mini-pin { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50% 50% 50% 7px; transform: rotate(-45deg); background: white; color: var(--teal); font-size: 0; }
.mini-pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.plus-badge { position: absolute; left: calc(50% + 21px); bottom: 22px; width: 27px; height: 27px; display: grid; place-items: center; border: 3px solid #0d65e8; border-radius: 9px; background: #a7f3e9; color: #05695e; font-weight: 900; }
.install-copy { padding: 22px 24px 8px; text-align: center; }
.install-copy h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; }
.install-copy > p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); line-height: 1.45; font-size: 0.9rem; }
.ios-steps { display: grid; gap: 8px; margin-top: 14px; text-align: left; }
.ios-steps span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 11px; background: #f2f6fb; font-size: 0.82rem; }
.ios-steps b { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #d9e8ff; color: var(--blue); }
.install-actions { display: grid; gap: 5px; padding: 14px 24px 22px; }
.install-actions .primary-button { width: 100%; }
.install-actions .text-button { min-height: 40px; }

.toast { position: fixed; z-index: 2000; left: 50%; bottom: 22px; max-width: min(440px, calc(100% - 28px)); transform: translate(-50%, 24px); padding: 12px 16px; border-radius: 12px; background: #10253f; color: white; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms; font-size: 0.86rem; font-weight: 650; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .topbar { height: calc(72px + env(safe-area-inset-top)); padding: calc(env(safe-area-inset-top) + 14px) 15px 0; }
  .brand { font-size: 1.08rem; }
  .brand-mark { width: 31px; height: 31px; border-radius: 10px; }
  .install-mini { min-height: 38px; padding: 0 11px; }
  .install-mini span { display: none; }
  .account-button { min-height: 38px; padding: 0 10px; }
  .account-button #account-button-label { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .workspace { height: calc(100dvh - 72px - env(safe-area-inset-top)); display: block; position: relative; }
  .map-wrap { position: absolute; inset: 0; }
  .control-panel { position: absolute; inset: 0; z-index: 500; display: block; border: 0; box-shadow: none; background: transparent; pointer-events: none; }
  .search-surface { position: absolute; z-index: 2; top: 10px; left: 10px; right: 10px; max-height:45dvh; overflow-y:auto; overscroll-behavior:contain; padding: 10px 10px 8px; border: 1px solid rgba(213, 225, 237, 0.9); border-radius: 19px; box-shadow: var(--small-shadow); pointer-events: auto; }
  .search-form { height: 50px; grid-template-columns: 22px minmax(0, 1fr) auto; padding-left: 12px; }
  .search-form button { height: 39px; padding: 0 13px; }
  .category-scroll { padding-top: 10px; padding-bottom: 7px; scrollbar-width: none; }
  .category-scroll::-webkit-scrollbar { display: none; }
  .category-chip { min-height: 37px; padding: 0 11px; font-size: 0.82rem; }
  .location-line { margin-top: 7px; min-height: 24px; }
  .results-panel { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; height: auto; max-height: min(44dvh, 390px); min-height: 160px; display: flex; flex: initial; padding: 8px 12px 5px; border: 1px solid rgba(213, 225, 237, 0.9); border-radius: 22px; box-shadow: 0 12px 38px rgba(15, 38, 66, 0.19); pointer-events: auto; transform: translateY(calc(100% + 18px)); transition: transform 220ms ease; }
  .results-panel.visible { transform: translateY(0); }
  .mobile-handle { display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 9px; background: #c8d4df; }
  .results-heading { padding: 0 2px 10px; }
  .result-list { height: auto; min-height: 0; flex: 1 1 auto; padding-bottom: 4px; }
  .result-card { grid-template-columns: 38px minmax(0, 1fr); padding: 11px; margin-bottom: 8px; border-radius: 14px; }
  .result-icon { width: 38px; height: 38px; border-radius: 11px; }
  .result-address { margin-bottom: 8px; }
  .data-note { display: block; font-size: 0.68rem; padding: 1px 0 2px; line-height: 1.2; }
  .permission-card { top: 58%; width: min(390px, calc(100% - 32px)); padding: 21px 19px; }
  .permission-icon { width: 48px; height: 48px; margin-bottom: 12px; }
  .permission-card h1 { font-size: 1.45rem; }
  .map-actions { right: 12px; bottom: 18px; }
  .route-summary { bottom: calc(min(44dvh, 390px) + 20px); max-width: calc(100% - 28px); overflow-x: auto; }
  .shared-location-card { top: auto; bottom: 18px; width: calc(100% - 24px); grid-template-columns: 43px minmax(0, 1fr); padding: 14px; border-radius: 18px; }
  .shared-location-pin { width: 43px; height: 43px; border-radius: 13px; }
  .results-panel.visible ~ * .map-actions { bottom: 47dvh; }
  .leaflet-control-zoom { display: none; }
}

@media (max-width: 390px) {
  .search-form input { font-size: 0.92rem; }
  .category-chip { min-height: 35px; }
  .location-line { font-size: 0.76rem; }
  .permission-card { top: 60%; }
  .share-actions { grid-template-columns: 1fr; }
  .navigation-header { left: 10px; right: 10px; }
  .navigation-header button { padding: 0 10px; }
  .navigation-card { width: calc(100% - 20px); grid-template-columns: 42px minmax(0, 1fr); }
  .navigation-arrow { width: 42px; height: 42px; }
  .voice-toggle { grid-column: 2; justify-self: start; min-height: 34px; margin-top: 3px; }
}

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

/* Stable scrolling: only the visible list/search area scrolls, never the page. */
html, body { overscroll-behavior: none; overflow-anchor: none; }
.control-panel, .search-surface, .result-list { overflow-anchor: none; }
.search-surface { overscroll-behavior: contain; }
.place-detail { margin: 4px 0; color: #51687b; font-size: .78rem; overflow-wrap: anywhere; }
.conditions-panel { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; font-size: .8rem; }
.conditions-panel summary { cursor: pointer; min-height: 36px; display: list-item; align-content: center; font-weight: 700; }
.conditions-panel p { margin: 6px 0; }
.conditions-panel small { display: block; color: #536778; line-height: 1.5; }
#traffic-info { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
#refresh-conditions, #toggle-results { border: 0; border-radius: 9px; padding: 9px 12px; color: var(--blue); background: #eef4ff; cursor: pointer; min-height: 40px; }
#refresh-conditions { margin-top: 10px; }
#toggle-results { display: none; margin-left: auto; flex-shrink: 0; }
.route-estimate { display: block; font-size: .68rem; font-weight: 400; }
@media (max-width: 760px) {
  body { position: fixed; inset: 0; width: 100%; }
  .workspace { overflow: hidden; }
  .search-surface { max-height: 37dvh; }
  .search-form input, input, select, textarea, .general-search-fields input, .general-search-fields select { font-size: 16px; }
  #toggle-results { display: block; }
  .results-panel { bottom: max(8px, env(safe-area-inset-bottom)); height: 36dvh; min-height: 0; max-height: 360px; transform: none; visibility: hidden; transition: none; }
  .results-panel.visible { visibility: visible; }
  .results-panel.is-collapsed { height: auto; }
  .results-panel.is-collapsed .result-list, .results-panel.is-collapsed .data-note { display: none; }
  .results-heading { min-height: 48px; gap: 8px; }
  .result-list { min-height: 0; -webkit-overflow-scrolling: touch; }
  .route-summary { bottom: calc(36dvh + 22px + env(safe-area-inset-bottom)); white-space: normal; flex-wrap: wrap; width: max-content; }
  .workspace:has(.results-panel.is-collapsed) .route-summary { bottom: calc(90px + env(safe-area-inset-bottom)); }
  .workspace:not(:has(.results-panel.visible)) .route-summary { bottom: calc(22px + env(safe-area-inset-bottom)); }
  .map-actions { bottom: calc(37dvh + 26px); }
  .workspace:has(.results-panel.is-collapsed) .map-actions { bottom: 100px; }
  .workspace:not(:has(.results-panel.visible)) .map-actions { bottom: 24px; }
  .leaflet-control-attribution { max-width: 100%; }
  dialog { max-height: calc(100dvh - 32px); overscroll-behavior: contain; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

@media (max-width: 760px) { .category-chip, .community-tab, .route-button, .save-place-button { min-height: 44px; } }

.traffic-planning { margin-top: 12px; padding: 12px; border-radius: 12px; background: #edf4ff; }
.traffic-planning label { display: block; font-weight: 700; margin-bottom: 8px; }
.traffic-planning select { width: 100%; min-height: 44px; font-size: 16px; border: 1px solid #cad8ed; border-radius: 8px; background: white; padding: 8px; margin-bottom: 10px; }
/* Weather and planning details keep their full intrinsic height. */
.conditions-panel, .conditions-panel > *, .traffic-planning { min-width: 0; max-width: 100%; }
.conditions-panel { overflow: visible; }
.conditions-panel summary { font-size: clamp(.78rem, 2.7vw, .9rem); }
.conditions-brief { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 7px 0; }
.conditions-brief span { min-width: 0; padding: 9px; border-radius: 10px; background: #f0f6ff; font-size: .73rem; font-weight: 650; overflow-wrap: anywhere; }
.conditions-brief strong { display: block; margin-top: 4px; color: #193b5b; font-size: .76rem; }
.conditions-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 8px 0; }
.condition-tile { min-width: 0; padding: 9px; border: 1px solid #e1eafa; border-radius: 10px; background: #fbfdff; overflow-wrap: anywhere; }
.condition-tile span, .condition-tile strong { display: block; }
.condition-tile strong { margin-top: 4px; font-size: .78rem; }
.conditions-panel small, .conditions-panel p { overflow-wrap: anywhere; }
.traffic-planning { padding: 10px; margin-top: 9px; }
.traffic-planning select { margin-bottom: 7px; }
html, body { max-width: 100%; }
@media (max-width: 760px) {
  html { height: auto; overflow-x: clip; overscroll-behavior-y: auto; }
  body { position: static; inset: auto; height: auto; min-height: 100svh; width: 100%; max-width: 100%; overflow-x: clip; overflow-y: auto; overscroll-behavior-y: auto; padding-bottom: env(safe-area-inset-bottom); }
  .topbar { width: 100%; max-width: 100%; gap: 6px; }
  .topbar-actions, .brand { min-width: 0; }
  .brand { font-size: clamp(.88rem,3.8vw,1.08rem); }
  .workspace { position: relative; width: 100%; max-width: 100%; height: auto; min-height: calc(100svh - 72px - env(safe-area-inset-top)); overflow: visible; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(290px, 41svh) auto; align-content: start; }
  .control-panel { display: contents; pointer-events: auto; }
  .search-surface { grid-column: 1; grid-row: 1; position: relative; inset: auto; top: auto; left: auto; right: auto; z-index: 2; width: auto; min-width: 0; max-height: none; height: auto; overflow: visible; margin: 9px; padding: 11px; border-radius: 16px; box-shadow: var(--small-shadow); }
  .community-content { max-height: none; overflow-y: visible; }
  .map-wrap { grid-column: 1; grid-row: 2; position: relative; inset: auto; width: 100%; min-width: 0; height: auto; min-height: 290px; overflow: hidden; }
  .results-panel, .results-panel.visible { grid-column: 1; grid-row: 3; position: relative; inset: auto; z-index: 2; width: auto; height: auto; min-height: 0; max-height: none; max-width: 100%; margin: 9px; padding: 12px; visibility: visible; transform: none; transition: none; border-radius: 16px; box-shadow: var(--small-shadow); }
  .results-panel.is-collapsed { height: auto; }
  .results-panel.is-collapsed .result-list, .results-panel.is-collapsed .data-note { display: none; }
  .result-list { height: auto; flex: none; overflow: visible; overscroll-behavior: auto; touch-action: auto; }
  .result-card { min-width: 0; }
  .results-heading { min-width: 0; }
  .results-heading > div { min-width: 0; }
  .results-heading h2 { font-size: clamp(.9rem,4vw,1.12rem); overflow-wrap: anywhere; }
  .result-count { flex-shrink: 0; }
  .location-line { flex-wrap: wrap; min-width: 0; }
  .location-line > span:nth-child(2) { min-width: 0; flex: 1 1 100px; white-space: normal; overflow-wrap: anywhere; }
  .location-actions { flex-wrap: wrap; justify-content: end; gap: 3px; min-width: 0; }
  .route-summary, .workspace:has(.results-panel.is-collapsed) .route-summary, .workspace:not(:has(.results-panel.visible)) .route-summary { bottom: 12px; width: auto; max-width: calc(100% - 24px); overflow: visible; }
  .map-actions, .workspace:has(.results-panel.is-collapsed) .map-actions, .workspace:not(:has(.results-panel.visible)) .map-actions { bottom: 105px; }
  .permission-card { top: 50%; }
  body.navigation-mode { position: fixed; inset: 0; height: 100dvh; overflow: hidden; padding-bottom: 0; }
  body.navigation-mode .workspace { position: fixed; inset: 0; display: block; width: 100%; height: 100dvh; min-height: 0; }
  body.navigation-mode .map-wrap { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
}
@media (max-width: 350px) {
  .topbar { padding-inline:8px; }
  .brand { gap:5px; font-size:.84rem; }
  .brand-mark { width:27px; height:27px; }
  .account-button #account-button-label { display:none; }
  .account-button, .install-mini, .notice-button { min-width:36px; padding-inline:7px; }
  .search-area-fields { grid-template-columns:minmax(0, 1fr); }
  .conditions-brief, .conditions-grid { grid-template-columns: minmax(0,1fr); }
  .location-actions { flex: 1 1 100%; justify-content: start; }
  .results-heading { flex-wrap: wrap; }
  .search-form { gap: 4px; padding-left: 7px; }
  .search-form button { padding-inline: 9px; }
}
/* The main panel follows document flow on every viewport size. */
html, body { height: auto; min-height: 100%; }
body { overflow-x: clip; overflow-y: auto; }
.workspace { height: auto; min-height: calc(100svh - 64px); }
.control-panel { height: auto; min-height: 0; }
.search-surface { max-height: none; overflow: visible; }
.community-content { max-height: none; overflow-y: visible; }
.results-panel { height: auto; min-height: 0; flex: none; }
.result-list { height: auto; flex: none; overflow: visible; touch-action: auto; }
@media (min-width: 761px) {
  .map-wrap { position: sticky; top: 64px; height: calc(100svh - 64px); align-self: start; }
}
@media (max-width: 760px) {
  .topbar { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:6px; padding-inline:max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); overflow:visible; }
  .topbar-actions { flex:none; gap:6px; }
  .topbar-actions > button { flex:none; }
  .brand { min-width:0; max-width:100%; white-space:nowrap; gap:6px; }
  .brand-mark { flex:none; }
  .brand > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 390px) {
  .account-button #account-button-label { display:none; }
  .account-button, .install-mini, .notice-button { min-width:36px; padding-inline:7px; }
}
.add-place-button { margin-top:9px; min-height:34px; padding:5px 10px; border:1px solid #cbdff4; border-radius:10px; background:#f4f9ff; color:#1356a6; font-size:.82rem; font-weight:750; cursor:pointer; }
.location-line .add-place-button { margin-top:0; padding:5px 9px; border:1px solid #cbdff4; border-radius:9px; background:#f4f9ff; white-space:nowrap; }
.member-place-dialog { width:min(440px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:18px; border:1px solid #dbe5ee; border-radius:17px; background:white; color:var(--ink); box-shadow:var(--shadow); }
.member-place-dialog::backdrop { background:rgba(7,24,43,.52); }
.member-place-form { display:grid; gap:12px; }
.member-place-form h2 { margin:0; font-size:1.15rem; }
.member-place-form p { margin:0; font-size:.85rem; line-height:1.45; color:var(--muted); }
.member-place-form label { display:grid; gap:5px; font-weight:700; font-size:.86rem; }
.member-place-form input,.member-place-form select { width:100%; min-width:0; min-height:42px; padding:8px 10px; border:1px solid #cbd9e8; border-radius:10px; background:white; color:var(--ink); font-size:16px; }
#member-place-pick { min-height:42px; border:1px solid #b9d1f0; border-radius:10px; background:#f4f9ff; color:#1356a6; font-weight:750; cursor:pointer; }
.member-place-form > .primary-button { width:100%; justify-content:center; }
body.picking-member-place .search-surface,body.picking-member-place .results-panel { pointer-events:none; opacity:.2; }
body.picking-member-place .permission-card { display:none !important; }
.member-pick-cancel { position:absolute; z-index:521; top:64px; left:50%; transform:translateX(-50%); min-height:38px; padding:0 14px; border:0; border-radius:10px; background:white; color:var(--ink); box-shadow:var(--small-shadow); font-weight:700; cursor:pointer; }
@media (max-width:760px) { .manual-tip { top:8px; width:max-content; max-width:calc(100% - 24px); text-align:center; } .member-pick-cancel { top:56px; } }
.mobile-filters-toggle { display:none; }
@media (max-width:760px) {
  .topbar { min-height:calc(72px + env(safe-area-inset-top)); height:auto; padding-block:calc(env(safe-area-inset-top) + 10px) 10px; align-items:center; }
  .topbar-actions { min-width:0; max-width:100%; }
  .topbar-actions > button { min-width:38px; min-height:40px; justify-content:center; }
  .account-avatar { flex:none; }
  .brand > span:last-child { text-overflow:ellipsis; }
  .search-surface { min-width:0; }
  .search-form { grid-template-columns:22px minmax(0,1fr) 40px auto; gap:6px; }
  .search-form .mobile-filters-toggle { display:inline-grid; place-items:center; width:40px; height:40px; min-width:0; padding:0; background:#e8f0ff; color:var(--blue); font-size:1.2rem; }
  .mobile-search-filters { display:none; }
  .mobile-search-filters.is-open { display:block; }
  .category-scroll { max-width:100%; }
  .category-scroll { padding-top:7px; padding-bottom:4px; }
  .community-tab { min-height:38px; }
  .location-line { gap:4px 6px; }
  .location-actions { gap:3px; }
  .conditions-panel { margin-top:5px; padding-top:5px; }
}
@media (max-width:350px) {
  .topbar { padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right)); }
  .topbar-actions { gap:4px; }
  .topbar-actions > button { min-width:36px; min-height:38px; }
  .search-form { grid-template-columns:18px minmax(0,1fr) 36px auto; gap:4px; padding-left:8px; }
  .search-form .mobile-filters-toggle { width:36px; height:38px; }
}

/* Keep the header spacious for its controls without consuming the phone viewport. */
@media (max-width:760px) {
  .topbar { min-height:calc(86px + env(safe-area-inset-top)); padding-block:calc(env(safe-area-inset-top) + 32px) 10px; gap:8px; }
  .brand { font-size:clamp(.88rem, 4.5vw, 1.08rem); letter-spacing:-.02em; gap:8px; }
  .brand-mark { width:32px; height:32px; }
  .topbar-actions { gap:5px; }
  .topbar-actions > button { min-width:40px; min-height:42px; }
  .workspace { min-height:calc(100svh - 86px - env(safe-area-inset-top)); }
}
@media (max-width:350px) {
  .brand { font-size:clamp(.82rem, 4vw, .9rem); gap:5px; }
  .brand-mark { width:29px; height:29px; }
  .topbar-actions { gap:3px; }
  .topbar-actions > button { min-width:38px; min-height:40px; }
}
/* Home-screen apps can draw under the phone status area. Reserve room even when
   Safari reports a zero safe-area inset in standalone mode. */
@media (max-width:760px) and (display-mode:standalone) {
  .topbar { min-height:0; padding-top:max(52px, calc(env(safe-area-inset-top) + 36px)); padding-bottom:10px; }
  .workspace { min-height:0; }
  .topbar .install-mini { display:none; }
}
@media (max-width:390px) {
  .topbar .install-mini { display:none; }
  .topbar-actions .language-toggle { min-width:46px; padding-inline:4px; }
}
.nearby-members-panel { min-width:0; margin:9px 0; padding:8px 10px; border:1px solid #d8e6f4; border-radius:12px; background:#f8fbff; }
.nearby-members-panel summary { cursor:pointer; font-weight:750; color:#173b63; }
.nearby-members-help { margin:9px 0; color:var(--muted); font-size:.78rem; line-height:1.4; }
#nearby-members-list { overflow-wrap:anywhere; font-size:.85rem; }
.nearby-member-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 2px; border-bottom:1px solid #e5edf6; }
.nearby-member-row > span { white-space:nowrap; color:#34668b; font-weight:700; }
#nearby-members-refresh { display:inline-flex; align-items:center; gap:7px; margin-top:9px; min-height:34px; }
.nearby-members-status { margin:8px 0 0; font-size:.78rem; line-height:1.45; color:#34668b; overflow-wrap:anywhere; }
.nearby-members-status.is-error { color:#a32b28; }
.nearby-members-status time { white-space:nowrap; font-variant-numeric:tabular-nums; }
.nearby-refresh-spinner { display:none; width:13px; height:13px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; }
.is-refreshing .nearby-refresh-spinner { display:inline-block; animation:nearby-refresh-spin .75s linear infinite; }
#nearby-members-refresh:disabled { cursor:wait; opacity:.75; }
@keyframes nearby-refresh-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .is-refreshing .nearby-refresh-spinner { animation:none; } }
.nearby-consent-dialog { max-width:min(430px,calc(100% - 24px)); }
.nearby-consent-dialog p { line-height:1.5; font-size:.88rem; }
.nearby-consent-dialog .privacy-choice { display:flex; align-items:flex-start; gap:9px; margin:13px 0; font-weight:700; }
.nearby-consent-dialog .privacy-choice input { flex:none; margin-top:4px; }
.nearby-consent-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.member-attribution { margin:4px 0 8px; color:var(--muted); font-size:.78rem; }
.profile-link { display:inline; min-height:32px; padding:3px 2px; border:0; background:none; color:var(--blue-dark); font:inherit; font-weight:750; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.member-profile-dialog { width:min(840px,calc(100% - 24px)); max-height:min(90dvh,860px); overflow:auto; overscroll-behavior:contain; padding:22px; border:0; border-radius:20px; background:white; color:var(--ink); box-shadow:var(--shadow); }
.member-profile-dialog::backdrop { background:rgba(7,24,43,.55); }
.member-profile-dialog h2 { margin:0; font-size:clamp(1.1rem,4vw,1.4rem); overflow-wrap:anywhere; }
.member-profile-note { margin:10px 0 14px; color:var(--muted); font-size:.85rem; line-height:1.4; }
.profile-header { align-items:flex-start; }
.member-profile-avatar { display:grid; flex:none; place-items:center; width:46px; height:46px; border-radius:15px; background:var(--blue); color:white; font-size:1.2rem; font-weight:800; }
.member-profile-avatar.has-giphy { position:relative; overflow:hidden; background:#edf4fb; }
.member-profile-avatar iframe { position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; }
.profile-header .member-profile-avatar.has-giphy { width:72px; height:72px; }
.giphy-avatar-settings { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.giphy-avatar-settings .member-profile-avatar { width:80px; height:80px; }
.giphy-dialog { max-width:580px; }
.giphy-dialog input,.giphy-dialog select { min-width:0; max-width:100%; }
.giphy-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:15px 0; }
.giphy-choice { padding:0; height:110px; overflow:hidden; border:1px solid #dae5f1; border-radius:10px; background:#edf4fb; cursor:pointer; }
.giphy-choice img { width:100%; height:100%; object-fit:contain; }
.giphy-choice:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.giphy-attribution { display:block; width:fit-content; margin-top:12px; color:#28445e; font-size:.875rem; font-weight:500; text-align:left; }
@media(max-width:360px) { .giphy-results { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.profile-header > div { min-width:0; flex:1; }
.profile-tabs { display:flex; gap:7px; overflow-x:auto; max-width:100%; margin:18px 0; padding:0 0 5px; scrollbar-width:thin; }
.profile-tabs button { flex:none; min-height:42px; padding:8px 12px; border:1px solid var(--line); border-radius:11px; background:#f5f9ff; color:var(--blue-dark); font-size:.82rem; font-weight:750; cursor:pointer; }
.profile-tabs button[aria-current="page"] { border-color:var(--blue); background:var(--blue); color:white; }
.profile-section-title { margin:4px 0 13px; font-size:1.04rem; }
.profile-place-card { min-width:0; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#f8fbff; }
.public-profile-list .profile-place-card > button { border:0; border-radius:0; background:transparent; }
.profile-item-actions, .profile-edit-actions { display:flex; gap:7px; flex-wrap:wrap; padding:8px 11px; border-top:1px solid var(--line); }
.profile-item-actions button, .profile-edit-actions button:not(.primary-button), .profile-comment-card > button { min-height:38px; padding:7px 11px; border:1px solid #d4dfeb; border-radius:9px; background:white; color:var(--blue-dark); font-size:.82rem; font-weight:700; cursor:pointer; }
.profile-comment-list { display:grid; gap:9px; }
.profile-comment-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fbff; overflow-wrap:anywhere; }
.profile-comment-card p { margin:8px 0; white-space:pre-wrap; font-size:.9rem; line-height:1.45; }
.profile-comment-card small { display:block; margin:5px 0; color:var(--muted); }
.profile-more { margin:12px 0; }
.profile-edit-form { display:grid; gap:12px; }
.profile-edit-form > label { display:grid; gap:5px; font-size:.85rem; font-weight:700; }
.profile-edit-form input:not([type="checkbox"]), .profile-edit-form textarea { width:100%; min-width:0; padding:10px; border:1px solid #cbd9e8; border-radius:10px; background:white; color:var(--ink); font-size:16px; }
.profile-edit-form .privacy-choice { display:flex; }
.profile-coordinate-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.profile-coordinate-fields label { display:grid; min-width:0; gap:4px; }
.profile-edit-actions { padding:10px 0 0; border-top:0; }
.profile-edit-actions .primary-button { min-height:42px; }
@media (max-width:760px) {
  .member-profile-dialog { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:16px 14px max(18px,env(safe-area-inset-bottom)); border-radius:0; }
  .profile-coordinate-fields { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) and (display-mode:standalone) {
  .member-profile-dialog { padding-top:max(52px,calc(env(safe-area-inset-top) + 12px)); }
}
.public-profile-section { margin:0 0 18px; border-top:1px solid var(--line); padding-top:14px; }
.public-profile-section h3 { margin:0 0 8px; font-size:.96rem; }
.public-profile-list { display:grid; gap:7px; }
.public-profile-list button { display:grid; gap:4px; min-width:0; width:100%; padding:11px 12px; text-align:left; border:1px solid var(--line); border-radius:11px; background:#f8fbff; cursor:pointer; overflow-wrap:anywhere; }
.public-profile-list button span { color:var(--muted); font-size:.8rem; }
.privacy-choice { display:flex; gap:10px; align-items:center; min-height:44px; padding:8px 0; font-size:.88rem; cursor:pointer; }
.privacy-choice input { flex:none; width:18px; height:18px; accent-color:var(--blue); }

/* Let the location permission card set the map row's height on phones. */
@media (max-width:760px) {
  .workspace:has(.permission-card:not(.is-hidden)) { grid-template-rows:auto auto auto; }
  .map-wrap:has(.permission-card:not(.is-hidden)) {
    display:flex;
    justify-content:center;
    align-items:flex-start;
    height:auto;
    min-height:max(290px,41svh);
    padding:14px 12px 20px;
  }
  .map-wrap .permission-card {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:min(390px,100%);
    max-width:100%;
    min-width:0;
    margin:0;
    padding:clamp(15px,4vw,21px);
    overflow-wrap:anywhere;
  }
  .map-wrap .permission-card h1 { font-size:clamp(1.25rem,5vw,1.45rem); }
  .map-wrap .permission-card .text-button { min-height:44px; margin-top:5px; }
}

/* Screen-only location concealment, including the map's surrounding streets. */
.location-hidden-message, .location-map-cover { display:none; }
.location-screen-hidden #my-location-address,
.location-screen-hidden .coordinate-pair,
.location-screen-hidden .location-update,
.location-screen-hidden #coordinate-accuracy,
.location-screen-hidden #copy-my-coordinates,
.location-screen-hidden #location-label,
.location-screen-hidden #conditions-place,
.location-screen-hidden #navigation-instruction { display:none !important; }
.location-screen-hidden .location-hidden-message { display:block; color:var(--muted); }
.location-screen-hidden #map { visibility:hidden; pointer-events:none; }
.location-map-cover { position:absolute; inset:0; z-index:2; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:20px; background:#eaf1f7; text-align:center; color:var(--ink); }
.location-map-cover span { max-width:300px; color:var(--muted); font-size:.85rem; }
.location-screen-hidden .location-map-cover { display:flex; }
.location-screen-hidden #search-city.auto-location-city { color:transparent; caret-color:var(--ink); }
.location-line { flex-wrap:wrap; }
.location-actions { flex-wrap:wrap; }
.place-phone-disclosure { width:100%; min-width:0; }
.place-phone-disclosure > summary { width:fit-content; display:flex; gap:6px; align-items:center; min-height:40px; padding:4px 10px; border:1px solid #abc6e9; border-radius:10px; background:#f4f9ff; color:var(--blue-dark); font-size:.82rem; font-weight:750; cursor:pointer; list-style:none; }
.place-phone-disclosure > summary::-webkit-details-marker { display:none; }
.place-phone-disclosure > summary:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.place-phone-disclosure .phone-hide { display:none; }
.place-phone-disclosure[open] .phone-show { display:none; }
.place-phone-disclosure[open] .phone-hide { display:inline; }
.place-phone-content { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.place-phone-disclosure:not([open]) > .place-phone-content { display:none; }

.location-map-cover button { min-height:44px; padding:8px 18px; border:1px solid #abc6e9; border-radius:10px; background:white; color:var(--blue-dark); font:inherit; font-weight:750; cursor:pointer; }

/* Small, finite motion: preserve the map's own positioning and touch gestures. */
@keyframes konumum-reveal {
  from { opacity: 0; translate: 0 7px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes konumum-dialog {
  from { opacity: 0; scale: .975; }
  to { opacity: 1; scale: 1; }
}
@keyframes konumum-favorite {
  50% { scale: 1.07; }
}
@keyframes konumum-pin {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .topbar { animation: konumum-reveal 260ms ease-out; }
  .permission-card, .search-surface { animation: konumum-reveal 320ms ease-out; }
  .permission-icon svg { animation: konumum-pin 850ms ease-in-out 2; }
  .result-card:nth-child(-n+10), .trending-card, .member-directory-card,
  .profile-place-card, .shared-location-card:not(.is-hidden), .my-coordinates:not(.is-hidden) {
    animation: konumum-reveal 280ms ease-out backwards;
  }
  .result-card:nth-child(2) { animation-delay: 35ms; }
  .result-card:nth-child(3) { animation-delay: 70ms; }
  .result-card:nth-child(4) { animation-delay: 105ms; }
  .result-card:nth-child(n+5):nth-child(-n+10) { animation-delay: 140ms; }
  dialog[open] { animation: konumum-dialog 200ms ease-out; }
  dialog[open]::backdrop { animation: konumum-backdrop 180ms ease-out; }
  .favorite-button.selected { animation: konumum-favorite 240ms ease-out; }
  .primary-button, .secondary-button, .category-chip, .community-tab,
  .map-action, .account-button, .install-mini, .notice-button, .result-actions button {
    transition: translate 150ms ease, scale 150ms ease, background-color 180ms ease,
      border-color 180ms ease, box-shadow 180ms ease;
  }
  :is(.primary-button, .secondary-button, .category-chip, .map-action,
      .account-button, .install-mini, .notice-button, .result-actions button):active:not(:disabled) {
    scale: .97;
  }
  .result-card { transition: border-color 180ms ease, box-shadow 180ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .primary-button:hover:not(:disabled), .category-chip:hover:not(:disabled),
    .map-action:hover:not(:disabled), .account-button:hover:not(:disabled) { translate: 0 -2px; }
    .result-card:hover { box-shadow: 0 7px 20px rgba(13, 91, 215, .09); }
  }
}
@keyframes konumum-backdrop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Discovery edition: a quiet, finite route animation and a more tactile interface. */
:root { --ink:#142b45; --blue:#1265df; --blue-dark:#084faf; --canvas:#f1f5fa; --line:#e1e8f1; }
.topbar { box-shadow:0 3px 22px #142b4508; }
.brand { letter-spacing:-.045em; }
.brand-mark { background:linear-gradient(145deg,#1678f2,#0648af); box-shadow:0 4px 12px #1265df26,inset 0 1px 1px #ffffff55; }
.search-surface { background:linear-gradient(160deg,#fff,#f5f9ff); }
.search-form { border-color:#c9d9ed; box-shadow:0 4px 16px #1d497909; }
.search-form:focus-within { border-color:#1265df; box-shadow:0 0 0 4px #1265df12; }
.category-chip { box-shadow:0 2px 5px #203e5b05; }
.category-chip.active { box-shadow:0 4px 12px #1265df20; }
.result-card { border-radius:19px; box-shadow:0 3px 12px #183f6806; }
.map-action { box-shadow:0 5px 18px #122b4520; }
.permission-card {
  width:min(450px,calc(100% - 42px)); padding:26px 30px 22px;
  color:#fff; background:radial-gradient(ellipse at 90% 0%,#145279 0%,transparent 60%),linear-gradient(145deg,#112e4a,#091b31);
  border:1px solid #ffffff42; border-radius:28px;
  box-shadow:0 26px 75px #081d4c38,inset 0 1px 0 #ffffff22;
  backdrop-filter:none;
}
.permission-card .eyebrow { color:#80e6d3; font-size:.67rem; letter-spacing:.12em; margin-bottom:10px; }
.permission-card h1 { font-size:clamp(1.85rem,3.2vw,2.35rem); line-height:1.08; letter-spacing:-.055em; text-wrap:balance; }
.permission-card p:not(.eyebrow) { color:#c6d6e6; font-size:.87rem; line-height:1.65; margin:14px auto 21px; }
.permission-card .primary-button { min-height:52px; color:#082d39; background:linear-gradient(115deg,#8aefdb,#4ddac9); box-shadow:0 7px 22px #50ddca22,inset 0 1px 0 #ffffff80; border:1px solid #b8fff044; }
.permission-card .primary-button:hover { background:#a0f6e4; box-shadow:0 8px 26px #50ddca38; }
.permission-card .text-button { color:#d2e2f1; font-size:.8rem; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#809bb5; }
.permission-card :is(button,a):focus-visible { outline-color:#8aefdb; }
.discovery-scene { height:126px; position:relative; margin:-5px 0 15px; isolation:isolate; }
.discovery-route { width:100%; height:100%; position:absolute; inset:0; overflow:visible; }
.discovery-route ellipse { stroke:#74d7d4; stroke-opacity:.15; stroke-width:1; }
.discovery-route .discovery-street { stroke:#b0d5ee; stroke-opacity:.09; stroke-width:1; }
.discovery-route .discovery-trail { stroke:#71e8d2; stroke-width:2; stroke-linecap:round; stroke-dasharray:300; stroke-dashoffset:0; }
.discovery-scene .permission-icon { position:absolute; left:50%; top:25px; margin:0; transform:translateX(-50%) rotate(-8deg); width:64px; height:64px; border-radius:22px; background:linear-gradient(145deg,#368bfa,#1252bf); border:1px solid #ffffff55; box-shadow:0 14px 26px #0003,inset 0 1px 1px #ffffff45; }
.discovery-scene .permission-icon svg { width:33px; }
.discovery-place { position:absolute; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; background:#173f5c; border:1px solid #a2d5ee33; box-shadow:0 6px 14px #0002; font-size:17px; }
.discovery-place-a { left:12%; top:65px; transform:rotate(-9deg); }
.discovery-place-b { right:15%; top:13px; transform:rotate(9deg); }
.discovery-place-c { right:17%; top:84px; transform:rotate(-5deg); }
.discovery-point { position:absolute; width:8px; height:8px; border-radius:50%; left:76%; top:69px; background:#8aefdb; box-shadow:0 0 0 5px #8aefdb16; }
@keyframes discovery-draw { from { stroke-dashoffset:300; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes discovery-pop { from { opacity:0; translate:0 10px; scale:.85; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes discovery-halo { 0% { box-shadow:0 0 0 0 #8aefdb55; } 100% { box-shadow:0 0 0 18px #8aefdb00; } }
@media (prefers-reduced-motion:no-preference) {
  .permission-card { animation:konumum-reveal .55s cubic-bezier(.2,.8,.2,1) both; }
  .discovery-trail { animation:discovery-draw 1.5s .2s ease-out both; }
  .discovery-place { animation:discovery-pop .6s cubic-bezier(.2,.8,.2,1) both; }
  .discovery-place-a { animation-delay:.25s; } .discovery-place-b { animation-delay:.45s; } .discovery-place-c { animation-delay:.65s; }
  .discovery-point { animation:discovery-halo 1.5s 1s 2; }
  .permission-card > div:not(.discovery-scene), .permission-card > button { animation:konumum-reveal .5s .15s ease-out backwards; }
  .permission-card > .primary-button { animation-delay:.3s; }
  .category-chip span { display:inline-block; transition:transform .2s ease; }
  @media (hover:hover) and (pointer:fine) { .category-chip:hover span { transform:translateY(-2px) rotate(-6deg); } }
}
@media (max-width:760px) {
  .map-wrap .permission-card { width:min(420px,100%); padding:18px 22px 12px; border-radius:24px; }
  .map-wrap .permission-card h1 { font-size:clamp(1.65rem,6.8vw,2.1rem); }
  .discovery-scene { height:96px; margin:-6px 0 10px; }
  .discovery-scene .permission-icon { width:52px; height:52px; top:18px; border-radius:18px; }
  .discovery-scene .permission-icon svg { width:28px; }
  .discovery-place { width:29px; height:29px; font-size:15px; border-radius:10px; }
  .discovery-place-a { top:48px; } .discovery-place-b { top:5px; } .discovery-place-c { top:65px; }
  .discovery-point { top:52px; }
  .permission-card p:not(.eyebrow) { font-size:.81rem; margin:10px auto 15px; line-height:1.5; }
  .permission-card .eyebrow { font-size:.6rem; margin-bottom:7px; }
  .permission-card .primary-button { min-height:48px; }
}