:root {
  --bg: #FBF6EC; --surface: #fff; --primary: #0E7C86; --accent: #E2713F; --ok: #5E8B45;
  --text: #1F2A2E; --muted: #5d696c; --track: #E8E2D2; --radius: 22px;
  --font-scale: 1;
}
html { font-size: calc(16px * var(--font-scale)); }
html.contrast { --bg: #000; --surface: #000; --text: #fff; --muted: #fff; --primary: #ffe600; --accent: #ffe600; --track: #444; }
* { box-sizing: border-box; }
body { margin: 0; font-family: Heebo, system-ui, sans-serif; background: var(--bg); color: var(--text); padding-bottom: 5.5rem; }
h1, .logo { font-family: Rubik, sans-serif; }
main { max-width: 760px; margin: 0 auto; padding: 0 1rem; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .9rem 1rem .4rem; max-width: 760px; margin: 0 auto; }
.logo { font-weight: 800; font-size: 1.4rem; color: var(--primary); text-decoration: none; direction: ltr; }
.logo b { color: var(--accent); }
.top .logo { grid-column: 2; }
.tools { grid-column: 3; justify-self: end; display: flex; gap: .5rem; }
.chip-btn { min-width: 2.75rem; min-height: 2.75rem; border-radius: 999px; background: var(--surface); border: 1px solid rgba(0,0,0,.12); display: inline-grid; place-items: center; font: 700 1rem Heebo, sans-serif; color: var(--text); text-decoration: none; cursor: pointer; }
.a11y-panel { max-width: 760px; margin: .25rem auto; padding: .5rem 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.a11y-panel[hidden] { display: none; }
.a11y-panel button { min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--primary); background: var(--surface); color: var(--text); font: 500 1rem Heebo, sans-serif; cursor: pointer; }
.hint { color: var(--muted); }
.badge { display: inline-block; background: var(--ok); color: #fff; padding: .35rem .9rem; border-radius: 999px; font-weight: 700; }
.tabs { position: fixed; inset: auto 0 0 0; display: flex; justify-content: space-around; padding: .5rem .25rem .7rem; background: var(--surface); border-top: 1px solid rgba(0,0,0,.08); }
.tab { text-align: center; font-size: .75rem; color: var(--muted); text-decoration: none; display: grid; gap: 2px; min-width: 3.5rem; }
.tab em { font-style: normal; font-size: 1.4rem; }
.tab.on { color: var(--primary); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
h2 { font-family: Rubik, sans-serif; font-size: 1.25rem; margin: 1.5rem 0 .5rem; }
.error { background: #fde8e4; color: #8a1f0c; padding: .6rem .9rem; border-radius: 12px; }
html.contrast .error { background: #000; color: #fff; border: 2px solid #ffe600; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.4rem; border-radius: 999px; font: 700 1rem Heebo, sans-serif; text-decoration: none; cursor: pointer; border: 2px solid var(--primary); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--primary); }
html.contrast .btn-primary { color: #000; }
.link-btn { background: none; border: 0; padding: .5rem 0; color: var(--muted); font: 500 .875rem Heebo, sans-serif; text-decoration: underline; cursor: pointer; min-height: 2.75rem; }
.login { max-width: 420px; margin: 2rem auto; text-align: center; }
.goal-list { display: grid; gap: .75rem; }
.goal { display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--radius); background: var(--primary); color: #fff; }
html.contrast .goal { border: 2px solid #ffe600; color: #fff; background: #000; }
.goal h3 { margin: 0; font: 700 1.1rem Rubik, sans-serif; }
.goal p { margin: .15rem 0 0; opacity: .92; font-size: .9rem; }
.goal .link-btn { color: #fff; opacity: .85; }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(#FFD27A calc(var(--p) * 1%), rgba(255,255,255,.28) 0); }
.ring span { width: 58px; height: 58px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; font: 800 .85rem Rubik, sans-serif; direction: ltr; }
html.contrast .ring span { background: #000; }
.card-form { background: var(--surface); border-radius: var(--radius); padding: 1rem; display: grid; gap: .75rem; margin-bottom: 1rem; border: 1px solid rgba(0,0,0,.08); }
.card-form label { display: grid; gap: .3rem; font-weight: 500; }
.card-form input { min-height: 2.75rem; padding: 0 .8rem; border-radius: 12px; border: 1px solid rgba(0,0,0,.25); font: 400 1rem Heebo, sans-serif; background: var(--surface); color: var(--text); }
.a11y-panel a { align-self: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.small { font-size: .85rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.stat { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: .6rem; text-align: center; display: grid; }
.stat b { font: 800 1.5rem Rubik, sans-serif; color: var(--primary); }
.stat span { font-size: .8rem; color: var(--muted); }
.goal-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.chip { background: #FFD27A; color: #3b2a00; border: 0; border-radius: 999px; min-height: 2.75rem; padding: 0 1rem; font: 700 .9rem Heebo, sans-serif; cursor: pointer; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.pcard { color: var(--text); text-decoration: none; display: block; }
.pic { height: 9.5rem; border-radius: var(--radius); position: relative; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(14,124,134,.15); }
.pic-emoji { font-size: 3.2rem; }
.pic-heart { position: absolute; top: .5rem; inset-inline-start: .5rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: #d33; }
.pic-visited { position: absolute; top: .5rem; inset-inline-end: .5rem; background: var(--ok); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.pname { font-weight: 700; margin-top: .4rem; }
.pmeta { font-size: .8rem; color: var(--muted); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: .5rem 0 1rem; }
.filters input, .filters select, .card-form select, .card-form textarea { min-height: 2.75rem; padding: 0 .8rem; border-radius: 12px; border: 1px solid rgba(0,0,0,.25); font: 400 1rem Heebo, sans-serif; background: var(--surface); color: var(--text); }
.card-form textarea { padding: .6rem .8rem; }
.card-form.inner { border: 0; padding: .5rem 0 0; margin: 0; background: transparent; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
details > summary { cursor: pointer; font-weight: 700; padding: .5rem 0; min-height: 2.75rem; }
.pager { display: flex; gap: 1.5rem; justify-content: center; margin: 1rem 0; }
.hero { height: 11rem; border-radius: var(--radius); display: grid; place-items: center; font-size: 4.5rem; margin-bottom: .75rem; }
.flags { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.flag { min-height: 2.75rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--primary); background: var(--surface); color: var(--text); font: 500 .9rem Heebo, sans-serif; cursor: pointer; }
.flag.on { background: var(--primary); color: #fff; font-weight: 700; }
html.contrast .flag.on { color: #000; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.notes { white-space: pre-wrap; background: var(--surface); border-radius: 16px; padding: .8rem 1rem; border: 1px solid rgba(0,0,0,.08); }
.visits { list-style: none; padding: 0; display: grid; gap: .5rem; }
.visits li { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: .5rem .8rem; }
.inline { display: inline; }
.danger { color: #b3261e; }
.map { height: 22rem; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.12); margin: .75rem 0; z-index: 0; }
.pin-wrap { background: none; border: 0; }
.pin { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 3px solid var(--primary); display: grid; place-items: center; font: 800 .95rem Rubik, sans-serif; color: var(--primary); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pin-visited { border-color: var(--ok); }
.trip-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.trip { display: grid; gap: .15rem; background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: .8rem 1rem; text-decoration: none; color: var(--text); }
.stops { list-style: none; padding: 0; display: grid; gap: .6rem; margin: 0 0 1rem; }
.stop { display: flex; gap: .75rem; background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: .7rem; }
.stop-n { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font: 800 1rem Rubik, sans-serif; color: #fff; }
.stop-body { min-width: 0; flex: 1; }
.stop-actions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
.chip-link { color: var(--primary); font-weight: 700; text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
html.contrast .pin { background: #000; color: #ffe600; border-color: #ffe600; }
.stat.neg b { color: #b3261e; }
.suggest-n { background: var(--accent); }
.inline-label { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.suggest-n { background: var(--accent); }
.inline-label { display: flex; align-items: center; gap: .5rem; font-weight: 500; }

.landing { max-width: 560px; margin: 1.5rem auto; text-align: center; }
.landing h1 { font-size: 1.9rem; line-height: 1.25; }
.features { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .6rem; text-align: start; }
.features li { background: var(--surface); border: 1px solid rgba(0,0,0,.08); border-radius: 16px; padding: .7rem 1rem; }
.legal-links { margin-top: 1.5rem; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1.4rem; border-radius: 999px; font: 700 1rem Heebo, sans-serif; cursor: pointer; background: #b3261e; color: #fff; border: 2px solid #b3261e; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: start; padding: .4rem .6rem; border-bottom: 1px solid rgba(0,0,0,.1); font-size: .9rem; }

.geo { display: grid; gap: .4rem; margin: .25rem 0; }
.geo-map { height: 16rem; }
.geo-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; }
.geo-results .link-btn { text-align: start; text-decoration: none; color: var(--primary); }