:root {
  --paper: #f4f0e7;
  --ink: #173b35;
  --muted: #708078;
  --line: #d6d6c9;
  --mint: #dce9df;
  --mint-deep: #9fbda8;
  --coral: #e9785e;
  --white: #fbfaf5;
  font-family: "Avenir Next", "PingFang SC", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 560px); margin: 0 auto; padding: 22px 18px 30px; }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.eyebrow { margin:0 0 7px; color:var(--muted); font-size:10px; letter-spacing:.17em; font-weight:800; }
h1, h2, p { margin:0; }
h1 { font-family: Georgia, serif; font-size:35px; line-height:1; letter-spacing:-.04em; }
h1 span { color:var(--coral); }
h2 { font-size:19px; letter-spacing:-.02em; }
.icon-btn { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:24px; line-height:1; }
.map-card { overflow:hidden; border:1px solid #ccd6cc; border-radius:18px; background:var(--mint); box-shadow:0 12px 30px rgba(39,75,61,.08); }
.map-toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 15px 11px; font-size:12px; }
.map-toolbar > div { display:flex; align-items:center; gap:7px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#5c9a73; box-shadow:0 0 0 4px rgba(92,154,115,.15); }
.locate-btn { border:0; background:transparent; color:var(--ink); font-size:11px; font-weight:700; padding:5px 0; }
.map-container { height:280px; border-radius:0; overflow:hidden; }
.map-note { padding:10px 15px 13px; color:#557062; font-size:11px; }
.control-panel { padding:27px 2px 0; }
.section-heading, .results-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.section-heading output { font-family:Georgia,serif; font-size:25px; font-weight:700; }
input[type="range"] { width:100%; margin:22px 0 5px; accent-color:var(--coral); }
.range-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; }
.preference-heading { align-items:flex-end; margin-top:27px; }
.muted { color:var(--muted); font-size:11px; }
.preference-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:13px; }
.preference { display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 5px 10px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink); font-size:11px; transition:.2s ease; }
.preference .pref-icon { font-size:19px; line-height:1; color:#668e79; }
.preference.active { border-color:var(--ink); background:var(--ink); color:var(--white); transform:translateY(-2px); box-shadow:0 7px 14px rgba(23,59,53,.16); }
.preference.active .pref-icon { color:#f5bc84; }
.draw-btn { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding:16px 17px; border:0; border-radius:12px; background:var(--coral); color:white; font-size:14px; font-weight:800; box-shadow:0 10px 18px rgba(233,120,94,.22); transition:.2s ease; }
.draw-btn:hover { transform:translateY(-2px); box-shadow:0 13px 23px rgba(233,120,94,.3); }
.draw-btn b { font-size:22px; font-weight:400; }
.results-section { padding-top:31px; }
.results-heading { align-items:center; }
.refresh-btn { border:0; background:transparent; color:var(--coral); font-size:12px; font-weight:800; padding:8px 0; }
.results-list { display:grid; gap:10px; margin-top:14px; }
.result-card { display:grid; grid-template-columns:42px 1fr auto; gap:11px; align-items:center; padding:13px 12px; border:1px solid var(--line); border-radius:14px; background:rgba(251,250,245,.62); animation:rise .4s both; }
.result-index { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--mint); color:#557764; font-family:Georgia,serif; font-size:16px; font-weight:700; }
.result-name { font-size:14px; font-weight:800; line-height:1.2; }
.result-area { margin-top:4px; color:var(--muted); font-size:10px; }
.result-meta { display:flex; align-items:center; gap:7px; margin-top:8px; color:#557062; font-size:10px; }
.result-tag { padding:3px 6px; border-radius:5px; background:#e9eee6; color:#587563; }
.nav-btn { display:grid; place-items:center; width:34px; height:34px; border:1px solid #d8b2a6; border-radius:50%; background:#fff9f5; color:var(--coral); font-size:19px; }
footer { display:flex; justify-content:space-between; padding:28px 2px 0; color:#a0a39a; font-size:10px; }
.toast { position:fixed; left:50%; bottom:24px; z-index:5; transform:translate(-50%, 20px); padding:11px 15px; border-radius:9px; background:var(--ink); color:white; font-size:12px; opacity:0; transition:.25s ease; pointer-events:none; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.nav-sheet { position:fixed; inset:0; z-index:4; display:grid; align-items:end; background:rgba(23,59,53,.3); }
.sheet-box { padding:24px 18px 28px; border-radius:22px 22px 0 0; background:var(--paper); box-shadow:0 -8px 30px rgba(23,59,53,.16); }
.sheet-box h3 { margin:0; font-family:Georgia,serif; font-size:24px; }
.sheet-box p:not(.eyebrow) { margin:7px 0 16px; color:var(--muted); font-size:12px; }
.sheet-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sheet-link, .sheet-close { display:grid; place-items:center; min-height:45px; border:1px solid var(--line); border-radius:10px; background:var(--white); color:var(--ink); text-decoration:none; font-size:12px; font-weight:800; }
.sheet-link:first-child { border-color:#d8b2a6; background:#fff8f5; color:var(--coral); }
.sheet-close { width:100%; margin-top:10px; border:0; background:transparent; color:var(--muted); }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (min-width: 700px) { body { padding:22px 0; } .app-shell { padding-bottom:40px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }