:root {
  --ink: #17261d;
  --ink-soft: #3e4c43;
  --paper: #fffdf7;
  --card: #ffffff;
  --accent: #ffd75e;
  --accent-strong: #efb900;
  --mint: #e8f6ec;
  --line: #dfe7e1;
  --danger: #c34040;
  --good: #208554;
  --shadow: 0 18px 50px rgba(25, 44, 32, 0.18);
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
#map { position: fixed; inset: 0; z-index: 0; background: #e9eee8; }
.leaflet-control-zoom { margin-top: 92px !important; }
.leaflet-popup-content-wrapper { border-radius: 18px; }
.topbar {
  position: fixed; z-index: 1000; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px;
  display: grid; grid-template-columns: auto minmax(180px, 620px) auto; gap: 10px; align-items: center; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.brand, .account-button, .search-wrap {
  background: rgba(255,255,255,.96); border: 1px solid rgba(23,38,29,.08); box-shadow: 0 8px 30px rgba(25,44,32,.12);
}
.brand { border-radius: 999px; padding: 10px 14px 10px 10px; display: flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); font-weight: 900; }
.account-button { border-radius: 999px; padding: 12px 16px; color: var(--ink); font-weight: 750; }
.search-wrap { position: relative; display: grid; grid-template-columns: 1fr 44px; border-radius: 999px; }
.search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 10px 12px 18px; color: var(--ink); }
.icon-button { border: 0; background: transparent; font-size: 24px; color: var(--ink); }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: white; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; max-height: 45vh; overflow-y: auto; }
.search-result { width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); }
.search-result:hover { background: #f7faf7; }
.search-result:last-child { border-bottom: 0; }
.category-bar {
  position: fixed; z-index: 900; left: 50%; transform: translateX(-50%); bottom: max(88px, calc(72px + env(safe-area-inset-bottom)));
  max-width: calc(100vw - 24px); display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 18px;
  background: rgba(255,255,255,.94); box-shadow: 0 8px 30px rgba(25,44,32,.12); scrollbar-width: none;
}
.category-bar::-webkit-scrollbar { display: none; }
.chip { border: 1px solid var(--line); background: white; color: var(--ink-soft); border-radius: 999px; padding: 8px 12px; white-space: nowrap; font-weight: 650; }
.chip.active { background: var(--ink); color: white; border-color: var(--ink); }
.fab {
  position: fixed; z-index: 950; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom));
  border: 0; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 850; padding: 14px 20px;
  box-shadow: 0 12px 34px rgba(90,70,0,.25);
}
.fab span { font-size: 20px; vertical-align: -1px; }
.map-controls { position: fixed; right: 14px; bottom: max(150px, calc(130px + env(safe-area-inset-bottom))); z-index: 850; display: flex; flex-direction: column; gap: 8px; }
.round-button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.96); color: var(--ink); font-size: 20px; box-shadow: 0 8px 24px rgba(25,44,32,.13); }
.pick-banner {
  position: fixed; z-index: 1200; top: 86px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: white; border-radius: 999px; padding: 10px 12px 10px 16px; box-shadow: var(--shadow);
}
.pick-banner button { border: 0; border-radius: 999px; padding: 7px 10px; background: var(--accent); font-weight: 800; }
.sheet {
  position: fixed; z-index: 1600; right: 12px; top: max(12px, env(safe-area-inset-top)); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(470px, calc(100vw - 24px)); background: var(--paper); border: 1px solid rgba(23,38,29,.08); border-radius: 26px;
  box-shadow: var(--shadow); padding: 24px; overflow-y: auto;
}
.sheet-close { position: sticky; float: right; top: 0; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f0f3f0; color: var(--ink); font-size: 24px; line-height: 1; }
.sheet-head { padding-right: 42px; margin-bottom: 18px; }
.sheet-head h2 { margin: 4px 0 6px; font-size: 28px; line-height: 1.05; }
.sheet-head p { margin: 0; color: var(--ink-soft); }
.eyebrow { font-size: 12px; letter-spacing: .12em; font-weight: 900; color: #6d776f; }
.form-stack { display: grid; gap: 14px; }
.form-stack label { display: grid; gap: 7px; font-weight: 750; }
.form-stack input, .form-stack textarea, .form-stack select { width: 100%; border: 1px solid #cfd8d1; border-radius: 14px; background: white; color: var(--ink); padding: 12px 13px; outline: 0; }
.form-stack input:focus, .form-stack textarea:focus, .form-stack select:focus { border-color: #829a88; box-shadow: 0 0 0 3px rgba(65,123,82,.10); }
.form-stack textarea { resize: vertical; }
.form-stack small { color: var(--ink-soft); font-weight: 500; }
.primary-button, .secondary-button, .danger-button { border-radius: 14px; padding: 12px 14px; font-weight: 850; }
.primary-button { border: 0; background: var(--ink); color: white; }
.secondary-button { border: 1px solid var(--line); background: white; color: var(--ink); }
.danger-button { border: 1px solid #f0c2c2; background: #fff5f5; color: var(--danger); }
.legal-note { background: #fff4c9; border-radius: 14px; padding: 11px 12px; color: #5c4b0b; font-size: 13px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #eef2ee; padding: 5px; border-radius: 14px; margin-bottom: 18px; }
.tab { border: 0; border-radius: 10px; padding: 9px; background: transparent; font-weight: 800; color: var(--ink-soft); }
.tab.active { background: white; color: var(--ink); box-shadow: 0 2px 8px rgba(25,44,32,.08); }
.tip-title { margin: 3px 0 6px; font-size: 28px; line-height: 1.07; }
.tip-place { color: var(--ink-soft); margin: 0 0 14px; }
.tip-body { font-size: 16px; line-height: 1.55; white-space: pre-wrap; }
.tip-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
.badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 7px 10px; background: var(--mint); color: #205f39; font-weight: 750; font-size: 13px; }
.author-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 14px; margin: 16px 0; }
.author-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.author-name { font-weight: 900; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.stat { background: #f7f9f7; border-radius: 12px; padding: 9px; text-align: center; }
.stat strong { display: block; font-size: 18px; }
.stat span { display: block; font-size: 11px; color: var(--ink-soft); }
.review-box { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; }
.review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.vote-button { border: 1px solid var(--line); background: white; border-radius: 13px; padding: 11px; font-weight: 850; }
.vote-button.selected-good { border-color: #96d4b2; background: #edf9f1; color: var(--good); }
.vote-button.selected-bad { border-color: #e7aaaa; background: #fff0f0; color: var(--danger); }
.review-item { border-bottom: 1px solid var(--line); padding: 13px 0; }
.review-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.review-user { font-weight: 850; }
.review-date { color: #78817b; font-size: 12px; }
.review-comment { margin: 6px 0 0; line-height: 1.45; }
.empty-state { padding: 18px; border-radius: 16px; background: #f4f7f4; color: var(--ink-soft); text-align: center; }
.profile-hero { padding-right: 42px; margin-bottom: 18px; }
.profile-hero h2 { margin: 3px 0; font-size: 28px; }
.profile-tip { border: 1px solid var(--line); background: white; border-radius: 14px; padding: 12px; margin-top: 9px; cursor: pointer; }
.profile-tip strong { display: block; }
.profile-tip small { color: var(--ink-soft); }
.toast { position: fixed; z-index: 3000; left: 50%; bottom: max(92px, calc(74px + env(safe-area-inset-bottom))); transform: translateX(-50%); max-width: min(92vw, 520px); background: var(--ink); color: white; border-radius: 999px; padding: 11px 16px; box-shadow: var(--shadow); text-align: center; }
.marker-tip { width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 3px solid white; background: var(--accent); box-shadow: 0 3px 10px rgba(23,38,29,.3); }
.marker-tip::after { content: '↯'; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(45deg); font-weight: 900; color: var(--ink); font-size: 11px; }
.map-legal { position:fixed; left:10px; bottom:8px; z-index:700; background:rgba(255,255,255,.94); border:1px solid #d8e0da; border-radius:12px; padding:6px 9px; font:11px/1.3 system-ui,sans-serif; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.welcome-screen { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; overflow: auto; background: linear-gradient(145deg,#fffdf6 0%,#f8f5df 46%,#e8f4e8 100%); transition: opacity .25s ease, transform .25s ease; }
.welcome-screen.welcome-leaving { opacity: 0; transform: scale(1.015); pointer-events: none; }
.welcome-glow { position:absolute; border-radius:50%; filter:blur(12px); opacity:.55; pointer-events:none; }
.welcome-glow-one { width:360px; height:360px; background:#ffe36e; top:-150px; right:-100px; }
.welcome-glow-two { width:420px; height:420px; background:#9ed9ad; bottom:-220px; left:-150px; }
.welcome-card { position:relative; z-index:1; width:min(760px,100%); text-align:center; background:rgba(255,255,255,.78); border:1px solid rgba(15,107,69,.12); border-radius:36px; padding:clamp(28px,5vw,58px); box-shadow:0 28px 80px rgba(31,79,51,.15); backdrop-filter:blur(14px); }
.welcome-logo { display:inline-flex; align-items:center; justify-content:center; gap:0; font-size:clamp(46px,9vw,86px); line-height:.9; font-weight:950; letter-spacing:-.075em; margin-bottom:22px; }
.welcome-logo span:first-child { color:#11834f; }
.welcome-logo span:last-child { color:#e9b800; }
.welcome-kicker { margin:0 0 12px; font-size:12px; letter-spacing:.18em; font-weight:900; color:#41765a; }
.welcome-card h1 { margin:0 auto; max-width:650px; font-size:clamp(34px,6vw,62px); line-height:1.01; letter-spacing:-.045em; }
.welcome-copy { max-width:610px; margin:20px auto 0; font-size:clamp(16px,2vw,19px); line-height:1.55; color:#52645a; }
.welcome-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }
.welcome-primary,.welcome-secondary { min-width:210px; border-radius:999px; padding:15px 22px; font-weight:900; border:0; }
.welcome-primary { background:#137849; color:white; box-shadow:0 12px 28px rgba(19,120,73,.2); }
.welcome-secondary { background:white; color:#173f2b; border:1px solid #d7e5dc; }
.welcome-pills { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:26px; }
.welcome-pills span { background:#fff; border:1px solid #dce7df; border-radius:999px; padding:8px 11px; font-size:12px; font-weight:750; }
.welcome-legal { margin-top:26px; display:flex; gap:9px; justify-content:center; font-size:12px; color:#6a786f; }
.welcome-legal a { color:#416d55; }
@media (max-width: 760px) {
  .topbar { grid-template-columns: 1fr auto; }
  .brand { grid-column: 1; width: fit-content; }
  .brand > span:last-child { display: none; }
  .search-wrap { grid-row: 2; grid-column: 1 / -1; }
  .account-button { grid-column: 2; grid-row: 1; }
  .leaflet-control-zoom { margin-top: 138px !important; }
  .sheet { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 88vh; border-radius: 26px 26px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .category-bar { bottom: max(82px, calc(70px + env(safe-area-inset-bottom))); }
  .map-controls { bottom: max(148px, calc(132px + env(safe-area-inset-bottom))); }
  .welcome-screen { padding:14px; }
  .welcome-card { border-radius:28px; padding:32px 20px 26px; }
  .welcome-actions { display:grid; }
  .welcome-primary,.welcome-secondary { width:100%; min-width:0; }
}