:root {
  --ink: #17201c;
  --pine: #183d32;
  --pine-deep: #102c25;
  --moss: #6f806f;
  --bronze: #a77a42;
  --bronze-light: #c8a16a;
  --ivory: #f4f1ea;
  --paper: #fbfaf7;
  --mist: #dfe5df;
  --line: rgba(23, 32, 28, 0.14);
  --muted: #707871;
  --clay: #a6533f;
  --white: #ffffff;
  --shadow: 0 18px 42px rgba(14, 25, 20, 0.16);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color: var(--ink);
  background: #0e1713;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scrollbar-width: none; background: #0e1713; }
html::-webkit-scrollbar { width: 0; height: 0; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: hidden; background: #0e1713; letter-spacing: 0; }
body.is-locked { overflow: hidden; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
svg { display: block; }

.app-shell { position: relative; width: min(100%, 480px); min-height: 100vh; margin: 0 auto; overflow: clip; background: var(--paper); box-shadow: 0 0 80px rgba(0, 0, 0, 0.34); }
main { padding-bottom: calc(72px + var(--safe-bottom)); }
.section-pad { padding: 64px 20px; }

.topbar { position: fixed; top: 0; left: 50%; z-index: 40; width: min(100%, 480px); height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 18px; color: var(--white); transform: translateX(-50%); transition: color 180ms ease, background 180ms ease, border-color 180ms ease; }
.topbar.is-solid { color: var(--ink); background: rgba(251, 250, 247, 0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand-lockup { min-width: 0; display: inline-flex; align-items: center; gap: 10px; }
.brand-emblem { width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.36); border-radius: 50%; background: #fff; }
.topbar.is-solid .brand-emblem { border-color: var(--line); }
.brand-emblem img { width: 100%; height: 100%; object-fit: cover; }
.brand-name { min-width: 0; display: flex; flex-direction: column; line-height: 1; }
.brand-name strong { font-family: "Songti SC", STSong, serif; font-size: 18px; font-weight: 700; text-shadow: 0 1px 7px rgba(0, 0, 0, 0.72); }
.brand-name small { margin-top: 4px; font-size: 8px; opacity: 0.72; }
.topbar.is-solid .brand-name strong { text-shadow: none; }
.top-actions { display: flex; gap: 6px; }
.icon-button, .floating-icon { width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; color: inherit; background: rgba(16, 28, 23, 0.14); backdrop-filter: blur(10px); cursor: pointer; }
.topbar.is-solid .icon-button { border-color: var(--line); background: rgba(255, 255, 255, 0.78); }
.icon-button svg, .floating-icon svg { width: 19px; height: 19px; stroke-width: 1.8; }

.hero { position: relative; height: 78svh; min-height: 570px; max-height: 760px; overflow: hidden; color: var(--white); background: #1b2823; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: center 63%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 14, 11, 0.3) 0%, rgba(8, 14, 11, 0.02) 38%, rgba(8, 14, 11, 0.72) 100%); }
.hero-content { position: absolute; right: 24px; bottom: 108px; left: 24px; z-index: 2; }
.eyebrow { margin: 0 0 10px; color: var(--bronze); font-size: 11px; font-weight: 700; line-height: 1.4; }
.eyebrow.light { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.84); }
.eyebrow.light svg { width: 14px; height: 14px; }
.hero h1 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 68px; font-weight: 600; line-height: 1; }
.hero-english { margin: 10px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.hero-copy { margin: 20px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.command-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid transparent; border-radius: 6px; font-weight: 650; cursor: pointer; }
.command-button svg { width: 18px; height: 18px; }
.command-button.is-primary { color: var(--ink); background: var(--white); }
.command-button.is-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.54); background: rgba(13, 23, 19, 0.12); backdrop-filter: blur(8px); }
.command-button.is-copper { width: 100%; color: #fff; background: var(--bronze); }
.command-button.is-dark { color: #fff; background: var(--ink); }
.hero-index { position: absolute; right: 20px; bottom: 36px; z-index: 2; display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-size: 10px; }
.hero-index i { width: 38px; height: 1px; display: block; background: rgba(255, 255, 255, 0.55); }

.arrival-strip { position: relative; z-index: 4; min-height: 86px; display: grid; grid-template-columns: repeat(3, 1fr); margin: -36px 14px 0; padding: 14px 8px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 8px; background: rgba(251, 250, 247, 0.96); box-shadow: 0 14px 32px rgba(25, 38, 31, 0.14); backdrop-filter: blur(14px); }
.arrival-strip > div { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 5px; }
.arrival-strip > div + div { border-left: 1px solid var(--line); }
.arrival-strip svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--bronze); }
.arrival-strip span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.arrival-strip small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.arrival-strip strong { color: var(--ink); font-size: 10px; line-height: 1.25; white-space: nowrap; }

.section-intro h2, .section-heading h2, .food-story h2, .closing-section h2, .panel-head h2, .booking-head h2 { margin: 0; font-family: "Songti SC", STSong, serif; font-weight: 600; }
.section-intro h2, .section-heading h2 { font-size: 29px; line-height: 1.3; }
.section-intro > p:last-child { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.section-intro.compact { margin-bottom: 28px; }

.quick-services { padding-top: 58px; padding-bottom: 52px; }
.service-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.service-shortcuts button { min-width: 0; min-height: 102px; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.service-shortcuts button > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 9px; border: 1px solid rgba(24, 61, 50, 0.18); border-radius: 50%; color: var(--pine); background: #eef1ec; }
.service-shortcuts button:nth-child(2) > span { color: #7b552d; background: #f2ece3; }
.service-shortcuts button:nth-child(3) > span { color: #385867; background: #e8eff1; }
.service-shortcuts button:nth-child(4) > span { color: #725b80; background: #eeeaf1; }
.service-shortcuts button:nth-child(5) > span { color: #894d3d; background: #f3e9e5; }
.service-shortcuts svg { width: 21px; height: 21px; stroke-width: 1.6; }
.service-shortcuts strong { font-family: "Songti SC", STSong, serif; font-size: 16px; line-height: 1.2; }
.service-shortcuts small { max-width: 58px; margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }

.brand-note { padding-top: 54px; padding-bottom: 54px; color: #fff; background: var(--pine); }
.brand-quote { max-width: 360px; margin: 0; font-family: "Songti SC", STSong, serif; font-size: 26px; line-height: 1.6; }
.brand-note-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; color: rgba(255, 255, 255, 0.64); font-size: 11px; }

.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-heading > div { min-width: 0; }
.text-command, .line-command { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0; border: 0; color: var(--pine); background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.text-command svg, .line-command svg { width: 15px; height: 15px; }
.mini-kicker { margin: 0 0 7px; color: var(--bronze); font-size: 9px; font-weight: 700; }

.stay-section { background: var(--ivory); }
.feature-stay { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; }
.feature-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #c9d2cc; }
.feature-media > img { width: 100%; height: 100%; object-fit: cover; }
.image-badge { position: absolute; top: 12px; left: 12px; min-height: 27px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 4px; color: #fff; background: rgba(18, 31, 25, 0.78); backdrop-filter: blur(8px); font-size: 10px; }
.floating-icon { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; color: #fff; }
.feature-copy { padding: 20px; }
.feature-copy h3 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 27px; font-weight: 600; }
.feature-copy > p:not(.mini-kicker) { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.feature-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rating { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; }
.rating svg { width: 14px; height: 14px; fill: var(--bronze); color: var(--bronze); }
.rating small { color: var(--muted); font-size: 9px; font-weight: 400; }
.price { display: flex; align-items: baseline; gap: 5px; }
.price small { color: var(--muted); font-size: 9px; }
.price strong { color: var(--pine); font-family: Georgia, serif; font-size: 21px; }
.room-strip { display: grid; grid-auto-columns: 78%; grid-auto-flow: column; gap: 12px; margin: 18px -20px 0; padding: 0 20px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.room-strip::-webkit-scrollbar { display: none; }
.room-card { position: relative; height: 250px; overflow: hidden; padding: 0; border: 0; border-radius: 8px; color: #fff; background: var(--ink); scroll-snap-align: start; cursor: pointer; }
.room-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 42%, rgba(10, 17, 14, 0.78) 100%); }
.room-card img { width: 100%; height: 100%; object-fit: cover; }
.room-card > span { position: absolute; right: 16px; bottom: 15px; left: 16px; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; text-align: left; }
.room-card small { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.68); font-size: 10px; }
.room-card strong { font-family: "Songti SC", STSong, serif; font-size: 20px; }
.room-card b { align-self: end; font-family: Georgia, serif; font-size: 14px; font-weight: 600; }

.experience-section { background: var(--paper); }
.section-count { color: var(--muted); font-family: Georgia, serif; font-size: 11px; }
.experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.experience-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.experience-card.is-lower { margin-top: 34px; }
.experience-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.experience-card > div { padding: 14px 13px 16px; }
.experience-card small { color: var(--bronze); font-size: 9px; }
.experience-card h3 { margin: 6px 0 0; font-family: "Songti SC", STSong, serif; font-size: 20px; font-weight: 600; }
.experience-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }

.food-story { position: relative; min-height: 570px; overflow: hidden; color: #fff; background: var(--ink); }
.food-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.food-story-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 13, 0.06) 20%, rgba(10, 15, 13, 0.82) 100%); }
.food-story-copy { position: absolute; right: 24px; bottom: 38px; left: 24px; }
.food-story h2 { max-width: 360px; font-size: 31px; line-height: 1.42; }
.food-story-copy > p:not(.eyebrow) { max-width: 360px; margin: 14px 0 0; color: rgba(255, 255, 255, 0.76); font-size: 13px; line-height: 1.75; }
.line-command { margin-top: 22px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding-bottom: 6px; }

.package-section { background: #e8e1d5; }
.package-band { margin-top: 28px; padding: 22px; border-radius: 8px; color: #fff; background: var(--ink); }
.package-topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.package-topline span { color: rgba(255, 255, 255, 0.68); font-size: 11px; }
.package-topline strong { color: var(--bronze-light); font-family: Georgia, serif; font-size: 23px; }
.package-band ul { display: grid; gap: 13px; margin: 22px 0; padding: 0; list-style: none; }
.package-band li { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.84); font-size: 12px; }
.package-band li svg { width: 15px; height: 15px; color: var(--bronze-light); }

.location-section { background: var(--paper); }
.map-visual { position: relative; height: 310px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #e8ece6; }
.map-visual::before { position: absolute; inset: 0; content: ""; opacity: 0.45; background-image: linear-gradient(rgba(24, 61, 50, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 61, 50, 0.12) 1px, transparent 1px); background-size: 36px 36px; }
.map-terrain { position: absolute; border: 1px solid rgba(24, 61, 50, 0.18); border-radius: 50%; background: rgba(111, 128, 111, 0.12); transform: rotate(-18deg); }
.terrain-one { width: 290px; height: 180px; top: -56px; left: -60px; }
.terrain-two { width: 330px; height: 210px; right: -92px; bottom: -72px; }
.map-route { position: absolute; width: 390px; height: 150px; top: 74px; left: -28px; border-bottom: 3px solid rgba(167, 122, 66, 0.82); border-radius: 50%; transform: rotate(-12deg); }
.map-pin { position: absolute; top: 105px; right: 86px; width: 46px; height: 46px; display: grid; place-items: center; border: 5px solid rgba(255, 255, 255, 0.7); border-radius: 50%; color: #fff; background: var(--clay); box-shadow: 0 8px 18px rgba(58, 39, 30, 0.18); }
.map-pin svg { width: 21px; height: 21px; }
.map-label { position: absolute; z-index: 2; padding: 3px 6px; border-radius: 4px; color: var(--ink); background: rgba(251, 250, 247, 0.78); font-size: 10px; }
.map-label.is-city { bottom: 52px; left: 28px; }
.map-label.is-lake { top: 38px; left: 154px; color: #385867; }
.map-label.is-valley { top: 156px; right: 32px; font-weight: 700; }
.location-copy { display: grid; gap: 16px; margin-top: 22px; }
.location-copy > div { display: grid; gap: 5px; }
.location-copy small { color: var(--muted); font-size: 10px; }
.location-copy strong { font-size: 13px; line-height: 1.5; }
.location-copy p { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }

.closing-section { padding: 72px 24px 80px; text-align: center; background: #dfe5df; }
.closing-mark { width: 58px; height: 58px; display: block; margin: 0 auto 18px; overflow: hidden; border-radius: 50%; background: #fff; }
.closing-mark img { width: 100%; height: 100%; object-fit: cover; }
.closing-section > p { margin: 0 0 9px; color: var(--moss); font-family: Georgia, serif; font-size: 10px; }
.closing-section h2 { font-size: 29px; }
.closing-section .command-button { margin-top: 28px; }

.site-footer { display: flex; flex-direction: column; align-items: center; padding: 42px 24px 118px; text-align: center; color: rgba(255, 255, 255, 0.68); background: var(--ink); }
.site-footer > div { display: flex; flex-direction: column; }
.site-footer strong { color: #fff; font-family: "Songti SC", STSong, serif; font-size: 23px; }
.site-footer span { margin-top: 4px; font-family: Georgia, serif; font-size: 9px; }
.site-footer p { margin: 18px 0; font-size: 10px; }
.site-footer .text-command { color: var(--bronze-light); }

.bottom-nav { position: fixed; bottom: 0; left: 50%; z-index: 35; width: min(100%, 480px); min-height: calc(64px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 8px var(--safe-bottom); border-top: 1px solid rgba(23, 32, 28, 0.12); background: rgba(251, 250, 247, 0.96); box-shadow: 0 -8px 24px rgba(15, 26, 21, 0.08); backdrop-filter: blur(18px); transform: translateX(-50%); }
.bottom-nav a, .bottom-nav button { min-width: 0; height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 0; color: #8a928c; background: transparent; font-size: 9px; cursor: pointer; }
.bottom-nav svg { width: 20px; height: 20px; stroke-width: 1.7; }
.bottom-nav .is-active { color: var(--pine); }

.overlay { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; visibility: hidden; background: rgba(7, 13, 10, 0.54); opacity: 0; transition: opacity 180ms ease, visibility 180ms ease; }
.overlay.is-open { visibility: visible; opacity: 1; }
.menu-panel { width: min(88%, 420px); min-height: 100%; margin-left: auto; padding: max(24px, env(safe-area-inset-top)) 22px calc(30px + var(--safe-bottom)); color: #fff; background: var(--pine-deep); transform: translateX(100%); transition: transform 220ms ease; }
.overlay.is-open .menu-panel { transform: translateX(0); }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-head small { color: var(--bronze-light); font-family: Georgia, serif; font-size: 9px; }
.panel-head h2 { margin-top: 6px; font-size: 34px; }
.menu-links { display: grid; margin-top: 54px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.menu-links a { min-height: 68px; display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.menu-links span { color: var(--bronze-light); font-family: Georgia, serif; font-size: 10px; }
.menu-links strong { font-family: "Songti SC", STSong, serif; font-size: 19px; font-weight: 500; }
.menu-links svg { width: 17px; height: 17px; color: rgba(255, 255, 255, 0.54); }
.menu-footer { position: absolute; right: 22px; bottom: calc(34px + var(--safe-bottom)); left: 22px; }
.menu-footer p { margin: 0 0 6px; color: rgba(255, 255, 255, 0.54); font-size: 10px; }
.menu-footer strong { display: block; font-family: Georgia, serif; font-size: 24px; }
.menu-footer small { display: block; margin-top: 6px; color: rgba(255, 255, 255, 0.42); font-size: 9px; }

.sheet-overlay { align-items: flex-end; }
.bottom-sheet { position: relative; width: min(100%, 480px); max-height: 92dvh; overflow-y: auto; padding: 24px 20px calc(30px + var(--safe-bottom)); border-radius: 8px 8px 0 0; scrollbar-width: none; background: var(--paper); transform: translateY(100%); transition: transform 240ms ease; overscroll-behavior: contain; }
.bottom-sheet::-webkit-scrollbar { width: 0; height: 0; }
.overlay.is-open .bottom-sheet { transform: translateY(0); }
.sheet-handle { width: 100%; height: 22px; display: grid; place-items: start center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sheet-handle span { width: 42px; height: 4px; display: block; border-radius: 2px; background: #ccd2cd; }
.sheet-handle:focus { outline: 0; }
.sheet-handle:focus-visible span { outline: 2px solid var(--bronze); outline-offset: 4px; }

.detail-hero { position: relative; aspect-ratio: 4 / 3; margin: 0 -20px; overflow: hidden; background: var(--mist); }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.detail-body { padding-top: 22px; }
.detail-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-topline span { color: var(--bronze); font-size: 10px; font-weight: 700; }
.detail-topline strong { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.detail-topline svg { width: 14px; height: 14px; fill: var(--bronze); color: var(--bronze); }
.detail-body h2 { margin: 12px 0 0; font-family: "Songti SC", STSong, serif; font-size: 32px; font-weight: 600; }
.detail-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.tag-list span { padding: 5px 8px; border-radius: 4px; color: var(--pine); background: #e8eee9; font-size: 10px; }
.detail-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-facts div { min-height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.detail-facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.detail-facts small { color: var(--muted); font-size: 9px; }
.detail-facts strong { font-size: 12px; }
.detail-description { margin: 22px 0 0; color: #535c56; font-size: 13px; line-height: 1.85; }
.detail-highlights { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.detail-highlights li { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.detail-highlights svg { width: 15px; height: 15px; color: var(--bronze); }
.detail-actions { position: sticky; bottom: calc(-30px - var(--safe-bottom)); display: grid; grid-template-columns: 52px 1fr; gap: 9px; margin: 26px -20px calc(-30px - var(--safe-bottom)); padding: 12px 20px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); background: rgba(251, 250, 247, 0.96); backdrop-filter: blur(14px); }
.detail-actions .floating-icon { position: static; width: 52px; height: 48px; color: var(--pine); border-color: var(--line); background: #fff; }
.detail-actions .command-button { width: 100%; }

.booking-head { padding: 8px 0 22px; }
.booking-head h2 { font-size: 31px; }
.booking-head > p:last-child { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#booking-form { display: grid; gap: 0; }
.date-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.date-grid label, .field { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.date-grid span, .field > span { color: var(--muted); font-size: 9px; }
.date-grid input, .field input, .field select, .field textarea { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.field { margin-bottom: 10px; }
.field select { appearance: none; padding-right: 24px; }
.field > svg { position: absolute; right: 12px; bottom: 13px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.field textarea { resize: vertical; line-height: 1.55; }
.stepper-row { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.stepper-row > span { display: flex; flex-direction: column; gap: 4px; }
.stepper-row strong { font-size: 13px; }
.stepper-row small { color: var(--muted); font-size: 9px; }
.stepper { display: grid; grid-template-columns: 34px 28px 34px; align-items: center; }
.stepper button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
.stepper svg { width: 14px; height: 14px; }
.stepper output { text-align: center; font-size: 13px; font-weight: 700; }
.consent { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.consent input { margin-top: 2px; accent-color: var(--pine); }
.submit-booking { position: sticky; bottom: calc(-30px - var(--safe-bottom)); z-index: 2; width: calc(100% + 40px); min-height: 62px; margin: 12px -20px calc(-30px - var(--safe-bottom)); padding-bottom: var(--safe-bottom); border-radius: 0; box-shadow: 0 -8px 22px rgba(18, 30, 24, 0.12); }

.member-head { align-items: center; padding-bottom: 22px; }
.member-head > span { padding: 5px 8px; border-radius: 4px; color: var(--bronze); background: #f0e8dc; font-size: 9px; }
.member-card { position: relative; overflow: hidden; padding: 22px; border-radius: 8px; color: #fff; background: var(--pine); box-shadow: var(--shadow); }
.member-card::after { position: absolute; width: 220px; height: 220px; right: -76px; bottom: -126px; content: ""; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; }
.member-card-top { display: flex; align-items: center; justify-content: space-between; }
.member-emblem { width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: #fff; }
.member-emblem img { width: 100%; height: 100%; object-fit: cover; }
.member-card-top > span:last-child { text-align: right; color: rgba(255, 255, 255, 0.62); font-family: Georgia, serif; font-size: 9px; line-height: 1.4; }
.member-card > p { margin: 32px 0 7px; color: rgba(255, 255, 255, 0.62); font-size: 10px; }
.member-card > strong { font-family: Georgia, serif; font-size: 18px; }
.member-code { width: 122px; height: 32px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; margin-top: 22px; }
.member-code i { display: block; background: rgba(255, 255, 255, 0.78); }
.member-code i:nth-child(2), .member-code i:nth-child(5), .member-code i:nth-child(8) { height: 62%; align-self: end; }
.member-code i:nth-child(4), .member-code i:nth-child(7) { height: 74%; }
.member-card > small { display: block; margin-top: 7px; color: rgba(255, 255, 255, 0.42); font-size: 8px; }
.member-actions { display: grid; margin-top: 22px; border-top: 1px solid var(--line); }
.member-actions button { min-height: 70px; display: grid; grid-template-columns: 24px 1fr 18px; align-items: center; gap: 12px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.member-actions button > svg:first-child { width: 20px; height: 20px; color: var(--bronze); }
.member-actions button > svg:last-child { width: 16px; height: 16px; color: var(--muted); }
.member-actions button span { display: flex; flex-direction: column; gap: 4px; }
.member-actions strong { font-size: 13px; }
.member-actions small { color: var(--muted); font-size: 9px; }

.toast { position: fixed; left: 50%; bottom: calc(82px + var(--safe-bottom)); z-index: 120; width: max-content; max-width: calc(100% - 40px); padding: 11px 15px; border-radius: 6px; color: #fff; background: rgba(23, 32, 28, 0.94); box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 160ms ease, transform 160ms ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 360px) {
  .section-pad { padding-right: 16px; padding-left: 16px; }
  .hero-content { right: 20px; left: 20px; }
  .hero h1 { font-size: 60px; }
  .hero-copy { font-size: 13px; }
  .command-button { padding-right: 14px; padding-left: 14px; }
  .arrival-strip { margin-right: 10px; margin-left: 10px; padding-right: 3px; padding-left: 3px; }
  .arrival-strip > div { gap: 4px; padding: 0 2px; }
  .arrival-strip svg { display: none; }
  .service-shortcuts { gap: 1px; }
  .service-shortcuts button > span { width: 44px; height: 44px; }
  .section-intro h2, .section-heading h2 { font-size: 26px; }
  .experience-grid { gap: 9px; }
  .experience-card > div { padding-right: 10px; padding-left: 10px; }
  .experience-card h3 { font-size: 18px; }
  .room-strip { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
}

@media (min-width: 700px) {
  body { padding: 28px 0; }
  .app-shell { border-radius: 8px; }
  .topbar { top: 28px; }
  .bottom-nav { bottom: 28px; border-radius: 0 0 8px 8px; }
  .hero { border-radius: 8px 8px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}