:root{
  --blue:#0066B3; --navy:#0B3C63; --deep:#082E4C;
  --ink:#1F2A37; --sub:#5A6B7C; --mute:#8A97A6;
  --line:#E3EAF2; --bg:#F4F7FA; --white:#fff; --orange:#E8890C;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:520px;margin:0 auto;background:var(--bg);min-height:100vh;padding-bottom:88px;}

/* 封面 */
.hero{background:linear-gradient(155deg,#0B3C63 0%,#0A3557 45%,#0066B3 100%);
  color:#fff;padding:28px 22px 30px;position:relative;overflow:hidden;}
.hero:after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.05);}
.brand{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:1.5px;opacity:.9;}
.brand i{display:block;width:22px;height:3px;background:#fff;border-radius:2px;opacity:.75;}
.hero h1{font-size:27px;line-height:1.35;margin:18px 0 0;font-weight:700;letter-spacing:.5px;}
.hero .who{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);}
.who-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;padding:3px 0;gap:14px;}
.who-row span:first-child{opacity:.65;flex:0 0 auto;}
.who-row span:last-child{font-weight:600;text-align:right;}
.stamp{display:inline-block;margin-top:16px;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 13px;font-size:12.5px;letter-spacing:.3px;}

/* 通用 */
section{padding:0 16px;margin-top:14px;}
.card{background:var(--white);border-radius:14px;padding:18px 18px 16px;box-shadow:0 1px 2px rgba(11,60,99,.04);}
h2{position:relative;padding-left:11px;font-size:15px;font-weight:700;color:var(--navy);line-height:20px;margin:0 0 14px;}
h2:before{content:"";position:absolute;left:0;top:3px;width:3px;height:14px;background:var(--blue);border-radius:2px;}
.hint{float:right;font-weight:400;font-size:12px;color:var(--mute);line-height:20px;}

/* 概要 */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.stat{background:#F7FAFD;border:1px solid var(--line);border-radius:11px;padding:13px 14px;}
.stat b{display:block;font-size:23px;color:var(--navy);font-weight:700;letter-spacing:-.5px;line-height:1.15;}
.stat b em{font-size:13px;font-style:normal;font-weight:600;margin-left:2px;color:var(--sub);}
.stat span{display:block;font-size:12.5px;color:var(--mute);margin-top:4px;}

/* 房间 */
.room{padding:13px 0;border-bottom:1px solid #F0F4F8;display:flex;align-items:flex-start;gap:12px;}
.room:last-child{border-bottom:none;padding-bottom:2px;}
.room-name{width:74px;font-weight:600;font-size:15px;color:var(--ink);}
.room-name small{display:block;font-weight:400;font-size:11.5px;color:var(--mute);margin-top:2px;}
.room-mid{flex:1;font-size:13px;color:var(--sub);line-height:1.55;}
.room-mid em{font-style:normal;color:var(--mute);}
.room-cap{width:78px;text-align:right;font-size:17px;font-weight:700;color:var(--blue);letter-spacing:-.3px;}
.room-cap small{display:block;font-size:11px;font-weight:400;color:var(--mute);letter-spacing:0;}

/* 依据 */
.why{display:flex;gap:11px;padding:9px 0;font-size:13.5px;line-height:1.65;color:var(--sub);}
.why .n{flex:0 0 20px;height:20px;border-radius:50%;background:#EEF4FA;color:var(--blue);
  font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px;}
.why b{color:var(--ink);font-weight:600;}

/* 费用 */
.fee{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14px;gap:12px;}
.fee .k{color:var(--sub);}
.fee .v{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
.fee .v i{font-style:normal;color:var(--mute);font-weight:400;font-size:12px;margin-right:5px;}
.fee-sub{display:flex;justify-content:space-between;padding:11px 0 3px;margin-top:5px;
  border-top:1px dashed var(--line);font-size:13.5px;color:var(--navy);font-weight:700;}
.fee-sub .v{font-variant-numeric:tabular-nums;}
.group-label{font-size:12px;color:var(--mute);margin:12px 0 2px;letter-spacing:.5px;}
.group-label:first-of-type{margin-top:0;}
.inc{font-size:13px;color:var(--sub);line-height:1.75;background:#F7FAFD;border-radius:9px;padding:11px 13px;margin-top:12px;}
.inc b{color:var(--navy);}

/* 有效期 */
.valid{background:#FFF8EC;border:1px solid #F3DFC2;border-radius:12px;padding:14px 16px;font-size:13.5px;color:#8A4A0A;line-height:1.7;}
.valid b{color:#B4540A;}

/* 门店 */
.shop{font-size:13.5px;color:var(--sub);line-height:1.85;}
.shop b{color:var(--ink);}
.mini{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--blue);background:#EEF4FA;border-radius:8px;padding:7px 12px;}

.foot{text-align:center;font-size:11.5px;color:#A8B4C2;padding:22px 20px 26px;line-height:1.7;}

/* 底栏 */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:9;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
.bar-in{max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px;}
.bar .price{flex:1;line-height:1.25;}
.bar .price small{display:block;font-size:11px;color:var(--mute);}
.bar .price b{font-size:23px;color:var(--navy);letter-spacing:-.6px;font-variant-numeric:tabular-nums;}
.bar .price b i{font-style:normal;font-size:14px;font-weight:600;margin-right:1px;}
.bar a{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:#fff;
  text-decoration:none;height:46px;padding:0 22px;border-radius:23px;font-size:15px;font-weight:600;
  box-shadow:0 4px 12px rgba(0,102,179,.25);white-space:nowrap;}

/* 状态页 */
.state{padding:0;}
.state .top{background:linear-gradient(155deg,#0B3C63 0%,#0A3557 45%,#0066B3 100%);color:#fff;padding:26px 22px 30px;}
.state .body{padding:26px 18px 40px;}
.state .icon{width:56px;height:56px;border-radius:16px;background:#EEF4FA;display:flex;
  align-items:center;justify-content:center;font-size:26px;margin-bottom:18px;}
.state h1{font-size:23px;line-height:1.4;margin:0 0 10px;color:var(--navy);font-weight:700;}
.state p{font-size:14.5px;color:var(--sub);line-height:1.8;margin:0 0 12px;}
.state .row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--sub);gap:12px;}
.state .row b{color:var(--ink);font-weight:600;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;height:50px;
  border-radius:25px;background:var(--blue);color:#fff;text-decoration:none;font-size:16px;font-weight:600;
  box-shadow:0 4px 14px rgba(0,102,179,.28);}
.btn2{display:flex;align-items:center;justify-content:center;margin-top:12px;height:46px;border-radius:23px;
  border:1px solid var(--line);color:var(--sub);text-decoration:none;font-size:13.5px;background:#fff;}

/* 骨架屏 */
.sk{background:#fff;border-radius:14px;margin:14px 16px;padding:18px;}
.sk i{display:block;height:12px;border-radius:6px;background:#EDF2F7;margin:9px 0;
  animation:sk 1.2s ease-in-out infinite;}
.sk i:nth-child(1){width:42%;height:18px;}
.sk i:nth-child(2){width:88%;}
.sk i:nth-child(3){width:70%;}
@keyframes sk{0%,100%{opacity:1}50%{opacity:.45}}