:root{
  --bg-deep:#070b1a;
  --bg-deep2:#0d1530;
  --blue:#2e7bf2;
  --blue-light:#5fb4ff;
  --gold:#ffc857;
  --green:#34c98e;
  --red:#ff5d6c;
  --white:#f4f6fb;
  --text-dim:#a9b3cc;
  --card-bg:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.12);
  --radius:18px;
  --maxw:980px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft Yahei",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg-deep);
  color:var(--white);
  min-height:100vh;
  overflow-x:hidden;
}

#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* ================= HERO ================= */
#hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px 60px;
  z-index:1;
}
.hero-mountains{
  position:absolute;
  bottom:0;left:0;right:0;
  height:42vh;
  background:linear-gradient(180deg, rgba(46,123,242,0.18) 0%, #101a3a 100%);
  clip-path:polygon(0% 100%, 0% 60%, 10% 45%, 20% 65%, 32% 30%, 45% 58%, 58% 20%, 70% 55%, 82% 35%, 92% 60%, 100% 42%, 100% 100%);
  opacity:0.9;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:760px;
  width:100%;
  text-align:center;
}
.hero-kicker{
  color:var(--gold);
  letter-spacing:.12em;
  font-size:13px;
  text-transform:uppercase;
  margin-bottom:10px;
}
.hero-title{
  font-size:clamp(32px,7vw,56px);
  line-height:1.15;
  margin:0 0 14px;
  font-weight:800;
  background:linear-gradient(90deg,var(--white),var(--blue-light));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-title span{
  background:linear-gradient(90deg,var(--gold),var(--red));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-desc{color:var(--text-dim);font-size:16px;margin-bottom:30px;}

.mode-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:24px;
}
@media(min-width:640px){
  .mode-cards{grid-template-columns:1fr 1fr;}
}
.mode-card{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:28px 22px;
  text-align:left;
  color:var(--white);
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.mode-card::before{
  content:"";
  position:absolute;
  top:-40%;right:-40%;
  width:180px;height:180px;
  background:radial-gradient(circle, rgba(95,180,255,0.35), transparent 70%);
  transition:transform .4s ease;
}
.mode-card:hover{
  transform:translateY(-6px);
  border-color:var(--blue-light);
  box-shadow:0 18px 40px rgba(46,123,242,0.25);
}
.mode-card:hover::before{transform:scale(1.4);}
.mode-icon{font-size:38px;margin-bottom:10px;}
.mode-card h2{margin:0 0 6px;font-size:22px;}
.mode-card p{margin:0 0 14px;color:var(--text-dim);font-size:14px;}
.mode-meta{
  display:inline-block;
  font-size:12px;
  color:var(--gold);
  border:1px solid rgba(255,200,87,0.4);
  border-radius:20px;
  padding:4px 10px;
  margin-bottom:14px;
}
.mode-go{display:block;font-weight:600;color:var(--blue-light);font-size:14px;}
.hero-footnote{font-size:12px;color:var(--text-dim);opacity:.8;max-width:560px;margin:0 auto;}
.hero-footnote code{background:rgba(255,255,255,0.1);padding:2px 6px;border-radius:6px;}

/* ================= APP SHELL ================= */
#app{position:relative;z-index:1;min-height:100vh;padding-bottom:60px;}
.app-header{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 16px 14px;
  position:sticky;
  top:0;
  background:rgba(7,11,26,0.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--card-border);
  z-index:20;
}
.back-btn{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  color:var(--white);
  width:38px;height:38px;
  border-radius:50%;
  font-size:18px;
  cursor:pointer;
  flex-shrink:0;
}
.app-title{flex:1;min-width:0;}
.app-title h2{margin:0;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-title p{margin:2px 0 0;font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.app-badge{font-size:24px;flex-shrink:0;}

.tabs{
  display:flex;
  overflow-x:auto;
  gap:6px;
  padding:10px 14px;
  position:sticky;
  top:70px;
  background:rgba(7,11,26,0.7);
  backdrop-filter:blur(10px);
  z-index:19;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex-shrink:0;
  background:transparent;
  border:1px solid var(--card-border);
  color:var(--text-dim);
  padding:8px 16px;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  transition:all .2s;
}
.tab.active{
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
  color:#fff;
  border-color:transparent;
  font-weight:600;
}

main#panels{max-width:var(--maxw);margin:0 auto;padding:18px 16px 40px;}
.panel{display:none;animation:fadein .35s ease;}
.panel.active{display:block;}
@keyframes fadein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.panel-title{font-size:18px;margin:4px 0 4px;}
.panel-hint{color:var(--text-dim);font-size:12px;margin:0 0 16px;}

/* ===== overview stats ===== */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:18px;
}
@media(min-width:640px){.stat-grid{grid-template-columns:repeat(4,1fr);}}
.stat-item{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:16px;
  text-align:center;
}
.stat-item .v{font-size:22px;font-weight:800;color:var(--gold);}
.stat-item .l{font-size:12px;color:var(--text-dim);margin-top:4px;}

.info-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:16px;
  line-height:1.7;
  font-size:14px;
}
.info-card h3{margin:0 0 10px;font-size:15px;}
.info-card.warn{border-color:rgba(255,93,108,0.4);background:rgba(255,93,108,0.08);}
.info-card.warn h3{color:var(--red);}
.info-card ul{margin:0;padding-left:18px;}
.info-card li{margin-bottom:6px;color:var(--text-dim);}

/* ===== journey map ===== */
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:var(--text-dim);}
.map-legend span{display:inline-flex;align-items:center;gap:6px;}
.map-legend .swatch{width:22px;height:0;border-top:3px solid var(--blue-light);display:inline-block;}
.map-legend .swatch.flight{border-top-style:dashed;border-color:var(--gold);}
.map-wrap{
  position:relative;
  background:radial-gradient(120% 100% at 30% 0%, rgba(95,180,255,0.12), transparent 60%), linear-gradient(160deg,#0a1430,#121f44 60%,#0a1430);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:10px;
  overflow:hidden;
}
#routeMap{width:100%;height:auto;display:block;}
.map-node-label{
  font-size:9px;
  fill:var(--text-dim);
  text-anchor:middle;
  pointer-events:none;
}
.map-node-day{
  font-size:9.5px;
  font-weight:700;
  fill:var(--gold);
  text-anchor:middle;
  pointer-events:none;
}
.map-node circle{cursor:pointer;transition:r .15s;}
.map-node:hover circle{r:7;}
.map-vehicle{font-size:20px;filter:drop-shadow(0 0 6px rgba(255,255,255,0.6));}
.elev-strip-wrap{margin-top:14px;}
#elevationChart{width:100%;height:90px;display:block;}

/* ===== scene banners (CSS插画，无需外部图片) ===== */
.scene-banner{
  position:relative;
  height:130px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.scene-banner::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:58%;
  background:rgba(0,0,0,0.28);
  clip-path:polygon(0 100%, 0 68%, 8% 38%, 18% 64%, 28% 22%, 40% 58%, 52% 12%, 64% 52%, 76% 28%, 88% 56%, 100% 32%, 100% 100%);
  z-index:1;
}
.scene-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(white 1px, transparent 1.5px);
  background-size:26px 26px;
  opacity:.12;
  z-index:1;
}
.scene-photo{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}
.scene-photo-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:0;
  background:linear-gradient(180deg, rgba(8,12,28,0.05) 0%, rgba(8,12,28,0.55) 60%, rgba(8,12,28,0.9) 100%);
}
.scene-banner.has-photo::before{ display:none; }
.scene-banner.has-photo::after{ opacity:.06; }
.scene-banner.has-photo .scene-photo-scrim{ opacity:1; }
.scene-banner.has-photo .scene-emoji-bg{ opacity:.16; }
.scene-emoji-bg{
  position:absolute;
  right:-6px;bottom:-14px;
  font-size:84px;
  opacity:.30;
  line-height:1;
  transform:rotate(-4deg);
  z-index:1;
}
.scene-icon-badge{
  position:relative;
  z-index:2;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(7,11,26,0.55);
  border:1px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  margin:0 10px 10px 12px;
  flex-shrink:0;
}
.scene-banner-text{position:relative;z-index:2;padding-bottom:10px;}
.scene-banner-text .name{font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.5);}
.scene-banner-text .tag{font-size:11px;color:var(--gold);}

.scene-lake{background:linear-gradient(135deg,#0d3b66,#1f7a8c,#3aafa9);}
.scene-mountain{background:linear-gradient(135deg,#1b2735,#4b6584,#a8c0d6);}
.scene-temple{background:linear-gradient(135deg,#3a1c1c,#7b3f3f,#c9a14a);}
.scene-glacier{background:linear-gradient(135deg,#1a2a4a,#3f6fa8,#bfe3f0);}
.scene-grassland{background:linear-gradient(135deg,#234d35,#4f8a5b,#a9cf6e);}
.scene-road{background:linear-gradient(135deg,#2b2b3d,#54546b,#8c8ca3);}
.scene-city{background:linear-gradient(135deg,#202a4e,#3c4a86,#7986cb);}
.scene-desert{background:linear-gradient(135deg,#3a2c1f,#7a5a37,#c9a96a);}
.scene-canyon{background:linear-gradient(135deg,#1f3a2e,#356859,#7fb88f);}

/* ===== days ===== */
.days-list{display:flex;flex-direction:column;gap:14px;}
.day-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;
  scroll-margin-top:140px;
}
.day-card .card-body{padding:16px 20px 18px;}
.day-card .head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.day-card .badge{
  background:linear-gradient(90deg,var(--blue),var(--green));
  color:#04101f;
  font-weight:800;
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
}
.day-card .date{font-size:12px;color:var(--text-dim);margin-left:auto;}
.day-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:10px;
}
.day-meta span b{color:var(--white);}
.day-card .summary{font-size:14px;line-height:1.7;color:#dde3f5;margin-bottom:10px;}
.day-card .attractions{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.attraction-chip{
  background:rgba(255,255,255,0.05);
  border-left:3px solid var(--gold);
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
}
.attraction-chip b{color:var(--gold);}
.day-foot{display:flex;flex-direction:column;gap:6px;font-size:13px;}
.day-foot .stay::before{content:"🏨 ";}
.day-foot .tip{color:var(--blue-light);}
.day-foot .tip::before{content:"💡 ";}

/* ===== checklist ===== */
.checklist-progress{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.checklist-progress .bar{flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,0.08);overflow:hidden;}
.checklist-progress .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .3s;}
.checklist-progress span{font-size:13px;color:var(--gold);font-weight:700;min-width:42px;text-align:right;}

.check-group{margin-bottom:18px;}
.check-group-title{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;margin-bottom:10px;
}
.check-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:8px;
  transition:opacity .2s;
}
.check-item.done{opacity:.5;}
.check-item .cb{
  width:20px;height:20px;border-radius:6px;
  border:2px solid var(--blue-light);
  flex-shrink:0;margin-top:2px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.check-item.done .cb{background:var(--green);border-color:var(--green);}
.check-item .body{flex:1;}
.check-item .name{font-size:14px;font-weight:600;}
.check-item .must{
  font-size:10px;color:var(--red);border:1px solid var(--red);
  border-radius:8px;padding:1px 6px;margin-left:6px;
}
.check-item .note{font-size:12px;color:var(--text-dim);margin-top:4px;line-height:1.5;}
.check-item .links{margin-top:6px;display:flex;gap:10px;}
.check-item .links a{
  font-size:12px;color:var(--gold);
  border:1px solid rgba(255,200,87,0.4);
  border-radius:8px;padding:3px 9px;
  text-decoration:none;
}

/* ===== highlights ===== */
.highlight-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:640px){.highlight-grid{grid-template-columns:1fr 1fr;}}
.highlight-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;
}
.highlight-card .card-body{padding:14px 20px 18px;}
.highlight-card p{font-size:13px;line-height:1.7;color:#dde3f5;margin:4px 0;}
.highlight-card .label{color:var(--gold);font-weight:700;}

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