:root {
  --paper:#f6f3eb;
  --ink:#24483f;
  --body:#30483b;
  --muted:#606b5e;
  --red:#a34832;
  --sage:#e5ecdf;
  --line:#d5d9ca;
  --white:#fffdf7;
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",SimSun,serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
  font:14px/1.8 var(--sans);
  color:var(--body);
  background:#e2e6dc
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,select,textarea {
  font:inherit;
  color:inherit
}

button,a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:4px
}

button {
  border:0;
  background:none
}

input,textarea {
  caret-color:var(--red)
}

input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1
}

input,select,textarea {
  accent-color:var(--ink)
}

::selection {
  background:#d4dfcd;
  color:#173d30
}

:focus-visible {
  outline:2px solid var(--red);
  outline-offset:4px
}

button:disabled {
  opacity:.5;
  cursor:default
}

[hidden] {
  display:none!important
}

img {
  display:block;
  max-width:100%
}

svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--serif);
  color:var(--ink);
  font-weight:700
}

h1 {
  font-size:30px;
  line-height:1.4;
  text-wrap:balance
}

h2 {
  font-size:22px;
  line-height:1.5
}

h3 {
  font-size:18px;
  line-height:1.5
}

small,.small {
  font-size:12px;
  color:var(--muted)
}

.app {
  position:relative;
  max-width:430px;
  min-height:100svh;
  margin:auto;
  background:var(--paper) url(assets/paper.webp) center/480px;
  padding-bottom:100px;
  overflow:clip
}

.header {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:68px;
  padding:12px 20px;
  gap:10px
}

.header:after {
  content:"";
  position:absolute;
  z-index:-1;
  right:35px;
  top:-20px;
  width:145px;
  height:95px;
  background:url(assets/blossom.webp) center/contain no-repeat;
  opacity:.7;
  pointer-events:none
}

.logo {
  width:36px;
  height:38px
}

.brand-name {
  font-family:var(--serif);
  font-size:18px;
  font-weight:700;
  line-height:1.4;
  color:var(--ink)
}

.brand-en {
  font:12px/1.4 Georgia,serif;
  letter-spacing:.2em;
  color:var(--red)
}

.language {
  margin-left:auto;
  min-width:44px;
  min-height:44px;
  font-size:12px;
  color:var(--ink)
}

.route-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 20px;
  border-bottom:1px solid var(--line);
  padding:4px 0 10px;
  gap:8px
}

.route-head a,.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px
}

.route-head strong {
  font-weight:500;
  font-size:13px
}

.route-head .placeholder {
  width:44px
}

.main {
  padding:24px 20px 0;
  display:grid;
  gap:28px
}

.intro {
  display:grid;
  gap:12px
}

.intro p {
  color:var(--muted);
  font-size:14px;
  line-height:1.9
}

.intro-landscape {
  position:relative;
  isolation:isolate;
  padding:0 0 24px;
  border-bottom:1px solid var(--line);
  min-height:150px;
  overflow:clip
}

.intro-landscape:after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-24px -20px 0 50%;
  background:url(assets/hero-water-town.webp) right bottom/230px auto no-repeat;
  opacity:.12;
  mix-blend-mode:multiply
}

.intro-landscape p {
  max-width:24em
}

.panel {
  padding:22px;
  background:var(--white);
  border-radius:14px
}

.panel>h2 {
  margin-bottom:16px
}

.stack {
  display:grid;
  gap:16px
}

.section-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px
}

.text-link {
  color:var(--red);
  text-decoration:underline;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px
}

.btn {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:11px 18px;
  border:1px solid var(--ink);
  border-radius:12px;
  background:var(--ink);
  color:var(--white);
  text-align:center;
  font-weight:500;
  line-height:1.6
}

.btn.light {
  background:transparent;
  color:var(--ink);
  border-color:#bcc8b4
}

.btn.red {
  background:var(--red);
  border-color:var(--red)
}

.btn.round {
  border-radius:30px
}

.btn-row {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}

.btn-row>* {
  flex:1 1 110px
}

.notice {
  padding:14px 16px;
  border-radius:10px;
  background:var(--sage);
  color:#3d5645;
  font-size:13px;
  line-height:1.8
}

.notice.warm {
  background:#f3e8d7;
  color:#80502e
}

.section-note {
  font-size:12px;
  color:var(--muted);
  line-height:1.8
}

.field {
  display:grid;
  gap:8px;
  font-size:13px;
  min-width:0
}

.field input,.field select,.field textarea,.search input {
  width:100%;
  min-width:0;
  min-height:48px;
  border:1px solid #cbd0c1;
  border-radius:10px;
  padding:10px 12px;
  background:var(--white);
  font-size:16px
}

.field textarea {
  min-height:96px;
  resize:vertical
}

.two-col {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.check {
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-height:48px;
  padding:12px 0;
  font-size:13px;
  cursor:pointer
}

.check input {
  width:20px;
  height:20px;
  flex:none;
  margin:3px 0 0
}

.segmented {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.segmented button {
  min-width:0;
  flex:1;
  min-height:44px;
  padding:8px 6px;
  border-radius:24px;
  border:1px solid #c6ccbe;
  background:var(--paper);
  font-size:13px
}

.segmented button[aria-pressed=true] {
  background:var(--red);
  border-color:var(--red);
  color:white
}

.chip {
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  min-height:26px;
  font-size:12px;
  color:var(--ink);
  background:var(--sage);
  border-radius:5px
}

.chip.warm {
  background:#f3e8d7;
  color:#80502e
}

.meta {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted)
}

.meta svg {
  width:16px;
  height:16px
}

.divider {
  height:1px;
  background:var(--line)
}

.summary-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:13px
}

.summary-row span:first-child {
  color:var(--muted);
  flex:none
}

.summary-row strong {
  font-weight:500;
  text-align:right;
  overflow-wrap:anywhere
}

.price {
  color:var(--red);
  font:700 25px/1.4 Georgia,var(--serif);
  white-space:nowrap
}

.price small {
  font:12px var(--sans);
  color:var(--red)
}

.bottom-action {
  display:grid;
  gap:12px;
  padding-top:8px
}

.nav {
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
  width:min(100%,430px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:8px 5px max(10px,env(safe-area-inset-bottom))
}

.nav a {
  position:relative;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:var(--muted);
  font-size:12px;
  text-align:center;
  line-height:1.5
}

.nav a[aria-current=page] {
  color:var(--red)
}

.nav a[aria-current=page]:after {
  content:"";
  width:16px;
  height:2px;
  background:var(--red);
  position:absolute;
  bottom:0
}

.footer {
  padding:28px 20px 0;
  text-align:center;
  font-size:12px;
  color:var(--muted)
}

.footer:after {
  content:"";
  display:block;
  aspect-ratio:3 / 1;
  margin:8px -12px -16px;
  background:url(assets/footer-water-town.webp) center/contain no-repeat;
  opacity:.76;
  mix-blend-mode:multiply;
  pointer-events:none
}

body[data-page=wan] .footer:after {
  opacity:.64
}

.footer a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:underline
}

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

.search {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 18px;
  border:1px solid #cbd0c1;
  border-radius:26px;
  padding-left:14px;
  background:#fffdf780
}

.search input {
  border:0;
  background:transparent;
  padding-left:0
}

.search button {
  min-height:48px;
  min-width:50px;
  padding:8px 12px;
  font-size:12px
}

.hero {
  position:relative;
  isolation:isolate;
  min-height:330px;
  padding:14px 28px 150px;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden
}

.hero:after {
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:url(assets/hero-water-town.webp) center bottom/100% auto no-repeat;
  mix-blend-mode:multiply;
  mask-image:linear-gradient(transparent,#000 5%,#000 93%,transparent)
}

.hero:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 auto;
  height:190px;
  background:linear-gradient(90deg,#f6f3eb,#f6f3ebed 42%,#f6f3eb00 80%);
  mask-image:linear-gradient(#000 60%,transparent)
}

.hero h1 {
  font-size:34px;
  line-height:1.22
}

.hero p {
  font-size:14px
}

.hero .btn {
  align-self:flex-start;
  min-height:44px;
  font-size:14px;
  padding:7px 18px
}

.categories {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  padding:4px 16px 14px
}

.categories a,.categories button {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 2px;
  font-size:12px;
  text-align:center;
  color:var(--ink)
}

.categories svg {
  width:30px;
  height:30px
}

.home-main {
  padding-top:0
}

.hotel-strip {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-block:1px solid var(--line);
  font-size:13px
}

.hotel-strip>svg {
  color:var(--red);
  width:20px
}

.time-panel {
  position:relative;
  isolation:isolate;
  background:var(--sage);
  border-radius:14px;
  padding:20px 16px;
  display:grid;
  gap:16px;
  overflow:hidden
}

.time-panel:after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:url(assets/blossom.webp) right -20px top -20px/145px auto no-repeat,url(assets/hero-water-town.webp) right bottom/220px auto no-repeat;
  opacity:.12
}

.experience-list {
  display:grid
}

.experience-row {
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid var(--line)
}

.experience-row img {
  width:112px;
  height:116px;
  object-fit:cover;
  border-radius:10px
}

.experience-row h3 {
  font-size:18px
}

.experience-row .row-copy {
  display:grid;
  gap:8px;
  min-width:0
}

.experience-row .price {
  font-size:18px
}

.experience-row .meta {
  line-height:1.6
}

.experience-row:hover h3 {
  text-decoration:underline;
  text-underline-offset:4px
}

.assistant-strip {
  position:relative;
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:16px;
  align-items:center;
  padding:18px;
  background:#ede3d4;
  border-radius:14px;
  overflow:visible
}

.assistant-strip img {
  width:70px;
  height:112px;
  object-fit:cover;
  object-position:top;
  margin-top:-28px
}

.assistant-strip h2 {
  font-size:19px
}

.assistant-strip .text-link {
  font-size:13px
}

.lead-photo {
  position:relative;
  margin:0 -20px
}

.lead-photo img {
  width:100%;
  height:288px;
  object-fit:cover;
  mask-image:linear-gradient(#000 84%,transparent)
}

.detail-title {
  margin-top:-12px;
  position:relative;
  display:grid;
  /* The demo story contains unbreakable source URLs; let the column shrink. */
  grid-template-columns:minmax(0,1fr);
  gap:12px
}

.title-price {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.title-price h1 {
  min-width:0;
  overflow-wrap:anywhere
}

.detail-title p {
  color:var(--muted);
  line-height:1.9;
  overflow-wrap:anywhere
}

.detail-title .intro-alt {
  font-size:13px;
  opacity:.85
}

.detail-title .source-note {
  font-size:12px;
  line-height:1.7
}

.detail-title .source-note a {
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:3px
}

.timeline {
  display:grid;
  gap:0
}

.time-stop {
  position:relative;
  display:grid;
  grid-template-columns:54px 12px minmax(0,1fr);
  gap:12px;
  padding:0 0 24px
}

.time-stop:last-child {
  padding-bottom:0
}

.time-stop time {
  font:16px Georgia,serif;
  color:var(--ink);
  padding-top:2px
}

.time-stop>i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ink);
  margin-top:8px;
  position:relative
}

.time-stop:not(:last-child)>i:after {
  content:"";
  position:absolute;
  top:12px;
  bottom:-55px;
  width:1px;
  left:3px;
  background:#c6d0be
}

.time-stop strong {
  font-size:14px;
  font-weight:500
}

.time-stop p {
  font-size:12px;
  color:var(--muted)
}

details {
  border-bottom:1px solid var(--line);
  padding:14px 0
}

summary {
  cursor:pointer;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--ink);
  font-size:15px;
  list-style:none
}

summary:after {
  content:"+";
  font:22px Georgia
}

details[open] summary:after {
  content:"−"
}

details p {
  font-size:13px;
  color:var(--muted);
  padding:4px 0 12px;
  line-height:1.9
}

.slot {
  padding:16px;
  border:1px solid var(--ink);
  border-radius:12px;
  background:var(--sage);
  display:flex;
  align-items:center;
  gap:12px;
  min-height:70px
}

.slot input {
  width:20px;
  height:20px;
  accent-color:var(--ink)
}

.slot span {
  flex:1
}

.slot small {
  display:block
}

.stepper {
  display:flex;
  align-items:center;
  gap:12px
}

.stepper button {
  width:44px;
  height:44px;
  background:var(--sage);
  border-radius:50%;
  font-size:22px
}

.stepper output {
  min-width:28px;
  text-align:center
}

.receipt {
  position:relative;
  background:var(--white);
  border-radius:14px;
  padding:24px
}

.receipt-head {
  text-align:center;
  padding:16px 0 24px;
  border-bottom:1px dashed #b6c4ac
}

.seal {
  display:inline-grid;
  place-items:center;
  min-width:76px;
  min-height:76px;
  padding:8px;
  border:1px solid var(--red);
  border-radius:50%;
  font-family:var(--serif);
  color:var(--red);
  font-size:18px
}

.receipt h1 {
  font-size:27px;
  margin-top:16px
}

.receipt .reference {
  font:13px Georgia;
  color:var(--muted);
  letter-spacing:.1em
}

.status-track {
  padding:24px 0
}

.profile-hero {
  position:relative;
  isolation:isolate;
  min-height:210px;
  padding:12px 0 28px;
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line)
}

.profile-hero:after {
  content:"";
  position:absolute;
  z-index:-1;
  inset:20% -20px -8px 20%;
  background:url(assets/hero-water-town.webp) right bottom/250px auto no-repeat;
  opacity:.17;
  mix-blend-mode:multiply
}

.profile-avatar {
  width:68px;
  height:68px;
  border-radius:50%;
  background:var(--sage);
  display:grid;
  place-items:center;
  border:1px solid #bdcbb6
}

.profile-avatar svg {
  width:30px;
  height:30px
}

.profile-hero h1 {
  font-size:28px
}

.profile-hero p {
  font-size:13px
}

.passport {
  background:var(--ink);
  color:#f7f3e8;
  padding:24px;
  border-radius:14px;
  display:flex;
  gap:18px;
  align-items:center
}

.passport h2 {
  color:inherit;
  font-size:20px
}

.passport .seal {
  color:#ead6b9;
  border-color:#c5b696;
  min-width:60px;
  min-height:60px;
  font-size:16px
}

.passport p {
  font-size:12px;
  color:#d4dfcb
}

.menu-list a,.menu-list button {
  display:flex;
  align-items:center;
  width:100%;
  gap:14px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:15px
}

.menu-list svg {
  color:var(--ink)
}

.menu-list .arrow {
  margin-left:auto;
  color:var(--muted)
}

.chat-welcome {
  display:grid;
  grid-template-columns:108px minmax(0,1fr);
  align-items:center;
  gap:18px
}

.chat-welcome img {
  height:170px;
  width:108px;
  object-fit:cover;
  object-position:top;
  background:var(--sage);
  border-radius:60px 60px 12px 12px
}

.chat-welcome h1 {
  font-size:27px
}

.chat-welcome p {
  font-size:13px;
  color:var(--muted);
  margin-top:8px
}

.chat-log {
  display:grid;
  gap:14px;
  max-height:410px;
  overflow:auto;
  padding:4px 0;
  scrollbar-color:#a9b99f transparent
}

.bubble {
  padding:16px;
  background:var(--white);
  border-radius:14px 14px 14px 3px;
  font-size:14px;
  max-width:94%
}

.bubble.user {
  justify-self:end;
  background:var(--sage);
  border-radius:14px 14px 3px 14px
}

.bubble strong {
  font-size:12px;
  color:var(--muted);
  display:block;
  margin-bottom:5px
}

.suggestions {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.suggestions button {
  padding:10px 12px;
  min-height:44px;
  font-size:12px;
  border:1px solid #c3ccbb;
  border-radius:10px;
  text-align:left
}

.chat-form {
  display:grid;
  gap:12px
}

.chat-form .btn {
  justify-self:end;
  min-width:100px
}

.ar-page {
  background:#17382d;
  color:#f6f3eb
}

.ar-page h1,.ar-page h2 {
  color:#f6f3eb
}

.ar-page .route-head {
  border-color:#506f5b
}

.ar-page .header {
  background:var(--paper)
}

.ar-stage {
  position:relative;
  min-height:380px;
  display:grid;
  place-items:center;
  border:1px solid #5c7766;
  border-radius:14px;
  background:radial-gradient(ellipse,#355647,#163329);
  overflow:hidden
}

.ar-stage:before,.ar-stage:after {
  content:"";
  position:absolute;
  width:32px;
  height:32px;
  border:1px solid #b7c8aa
}

.ar-stage:before {
  left:18px;
  top:18px;
  border-right:0;
  border-bottom:0
}

.ar-stage:after {
  right:18px;
  bottom:18px;
  border-left:0;
  border-top:0
}

.ar-stage img {
  width:200px;
  height:190px;
  object-fit:contain
}

.ar-target {
  position:absolute;
  bottom:30px;
  font-size:13px;
  color:#e9d5b7
}

.ar-page .intro p,.ar-page .section-note {
  color:#d2dfca
}

.ar-page .stamp-panel {
  margin:0 -20px -20px;
  padding:26px 20px;
  background:var(--paper) url(assets/paper.webp) center/480px;
  border-radius:24px 24px 0 0;
  color:var(--body)
}

.stamp-panel h2 {
  color:var(--ink)
}

.stamps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  text-align:center
}

.stamp-item {
  display:grid;
  justify-items:center;
  gap:10px;
  padding:12px 4px
}

.stamp-item .seal {
  min-width:62px;
  min-height:62px;
  font-size:16px
}

.stamp-item.empty .seal {
  border-color:#9ca993;
  color:#66765c
}

.success-art {
  min-height:170px;
  display:grid;
  place-items:center;
  background:url(assets/hero-water-town.webp) center 70%/100% auto no-repeat;
  mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent)
}

.success-art svg {
  width:64px;
  height:64px;
  padding:12px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white)
}

.auth-art {
  height:165px;
  margin:0 -20px;
  background:url(assets/hero-water-town.webp) center 65%/100% auto no-repeat;
  mask-image:linear-gradient(transparent,#000 20%,#000 70%,transparent)
}

.auth-page .intro {
  text-align:center
}

.state-grid {
  display:grid;
  gap:16px
}

.empty-state {
  text-align:center;
  padding:36px 20px;
  border-block:1px solid var(--line)
}

.empty-state svg {
  width:38px;
  height:38px;
  color:var(--muted);
  margin:0 auto 14px
}

.toast {
  position:fixed;
  z-index:50;
  left:50%;
  bottom:100px;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  padding:12px 18px;
  border-radius:12px;
  background:#17382df2;
  color:#fffdf7;
  font-size:13px;
  box-shadow:0 8px 24px #0000001f
}

.all-pages {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center
}

.page-directory {
  position:fixed;
  z-index:40;
  inset:0;
  overflow:auto;
  background:var(--paper);
  padding:24px max(20px,calc((100vw - 600px)/2))
}

.page-directory .menu-list a {
  justify-content:space-between
}

.trip-number {
  font:42px Georgia,var(--serif);
  color:var(--ink)
}

@media(min-width:480px) {
  .app {
    margin:28px auto;
    border-radius:20px;
    min-height:calc(100svh - 56px);
    box-shadow:0 18px 60px #24483f18
  }
}

@media(max-width:359px) {
  .header {
    padding-inline:16px;
    gap:8px
  }
  .logo {
    width:30px
  }
  .brand-name {
    font-size:16px
  }
  .main {
    padding-inline:16px
  }
  .hero {
    padding-inline:20px
  }
  .hero h1 {
    font-size:30px
  }
  .experience-row {
    grid-template-columns:92px minmax(0,1fr);
    gap:12px
  }
  .experience-row img {
    width:92px;
    height:108px
  }
  .panel,.receipt {
    padding:18px
  }
  .chat-welcome {
    grid-template-columns:90px minmax(0,1fr);
    gap:12px
  }
  .chat-welcome img {
    width:90px;
    height:150px
  }
  .chat-welcome h1 {
    font-size:24px
  }
  .two-col {
    gap:10px
  }
  .intro-landscape:after {
    opacity:.08
  }
  .price {
    font-size:23px
  }
}

html[lang=en] .hero {
  min-height:400px;
  padding-bottom:170px
}

html[lang=en] .hero h1 {
  font-size:28px;
  max-width:8em
}

html[lang=en] .hero p {
  max-width:16em;
  font-size:13px
}

html[lang=en] .categories {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

html[lang=en] .segmented button {
  flex-basis:40%
}

html[lang=en] .nav a {
  font-size:12px;
  overflow-wrap:anywhere
}

html[lang=en] .brand-name {
  font-size:15px
}

html[lang=en] .stamps {
  grid-template-columns:1fr
}

.price,.trip-number,time {
  font-variant-numeric:tabular-nums
}

@media(max-width:359px) {
  .lead-photo,.auth-art {
    margin-inline:-16px
  }
  .ar-page .stamp-panel {
    margin-inline:-16px;
    padding-inline:16px
  }
}

.logo {
  color:var(--ink)
}

.journey-card {
  margin:14px 0;
  padding:18px 0;
  border-top:1px solid var(--line)
}

.journey-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px
}

.journey-heading h3 {
  min-width:0;
  font-size:20px;
  overflow-wrap:anywhere
}

.journey-heading .chip {
  flex:none;
  margin-top:2px
}

.journey-items {
  margin-top:16px
}

.journey-item {
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  min-height:68px;
  border-top:1px solid var(--line)
}

.journey-check {
  display:grid;
  width:24px;
  aspect-ratio:1;
  place-items:center;
  border:1px solid var(--sage);
  border-radius:50%;
  color:var(--ink)
}

.journey-check.done {
  background:var(--sage)
}

.journey-check svg {
  width:15px;
  height:15px
}

.journey-item p {
  margin:4px 0
}

.journey-action {
  min-width:64px;
  min-height:44px;
  padding:8px 12px
}

.journey-item-copy {
  min-width:0;
  overflow-wrap:anywhere
}

.journey-cancel {
  min-height:44px;
  padding-inline:12px;
  color:var(--red)
}

.journey-receipt {
  min-height:44px;
  margin-top:8px
}

.journey-postcard {
  margin-top:16px
}

.journey-main .btn-row {
  margin:16px 0 8px
}

.ar-page .footer {
  color:#d2dfca
}

@media(hover:hover) {
  .btn:hover {
    filter:brightness(.93)
  }
  .text-link:hover {
    text-decoration-thickness:2px
  }
  .menu-list a:hover {
    background:#e5ecdf88
  }
  .segmented button:hover:not([aria-pressed=true]) {
    background:var(--sage)
  }
}

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

@media print {
  .app {
    width:100%;
    max-width:none;
    margin:0;
    box-shadow:none;
    padding:0
  }
  .nav,.toast,.header .language,.all-pages {
    display:none
  }
}


/* 主列宽度收敛，避免 Clerk 卡片撑宽整列后被 .app 的 overflow:clip 裁切 */
.main { grid-template-columns: minmax(0, 1fr); }
.main > * { min-width: 0; }

/* 登录/注册：Clerk 自带白卡，外层只作容器，避免双层卡片与横向挤压 */
.auth-clerk-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  min-width: 0;
}
#auth-widget {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Clerk 会把 #auth-widget 自身变成 .cl-rootBox：水平居中卡片，但不做垂直居中、不设固定最小高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
#auth-widget > * { max-width: 100%; }
#auth-widget.cl-rootBox {
  width: 100%;
  min-width: 0;
}
#auth-status {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted, #666);
}
#auth-status[hidden] { display: none; }

/* 压缩登录首屏，保证 Clerk 主按钮不被固定导航遮挡 */
body[data-page="login"] .main,
body[data-page="register"] .main { gap: 18px; }
body[data-page="login"] .auth-art,
body[data-page="register"] .auth-art { height: 110px; }
body[data-page="login"] .app,
body[data-page="register"] .app { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }

.chat-experience-links { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #d9d6c8); }
.chat-experience-links a { white-space: normal; line-height: 1.6; }


/* 顶部整体吸顶：品牌栏 + 页面标题栏 / 首页搜索栏（对齐 v7 演示） */
html { scroll-padding-top: calc(136px + env(safe-area-inset-top)); }
.app-top {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top);
  background: var(--paper) url(assets/paper.webp) center/480px;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: clip;
}
@media print {
  .app-top { position: static; }
}


/* 首次使用：首页邮箱登录引导层 */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(23, 42, 69, .45);
}
.login-gate__card {
  width: min(100%, 360px);
  display: grid;
  gap: 12px;
  padding: 26px 22px;
  border-radius: 16px;
  background: var(--white, #fffdf7);
  box-shadow: 0 16px 48px rgba(23, 42, 69, .18);
  text-align: center;
}
.login-gate__card h2 { font-size: 20px; line-height: 1.5; }
.login-gate__card p { font-size: 13px; line-height: 1.8; color: var(--muted, #666); }
.login-gate__skip { justify-self: center; margin-top: 4px; font-size: 13px; }

.booking-schedule{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr))}.booking-schedule .section-note{grid-column:1/-1;margin:0}.booking-schedule .field{min-width:0}.booking-schedule input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;font-size:16px}