:root {
  --bg: #F4F6F5;
  --surface: #FFFFFF;
  --surface-2: #F8FAF9;
  --ink: #1F2B27;
  --muted: #68736E;
  --border: #DDE3E0;
  --green: #085041;
  --green-dark: #063F34;
  --coral: #EF6B54;
  --coral-dark: #DE5A45;
  --charcoal: #252A27;
  --green-soft: #E7F0EC;
  --danger: #A54133;
  --shadow: 0 6px 20px rgba(15, 55, 43, 0.05);
  --radius: 18px;
  --font-ui: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Vollkorn", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
#app { min-height: 100vh; }
.app-shell {
  width: min(100%, 540px);
  margin: 0 auto;
  min-height: 100vh;
  padding: env(safe-area-inset-top) 18px calc(88px + env(safe-area-inset-bottom));
}
.brand {
  padding-top: 18px;
  text-align: center;
}
.brand-logo {
  display:block;
  width:150px;
  max-width:46vw;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
.create-intro { text-align:center; }
.create-intro .lede { margin-left:auto; margin-right:auto; }
.create-intro .eyebrow { text-align:center; }
.screen { padding-top: 24px; animation: fade .18s ease; }
@keyframes fade { from {opacity:.4; transform:translateY(3px)} to {opacity:1; transform:none} }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; color: var(--coral); margin-bottom: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5vw, 2.15rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.018em;
  margin-bottom: 10px;
  color: var(--green);
}
h2 { font-family: var(--font-ui); font-size: 1.55rem; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
h3 { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.lede { color: #4F5C56; font-size: .97rem; line-height: 1.58; max-width: 43ch; }
.form-card, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.form-card { padding: 18px; margin-top: 24px; }
.field { margin-bottom: 17px; }
.field:last-child { margin-bottom: 0; }
label { display:flex; align-items:center; gap:6px; font-weight: 600; font-size: .88rem; margin-bottom: 7px; color: var(--ink); }
.optional { font-weight: 400; color: var(--muted); font-size: .78rem; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--charcoal);
  border-radius: 13px;
  padding: 13px 14px;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21,63,53,.08); }
.date-row { display:grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.btn {
  appearance:none;
  border:0;
  border-radius: 999px;
  padding: 13px 18px;
  min-height: 44px;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.btn-primary { background: var(--coral); color:#fff; }
.btn-primary:hover { background: var(--coral-dark); }
.btn-dark { background: var(--charcoal); color:#fff; }
.btn-ghost { background: transparent; border:1px solid var(--border); color: var(--ink); }
.btn-link { background:none; border:0; color:var(--ink); padding:0; font-weight:600; }
.btn-full { width:100%; }
.helper { color:var(--muted); font-size:.8rem; margin-top:10px; text-align:center; }
.info-btn { width:20px; height:20px; border-radius:50%; border:1px solid #B9C2BD; background:#fff; color:var(--ink); font-size:.7rem; font-weight:700; line-height:1; padding:0; }
.tooltip { background:var(--charcoal); color:white; border-radius:13px; padding:12px 13px; font-size:.81rem; line-height:1.45; margin-top:8px; display:none; }
.tooltip.show { display:block; }
.trip-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.trip-meta { color:var(--muted); line-height:1.45; font-size:.9rem; }
.action-row { display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin:20px 0 24px; }
.section-label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#5D6963; margin:26px 0 10px; }
.next-card { padding:17px; }
.next-kicker { font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--coral); margin-bottom:8px; }
.next-title { font-size:1.1rem; font-weight:600; margin-bottom:5px; }
.next-meta { color:var(--muted); font-size:.86rem; }
.next-actions { margin-top:14px; display:flex; gap:14px; }
.day-card { padding:18px; margin-bottom:12px; }
.day-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.day-date { font-size:.71rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#647069; }
.today-pill { background:var(--coral); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.07em; border-radius:999px; padding:5px 9px; }
.day-card h3 { margin:6px 0 4px; font-family:var(--font-ui); font-size:1.2rem; font-weight:600; letter-spacing:-.01em; }
.plan-count { color:var(--muted); font-size:.84rem; margin-bottom:13px; }
.mini-plan { display:flex; gap:10px; align-items:baseline; padding:7px 0; border-top:1px solid #E9EEEB; font-size:.88rem; }
.mini-plan:first-of-type { border-top:0; }
.mini-time { color:var(--muted); min-width:66px; font-variant-numeric:tabular-nums; }
.card-footer { margin-top:14px; display:flex; justify-content:space-between; align-items:center; }
.empty-copy { color:var(--muted); font-size:.86rem; line-height:1.45; margin:8px 0 14px; }
.bottom-nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(100%,540px);
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index:20;
}
.nav-btn { background:none; border:0; color:#737E78; font-size:.74rem; font-weight:600; padding:8px; border-radius:11px; }
.nav-btn.active { color:var(--ink); background:var(--green-soft); }
.back { display:inline-flex; align-items:center; gap:5px; margin-bottom:17px; }
.day-title { margin-bottom:8px; }
.day-sub { color:var(--muted); margin-bottom:20px; }
.plan-card { padding:16px; margin-bottom:11px; display:grid; grid-template-columns: 28px 1fr; gap:10px; }
.drag { color:#AAB3AE; letter-spacing:-2px; font-size:1.1rem; padding-top:3px; user-select:none; }
.plan-time { color:var(--coral); font-weight:700; font-size:.81rem; margin-bottom:5px; }
.plan-title { font-weight:600; font-size:1rem; margin-bottom:3px; }
.plan-location, .plan-note { color:var(--muted); font-size:.84rem; line-height:1.45; }
.source-tag { display:inline-flex; margin-top:10px; background:var(--green-soft); color:var(--ink); border-radius:999px; padding:5px 8px; font-size:.68rem; font-weight:600; }
.plan-actions { margin-top:12px; display:flex; flex-wrap:wrap; gap:13px; }
.plan-actions button, .plan-actions a { border:0; background:none; padding:0; color:var(--ink); font-weight:600; font-size:.8rem; text-decoration:none; }
.sheet-backdrop { position:fixed; inset:0; background:rgba(17,23,20,.42); z-index:30; display:flex; align-items:flex-end; justify-content:center; }
.sheet { width:min(100%,540px); background:var(--surface); border-radius:22px 22px 0 0; padding:10px 18px calc(24px + env(safe-area-inset-bottom)); max-height:82vh; overflow:auto; }
.sheet-handle { width:42px; height:4px; border-radius:999px; background:#CED6D2; margin:0 auto 18px; }
.sheet h2 { font-size:1.42rem; margin-bottom:8px; }
.sheet-option { width:100%; background:#fff; border:1px solid var(--border); border-radius:15px; padding:15px; text-align:left; margin-top:10px; color:var(--ink); }
.sheet-option strong { display:block; margin-bottom:4px; font-weight:600; }
.sheet-option span { color:var(--muted); font-size:.82rem; line-height:1.4; }
.sheet-close { width:100%; margin-top:16px; }
.explore-card { padding:18px; margin-bottom:12px; }
.explore-card p { color:var(--muted); line-height:1.48; font-size:.88rem; }
.more-list { overflow:hidden; }
.more-item { width:100%; display:flex; justify-content:space-between; background:none; border:0; border-top:1px solid #E9EEEB; padding:15px 16px; color:var(--ink); text-align:left; font-weight:600; }
.more-item:first-child { border-top:0; }
.danger { color:var(--danger); }
.notice { background:#FFF5F1; border:1px solid #F0D1C7; border-radius:15px; padding:13px 14px; color:#6B453A; font-size:.83rem; line-height:1.45; margin:14px 0; }
.small { font-size:.8rem; color:var(--muted); }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width: 420px) {
  .brand-logo { width:142px; }
  h1 { font-size:1.65rem; }
}

@media (min-width:600px) {
  body { padding: 18px 0; }
  .app-shell { min-height: calc(100vh - 36px); border:1px solid var(--border); border-radius:26px; box-shadow:var(--shadow); overflow:hidden; background:var(--bg); }
  .bottom-nav { bottom:18px; border:1px solid var(--border); border-radius:0 0 26px 26px; }
}

/* Map + Event Calendar handoff */
.incoming-banner {
  display:grid;
  gap:4px;
  margin: 0 0 16px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--green-soft);
  font-size: .88rem;
  line-height: 1.4;
}
.incoming-banner strong { color: var(--ink); font-weight:600; }
.incoming-banner span { color: var(--muted); }
.incoming-summary {
  display:grid;
  gap:4px;
  margin: 2px 0 16px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
}
.incoming-summary strong { font-size:1rem; color:var(--ink); font-weight:600; }
.incoming-summary span { font-size:.82rem; color:var(--muted); }
.readonly-field {
  min-height: 46px;
  display:flex;
  align-items:center;
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  padding: 0 13px;
  color:var(--ink);
  font-size:.92rem;
}