:root {
  --coral: #ff6b4a; --coral-light: #fff0eb; --coral-dark: #e04930;
  --green: #3cb88a; --green-light: #d5f7e8; --green-dark: #259d6e;
  --gold: #f0a832; --gold-light: #fff8eb;
  --bg: #fff; --card: #fff; --text: #2d221e; --text2: #5c5652; --text3: #9e9894;
  --border: #e4ded8; --radius: 18px; --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background:
    linear-gradient(180deg,#eef8fb 0%,#fafaf9 42%,#fff7ec 100%);
  color: var(--text); min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.container {
  position:relative; z-index:1; max-width:500px; margin:0 auto; min-height:100vh; background:#fff;
  box-shadow:0 0 0 1px rgba(45,34,30,0.04), 0 28px 80px rgba(44,82,96,0.12);
}

/* ===== WELCOME ===== */
.welcome {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:40px 24px; text-align:center;
  position:relative; overflow:hidden;
  background:radial-gradient(ellipse 85% 75% at 50% 30%, #e0eef8 0%, #d4e8f4 25%, #c9e0f0 50%, #d8eaf4 75%, #f2f7fb 100%);
}
.welcome::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.18) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.16) 39px 40px),
    radial-gradient(circle 190px at 16% 20%, rgba(70,175,200,0.12) 0%, transparent 70%),
    radial-gradient(circle 140px at 84% 26%, rgba(100,160,215,0.10) 0%, transparent 70%),
    radial-gradient(circle 210px at 50% 56%, rgba(55,180,140,0.08) 0%, transparent 70%),
    radial-gradient(circle 130px at 28% 70%, rgba(120,165,210,0.09) 0%, transparent 70%),
    radial-gradient(circle 160px at 76% 66%, rgba(75,170,200,0.08) 0%, transparent 70%);
}
.welcome::after {
  content:''; position:absolute; left:22px; right:22px; top:118px; height:210px; pointer-events:none; z-index:0;
  border:1px solid rgba(62,146,174,0.13); border-radius:42% 58% 48% 52%;
  transform:rotate(-8deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.28),
    0 0 0 12px rgba(255,255,255,0.06);
}

/* Floating decor */
.w-deco { position:absolute; pointer-events:none; z-index:0; }
.w-deco.pin   { font-size:22px; animation:wdFloat 5s ease-in-out infinite; }
.w-deco.star  { font-size:14px; animation:wdSparkle 3s ease-in-out infinite; }
.w-deco.dot   { width:6px;height:6px;border-radius:50%; animation:wdPulse 3.5s ease-in-out infinite; }
.w-deco.ring  { width:50px;height:50px;border-radius:50%;border:1.5px solid rgba(80,175,210,0.20); animation:wdPulse 4s ease-in-out infinite; }

.w-deco:nth-child(1){top:12%;left:10%;animation-delay:0s}
.w-deco:nth-child(2){top:18%;right:8%;animation-delay:1.2s}
.w-deco:nth-child(3){top:38%;left:6%;animation-delay:2.4s}
.w-deco:nth-child(4){top:45%;right:10%;animation-delay:0.6s}
.w-deco:nth-child(5){top:58%;left:12%;animation-delay:1.8s}
.w-deco:nth-child(6){top:65%;right:6%;animation-delay:3s}
.w-deco:nth-child(7){top:75%;left:8%;animation-delay:1.0s}
.w-deco:nth-child(8){top:82%;right:14%;animation-delay:2.2s}
.w-deco:nth-child(9){top:15%;left:44%;animation-delay:0.3s}
.w-deco:nth-child(10){top:72%;left:52%;animation-delay:1.6s}
.w-deco:nth-child(11){top:88%;left:32%;animation-delay:2.8s}
.w-deco:nth-child(12){top:8%;right:28%;animation-delay:1.4s}

@keyframes wdFloat  { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-14px) rotate(5deg)} }
@keyframes wdSparkle{ 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:0.8;transform:scale(1.3)} }
@keyframes wdPulse  { 0%,100%{opacity:0.4;transform:scale(1)} 50%{opacity:0.9;transform:scale(1.15)} }

/* Central emblem */
.w-emblem {
  position:relative; z-index:1; width:180px; height:180px; margin-bottom:28px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 35%, #fff 0%, #f0f6fa 40%, #d6e8f4 100%);
  box-shadow:0 8px 40px rgba(50,150,200,0.16), 0 2px 8px rgba(0,0,0,0.04), inset 0 -2px 8px rgba(70,155,200,0.06);
  animation:wEmblemFloat 6s ease-in-out infinite;
}
.w-emblem::after {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:2px dashed rgba(80,175,210,0.28);
}
@keyframes wEmblemFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.w-emblem-icon { font-size:64px; z-index:1; position:relative; }
.w-emblem-ring {
  position:absolute; inset:16px; border-radius:50%;
  border:2px solid rgba(80,175,210,0.13);
  animation:wRingSpin 20s linear infinite;
}
.w-emblem-ring:nth-child(2) { inset:28px; animation-duration:14s; animation-direction:reverse; border-color:rgba(55,180,140,0.12); }
@keyframes wRingSpin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Airplane trail */
.w-trail-area { position:absolute; top:54px; left:-60px; z-index:0; pointer-events:none; }
.airplane { position:absolute; font-size:36px; animation:fp 8s ease-in-out infinite; z-index:2; }
.airplane-trail {
  position:absolute; top:18px; left:-60px; width:60px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(70,170,200,0.30), rgba(55,180,140,0.18), transparent);
  animation:fp 8s ease-in-out infinite; z-index:1;
}

@keyframes fp {
  0%{left:-60px;top:0;transform:rotate(-4deg)}
  25%{left:28%;top:-10px;transform:rotate(-1deg)}
  50%{left:52%;top:6px;transform:rotate(3deg)}
  75%{left:72%;top:-8px;transform:rotate(-2deg)}
  100%{left:calc(100% + 60px);top:2px;transform:rotate(-3deg)}
}

.welcome-icon { font-size:60px; margin-bottom:10px; animation:fi 3.5s ease-in-out infinite; }
@keyframes fi { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.welcome-title {
  position:relative; z-index:1;
  font-size:clamp(26px,6.4vw,40px); font-weight:900; line-height:1.26; margin-bottom:14px;
  background:linear-gradient(135deg,#1a6b8a 0%,#2b8cb8 30%,#3cb88a 55%,#259d6e 80%,#1e7a9a 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:.5px;
}
.welcome-sub {
  position:relative; z-index:1;
  font-size:14px; color:var(--text2); line-height:1.9; margin-bottom:18px; max-width:330px;
}
.welcome-routes {
  position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  width:min(100%,340px); margin:0 auto 32px;
}
.welcome-routes span {
  min-height:30px; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,0.62); border:1px solid rgba(72,160,190,0.18);
  color:#237a92; font-size:12px; font-weight:800; letter-spacing:.5px;
  box-shadow:0 4px 14px rgba(45,120,150,0.08);
}
.w-btn-wrap { position:relative; z-index:1; }
.w-btn-wrap::after {
  content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:180px; height:56px; border-radius:50px;
  background:rgba(224,73,48,0.24); filter:blur(24px); z-index:-1;
}

/* ===== QUIZ ILLUSTRATION ===== */
.q-illus {
  width:100%; height:210px; border-radius:22px; margin-bottom:22px;
  position:relative; overflow:hidden;
  box-shadow:0 10px 34px rgba(35,80,96,0.15);
  background-size:cover; background-position:center;
  border:1px solid rgba(255,255,255,0.74);
}
.q-illus .q-img { width:100%;height:100%;object-fit:cover;display:block; }
.q-illus .qi-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.05) 0%, transparent 35%, rgba(0,0,0,0.30) 100%);
}
.q-illus .qi-label {
  position:absolute; bottom:14px; left:16px; z-index:2; pointer-events:none;
  font-size:17px; color:#fff; font-weight:800; letter-spacing:.5px;
  text-shadow:0 0 6px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
  -webkit-text-stroke:0.4px rgba(0,0,0,0.25);
}
.q-illus .qi-tag {
  position:absolute; top:14px; right:16px; z-index:2; pointer-events:none;
  padding:5px 12px; border-radius:50px; background:rgba(0,0,0,0.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:11px; color:#fff; font-weight:700; letter-spacing:1px;
  text-shadow:0 0 4px rgba(0,0,0,0.5);
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:50px; font-size:16px; font-weight:700; cursor:pointer;
  transition:all var(--transition); font-family:inherit; letter-spacing:.5px;
}
.btn-primary {
  position:relative; overflow:hidden; padding:16px 52px; color:#fff; font-size:17px;
  background:linear-gradient(135deg,#ff7b56 0%,#e04930 50%,#f0a832 100%);
  box-shadow:0 10px 34px rgba(224,73,48,0.34), inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary::after {
  content:''; position:absolute; inset:-40% auto -40% -35%; width:32%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.46),transparent);
  transform:rotate(18deg); transition:left .55s ease;
}
.btn-primary:hover::after { left:112%; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 44px rgba(224,73,48,0.50); }
.btn-primary:active { transform:scale(0.96); }
.btn-ghost { background:#fff; color:var(--green-dark); border:1.5px solid #a8ddc4; padding:14px 28px; }
.btn-ghost:hover { border-color:var(--green); background:var(--green-light); }

/* ===== QUIZ ===== */
.quiz { display:none; padding:24px 20px; background:linear-gradient(180deg,#fff 0%,#fbfaf6 100%); min-height:100vh; }
.quiz.active { display:block; animation:fu .5s ease; }
@keyframes fu { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
.quiz-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.quiz-back { background:none; border:none; color:var(--text3); font-size:14px; cursor:pointer; font-family:inherit; padding:6px 0; }
.quiz-count { font-size:13px; color:var(--text3); }
.quiz-progress { position:relative; height:7px; background:#f0eae4; border-radius:999px; margin-bottom:32px; overflow:visible; }
.quiz-progress-fill { height:100%; background:linear-gradient(90deg,var(--coral),var(--gold),var(--green)); border-radius:3px; transition:width .4s; background-size:200% 100%; animation:pg 2s ease infinite; }
.quiz-progress::after {
  content:'✈️'; position:absolute; top:-18px; left:var(--p, 0%);
  transform:translateX(-50%) rotate(8deg); font-size:16px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));
  transition:left .4s ease;
}
@keyframes pg { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.quiz-q { font-size:19px; font-weight:700; text-align:center; line-height:1.5; margin-bottom:24px; }
.quiz-opts { display:flex; flex-direction:column; gap:10px; }
.quiz-opt {
  width:100%; padding:18px 18px; border:1.5px solid var(--border); border-radius:18px;
  background:#fff; font-size:14.5px; cursor:pointer; text-align:left; font-family:inherit;
  color:var(--text); transition:all .18s; display:flex; align-items:center; gap:12px; line-height:1.5;
  box-shadow:0 4px 14px rgba(45,34,30,0.04);
}
.quiz-opt:hover { border-color:var(--green); background:linear-gradient(135deg,#f4fffa,#dff8ed); transform:translateX(4px); box-shadow:0 8px 24px rgba(60,184,138,0.16); }
.quiz-opt:active { transform:scale(.98); }
.quiz-opt .opt-emoji { font-size:26px; flex-shrink:0; width:36px; text-align:center; }

/* ===== RESULT ===== */
.result { display:none; padding:24px 20px 80px; }
.result.active { display:block; animation:fu .5s ease; }

.result-hero {
  text-align:center; padding:34px 20px 30px; position:relative;
  border-radius:var(--radius); margin-bottom:14px; overflow:hidden;
  min-height:360px; display:flex; flex-direction:column; justify-content:center;
  box-shadow:0 14px 42px rgba(0,0,0,0.18);
}
.result-hero .rh-bg { position:absolute; inset:0; z-index:0; }
.result-hero .rh-bg img { width:100%;height:100%;object-fit:cover; transform:scale(1.04); }
.result-hero .rh-bg::after { content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.14) 44%, rgba(0,0,0,0.62) 100%),
    linear-gradient(135deg, rgba(31,124,154,0.25), rgba(60,184,138,0.18)); }
.result-hero > * { position:relative; z-index:2; }
.result-kicker {
  margin:0 auto 9px; width:fit-content; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.28);
  color:rgba(255,255,255,0.92); font-size:11px; font-weight:800; letter-spacing:1.8px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.result-badge { display:inline-block; padding:7px 20px; border-radius:50px; font-size:12px; font-weight:800; letter-spacing:1.5px; margin-bottom:10px; color:#fff; }
.result-city { font-size:54px; font-weight:900; margin-bottom:6px; color:#fff; text-shadow:0 0 8px rgba(0,0,0,0.76), 0 4px 18px rgba(0,0,0,0.5); -webkit-text-stroke:.7px rgba(0,0,0,0.24); }
.result-tagline { max-width:330px; margin:0 auto 10px; font-size:14px; color:#fff; line-height:1.65; text-shadow:0 0 4px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6); -webkit-text-stroke:0.25px rgba(0,0,0,0.2); }
.result-mantra {
  max-width:320px; margin:0 auto 8px; padding:10px 14px; border-radius:16px;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.22);
  color:#fff; font-size:13px; font-weight:700; line-height:1.65;
  text-shadow:0 1px 4px rgba(0,0,0,0.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.result-match-ring { position:relative; width:110px; height:110px; margin:10px auto 0; }
.result-hero .city-landmark-label { position:absolute; bottom:14px; left:16px; color:#fff; font-size:12px; font-weight:600; z-index:2; letter-spacing:.5px; text-shadow:0 0 4px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6); -webkit-text-stroke:0.3px rgba(0,0,0,0.3); }
.result-hero .rh-glass-badge {
  display:inline-block; padding:6px 14px; border-radius:50px; margin-bottom:8px;
  background:rgba(255,255,255,0.18); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px;
}
.result-hero .rh-dec-ring {
  position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  border:1.5px solid rgba(255,255,255,0.15);
}
.result-hero .rh-dec-ring.r1 { width:180px;height:180px;top:-50px;right:-60px; }
.result-hero .rh-dec-ring.r2 { width:100px;height:100px;bottom:-30px;left:-30px;border-color:rgba(255,255,255,0.10); }

.section { background:var(--card); border-radius:var(--radius); padding:22px 18px; margin-bottom:14px; box-shadow:var(--shadow); border:1px solid var(--border); }
.section:nth-of-type(odd) { background:linear-gradient(180deg,#fff 0%,#fffdf8 100%); }
.section-hd { font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; padding-bottom:12px; border-bottom:1px solid var(--border); letter-spacing:.5px; }
.section-hd .ic { font-size:22px; }


.city-tags { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; }
.city-tag { padding:5px 12px; border-radius:50px; font-size:12px; font-weight:700; background:var(--green-light); color:var(--green-dark); border:1px solid rgba(60,184,138,0.15); }

.chart-wrap { max-width:300px; margin:0 auto; padding:4px 0; }

/* Analysis cards */
.analysis-grid { display:flex; flex-direction:column; gap:10px; }
.analysis-card { background:linear-gradient(135deg,#f2faf6,#e8f7f1); border-radius:14px; padding:16px; border-left:3px solid var(--green); transition:all var(--transition); }
.analysis-card:nth-child(even) { background:linear-gradient(135deg,#fff8ed,#fff3df); border-left-color:var(--gold); }
.analysis-card:hover { transform:translateX(3px); }
.analysis-card .ac-title { font-size:14px; font-weight:700; margin-bottom:4px; }
.analysis-card .ac-text { font-size:13px; color:var(--text2); line-height:1.7; }

/* Soul monologue */
.soul-block { background:linear-gradient(135deg,#fff3e6,#ffe8d4); border-radius:16px; padding:20px 18px; margin-top:14px; position:relative; }
.soul-block::before { content:'"'; position:absolute; top:8px; left:14px; font-size:48px; color:var(--gold); opacity:0.5; font-family:Georgia,serif; line-height:1; }
.soul-block .soul-text { font-size:14px; color:var(--text2); line-height:1.8; font-style:italic; padding-left:10px; }
.soul-block .soul-label { font-size:12px; color:var(--text3); margin-top:8px; text-align:right; }

/* Growth suggestions */
.growth-list { display:flex; flex-direction:column; gap:12px; }
.growth-item { display:flex; gap:12px; align-items:flex-start; padding:14px; background:linear-gradient(135deg,#f2faf6,#e8f7f1); border-radius:14px; transition:all var(--transition); }
.growth-item:nth-child(even) { background:linear-gradient(135deg,#fff8ed,#fff0d8); }
.growth-item:hover { transform:translateX(3px); }
.growth-item .gi-icon { font-size:28px; flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.growth-item .gi-body { flex:1; }
.growth-item .gi-title { font-size:14px; font-weight:700; margin-bottom:3px; }
.growth-item .gi-text { font-size:13px; color:var(--text2); line-height:1.65; }

/* Inspiration */
.inspire-block { background:linear-gradient(135deg,#e8faf2,#d2f4e4); border-radius:16px; padding:18px; text-align:center; }
.inspire-block .in-quote { font-size:32px; color:var(--green); opacity:0.45; margin-bottom:8px; }
.inspire-block .in-text { font-size:14.5px; color:var(--text2); line-height:1.8; font-style:italic; }
.inspire-block .in-from { font-size:12px; color:var(--text3); margin-top:10px; }

/* Other cities */
.other-cities { display:flex; overflow-x:auto; gap:10px; padding:4px 0 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.other-cities::-webkit-scrollbar { display:none; }
.other-city-card {
  flex-shrink:0; padding:12px 16px; border-radius:14px; cursor:pointer;
  background:var(--card); box-shadow:0 3px 14px rgba(0,0,0,0.06); border:1px solid var(--border);
  transition:all var(--transition); scroll-snap-align:start; white-space:nowrap;
}
.other-city-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,0.10); border-color:var(--green); }
.other-city-card .occ-name { font-size:14px; font-weight:700; }
.other-city-card .occ-pct { font-size:12px; color:var(--green); font-weight:700; }

.actions { display:flex; gap:10px; margin-top:20px; }
.actions .btn { flex:1; }

/* Birthday page */
.toast { position:fixed; bottom:50px; left:50%; transform:translateX(-50%) translateY(120px); background:#3a2e2a; color:#fff; padding:14px 28px; border-radius:50px; font-size:14px; z-index:500; pointer-events:none; transition:transform .45s cubic-bezier(.175,.885,.32,1.275); white-space:nowrap; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.toast.show { transform:translateX(-50%) translateY(0); }

@media(max-width:400px) {
  .result-city { font-size:28px; }
  .other-city-card { padding:10px 14px; }
}

/* ===== 屏蔽快链弹窗/广告/水印 ===== */
body > div:not(.container):not(.toast),
body > img,
body > a[style*="position:fixed"], body > a[style*="position: fixed"],
body > iframe:not([src*="jsdelivr"]),
body > div[id*="ad"], body > div[class*="ad"],
body > div[id*="pop"], body > div[class*="pop"],
body > div[id*="water"], body > div[class*="water"],
body > div[id*="mark"], body > div[class*="mark"],
body > div[id*="brand"], body > div[class*="brand"],
body > div[id*="fix"], body > div[class*="fix"],
body > div[id*="bot"], body > div[class*="bot"],
body > div[style*="position:fixed"], body > div[style*="position: fixed"],
body > div[style*="z-index: 999"], body > div[style*="z-index:999"],
body > div[style*="z-index: 9999"], body > div[style*="z-index:9999"],
body > div[style*="z-index:99999"], body > div[style*="z-index: 99999"],
body *[style*="right: 0"][style*="bottom: 0"],
body *[style*="right:0"][style*="bottom:0"],
[class*="watermark"],[id*="watermark"] { display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; height:0!important; width:0!important; overflow:hidden!important; position:absolute!important; z-index:-9999!important; }