/* Viagem na Mão — visual de app, pensado primeiro para o celular. */

:root {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #f0ede6;
  --ink: #15201b;
  --ink-2: #3c4842;
  --muted: #727b75;
  --line: #e6e1d7;
  --brand: #15563F;
  --brand-2: #1f6b50;
  --brand-soft: #e3eee7;
  --accent: #FF8068;
  --accent-soft: #ffe7e1;
  --mint: #56D7AE;
  --brand-deep: #104431;
  --gold: #c9973f;
  --gold-soft: #f6ecd7;
  --danger: #b4483a;
  --radius-lg: 24px;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(21, 32, 27, 0.08);
  --shadow-strong: 0 18px 50px rgba(21, 32, 27, 0.18);
  --bar-h: 64px;
  --tab-h: 68px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Manrope", "DM Sans", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: #e9e5dc;
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-2); }
img { display: block; max-width: 100%; }

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible { outline: 3px solid rgba(45, 106, 80, 0.45); outline-offset: 2px; }

/* Moldura do app: no computador vira um "celular" centralizado. */
.app {
  position: relative;
  width: 100%;
  /* A animação de entrada desliza a tela; clip evita rolagem lateral sem quebrar o sticky. */
  overflow-x: clip;
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(21, 32, 27, 0.12);
}

.screen {
  position: relative;
  min-height: 100dvh;
  animation: screen-in 260ms ease;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}

.screen-body { padding: 16px 16px 32px; }

/* Botões padronizados */
.btn {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.1px;
  transition: transform 120ms ease, background 160ms ease, opacity 160ms ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: #fff; background: var(--brand); box-shadow: 0 8px 20px rgba(30, 74, 56, 0.25); }
.btn-primary:hover:not(:disabled) { background: var(--brand-2); }
.btn-secondary { color: var(--brand); background: var(--surface); border: 1px solid var(--line); }
.btn-ghost { color: var(--brand); background: transparent; }
.btn-danger { color: var(--danger); background: #fbeae7; }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }

.icon-btn {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
}
.icon-btn-sm { width: 36px; height: 36px; }
.icon-btn-sm .icon { width: 18px; height: 18px; }
.icon-btn-glass { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.link-btn { padding: 6px 0; border: 0; color: var(--brand-2); background: none; font-size: 14px; font-weight: 700; }

/* Barra superior padrão */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: calc(var(--bar-h) + var(--safe-top));
  align-items: center;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background: rgba(245, 243, 238, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(230, 225, 215, 0.7);
}
.app-bar-title { min-width: 0; flex: 1; }
.app-bar-title h1 {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-bar-kicker { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

/* Início */
.hero {
  position: relative;
  height: min(74dvh, 660px);
  min-height: 480px;
  overflow: hidden;
  color: #fff;
  background: #1c2a24;
  border-radius: 0 0 32px 32px;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1600ms ease;
}
.hero-img.is-active { opacity: 1; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.4px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.hero-place { display: flex; min-width: 0; align-items: center; gap: 5px; color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.hero-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-place .icon { width: 14px; height: 14px; flex: none; }
.hero-dots { display: flex; gap: 6px; }
.hero-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); transition: width 300ms ease, background 300ms ease; }
.hero-dots span.is-active { width: 22px; background: #fff; }

.home-body { padding-bottom: calc(110px + var(--safe-bottom)); }

.trip-list { display: grid; gap: 14px; }
.trip-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 210px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  color: #fff;
  background: #22332b;
  box-shadow: var(--shadow);
  text-align: left;
}
.trip-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trip-card-cities { color: rgba(255, 255, 255, 0.85); font-size: 13px; font-weight: 600; }
.trip-card-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.6px; }
.trip-card-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 13px; }
.trip-card-meta strong { font-size: 15px; }

.chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chip .icon { width: 16px; height: 16px; }
.chip-glass { border-color: rgba(255, 255, 255, 0.3); color: #fff; background: rgba(15, 25, 20, 0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.chip-accent { border-color: transparent; color: #26331a; background: #dff0c4; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips + .chips { margin-top: 10px; }

.home-empty { padding: 34px 22px; border: 1.5px dashed #cfd6cb; border-radius: var(--radius-lg); text-align: center; }
.home-empty .icon { width: 34px; height: 34px; color: var(--brand-2); }
.home-empty h3 { margin: 10px 0 6px; font-family: var(--font-display); font-size: 19px; }
.home-empty p { color: var(--muted); }

.verse-card { margin: 26px 4px 8px; text-align: center; }
.verse-card blockquote { color: var(--brand); font-family: var(--font-serif); font-size: 18px; font-style: italic; line-height: 1.4; }
.verse-card figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }

.footnote { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.footnote a { color: inherit; }


/* Viagem */
.trip-body { padding-bottom: calc(var(--tab-h) + 40px + var(--safe-bottom)); }
.tab-panel { display: grid; gap: 14px; animation: screen-in 220ms ease; }
/* Sem isso, faixas com rolagem lateral alargam a grade e a página inteira. */
.tab-panel > * { min-width: 0; }

.tab-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  display: grid;
  max-width: 520px;
  min-height: calc(var(--tab-h) + var(--safe-bottom));
  margin: 0 auto;
  padding: 6px 6px var(--safe-bottom);
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.tab-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background: none;
  font-size: 10.5px;
  font-weight: 700;
}
.tab-bar button .icon { width: 22px; height: 22px; }
.tab-bar button.is-active { color: var(--brand); }
.tab-bar button.is-active .icon { stroke-width: 2.4; }
.tab-bar button.is-active::before { content: ""; position: absolute; width: 28px; height: 3px; margin-top: -54px; border-radius: 3px; background: var(--brand); }

.card { padding: 16px; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius); background: var(--surface); box-shadow: 0 2px 10px rgba(21, 32, 27, 0.03); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.card-head h2 .icon { width: 18px; height: 18px; color: var(--brand-2); }
.muted { color: var(--muted); }

.cover { position: relative; height: 210px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: #22332b; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 14, 0) 30%, rgba(10, 18, 14, 0.78) 100%); }
.cover-copy { position: absolute; right: 16px; bottom: 26px; left: 16px; }
.cover-cities { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.cover-dates { margin-top: 2px; color: rgba(255, 255, 255, 0.85); font-size: 13px; }
.cover-countdown { position: absolute; top: 14px; left: 14px; }

.photo-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 2;
  max-width: 70%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
a.photo-credit:hover { text-decoration: underline; }
.cover .photo-credit { right: 14px; bottom: 8px; left: 16px; max-width: none; text-align: right; }

.discover-cta {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #2f7458 100%);
  box-shadow: 0 10px 24px rgba(30, 74, 56, 0.25);
  text-align: left;
}
.discover-cta > span:nth-child(2) { display: grid; flex: 1; }
.discover-cta strong { font-family: var(--font-display); font-size: 16px; }
.discover-cta small { color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.discover-cta-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, 0.16); }

.timeline { display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; padding: 10px 0; }
.timeline li::before { content: ""; position: absolute; top: 30px; bottom: -10px; left: 12px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline-dot { position: relative; z-index: 1; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: var(--brand-2); font-size: 12px; font-weight: 800; }
.timeline strong { display: block; font-size: 15px; }
.timeline small { display: block; color: var(--muted); font-size: 13px; }
.timeline .lodging { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--ink-2); font-size: 13px; }
.timeline .lodging .icon { width: 15px; height: 15px; color: var(--muted); }

.h-scroll { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.h-scroll::-webkit-scrollbar { display: none; }
.mini-place { position: relative; width: 132px; height: 150px; flex: none; overflow: hidden; border: 0; border-radius: 16px; color: #fff; background: #22332b; scroll-snap-align: start; text-align: left; }
.mini-place img { width: 100%; height: 100%; object-fit: cover; }
.mini-place span { position: absolute; right: 0; bottom: 0; left: 0; padding: 26px 10px 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.75)); font-size: 13px; font-weight: 700; line-height: 1.2; }

.budget-total { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.8px; }
.progress { height: 8px; margin: 12px 0 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-2), #6aa780); transition: width 400ms ease; }
.progress span.is-over { background: linear-gradient(90deg, var(--accent), var(--danger)); }
.budget-caption { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }

/* Roteiro */
.day-strip { display: flex; gap: 8px; overflow-x: auto; margin: -4px -16px 0; padding: 4px 16px 6px; scrollbar-width: none; }
.day-strip::-webkit-scrollbar { display: none; }
.day-chip { display: grid; min-width: 62px; flex: none; justify-items: center; gap: 1px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.day-chip small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.day-chip strong { font-family: var(--font-display); font-size: 20px; line-height: 1.1; }
.day-chip i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.day-chip.has-items i { background: var(--accent); }
.day-chip.is-active { border-color: var(--brand); color: #fff; background: var(--brand); }
.day-chip.is-active small { color: rgba(255, 255, 255, 0.75); }
.day-chip.is-active.has-items i { background: #c8e6a0; }
.day-header h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.day-header p { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.day-header .icon { width: 16px; height: 16px; }

.stops { display: grid; gap: 0; }
.stop { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.stop-time { padding-top: 14px; color: var(--ink-2); font-family: var(--font-display); font-size: 14px; font-weight: 800; text-align: right; }
.stop-card { display: grid; grid-template-columns: 18px 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.stop-card img, .stop-icon { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.stop-icon { display: grid; place-items: center; color: var(--brand-2); background: var(--brand-soft); }
.stop-info { min-width: 0; }
.stop-info strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.stop-info small { display: block; color: var(--muted); font-size: 13px; }
.travel-leg { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.travel-leg span { display: flex; align-items: center; gap: 6px; margin: 4px 0 4px 26px; padding: 8px 0 8px 18px; border-left: 2px dashed #cfd6cb; color: var(--muted); font-size: 12px; }
.travel-leg .icon { width: 15px; height: 15px; }
.day-empty { padding: 26px 18px; border: 1.5px dashed #cfd6cb; border-radius: var(--radius); color: var(--muted); text-align: center; }
.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row-actions .btn { padding: 0 12px; font-size: 14px; }

/* Descobrir: resumo */
.list-title { display: flex; align-items: center; gap: 8px; margin: 8px 2px -2px; font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.count-pill { padding: 1px 9px; border-radius: 999px; color: var(--brand); background: var(--brand-soft); font-size: 13px; }
.place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.place-tile { position: relative; height: 150px; overflow: hidden; padding: 0; border: 0; border-radius: 16px; color: #fff; background: #22332b; text-align: left; }
.place-tile img { width: 100%; height: 100%; object-fit: cover; }
.place-tile span { position: absolute; right: 0; bottom: 0; left: 0; display: grid; padding: 28px 10px 10px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78)); }
.place-tile strong { font-size: 14px; line-height: 1.2; }
.place-tile small { color: rgba(255, 255, 255, 0.8); font-size: 12px; }
.place-tile .tile-badge { position: absolute; top: 8px; right: 8px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--brand); }
.place-tile .tile-badge .icon { width: 16px; height: 16px; }
.empty-note { grid-column: 1 / -1; padding: 18px; border: 1.5px dashed #cfd6cb; border-radius: 16px; color: var(--muted); font-size: 14px; text-align: center; }

/* Descobrir: tela do swipe */
.screen-deck { display: flex; height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; }
.select-chip { display: inline-flex; max-width: 42%; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.select-chip .icon { width: 16px; height: 16px; color: var(--brand-2); }
.select-chip select { min-width: 0; height: 40px; border: 0; background: transparent; font-size: 14px; font-weight: 700; appearance: none; -webkit-appearance: none; }
.deck { position: relative; display: grid; min-height: 0; flex: 1; margin: 12px 16px 0; }
.place-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
  touch-action: none;
  user-select: none;
  cursor: grab;
  transition: transform 180ms ease, opacity 180ms ease;
}
.place-card.is-back { transform: scale(0.95) translateY(14px); opacity: 0.7; pointer-events: none; box-shadow: var(--shadow); }
.place-card.is-dragging { cursor: grabbing; transition: none; will-change: transform; }
.place-card.is-flying { transition: transform 240ms ease-in, opacity 240ms ease-in; pointer-events: none; }
.place-photo { position: relative; min-height: 0; flex: 1; background: #22332b; }
.place-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.place-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.8) 100%); }
.place-tags { position: absolute; top: 14px; right: 14px; left: 14px; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.place-overlay { position: absolute; right: 18px; bottom: 16px; left: 18px; z-index: 2; color: #fff; }
.place-overlay h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.7px; line-height: 1.12; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.place-overlay p { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: rgba(255, 255, 255, 0.88); font-size: 14px; font-weight: 600; }
.place-overlay p .icon { width: 15px; height: 15px; }
.place-photo .photo-credit { bottom: auto; top: 54px; right: 14px; }
.place-info { display: grid; gap: 10px; padding: 14px 18px 16px; }
.place-desc { display: -webkit-box; overflow: hidden; color: var(--ink-2); font-size: 14px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.place-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.place-meta .chip { min-height: 28px; font-size: 12px; }
.details-btn { margin-left: auto; }
.swipe-badge { position: absolute; top: 26px; z-index: 3; padding: 6px 14px; border: 3px solid currentColor; border-radius: 12px; background: rgba(255, 255, 255, 0.92); font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: 1px; opacity: 0; pointer-events: none; }
.badge-like { left: 22px; color: #2d7a52; opacity: var(--like, 0); transform: rotate(-12deg); }
.badge-skip { right: 22px; color: var(--danger); opacity: var(--skip, 0); transform: rotate(12deg); }
.badge-maybe { top: auto; bottom: 46%; left: 50%; color: var(--gold); opacity: var(--maybe, 0); transform: translateX(-50%); }
.deck-actions { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 16px 16px 4px; }
.round-btn { display: grid; width: 60px; height: 60px; place-items: center; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform 120ms ease; }
.round-btn:active { transform: scale(0.92); }
.round-btn:disabled { opacity: 0.4; }
.round-btn .icon { width: 26px; height: 26px; }
.round-skip { color: var(--danger); }
.round-maybe { width: 52px; height: 52px; color: var(--gold); }
.round-like { width: 70px; height: 70px; color: #fff; background: var(--brand); }
.round-like .icon { width: 30px; height: 30px; fill: currentColor; }
.deck-hint { padding-bottom: calc(10px + var(--safe-bottom)); color: var(--muted); font-size: 12px; text-align: center; }
.deck-empty { display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; border: 1.5px dashed #cfd6cb; border-radius: 26px; text-align: center; }
.deck-empty .icon { width: 40px; height: 40px; color: var(--brand-2); }
.deck-empty h2 { font-family: var(--font-display); font-size: 20px; }
.deck-empty p { color: var(--muted); }
.toast {
  position: fixed;
  right: 0;
  top: calc(var(--bar-h) + 10px + var(--safe-top));
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  color: #fff;
  background: rgba(21, 32, 27, 0.92);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.toast.is-visible { opacity: 1; transform: none; }

/* Custos */
.money-card { padding: 18px; border-radius: var(--radius-lg); color: #fff; background: radial-gradient(circle at 100% 0%, #3d8a68 0%, var(--brand) 60%); box-shadow: 0 14px 30px rgba(30, 74, 56, 0.25); }
.money-top { display: flex; align-items: center; justify-content: space-between; color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 600; }
.money-big { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -1px; }
.progress-light { background: rgba(255, 255, 255, 0.18); }
.progress-light span { background: #c8e6a0; }
.money-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.money-grid div { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); }
.money-grid span { color: rgba(255, 255, 255, 0.72); font-size: 12px; }
.money-grid strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.category-bars { display: grid; gap: 12px; }
.category-bar { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.category-bar .cat-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: var(--brand-2); background: var(--brand-soft); }
.category-bar .cat-icon .icon { width: 18px; height: 18px; }
.category-bar strong { font-size: 14px; }
.category-bar .progress { height: 6px; margin: 6px 0 0; }
.category-bar em { color: var(--ink-2); font-size: 14px; font-style: normal; font-weight: 700; }
.disclosure summary { display: flex; align-items: center; gap: 8px; font-weight: 700; list-style: none; cursor: pointer; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary .icon { width: 18px; height: 18px; color: var(--brand-2); }
.disclosure summary span { color: var(--muted); font-weight: 600; }
.disclosure .chevron { margin-left: auto; color: var(--muted); transition: transform 200ms ease; }
.disclosure[open] .chevron { transform: rotate(180deg); }
.disclosure .field-row { margin-top: 14px; }
.expense-list { display: grid; gap: 14px; }
.expense-day h4 { margin: 0 2px 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.expense-group { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.expense-row { display: grid; grid-template-columns: 40px 1fr auto 32px; gap: 10px; align-items: center; padding: 12px; }
.expense-row + .expense-row { border-top: 1px solid var(--line); }
.expense-row .cat-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: var(--brand-2); background: var(--brand-soft); }
.expense-row .cat-icon .icon { width: 19px; height: 19px; }
.expense-row strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.expense-row small { color: var(--muted); font-size: 12px; }
.expense-amount { text-align: right; }
.expense-amount strong { font-size: 15px; }
.expense-amount small { display: block; }
.remove-btn { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.remove-btn .icon { width: 17px; height: 17px; }
.remove-btn:hover { color: var(--danger); background: #fbeae7; }
.fab {
  position: fixed;
  right: max(16px, calc(50% - 260px + 16px));
  bottom: calc(var(--tab-h) + 18px + var(--safe-bottom));
  z-index: 24;
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  border: 0;
  border-radius: 20px;
  color: var(--brand-deep);
  background: var(--accent);
  box-shadow: 0 12px 26px rgba(255, 128, 104, 0.45);
}
.fab .icon { width: 28px; height: 28px; }

/* Guia */
.guide-hero { padding: 18px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, #234f60 0%, var(--brand) 100%); }
.guide-hero h2 { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.5px; }
.guide-hero p { margin-top: 4px; color: rgba(255, 255, 255, 0.82); font-size: 14px; }
.guide-country { display: grid; gap: 12px; }
.guide-country-title { display: flex; align-items: center; gap: 10px; margin: 6px 2px 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.guide-country-title small { color: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 600; }
.info-list { display: grid; gap: 12px; }
.info-item { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.info-item .info-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--brand-2); background: var(--brand-soft); }
.info-item .info-icon.warn { color: #9a5b14; background: var(--gold-soft); }
.info-item .info-icon .icon { width: 18px; height: 18px; }
.info-item strong { display: block; font-size: 14px; }
.info-item p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.weather { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.weather div { display: grid; gap: 2px; padding: 12px 10px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.weather span { color: var(--muted); font-size: 12px; }
.weather strong { font-family: var(--font-display); font-size: 20px; }
.weather-text { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.tips { display: grid; gap: 6px; margin-top: 10px; }
.tips li { display: flex; gap: 8px; color: var(--ink-2); font-size: 14px; }
.tips .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--brand-2); }
.sources { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; }
.sources a { color: var(--muted); }
.checklist { display: grid; gap: 2px; }
.check-item { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 10px 4px; border-radius: 12px; cursor: pointer; }
.check-item input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand-2); }
.check-item strong { display: block; font-size: 15px; font-weight: 600; }
.check-item small { display: block; color: var(--muted); font-size: 13px; }
.check-item:has(input:checked) strong { color: var(--muted); text-decoration: line-through; }
.check-progress { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 600; }
.guide-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* Formulários */
.field { display: grid; gap: 6px; color: var(--ink-2); font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--surface);
  font-size: 16px;
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input[type="date"], .field input[type="time"] { display: block; line-height: 48px; }
.field input:focus, .field select:focus { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 3px rgba(45, 106, 80, 0.15); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-status { min-height: 18px; margin-bottom: 8px; color: var(--danger); font-size: 13px; font-weight: 600; text-align: center; }
.form-status:empty { display: none; }

/* Assistente de cadastro */
.wizard-progress { height: 4px; background: var(--surface-2); }
.wizard-progress span { display: block; height: 100%; background: var(--brand-2); transition: width 300ms ease; }
.wizard-body { padding-bottom: calc(120px + var(--safe-bottom)); }
.wizard-intro { margin: 6px 2px 18px; }
.wizard-intro h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.15; }
.wizard-intro p { margin-top: 6px; color: var(--muted); }
.wizard-footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; max-width: 520px; margin: 0 auto; padding: 12px 16px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(245, 243, 238, 0.96); backdrop-filter: blur(12px); }

.search-box { position: relative; }
.search-box .icon { position: absolute; top: 15px; left: 14px; color: var(--muted); }
.search-box input { width: 100%; min-height: 52px; padding: 0 14px 0 44px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 16px; }
.search-box input:focus { border-color: var(--brand-2); outline: none; box-shadow: 0 0 0 3px rgba(45, 106, 80, 0.15); }
.selected-cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.selected-cities .chip { padding-right: 4px; border-color: var(--brand-2); color: var(--brand); background: var(--brand-soft); }
.selected-cities .chip button { display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--brand); background: rgba(255, 255, 255, 0.7); }
.selected-cities .chip button .icon { width: 14px; height: 14px; }
.city-list { margin-top: 10px; }
.city-group-title { margin: 16px 4px 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.city-option { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.city-option .city-icon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 12px; color: var(--brand-2); background: var(--brand-soft); }
.city-option .city-icon .icon { width: 17px; height: 17px; }
.city-option span:nth-child(2) { display: grid; flex: 1; }
.city-option strong { font-size: 15px; font-weight: 600; }
.city-option small { color: var(--muted); font-size: 12px; }
.city-option .check { display: grid; width: 26px; height: 26px; place-items: center; border: 1.5px solid var(--line); border-radius: 50%; color: transparent; }
.city-option .check .icon { width: 15px; height: 15px; }
.city-option.is-selected .check { border-color: var(--brand-2); color: #fff; background: var(--brand-2); }

.calendar { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.calendar-head strong { font-family: var(--font-display); font-size: 16px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.calendar-grid .dow { padding: 4px 0; color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; text-transform: uppercase; }
.calendar-day { position: relative; height: 42px; padding: 0; border: 0; background: transparent; font-size: 15px; font-weight: 600; }
.calendar-day span { position: relative; z-index: 1; display: inline-grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; }
.calendar-day:disabled { color: #c3c7c1; cursor: default; }
.calendar-day.is-today span { box-shadow: inset 0 0 0 1.5px var(--accent); }
.calendar-day.in-range::before { content: ""; position: absolute; inset: 2px 0; background: var(--brand-soft); }
.calendar-day.is-start::before { left: 50%; }
.calendar-day.is-end::before { right: 50%; }
.calendar-day.is-start.is-end::before { display: none; }
.calendar-day.is-start span, .calendar-day.is-end span { color: #fff; background: var(--brand); }
.range-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.range-summary div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.range-summary div.is-focus { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(45, 106, 80, 0.12); }
.range-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.range-summary strong { font-size: 15px; }
.nights-note { margin-top: 12px; color: var(--brand); font-weight: 700; text-align: center; }

.stepper-list { display: grid; gap: 10px; }
.stepper-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.stepper-row strong { display: block; font-size: 15px; }
.stepper-row small { color: var(--muted); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper output { min-width: 58px; font-weight: 700; text-align: center; }

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option-tile { display: grid; min-height: 84px; justify-items: start; align-content: space-between; gap: 8px; padding: 14px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); font-weight: 700; text-align: left; transition: border-color 150ms ease, background 150ms ease; }
.option-tile .icon { width: 24px; height: 24px; color: var(--brand-2); }
.option-tile.is-selected { border-color: var(--brand-2); background: var(--brand-soft); }
.option-group-title { margin: 20px 2px 10px; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-weight: 600; }
.toggle-row + .toggle-row { margin-top: 8px; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: #d6d9d3; transition: background 160ms ease; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 160ms ease; }
.switch input:checked + span { background: var(--brand-2); }
.switch input:checked + span::after { transform: translateX(20px); }
.amount-input { display: flex; align-items: baseline; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.amount-input span { color: var(--muted); font-size: 20px; font-weight: 700; }
.amount-input input { width: 100%; min-width: 0; border: 0; background: transparent; font-family: var(--font-display); font-size: 34px; font-weight: 800; letter-spacing: -1px; outline: none; }
.segmented { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.segmented button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 700; }
.segmented button.is-selected { border-color: var(--brand); color: #fff; background: var(--brand); }

/* Janela que sobe de baixo */
.sheet {
  outline: none;
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 26px 26px 0 0;
  color: var(--ink);
  background: var(--bg);
  box-shadow: var(--shadow-strong);
}
.sheet[open] { animation: sheet-in 260ms ease; }
.sheet::backdrop { background: rgba(10, 18, 14, 0.45); backdrop-filter: blur(2px); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-handle { width: 42px; height: 5px; margin: 10px auto 0; border-radius: 999px; background: #cfd0ca; }
.sheet-content { display: grid; gap: 14px; overflow-y: auto; max-height: calc(88dvh - 20px); padding: 14px 18px calc(22px + var(--safe-bottom)); }
.sheet-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sheet-title h2 { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.sheet-photo { position: relative; height: 220px; overflow: hidden; margin: 0 -18px; }
.sheet-photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet-text { color: var(--ink-2); line-height: 1.6; }
.text-credit { color: var(--muted); font-size: 12px; }
.text-credit a { color: inherit; }
.link-list { display: flex; flex-wrap: wrap; gap: 8px; }
.link-list a { text-decoration: none; }
.cat-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat-chip { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 11px; font-weight: 700; }
.cat-chip .icon { width: 22px; height: 22px; color: var(--brand-2); }
.cat-chip.is-selected { border-color: var(--brand-2); background: var(--brand-soft); }

@media (min-width: 560px) {
  body { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
.unconfirmed { margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.unconfirmed li + li { margin-top: 6px; }

/* Mensagens do dia e do orçamento */
.budget-message { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: #fff; background: rgba(255, 255, 255, 0.12); font-size: 13px; line-height: 1.45; }

/* Meu Baú: cartão no Resumo */
.memories-card { display: grid; gap: 12px; }
.memories-card-main { display: flex; width: 100%; align-items: center; gap: 12px; padding: 0; border: 0; color: inherit; background: none; text-align: left; }
.memories-card-main > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.memories-card-main strong { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.memories-card-main small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.memories-card-main > .icon { color: var(--muted); }
.memories-card-icon { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 14px; color: var(--brand-deep); background: linear-gradient(135deg, var(--mint) 50%, var(--accent) 50%); }
.memories-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.memories-thumbs img { width: 100%; aspect-ratio: 1; border-radius: 12px; background: var(--surface-2); object-fit: cover; }

/* Meu Baú: aba */
.memories-hero { display: grid; justify-items: center; gap: 8px; padding: 22px 18px 18px; border-radius: var(--radius-lg); color: #fff; background: var(--brand); text-align: center; }
.memories-hero h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.memories-hero p { max-width: 320px; color: rgba(255, 255, 255, 0.88); line-height: 1.5; }
.memories-hero .btn { margin-top: 6px; }
.memories-hero-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--brand-deep); background: linear-gradient(135deg, var(--mint) 50%, var(--accent) 50%); }
.memories-hero-icon .icon { width: 26px; height: 26px; }
.private-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; color: rgba(255, 255, 255, 0.92); background: rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 600; }
.private-pill .icon { width: 14px; height: 14px; }
.memories-empty { display: grid; justify-items: center; gap: 8px; padding: 26px 18px; border: 1.5px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; line-height: 1.5; }
.memories-empty .icon { width: 30px; height: 30px; color: var(--brand-2); }
.memory-day { display: grid; gap: 10px; }
.memory-day h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: -0.2px; }
.memory-card { display: grid; width: 100%; overflow: hidden; padding: 0; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius); color: inherit; background: var(--surface); text-align: left; }
.memory-photos { position: relative; display: grid; height: 190px; gap: 3px; }
.memory-photos.count-2 { grid-template-columns: 1fr 1fr; }
.memory-photos.count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.memory-photos.count-3 img:first-child { grid-row: span 2; }
.memory-photos img { width: 100%; height: 100%; min-height: 0; background: var(--surface-2); object-fit: cover; }
.memory-more { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; color: #fff; background: rgba(10, 18, 14, 0.6); font-size: 12px; font-weight: 700; }
.memory-body { display: grid; gap: 4px; padding: 12px 14px 14px; }
.memory-body strong { font-family: var(--font-display); font-size: 16px; }
.memory-snippet { display: -webkit-box; overflow: hidden; color: var(--ink-2); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.memory-body small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.memory-body small .icon { width: 13px; height: 13px; }
.backup-tip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--gold-soft); font-size: 13px; line-height: 1.45; }
.backup-tip .icon { color: var(--gold); }
.backup-tip .link-btn { grid-column: 2; justify-self: start; }
.memory-gallery { display: flex; overflow-x: auto; height: 260px; margin: 0 -18px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.memory-gallery::-webkit-scrollbar { display: none; }
.memory-gallery img { width: 100%; height: 100%; flex: none; background: var(--surface-2); object-fit: cover; scroll-snap-align: center; }
.memory-text { white-space: pre-wrap; }
img.is-missing { visibility: hidden; }

/* Meu Baú: formulário */
.memory-lead { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--brand); background: var(--brand-soft); font-weight: 600; line-height: 1.45; }
.photo-picker { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.photo-picker::-webkit-scrollbar { display: none; }
.picker-thumb { position: relative; width: 92px; height: 92px; flex: none; }
.picker-thumb img { width: 100%; height: 100%; border-radius: 14px; background: var(--surface-2); object-fit: cover; }
.picker-remove { position: absolute; top: 4px; right: 4px; display: grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: 999px; color: #fff; background: rgba(10, 18, 14, 0.65); }
.picker-remove .icon { width: 14px; height: 14px; }
.picker-add { display: grid; width: 92px; height: 92px; flex: none; place-content: center; justify-items: center; gap: 4px; border: 1.5px dashed var(--brand-2); border-radius: 14px; color: var(--brand); background: var(--brand-soft); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; }
.picker-add:focus-within { outline: 3px solid rgba(45, 106, 80, 0.45); outline-offset: 2px; }
.field-hint { margin-top: -6px; color: var(--muted); font-size: 13px; font-style: italic; }
.field-hint:empty { display: none; }
.inspiration-btn { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: -6px; font-size: 13px; }
.inspiration-btn .icon { width: 15px; height: 15px; }
.privacy-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.privacy-note .icon { width: 14px; height: 14px; flex: none; }
.confirm-box { display: grid; gap: 10px; padding: 14px; border: 1px solid #f1cdc6; border-radius: var(--radius); background: #fff6f4; line-height: 1.45; }
.field textarea { min-height: 120px; padding-top: 12px; padding-bottom: 12px; resize: vertical; line-height: 1.5; }

/* Ajustes */
.settings-section { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.settings-section h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.settings-section h3 .icon { width: 18px; height: 18px; color: var(--brand-2); }
.settings-meta { display: flex; align-items: flex-start; gap: 6px; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.settings-meta .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-2); }
.settings-ok { display: flex; align-items: center; gap: 8px; color: var(--brand); font-weight: 700; }
.settings-steps { display: grid; gap: 6px; padding-left: 20px; color: var(--ink-2); line-height: 1.5; }
.settings-steps .icon { width: 15px; height: 15px; vertical-align: -2px; }
.settings-section label.btn { cursor: pointer; }
.memories-hero .btn-primary { color: var(--brand); background: #FFFDF5; box-shadow: none; }
.hero-credit { display: block; overflow: hidden; color: rgba(255, 255, 255, 0.72); font-size: 10px; text-decoration: none; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); white-space: nowrap; }

/* Convite leve para guardar memória */
.invite-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px; border: 1px solid rgba(86, 215, 174, 0.45); border-radius: var(--radius); background: linear-gradient(135deg, #effbf6 0%, #fff4f1 100%); }
.invite-card p { color: var(--ink); font-weight: 600; line-height: 1.45; }
.invite-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; color: var(--brand-deep); background: linear-gradient(135deg, var(--mint) 50%, var(--accent) 50%); }
.invite-actions { display: flex; grid-column: 1 / -1; align-items: center; gap: 14px; }
.invite-actions .btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
#home-invite { margin-bottom: 14px; }

/* Encerramento da viagem */
.closure-card { display: grid; justify-items: center; gap: 8px; padding: 22px 18px 14px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%); text-align: center; }
.closure-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.closure-card p { max-width: 320px; color: rgba(255, 255, 255, 0.88); line-height: 1.5; }
.closure-card .btn-primary { margin-top: 6px; color: var(--brand); background: #FFFDF5; box-shadow: none; }
.closure-card .link-btn { color: rgba(255, 255, 255, 0.85); }
.closure-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; color: var(--brand-deep); background: linear-gradient(135deg, var(--mint) 50%, var(--accent) 50%); }

/* Botão claro sobre fundo verde (Baú) */
.btn-ghost-light { color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); }

/* Retrospectiva */
.retro-body { display: grid; gap: 18px; padding-bottom: calc(40px + var(--safe-bottom)); }
.retro-cover { position: relative; height: 380px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: var(--brand); }
.retro-cover img { width: 100%; height: 100%; object-fit: cover; }
.retro-cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 18, 14, 0) 40%, rgba(10, 18, 14, 0.8) 100%); }
.retro-cover-copy { position: absolute; right: 18px; bottom: 18px; left: 18px; display: grid; gap: 4px; }
.retro-cover-copy h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.1; }
.retro-cover-copy p { color: rgba(255, 255, 255, 0.86); font-size: 13px; }
.retro-lead { color: var(--brand); font-family: Georgia, serif; font-size: 17px; line-height: 1.5; text-align: center; }
.retro-day { display: grid; gap: 12px; }
.retro-day-head { display: grid; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.retro-day-num { color: var(--brand-2); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.retro-day-head h3 { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.retro-day-head small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.retro-day-head small .icon { width: 14px; height: 14px; }
.retro-memory { display: grid; gap: 8px; }
.retro-memory img { width: 100%; max-height: 520px; border-radius: var(--radius); background: var(--surface-2); object-fit: cover; }
.retro-memory-text { display: grid; gap: 4px; padding: 0 2px; }
.retro-memory-text h4 { font-family: var(--font-display); font-size: 17px; font-weight: 800; }
.retro-memory-text p { color: var(--ink-2); font-family: Georgia, serif; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }
.retro-memory-text small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.retro-memory-text small .icon { width: 14px; height: 14px; }
.retro-end { padding: 18px; border-radius: var(--radius); color: var(--brand); background: var(--brand-soft); font-family: Georgia, serif; font-size: 17px; line-height: 1.5; text-align: center; }
.retro-privacy { justify-content: center; }
.retro-help { font-size: 13px; line-height: 1.5; }
.retro-edit-row { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.retro-edit-row.is-hidden { opacity: 0.55; }
.retro-edit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.retro-edit-info { display: grid; min-width: 0; gap: 2px; }
.retro-edit-info small { color: var(--muted); font-size: 12px; }
.retro-edit-info strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.retro-edit-photos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.retro-cover-pick { position: relative; width: 72px; height: 72px; flex: none; padding: 0; border: 2px solid transparent; border-radius: 14px; background: none; }
.retro-cover-pick img { width: 100%; height: 100%; border-radius: 12px; object-fit: cover; }
.retro-cover-pick.is-cover { border-color: var(--accent); }
.retro-cover-pick span { position: absolute; right: 4px; bottom: 4px; left: 4px; padding: 1px 0; border-radius: 999px; color: var(--brand-deep); background: var(--accent); font-size: 10px; font-weight: 800; text-align: center; }
.retro-edit-order { display: flex; gap: 8px; }
.retro-edit-order .icon-btn:disabled { opacity: 0.35; }

/* Contagem regressiva e dia da viagem */
.countdown-card { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius); background: var(--surface); }
.countdown-label { color: var(--brand-2); font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.countdown-units { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 8px; }
.countdown-units div { display: grid; justify-items: center; padding: 10px 4px; border-radius: 14px; background: var(--brand-soft); }
.countdown-units strong { color: var(--brand); font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.countdown-units span { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.countdown-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
.countdown-note .link-btn { padding: 0; font-size: 13px; }
.countdown-day { display: flex; align-items: baseline; gap: 6px; }
.countdown-day strong { color: var(--brand); font-family: var(--font-display); font-size: 30px; font-weight: 800; }
.countdown-day span { color: var(--ink-2); font-size: 16px; font-weight: 600; }
.departure-field { margin-top: 14px; }
.departure-field small { color: var(--muted); font-size: 12px; font-weight: 500; }

/* Editar viagem */
.edit-options { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.edit-options button { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px; border: 0; border-top: 1px solid var(--line); color: var(--ink); background: none; font-size: 15px; font-weight: 700; text-align: left; }
.edit-options button:first-child { border-top: 0; }
.edit-options button > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.edit-options button > span .icon { width: 18px; height: 18px; }
.edit-options button > .icon:last-child { margin-left: auto; color: var(--muted); }

/* Compartilhar memória */
.share-preview { display: grid; place-items: center; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.share-preview img { width: auto; max-width: 100%; max-height: 46dvh; border-radius: 12px; box-shadow: var(--shadow); aspect-ratio: 4 / 5; object-fit: contain; background: var(--surface); }
.share-preview[data-format="story"] img { aspect-ratio: 9 / 16; }
.share-photos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.share-toggles { display: grid; gap: 4px; }

/* Hospedagens no Resumo */
.lodging-item { display: flex; width: 100%; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface-2); text-align: left; }
.lodging-item > .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-2); }
.lodging-item span { display: grid; min-width: 0; gap: 2px; }
.lodging-item strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lodging-item small { color: var(--muted); font-size: 12px; }
.lodging-gap { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: #9a6a12; font-size: 12px; font-weight: 600; }
.lodging-gap .icon { width: 14px; height: 14px; }

/* Localizar endereço */
.geo-results { display: grid; gap: 6px; }
.geo-results:empty { display: none; }
.geo-option { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); font-size: 13px; line-height: 1.4; text-align: left; }
.geo-option > .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-2); }
.geo-option small { display: block; margin-top: 2px; color: var(--muted); }
.geo-status { display: flex; align-items: flex-start; gap: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.geo-status .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.geo-status.is-ok { color: var(--brand); font-weight: 600; }

/* Roteiro: saída e volta da hospedagem */
.stop-home .stop-time .icon { width: 18px; height: 18px; color: var(--brand-2); }
.home-card { border-style: dashed; background: var(--brand-soft); }
.day-notice-card { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: var(--gold-soft); font-size: 13px; line-height: 1.45; list-style: none; }
.day-notice-card > .icon { width: 18px; height: 18px; flex: none; color: var(--gold); }
.day-notice-card p { margin: 2px 0 4px; color: var(--ink-2); }

/* Álbum em PDF */
.album-preview { display: flex; gap: 10px; overflow-x: auto; padding: 12px; border-radius: var(--radius); background: var(--surface-2); scroll-snap-type: x mandatory; scrollbar-width: none; }
.album-preview::-webkit-scrollbar { display: none; }
.album-preview figure { display: grid; flex: none; gap: 4px; margin: 0; scroll-snap-align: start; }
.album-preview img { width: 150px; height: 212px; border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); object-fit: cover; }
.album-preview figcaption { color: var(--muted); font-size: 11px; font-weight: 700; text-align: center; }
.form-status.is-info { color: var(--muted); font-weight: 600; }

/* Descobrir: listas recolhidas */
.discover-group .place-grid { margin-top: 14px; }
.discover-group summary .count-pill { margin-left: 4px; }
.album-preview[data-format="carousel"] img { height: 188px; }
.discover-group summary .count-pill { color: var(--brand); font-weight: 800; }

/* Roteiro: arrastar paradas */
.stop-card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.drag-handle { display: grid; place-items: center; margin-right: -6px; color: #b3b8b2; cursor: grab; touch-action: none; }
.drag-handle .icon { width: 18px; height: 18px; }
.stop-home .home-card { grid-template-columns: 56px 1fr; }
.stops.is-reordering .travel-leg { display: none; }
.stops.is-reordering .stop { transition: transform 160ms ease; }
.stop.is-dragging { position: relative; z-index: 5; transition: none !important; }
.stop.is-dragging .stop-card { border-color: var(--brand-2); box-shadow: 0 16px 34px rgba(21, 32, 27, 0.22); }

/* Vídeo da viagem */
.video-stage { display: grid; min-height: 120px; place-items: center; padding: 12px; border-radius: var(--radius); background: var(--surface-2); }
.video-stage video { width: auto; max-width: 100%; max-height: 52dvh; border-radius: 14px; background: #000; aspect-ratio: 9 / 16; }
.video-label { margin-bottom: -6px; font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.track-list { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.track { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); }
.track:first-child { border-top: 0; }
.track.is-selected { background: var(--brand-soft); }
.track-play { display: grid; width: 40px; height: 40px; flex: none; place-items: center; padding: 0; border: 0; border-radius: 12px; color: var(--brand); background: var(--surface-2); }
.track.is-selected .track-play { color: #fff; background: var(--brand); }
.track-play .icon { width: 18px; height: 18px; }
.track-pick { display: grid; flex: 1; gap: 1px; padding: 4px 0; border: 0; color: var(--ink); background: none; text-align: left; }
.track-pick strong { font-size: 15px; }
.track-pick small { color: var(--muted); font-size: 12px; }

/* Moeda da viagem e leitura de recibo */
.budget-hint { margin-top: 6px; color: var(--muted); font-size: 12px; }
.receipt-btn { cursor: pointer; }
.receipt-box { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.receipt-box p { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.receipt-box .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.receipt-box small { color: var(--muted); font-size: 12px; }
.receipt-box.is-ok { background: var(--brand-soft); color: var(--brand); }
.receipt-box.is-warn { background: var(--gold-soft); }

/* ---------------------------------------------------------------------------
   Tela inicial: cabeçalho compacto, saudação, reflexão, viagem em foco,
   atalhos, inspiração e navegação de baixo.
   --------------------------------------------------------------------------- */
.home-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + var(--safe-top)) 16px 10px; background: rgba(245, 243, 238, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand-dark { color: var(--brand); font-size: 22px; letter-spacing: -0.6px; }
.brand-dark .brand-mark { width: 40px; height: 40px; border-radius: 11px; box-shadow: none; }
.brand-word { font-weight: 800; }
.brand-na { color: #2fb88c; }
.brand-mao { color: var(--accent); }
.avatar-btn { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 2px solid var(--surface); border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand) 0%, #2fb88c 100%); box-shadow: 0 4px 14px rgba(21, 32, 27, 0.18); font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.avatar-btn .icon { width: 20px; height: 20px; }

.home-body { display: grid; gap: 18px; padding-top: 4px; padding-bottom: calc(var(--tab-h) + 40px + var(--safe-bottom)); }
.home-body > * { min-width: 0; }
.home-greeting h1 { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -0.9px; line-height: 1.1; }
.home-greeting p { margin-top: 4px; color: var(--muted); font-size: 16px; }
.home-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }
.home-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Cartão de reflexão (Home e Resumo) */
.spotlight { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; overflow: hidden; padding: 18px 46px 26px 16px; border: 1px solid rgba(86, 215, 174, 0.55); border-radius: var(--radius-lg); background: linear-gradient(135deg, #FFFDF5 0%, #fff4ef 100%); box-shadow: 0 6px 20px rgba(255, 128, 104, 0.1); }
.spotlight-sun { display: grid; width: 46px; height: 46px; place-items: center; color: var(--accent); }
.spotlight-sun .icon { width: 40px; height: 40px; stroke-width: 2.2; }
.spotlight-copy { position: relative; z-index: 1; display: grid; gap: 6px; }
.spotlight-kicker { color: #d9573f; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.spotlight-text { color: var(--brand); font-family: Georgia, serif; font-size: 21px; line-height: 1.35; }
.spotlight-art { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 34px; pointer-events: none; }
.spotlight-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink-2); background: rgba(255, 255, 255, 0.7); }
.spotlight-close .icon { width: 16px; height: 16px; }

/* Viagem em foco */
.focus-card { overflow: hidden; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.focus-photo { position: relative; height: 176px; background: #22332b; }
.focus-photo img { width: 100%; height: 100%; object-fit: cover; }
.focus-chip { position: absolute; top: 12px; left: 12px; }
.focus-photo .photo-credit { right: 10px; bottom: 8px; }
.focus-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
.focus-body h2 { font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.6px; }
.focus-cities { color: var(--muted); font-size: 15px; font-weight: 600; }
.focus-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.focus-dates { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.focus-dates .icon { width: 18px; height: 18px; color: var(--brand-2); }
.focus-cta { min-height: 46px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.home-empty .btn { margin-top: 14px; }

/* Acesso rápido */
.quick-access { display: grid; gap: 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick-grid button { display: grid; justify-items: center; gap: 8px; padding: 12px 4px; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius); color: var(--ink); background: var(--surface); font-size: 13px; font-weight: 700; }
.quick-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; }
.quick-icon .icon { width: 24px; height: 24px; }
.quick-icon.is-mint { color: var(--brand); background: #ddf6ec; }
.quick-icon.is-coral { color: #d9573f; background: var(--accent-soft); }

/* Inspiração: carrossel de destinos com crédito */
.inspiration { display: grid; gap: 10px; }
.inspiration-card.hero { height: 214px; min-height: 0; border-radius: var(--radius-lg); }
.inspiration-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 18, 14, 0.62) 0%, rgba(10, 18, 14, 0.15) 70%), linear-gradient(180deg, rgba(10, 18, 14, 0) 55%, rgba(10, 18, 14, 0.6) 100%); }
.inspiration-kicker { position: absolute; top: 34px; left: 20px; max-width: 62%; color: #fff; font-family: Georgia, serif; font-size: 25px; line-height: 1.25; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.inspiration-meta { position: absolute; right: 56px; bottom: 30px; left: 16px; display: grid; gap: 2px; }
.inspiration-card .hero-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); }
.inspiration-card .hero-dots span { width: 5px; height: 5px; }
.inspiration-card .hero-dots span.is-active { width: 16px; }
.inspiration-arrow { position: absolute; top: 50%; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: #fff; background: rgba(10, 18, 14, 0.3); transform: translateY(-50%); }
.inspiration-arrow.is-prev { left: 8px; display: none; }
.inspiration-arrow.is-next { right: 10px; }
.inspiration-arrow .icon { width: 18px; height: 18px; }

/* Lista de viagens */
.all-trips { display: grid; gap: 10px; }
.trip-list { gap: 10px; }
.trip-card { position: static; display: flex; min-height: 0; align-items: center; gap: 12px; padding: 10px; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: none; }
.trip-card > img { position: static; width: 64px; height: 64px; flex: none; border-radius: 14px; }
.trip-card > .icon { flex: none; color: var(--muted); }
.trip-card-info { display: grid; min-width: 0; flex: 1; gap: 2px; }
.trip-card-name { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.trip-card-cities { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.trip-card-meta { margin-top: 2px; padding-top: 0; border-top: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.trip-card-meta [data-countdown] { display: inline-flex; align-items: center; gap: 4px; }
.trip-card-meta .icon { width: 13px; height: 13px; }

/* Navegação de baixo da Home */
.home-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 25; display: grid; max-width: 520px; min-height: calc(var(--tab-h) + var(--safe-bottom)); margin: 0 auto; padding: 6px 6px var(--safe-bottom); grid-template-columns: repeat(5, 1fr); align-items: center; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.home-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; border: 0; color: var(--muted); background: none; font-size: 10.5px; font-weight: 700; }
.home-nav button .icon { width: 22px; height: 22px; }
.home-nav button.is-active { color: var(--brand); }
.home-nav .home-nav-add { width: 58px; height: 58px; justify-self: center; justify-content: center; margin-top: -26px; border-radius: 50%; color: #fff; background: var(--brand); box-shadow: 0 10px 24px rgba(21, 86, 63, 0.35); }
.home-nav .home-nav-add .icon { width: 28px; height: 28px; }

/* Resumo: cartão de reflexão no lugar da frase simples */
#trip-message .spotlight-text { font-size: 19px; }

/* Janela de baixo: tela de trás travada e área maior para arrastar */
html.sheet-open, html.sheet-open body { overflow: hidden; overscroll-behavior: none; }
.sheet-content { overscroll-behavior: contain; }
.sheet-handle { position: relative; cursor: grab; touch-action: none; }
.sheet-handle::after { position: absolute; inset: -14px -60px; content: ""; }

/* ---------------------------------------------------------------------------
   Descobrir: aba com foto, progresso, contadores e cidades; tela de cartões
   --------------------------------------------------------------------------- */
.discover-head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.12; }
.discover-head p { margin-top: 4px; color: var(--muted); font-size: 15px; }
.discover-spot { overflow: hidden; border: 1px solid rgba(230, 225, 215, 0.8); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.spot-photo { position: relative; height: 210px; background: #22332b; }
.spot-photo img { width: 100%; height: 100%; object-fit: cover; }
.spot-chip { position: absolute; bottom: 12px; left: 12px; }
.spot-photo .photo-credit { top: 10px; right: 10px; bottom: auto; max-width: 70%; }
.spot-body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.spot-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.spot-body p { color: var(--muted); font-size: 14px; line-height: 1.45; }
.spot-body .btn { margin-top: 8px; }
.discover-progress p { margin-bottom: 8px; color: var(--muted); font-size: 15px; }
.discover-progress strong { color: var(--brand); }
.discover-progress .progress span { background: linear-gradient(90deg, var(--mint), #2fb88c); }
.choice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); text-align: left; }
.choice-card > .chevron-right { display: none; }
.choice-card strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; }
.choice-card small { color: var(--ink-2); font-size: 12px; font-weight: 600; }
.choice-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; }
.choice-icon .icon { width: 18px; height: 18px; }
.choice-card.is-like { border-color: #c9efdf; background: #effbf6; }
.choice-card.is-like .choice-icon { color: #1f8f68; background: #d4f4e6; }
.choice-card.is-like strong { color: #1f8f68; }
.choice-card.is-maybe { border-color: #f3e2b5; background: #fffaf0; }
.choice-card.is-maybe .choice-icon { color: #b07d12; background: #fbedc9; }
.choice-card.is-maybe strong { color: #b07d12; }
.choice-card.is-skip { border-color: #f8d3ca; background: #fff5f2; }
.choice-card.is-skip .choice-icon { color: #d9573f; background: var(--accent-soft); }
.choice-card.is-skip strong { color: #d9573f; }
.city-choices { display: grid; gap: 10px; }
.city-choices:empty { display: none; }
.city-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
.city-chips::-webkit-scrollbar { display: none; }
.city-chip { display: inline-flex; flex: none; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--surface); font-size: 14px; font-weight: 700; text-align: left; }
.city-chip small { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }
.city-chip.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.city-thumb { display: grid; width: 42px; height: 42px; overflow: hidden; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); }
.city-thumb img { width: 100%; height: 100%; object-fit: cover; }
.city-thumb .icon { width: 20px; height: 20px; }

/* Tela de cartões */
.screen-deck .app-bar-title h1 { font-size: 20px; }
#discovery-position { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
#discovery-position b { color: var(--brand); font-weight: 800; }
.deck-progress { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--line); }
.deck-progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width 300ms ease; }
.deck-actions { gap: 26px; padding-top: 12px; }
.deck-action { display: grid; justify-items: center; gap: 4px; }
.deck-action span { font-size: 13px; font-weight: 800; }
.deck-action:nth-child(1) span { color: #d9573f; }
.deck-action:nth-child(2) span { color: #a87612; }
.deck-action:nth-child(3) span { color: var(--brand); }
.round-skip { color: #fff; background: #ef7b66; }
.round-maybe { width: 56px; height: 56px; color: #fff; background: #f0b429; }
.round-like { width: 64px; height: 64px; background: #3fb98a; }
.round-btn { box-shadow: 0 8px 18px rgba(21, 32, 27, 0.16); }
.place-photo .photo-credit { top: auto; right: 12px; bottom: 6px; max-width: 60%; font-size: 9px; opacity: 0.85; }
.place-overlay { bottom: 22px; }
.deck-feedback { position: fixed; left: 50%; bottom: calc(150px + var(--safe-bottom)); z-index: 30; padding: 8px 16px; border-radius: 999px; color: #fff; background: rgba(21, 32, 27, 0.82); font-size: 14px; font-weight: 700; opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 220ms ease, transform 220ms ease; }
.deck-feedback.is-visible { opacity: 1; transform: translate(-50%, 0); }
.deck-feedback.is-like { background: rgba(31, 143, 104, 0.92); }
.deck-feedback.is-maybe { background: rgba(176, 125, 18, 0.92); }
.deck-feedback.is-skip { background: rgba(217, 87, 63, 0.92); }
@media (prefers-reduced-motion: reduce) { .deck-feedback { transition: none; transform: translate(-50%, 0); } }
@media (max-width: 360px) { .choice-card { grid-template-columns: 1fr; justify-items: start; } .discover-head h2 { font-size: 24px; } }
.deck-feedback { top: calc(var(--bar-h) + 40px + var(--safe-top)); bottom: auto; }
.deck-actions { align-items: end; }