:root{
  --brand:#FF6B35;
  --brand-light:#FF8C5A;
  --brand-soft:#FFF3EC;
  --ink:#1F2733;
  --ink-2:#5B6675;
  --ink-3:#98A2B3;
  --line:#EEF1F5;
  --bg:#F7F8FA;
  --white:#fff;
  --radius:16px;
  --shadow:0 4px 20px rgba(31,39,51,.06);
  --shadow-lg:0 10px 34px rgba(255,107,53,.18);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:#E9ECF1;color:var(--ink);
  display:flex;justify-content:center;align-items:flex-start;
  min-height:100vh;padding:24px 0;
}
.phone{
  width:390px;background:var(--bg);
  border-radius:38px;overflow:hidden;
  box-shadow:0 24px 70px rgba(20,30,50,.22);
  position:relative;min-height:800px;
}
.notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:150px;height:26px;background:#101623;border-radius:0 0 18px 18px;z-index:99;
}
.statusbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 22px 4px;font-size:13px;font-weight:600;color:#fff;
  position:relative;z-index:20;
}
.scroll{height:800px;overflow-y:auto;overflow-x:hidden;position:relative;padding-bottom:78px}
.scroll::-webkit-scrollbar{display:none}

/* ===== 顶部封面 ===== */
.hero{
  position:relative;height:300px;
  background:linear-gradient(135deg,#FF8C5A 0%,#FF6B35 55%,#F4552B 100%);
  background-size:cover;background-position:center;
  padding:0 20px;color:#fff;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(20,15,30,.12) 0%,rgba(20,15,30,.42) 70%,rgba(20,15,30,.55) 100%),
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.22) 0,transparent 42%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:5}
.hero-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.22);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-top:14px;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:#5BFF9E;box-shadow:0 0 0 0 rgba(91,255,158,.7);animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(91,255,158,0)}100%{box-shadow:0 0 0 0 rgba(91,255,158,0)}}
.hero h1{font-size:23px;line-height:1.32;font-weight:800;margin:14px 0 10px;letter-spacing:.3px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-meta{display:flex;flex-direction:column;gap:7px;font-size:13.5px;opacity:.98;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-logo{
  position:absolute;top:56px;right:22px;width:56px;height:56px;border-radius:16px;
  background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;
  font-size:26px;box-shadow:0 8px 22px rgba(140,50,10,.22);z-index:6;overflow:hidden;
}
.hero-logo img{width:100%;height:100%;object-fit:cover}

/* ===== 公告条 ===== */
.notice{
  margin:-30px 16px 0;position:relative;z-index:10;
  background:var(--white);border-radius:14px;box-shadow:var(--shadow);
  padding:13px 15px;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);line-height:1.55;
}
.notice .ic{color:var(--brand);font-size:15px;line-height:1.3;flex-shrink:0}

/* ===== 检索卡 ===== */
.search-card{
  margin:16px;background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 16px 16px;
}
.search-title{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:5px}
.search-sub{font-size:12px;color:var(--ink-3);margin-bottom:14px}
.bib-row{display:flex;gap:9px;margin-bottom:12px}
.bib-input{
  flex:1;height:50px;border:1.6px solid var(--line);border-radius:13px;
  padding:0 15px;font-size:15px;background:#FAFBFC;outline:none;transition:.2s;
  letter-spacing:1px;font-weight:600;color:var(--ink);
}
.bib-input:focus{border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(255,107,53,.1)}
.btn-main{
  height:50px;border:none;border-radius:13px;width:100%;
  background:linear-gradient(135deg,#FF8C5A,#FF6B35);color:#fff;
  font-size:15.5px;font-weight:700;letter-spacing:.5px;
  box-shadow:0 8px 20px rgba(255,107,53,.32);cursor:pointer;transition:.15s;font-family:inherit;
}
.btn-main:active{transform:scale(.975)}
.btn-main:disabled{opacity:.55;box-shadow:none;cursor:not-allowed}
.tip-row{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);margin-top:11px;justify-content:center}

/* ===== 快捷入口 ===== */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:0 16px 16px}
.quick-item{
  background:var(--white);border-radius:14px;padding:15px 14px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:11px;cursor:pointer;transition:.15s;
}
.quick-item:active{transform:scale(.98)}
.quick-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.quick-item h4{font-size:13.5px;font-weight:700;margin-bottom:2px}
.quick-item p{font-size:11px;color:var(--ink-3)}

/* ===== 图墙 ===== */
.wall-head{display:flex;justify-content:space-between;align-items:center;margin:0 16px 11px}
.wall-head h3{font-size:16px;font-weight:800;display:flex;align-items:center;gap:7px}
.wall-head h3 .cnt{font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:3px 8px;border-radius:999px}
.wall-head a{font-size:12.5px;color:var(--brand);font-weight:600;text-decoration:none}
.tabs{display:flex;gap:8px;margin:0 16px 13px;overflow-x:auto;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;
  background:var(--white);color:var(--ink-2);box-shadow:var(--shadow);cursor:pointer;transition:.15s;
}
.tab.on{background:linear-gradient(135deg,#FF8C5A,#FF6B35);color:#fff;box-shadow:var(--shadow-lg)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px}
.photo{
  position:relative;border-radius:13px;overflow:hidden;aspect-ratio:3/4;cursor:pointer;
  background:linear-gradient(150deg,#FFD9C7,#FFB99B);box-shadow:var(--shadow);transition:.2s;
}
.photo:nth-child(3n){background:linear-gradient(150deg,#CFE3FF,#A9C8F5)}
.photo:nth-child(3n+1){background:linear-gradient(150deg,#FFE7B3,#FFD184)}
.photo:nth-child(4n){background:linear-gradient(150deg,#D6F5E3,#A8E6C4)}
.photo:active{transform:scale(.98)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:40px;opacity:.55}
.photo .wm{
  position:absolute;bottom:8px;left:8px;right:8px;font-size:9px;color:rgba(255,255,255,.92);
  font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.45);letter-spacing:.5px;
}
.photo .badge-new{
  position:absolute;top:8px;left:8px;background:#FF3B5C;color:#fff;font-size:9.5px;font-weight:700;
  padding:3px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(255,59,92,.4);
}
.photo .chk{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);background:rgba(0,0,0,.14);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;
}
.photo.sel .chk{background:var(--brand);border-color:var(--brand)}
.photo.sel{outline:3px solid var(--brand);outline-offset:-3px}

/* ===== 底部结算条 ===== */
.paybar{
  position:absolute;bottom:0;left:0;right:0;z-index:40;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  padding:12px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -6px 24px rgba(20,30,50,.07);
}
.paybar .info{font-size:11.5px;color:var(--ink-3)}
.paybar .price{font-size:19px;font-weight:800;color:var(--brand);line-height:1.15}
.paybar .price small{font-size:12px;font-weight:600}
.paybar .price del{font-size:12px;color:var(--ink-3);font-weight:500;margin-left:5px}
.paybar button{
  border:none;border-radius:13px;padding:13px 26px;font-size:14.5px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#FF8C5A,#FF6B35);box-shadow:var(--shadow-lg);cursor:pointer;font-family:inherit;
}
.paybar button:active{transform:scale(.97)}

/* ===== 底部 TabBar ===== */
.tabbar{
  position:absolute;bottom:0;left:0;right:0;z-index:30;height:64px;
  background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-around;padding-bottom:6px;
}
.tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--ink-3);cursor:pointer}
.tb.on{color:var(--brand);font-weight:700}
.tb .ic{font-size:19px}

/* ===== 遮罩/弹层 ===== */
.mask{position:absolute;inset:0;background:rgba(15,20,30,.55);backdrop-filter:blur(3px);z-index:100;display:none}
.mask.show{display:block}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:101;background:#fff;
  border-radius:24px 24px 0 0;padding:20px 18px 26px;transform:translateY(100%);
  transition:transform .28s cubic-bezier(.3,1,.4,1);
}
.sheet.show{transform:translateY(0)}
.sheet-bar{width:38px;height:4px;border-radius:99px;background:#E3E7EC;margin:0 auto 16px}
.sheet h3{font-size:17px;font-weight:800;margin-bottom:4px}
.sheet .s-sub{font-size:12px;color:var(--ink-3);margin-bottom:16px}
.price-line{display:flex;justify-content:space-between;padding:11px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.price-line .k{color:var(--ink-2)}
.price-line .v{font-weight:700}
.price-line.total{border:none;padding-top:14px;font-size:15px}
.price-line.total .v{color:var(--brand);font-size:21px}
.free-tip{
  background:var(--brand-soft);border-radius:11px;padding:11px 13px;font-size:11.5px;color:#C24A18;
  line-height:1.6;margin:14px 0;display:flex;gap:8px;
}
.opt{display:flex;align-items:center;gap:11px;padding:13px;border:1.6px solid var(--line);border-radius:13px;margin-bottom:10px;cursor:pointer;transition:.15s}
.opt.on{border-color:var(--brand);background:var(--brand-soft)}
.opt .radio{width:19px;height:19px;border-radius:50%;border:2px solid #D5DBE3;flex-shrink:0;position:relative}
.opt.on .radio{border-color:var(--brand)}
.opt.on .radio::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--brand)}
.opt .o-main{flex:1}
.opt .o-main h4{font-size:13.5px;font-weight:700;margin-bottom:2px}
.opt .o-main p{font-size:11px;color:var(--ink-3)}
.success-ic{
  width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#4ADE80,#22C55E);
  display:flex;align-items:center;justify-content:center;font-size:32px;margin:6px auto 14px;
  box-shadow:0 10px 26px rgba(34,197,94,.32);
}
.skeleton{animation:sk 1.4s ease infinite}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.5}}
.loading{text-align:center;color:var(--ink-3);font-size:13px;padding:30px 0}