:root {
  --navy: #10263f;
  --navy-2: #183854;
  --cream: #f7f3ed;
  --paper: #fffdf9;
  --orange: #ea7a2b;
  --orange-soft: #fff0e3;
  --sand: #e9dfd0;
  --text: #22303d;
  --muted: #6f756f;
  --line: #e8e0d6;
  --green: #2f6e5d;
  --red: #b64f3f;
  --shadow: 0 12px 35px rgba(16,38,63,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--cream); }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 50; height: 68px; display:flex; align-items:center; gap:24px; padding:0 clamp(16px,4vw,46px); background:rgba(255,253,249,.94); backdrop-filter: blur(14px); border-bottom:1px solid rgba(232,224,214,.8); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:max-content; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--navy); color:#fff; font-size:23px; transform:rotate(-12deg); }
.brand strong { display:block; color:var(--navy); letter-spacing:.13em; font-size:13px; }
.brand small { display:block; color:#777; margin-top:3px; font-size:11px; }
.desktop-nav { margin-left:auto; display:flex; gap:4px; }
.nav-link { border:0; background:transparent; color:#6c655c; padding:10px 14px; border-radius:999px; font-weight:700; font-size:14px; }
.nav-link.active { background:var(--orange-soft); color:#b95412; }
.icon-button { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy); display:grid; place-items:center; }
main { min-height:calc(100vh - 68px); }
.page { max-width:1180px; margin:0 auto; padding:34px clamp(16px,4vw,38px) 110px; }
.hero { position:relative; overflow:hidden; border-radius:32px; min-height:420px; background:linear-gradient(118deg,rgba(16,38,63,.98),rgba(16,38,63,.76)), url('assets/images/roadtrip-map.png') center/cover; color:#fff; box-shadow:var(--shadow); }
.hero-content { max-width:660px; padding:clamp(28px,6vw,68px); position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.13); font-size:13px; font-weight:800; letter-spacing:.04em; }
h1 { font-size:clamp(42px,7vw,76px); line-height:.95; margin:20px 0 14px; letter-spacing:-.045em; }
.hero p { max-width:640px; font-size:clamp(16px,2vw,19px); color:rgba(255,255,255,.88); line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 17px; border-radius:14px; border:1px solid transparent; text-decoration:none; font-weight:800; }
.btn-primary { background:var(--orange); color:#fff; }
.btn-secondary { background:#fff; color:var(--navy); }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--navy); }
.btn-small { min-height:38px; padding:0 13px; border-radius:11px; font-size:13px; }
.section { margin-top:30px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:14px; }
.section-head h2 { margin:0; color:var(--navy); font-size:clamp(24px,3vw,34px); }
.section-head p { margin:4px 0 0; color:var(--muted); }
.grid { display:grid; gap:16px; }
.stats { grid-template-columns:repeat(4,1fr); margin-top:18px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:22px; padding:20px; box-shadow:0 7px 22px rgba(16,38,63,.045); }
.stat strong { display:block; color:var(--navy); font-size:26px; margin-top:5px; }
.stat span { color:var(--muted); font-size:13px; font-weight:700; }
.two-col { grid-template-columns:1.25fr .75fr; }
.route-line { display:flex; align-items:center; gap:8px; overflow-x:auto; padding:6px 2px 10px; scrollbar-width:none; }
.route-stop { min-width:max-content; padding:11px 14px; border-radius:999px; background:#f4eee6; font-size:13px; font-weight:800; color:var(--navy); }
.route-arrow { color:var(--orange); font-weight:900; }
.alert { background:#fff2e5; border:1px solid #f4c99d; color:#7e441b; }
.alert strong { color:#a54f10; }
.today-card { display:flex; flex-direction:column; min-height:100%; }
.today-card .big { font-size:25px; font-weight:900; color:var(--navy); margin:8px 0; }
.today-card .muted { color:var(--muted); }
.actions-row { margin-top:auto; padding-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.timeline { display:grid; gap:14px; }
.day-card { position:relative; padding-left:74px; }
.day-card::before { content:""; position:absolute; left:34px; top:52px; bottom:-20px; width:2px; background:#e7d8c7; }
.day-card:last-child::before { display:none; }
.day-badge { position:absolute; left:10px; top:20px; width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--navy); color:#fff; font-weight:900; box-shadow:0 8px 20px rgba(16,38,63,.18); }
.day-card.current .day-badge { background:var(--orange); }
.day-title { display:flex; gap:12px; align-items:flex-start; justify-content:space-between; }
.day-title h3 { margin:0; font-size:22px; color:var(--navy); }
.day-title small { color:var(--muted); font-weight:700; }
.meta-row { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.pill { display:inline-flex; padding:7px 10px; border-radius:999px; background:#f3eee8; color:#5e5b55; font-size:12px; font-weight:800; }
.pill.orange { background:var(--orange-soft); color:#a34e14; }
.highlights { margin:12px 0 0; padding-left:18px; line-height:1.7; }
.note { margin-top:14px; padding:12px 14px; border-left:4px solid var(--orange); background:#fff7ee; border-radius:10px; color:#6c4a32; }
.map-wrap { background:var(--paper); padding:12px; border-radius:26px; border:1px solid var(--line); box-shadow:var(--shadow); }
.map-wrap img { width:100%; display:block; border-radius:18px; }
.stop-list { grid-template-columns:repeat(3,1fr); }
.stop { display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--paper); border:1px solid var(--line); }
.stop-num { width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:900; }
.hotel-grid { grid-template-columns:repeat(2,1fr); }
.hotel-card h3 { margin:4px 0 6px; color:var(--navy); }
.hotel-card .dates { color:var(--orange); font-weight:900; font-size:13px; }
.status { display:inline-flex; font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:#eee; }
.status.priorita { background:#fff0e2; color:#a34e14; }
.car-hero { background:linear-gradient(135deg,#10263f,#244c6d); color:#fff; }
.car-hero h2, .car-hero h3 { color:#fff; }
.check-list { display:grid; gap:10px; }
.check-row { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); }
.check-row:last-child { border:0; }
.check-row input { width:20px; height:20px; accent-color:var(--orange); }
.check-row label { flex:1; line-height:1.35; }
.check-grid { grid-template-columns:repeat(2,1fr); }
.progress { width:100%; height:10px; border-radius:999px; background:#ece4da; overflow:hidden; margin:10px 0 2px; }
.progress > span { height:100%; display:block; width:0; background:var(--orange); transition:width .2s; }
.budget-grid { grid-template-columns:1fr .7fr; }
.budget-table { width:100%; border-collapse:collapse; }
.budget-table th, .budget-table td { padding:12px 8px; border-bottom:1px solid var(--line); text-align:left; }
.budget-table th:last-child, .budget-table td:last-child { text-align:right; }
.unknown { color:var(--muted); font-style:italic; }
.big-total { font-size:38px; font-weight:950; color:var(--navy); }
.info-grid { grid-template-columns:repeat(3,1fr); }
.icon-title { display:flex; align-items:center; gap:9px; color:var(--navy); }
.icon-title span { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f4eee6; }
.mobile-nav { display:none; }
.more-dialog { border:0; border-radius:26px 26px 0 0; width:min(680px,100%); max-width:none; margin:auto 0 0 0; padding:18px; background:var(--paper); box-shadow:0 -15px 40px rgba(0,0,0,.16); }
.more-dialog::backdrop { background:rgba(16,38,63,.45); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; font-size:20px; }
.more-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:18px; }
.more-grid button { padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; text-align:left; font-weight:800; color:var(--navy); }
.toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:100; padding:11px 14px; background:var(--navy); color:#fff; border-radius:12px; transition:.2s; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.install-box { display:flex; gap:12px; align-items:center; }
.install-icon { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:26px; }
@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .topbar { height:62px; padding:0 14px; }
  .topbar .icon-button { margin-left:auto; }
  .page { padding-top:18px; padding-bottom:94px; }
  .hero { min-height:410px; border-radius:24px; }
  .hero-content { padding:28px 22px 32px; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .two-col, .budget-grid, .info-grid, .hotel-grid, .check-grid { grid-template-columns:1fr; }
  .stop-list { grid-template-columns:repeat(2,1fr); }
  .mobile-nav { position:fixed; z-index:60; bottom:0; left:0; right:0; height:76px; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); background:rgba(255,253,249,.96); backdrop-filter:blur(16px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(5,1fr); }
  .mobile-nav button { border:0; background:transparent; color:#7b756d; font-size:10px; font-weight:800; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
  .mobile-nav button span:first-child { font-size:22px; line-height:1; }
  .mobile-nav button.active { color:var(--orange); }
  .day-card { padding-left:58px; }
  .day-badge { left:0; width:42px; height:42px; border-radius:14px; }
  .day-card::before { left:20px; }
}
@media (max-width:520px) {
  .brand strong { font-size:12px; }
  .hero { min-height:445px; }
  h1 { font-size:48px; }
  .hero-actions .btn { flex:1 1 auto; }
  .stop-list { grid-template-columns:1fr; }
  .card { padding:17px; border-radius:18px; }
  .day-title { flex-direction:column; }
}

/* V3 – accommodation cards */
.hotel-summary { display:flex; align-items:center; justify-content:space-between; }
.hotel-summary h3 { margin:10px 0 4px; color:var(--navy); font-size:26px; }
.hotel-summary p { margin:0; color:var(--muted); }
.reserved-pill { background:#e8f4ee; color:#23634f; }
.hotel-card.rich { padding:0; overflow:hidden; }
.hotel-cover { width:100%; height:210px; object-fit:cover; display:block; background:#e9dfd0; }
.hotel-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,#183854,#315f7e); color:#fff; }
.hotel-fallback span { font-size:58px; }
.hotel-fallback strong { font-size:19px; }
.hotel-body { padding:20px; display:flex; flex-direction:column; min-height:360px; }
.hotel-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.hotel-location { color:var(--muted); font-size:13px; font-weight:700; }
.status.reserved { background:#e8f4ee; color:#23634f; white-space:nowrap; }
.hotel-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.hotel-facts > div { display:flex; align-items:flex-start; gap:9px; padding:11px; background:#f8f4ee; border-radius:13px; min-width:0; }
.hotel-facts > div > span { font-size:17px; }
.hotel-facts small { display:block; color:var(--muted); margin-bottom:3px; font-size:11px; font-weight:800; }
.hotel-facts strong { display:block; color:var(--navy); font-size:12px; line-height:1.35; overflow-wrap:anywhere; }
.booking-label { margin-left:auto; align-self:center; color:var(--muted); font-size:12px; font-weight:700; }
@media (max-width: 600px) {
  .hotel-cover { height:185px; }
  .hotel-body { min-height:0; }
  .hotel-top { flex-direction:column; }
  .hotel-facts { grid-template-columns:1fr; }
  .booking-label { margin-left:0; }
}

/* V5 – detailed itinerary, personal packing tabs, car photo and truthful budget */
.day-detail-panel { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.detail-intro { padding:12px 14px; border-radius:14px; background:#f8f4ee; color:#645c53; line-height:1.55; margin-bottom:14px; }
.day-detail-timeline { display:grid; gap:0; }
.detail-row { display:grid; grid-template-columns:92px 1fr; gap:16px; position:relative; padding:0 0 18px; }
.detail-row:not(:last-child)::before { content:""; position:absolute; left:44px; top:28px; bottom:-2px; width:2px; background:#eadbca; }
.detail-time { position:relative; z-index:1; align-self:start; padding:7px 8px; border-radius:10px; background:var(--navy); color:white; text-align:center; font-size:12px; font-weight:900; white-space:nowrap; }
.detail-content { padding:4px 0 0; }
.detail-content strong { color:var(--navy); font-size:15px; }
.detail-content p { margin:5px 0 0; color:var(--muted); line-height:1.5; font-size:14px; }

.packing-tabs { display:flex; gap:8px; overflow-x:auto; padding:2px 0 14px; scrollbar-width:none; }
.packing-tab { flex:0 0 auto; border:1px solid var(--line); background:var(--paper); color:var(--navy); border-radius:999px; padding:11px 18px; font-weight:900; cursor:pointer; }
.packing-tab.active { background:var(--navy); color:white; border-color:var(--navy); box-shadow:0 8px 18px rgba(16,38,63,.16); }
.packing-progress-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; }
.packing-progress-card > div:first-child { display:flex; flex-direction:column; gap:8px; min-width:170px; }
.packing-person-label { width:max-content; background:#f3eee8; color:#6c655c; }
.packing-progress-card .progress { margin:0; }

.car-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:22px; overflow:hidden; }
.car-copy { min-width:0; }
.car-image-wrap { border-radius:22px; background:#fff; padding:16px; min-height:230px; display:grid; place-items:center; }
.car-image-wrap img { width:100%; max-width:460px; height:auto; display:block; object-fit:contain; }
.car-price { margin-top:20px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; gap:3px; }
.car-price small { color:rgba(255,255,255,.72); font-weight:700; }
.car-price strong { font-size:26px; color:white; }

.budget-table td:first-child { min-width:190px; }
.budget-note { display:block; margin-top:4px; color:var(--muted); font-weight:400; line-height:1.35; }
.budget-side { display:grid; gap:14px; align-content:start; }
.budget-side .card { min-height:0; }
.budget-side .big-total { margin-top:12px; }

@media (max-width: 900px) {
  .car-hero-grid { grid-template-columns:1fr; }
  .car-image-wrap { order:-1; min-height:180px; }
  .packing-progress-card { grid-template-columns:1fr; gap:10px; }
  .packing-progress-card > div:first-child { min-width:0; }
  .budget-table { min-width:620px; }
  .budget-grid > .card:first-child { overflow-x:auto; }
}
@media (max-width: 520px) {
  .detail-row { grid-template-columns:76px 1fr; gap:11px; }
  .detail-row:not(:last-child)::before { left:36px; }
  .detail-time { font-size:11px; padding:7px 5px; }
  .packing-tab { padding:10px 15px; }
  .car-image-wrap { padding:10px; }
}