:root {
  /* Japanese washi palette */
  --paper: #f6efdf;          /* warm washi cream */
  --paper-2: #fbf7ec;        /* lighter card cream */
  --card: #fffdf7;
  --ink: #4a3b32;            /* warm brown ink */
  --muted: #9a8874;
  --torii: #c73e3a;          /* vermilion red */
  --torii-dark: #a32f2c;
  --gold: #c9a227;
  --line: #e8ddc6;
  --dash: #d9cbae;
  --danger: #c73e3a;
  --green: #5a8a5e;
  /* per-stop pastels (rotate) */
  --p-pink: #e58aa4;  --p-pink-soft: #fbe4ec;
  --p-green: #8fbc74; --p-green-soft: #e9f3dd;
  --p-purple: #a687d9;--p-purple-soft: #efe7fb;
  --p-orange: #e8a25c;--p-orange-soft: #fdeedb;
  --p-blue: #7ba6c9;  --p-blue-soft: #e3eef7;
  --radius: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--paper);
  color: var(--ink);
  overscroll-behavior-y: none;
}
h1, h2, h3, .serif, .topbar-title, .day-label > span:first-child {
  font-family: Georgia, "Times New Roman", "Hiragino Mincho ProN", serif;
  letter-spacing: -0.01em;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; }
a { color: var(--torii); }

#offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: #6b4c0c; color: #ffe9c7; text-align: center;
  font-size: 12.5px; font-weight: 600; padding: calc(4px + var(--safe-t)) 8px 4px;
}

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px calc(24px + var(--safe-b));
  background: linear-gradient(165deg, #f6efdf 0%, #efe2c8 70%, #e8d8b8 100%);
  color: var(--ink);
}
.auth-logo {
  width: 150px; height: 150px; margin-bottom: 14px;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(60,40,20,.35);
}
.auth-wrap h1 { font-size: 30px; font-weight: 800; }
.auth-sub { color: var(--muted); margin: 6px 0 24px; font-size: 15px; }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--card); color: var(--ink);
  border-radius: 22px; padding: 20px;
  box-shadow: 0 16px 40px rgba(90,70,40,.18);
  border: 1px solid var(--line);
}
.auth-card label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.auth-card input {
  display: block; width: 100%; margin-top: 5px;
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 16px; background: #fff;
}
.auth-card input:focus { outline: none; border-color: var(--torii); }
.btn-primary {
  width: 100%; padding: 13px; margin-top: 4px;
  background: var(--torii); color: #fff; font-weight: 700; font-size: 16px;
  border-radius: 999px; transition: background .15s;
}
.btn-primary:active { background: var(--torii-dark); }
.form-error { color: var(--danger); font-size: 13px; margin-bottom: 10px; }

/* ---------- Shell ---------- */
#app-shell { display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.topbar-logo {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  margin-right: 10px; box-shadow: 0 1px 4px rgba(80,60,30,.28);
}
.topbar-title { font-size: 20px; font-weight: 800; color: var(--ink); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 6px; }
.icon-btn { font-size: 18px; padding: 6px 10px; border-radius: 10px; color: var(--muted); }
.icon-btn:active { background: var(--line); }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: #6cae70; display: inline-block; }
.sync-dot.stale { background: #d9a13b; }

#main { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen { padding: 14px 14px calc(92px + var(--safe-b)); }
.screen-map { padding: 0; height: 100%; position: relative; }
#map, .dest-map { height: calc(100dvh - 118px); width: 100%; }
.dest-map { height: 55dvh; border-radius: var(--radius); }

/* ---------- Cards ---------- */
.card-list { display: flex; flex-direction: column; gap: 12px; }
.card {
  background: var(--card); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: 0 2px 6px rgba(120,95,60,.08);
  border: 1px solid var(--line);
}
.section-title {
  font-size: 15px; font-weight: 800; color: var(--ink);
  margin: 22px 4px 10px;
  font-family: Georgia, serif;
}
.section-title:first-child { margin-top: 4px; }

/* ---------- Home: countdown ---------- */
.countdown-card {
  border-radius: 24px; padding: 26px 18px 20px; margin-bottom: 16px;
  background: linear-gradient(170deg, #fbf3df, #f4e6c8);
  border: 1px solid var(--line);
  text-align: center; position: relative; overflow: hidden;
}
.countdown-card .sun {
  position: absolute; top: -30px; right: -30px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(231,111,81,.12);
}
.countdown-card .emo { font-size: 44px; }
.countdown-card h2 { font-size: 21px; margin-top: 6px; }
.countdown-card .until { font-size: 12.5px; color: var(--muted); margin-top: 10px; font-weight: 600; }
.countdown-card .big {
  font-size: 52px; font-weight: 800; line-height: 1.1; color: var(--ink);
  font-family: Georgia, serif;
}
.countdown-card .big small { font-size: 22px; font-weight: 700; }
.stops-row {
  display: flex; align-items: flex-start; justify-content: center; gap: 4px;
  margin-top: 18px; flex-wrap: wrap;
}
.stop-dot { display: flex; flex-direction: column; align-items: center; width: 58px; }
.stop-dot .dot { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.stop-dot .lbl { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-top: 4px; text-align: center; }
.stops-row .arrow { color: var(--dash); font-size: 13px; margin-top: 1px; }

/* book-soon strip */
.soon-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; }
.soon-card .ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px;
  background: #fdeedb; display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.soon-card .body { flex: 1; min-width: 0; }
.soon-card h4 { font-size: 13.5px; font-weight: 700; font-family: inherit; }
.soon-card .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.soon-card .pill {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #8a6d1a;
  background: #f8ecc8; border-radius: 999px; padding: 4px 10px;
}
.link-row { text-align: center; margin: 4px 0 6px; }
.link-row button { font-size: 13px; font-weight: 700; color: var(--torii); }

/* destination cards — photo-led washi */
.dest-card { padding: 0; overflow: hidden; display: block; border-radius: 20px; }
.dest-card .photo {
  height: 128px; background-size: cover; background-position: center;
  background-color: #efe4cc; position: relative;
}
.dest-card .photo .ord {
  position: absolute; top: 10px; left: 10px;
  color: #fff; font-size: 11.5px; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; backdrop-filter: blur(4px);
  background: rgba(74,59,50,.65);
}
.dest-card .photo .dates {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(74,59,50,.65); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.dest-card .body { padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dest-card h3 { font-size: 18px; font-weight: 800; }
.dest-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.dest-card .chev { color: var(--dash); font-size: 24px; }

/* destination hero */
.dest-hero {
  border-radius: 22px; padding: 16px 18px; color: #fff; margin-bottom: 12px;
  background: linear-gradient(150deg, #7d6a54, #4a3b32);
  min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end;
}
.dest-hero.has-photo { background-size: cover; background-position: center; }
.dest-hero .back { font-size: 13.5px; margin-bottom: auto; align-self: flex-start; background: rgba(50,38,28,.6); padding: 4px 12px; border-radius: 999px; }
.dest-hero h2 { font-size: 25px; font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.dest-hero .sub { font-size: 13px; margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.dest-hero .desc { font-size: 13px; margin-top: 8px; line-height: 1.45; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.dest-hero .actions { margin-top: 12px; display: flex; gap: 8px; }
.dest-hero .actions button {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px;
  background: rgba(50,38,28,.6); border-radius: 999px; color: #fff;
}

.seg { display: flex; background: #ede3cd; border-radius: 999px; padding: 4px; margin-bottom: 14px; }
.seg-btn { flex: 1; padding: 8px 0; border-radius: 999px; font-weight: 700; color: var(--muted); font-size: 13.5px; }
.seg-btn.active { background: var(--card); color: var(--torii); box-shadow: 0 1px 5px rgba(120,95,60,.18); }

/* ---------- hotel card ---------- */
.hotel-card { padding: 0; overflow: hidden; border-radius: 20px; }
.hotel-card .photo {
  height: 150px; background-size: cover; background-position: center;
  background-color: #efe4cc; position: relative;
}
.hotel-card .photo .badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--torii); color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; letter-spacing: .04em;
}
.hotel-card .inner { padding: 14px 16px; }
.hotel-card h3 { font-size: 18px; font-weight: 800; }
.hotel-card .addr { font-size: 13px; color: var(--muted); margin-top: 3px; }
.hotel-card .stay-row { display: flex; gap: 8px; margin-top: 12px; }
.hotel-card .stay {
  flex: 1; background: var(--paper-2); border: 1.5px dashed var(--dash);
  border-radius: 14px; padding: 8px 12px;
}
.hotel-card .stay .lbl { font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.hotel-card .stay .val { font-size: 13px; font-weight: 700; margin-top: 2px; }
.hotel-card .refline { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.hotel-card .refline b { color: var(--ink); }
.hotel-card .notes { margin-top: 8px; font-size: 13px; color: var(--muted); white-space: pre-wrap; }
.hotel-card .cta-row { display: flex; gap: 10px; margin-top: 12px; }
.btn-cta {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 999px;
  background: var(--torii); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none;
}
.btn-cta.secondary { background: var(--card); color: var(--torii) !important; border: 1.5px solid var(--torii); }

.note-card { background: #fbf3df; border-color: #ecd9a8; }
.note-card .meta { white-space: pre-wrap; font-size: 13.5px; color: #6b4c0c; }
.note-card h4 { font-size: 13px; font-weight: 800; color: #8a5f07; margin-bottom: 4px; }

/* ---------- Explore: category tiles ---------- */
.sub-line { font-size: 13px; color: var(--muted); margin: -6px 4px 12px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  border-radius: 22px; padding: 22px 14px 16px; text-align: center;
  border: 1px solid rgba(120,95,60,.08);
}
.tile .emo { font-size: 40px; }
.tile h3 { font-size: 16px; margin-top: 10px; }
.tile .cnt { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }

/* ---------- destination tiles (browse + filter) ---------- */
.dest-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.dest-tile {
  position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1;
  border: 2.5px solid transparent; background: var(--paper-2);
}
.tiles .dest-tile { aspect-ratio: 4 / 3; }
.dest-tile.small { aspect-ratio: 1 / 1; }
.dest-tile .ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
.dest-tile .ov {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 6px;
  background: linear-gradient(rgba(40,28,18,.15), rgba(40,28,18,.62));
  color: #fff;
}
.dest-tile.all .ov { background: var(--paper-2); color: var(--ink); }
.dest-tile h4 { font-size: 12.5px; font-weight: 800; line-height: 1.15; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.dest-tile.all h4 { text-shadow: none; }
.dest-tile .ov span { font-size: 11px; font-weight: 700; opacity: .9; }
.dest-tile.active { border-color: var(--torii); }
.dest-tile.active .ov { background: linear-gradient(rgba(199,62,58,.35), rgba(199,62,58,.75)); }
.dest-tile.all.active .ov { background: var(--torii); color: #fff; }
.tiles .dest-tile h4 { font-size: 15px; }
.tiles .dest-tile .ov span { font-size: 12px; }

/* ---------- Expedia-style place card ---------- */
.xp-card { padding: 0; overflow: hidden; border-radius: 20px; }
.xp-photo {
  position: relative; height: 168px; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.xp-ph-emo { font-size: 46px; opacity: .5; }
.xp-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-wrap: wrap; gap: 5px; max-width: 70%; }
.xp-badge {
  font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(3px);
}
.xp-badge.must, .xp-badge.lv3 { background: var(--torii); color: #fff; }
.xp-badge.lv2 { background: var(--gold); color: #fff; }
.xp-badge.lv1 { background: rgba(255,255,255,.94); color: var(--muted); }

/* how-keen-are-we rating control */
.rate-row { margin-top: 10px; }
.rate-lbl { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.rate-seg { display: flex; gap: 5px; }
.rate-btn {
  flex: 1; padding: 7px 4px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1.5px solid var(--line); background: var(--card); color: var(--muted);
}
.rate-btn.on.lv0 { background: var(--paper-2); color: var(--ink); border-color: var(--dash); }
.rate-btn.on.lv1 { background: #e8e2d4; color: var(--ink); border-color: var(--dash); }
.rate-btn.on.lv2 { background: var(--gold); color: #fff; border-color: var(--gold); }
.rate-btn.on.lv3 { background: var(--torii); color: #fff; border-color: var(--torii); }
.pd-rate { padding: 13px 15px; margin-top: 12px; }
.xp-badge.planned { background: #4e7a45; color: #fff; }
.xp-badge.visited { background: rgba(255,255,255,.94); color: var(--green); }
.xp-badge.fav { background: rgba(255,255,255,.94); color: #b23a48; }
.xp-fav {
  position: absolute; top: 8px; right: 8px; font-size: 19px;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px);
}
.xp-stop {
  position: absolute; bottom: 10px; left: 10px; color: #fff;
  font-size: 11px; font-weight: 800; padding: 3px 11px; border-radius: 999px;
}
.xp-body { padding: 12px 15px 13px; }
.xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.xp-top h3 { font-size: 17px; font-weight: 800; }
.xp-rate { font-size: 12.5px; font-weight: 800; color: var(--gold); white-space: nowrap; }
.xp-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.xp-foot { margin-top: 9px; }
.xp-more { font-size: 12.5px; font-weight: 800; color: var(--torii); }

/* ---------- place detail page ---------- */
.pd-hero {
  margin: -14px -14px 0; padding: 16px 18px 20px; min-height: 260px;
  background-size: cover; background-position: center; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pd-hero.no-photo { color: var(--ink); }
.pd-hero .pd-back {
  align-self: flex-start; font-size: 13.5px; font-weight: 700;
  background: rgba(30,20,12,.55); color: #fff; padding: 5px 13px; border-radius: 999px;
}
.pd-hero.no-photo .pd-back { background: rgba(255,255,255,.7); color: var(--ink); }
.pd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pd-hero h2 { font-size: 26px; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.pd-hero.no-photo h2 { text-shadow: none; }
.pd-sub { font-size: 13.5px; margin-top: 3px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.pd-hero.no-photo .pd-sub { text-shadow: none; color: var(--muted); }
.pd-actions { display: flex; gap: 10px; margin: 14px 0 4px; }
.pd-facts { display: flex; flex-direction: column; gap: 11px; }
.pd-fact { display: flex; gap: 11px; align-items: flex-start; }
.pd-fact .ic { font-size: 16px; width: 22px; text-align: center; }
.pd-fact small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pd-fact b { display: block; font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.pd-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }
.pd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pd-map { height: 220px; border-radius: 18px; overflow: hidden; }
.pd-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pd-foot button {
  flex: 1 1 45%; padding: 12px; border-radius: 14px; font-size: 13px; font-weight: 700;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
}
.pd-foot .del { color: var(--danger); border-color: #eec3c2; }

/* gallery + lightbox */
.pd-gallery { min-height: 40px; }
.gal-hint { font-size: 12.5px; color: var(--muted); padding: 6px 4px; }
.gal-strip { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.gal-strip::-webkit-scrollbar { display: none; }
.gal-shot {
  flex: 0 0 auto; width: 160px; height: 118px; border-radius: 16px;
  background-size: cover; background-position: center; background-color: var(--paper-2);
  border: 1px solid var(--line);
}
.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,14,8,.94);
  display: flex; align-items: center; justify-content: center;
}
.lightbox .lb-img { width: 92%; height: 74%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.lightbox button { position: absolute; color: #fff; font-size: 30px; padding: 12px 18px; }
.lightbox .lb-close { top: calc(10px + var(--safe-t)); right: 10px; font-size: 24px; }
.lightbox .lb-prev { left: 2px; }
.lightbox .lb-next { right: 2px; }
.lb-count { position: absolute; bottom: calc(24px + var(--safe-b)); color: #fff; font-size: 13px; font-weight: 700; }

/* ---------- places ---------- */
.place-card { display: flex; gap: 12px; align-items: flex-start; border-radius: 20px; }

/* category page place status */
.badge-planned { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: #e9f3dd; color: #4e7a45; }
.badge-unsched { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--paper-2); color: var(--muted); border: 1px solid var(--line); }

/* ---------- swipe to reveal ---------- */
.swipe-wrap { position: relative; overflow: hidden; border-radius: 20px; }
.swipe-actions {
  position: absolute; inset: 0 0 0 auto; display: flex; align-items: stretch; gap: 6px;
  padding: 0 4px 0 0;
}
.swipe-btn {
  width: 74px; border-radius: 18px; background: #e9dfc6; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11.5px; font-weight: 800;
}
.swipe-btn span { font-size: 19px; }
.swipe-btn.danger { background: #f3d7d5; color: var(--danger); }
.swipe-content {
  position: relative; transition: transform .22s cubic-bezier(.2,.8,.3,1);
  will-change: transform; touch-action: pan-y;
}
.swipe-content > .card { margin-bottom: 0 !important; }
.swipe-wrap + .swipe-wrap { margin-top: 10px; }
.rail .swipe-wrap { margin-bottom: 10px; }
.rail .swipe-wrap::before {
  content: ""; position: absolute; left: -22px; top: 18px; z-index: 1;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rail-dot, var(--torii)); border: 2px solid var(--card);
  box-shadow: 0 0 0 2px var(--dash);
}
.rail .swipe-wrap { overflow: visible; }
.rail .swipe-wrap .swipe-content, .rail .swipe-wrap .swipe-actions { border-radius: 20px; }
.rail .swipe-wrap .swipe-content { overflow: hidden; }
.rail .item-card::before { display: none; }
.card-list .swipe-wrap + .swipe-wrap { margin-top: 0; }
.card-list { gap: 12px; }

/* ---------- place search box ---------- */
.geo-box { margin-bottom: 14px; }
.geo-input { position: relative; display: flex; align-items: center; }
.geo-input .mag { position: absolute; left: 12px; font-size: 15px; opacity: .6; }
.geo-input .geo-spin { position: absolute; right: 12px; font-size: 14px; }
.geo-input input {
  width: 100%; padding: 12px 36px 12px 36px !important; margin-top: 0 !important;
  border: 1.5px solid var(--torii) !important; border-radius: 999px !important;
  background: #fff; font-size: 16px;
}
.geo-hint { font-size: 11.5px; color: var(--muted); margin: 6px 4px 0; font-weight: 600; }
.geo-results { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.geo-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 10px 12px; border-radius: 14px; background: var(--card);
  border: 1.5px solid var(--line); width: 100%;
}
.geo-row:active { background: var(--paper-2); }
.geo-row .ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.geo-row .txt { min-width: 0; display: flex; flex-direction: column; }
.geo-row .txt b { font-size: 14px; }
.geo-row .txt small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* imported-place preview */
.found-preview, .where-preview {
  display: flex; gap: 12px; align-items: center; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 16px;
  background: #eef5e8; border: 1.5px solid #cfe0c2;
}
.where-preview { flex-direction: column; align-items: flex-start; gap: 2px; }
.found-preview .pv-photo {
  width: 74px; height: 74px; flex: 0 0 74px; border-radius: 13px;
  background-size: cover; background-position: center;
}
.found-preview .pv-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.found-preview b, .where-preview b { font-size: 13.5px; }
.found-preview small, .where-preview small { font-size: 11.5px; color: #5a7a4e; }

.more-toggle {
  display: block; width: 100%; text-align: left; margin: 4px 0 10px;
  font-size: 13px; font-weight: 700; color: var(--muted);
  padding: 10px 12px; border-radius: 12px; background: var(--paper);
  border: 1.5px dashed var(--dash);
}
.more-fields { border-left: 2px dashed var(--dash); padding-left: 12px; margin-bottom: 10px; }

/* ---------- emoji map pins ---------- */
.emoji-pin-wrap { background: none !important; border: none !important; }
.emoji-pin {
  width: 34px; height: 34px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.emoji-pin span { transform: rotate(45deg); font-size: 16px; line-height: 1; }
.emoji-pin.big { width: 40px; height: 40px; }
.emoji-pin.big span { font-size: 19px; }
.leaflet-control-layers { border-radius: 14px !important; border: 1px solid var(--line) !important; font-size: 13px; }
.leaflet-popup-content { font-size: 13px; }
.leaflet-popup-content a { font-weight: 700; }

/* ---------- places ---------- */
.place-card { display: flex; gap: 12px; align-items: flex-start; border-radius: 20px; }
.place-card .thumb {
  width: 62px; height: 62px; flex: 0 0 62px; border-radius: 14px;
  background-size: cover; background-position: center; background-color: var(--paper-2);
}
.place-card .cat-emoji {
  font-size: 22px; width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1.5px dashed var(--dash); border-radius: 13px;
}
.place-card .body { flex: 1; min-width: 0; }
.place-card h3 { font-size: 16px; font-weight: 700; }
.place-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.place-card .tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.place-card .tag { font-size: 11px; background: var(--paper-2); color: var(--muted); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.place-card .fav-btn { font-size: 20px; padding: 4px; opacity: .3; }
.place-card .fav-btn.on { opacity: 1; }
.rating { color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.badge-visited { font-size: 11px; font-weight: 700; color: var(--green); }
.badge-prio1 { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--torii); padding: 2px 8px; border-radius: 999px; }
.badge-prio3 { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--paper-2); padding: 2px 8px; border-radius: 999px; }
.place-detail { margin-top: 8px; font-size: 13px; color: var(--muted); border-top: 1.5px dashed var(--dash); padding-top: 8px; }
.place-detail p { margin-bottom: 4px; white-space: pre-wrap; }

/* ---------- day rail (Japanese journal style) ---------- */
.day-group { margin-bottom: 22px; }
.day-label {
  font-size: 15px; font-weight: 800; color: var(--ink);
  margin: 0 4px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.day-label .dest-tag {
  font-size: 11px; font-weight: 800; color: #fff;
  padding: 3px 11px; border-radius: 999px;
}
.rail { position: relative; padding-left: 26px; }
.rail::before {
  content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
  width: 0; border-left: 2.5px dotted var(--dash);
}
.rail .item-card { position: relative; margin-bottom: 10px; }
.rail .item-card::before {
  content: ""; position: absolute; left: -22px; top: 18px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--rail-dot, var(--torii)); border: 2px solid var(--card);
  box-shadow: 0 0 0 2px var(--dash);
}
.item-card { display: flex; gap: 12px; border-radius: 20px; }
.item-card .kind {
  font-size: 20px; width: 42px; height: 42px; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1.5px dashed var(--dash); border-radius: 13px;
}
.item-card .body { flex: 1; min-width: 0; }
.item-card h3 { font-size: 15.5px; font-weight: 700; }
.item-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; white-space: pre-wrap; }
.item-card .time { font-size: 12.5px; font-weight: 800; color: var(--torii); }

/* ---------- travel (tickets) ---------- */
.travel-card { display: flex; gap: 12px; padding: 0; overflow: hidden; border-radius: 20px; }
.travel-card .side { width: 6px; flex: 0 0 6px; background: var(--torii); }
.travel-card.hotel .side { background: #7d6a54; }
.travel-card .inner { flex: 1; padding: 13px 15px 13px 9px; display: flex; gap: 12px; }
.travel-card .ico {
  font-size: 21px; width: 44px; height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1.5px dashed var(--dash); border-radius: 13px;
}
.travel-card .body { flex: 1; min-width: 0; }
.travel-card h3 { font-size: 15.5px; font-weight: 800; }
.travel-card .meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.travel-card .when { font-size: 12px; font-weight: 800; color: var(--torii); }
.travel-card.hotel .when { color: #7d6a54; }
.travel-card .thumbnail {
  width: 66px; height: 66px; flex: 0 0 66px; border-radius: 14px;
  background-size: cover; background-position: center; background-color: #efe4cc;
  align-self: center;
}

/* ---------- tasks ---------- */
.progress-wrap { margin: 2px 2px 16px; }
.progress-bar { height: 9px; background: #ece1c8; border-radius: 999px; overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--torii); border-radius: 999px; transition: width .3s; }
.progress-lbl { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.check-section { margin-bottom: 18px; }
.check-card { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 8px; padding: 12px 14px; border-radius: 18px; }
.check-card.done { opacity: .55; }
.check-card.done .txt { text-decoration: line-through; }
.checkbox {
  width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px;
  border: 2px solid var(--dash); border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff; transition: all .15s;
}
.check-card.done .checkbox { background: var(--green); border-color: var(--green); }
.check-card .body { flex: 1; min-width: 0; }
.check-card .txt { font-size: 14px; font-weight: 600; line-height: 1.35; }
.check-card .sub { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.check-card .mini { display: flex; gap: 12px; margin-top: 6px; }
.check-card .mini button { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.check-card .mini .del { color: var(--danger); }

/* completed tasks, tucked away in their own collapsible block */
.done-box { margin-top: 22px; border-top: 1.5px dashed var(--dash); padding-top: 14px; }
.done-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 12px 14px; border-radius: 16px; background: var(--paper-2);
  border: 1.5px solid var(--line); font-size: 14px; font-weight: 800; color: var(--muted);
}
.done-head .chev { font-size: 13px; }
.done-head .count {
  margin-left: auto; font-size: 12px; font-weight: 800;
  background: #e3ecdc; color: var(--green); padding: 3px 11px; border-radius: 999px;
}
.done-list { margin-top: 10px; }

/* map filter bar */
#map-filters {
  position: absolute; top: calc(8px + var(--safe-t)); left: 0; right: 0; z-index: 500;
  margin: 0; padding: 0 12px;
}
#map-filters .chip {
  box-shadow: 0 2px 8px rgba(60,45,25,.25);
  background: rgba(255,253,247,.96); backdrop-filter: blur(6px);
}
#map-filters .chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* map popup */
.map-pop b { font-size: 13.5px; display: block; }
.map-pop small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.map-pop-links { display: flex; gap: 12px; margin-top: 7px; }
.map-pop-links button, .map-pop-links a {
  font-size: 12px; font-weight: 800; color: var(--torii); text-decoration: none; padding: 0;
}

/* "already in the plan" strip on the place page */
.pd-sched { display: flex; align-items: center; gap: 11px; margin-top: 12px; background: #eef5e8; border-color: #cfe0c2; }
.pd-sched .ic { font-size: 17px; }
.pd-sched small { display: block; font-size: 10.5px; font-weight: 800; color: #5a7a4e; text-transform: uppercase; letter-spacing: .04em; }
.pd-sched b { display: block; font-size: 13.5px; margin-top: 2px; }
.pd-sched button { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--green); }

/* ---------- more menu ---------- */
.menu-list { display: flex; flex-direction: column; gap: 10px; }
.menu-item { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 18px; }
.menu-item .emo {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--paper-2); border: 1.5px dashed var(--dash);
}
.menu-item .body { flex: 1; }
.menu-item h3 { font-size: 15.5px; }
.menu-item .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.menu-item .chev { color: var(--dash); font-size: 22px; }
.menu-item .count { font-size: 11px; font-weight: 800; background: #f8ecc8; color: #8a6d1a; padding: 3px 10px; border-radius: 999px; }

/* ---------- chips / search / empty ---------- */
.chip-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-bottom: 10px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; font-size: 13px; font-weight: 700;
  padding: 7px 15px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted);
}
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.search-row input {
  width: 100%; padding: 11px 14px; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); margin-bottom: 10px;
}
.search-row input:focus { outline: none; border-color: var(--torii); }
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty-emoji { font-size: 44px; margin-bottom: 10px; }
.empty p { font-size: 14.5px; line-height: 1.5; }

/* ---------- fab + tabbar ---------- */
.fab {
  position: fixed; right: 18px; bottom: calc(82px + var(--safe-b));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--torii); color: #fff; font-size: 26px; font-weight: 300;
  box-shadow: 0 8px 22px rgba(199,62,58,.4); z-index: 30;
}
.fab:active { background: var(--torii-dark); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; background: rgba(251,247,236,.97); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 7px 0 calc(7px + var(--safe-b));
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10.5px; font-weight: 700; color: var(--muted); padding: 4px 0;
}
.tab span { font-size: 20px; filter: grayscale(.4) opacity(.75); }
.tab.active { color: var(--torii); }
.tab.active span { filter: none; }

/* ---------- sheet ---------- */
#sheet-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(60,45,30,.5);
  display: flex; align-items: flex-end;
}
#sheet {
  width: 100%; max-height: 88dvh; overflow-y: auto;
  background: var(--paper-2); border-radius: 22px 22px 0 0;
  padding: 10px 18px calc(24px + var(--safe-b));
  animation: sheet-up .22s ease-out;
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--dash); margin: 4px auto 12px; }
#sheet h2 { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
#sheet label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
#sheet input, #sheet textarea, #sheet select {
  display: block; width: 100%; margin-top: 5px;
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 16px; background: #fff;
}
#sheet input:focus, #sheet textarea:focus, #sheet select:focus { outline: none; border-color: var(--torii); }
#sheet textarea { min-height: 64px; resize: vertical; }
.field-row { display: flex; gap: 10px; }
.field-row > label { flex: 1; }
.form-section { font-size: 12px; font-weight: 800; color: var(--torii); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 8px; }
.kind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 12px; }
.kind-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px; border: 1.5px solid var(--line); border-radius: 14px;
  font-size: 11px; font-weight: 600; color: var(--muted); background: #fff;
}
.kind-opt span { font-size: 20px; }
.kind-opt.active { border-color: var(--torii); background: #fdecea; color: var(--torii); }
.sheet-actions { display: flex; gap: 10px; margin-top: 16px; }
.sheet-actions .btn-primary { margin: 0; }
.btn-ghost {
  flex: 0 0 auto; padding: 13px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); font-weight: 600; color: var(--muted); background: #fff;
}
.btn-danger-ghost { border-color: #eec3c2; color: var(--danger); }
.settings-list { display: flex; flex-direction: column; gap: 10px; }
.settings-list button { text-align: left; padding: 13px 14px; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; background: #fff; }

.inline-actions { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; }
.inline-actions button, .inline-actions a { font-size: 12.5px; font-weight: 700; color: var(--torii); text-decoration: none; }
.inline-actions .del { color: var(--danger); }

#toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); white-space: nowrap;
}

@media (min-width: 700px) {
  #main, .topbar, .tabbar { max-width: 560px; margin-inline: auto; width: 100%; }
  .tabbar { left: 50%; transform: translateX(-50%); border-radius: 20px 20px 0 0; border: 1px solid var(--line); }
  .fab { right: calc(50% - 260px); }
}