/* One centered content axis for the introduction, routes and saved trips. */
body.trip-home-active .trip-home-inner { width: 100%; max-width: var(--layout-home-width, 1160px); margin-inline: auto; }
/* The introduction owns the first screen; discovery starts below it. */
body.trip-home-active .topbar { height:64px; min-height:64px; }
body.trip-home-active .trip-home-hero {
  min-height:calc(100svh - 64px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:1fr auto auto;
  padding:clamp(24px,4svh,48px) 32px 12px;
  gap:20px 48px;
}
body.trip-home-active .trip-home-hero-copy { grid-column:1; grid-row:1; }
body.trip-home-active .trip-home-visual { grid-column:2; grid-row:1; }
body.trip-home-active #homeIntroSteps {
  grid-column:1 / -1; grid-row:2;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%; margin:0; padding:20px 0 0; border:0; border-top:1px solid var(--soft-line); gap:24px;
}
body.trip-home-active #homeIntroSteps li { display:flex; align-items:center; justify-content:center; gap:10px; }
body.trip-home-active #homeIntroSteps strong { font-size:13px; font-weight:400; }
body.trip-home-active #homeIntroSteps b { padding:0; color:#7896bd; font-size:11px; }
body.trip-home-active #homeIntroSteps p { display:none; }
.home-explore-link { grid-column:1 / -1; grid-row:3; justify-self:center; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px; color:#62748a; font-size:12px; text-decoration:none; }
.home-explore-link:hover { color:var(--blue); }
.home-explore-link:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }
.home-explore-link svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.home-explore-en,html[lang="en"] .home-explore-zh { display:none; }
html[lang="en"] .home-explore-en { display:inline; }
body.trip-home-active .trip-home-hero > .trip-home-import { grid-column:1 / -1; grid-row:4; }
#tripHomeInspirations { scroll-margin-top:88px; }
/* A quiet form on the left, a travel photograph on the right. */
.account-dialog:not(.is-authenticated) {
  width:min(1000px,calc(100% - 48px)); max-width:1000px;
  max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:24px;
  background:white; box-shadow:0 28px 100px rgba(30,53,80,.18);
}
.account-dialog:not(.is-authenticated)[open] { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
.account-dialog:not(.is-authenticated)::backdrop { background:rgba(224,230,237,.78); backdrop-filter:blur(6px); }
.account-dialog:not(.is-authenticated) .account-dialog-panel {
  grid-column:1; grid-row:1; min-height:570px; max-height:calc(100dvh - 48px);
  margin:0; padding:24px 0; border-radius:0; box-shadow:none;
}
.account-dialog:not(.is-authenticated) .dialog-head { padding:30px 48px 8px; }
.account-dialog:not(.is-authenticated) .dialog-head h2 { font-size:32px; letter-spacing:-.04em; line-height:1.3; }
.account-dialog:not(.is-authenticated) .dialog-head p { color:#69798d; line-height:1.7; font-size:14px; }
.account-dialog:not(.is-authenticated) .account-dialog-close { position:absolute; right:16px; top:16px; z-index:3; width:44px; height:44px; min-width:44px; background:rgba(255,255,255,.92); border:0; }
.account-dialog:not(.is-authenticated) .account-auth-view { padding:16px 48px 24px; }
.account-dialog:not(.is-authenticated) .account-tabs { background:#f4f6f9; padding:3px; border-radius:12px; }
.account-dialog:not(.is-authenticated) .account-tabs button { font-size:14px; border-radius:9px; min-height:44px; }
.account-dialog:not(.is-authenticated) .account-tabs button.active { color:var(--blue); box-shadow:none; }
.account-dialog:not(.is-authenticated) .account-form { gap:18px; margin-top:26px; }
.account-dialog:not(.is-authenticated) .account-form label { gap:7px; font-size:12px; font-weight:500; color:#607086; }
.account-dialog:not(.is-authenticated) .account-form input { border:1px solid transparent; background:#f3f6fa; border-radius:10px; min-height:52px; font-size:16px; }
.account-dialog:not(.is-authenticated) .account-form input:focus { border-color:var(--blue); background:white; box-shadow:0 0 0 3px rgba(25,104,212,.1); }
.account-dialog:not(.is-authenticated) .account-form > .primary { background:var(--blue); min-height:50px; border-radius:999px; box-shadow:0 8px 22px rgba(25,104,212,.12); font-weight:600; }
.account-dialog:not(.is-authenticated) .account-error:empty { display:none; }
.account-dialog:not(.is-authenticated) .account-auth-intro {
  grid-column:2; grid-row:1; position:relative; display:flex; justify-content:flex-start;
  min-width:0; padding:70px 38px 38px 46px; border:0; border-radius:90px 0 0 30px;
  background:linear-gradient(180deg,rgba(240,248,255,.98),rgba(240,248,255,.8) 35%,rgba(217,237,250,.05) 70%),url('/assets/travel-inspirations/qingdao.jpg') center bottom / cover no-repeat;
}
.account-dialog:not(.is-authenticated) .account-auth-intro > div { margin:0; }
.account-dialog:not(.is-authenticated) .account-auth-intro h2 { font-size:28px; line-height:1.5; color:#203955; }
.account-dialog:not(.is-authenticated) .account-auth-intro p { color:#526c82; font-size:13px; }
.account-dialog:not(.is-authenticated) :is(.account-intro-logo,.account-intro-art,.account-auth-intro ul) { display:none; }
@media (max-width:760px) {
  .account-dialog:not(.is-authenticated) { width:calc(100% - 24px); max-width:440px; max-height:calc(100dvh - 24px); border-radius:22px; }
  .account-dialog:not(.is-authenticated)[open] { display:block; }
  .account-dialog:not(.is-authenticated) .account-auth-intro { display:none; }
  .account-dialog:not(.is-authenticated) .account-dialog-panel { min-height:0; max-height:calc(100dvh - 24px); padding:20px 0 4px; }
  .account-dialog:not(.is-authenticated) .dialog-head { padding:20px 24px 4px; position:static; }
  .account-dialog:not(.is-authenticated) .dialog-head h2 { font-size:27px; padding-right:30px; }
  .account-dialog:not(.is-authenticated) .account-auth-view { padding:16px 24px 24px; }
  .account-dialog:not(.is-authenticated) .account-form { gap:14px; margin-top:22px; }
}
body.trip-home-active .trip-home-inspirations,
body.trip-home-active .trip-home-library { margin-top: var(--layout-home-gap, 36px); }
@media (min-width: 1001px) {
  body.trip-home-active .trip-home-hero {
    align-items: center;
  }
  body.trip-home-active .trip-home-hero-copy { width: 100%; max-width: 520px; justify-self: center; }
  body.trip-home-active .trip-home-hero-copy h1 { font-size: calc(clamp(52px, 8svh, 76px) * var(--layout-hero-scale, 1)); }
  body.trip-home-active .trip-home-visual { width: 100%; max-width: var(--layout-hero-image, 380px); height: auto; aspect-ratio: 760 / 680; margin: 0; justify-self: center; }
  .trip-home-visual-frame img { object-position: center; }
  body.trip-home-active .trip-home-inspiration-head { display: flex; justify-content: center; text-align: center; }
  body.trip-home-active .trip-home-inspiration-head h2 { max-width: none; }
  .trip-home-inspiration-filters { justify-content: center; gap: clamp(18px, 2vw, 30px); }
  .trip-home-inspiration-list { margin-top: 20px; }
}
@media (max-width:1000px) {
  body.trip-home-active .trip-home-visual { width:100%; max-width:380px; height:auto; aspect-ratio:760 / 680; margin:0; }
  body.trip-home-active .trip-home-hero { padding-inline:0; column-gap:24px; }
}
@media (max-width:680px), (max-height:500px) and (orientation:landscape) {
  body.trip-home-active .trip-home-hero { grid-template-columns:minmax(0,1fr); grid-template-rows:1fr auto; padding-inline:0; }
  body.trip-home-active .trip-home-hero-copy { grid-column:1; grid-row:1; }
  body.trip-home-active #homeIntroSteps { display:none; }
  .home-explore-link { grid-column:1; grid-row:2; }
  body.trip-home-active .trip-home-hero > .trip-home-import { grid-row:3; }
}
@media (min-width: 1181px) {
  #plannerWorkspace:not(.is-empty) { grid-template-columns: var(--layout-planner-columns, minmax(0, 22fr) minmax(0, 38fr) minmax(0, 40fr)); gap: var(--layout-planner-gap, 16px); }
}
@media (max-width: 680px) {
  body.trip-home-active .trip-home-hero-copy,
  body.trip-home-active .trip-home-inspiration-head,
  body.trip-home-active .trip-home-head { text-align: center; }
  body.trip-home-active .trip-home-hero-copy h1,
  body.trip-home-active .trip-home-lead,
  body.trip-home-active .trip-home-inspiration-head h2 { margin-inline: auto; }
  body.trip-home-active .trip-home-actions { align-items: center; justify-content: center; }
  body.trip-home-active .trip-home-head { justify-content: center; }
  body.trip-home-active .trip-home-inspirations,
  body.trip-home-active .trip-home-library { margin-top: var(--layout-home-mobile-gap, 24px); }
  body.trip-home-active .trip-home-inspiration-list { margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; grid-auto-columns: 88%; }
}
/* Mobile surfaces share a soft blue canvas and compact, rounded white cards. */
@media (max-width:680px) {
  body, body.trip-home-active .trip-home { background:#f2f5fc; }
  .topbar { background:#f2f5fc; border-bottom:0; box-shadow:none; }
  body.trip-home-active .trip-home-hero { gap:16px; padding-top:24px; }
  body.trip-home-active .trip-home-hero-copy {
    align-self:center; padding:32px 20px; border-radius:28px; background:#fff;
    box-shadow:0 12px 36px rgba(45,78,130,.045);
  }
  body.trip-home-active .trip-home-hero-copy .trip-home-label { margin-bottom:18px; font-size:12px; }
  body.trip-home-active .trip-home-hero-copy h1 { font-size:calc(clamp(32px,9.2vw,44px) * var(--layout-hero-scale,1)); line-height:1.3; letter-spacing:-.035em; }
  body.trip-home-active .trip-home-lead { margin-top:20px !important; font-size:14px; line-height:1.8; }
  body.trip-home-active .trip-home-actions { width:100%; margin-top:26px; gap:14px; }
  body.trip-home-active .trip-home-actions > .primary { width:100%; min-height:52px; border-radius:999px; background:var(--blue); }
  body.trip-home-active .trip-home-import-launcher { width:100%; }
  body.trip-home-active .trip-import-tabs { justify-content:center; gap:12px; }
  body.trip-home-active .trip-import-tabs button { min-height:44px; padding:4px; font-size:13px; }
  body.trip-home-active .trip-home-inspiration-card { background:#fff; border:0; border-radius:24px; box-shadow:0 6px 20px rgba(45,78,130,.035); }
  body.trip-home-active .trip-home-inspiration-card img { height:180px; border-radius:24px 24px 0 0; }
  body.trip-home-active .trip-home-inspiration-copy { padding:18px 20px 22px; }
  body.trip-home-active .trip-home-card { border:0; border-radius:24px; background:#fff; box-shadow:0 6px 20px rgba(45,78,130,.035); }
  body.trip-home-active .trip-home-card.current { border-top:4px solid var(--blue); }
  .workspace { background:#f2f5fc; }
  .workspace > :is(.controls-panel,.recommend-panel,.plan-panel) { border:0; border-radius:24px; background:white; box-shadow:0 6px 20px rgba(45,78,130,.035); }
  .workspace .mobile-page-intro { padding:20px; margin:0 0 20px; border-radius:20px 20px 28px 20px; background:var(--blue); color:#fff; }
  .workspace .mobile-page-intro h2 { color:#fff; margin:0; font-size:23px; }
  .workspace .mobile-page-intro > span { color:#dceaff; }
  .workspace .mobile-page-intro p { color:#e4eeff; }
  .workspace :is(#buildTrip,.add-trip-city,.add-day) { border-radius:16px; }
  .account-dialog:not(.is-authenticated) .account-dialog-panel { padding-top:0; }
  .account-dialog:not(.is-authenticated) .dialog-head { padding:30px 24px 24px; background:var(--blue); border-radius:0 0 30px 0; }
  .account-dialog:not(.is-authenticated) .dialog-head h2 { color:white; }
  .account-dialog:not(.is-authenticated) .dialog-head p { color:#e4eeff; }
}