:root {
  --ink: #172126;
  --navy: #1d3043;
  --matcha: #50614d;
  --gold: #9a6b28;
  --paper: #f5f1e8;
  --paper-deep: #e9e1d2;
  --card: #fffefa;
  --muted: #4f5c61;
  --line: #c5c3b9;
  --error: #b42318;
  --success: #287a4b;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #2563a6; outline-offset: 3px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; }
h1 { font-size: clamp(2.15rem, 8vw, 3.5rem); line-height: 1.04; }
h2 { font-size: 1.65rem; line-height: 1.16; }
h3 { line-height: 1.25; }

.access-shell { position: relative; min-height: 100svh; padding: 24px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 82% 10%, rgba(183,70,55,.13), transparent 22%), radial-gradient(circle at 12% 88%, rgba(35,56,72,.15), transparent 30%), #e9e1d2; }
.access-shell::before { content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: radial-gradient(circle at 50% 100%, transparent 0 18px, rgba(29,48,67,.22) 18.5px 19.5px, transparent 20px); background-size: 40px 20px; mask-image: linear-gradient(135deg, #000, transparent 48%, #000); }
.access-shell::after { content: "旅"; position: absolute; right: max(2vw, 14px); bottom: -5vh; color: rgba(29,48,67,.055); font-family: var(--serif); font-size: min(44vw, 420px); line-height: 1; pointer-events: none; }
.access-card { position: relative; z-index: 1; width: min(100%, 460px); padding: 18px 20px 22px; background: rgba(255,254,250,.97); border: 1px solid rgba(75,62,43,.24); border-radius: 24px; box-shadow: 0 28px 80px rgba(26,38,48,.2); overflow: hidden; }
.brand-lockup, .mini-brand { display: flex; align-items: center; gap: 11px; font-weight: 650; font-size: .88rem; letter-spacing: .03em; }
.brand-lockup img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 3px 10px rgba(29,48,67,.18); }
.brand-seal { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50% 50% 50% 10%; color: white; background: var(--navy); font-family: var(--serif); font-size: 1.15rem; }
.brand-seal.small { width: 30px; height: 30px; font-size: 1rem; }
.access-art { position: relative; height: 205px; margin: 18px -20px 20px; overflow: hidden; background: #d8cfbf; border-block: 1px solid rgba(75,62,43,.16); }
.access-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgba(14,27,39,.2)); pointer-events: none; }
.access-art img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 53%; filter: saturate(.9) contrast(1.03); }
.eyebrow { margin-bottom: 8px; color: var(--matcha); font-size: .72rem; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow.warm { color: #cda867; }
.access-card h1 { margin-bottom: 7px; color: var(--navy); font-size: clamp(2rem, 8vw, 2.6rem); }
.access-copy { color: var(--muted); margin-bottom: 18px; }
label { display: block; margin-bottom: 7px; font-size: .82rem; font-weight: 700; }
.password-wrap { display: flex; min-height: 50px; border: 1px solid #bfc4c2; border-radius: 12px; background: white; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.password-wrap:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(36,52,71,.1); }
.password-wrap.field-error { border-color: var(--error); }
.password-wrap input { width: 100%; min-width: 0; padding: 0 14px; border: 0; outline: none; background: transparent; }
.show-button { padding: 0 14px; border: 0; background: transparent; color: var(--navy); font-size: .8rem; font-weight: 700; cursor: pointer; }
.error-copy { margin: 7px 0 0; color: var(--error); font-size: .84rem; }
.primary-button, .secondary-button, .emergency-button { min-height: 48px; padding: 12px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 12px; border: 1px solid transparent; font-size: .87rem; font-weight: 750; text-decoration: none; cursor: pointer; }
.primary-button { background: var(--navy); color: white; }
.primary-button:hover { background: #172839; }
.secondary-button { background: rgba(255,254,250,.82); color: var(--navy); border-color: #71808a; box-shadow: 0 5px 14px rgba(29,48,67,.07); }
.full { width: 100%; margin-top: 16px; }
.demo-note { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--muted); font-size: .8rem; }
.mark { display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: 99px; background: #ece4d5; color: #705528; font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }

.portal-shell { position: relative; min-height: 100svh; padding-bottom: calc(80px + env(safe-area-inset-bottom)); overflow: clip; background-color: var(--paper); background-image: radial-gradient(circle at 17% 12%, rgba(179,136,69,.055) 0 1px, transparent 1.5px), radial-gradient(circle at 73% 68%, rgba(36,52,71,.045) 0 1px, transparent 1.5px), repeating-linear-gradient(92deg, rgba(84,69,46,.016) 0 1px, transparent 1px 7px); background-size: 23px 23px, 31px 31px, auto; }
.portal-shell::before { content: ""; position: fixed; z-index: 0; inset: 58px 0 0 auto; width: min(42vw, 520px); pointer-events: none; opacity: .48; background-image: radial-gradient(circle at 50% 100%, transparent 0 13px, rgba(36,52,71,.18) 13.5px 14.5px, transparent 15px), radial-gradient(circle at 0 100%, transparent 0 13px, rgba(36,52,71,.13) 13.5px 14.5px, transparent 15px), radial-gradient(circle at 100% 100%, transparent 0 13px, rgba(36,52,71,.13) 13.5px 14.5px, transparent 15px); background-size: 30px 15px; mask-image: linear-gradient(to left, #000 10%, transparent 92%); }
.portal-shell::after { content: ""; position: fixed; z-index: 0; left: -70px; bottom: 44px; width: 390px; height: 390px; pointer-events: none; opacity: .3; background-image: repeating-linear-gradient(60deg, transparent 0 20px, rgba(102,115,91,.3) 20px 21px, transparent 21px 40px), repeating-linear-gradient(-60deg, transparent 0 20px, rgba(102,115,91,.24) 20px 21px, transparent 21px 40px); mask-image: radial-gradient(circle, #000 12%, transparent 72%); }
.app-header { position: sticky; top: 0; z-index: 20; height: 58px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; background: rgba(245,241,232,.93); border-bottom: 1px solid rgba(36,52,71,.1); backdrop-filter: blur(14px); }
.mini-brand { border: 0; padding: 5px 0; background: transparent; cursor: pointer; }
.avatar-button { width: 38px; height: 38px; border: 1px solid #b9bdba; border-radius: 50%; background: #e5dfd2; color: var(--navy); font-size: .73rem; font-weight: 800; cursor: pointer; }
.portal-main { position: relative; z-index: 1; isolation: isolate; width: min(100%, 1180px); margin: 0 auto; }
.app-page { position: relative; z-index: 1; }
.portal-main::after { content: ""; position: fixed; z-index: 0; inset: 58px 0 70px; pointer-events: none; opacity: .78; background-image: radial-gradient(ellipse at 8% 12%, rgba(176,72,91,.28) 0 4px, transparent 4.8px), radial-gradient(ellipse at 13% 17%, rgba(197,104,119,.22) 0 5px, transparent 5.8px), radial-gradient(ellipse at 5% 24%, rgba(176,72,91,.18) 0 3px, transparent 3.8px), radial-gradient(ellipse at 91% 72%, rgba(155,67,37,.25) 0 6px, transparent 6.8px), radial-gradient(ellipse at 84% 82%, rgba(177,91,42,.22) 0 5px, transparent 5.8px), radial-gradient(ellipse at 95% 88%, rgba(137,54,35,.2) 0 4px, transparent 4.8px); background-size: 126px 142px, 162px 184px, 98px 118px, 172px 194px, 138px 158px, 106px 128px; mask-image: linear-gradient(90deg, #000 0 12%, transparent 27% 72%, #000 90% 100%); }
.page-stack { display: grid; gap: 28px; padding: 30px 16px 36px; }
.home-shell { display: grid; }
.home-sidenav { margin: 16px 16px 0; padding: 16px; border: 1px solid rgba(36,52,71,.12); border-radius: 18px; background: rgba(255,254,250,.78); box-shadow: 0 8px 28px rgba(36,52,71,.06); }
.sidenav-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sidenav-mon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50% 50% 50% 10%; background: var(--navy); color: white; font-family: var(--serif); font-size: 1.1rem; }
.sidenav-heading p, .sidenav-heading h2 { margin: 0; }
.sidenav-heading p { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.sidenav-heading h2 { font-family: var(--sans); font-size: .86rem; font-weight: 780; letter-spacing: .02em; }
.sidenav-list { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.sidenav-list::-webkit-scrollbar { display: none; }
.sidenav-group { display: none; }
.sidenav-list button { flex: 0 0 138px; min-height: 68px; padding: 10px 11px; display: grid; grid-template-columns: 24px 1fr; gap: 0 5px; align-content: center; border: 1px solid #b6b4aa; border-radius: 12px; background: rgba(255,254,250,.72); box-shadow: 0 4px 12px rgba(29,48,67,.045); text-align: left; cursor: pointer; }
.sidenav-list button > span { grid-row: 1/3; color: var(--gold); font-family: var(--serif); font-size: .72rem; }
.sidenav-list button strong { font-size: .78rem; }
.sidenav-list button small { color: var(--muted); font-size: .63rem; white-space: nowrap; }
.sidenav-list button.active { border-color: var(--navy); background: var(--navy); color: white; }
.sidenav-list button.active small { color: #cbd3d4; }
.sidenav-note { display: none; }
.welcome-block { display: grid; gap: 20px; padding: 4px 2px; }
.welcome-block h1 { margin-bottom: 14px; color: var(--navy); }
.welcome-block p:not(.eyebrow) { max-width: 580px; color: var(--muted); }
.welcome-copy, .welcome-copy > *, .next-grid > *, .section-heading > *, .quick-grid button > * { min-width: 0; max-width: 100%; }
.welcome-copy p, .next-grid h2, .next-grid p, .quick-grid strong, .quick-grid small { overflow-wrap: break-word; }
.home-day-selector { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 9px; overflow-x: auto; padding: 2px 1px 5px; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.home-day-tab { min-height: 70px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; scroll-snap-align: start; border: 1px solid rgba(36,52,71,.22); border-radius: 14px; background: rgba(255,254,250,.9); color: var(--navy); text-align: left; box-shadow: 0 5px 16px rgba(36,52,71,.04); cursor: pointer; }
.home-day-tab small { grid-column: 1 / -1; color: var(--muted); font-size: .68rem; }
.home-day-tab strong { font-family: var(--serif); font-size: 1rem; }
.home-day-tab span { align-self: center; font-size: .7rem; }
.home-day-tab[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(36,52,71,.16); }
.home-day-tab[aria-selected="true"] small { color: rgba(255,255,255,.72); }
.route-kicker { margin: 0 0 5px; color: var(--page-accent, #8f6b32); font-size: .67rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.route-origin { margin: 6px 0 13px; color: var(--muted); font-size: .82rem; }
.home-transfer-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.home-transfer-facts > span { min-width: 0; padding: 9px 10px; border: 1px solid rgba(36,52,71,.11); border-radius: 11px; background: rgba(247,244,236,.72); }
.home-transfer-facts small, .home-transfer-facts strong { display: block; }
.home-transfer-facts small { margin-bottom: 2px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.home-transfer-facts strong { overflow-wrap: anywhere; color: var(--navy); font-size: .76rem; line-height: 1.3; }
.text-link { width: fit-content; min-height: 44px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 12px; border: 1px solid rgba(29,48,67,.24); border-radius: 10px; background: rgba(255,254,250,.64); color: var(--navy); font-weight: 800; cursor: pointer; }
.text-link.light { color: #f8efdf; }
.today-card { position: relative; padding: 18px; overflow: hidden; border-radius: 20px; background: var(--card); border: 1px solid rgba(36,52,71,.1); box-shadow: 0 12px 36px rgba(36,52,71,.09); }
.today-card::after { content: ""; position: absolute; right: -54px; bottom: -70px; width: 160px; height: 160px; border: 1px solid rgba(102,115,91,.12); border-radius: 50%; box-shadow: 0 0 0 18px rgba(102,115,91,.035), 0 0 0 36px rgba(102,115,91,.025); pointer-events: none; }
.card-topline { display: flex; align-items: center; gap: 8px; color: var(--matcha); font-size: .76rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.card-topline .quiet { margin-left: auto; color: var(--muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(40,122,75,.1); }
.next-grid { display: grid; grid-template-columns: 70px 1fr; gap: 14px; margin: 24px 0; }
.time-block { padding-right: 12px; border-right: 1px solid var(--line); }
.time-block span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .73rem; }
.time-block strong { font-size: 1.14rem; font-variant-numeric: tabular-nums; }
.next-grid h2 { margin-bottom: 7px; font-size: 1.35rem; }
.next-grid p { margin: 0; color: var(--muted); font-size: .84rem; }
.button-row { display: flex; gap: 9px; }
.button-row > * { flex: 1; }
.section-heading { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin: 0; }
.section-heading button { min-height: 44px; border: 0; background: transparent; color: var(--navy); font-size: .8rem; font-weight: 750; cursor: pointer; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-grid button { position: relative; min-height: 124px; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(29,48,67,.27); border-radius: 16px; background: rgba(255,254,250,.9); box-shadow: 0 9px 24px rgba(29,48,67,.07); text-align: left; cursor: pointer; }
.quick-grid button:hover { background: white; transform: translateY(-1px); }
.quick-grid button::after { content: "View  →"; margin-top: auto; padding-top: 10px; color: var(--navy); font-size: .64rem; font-weight: 850; letter-spacing: .04em; }
.quick-symbol { min-width: 38px; height: 28px; padding: 0 7px; margin-bottom: 14px; display: inline-grid; place-items: center; border-radius: 8px; background: #e7e0d3; color: var(--navy); font-family: var(--serif); font-size: .76rem; font-weight: 700; }
.quick-grid strong { font-size: .88rem; }
.quick-grid small { margin-top: 3px; color: var(--muted); }
.notice-card { padding: 17px; display: grid; grid-template-columns: 38px 1fr; gap: 14px; border-radius: 16px; background: #eee4cf; border: 1px solid #ddc99d; }
.notice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #8a651f; color: white; font-weight: 800; }
.notice-card h3 { margin-bottom: 6px; font-size: .98rem; }
.notice-card p:last-child { margin: 0; color: #62563d; font-size: .84rem; }

.itinerary-page { padding: 28px 16px 36px; }
.page-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.page-title-row h1 { margin-bottom: 22px; color: var(--navy); }
.date-range { margin-top: 24px; color: var(--muted); font-size: .78rem; }
.day-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(124px, 1fr); gap: 9px; margin-bottom: 16px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scroll-snap-type: x proximity; }
.day-tabs button { scroll-snap-align: start; }
.day-tabs button { min-height: 78px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; border: 1px solid #c7c8c2; border-radius: 13px; background: transparent; text-align: left; cursor: pointer; }
.day-tabs button[aria-selected="true"] { border-color: var(--navy); background: var(--navy); color: white; }
.day-tabs small { grid-column: 1/-1; opacity: .7; }
.day-tabs strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.day-tabs span { font-size: .73rem; align-self: center; }
.day-header-card { padding: 21px 18px; border-radius: 18px; background: #e4ded0; }
.day-header-card h2 { margin-bottom: 16px; }
.day-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.day-meta span { padding: 6px 9px; border-radius: 99px; background: rgba(255,255,255,.6); color: #485154; font-size: .72rem; }
.day-budget { margin-top: 15px; padding: 14px; border: 1px solid #d1b778; border-radius: 12px; background: #faf2df; }
.day-budget > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.day-budget > span small { color: #6f5524; font-size: .66rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.day-budget > span strong { color: var(--navy); font-family: var(--serif); font-size: 1.2rem; }
.day-budget dl { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.day-budget dl div { padding: 8px; border-radius: 8px; background: rgba(255,255,255,.64); }
.day-budget dt { color: var(--muted); font-size: .61rem; }
.day-budget dd { margin: 2px 0 0; color: var(--ink); font-size: .7rem; font-weight: 800; }
.day-budget > p { margin: 9px 0 0; color: #695e4c; font-size: .66rem; }
.weather-switch { margin-top: 14px; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border: 1px solid #bfc5c0; border-radius: 12px; background: rgba(255,255,255,.48); }
.weather-mode-button { min-height: 44px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #4b595f; font-size: .75rem; font-weight: 800; cursor: pointer; }
.weather-mode-button span { font-family: var(--serif); font-size: 1rem; }
.weather-mode-button.active { border-color: var(--navy); background: var(--navy); color: white; box-shadow: 0 4px 12px rgba(29,48,67,.13); }
.weather-plan[hidden] { display: none; }
.rain-plan-heading { margin-top: 18px; padding: 16px; border: 1px solid #a9bbc2; border-radius: 14px; background: #eaf0f1; }
.rain-plan-heading h3 { margin: 2px 0 5px; font-family: var(--serif); }
.rain-plan-heading p:last-child { margin: 0; color: var(--muted); font-size: .76rem; }
.rain-plan-empty { margin-top: 18px; padding: 30px 18px; display: grid; justify-items: center; text-align: center; border: 1px dashed #91a7b1; border-radius: 16px; background: #eef3f4; }
.rain-plan-empty > span { width: 48px; height: 48px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 50% 50% 50% 10px; background: #36576a; color: white; font-family: var(--serif); font-size: 1.15rem; }
.rain-plan-empty h3 { margin-bottom: 6px; font-family: var(--serif); }
.rain-plan-empty p { max-width: 360px; margin: 0; color: #56666d; font-size: .76rem; }
.alternative-button { width: 100%; min-height: 46px; margin-top: 17px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #aaa797; border-radius: 11px; background: rgba(255,255,255,.4); color: var(--navy); font-size: .82rem; font-weight: 750; cursor: pointer; }
.timeline-list { margin-top: 28px; }
.hotel-endpoint { margin: 0 0 14px; padding: 14px 15px; display: grid; grid-template-columns: 58px 38px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid #b7a779; border-radius: 15px; background: linear-gradient(135deg, #f4ead5, #fffdf7); box-shadow: 0 8px 22px rgba(64,48,24,.07); }
.hotel-endpoint-time { color: var(--navy); font-size: .84rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.hotel-endpoint-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50% 50% 50% 10%; background: #795b2a; color: white; font-family: var(--serif); }
.hotel-endpoint small { color: #806327; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hotel-endpoint h3 { margin: 2px 0 3px; font-family: var(--serif); font-size: 1.08rem; }
.hotel-endpoint p { margin: 0; color: var(--muted); font-size: .72rem; }
.hotel-endpoint button { min-height: 40px; margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--navy); font-size: .72rem; font-weight: 800; cursor: pointer; }
.journey-transfer { margin: 2px 0 12px 79px; overflow: hidden; border: 1px dashed #aab5b3; border-radius: 11px; background: rgba(241,244,240,.86); }
.transfer-toggle { width: 100%; min-height: 48px; padding: 8px 11px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.transfer-toggle:focus-visible { outline-offset: -3px; }
.transfer-method { padding: 4px 7px; border-radius: 7px; background: var(--matcha); color: white; font-size: .62rem; font-weight: 850; }
.transfer-toggle > span:nth-child(2) { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.transfer-toggle strong { font-size: .72rem; }
.transfer-toggle small { color: #526067; font-size: .66rem; font-weight: 750; }
.transfer-toggle b { font-size: 1rem; font-weight: 450; }
.transfer-panel { padding: 0 11px 11px; border-top: 1px solid rgba(80,97,77,.17); }
.transfer-panel p { margin: 10px 0 4px; color: #354248; font-size: .74rem; }
.transfer-panel small { display: block; color: #687378; font-size: .62rem; }
.timeline-card { display: grid; grid-template-columns: 62px 18px minmax(0, 1fr); }
.timeline-time { padding-top: 3px; }
.timeline-time strong, .timeline-time span { display: block; font-variant-numeric: tabular-nums; }
.timeline-time strong { font-size: .82rem; }
.timeline-time span { color: var(--muted); font-size: .68rem; }
.timeline-line { position: relative; }
.timeline-line::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: -12px; border-left: 1px solid #b8bcb6; }
.timeline-card:last-child .timeline-line::before { bottom: 28px; }
.timeline-line span { position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--matcha); }
.timeline-card.reservation .timeline-line span { border-color: var(--gold); background: var(--gold); }
.timeline-card.transport .timeline-line span { border-radius: 2px; border-color: #697980; transform: rotate(45deg); }
.timeline-content { margin: 0 0 16px 7px; padding: 16px; border: 1px solid rgba(36,52,71,.11); border-radius: 15px; background: rgba(255,254,250,.78); }
.timeline-card.reservation .timeline-content { border-color: #d4b578; background: #fffaf0; box-shadow: inset 3px 0 #b38845; }
.timeline-card.transport .timeline-content { padding: 13px 15px; background: transparent; border-style: dashed; }
.itinerary-photo-placeholder { position: relative; height: 138px; margin: -16px -16px 15px; display: flex; align-items: end; overflow: hidden; border-radius: 14px 14px 4px 4px; background: linear-gradient(155deg, #d7cbb6, #7d8d82 52%, #263b4d); }
.itinerary-photo-placeholder::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 74% 24%, rgba(210,143,83,.7) 0 20px, transparent 21px), linear-gradient(145deg, transparent 0 38%, rgba(31,52,64,.55) 38.5% 56%, transparent 56.5%), linear-gradient(35deg, rgba(82,102,79,.78) 0 30%, transparent 30.5%); opacity: .84; }
.itinerary-photo-placeholder[data-variant="2"] { background: linear-gradient(145deg, #c6d0c2, #657a68 48%, #1d3043); }
.itinerary-photo-placeholder[data-variant="3"] { background: linear-gradient(155deg, #e0c9ae, #a46b4e 50%, #3d3b39); }
.itinerary-photo-placeholder[data-variant="4"] { background: linear-gradient(145deg, #d5d1c6, #6d7881 48%, #283748); }
.itinerary-photo-placeholder.has-photo { height: clamp(156px, 34vw, 210px); background: #d6d0c4; }
.itinerary-photo-placeholder.has-photo::before { z-index: 1; background: linear-gradient(180deg, rgba(16,28,36,.02) 36%, rgba(16,28,36,.72) 100%); opacity: 1; }
.photo-destination-link { position: absolute; z-index: 2; inset: 0; display: flex; align-items: end; color: inherit; text-decoration: none; }
.photo-destination-link > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.2,.65,.2,1); }
.photo-destination-link:hover > img, .photo-destination-link:focus-visible > img { transform: scale(1.025); }
.photo-destination-link:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.photo-mark { position: absolute; z-index: 1; right: 13px; top: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50% 50% 50% 9px; background: rgba(29,48,67,.52); color: white; font-family: var(--serif); font-size: .78rem; }
.itinerary-photo-placeholder figcaption { position: relative; z-index: 2; width: 100%; padding: 26px 13px 11px; color: white; background: linear-gradient(transparent, rgba(17,29,36,.74)); }
.itinerary-photo-placeholder small, .itinerary-photo-placeholder strong { display: block; }
.itinerary-photo-placeholder small { margin-bottom: 2px; color: #e3d5bd; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.itinerary-photo-placeholder strong { max-width: calc(100% - 36px); font-size: .78rem; line-height: 1.25; }
.item-label { margin-bottom: 6px; color: var(--matcha); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.reservation .item-label { color: #8a651f; }
.timeline-content h3 { margin-bottom: 7px; font-size: 1rem; }
.timeline-content p { margin-bottom: 12px; color: var(--muted); font-size: .82rem; }
.detail-toggle { width: 100%; min-height: 42px; padding: 7px 0; display: flex; justify-content: space-between; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--navy); font-size: .77rem; font-weight: 750; cursor: pointer; }
.detail-toggle span { font-size: 1.15rem; font-weight: 400; }
.detail-panel { margin: 1px 0 12px; padding: 11px; border-radius: 9px; background: #efeadf; }
.detail-panel p { margin-bottom: 4px; color: #3f494d; }
.detail-panel small { color: var(--matcha); font-weight: 750; }
.itinerary-options { margin: 12px 0 4px; padding: 0; display: grid; gap: 6px; list-style: none; }
.itinerary-options li { padding: 8px 10px; border: 1px solid #d6cdbb; border-radius: 9px; background: #f6f1e7; color: #354248; font-size: .74rem; font-weight: 700; }
.journey-alerts { margin-bottom: 16px; padding: 14px 15px; border: 1px solid #d8bc7a; border-left: 4px solid var(--gold); border-radius: 12px; background: #f5ecd9; }
.journey-alerts strong { color: #6f501a; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.journey-alerts ul { margin: 7px 0 0; padding-left: 18px; color: #514a3d; font-size: .76rem; }
.map-link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; color: var(--navy); font-size: .79rem; font-weight: 800; text-decoration: none; }
.return-hotel { width: calc(100% - 80px); min-height: 64px; margin: 14px 0 0 80px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; text-align: left; border: 1px solid #9eaaa8; border-radius: 13px; background: transparent; cursor: pointer; }
.return-hotel span:first-child { grid-column: 1; color: var(--muted); font-size: .7rem; }
.return-hotel strong { grid-column: 1; }
.return-hotel span:last-child { grid-column: 2; grid-row: 1/3; align-self: center; }

.simple-page { gap: 24px; }
.tips-page { position: relative; }
.tips-page::before { content: "知恵"; position: absolute; z-index: -1; right: 5%; top: 72px; color: rgba(179,136,69,.06); font-family: var(--serif); font-size: clamp(6rem, 18vw, 13rem); line-height: 1; writing-mode: vertical-rl; pointer-events: none; }
.tips-hero { min-height: 240px; padding: 28px 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; overflow: hidden; border-radius: 24px 24px 24px 6px; background: var(--navy); color: white; box-shadow: 0 18px 44px rgba(36,52,71,.14); }
.tips-hero h1 { margin-bottom: 14px; color: white; }
.tips-hero p:not(.eyebrow) { max-width: 530px; margin-bottom: 0; color: #cad2d4; }
.tips-seal { width: 78px; height: 104px; padding: 10px 5px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid rgba(205,168,103,.6); color: #e1c693; }
.tips-seal span { font-family: var(--serif); font-size: 2.2rem; }
.tips-seal small { font-size: .52rem; letter-spacing: .1em; writing-mode: vertical-rl; }
.featured-tip, .contact-card { padding: 22px; border-radius: 18px; background: var(--navy); color: white; }
.tips-page .featured-tip { position: relative; overflow: hidden; background: #5e6d59; border-radius: 20px 20px 20px 5px; }
.tips-page .featured-tip::after { content: ""; position: absolute; right: -52px; top: -52px; width: 160px; height: 160px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(255,255,255,.02); }
.featured-tip h2, .contact-card h2 { color: white; }
.featured-tip > p:not(.eyebrow), .contact-card > p { color: #d5dcdd; }
.phrase-card { padding: 14px; border-radius: 12px; background: rgba(255,255,255,.1); }
.phrase-card span, .phrase-card small { display: block; color: #cbd3d4; font-size: .7rem; }
.phrase-card strong { display: block; margin: 6px 0; font-size: 1.03rem; }
.tips-directory-heading { margin-bottom: 14px; display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.tips-directory-heading h2 { margin-bottom: 0; }
.tips-count { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.tips-list { display: grid; gap: 10px; }
.tip-category { overflow: hidden; border: 1px solid rgba(36,52,71,.13); border-radius: 17px; background: rgba(255,254,250,.82); box-shadow: 0 6px 20px rgba(36,52,71,.035); }
.tip-category-toggle { width: 100%; min-height: 82px; padding: 10px 14px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto 24px; gap: 13px; align-items: center; border: 0; background: transparent; text-align: left; cursor: pointer; }
.tip-category-toggle:hover { background: rgba(233,225,210,.48); }
.tip-category-toggle[aria-expanded="true"] { background: #ece7dc; }
.tip-category-toggle:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px #2563a6; }
.tip-category-icon { width: 56px; height: 56px; display: block; overflow: hidden; border: 1px solid #bda878; border-radius: 14px; background: #f8f4eb; box-shadow: 0 4px 12px rgba(29,48,67,.09); }
.tip-category-icon img { width: 100%; height: 100%; padding: 2px; display: block; object-fit: contain; border-radius: 12px; }
.tip-category-title strong, .tip-category-title small { display: block; }
.tip-category-title strong { margin-bottom: 3px; color: var(--ink); font-family: var(--serif); font-size: 1rem; line-height: 1.25; }
.tip-category-title small { max-width: 490px; color: #46545a; font-size: .72rem; line-height: 1.4; }
.tip-category-meta { text-align: right; }
.tip-category-meta small, .tip-category-meta b { display: block; }
.tip-category-meta small { color: var(--matcha); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.tip-category-meta b { color: var(--muted); font-size: .65rem; }
.tip-category-lock { min-width: 76px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #c5a568; border-radius: 999px; background: #f3e8cf; color: #75541d; font-size: .61rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.tip-category-lock i { position: relative; width: 10px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.tip-category-lock i::before { content: ""; position: absolute; left: 1px; top: -7px; width: 5px; height: 6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
.tip-category-locked { border-color: #cdbb91; background: linear-gradient(110deg, rgba(255,254,250,.88), rgba(239,229,207,.78)); }
.tip-category-locked .tip-category-toggle { cursor: pointer; }
.tip-category-locked .tip-category-icon { filter: saturate(.72); }
.tip-category-locked .tip-category-meta { display: none; }
.tip-category-locked .tip-category-title small { color: #745b2e; }
.tip-category-locked .tip-category-toggle:hover { background: rgba(231,213,177,.32); }
.tip-chevron { color: var(--navy); font-size: 1.15rem; }
.tip-category-content { padding: 0 14px 16px; background: #f4f0e8; border-top: 1px solid var(--line); }
.category-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 0; }
.category-intro p { margin: 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.68); color: var(--muted); font-size: .74rem; }
.category-intro strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.tip-guide-list { display: grid; gap: 10px; }
.tip-guide { overflow: hidden; border: 1px solid #c8c4b8; border-radius: 16px; background: var(--card); box-shadow: 0 5px 18px rgba(27,42,48,.055); }
.tip-guide-summary { padding: 12px 14px; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; align-items: center; }
.tip-guide-icon { width: 86px; height: 86px; overflow: hidden; border: 1px solid rgba(29,48,67,.16); border-radius: 14px; background: #ebe7dc; box-shadow: 0 3px 10px rgba(29,48,67,.1); }
.tip-guide-icon img { width: 100%; height: 100%; display: block; object-fit: cover; }
.tip-guide-meta { display: flex; gap: 6px; margin-bottom: 4px; }
.tip-guide-meta span { padding: 2px 6px; border-radius: 99px; background: #edf0eb; color: var(--matcha); font-size: .59rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tip-guide-meta span:nth-child(2) { background: #eee4cf; color: #75571d; }
.tip-guide-summary h3 { margin-bottom: 4px; font-size: .94rem; line-height: 1.35; }
.tip-guide-toggle { width: 100%; min-height: 46px; margin: 0; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid var(--line); background: #f1eee5; color: var(--navy); font-size: .72rem; font-weight: 850; cursor: pointer; }
.tip-guide-toggle:hover { background: #e9e4d7; }
.tip-guide-toggle:focus-visible { outline: 3px solid rgba(177,132,45,.38); outline-offset: -3px; }
.tip-guide-toggle b { font-size: 1rem; font-weight: 400; }
.tip-guide-body { padding: 14px; display: grid; gap: 10px; background: #f8f6f0; border-top: 1px solid var(--line); }
.guide-intro { margin: 0; padding: 11px 12px; border-radius: 10px; background: #ebe5d9; color: #3f4b50; font-size: .76rem; }
.guide-section, .guide-notice { padding: 13px; border-radius: 10px; background: white; }
.guide-section h4, .guide-notice h4 { margin: 0 0 8px; color: var(--ink); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.guide-section h4 span { color: var(--success); }
.guide-section ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; }
.guide-section li, .guide-section p, .guide-notice p { margin: 0; color: #4f5a5e; font-size: .75rem; }
.guide-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.guide-notice { border-left: 3px solid var(--gold); background: #f3ead8; }
.guide-notice.hack { border-left-color: var(--matcha); background: #edf0e9; }
.guide-notice.emergency { border-left-color: var(--error); background: #fff1ef; }
.guide-notice.emergency h4 { color: var(--error); }
.mistake-section li::marker { color: #a65a45; }
.useful-phrase { padding: 15px; display: grid; border-radius: 12px; background: var(--navy); color: white; }
.useful-phrase > span { margin-bottom: 8px; color: #d5b879; font-size: .61rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.useful-phrase strong { font-size: 1rem; }
.useful-phrase small { margin: 2px 0 8px; color: #aebcc0; font-size: .67rem; }
.useful-phrase p { margin: 0; color: white; font-size: .76rem; }
.emergency-card { padding: 19px; border: 1px solid #d8a59f; border-radius: 17px; background: #fff6f4; }
.emergency-card h2 { margin-bottom: 8px; }
.emergency-card p { margin-bottom: 16px; }
.emergency-button { background: var(--error); color: white; }
.contact-card .primary-button { background: #f8f3e8; color: var(--navy); }
.support-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); }
.support-meta small, .support-meta strong { display: block; }
.support-meta small { color: #b9c3c5; font-size: .67rem; }
.support-meta strong { font-size: .76rem; }
.instruction-list div { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.instruction-list span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e4ded0; color: var(--navy); font-size: .67rem; font-weight: 800; }
.instruction-list p { margin: 2px 0 0; font-size: .86rem; }
.outside-note { padding: 15px; border-radius: 12px; background: #e9e4da; color: var(--muted); font-size: .78rem; }

.bottom-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; min-height: calc(66px + env(safe-area-inset-bottom)); padding: 6px max(10px, calc((100vw - 700px) / 2)) env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,254,250,.95); border-top: 1px solid rgba(36,52,71,.12); backdrop-filter: blur(16px); }
.bottom-nav button { min-height: 54px; margin: 3px; padding: 5px 2px; display: grid; place-items: center; gap: 2px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #5d686c; font-size: .66rem; cursor: pointer; }
.bottom-nav button.active { border-color: rgba(29,48,67,.17); background: #e9e2d4; color: var(--navy); box-shadow: inset 0 1px rgba(255,255,255,.65); font-weight: 850; }
.nav-icon { position: relative; width: 20px; height: 20px; display: block; }
.nav-home::before { content: ""; position: absolute; left: 3px; top: 7px; width: 13px; height: 10px; border: 1.7px solid currentColor; border-top: 0; border-radius: 2px; }
.nav-home::after { content: ""; position: absolute; left: 4px; top: 2px; width: 11px; height: 11px; border-left: 1.7px solid currentColor; border-top: 1.7px solid currentColor; transform: rotate(45deg); }
.nav-itinerary { border: 1.7px solid currentColor; border-radius: 4px; }
.nav-itinerary::before { content: ""; position: absolute; left: 3px; right: 3px; top: 6px; border-top: 1.7px solid currentColor; box-shadow: 0 4px 0 currentColor; }
.nav-tips { border: 1.7px solid currentColor; border-radius: 50% 50% 42% 42%; transform: scale(.8); }
.nav-tips::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; border-top: 3px double currentColor; }
.nav-support { border: 1.7px solid currentColor; border-radius: 7px; }
.nav-support::after { content: ""; position: absolute; left: 3px; bottom: -4px; width: 6px; height: 6px; border-left: 1.7px solid currentColor; transform: skewY(-35deg); }

.overlay-backdrop { position: fixed; z-index: 60; inset: 0; display: flex; align-items: end; justify-content: center; padding-top: 40px; background: rgba(19,28,33,.52); backdrop-filter: blur(3px); }
.overlay-sheet { position: relative; width: min(100%, 620px); max-height: 91svh; padding: 22px 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; border-radius: 24px 24px 0 0; background: var(--card); box-shadow: 0 -20px 60px rgba(18,26,30,.22); animation: sheet-in .22s ease-out; }
.short-sheet { max-height: 86svh; }
@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }
.sheet-handle { width: 40px; height: 4px; margin: -10px auto 18px; border-radius: 99px; background: #c9c9c3; }
.close-button { position: absolute; right: 16px; top: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #efede7; font-size: 1.35rem; cursor: pointer; }
.sheet-content { padding-top: 8px; }
.sheet-content h2 { max-width: calc(100% - 50px); margin-bottom: 8px; font-size: 2rem; }
.sheet-content h3 { margin: 25px 0 10px; font-size: .9rem; }
.lead { color: var(--muted); }
.route-line { margin-top: 20px; padding-left: 16px; border-left: 1px solid #aeb4af; display: grid; }
.route-line span { color: var(--matcha); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.route-line strong { margin-bottom: 3px; }
.route-line i { height: 22px; }
.highlight-list { display: grid; gap: 8px; padding-left: 20px; }
.planner-quote { margin-top: 24px; padding: 18px; border-radius: 13px; background: var(--navy); color: white; font-family: var(--serif); font-size: 1.03rem; }
.planner-quote span { display: block; margin-top: 10px; color: #bec8ca; font-family: var(--sans); font-size: .72rem; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.profile-badges span { padding: 7px 10px; border: 1px solid #c6c9c3; border-radius: 99px; font-size: .74rem; }
.detail-list { margin: 22px 0; }
.detail-list div { padding: 12px 0; display: grid; grid-template-columns: 105px 1fr; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); font-size: .75rem; }
.detail-list dd { margin: 0; font-size: .84rem; font-weight: 650; }
.journey-record-list { display: grid; gap: 14px; margin-top: 18px; }
.journey-record-card { padding: 16px; border: 1px solid #d0c8b8; border-radius: 15px; background: #fffdf8; box-shadow: 0 7px 20px rgba(29,48,67,.055); }
.record-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.record-heading small { color: var(--gold); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.record-heading h3 { margin: 3px 0 1px; color: var(--ink); font-family: var(--serif); font-size: 1.18rem; }
.record-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
.record-heading > span { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50% 50% 50% 8px; background: var(--navy); color: white; font-family: var(--serif); }
.journey-record-card .detail-list { margin: 14px 0; }
.journey-record-card .arrival-block { margin: 14px 0 4px; }
.record-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.record-actions a { min-width: 0; text-align: center; }
.journey-empty-state { margin-top: 20px; padding: 24px 18px; display: grid; justify-items: center; text-align: center; border: 1px solid #d3ccbd; border-radius: 16px; background: #faf7f0; }
.journey-empty-state > span { width: 46px; height: 46px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 50% 50% 50% 10px; background: var(--navy); color: white; font-family: var(--serif); }
.journey-empty-state p { margin: 7px 0 0; color: var(--muted); font-size: .78rem; }
.arrival-block { margin: 20px 0; padding: 16px; border-radius: 12px; background: #eee4cf; }
.arrival-block span, .arrival-block strong { display: block; }
.arrival-block span { color: #705c34; font-size: .76rem; }
.arrival-block strong { margin-top: 4px; font-size: 1.08rem; }
.alternative-list { display: grid; gap: 9px; margin: 18px 0; }
.alternative-list button { padding: 14px; border: 1px solid #c5c7c1; border-radius: 13px; background: white; text-align: left; cursor: pointer; }
.alternative-list button.selected { border-color: var(--matcha); background: #f0f3ed; box-shadow: inset 3px 0 var(--matcha); }
.alternative-list strong { font-size: .9rem; }
.alternative-list p { margin: 4px 0 7px; color: var(--muted); font-size: .8rem; }
.alternative-list span { color: var(--navy); font-size: .74rem; font-weight: 800; }
.premium-benefits { display: grid; gap: 10px; margin: 20px 0; }
.premium-benefits > div { padding: 14px; display: grid; grid-template-columns: 34px 1fr; border: 1px solid #d5c49d; border-radius: 13px; background: #fbf7ed; }
.premium-benefits span { grid-row: 1 / 3; color: var(--gold); font-family: var(--serif); font-size: .78rem; }
.premium-benefits strong { font-size: .85rem; }
.premium-benefits p { margin: 3px 0 0; color: var(--muted); font-size: .74rem; }
.premium-note { margin: 12px 0 0; color: var(--muted); text-align: center; font-size: .7rem; }
.overlay-backdrop[data-theme="premium"] .overlay-sheet { background: linear-gradient(155deg, #fffdf8, #f3ead7); box-shadow: 0 -20px 60px rgba(18,26,30,.22), inset 0 2px #c7a45e; }

/* Japan Luxury Concierge design system */
.portal-shell {
  --ambient-paper: #f5f1e8;
  --ambient-light: rgba(255,250,238,.76);
  --ambient-wash: rgba(179,136,69,.18);
  --ambient-pattern: rgba(36,52,71,.14);
  --page-accent: #a47d3e;
  --page-accent-soft: rgba(164,125,62,.11);
  --paper-shadow: 0 12px 34px rgba(31,40,43,.065), 0 1px 0 rgba(255,255,255,.82) inset;
  isolation: isolate;
  background-color: var(--ambient-paper);
  background-image:
    radial-gradient(ellipse at 8% 4%, var(--ambient-light), transparent 31%),
    radial-gradient(ellipse at 92% 20%, var(--ambient-wash), transparent 24%),
    radial-gradient(circle at 18% 12%, rgba(106,87,57,.085) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 68%, rgba(36,52,71,.07) 0 1px, transparent 1.4px),
    repeating-linear-gradient(92deg, rgba(84,69,46,.028) 0 1px, transparent 1px 8px);
  background-size: auto, auto, 23px 23px, 31px 31px, auto;
  transition: background-color 1.2s ease, color .8s ease;
}

/* Time of day: a deliberately quiet shift in light and metal accents. */
.portal-shell[data-time="morning"] { --ambient-paper: #f7f0e3; --ambient-light: rgba(255,229,197,.6); --ambient-wash: rgba(197,139,81,.19); --gold: #bd9250; }
.portal-shell[data-time="day"] { --ambient-paper: #f5f1e8; --ambient-light: rgba(255,252,242,.76); --ambient-wash: rgba(179,136,69,.16); }
.portal-shell[data-time="evening"] { --ambient-paper: #f1e7dc; --ambient-light: rgba(224,154,116,.22); --ambient-wash: rgba(152,88,58,.17); --paper-shadow: 0 15px 38px rgba(43,34,31,.085), 0 1px 0 rgba(255,255,255,.76) inset; }
.portal-shell[data-time="night"] { --ambient-paper: #eee8dc; --ambient-light: rgba(255,248,231,.72); --ambient-wash: rgba(92,111,103,.12); --ambient-pattern: rgba(29,48,67,.1); --gold: #9a6b28; }
.portal-shell[data-time="night"] .app-header { background: rgba(245,241,232,.95); border-color: rgba(29,48,67,.13); color: var(--ink); }
.portal-shell[data-time="night"] .mini-brand { color: var(--navy); }
.portal-shell[data-time="night"] .bottom-nav { background: rgba(255,254,250,.96); border-color: rgba(29,48,67,.13); }
.portal-shell[data-time="night"] .bottom-nav button { color: #536067; }
.portal-shell[data-time="night"] .bottom-nav button.active { color: var(--navy); }

/* Seasonal accents sit behind content and never alter layout. */
.portal-shell[data-season="spring"] { --season-ink: rgba(169,72,91,.22); }
.portal-shell[data-season="summer"] { --season-ink: rgba(43,101,89,.1); }
.portal-shell[data-season="autumn"] { --season-ink: rgba(151,63,35,.23); }
.portal-shell[data-season="winter"] { --season-ink: rgba(118,139,151,.11); }
.portal-shell[data-season="spring"]::after { background-image: radial-gradient(circle at 22% 22%, var(--season-ink) 0 3px, transparent 3.5px), radial-gradient(circle at 62% 40%, var(--season-ink) 0 2px, transparent 2.5px), repeating-linear-gradient(60deg, transparent 0 22px, rgba(102,115,91,.11) 22px 23px, transparent 23px 44px); background-size: 84px 84px, 112px 112px, auto; }
.portal-shell[data-season="summer"]::after { background-image: repeating-linear-gradient(60deg, transparent 0 20px, rgba(43,101,89,.15) 20px 21px, transparent 21px 40px), repeating-linear-gradient(-60deg, transparent 0 20px, rgba(43,101,89,.11) 20px 21px, transparent 21px 40px); }
.portal-shell[data-season="autumn"]::after { background-image: radial-gradient(ellipse at 30% 50%, var(--season-ink) 0 4px, transparent 4.5px), radial-gradient(ellipse at 70% 20%, rgba(179,136,69,.12) 0 3px, transparent 3.5px), repeating-linear-gradient(60deg, transparent 0 24px, rgba(157,79,47,.09) 24px 25px, transparent 25px 48px); background-size: 96px 82px, 118px 104px, auto; }
.portal-shell[data-season="winter"]::after { background-image: radial-gradient(circle, rgba(255,255,255,.64) 0 1.5px, transparent 2px), radial-gradient(circle, var(--season-ink) 0 1px, transparent 1.5px); background-size: 42px 42px, 67px 67px; }

/* Page identities: one brand, distinct concierge desks. */
.portal-shell[data-page="home"] { --page-accent: #a47d3e; --page-accent-soft: rgba(164,125,62,.14); }
.portal-shell[data-page="home"] .portal-main::before { content: ""; position: fixed; z-index: 0; top: 112px; right: max(-110px, calc((100vw - 1180px) / 2 - 80px)); width: min(86vw, 1050px); height: 430px; pointer-events: none; opacity: .27; background: url("fuji-horizon.jpg") right center / cover no-repeat; filter: saturate(.72) contrast(.92) sepia(.08); mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.22) 18%, #000 58%, transparent 100%), linear-gradient(0deg, transparent 0, #000 28%, #000 72%, transparent 100%); mask-composite: intersect; }
.portal-shell[data-page="itinerary"] { --page-accent: #354d64; --page-accent-soft: rgba(53,77,100,.1); }
.portal-shell[data-page="tips"] { --page-accent: #53664f; --page-accent-soft: rgba(83,102,79,.11); }
.portal-shell[data-page="support"] { --page-accent: #263b4d; --page-accent-soft: rgba(38,59,77,.1); }
.portal-shell[data-page="itinerary"] .portal-main { background-image: linear-gradient(90deg, transparent 17%, rgba(53,77,100,.055) 17.1%, transparent 17.2%), linear-gradient(0deg, transparent 72px, rgba(53,77,100,.045) 73px, transparent 74px); background-size: 100% 100%, 100% 148px; }
.portal-shell[data-page="tips"] .portal-main { background-image: radial-gradient(circle at 50% 100%, transparent 0 12px, rgba(83,102,79,.055) 12.5px 13.5px, transparent 14px); background-size: 28px 14px; }
.portal-shell[data-page="support"] .portal-main { background-image: radial-gradient(ellipse at 50% 0, rgba(38,59,77,.065), transparent 58%); }

/* Fine paper surfaces and warm, museum-like edges. */
.today-card, .quick-grid button, .notice-card, .timeline-content, .day-header-card,
.tip-category, .tip-guide, .emergency-card, .contact-card, .outside-note,
.home-sidenav, .overlay-sheet, .access-card {
  border-color: color-mix(in srgb, var(--page-accent) 20%, #d8d2c6);
  box-shadow: var(--paper-shadow);
}
.today-card, .quick-grid button, .timeline-content, .tip-category, .tip-guide, .overlay-sheet {
  background-image: linear-gradient(108deg, rgba(255,255,255,.26), transparent 42%), repeating-linear-gradient(93deg, rgba(83,68,45,.012) 0 1px, transparent 1px 8px);
}
.primary-button { box-shadow: 0 8px 20px rgba(26,40,52,.13), inset 0 1px rgba(255,255,255,.12); transition: transform .28s ease, background-color .28s ease, box-shadow .28s ease; }
.secondary-button, .text-link, .map-link, .sidenav-list button, .quick-grid button { transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.primary-button:hover, .quick-grid button:hover { transform: translateY(-2px); }
.primary-button:active, .quick-grid button:active { transform: translateY(0); }
.primary-button:hover { box-shadow: 0 11px 25px rgba(18,37,55,.2), inset 0 1px rgba(255,255,255,.14); }
.eyebrow { color: var(--page-accent); }
.app-header { box-shadow: 0 1px 12px rgba(34,42,44,.025); }
.bottom-nav { box-shadow: 0 -8px 28px rgba(28,39,44,.055); }

/* Overlay themes mirror profile, ryokan and reservation materials. */
.overlay-backdrop[data-theme="profile"] .overlay-sheet { --page-accent: #805f47; background-color: #f6efe4; }
.overlay-backdrop[data-theme="hotel"] .overlay-sheet { --page-accent: #755942; background-image: repeating-linear-gradient(90deg, rgba(117,89,66,.035) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(117,89,66,.025) 0 1px, transparent 1px 34px); }
.overlay-backdrop[data-theme="reservation"] .overlay-sheet { --page-accent: #a47d3e; box-shadow: 0 -20px 60px rgba(18,26,30,.22), inset 0 2px rgba(196,152,78,.2); }
.overlay-backdrop[data-theme="overview"] .overlay-sheet { --page-accent: #354d64; }

/* Slow paper drift and soft arrival preserve a calm sense of journey. */
.portal-shell::before { animation: pattern-drift 36s ease-in-out infinite alternate; }
.page-arriving .app-page:not([hidden]) { animation: page-arrive .72s cubic-bezier(.22,.7,.2,1) both; }
.page-arriving .app-page:not([hidden]) > * { animation: paper-reveal .82s cubic-bezier(.22,.7,.2,1) both; }
@keyframes pattern-drift { to { transform: translate3d(-12px, 8px, 0); } }
@keyframes page-arrive { from { opacity: .62; } to { opacity: 1; } }
@keyframes paper-reveal { from { transform: translateY(7px); opacity: .72; } to { transform: translateY(0); opacity: 1; } }

@supports not (color: color-mix(in srgb, white, black)) {
  .today-card, .quick-grid button, .notice-card, .timeline-content, .day-header-card, .tip-category, .tip-guide, .emergency-card, .contact-card, .outside-note, .home-sidenav, .overlay-sheet, .access-card { border-color: #d4cec1; }
}

@media (min-width: 700px) {
  .portal-main { padding: 0 24px; }
  .app-header { padding-inline: max(24px, calc((100vw - 1132px) / 2)); }
  .page-stack, .itinerary-page { padding-inline: 0; }
  .welcome-block { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .welcome-copy { padding: 24px 0 16px; }
  .quick-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 940px) {
  .home-shell { grid-template-columns: 246px minmax(0, 1fr); gap: 34px; padding: 34px 0 48px; }
  .home-sidenav { position: sticky; top: 82px; align-self: start; margin: 0; padding: 22px 18px; border-radius: 22px 22px 22px 6px; background: rgba(255,254,250,.88); }
  .home-sidenav::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 94px; height: 94px; opacity: .42; border-radius: 100% 0 20px 0; background-image: radial-gradient(circle at 100% 100%, transparent 0 13px, rgba(179,136,69,.2) 13.5px 14.5px, transparent 15px); background-size: 28px 28px; pointer-events: none; }
  .sidenav-heading { margin-bottom: 22px; }
  .sidenav-list { display: grid; gap: 4px; overflow: visible; }
  .sidenav-group { display: block; margin: 15px 8px 5px; color: #8a8f8d; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .sidenav-list button { width: 100%; min-height: 53px; padding: 8px; grid-template-columns: 26px 1fr; border-color: rgba(29,48,67,.13); border-radius: 10px; }
  .sidenav-list button:hover { border-color: rgba(29,48,67,.28); background: #e9e0d1; }
  .sidenav-list button.active:hover { background: var(--navy); }
  .sidenav-note { position: relative; z-index: 1; display: grid; grid-template-columns: 30px 1fr; gap: 9px; margin-top: 22px; padding: 14px 10px 5px; border-top: 1px solid var(--line); }
  .sidenav-note > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #c4b18b; border-radius: 50%; color: #8a651f; font-family: var(--serif); font-size: .75rem; }
  .sidenav-note p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.45; }
  .sidenav-note strong { color: var(--ink); }
  .home-content { padding: 0; }
}

@media (max-width: 699px) {
  .portal-main { width: 100%; }
  .home-shell, .home-sidenav, .home-content { min-width: 0; }
  .home-sidenav { position: relative; max-width: 100vw; margin: 10px 0 0; padding: 10px 0 9px 12px; overflow: hidden; border-width: 1px 0; border-radius: 0; box-shadow: 0 5px 16px rgba(36,52,71,.04); }
  .sidenav-heading { margin: 0 12px 8px 0; }
  .sidenav-mon { width: 30px; height: 30px; font-size: .85rem; }
  .sidenav-heading p { font-size: .58rem; }
  .sidenav-heading h2 { font-size: .75rem; }
  .sidenav-list { width: 100%; max-width: 100%; margin-right: 0; padding: 0 12px 4px 0; scroll-padding-inline: 12px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; }
  .sidenav-list button { flex-basis: 112px; min-height: 54px; padding: 8px 9px; grid-template-columns: 19px minmax(0, 1fr); border-radius: 11px; scroll-snap-align: start; }
  .sidenav-list button > span { grid-row: auto; font-size: .64rem; }
  .sidenav-list button strong { font-size: .72rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
  .sidenav-list button small { display: none; }
  .home-content { gap: 20px; padding: 22px 12px 34px; }
  .welcome-block { gap: 16px; padding: 0; }
  .welcome-copy h1 { margin-bottom: 10px; font-size: clamp(2rem, 11vw, 2.75rem); }
  .welcome-copy p:not(.eyebrow) { margin-bottom: 8px; font-size: .92rem; }
  .portal-shell[data-page="home"] .portal-main::before { position: absolute; top: 104px; right: -90px; width: 620px; height: 310px; opacity: .3; }
  .today-card { padding: 15px; border-radius: 17px; }
  .next-grid { grid-template-columns: 62px minmax(0, 1fr); gap: 11px; margin: 19px 0; }
  .time-block { padding-right: 9px; }
  .time-block strong { font-size: .98rem; }
  .next-grid h2 { font-size: 1.18rem; }
  .button-row { display: grid; grid-template-columns: 1fr; }
  .quick-grid button { min-height: 104px; padding: 12px; }
  .quick-symbol { margin-bottom: 10px; }
  .section-heading h2 { font-size: 1.45rem; }
  .portal-main::after { position: absolute; inset: 58px 0 70px; opacity: .62; background-size: 104px 122px, 132px 154px, 82px 98px, 132px 154px, 106px 126px, 88px 108px; }
}

@media (max-width: 360px) {
  .access-shell { padding: 12px; }
  .button-row { flex-direction: column; }
  .next-grid { grid-template-columns: 62px 1fr; }
  .timeline-card { grid-template-columns: 54px 16px minmax(0, 1fr); }
  .journey-transfer { margin-left: 70px; }
  .hotel-endpoint { grid-template-columns: 50px 34px minmax(0, 1fr); padding: 12px; }
  .return-hotel { width: calc(100% - 70px); margin-left: 70px; }
}

@media (max-width: 560px) {
  .tips-hero { min-height: 270px; padding: 24px 18px; grid-template-columns: 1fr 58px; }
  .tips-seal { width: 56px; height: 86px; }
  .tips-seal span { font-size: 1.7rem; }
  .tips-directory-heading { align-items: start; flex-direction: column; gap: 6px; }
  .tip-category-toggle { min-height: 76px; grid-template-columns: 50px minmax(0, 1fr) auto 16px; gap: 9px; padding: 10px 12px; }
  .tip-category-icon { width: 48px; height: 48px; border-radius: 12px; }
  .tip-category-meta { display: none; }
  .tip-category-lock { min-width: 0; width: 32px; height: 32px; padding: 0; overflow: hidden; color: transparent; gap: 0; }
  .tip-category-lock i { color: #75541d; flex: 0 0 auto; }
  .tip-category-title small { font-size: .69rem; }
  .category-intro, .guide-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026 premium portal direction — navy lacquer, gold leaf and warm washi */
.portal-shell { --navy: #08253a; --ink: #10283c; --gold: #c59642; --matcha: #174f3b; --paper: #f8f1e3; --card: #fffaf0; padding: 0; background-color: #f8f1e3; background-image: radial-gradient(circle at 18% 8%, rgba(255,255,255,.8), transparent 24%), repeating-linear-gradient(93deg, rgba(91,67,34,.025) 0 1px, transparent 1px 7px); }
.portal-shell::before { inset: 174px 0 0; width: 100%; opacity: .17; background-image: radial-gradient(circle at 50% 100%, transparent 0 13px, #b88b3b 13.5px 14.5px, transparent 15px); background-size: 30px 15px; mask-image: linear-gradient(#000, transparent 22%, transparent 78%, #000); }
.portal-main::after { opacity: .25; }
.portal-shell .app-header, .portal-shell[data-time="night"] .app-header { position: fixed; inset: 0 0 auto; z-index: 40; height: 94px; padding-inline: max(20px, calc((100vw - 920px) / 2)); background: #08253a; border-bottom: 1px solid rgba(226,184,98,.5); color: #f4ce7a; backdrop-filter: none; }
.portal-shell .mini-brand, .portal-shell[data-time="night"] .mini-brand { display: flex; align-items: center; gap: 14px; color: #f2c96f; font-family: var(--serif); font-size: clamp(1.35rem, 4vw, 2rem); }
.brand-seal.small { width: 52px; height: 52px; display: grid; place-items: center; border: 2px solid #f2c96f; border-radius: 50%; color: #f2c96f; font-size: 0; }
.brand-seal.small::before { content: "富"; font-size: 1.3rem; }
.avatar-button { width: 52px; height: 52px; border: 2px solid #d8a948; background: linear-gradient(145deg, #ded5c4, #776e62); color: white; box-shadow: 0 0 0 3px #08253a, 0 0 0 4px rgba(216,169,72,.5); }
.portal-shell .bottom-nav, .portal-shell[data-time="night"] .bottom-nav { position: fixed; z-index: 39; inset: 94px 0 auto; min-height: 80px; padding: 0 max(0px, calc((100vw - 920px) / 2)); grid-template-columns: repeat(4, 1fr); background: #08253a; border: 0; border-bottom: 2px solid #c59642; backdrop-filter: none; box-shadow: 0 5px 18px rgba(8,37,58,.16); }
.portal-shell .bottom-nav button, .portal-shell[data-time="night"] .bottom-nav button { min-height: 80px; margin: 0; padding: 9px 2px 7px; border: 0; border-left: 1px solid rgba(255,255,255,.13); border-radius: 0; background: transparent; color: #f4eee3; font-family: var(--serif); font-size: .88rem; }
.bottom-nav button:last-child { border-right: 1px solid rgba(255,255,255,.13); }
.portal-shell .bottom-nav button.active, .portal-shell[data-time="night"] .bottom-nav button.active { position: relative; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.025); color: #f0c66c; box-shadow: none; }
.bottom-nav button.active::after { content: ""; position: absolute; inset: auto 14% 0; height: 4px; background: #e0b75f; border-radius: 4px 4px 0 0; }
.bottom-nav .nav-icon { width: 24px; height: 24px; }
.portal-main { width: min(100%, 920px); padding-top: 174px; }
.home-sidenav { display: none !important; }
.home-shell { display: block; }
.page-stack, .itinerary-page { padding: 42px clamp(18px, 5vw, 48px) 60px; }
h1, h2, h3 { color: #10283c; }
.welcome-copy .eyebrow, .welcome-copy > p:not(.eyebrow), .welcome-copy .text-link { display: none; }
.welcome-copy h1 { font-size: clamp(2.3rem, 7vw, 4rem); font-weight: 500; }
.welcome-copy h1 br { display: none; }
.welcome-copy h1 span::after { content: ""; }
.home-day-selector { grid-auto-columns: minmax(112px, 1fr); margin-top: -11px; padding-bottom: 8px; }
.home-day-tab { border-color: #d0af6d; border-radius: 12px; background: rgba(255,250,240,.88); }
.home-day-tab[aria-selected="true"] { border-color: #c59642; background: #174f3b; box-shadow: 0 8px 18px rgba(23,79,59,.17); }
.today-card { padding: 0; overflow: hidden; border: 1px solid #c9a45d; border-radius: 22px; background: #fffaf0; box-shadow: 0 15px 32px rgba(56,45,24,.13); }
.today-card .card-topline { padding: 14px 18px 0; }
.home-destination-photo { height: clamp(230px, 48vw, 410px); margin: 14px 0 0; overflow: hidden; background: #d5cfbf; }
.home-destination-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.next-grid { grid-template-columns: 110px minmax(0,1fr); margin: 0; padding: 25px 28px 16px; }
.time-block { border-right-color: #d8c39b; }
.time-block span { color: #8d6425; font-family: var(--serif); font-size: .82rem; }
.time-block strong { color: #8d6425; font-family: var(--serif); font-size: 1.35rem; }
.route-kicker { display: none; }
.next-grid h2 { margin: 0 0 12px; font-family: var(--serif); font-size: clamp(1.75rem, 5vw, 2.8rem); font-weight: 500; }
.route-origin { position: relative; margin: 0 0 12px; padding-left: 26px; color: #343738; font-size: .9rem; }
.route-origin::before { content: "▦"; position: absolute; left: 0; color: #9d772f; }
.home-transfer-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.home-transfer-facts > span { border-color: #dbc69f; background: #f8f1e4; }
.home-transfer-facts strong { color: #174f3b; }
.today-card .button-row { padding: 0 28px 26px; }
.today-card .primary-button { min-height: 58px; border: 1px solid #c89d4a; background: #174f3b; color: #f3ca72; font-family: var(--serif); font-size: 1.05rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 6px 12px rgba(23,79,59,.17); }
.today-card .secondary-button { flex: 0 0 130px; border-color: #c9a45d; color: #174f3b; }
.home-content > section:nth-of-type(3) .section-heading { display: none; }
.quick-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.quick-grid button { min-height: 98px; border-color: #c9a45d; border-radius: 15px; background: #fffaf0; }
.quick-grid button:nth-child(3) { display: none; }
.quick-grid button:nth-child(4) { grid-column: 1 / -1; min-height: 82px; }
.quick-grid strong { color: #174f3b; font-family: var(--serif); font-size: 1rem; }
.notice-card { display: none; }

.itinerary-page .page-title-row { display: block; text-align: center; }
.itinerary-page .page-title-row h1 { font-size: clamp(2.6rem, 8vw, 4.5rem); font-weight: 500; }
.itinerary-page .date-range { display: block; margin-top: 8px; color: #9d6a1d; font-family: var(--serif); font-size: 1rem; }
.day-tabs { margin: 30px 0 24px; grid-auto-columns: minmax(150px,1fr); gap: 0; border: 1px solid #c9a45d; border-radius: 14px; }
.day-tabs button { min-height: 76px; border: 0; border-right: 1px solid #c9a45d; border-radius: 0; background: rgba(255,250,240,.8); }
.day-tabs button[aria-selected="true"] { background: #174f3b; color: #fff5df; }
.day-header-card { padding: 16px; border-color: #c9a45d; background: rgba(255,250,240,.9); }
.weather-switch { max-width: 560px; margin: 14px auto 0; border-color: #c9a45d; background: #fffaf0; }
.weather-mode-button.active { background: #174f3b; color: white; }
.day-budget { border-color: #d6bb84; background: #fffaf0; }
.timeline-line::before { border-color: #b98a30; }
.timeline-line span { border-color: #b98a30; background: #fffaf0; }
.timeline-content, .hotel-endpoint { border-color: #d2ae67; background: #fffaf0; box-shadow: 0 8px 18px rgba(72,54,25,.07); }
.journey-transfer { border-style: solid; border-color: #9bb2a4; background: #f4f7ef; }
.transfer-method { background: #174f3b; }
.return-hotel { border-color: #c9a45d; background: #fffaf0; }

.tips-hero { min-height: 170px; padding: 15px 4px; align-items: center; border-radius: 0; background: transparent; color: #10283c; box-shadow: none; }
.tips-hero h1 { color: #10283c; font-size: clamp(2.7rem,8vw,4.4rem); font-weight: 500; }
.tips-hero p:not(.eyebrow) { color: #5c6263; }
.tips-seal { color: #a87926; border-color: #c9a45d; }
.tips-toolbar { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.tips-search { position: relative; margin: 0; }
.tips-search span { position: absolute; left: 18px; top: 17px; width: 18px; height: 18px; border: 2px solid #6b706f; border-radius: 50%; }
.tips-search span::after { content: ""; position: absolute; right: -7px; bottom: -5px; width: 8px; border-top: 2px solid #6b706f; transform: rotate(45deg); }
.tips-search input { width: 100%; min-height: 58px; padding: 0 12px 0 50px; border: 1px solid #aa9572; border-radius: 13px; background: rgba(255,250,240,.9); color: #10283c; font: inherit; font-size: .88rem; outline: none; }
.tips-search input:focus { border-color: #174f3b; box-shadow: 0 0 0 3px rgba(23,79,59,.1); }
.saved-tips-button { min-width: 124px; border: 1px solid #aa9572; border-radius: 13px; background: #fffaf0; color: #10283c; font-weight: 750; }
.saved-tips-button span { color: #174f3b; font-size: 1.2rem; }
.saved-tips-button b { min-width: 25px; height: 25px; margin-left: 5px; display: inline-grid; place-items: center; border-radius: 50%; background: #b48937; color: white; }
.tips-filters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; border: 1px solid #aa9572; border-radius: 13px; }
.tips-filters button { min-height: 52px; border: 0; border-right: 1px solid #c8b792; background: #fffaf0; color: #202d33; font-weight: 750; }
.tips-filters button.active { background: #174f3b; color: white; }
.tips-page .featured-tip { display: none; }
.tips-directory-heading { margin-top: 8px; }
.tip-category { position: relative; border-color: #c9a45d; border-radius: 15px; background: #fffaf0; }
.tip-save-button { position: absolute; z-index: 3; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: transparent; color: #174f3b; font-size: 1.65rem; cursor: pointer; }
.tip-save-button[aria-pressed="true"] { color: #b48937; }
.tip-category-toggle { min-height: 150px; padding: 0 60px 0 0; grid-template-columns: minmax(132px,40%) minmax(0,1fr) auto; gap: 18px; }
.tip-category-icon { width: 100%; height: 150px; border: 0; border-radius: 14px 0 0 14px; }
.tip-category-icon img { padding: 0; border-radius: 0; object-fit: cover; }
.tip-category-title strong { font-size: clamp(1.25rem,4vw,2rem); font-weight: 500; }
.tip-category-meta, .tip-chevron { display: none; }
.tip-category-lock { justify-self: start; }

#page-support .page-title-row { position: relative; padding: 22px 0 30px; }
#page-support .page-title-row::after { content: ""; position: absolute; right: 0; top: 0; width: 42%; height: 100%; opacity: .18; background: radial-gradient(circle at 50% 100%, transparent 0 18px, #806a44 19px 20px, transparent 21px); background-size: 40px 20px; mask-image: radial-gradient(ellipse, #000, transparent 72%); }
#page-support .page-title-row h1 { font-size: clamp(3rem,9vw,5rem); font-weight: 500; }
.emergency-card, .contact-card, .outside-note { border-color: #c9a45d; border-radius: 20px; background: #fffaf0; box-shadow: 0 10px 24px rgba(71,52,20,.09); }
.emergency-card { padding: 28px; }
.emergency-card h2 { color: #bd2f21; font-family: var(--serif); font-size: 1.8rem; }
.emergency-button { min-height: 58px; border-radius: 10px; background: #cb3626; font-family: var(--serif); font-size: 1.1rem; }
.contact-card { padding: 28px; color: #10283c; }
.contact-card h2 { color: #174f3b; font-family: var(--serif); font-size: 1.8rem; }
.contact-card > p { color: #4f5657; }
.contact-card .primary-button { min-height: 58px; background: #174f3b; color: #fff3d3; font-family: var(--serif); font-size: 1.1rem; }
.support-meta { border-top-color: #d9c49c; }
.support-meta small { color: #68706f; }
.instruction-list { padding: 18px; border: 1px solid #c9a45d; border-radius: 18px; background: #fffaf0; }

@media (max-width: 699px) {
  .app-header { height: 84px; padding: 0 18px; }
  .brand-seal.small { width: 46px; height: 46px; }
  .mini-brand { gap: 10px; font-size: 1.45rem; }
  .avatar-button { width: 46px; height: 46px; }
  .bottom-nav { inset-block-start: 84px; min-height: 76px; }
  .bottom-nav button { min-height: 76px; font-size: .78rem; }
  .portal-main { padding-top: 160px; }
  .page-stack, .itinerary-page { padding: 32px 14px 48px; }
  .home-content { padding: 32px 14px 48px; gap: 18px; }
  .welcome-copy h1 { font-size: clamp(1.8rem,7.8vw,2.15rem); white-space: nowrap; }
  .home-day-selector { margin-top: -4px; }
  .today-card { border-radius: 18px; }
  .home-destination-photo { height: 220px; }
  .next-grid { grid-template-columns: 1fr; gap: 8px; padding: 20px 20px 14px; }
  .time-block { display: flex; gap: 8px; align-items: baseline; padding: 0; border: 0; }
  .time-block span, .time-block strong { margin: 0; }
  .home-transfer-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .today-card .button-row { padding: 0 20px 20px; grid-template-columns: 1fr; }
  .today-card .secondary-button { display: none; }
  .quick-grid button { min-height: 88px; }
  .timeline-card { grid-template-columns: 47px 14px minmax(0,1fr); }
  .timeline-time strong { font-size: .72rem; }
  .journey-transfer { margin-left: 61px; }
  .timeline-content { min-height: 145px; }
  .itinerary-photo-placeholder.has-photo { float: left; width: 42%; height: 145px; margin: -16px 14px -16px -16px; border-radius: 14px 0 0 14px; }
  .itinerary-photo-placeholder figcaption { display: none; }
  .tip-category-toggle { grid-template-columns: 42% minmax(0,1fr); min-height: 132px; gap: 12px; padding-right: 48px; }
  .tip-category-icon { height: 132px; }
  .tip-category-title small { font-size: .67rem; }
  .tip-category-lock { grid-column: 2; }
  .tips-directory-heading h2 { font-size: 1.3rem; }
}

@media (min-width: 940px) {
  .home-shell { display: block; padding: 0; }
  .home-content { max-width: 820px; margin: auto; padding: 48px 24px 70px; }
}

/* Reference-led itinerary: compact controls and a calm vertical journey */
.itinerary-page .page-title-row { position: relative; padding-bottom: 28px; }
.itinerary-page .page-title-row::after { content: "✿"; position: absolute; left: 50%; bottom: 0; width: 150px; color: #b48734; text-align: center; transform: translateX(-50%); background: linear-gradient(#b48734,#b48734) left center/58px 1px no-repeat, linear-gradient(#b48734,#b48734) right center/58px 1px no-repeat; }
.itinerary-page .page-title-row .eyebrow { color: #9b742d; }
.day-tabs button { padding: 10px 13px; display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center; column-gap: 8px; text-align: center; }
.day-tabs .day-tab-mark { grid-row: 1 / 3; align-self: center; color: #a87926; font-family: var(--serif); font-size: 1.35rem; }
.day-tabs button strong { align-self: end; font-size: 1rem; white-space: nowrap; }
.day-tabs button small { grid-column: 2; align-self: start; color: inherit; font-size: .68rem; opacity: .76; }
.day-tabs button[aria-selected="true"] .day-tab-mark { color: #f0c76d; }
.day-header-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.day-copy { display: none; }
.day-header-card .weather-switch { width: min(100%,540px); margin: 0 auto 16px; }
.day-summary-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 14px; overflow: hidden; border: 1px solid #c9a45d; border-radius: 13px; background: #fffaf0; box-shadow: 0 5px 14px rgba(71,52,20,.05); }
.day-summary-strip > span { min-width: 0; padding: 13px 12px; border-right: 1px solid #dec99e; text-align: center; }
.day-summary-strip > span:last-child { border: 0; }
.day-summary-strip small,.day-summary-strip strong { display: block; }
.day-summary-strip small { margin-bottom: 3px; color: #9b742d; font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.day-summary-strip strong { overflow-wrap: anywhere; color: #173d32; font-family: var(--serif); font-size: .78rem; line-height: 1.35; }
.day-budget { margin: 0 0 14px; padding: 0; overflow: hidden; border: 1px solid #d6bb84; border-radius: 12px; background: #fffaf0; }
.day-budget summary { min-height: 46px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: #173d32; font-size: .74rem; font-weight: 850; }
.day-budget summary strong { color: #9b742d; }
.day-budget dl { margin: 0; padding: 0 14px; border-top: 1px solid #e2d2b2; }
.day-budget > p { margin: 0; padding: 11px 14px 14px; color: #676861; font-size: .68rem; }
.day-header-card .alternative-button { width: 100%; margin: 0 0 16px; border-color: #cab27f; background: rgba(255,250,240,.72); }
.timeline-list { position: relative; isolation: isolate; }
.timeline-list::before { content: ""; position: absolute; z-index: 0; left: 70px; top: 24px; bottom: 26px; width: 1.5px; background: linear-gradient(to bottom, rgba(177,128,39,.18), #b18027 8%, #b18027 92%, rgba(177,128,39,.18)); }
.timeline-list > * { position: relative; z-index: 1; }
.timeline-line { z-index: 2; }
.timeline-line::before { display: none; }
.timeline-line span { width: 11px; height: 11px; left: 3px; border-color: #b18027; border-width: 2px; }
.timeline-content { border-color: #cda95f; }
.journey-transfer .transfer-toggle { min-height: 54px; }
.journey-transfer .transfer-method { border-radius: 99px; }

@media (max-width: 520px) {
  .itinerary-page .page-title-row h1 { font-size: 2.7rem; }
  .day-tabs { grid-auto-columns: minmax(125px,1fr); }
  .day-tabs button { padding-inline: 8px; column-gap: 6px; }
  .day-tabs .day-tab-mark { font-size: 1.1rem; }
  .day-summary-strip > span { padding: 11px 6px; }
  .day-summary-strip strong { font-size: .68rem; }
  .timeline-list::before { left: 53px; }
}

/* Itinerary v2: luxury concierge clarity without progress tracking */
.itinerary-page { position: relative; }
.itinerary-page .day-tabs {
  position: sticky;
  z-index: 8;
  top: 166px;
  box-shadow: 0 8px 18px rgba(50,38,19,.08);
}
.itinerary-page .day-panel { position: relative; padding-bottom: 70px; }
.weather-switch { border-radius: 999px; padding: 5px; }
.weather-mode-button { border-radius: 999px; font-family: var(--serif); font-size: .9rem; font-weight: 650; }
.weather-mode-button span { font-family: inherit; color: #b1812c; }
.weather-mode-button.active span { color: #f3ca72; }
.day-summary-strip > span { display: grid; grid-template-columns: 28px minmax(0,1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; }
.day-summary-strip i { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #c9a45d; border-radius: 50%; color: #9b6c1f; font-family: var(--serif); font-size: .8rem; font-style: normal; }
.day-summary-strip small { margin: 0; }
.day-summary-strip strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-list { margin-top: 24px; }
.timeline-list::before { top: 30px; bottom: 42px; width: 2px; }
.timeline-card { margin-bottom: 4px; }
.timeline-line span { top: 21px; width: 14px; height: 14px; left: 2px; background: #fffaf0; box-shadow: 0 0 0 4px rgba(255,250,240,.95); }
.timeline-card.reservation .timeline-line span { background: #b18027; }
.timeline-content { position: relative; min-height: 152px; margin-bottom: 12px; padding: 16px 48px 16px 16px; overflow: hidden; border-radius: 16px; box-shadow: 0 9px 22px rgba(59,43,17,.08); }
.timeline-content h3 { margin: 2px 0 7px; color: #10283c; font-family: var(--serif); font-size: clamp(1.12rem,3.3vw,1.55rem); font-weight: 550; line-height: 1.15; }
.timeline-content > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.timeline-time { padding-top: 17px; }
.timeline-time strong { color: #b53d29; font-family: var(--serif); font-size: .9rem; }
.item-label { color: #9b742d; letter-spacing: .11em; }
.itinerary-save-button { position: absolute; z-index: 4; top: 12px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #9b742d; cursor: pointer; font-size: 1.65rem; line-height: 1; }
.itinerary-save-button:hover,.itinerary-save-button:focus-visible { background: #f5ead4; outline: none; }
.itinerary-save-button[aria-pressed="true"] { color: #174f3b; }
.itinerary-card-actions { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; }
.itinerary-card-actions:empty { display: none; }
.itinerary-card-actions a { min-height: 34px; display: inline-flex; align-items: center; color: #174f3b; font-size: .7rem; font-weight: 850; text-decoration: none; }
.itinerary-card-actions .official-link { color: #8d6425; }
.itinerary-card-actions a:focus-visible { outline: 2px solid #174f3b; outline-offset: 3px; border-radius: 3px; }
.itinerary-photo-placeholder.has-photo { border-bottom: 1px solid rgba(201,164,93,.55); }
.photo-destination-link::after { content: "↗"; position: absolute; z-index: 3; right: 12px; bottom: 11px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(13,36,48,.76); color: white; font-size: .76rem; }
.journey-transfer { position: relative; z-index: 3; margin-top: -2px; margin-bottom: 13px; border-radius: 12px; box-shadow: 0 4px 10px rgba(23,79,59,.04); }
.journey-transfer .transfer-toggle { padding: 7px 13px; }
.journey-transfer .transfer-toggle > span:nth-child(2) { display: flex; min-width: 0; gap: 8px; align-items: baseline; }
.journey-transfer .transfer-toggle small { margin: 0; white-space: nowrap; }
.journey-transfer .transfer-toggle b { font-size: 0; }
.journey-transfer .transfer-toggle b::before { content: "⌄"; font-size: 1.2rem; }
.journey-transfer .transfer-toggle[aria-expanded="true"] b::before { content: "⌃"; }
.transfer-panel { border-top-color: #c8d3c8; }
.hotel-endpoint { grid-template-columns: 62px 18px minmax(0,1fr); gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.hotel-endpoint-time { padding-top: 18px; align-self: start; color: #8d6425; font-family: var(--serif); }
.hotel-endpoint-mark { z-index: 2; width: 42px; height: 42px; align-self: start; margin-top: 9px; transform: translateX(-12px); border: 1px solid #c9a45d; border-radius: 50%; background: #174f3b; box-shadow: 0 0 0 5px #fffaf0, 0 5px 12px rgba(23,79,59,.16); }
.hotel-endpoint-copy { min-width: 0; margin: 0 0 14px 7px; padding: 15px 48px 14px 16px; border: 1px solid #d2ae67; border-radius: 16px; background: #fffaf0; box-shadow: 0 9px 22px rgba(59,43,17,.08); }
.hotel-endpoint h3 { color: #10283c; font-size: 1.2rem; font-weight: 550; }
.hotel-endpoint-actions { display: flex; gap: 18px; }
.hotel-endpoint-actions button,.hotel-endpoint-actions a { min-height: 38px; display: inline-flex; align-items: center; border: 0; background: transparent; color: #174f3b; font-size: .7rem; font-weight: 850; text-decoration: none; }
.itinerary-floating-map { position: sticky; z-index: 9; float: right; bottom: 88px; min-width: 112px; min-height: 50px; margin-top: -54px; padding: 0 18px; display: inline-flex; gap: 9px; align-items: center; justify-content: center; border: 1px solid #c9a45d; border-radius: 999px; background: #174f3b; color: #fff3d3; box-shadow: 0 10px 24px rgba(15,49,39,.24); font-family: var(--serif); font-size: 1rem; text-decoration: none; }
.itinerary-floating-map span { color: #f3ca72; font-size: 1.2rem; }
.itinerary-floating-map:focus-visible { outline: 3px solid #f3ca72; outline-offset: 3px; }

@media (max-width: 699px) {
  .itinerary-page .day-tabs { top: 160px; margin: 20px -4px 18px; grid-auto-columns: minmax(116px,1fr); overflow-x: auto; scrollbar-width: none; }
  .itinerary-page .day-tabs::-webkit-scrollbar { display: none; }
  .day-tabs button { min-height: 64px; }
  .day-summary-strip > span { grid-template-columns: 23px minmax(0,1fr); column-gap: 5px; padding: 10px 6px; }
  .day-summary-strip i { width: 23px; height: 23px; font-size: .68rem; }
  .day-summary-strip small { font-size: .52rem; letter-spacing: .04em; }
  .day-summary-strip strong { font-size: .64rem; }
  .timeline-card { grid-template-columns: 47px 14px minmax(0,1fr); }
  .timeline-content { min-height: 136px; padding: 14px 42px 14px 14px; }
  .timeline-time strong { font-size: .7rem; }
  .timeline-time span { font-size: .58rem; }
  .timeline-line span { top: 19px; left: 1px; }
  .itinerary-photo-placeholder.has-photo { width: 43%; height: 136px; margin: -14px 12px -14px -14px; }
  .timeline-content h3 { font-size: 1.03rem; }
  .timeline-content > p { margin-bottom: 7px; font-size: .7rem; -webkit-line-clamp: 2; }
  .itinerary-card-actions { gap: 4px 10px; }
  .itinerary-card-actions a { min-height: 30px; font-size: .62rem; }
  .photo-destination-link::after { display: none; }
  .journey-transfer { margin-left: 61px; }
  .hotel-endpoint { grid-template-columns: 47px 14px minmax(0,1fr); }
  .hotel-endpoint-time { padding-top: 16px; font-size: .7rem; }
  .hotel-endpoint-mark { width: 38px; height: 38px; margin-top: 8px; transform: translateX(-12px); }
  .hotel-endpoint-copy { margin-left: 7px; padding: 13px 40px 12px 14px; }
  .hotel-endpoint h3 { font-size: 1rem; }
  .hotel-endpoint p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (max-width: 390px) {
  .day-tab-mark { display: none; }
  .day-tabs button { grid-template-columns: 1fr; }
  .day-tabs button small { grid-column: 1; }
  .day-summary-strip small { display: none; }
  .day-summary-strip > span { grid-template-rows: 1fr; }
  .day-summary-strip i { grid-row: 1; }
}