/* =========================================================
   Beijing 6D5N — "night Beijing" theme
   ink navy · imperial gold · jade · glass
   ========================================================= */

:root{
  --ink-950:#04070d;
  --ink-900:#070b14;
  --ink-850:#080e1a;
  --ink-800:#0b1220;
  --panel: rgba(19,28,47,.62);
  --panel-2: rgba(12,19,33,.78);
  --gold:#f3cb8c;
  --gold-2:#ffe9c4;
  --gold-deep:#c69a52;
  --jade:#57d6b6;
  --jade-2:#9bf0da;
  --text:#eaf0f9;
  --muted:#96a4bb;
  --muted-2:#6d7c95;
  --line: rgba(230,189,122,.16);
  --line-soft: rgba(255,255,255,.075);
  --radius: 22px;
  --tabbar-h: 64px;
  --ease: cubic-bezier(.22,.68,.16,1);
  --shadow-card: 0 18px 40px -24px rgba(0,0,0,.9);
  --font: "Noto Sans Thai","IBM Plex Sans Thai","Sarabun","Thonburi","Leelawadee UI",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display: "Noto Serif Thai","IBM Plex Sans Thai","Sarabun","Thonburi",system-ui,serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ink-950);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
svg{ display:block; }
a{ color:var(--gold); text-decoration:none; }

::selection{ background:rgba(230,189,122,.28); color:#fff; }

/* ---------- desktop backdrop ---------- */
.bg-glow{
  position:fixed; z-index:0; pointer-events:none; display:none;
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  filter:blur(70px); opacity:.5;
}
.bg-glow--gold{ top:-18vh; right:-6vw; background:radial-gradient(circle at 50% 50%, rgba(230,189,122,.30), transparent 62%); }
.bg-glow--jade{ bottom:-22vh; left:-10vw; background:radial-gradient(circle at 50% 50%, rgba(87,214,182,.20), transparent 64%); }

/* ---------- frame ---------- */
.frame{
  position:relative;
  z-index:1;
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  padding-bottom:calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(46,66,112,.22), transparent 70%),
    linear-gradient(180deg,#080e1a 0%, #060a12 45%, #070c17 100%);
  overflow-x:clip;
}

@media (min-width:560px){
  body{ background:#03060b; }
  .bg-glow{ display:block; }
  .frame{
    box-shadow:
      0 0 0 1px rgba(230,189,122,.12),
      0 60px 130px -40px rgba(0,0,0,.95),
      0 0 120px -30px rgba(230,189,122,.16);
  }
}

/* ---------- scroll progress ---------- */
.progress-track{
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; height:2px; z-index:60;
  background:rgba(255,255,255,.05);
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2));
  box-shadow:0 0 12px rgba(230,189,122,.75);
  transition:width .1s linear;
}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:linear-gradient(180deg, rgba(7,11,20,.94) 0%, rgba(7,11,20,.78) 70%, rgba(7,11,20,0) 100%);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.topbar__row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__mark{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:19px; color:var(--gold-2);
  background:linear-gradient(160deg, rgba(230,189,122,.20), rgba(230,189,122,.04));
  border:1px solid rgba(230,189,122,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px -10px rgba(230,189,122,.7);
}
.brand__text{ min-width:0; }
.brand__kicker{
  /* Thai does not survive tiny sizes: 9px with .19em tracking rendered as a blur of
     clipped tone marks ("มองไม่ชัด"). 11px with near-zero tracking stays legible. */
  font-size:11px; letter-spacing:.005em; text-transform:none;
  color:var(--gold); opacity:.86; font-weight:600; line-height:1.45;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand__title{
  font-size:15.5px; font-weight:650; line-height: 1.45; letter-spacing:.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dday{
  flex:0 0 auto; display:flex; align-items:baseline; gap:3px;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(230,189,122,.24);
  background:rgba(230,189,122,.07);
  color:var(--muted); font-size: 11px; letter-spacing:.04em;
}
.dday__num{ color:var(--gold-2); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- views ---------- */
.view{ position:relative; min-height:60vh; }
.view-enter{ animation:viewIn .5s var(--ease) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.section{ padding:0 16px; margin-top:26px; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.section__title{ font-size:13px; font-weight:650; letter-spacing:.02em; }
.section__title span{ color:var(--gold); }
.section__meta{ font-size: 11px; color:var(--muted-2); letter-spacing: .02em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 11px; letter-spacing: .08em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }

.divider{
  height:1px; margin:26px 16px 0;
  background:linear-gradient(90deg, transparent, rgba(230,189,122,.22), transparent);
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  margin:4px 16px 0;
  padding:24px 20px 18px;
  border-radius:26px;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(230,189,122,.16);
  background:
    radial-gradient(130% 90% at 8% 0%, rgba(40,64,116,.55), transparent 62%),
    radial-gradient(90% 80% at 96% 8%, rgba(87,214,182,.16), transparent 62%),
    linear-gradient(168deg,#0e1729 0%,#080d18 62%,#09101d 100%);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero__aurora{
  position:absolute; inset:-30% -20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 40% at 22% 30%, rgba(230,189,122,.34), transparent 70%),
    radial-gradient(34% 38% at 72% 22%, rgba(87,214,182,.28), transparent 70%),
    radial-gradient(40% 40% at 58% 78%, rgba(88,122,220,.30), transparent 72%);
  filter:blur(34px) saturate(130%);
  animation:aurora 17s ease-in-out infinite alternate;
  opacity:.85;
}
.hero__aurora::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 80% 70%, rgba(230,189,122,.22), transparent 70%);
  animation:aurora2 23s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{ transform:translate3d(-4%,-2%,0) scale(1) rotate(0deg); }
  50%{ transform:translate3d(3%,2%,0) scale(1.09) rotate(6deg); }
  100%{ transform:translate3d(-2%,4%,0) scale(1.03) rotate(-4deg); }
}
@keyframes aurora2{
  0%{ opacity:.25; transform:translate3d(0,0,0); }
  100%{ opacity:.7; transform:translate3d(-8%,-6%,0); }
}
.hero__flight{
  position:absolute; inset:auto -12% 34% -12%; width:124%; height:auto;
  z-index:0; opacity:.9; pointer-events:none;
}
.hero__arc{ fill:none; stroke:rgba(230,189,122,.22); stroke-width:.9; stroke-dasharray:2 4; }
.hero__plane{ fill:var(--gold-2); filter:drop-shadow(0 0 6px rgba(230,189,122,.9)); }
.hero__content{ position:relative; z-index:2; }
.hero__kicker{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size: 11.5px; letter-spacing: .01em; text-transform: none;
  color:var(--gold); font-weight:600;
}
.hero__kicker i{ width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.6; }
.hero__title{
  margin-top:12px;
  font-family:var(--font-display);
  font-size:clamp(27px,7.6vw,33px);
  line-height: 1.42; font-weight:700; letter-spacing:.005em;
  background:linear-gradient(100deg,#fff8ea 0%, var(--gold-2) 38%, var(--gold) 72%, #d9b173 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-wrap:balance;
}
.hero__sub{
  margin-top:9px; font-size:13px; color:var(--muted); max-width:30ch; line-height:1.66;
}
.hero__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tag{
  font-size: 11.5px; padding:4px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.045);
  color:#c8d4e6; letter-spacing:.02em;
  white-space:nowrap;
}
.tag--gold{ border-color:rgba(230,189,122,.32); background:rgba(230,189,122,.10); color:var(--gold-2); }
.tag--jade{ border-color:rgba(87,214,182,.30); background:rgba(87,214,182,.09); color:var(--jade-2); }

/* reveal-on-load stagger (hero children) */
.reveal{ opacity:0; transform:translateY(14px); animation:revealUp .8s var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes revealUp{ to{ opacity:1; transform:none; } }

/* ---------- countdown ---------- */
.countdown{
  position:relative; z-index:2;
  margin-top:18px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
}
.cd-cell{
  text-align:center; padding:10px 2px 8px; border-radius:14px;
  background:linear-gradient(170deg, rgba(255,255,255,.075), rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
}
.cd-num{
  display:block; font-size:22px; font-weight:700; line-height:1.1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  color:var(--gold-2); text-shadow:0 0 18px rgba(230,189,122,.35);
}
.cd-label{ display:block; margin-top:3px; font-size: 11px; letter-spacing: .01em; text-transform: none; color:var(--muted-2); }
.cd-note{ margin-top:9px; font-size: 11.5px; color:var(--muted-2); text-align:center; letter-spacing:.02em; }

/* ---------- cards ---------- */
.card{
  position:relative;
  border-radius:var(--radius);
  padding:16px;
  background:linear-gradient(160deg, rgba(24,35,57,.66), rgba(10,16,28,.82));
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.card + .card{ margin-top:10px; }
.card--gold{ border-color:rgba(230,189,122,.22); }

.next{
  display:block;
  width:calc(100% - 32px);
  margin:16px 16px 0;
  padding:0;
  overflow:hidden;
  text-align:left;
}
.next__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px 11px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.next__label{ font-size: 11px; letter-spacing: .01em; text-transform: none; color:var(--gold); font-weight:600; }
.next__date{ font-size: 11.5px; color:var(--muted-2); }
.route{ display:flex; align-items:center; gap:10px; padding:16px; }
.route__end{ flex:0 0 auto; text-align:center; min-width:64px; }
.route__code{ font-size:19px; font-weight:700; letter-spacing:.04em; color:#fff; }
.route__city{ font-size: 11.5px; color:var(--muted-2); margin-top:1px; }
.route__time{ font-size:13px; color:var(--gold-2); font-variant-numeric:tabular-nums; margin-top:3px; font-weight:600; }
.route__mid{ flex:1 1 auto; position:relative; height:42px; display:flex; align-items:center; }
.route__line{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(230,189,122,.5) 0 4px, transparent 4px 9px);
}
.route__mid svg{ position:relative; margin:0 auto; width:16px; height:16px; fill:var(--gold); transform:rotate(90deg); filter:drop-shadow(0 0 6px rgba(230,189,122,.5)); }
.route__flight{ position:absolute; left:50%; transform:translateX(-50%); top:-4px; font-size: 11px; letter-spacing: .02em; color:var(--muted-2); white-space:nowrap; }

/* ---------- day list ---------- */
.daylist{ display:flex; flex-direction:column; gap:9px; }
.daycard{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 14px; border-radius:18px;
  background:linear-gradient(120deg, rgba(22,32,52,.66), rgba(10,16,28,.8));
  border:1px solid var(--line-soft);
  transition:transform .3s var(--ease), border-color .3s, background .3s;
}
.daycard:active{ transform:scale(.983); }
.daycard__num{
  flex:0 0 auto; width:42px; height:42px; border-radius:13px;
  display:grid; place-items:center; font-size:16px; font-weight:700;
  color:var(--gold-2); font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg, rgba(230,189,122,.19), rgba(230,189,122,.04));
  border:1px solid rgba(230,189,122,.26);
}
.daycard__num small{ display:block; font-size: 11px; letter-spacing: .01em; color:var(--muted-2); font-weight:600; margin-top:-2px; }
.daycard__body{ flex:1 1 auto; min-width:0; }
.daycard__title{ font-size:13.5px; font-weight:600; line-height: 1.45; }
.daycard__sub{ font-size:11px; color:var(--muted-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.daycard__chev{ flex:0 0 auto; color:var(--muted-2); font-size:16px; opacity:.7; }

@media (hover:hover){
  .daycard:hover{ border-color:rgba(230,189,122,.3); background:linear-gradient(120deg, rgba(28,40,64,.75), rgba(12,19,33,.85)); transform:translateY(-1px); }
}

/* ---------- facts grid ---------- */
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.fact{ padding:13px; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid var(--line-soft); }
.fact__k{ font-size: 11px; letter-spacing: .01em; text-transform: none; color:var(--muted-2); }
.fact__v{ font-size:13px; margin-top:5px; font-weight:550; line-height:1.45; }
.fact__v b{ color:var(--gold-2); font-weight:650; }

/* ---------- day chips ---------- */
.daybar{
  position:sticky; top:calc(58px + env(safe-area-inset-top)); z-index:30;
  padding:9px 0 7px;
  background:linear-gradient(180deg, rgba(6,10,18,.97) 0%, rgba(6,10,18,.9) 72%, rgba(6,10,18,0) 100%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.chips{ position:relative; display:flex; gap:7px; overflow-x:auto; scroll-snap-type:x proximity; padding:3px 16px 9px; scrollbar-width:none; -ms-overflow-style:none; }
.chips::-webkit-scrollbar{ display:none; }
.daybar::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:30px;
  background:linear-gradient(90deg, transparent, rgba(6,10,18,.92));
  pointer-events:none; z-index:3;
}
.chip{
  position:relative; z-index:2; flex:0 0 auto; scroll-snap-align:center;
  padding:8px 13px 8px 11px; border-radius:999px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--muted); border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  transition:color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.chip b{ font-variant-numeric:tabular-nums; font-size:11px; opacity:.85; font-weight:800; letter-spacing:.04em; }
.chip span{ font-size: 11.5px; opacity:.72; font-variant-numeric:tabular-nums; }
.chip:active{ transform:scale(.96); }
.chip.is-active{ color:#1c1305; border-color:transparent; }
.chip.is-active b,.chip.is-active span{ opacity:1; }
.chip__pill{
  position:absolute; z-index:1; top:3px; height:calc(100% - 12px);
  border-radius:999px;
  background:linear-gradient(120deg,var(--gold-2),var(--gold) 55%,#cfa257);
  box-shadow:0 6px 20px -6px rgba(230,189,122,.75), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .42s var(--ease), width .42s var(--ease);
  pointer-events:none;
  will-change:transform,width;
}

/* ---------- route map ---------- */
.routemap{
  margin:2px 16px 0; padding:10px 8px 2px;
  border-radius:20px; position:relative; overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(230,189,122,.10), transparent 70%),
    linear-gradient(170deg, rgba(20,30,50,.72), rgba(8,13,24,.88));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,.04);
}
.routemap__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:2px 8px 0;
}
.routemap__title{ font-size: 11px; letter-spacing: .06em; text-transform:uppercase; color:var(--muted-2); }
.routemap__count{ font-size: 11px; color:var(--gold); letter-spacing: .04em; }
.route-svg{ width:100%; height:auto; display:block; overflow:visible; }
.route-grid{ stroke:rgba(255,255,255,.055); stroke-width:.5; stroke-dasharray:1 5; }
.route-base{ fill:none; stroke:rgba(255,255,255,.10); stroke-width:1.4; stroke-linecap:round; }
.route-line{
  fill:none; stroke:url(#routeGrad); stroke-width:2.2; stroke-linecap:round;
  filter:url(#routeGlow);
}
.pin{ opacity:0; transform-box:fill-box; transform-origin:center; }
.pin.is-drawn{ animation:pinPop .6s var(--ease) forwards; animation-delay:var(--pd,0ms); }
@keyframes pinPop{
  0%{ opacity:0; transform:scale(.2); }
  60%{ opacity:1; transform:scale(1.25); }
  100%{ opacity:1; transform:scale(1); }
}
.pin__halo{ fill:rgba(230,189,122,.16); }
.pin__core{ fill:#0b1322; stroke:var(--gold); stroke-width:1.5; }
.pin__dot{ fill:var(--gold-2); }
.pin.is-last .pin__core{ stroke:var(--jade); }
.pin.is-last .pin__dot{ fill:var(--jade-2); }
.pin__label{ font-size: 10px; fill:#d7e2f2; font-family:var(--font); font-weight:600; paint-order:stroke; stroke:#080e1a; stroke-width:2.6px; stroke-linejoin:round; }
.pin__time{ font-size: 9px; fill:var(--gold-2); font-family:var(--font); font-variant-numeric:tabular-nums; letter-spacing:.02em; paint-order:stroke; stroke:#080e1a; stroke-width:2.4px; stroke-linejoin:round; }
.route-dot{ fill:#fff; filter:url(#dotGlow); opacity:0; }
.route-dot.is-live{ opacity:1; }
.route-dot__trail{ fill:rgba(230,189,122,.25); filter:url(#dotGlow); opacity:0; }
.routemap__legend{
  display:flex; justify-content:space-between; align-items:center;
  padding:2px 8px 8px; font-size: 11px; color:var(--muted-2); letter-spacing:.04em;
}
.routemap__legend span{ display:inline-flex; align-items:center; gap:5px; }
.legend-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px rgba(230,189,122,.8); }
.legend-dot--jade{ background:var(--jade); box-shadow:0 0 6px rgba(87,214,182,.8); }

/* ---------- real map (Leaflet + OSM) ---------- */
.mapwrap{
  position:relative; z-index:0; margin:6px 8px 8px;
  border-radius:14px; overflow:hidden;
  background:#0a1220; border:1px solid rgba(255,255,255,.07);
}
.map{ width:100%; height:236px; background:#0a1220; }
.map--trip{ height:300px; }
.map[hidden]{ display:none; }
.leaflet-container{
  background:#0a1220; color:#d7e2f2; outline:none;
  font-family:var(--font); font-size:11px;
  -webkit-tap-highlight-color:transparent;
}
/* Basemap is light OSM raster (keyless), so invert it into the night theme and pull
   the hue back to blue. If a dark tile provider is ever wired in again, drop the
   invert — inverting an already-dark raster is what made the map look blank. */
.leaflet-container .leaflet-tile-pane{
  filter:invert(1) hue-rotate(180deg) brightness(1.02) contrast(1.05) saturate(.55);
}
.leaflet-container .leaflet-control-attribution{
  background:rgba(6,10,18,.74) !important; color:#7d8ba1 !important;
  font-size:9px !important; padding:1px 5px !important; border-radius:6px 0 0 0;
}
.leaflet-container .leaflet-control-attribution a{ color:#9db0c9 !important; }
.leaflet-container .leaflet-interactive:focus{ outline:none; }
.leaflet-container .leaflet-control-zoom{
  border:0; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.leaflet-container .leaflet-control-zoom a{
  width:26px; height:26px; line-height:26px; font-size:15px;
  background:rgba(9,16,28,.92); color:#e7eefa;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.leaflet-container .leaflet-control-zoom a:hover{ background:rgba(20,31,50,.96); color:#f8e3b8; }
.leaflet-container .leaflet-control-zoom a:last-child{ border-bottom:0; }

.mapfit{
  position:absolute; left:9px; top:9px; z-index:500;
  padding:5px 9px; border-radius:999px;
  font-family:var(--font); font-size: 11px; font-weight:600; letter-spacing:.01em;
  background:rgba(9,16,28,.88); color:#f8e3b8;
  border:1px solid rgba(230,189,122,.42);
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.mapfit[hidden]{ display:none; }
.mapfit:active{ transform:scale(.97); }

.mappin-wrap{ background:none; border:0; }
.mappin{
  display:grid; place-items:center;
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(160deg,#17263e,#0a1220);
  border:1.5px solid var(--gold); color:#f8e3b8;
  font-size: 11px; font-weight:700; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 3px rgba(230,189,122,.13), 0 4px 10px rgba(0,0,0,.55);
}
.mappin.is-last{
  border-color:var(--jade); color:#c6f7e9;
  box-shadow:0 0 0 3px rgba(87,214,182,.18), 0 4px 10px rgba(0,0,0,.55);
}
.mappin--airport{
  width:32px; height:20px; border-radius:7px; font-size: 10px; letter-spacing:.03em;
  background:linear-gradient(160deg,#1d2c46,#0a1220);
}
.mappin--hotel{
  border-color:var(--gold-2); color:#1c1305;
  background:linear-gradient(150deg,#f8e3b8,#e6bd7a);
}
.mappin--zone{
  width:26px; height:20px; border-radius:6px; font-size: 10px;
  border-color:var(--jade); color:#c6f7e9; background:rgba(8,20,26,.92);
}

.leaflet-tooltip.maptip{
  background:rgba(7,12,21,.9);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:3px 6px;
  color:#e7eefa; font-family:var(--font); font-size: 11px; line-height: 1.5;
  box-shadow:0 6px 16px rgba(0,0,0,.55);
  white-space:nowrap;
}
.leaflet-tooltip.maptip b{ display:block; font-size: 11.5px; font-weight:650; color:#f8e3b8; }
.leaflet-tooltip.maptip i{ display:block; font-style:normal; font-size: 11px; color:var(--jade-2); font-variant-numeric:tabular-nums; }
.leaflet-tooltip.maptip::before{ display:none; }
.leaflet-tooltip.maptip--zone{ padding:2px 5px; font-size: 11px; }
.maptip__approx{ font-style:normal; color:#ffb59c; margin-left:2px; }

.mapdot{ filter:drop-shadow(0 0 4px rgba(255,255,255,.9)); }

.maploading{
  position:absolute; inset:0; z-index:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:#0a1220; color:var(--muted-2); font-size: 11.5px; letter-spacing:.04em;
}
.maploading[hidden]{ display:none; }
.maploading span{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(230,189,122,.22); border-top-color:var(--gold);
  animation:mapspin 900ms linear infinite;
}
@keyframes mapspin{ to{ transform:rotate(360deg); } }

.mapoff[hidden]{ display:none; }
.mapoff{ padding:0 2px 2px; }
.mapnote{
  margin:0; padding:5px 9px 7px; font-size: 11px; line-height:1.5;
  color:var(--muted-2); letter-spacing:.02em;
}
.mapnote[hidden]{ display:none; }
.route-svg--trip{ padding:6px 4px 0; }


/* ---------- timeline ---------- */
.dayhead{ padding:16px 16px 0; }
.dayhead__date{
  font-size:12px; letter-spacing:.005em; text-transform:none;
  color:var(--gold); font-weight:600; line-height:1.6;
  display:flex; flex-wrap:wrap; gap:2px 8px;
}
.dayhead__date span{ white-space:nowrap; }
.dayhead__title{
  font-family:var(--font-display);
  font-size:23px; line-height: 1.45; font-weight:700; margin-top:7px; text-wrap:balance;
}
.dayhead__sub{ font-size:12.6px; color:var(--muted); margin-top:6px; line-height:1.6; }
.dayhead__hl{
  margin-top:13px; padding:11px 13px; border-radius:14px;
  border-left:2px solid var(--gold);
  background:linear-gradient(90deg, rgba(230,189,122,.12), rgba(230,189,122,.02));
  font-size:12.2px; color:#e5d6bd; line-height:1.55;
}
.dayhead__hl b{ color:var(--gold-2); font-weight:600; }

.timeline{ position:relative; margin:20px 16px 0; padding-left:26px; }
.timeline__rail{ position:absolute; left:7px; top:8px; bottom:8px; width:2px; border-radius:2px; background:rgba(255,255,255,.075); overflow:hidden; }
.timeline__fill{
  width:100%; height:0%;
  background:linear-gradient(180deg,var(--gold),#d9b073 55%,var(--jade));
  box-shadow:0 0 12px rgba(230,189,122,.55);
  transition:height .15s linear;
}
.tl-item{ position:relative; padding-bottom:11px; }
.tl-item::before{
  content:""; position:absolute; left:-24px; top:19px;
  width:7px; height:7px; border-radius:50%;
  background:#0b1322; border:1.5px solid rgba(230,189,122,.5);
  box-shadow:0 0 0 3px rgba(7,11,20,1);
  transition:background .4s, border-color .4s, box-shadow .4s;
}
.tl-item.is-in::before{ background:var(--gold); border-color:var(--gold-2); box-shadow:0 0 0 3px rgba(7,11,20,1), 0 0 10px rgba(230,189,122,.75); }
.tl-card{
  padding:13px 14px; border-radius:16px;
  background:linear-gradient(150deg, rgba(24,35,57,.62), rgba(10,16,28,.8));
  border:1px solid var(--line-soft);
  opacity:0; transform:translateY(16px);
  transition:opacity .65s var(--ease), transform .65s var(--ease), border-color .3s;
  transition-delay:var(--cd,0ms);
  will-change:opacity,transform;
}
.tl-card.is-in{ opacity:1; transform:none; }
.tl-card:active{ border-color:rgba(230,189,122,.28); }
.tl-time{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:650; letter-spacing:.03em;
  color:var(--gold-2); font-variant-numeric:tabular-nums;
  padding:3px 8px; border-radius:999px;
  background:rgba(230,189,122,.10); border:1px solid rgba(230,189,122,.18);
}
.tl-pin{ float:right; font-size: 11px; color:var(--muted-2); letter-spacing: .04em; padding-top:4px; }
.tl-title{ font-size:14.2px; font-weight:600; margin-top:8px; line-height:1.45; }
.tl-detail{ font-size:12.4px; color:var(--muted); line-height:1.72; margin-top:5px; }
.tl-transport{
  display:flex; align-items:center; gap:6px; margin-top:9px;
  font-size: 11.5px; color:var(--jade); letter-spacing:.02em;
}
.tl-transport svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.6; }

/* ---------- tips ---------- */
.tips{ margin:18px 16px 0; }
.tip{
  display:flex; gap:10px; padding:11px 13px; border-radius:14px;
  background:rgba(87,214,182,.055); border:1px solid rgba(87,214,182,.14);
  font-size:12px; color:#c6dbd5; line-height:1.65;
}
.tip + .tip{ margin-top:7px; }
.tip__ico{ flex:0 0 auto; color:var(--jade); font-size:12px; line-height:1.5; }

/* ---------- flights ---------- */
.leg{ padding:0; overflow:hidden; }
.leg__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 15px; border-bottom:1px solid rgba(255,255,255,.06);
}
.leg__flight{ font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--gold-2); }
.leg__dur{ font-size: 11px; color:var(--muted-2); letter-spacing: .01em; }
.leg__body{ display:flex; align-items:center; gap:8px; padding:15px; }
.leg__pt{ flex:0 0 auto; }
.leg__pt--right{ text-align:right; }
.leg__t{ font-size:21px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height: 1.45; }
.leg__c{ font-size:13px; font-weight:650; color:var(--gold); letter-spacing:.08em; margin-top:2px; }
.leg__n{ font-size: 11px; color:var(--muted-2); margin-top:2px; }
.leg__line{ flex:1 1 auto; position:relative; height:2px; background:repeating-linear-gradient(90deg, rgba(230,189,122,.42) 0 3px, transparent 3px 8px); margin:0 4px; }
.leg__line::after{
  content:"✈"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(90deg);
  font-size:11px; color:var(--gold); background:#0c1422; padding:0 3px; line-height:1;
}
.leg__foot{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:0 15px 14px; font-size: 11px; color:var(--muted-2);
}
.leg__foot b{ color:#c4d2e4; font-weight:600; }

.transfer{
  display:flex; align-items:center; gap:8px; margin:9px 0;
  padding:9px 13px; border-radius:12px;
  background:rgba(230,189,122,.06); border:1px dashed rgba(230,189,122,.24);
  font-size: 11.5px; color:#d8c8ab;
}
.transfer svg{ width:13px; height:13px; stroke:var(--gold); fill:none; stroke-width:1.5; }

/* ---------- checklist ---------- */
.check{ display:flex; gap:12px; padding:13px 14px; border-radius:16px; background:linear-gradient(150deg, rgba(24,35,57,.6), rgba(10,16,28,.8)); border:1px solid var(--line-soft); }
.check + .check{ margin-top:8px; }
.check__mark{ flex:0 0 auto; width:20px; height:20px; border-radius:6px; border:1px solid rgba(255,255,255,.18); margin-top:2px; display:grid; place-items:center; }
.check__mark::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--muted-2); }
.check[data-sev="critical"] .check__mark{ border-color:rgba(255,138,110,.55); }
.check[data-sev="critical"] .check__mark::after{ background:#ff8a6e; box-shadow:0 0 8px rgba(255,138,110,.8); }
.check[data-sev="high"] .check__mark{ border-color:rgba(230,189,122,.5); }
.check[data-sev="high"] .check__mark::after{ background:var(--gold); box-shadow:0 0 8px rgba(230,189,122,.8); }
.check[data-sev="normal"] .check__mark{ border-color:rgba(87,214,182,.4); }
.check[data-sev="normal"] .check__mark::after{ background:var(--jade); }
.check__body{ min-width:0; }
.check__t{ font-size:12.5px; font-weight:600; line-height:1.45; }
.check__d{ font-size:11.6px; color:var(--muted); line-height:1.7; margin-top:3px; }
.check__due{ display:inline-block; margin-top:7px; font-size: 11px; letter-spacing: .02em; color:var(--muted-2); padding:2px 7px; border-radius:999px; border:1px solid rgba(255,255,255,.1); }

/* ---------- phrases ---------- */
.phrase{ padding:14px; border-radius:16px; background:linear-gradient(150deg, rgba(24,35,57,.6), rgba(10,16,28,.8)); border:1px solid var(--line-soft); }
.phrase + .phrase{ margin-top:8px; }
.phrase__zh{ font-size:14px; font-weight:600; line-height:1.6; color:#fff5e2; letter-spacing:.01em; }
.phrase__py{ font-size: 11px; color:var(--muted-2); margin-top:4px; font-style:italic; letter-spacing:.02em; }
.phrase__th{ font-size:12.2px; color:var(--jade-2); margin-top:7px; line-height:1.65; }
.phrase__use{ font-size: 11px; color:var(--muted-2); margin-top:6px; letter-spacing:.03em; }

/* ---------- people ---------- */
.people{ display:flex; flex-direction:column; gap:7px; }
.person{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); }
.avatar{
  flex:0 0 auto; width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
  font-size: 11px; font-weight:700; letter-spacing:.03em; color:var(--gold-2);
  background:linear-gradient(160deg, rgba(230,189,122,.18), rgba(230,189,122,.04));
  border:1px solid rgba(230,189,122,.24);
}
.person__n{ font-size:12px; font-weight:550; }
.person__r{ font-size: 11px; color:var(--muted-2); }

/* ---------- empty / error ---------- */
.state{ margin:36px 16px; padding:26px 20px; text-align:center; border-radius:20px; border:1px solid rgba(255,120,90,.22); background:rgba(255,120,90,.05); }
.state__ico{ font-size:22px; color:#ff9c81; }
.state__t{ font-size:14px; font-weight:600; margin-top:10px; }
.state__d{ font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.7; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  margin-top:16px; padding:10px 20px; border-radius:999px;
  background:linear-gradient(120deg,var(--gold-2),var(--gold));
  color:#1a1206; font-size:12px; font-weight:700; letter-spacing:.02em;
  box-shadow:0 10px 26px -12px rgba(230,189,122,.9);
  transition:transform .2s var(--ease);
}
.btn:active{ transform:scale(.96); }

/* ---------- skeleton ---------- */
.skeleton{ padding:16px; }
.sk{
  border-radius:14px; background:linear-gradient(100deg, rgba(255,255,255,.045) 20%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.045) 56%);
  background-size:220% 100%;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:130% 0; } 100%{ background-position:-30% 0; } }
.sk--hero{ height:196px; border-radius:24px; margin:4px 0 18px; }
.sk--row{ height:60px; margin-bottom:9px; }
.sk--line{ height:12px; width:62%; margin:0 0 8px; }
.sk--map{ height:190px; margin-bottom:14px; }
.sk--block{ height:96px; margin-bottom:10px; }

/* ---------- tab bar ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  z-index:50; width:100%; max-width:480px;
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:9px 6px calc(9px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(9,14,24,.86), rgba(6,10,18,.97));
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 -18px 40px -24px rgba(0,0,0,.95);
}
.tab{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 0 4px; border-radius:14px;
  color:var(--muted-2); font-size: 11px; letter-spacing:.02em;
  transition:color .3s var(--ease), transform .2s var(--ease);
}
.tab svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease), filter .35s; }
.tab span{ line-height: 1.4; }
.tab.is-active{ color:var(--gold-2); }
.tab.is-active svg{ transform:translateY(-1px); filter:drop-shadow(0 0 8px rgba(230,189,122,.55)); }
.tab.is-active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
  box-shadow:0 0 8px rgba(230,189,122,.8);
}
.tab:active{ transform:scale(.93); }

/* ---------- utility ---------- */
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.muted{ color:var(--muted); }
.tnum{ font-variant-numeric:tabular-nums; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- view transitions ---------- */
::view-transition-old(root){ animation:vtOut .22s ease both; }
::view-transition-new(root){ animation:vtIn .34s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-4px) scale(.995); } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(8px) scale(.998); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__aurora,.hero__aurora::after{ animation:none; }
  .pin{ opacity:1; }
  .tl-card{ opacity:1; transform:none; }
  .sk{ animation:none; background:rgba(255,255,255,.06); }
  ::view-transition-old(root),::view-transition-new(root){ animation:none; }
}