* { box-sizing: border-box; }
:root {
  --blue: #1298ff;
  --blue-deep: #0d63db;
  --violet: #7a68ff;
  --green: #18c77a;
  --mint: #eafaf1;
  --gold: #ffbd4a;
  --orange: #ff6b45;
  --ink: #182132;
  --muted: #7d8797;
  --line: #e8edf5;
  --bg: #f3f7fb;
}
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(20,152,255,.12), transparent 24%),
    radial-gradient(circle at 82% 8%, rgba(25,195,125,.12), transparent 22%),
    #edf2f8;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.stage { min-height: 100vh; display: grid; place-items: center; padding: 22px; }
.phone {
  position: relative;
  width: 375px;
  min-height: 812px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--bg);
  box-shadow: 0 24px 80px rgba(22, 35, 76, .18);
}
.screen { min-height: 812px; padding: 12px 14px 86px; }
.status { height: 28px; display:flex; justify-content:space-between; align-items:center; padding:0 4px; font-size:13px; font-weight:800; }
.icons { display:flex; gap:4px; align-items:center; }
.signal,.wifi,.battery { display:inline-block; background:#111827; }
.signal { width:16px;height:10px;clip-path:polygon(0 100%,20% 65%,20% 100%,35% 100%,35% 45%,55% 45%,55% 100%,70% 100%,70% 20%,90% 20%,90% 100%); }
.wifi { width:15px;height:10px;border-radius:12px 12px 2px 2px;clip-path:polygon(0 36%,50% 0,100% 36%,86% 52%,50% 28%,14% 52%); }
.battery { width:22px;height:10px;border-radius:2px;position:relative; }
.battery::after { content:""; position:absolute; right:-3px; top:3px; width:2px; height:4px; border-radius:1px; background:#111827; }
.nav { height:44px; position:relative; display:grid; place-items:center; font-size:17px; font-weight:900; }
.nav .left,.nav .right { position:absolute; top:50%; transform:translateY(-50%); font-weight:700; }
.nav .left { left:2px; font-size:24px; }
.nav .right { right:2px; font-size:14px; }
.card {
  background:#fff;
  border:1px solid rgba(232,237,245,.88);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(21,40,72,.07);
}
.hero {
  position:relative;
  overflow:hidden;
  color:#fff;
  border-radius:20px;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, #0e9cff 0%, #596cff 52%, #9a73ff 100%);
  box-shadow:0 16px 36px rgba(20,152,255,.24);
}
.hero::after {
  content:"";
  position:absolute;
  right:-24px;
  bottom:-34px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
}
.green-hero {
  position:relative;
  overflow:hidden;
  color:#fff;
  border-radius:20px;
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.25), transparent 24%),
    linear-gradient(135deg, #15bd84 0%, #18a6e8 58%, #756cff 100%);
  box-shadow:0 16px 36px rgba(25,195,125,.22);
}
.gold-hero {
  color:#5f3b09;
  border-radius:20px;
  background:
    radial-gradient(circle at 75% 16%, rgba(255,255,255,.42), transparent 20%),
    linear-gradient(135deg, #ffe5a6, #ffc267 52%, #e99f39);
  box-shadow:0 16px 36px rgba(255,182,64,.22);
}
.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
}
.pill.white { color:#155bd4; background:rgba(255,255,255,.86); }
.pill.green { color:#0b8f5d; background:#e8f8ef; }
.pill.orange { color:#d9552f; background:#fff0ea; }
.progress { height:8px; overflow:hidden; border-radius:999px; background:#e9eef7; }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--green)); }
.tabs {
  display:flex;
  gap:8px;
  padding:4px 0 12px;
  overflow:hidden;
}
.tab {
  flex:1;
  min-width:0;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:13px;
  color:#667085;
  background:#fff;
  box-shadow:0 6px 16px rgba(21,40,72,.05);
  font-size:12px;
  font-weight:900;
}
.tab.active { color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:18px 2px 10px; font-size:17px; font-weight:900; }
.section-title span { color:var(--muted); font-size:12px; font-weight:600; }
.medal-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.medal-card {
  min-height:188px;
  padding:13px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.medal-card.unlocked {
  background:
    radial-gradient(circle at 78% 8%, rgba(255,212,96,.22), transparent 25%),
    linear-gradient(180deg,#fff,#fbfcff);
}
.medal-card.unlocked::after {
  content:"";
  position:absolute;
  inset:-70px;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.72) 50%, transparent 58%);
  animation:shine 4s infinite;
  transform:translateX(-40%);
}
@keyframes shine { 0%,50%{transform:translateX(-40%)} 78%,100%{transform:translateX(42%)} }
.medal-icon {
  position:relative;
  z-index:1;
  width:68px;
  height:68px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:50%;
  font-size:24px;
  font-weight:1000;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), transparent 18%),
    linear-gradient(135deg,#c78945,#ffce73);
  box-shadow:inset 0 -9px 18px rgba(99,55,7,.18),0 14px 26px rgba(255,182,64,.24);
}
.medal-icon.silver { color:#4a607a; background:linear-gradient(135deg,#b9c6d6,#f7fbff); }
.medal-icon.gold { color:#744600; background:linear-gradient(135deg,#ffb640,#fff1a6); }
.medal-icon.locked { color:#a8b0bf; background:#e1e7ef; box-shadow:none; filter:grayscale(1); }
.medal-name { position:relative; z-index:1; font-size:14px; font-weight:1000; }
.medal-meta { position:relative; z-index:1; margin-top:5px; color:var(--muted); font-size:11px; line-height:1.45; }
.share-btn {
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:31px;
  min-width:84px;
  margin-top:10px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(20,152,255,.22);
}
.primary-btn,.ghost-btn { height:46px; border:0; border-radius:999px; font-size:15px; font-weight:900; }
.primary-btn { color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); box-shadow:0 10px 24px rgba(20,152,255,.28); }
.ghost-btn { color:#526071; background:#f1f4f9; }
.report {
  padding:15px;
  border-radius:18px;
  background:
    radial-gradient(circle at 94% 4%, rgba(255,255,255,.8), transparent 18%),
    linear-gradient(135deg,#fff069,#fff8a7);
  box-shadow:0 12px 28px rgba(255,190,64,.18);
}
.report-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.report-stat { min-height:86px; padding:10px 7px; border-radius:13px; background:rgba(255,255,255,.76); }
.report-stat b { display:block; margin:7px 0 4px; font-size:22px; line-height:1; }
.report-stat span { color:#707783; font-size:10px; }
.map {
  position:relative;
  height:150px;
  overflow:hidden;
  border-radius:17px;
  background:
    linear-gradient(28deg,transparent 45%,#d9e4ef 46%,#d9e4ef 49%,transparent 50%),
    linear-gradient(117deg,transparent 48%,#d7e3ef 49%,#d7e3ef 52%,transparent 53%),
    linear-gradient(0deg,#f8fafc 24%,#eef4f9 25%,#eef4f9 27%,#f8fafc 28%,#f8fafc 68%,#eef4f9 69%,#eef4f9 71%,#f8fafc 72%);
}
.route { position:absolute; left:82px; top:46px; width:150px; height:62px; border-left:4px solid var(--blue); border-bottom:4px solid var(--blue); transform:skewX(-18deg); }
.pin { position:absolute; width:28px;height:28px;display:grid;place-items:center;color:#fff;border:3px solid #fff;border-radius:50%;font-size:12px;font-weight:900;box-shadow:0 5px 15px rgba(17,24,39,.18); }
.pin.s { left:70px; top:37px; background:var(--green); }
.pin.e { right:92px; top:81px; background:var(--blue); }
.carbon-scene {
  height:136px;
  margin:14px 0 4px;
  position:relative;
  border-radius:18px;
  background:
    radial-gradient(ellipse at 50% 100%, #7fdc66 0 34%, transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.02));
}
.carbon-scene::before {
  content:"";
  position:absolute;
  left:34px;
  bottom:28px;
  width:80px;
  height:58px;
  border-radius:12px;
  background:#fff6cc;
  box-shadow:120px 10px 0 -14px #ffd66c;
}
.carbon-scene::after {
  content:"";
  position:absolute;
  right:72px;
  top:30px;
  width:28px;
  height:56px;
  border-radius:18px;
  background:linear-gradient(#58d45d,#11843a);
  box-shadow:-140px 34px 0 -4px #ffcf31;
}
.bottom-nav { position:absolute; left:0; right:0; bottom:0; height:74px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; background:rgba(255,255,255,.96); border-top:1px solid rgba(232,237,245,.88); }
.bottom-nav div { text-align:center; color:#596275; font-size:10px; }
.bottom-nav b { display:grid; place-items:center; width:25px; height:25px; margin:0 auto 4px; border-radius:9px; font-size:13px; }
.bottom-nav .active { color:var(--blue); font-weight:900; }
.bottom-nav .active b,.bottom-nav .scan b { color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); }
.bottom-nav .scan b { width:44px;height:44px;margin-top:-18px;border-radius:50%;font-size:18px; }
.modal-bg { position:absolute; inset:0; display:grid; place-items:center; padding:28px; background:rgba(10,16,28,.58); }
.poster-bg {
  min-height:812px;
  padding:16px 18px 28px;
  color:#fff;
  background:
    radial-gradient(circle at 24% 12%, rgba(25,195,125,.28), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(255,182,64,.28), transparent 28%),
    linear-gradient(180deg,#16203a 0%,#24314f 58%,#f6f8fb 58%,#f6f8fb 100%);
}
.qr { width:92px;height:92px;padding:8px;background:linear-gradient(90deg,#111 8px,transparent 8px) 0 0/21px 21px,linear-gradient(#111 8px,transparent 8px) 0 0/21px 21px,#fff;border:8px solid #fff;box-shadow:0 8px 18px rgba(17,24,39,.12); }
.index-grid { display:grid; grid-template-columns:repeat(2,minmax(240px,1fr)); gap:18px; width:min(980px,100%); }
.index-card { display:block; padding:18px; color:var(--ink); text-decoration:none; background:#fff; border-radius:18px; box-shadow:0 16px 44px rgba(23,37,84,.1); }
.index-card b { display:block; margin-bottom:8px; font-size:18px; }
.index-card span { color:var(--muted); font-size:13px; line-height:1.6; }
@media (max-width:520px) {
  .stage { padding:0; background:var(--bg); }
  .phone { width:100vw; min-height:100vh; border-radius:0; box-shadow:none; }
  .screen,.poster-bg { min-height:100vh; }
  .index-grid { grid-template-columns:1fr; padding:16px; }
}