/* 宣城有奖问卷 · 用户端 H5（绿主色 #0b8f6a / 抽奖红 #c03428 / 480px 卡片风） */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body { font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; background:#dfe7ee; color:#1c2b36; font-size:15px; }
.phone { max-width:480px; min-height:100vh; margin:0 auto; background:#eef3f7; position:relative; box-shadow:0 0 40px rgba(20,40,60,.18); }
.screen { display:none; min-height:100vh; padding-bottom:34px; }
.screen.on { display:block; }
b { color:inherit; }
.muted { color:#8a99a6; }

/* ===== 顶部头 ===== */
.hd { background:linear-gradient(150deg,#0b8f6a,#0a6e55); color:#fff; padding:22px 18px 54px; position:relative; }
.hd .org { font-size:12px; opacity:.85; letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.hd h1 { font-size:21px; margin-top:9px; line-height:1.35; }
.hd .sub { font-size:12.5px; margin-top:7px; opacity:.85; }
.hd .lottie { position:absolute; right:14px; bottom:-26px; font-size:46px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.hd.red { background:linear-gradient(150deg,#e0483e,#c03428); }
.hd.red .lottie { bottom:16px; }
.hd.red ~ .body-pad, .red-pad { margin-top:-16px; }

.body-pad { padding:0 14px; }

/* ===== 卡片 ===== */
.card { background:#fff; border-radius:14px; padding:16px; margin-top:12px; box-shadow:0 2px 10px rgba(24,48,66,.06); }
.card h3 { font-size:15.5px; color:#0b6b52; margin-bottom:9px; display:flex; align-items:center; gap:6px; }
.card h3::before { content:''; width:4px; height:15px; border-radius:2px; background:#0b8f6a; display:inline-block; }
.card p { font-size:13.5px; line-height:1.75; color:#41535f; }
.kv { display:grid; grid-template-columns:86px 1fr; gap:7px 10px; font-size:13.5px; align-items:baseline; }
.kv .k { color:#8a99a6; }
.kv .v { color:#22384c; word-break:break-all; }

/* ===== 加载 ===== */
.loading-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7d8b96; font-size:13.5px; gap:12px; }
.spinner { width:34px; height:34px; border-radius:50%; border:3px solid #cfe0da; border-top-color:#0b8f6a; animation:rot .9s linear infinite; }
@keyframes rot { to { transform:rotate(360deg); } }

/* ===== 状态闸门 ===== */
.gate { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 30px; }
.gate .em { font-size:74px; margin-bottom:18px; }
.gate h2 { font-size:19px; margin-bottom:10px; }
.gate p { font-size:13.5px; color:#7d8b96; line-height:1.8; margin-bottom:6px; }

/* ===== 按钮 ===== */
.btn { display:block; width:100%; border:none; border-radius:12px; padding:14px; font-size:16px; font-weight:600; cursor:pointer; text-align:center; }
.btn:active { transform:scale(.985); }
.btn-pri { background:linear-gradient(135deg,#0fa578,#0b7a5c); color:#fff; box-shadow:0 6px 16px rgba(11,143,106,.32); }
.btn-red { background:linear-gradient(135deg,#ef5350,#d32f2f); color:#fff; box-shadow:0 6px 16px rgba(211,47,47,.3); }
.btn-ghost { background:#fff; color:#0b7a5c; border:1px solid #bfe3d6; }
.btn-dis { background:#cfd8de !important; color:#fff !important; box-shadow:none !important; }
.btn-sm { width:auto; padding:8px 16px; font-size:13.5px; border-radius:9px; }

/* ===== 答题 ===== */
.progress-wrap { position:sticky; top:0; z-index:9; background:rgba(238,243,247,.96); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:10px 14px; border-bottom:1px solid #e2e9ef; }
.progress-line { height:6px; background:#dde6ed; border-radius:3px; overflow:hidden; }
.progress-line i { display:block; height:100%; width:0; background:linear-gradient(90deg,#0fa578,#0b8f6a); border-radius:3px; transition:width .3s; }
.progress-txt { font-size:12px; color:#7d8b96; margin-top:5px; display:flex; justify-content:space-between; }
.info-sec { background:#fff; border-radius:14px; padding:16px; margin-top:12px; box-shadow:0 2px 10px rgba(24,48,66,.06); }
.info-sec h3 { font-size:15px; color:#0b6b52; margin-bottom:4px; }
.info-sec .tip { font-size:12px; color:#a03c2e; background:#fdf3f0; border-radius:8px; padding:7px 10px; margin-top:8px; line-height:1.6; }
.frow { margin-top:13px; }
.frow label { font-size:13.5px; color:#41535f; display:block; margin-bottom:6px; }
.frow label em { color:#d84a3d; font-style:normal; margin-left:2px; }
.inp, select.inp { width:100%; height:44px; border:1px solid #d6e0e8; border-radius:10px; padding:0 13px; font-size:15px; background:#fff; color:#1c2b36; appearance:none; -webkit-appearance:none; }
select.inp { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2399a8b3' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.inp:focus { outline:none; border-color:#0b8f6a; box-shadow:0 0 0 3px rgba(11,143,106,.12); }
.frow.err .inp { border-color:#e05a4d; background:#fef7f6; }
.frow .emsg { display:none; font-size:12px; color:#d84a3d; margin-top:5px; }
.frow.err .emsg { display:block; }

.qcard { background:#fff; border-radius:14px; padding:16px; margin-top:12px; box-shadow:0 2px 10px rgba(24,48,66,.06); }
.qcard .sec { font-size:12px; color:#0b8f6a; background:#edf7f3; border-radius:6px; padding:3px 8px; display:inline-block; margin-bottom:9px; }
.qcard .qt { font-size:14.5px; line-height:1.65; color:#22384c; }
.qcard .qt .no { color:#0b8f6a; font-weight:700; margin-right:4px; }
.qcard.err .qt { color:#c0392b; }
.opts { margin-top:11px; display:grid; gap:8px; }
.opt { display:flex; align-items:flex-start; gap:9px; border:1px solid #dde5eb; border-radius:10px; padding:11px 12px; font-size:14px; line-height:1.5; cursor:pointer; transition:all .15s; }
.opt .tag { flex:none; width:22px; height:22px; border-radius:50%; border:1px solid #c2cfd8; color:#7d8b96; font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.opt.on { border-color:#0b8f6a; background:#f0faf6; color:#0b5d47; font-weight:600; }
.opt.on .tag { background:#0b8f6a; border-color:#0b8f6a; color:#fff; }
.qcard.err .opt { border-color:#f0c7c2; }
.ta { width:100%; min-height:88px; border:1px solid #d6e0e8; border-radius:10px; padding:11px 13px; font-size:14.5px; line-height:1.6; resize:vertical; font-family:inherit; margin-top:11px; }
.ta:focus { outline:none; border-color:#0b8f6a; box-shadow:0 0 0 3px rgba(11,143,106,.12); }
.submit-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(to top,#eef3f7 70%,transparent); z-index:9; }

/* ===== 过渡页 ===== */
.transit { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 34px; }
.transit .ok { width:74px; height:74px; border-radius:50%; background:#0b8f6a; color:#fff; font-size:38px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(11,143,106,.35); animation:pop .45s ease; }
@keyframes pop { 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.12)} 100%{transform:scale(1)} }
.transit h2 { margin:18px 0 8px; font-size:19px; }
.transit p { font-size:13.5px; color:#7d8b96; line-height:1.8; }
.transit .sec { font-size:30px; font-weight:700; color:#0b8f6a; margin-top:14px; font-variant-numeric:tabular-nums; }

/* ===== 抽奖大转盘 ===== */
.draw-hd { background:linear-gradient(150deg,#b8860b,#8a6508); color:#fff; padding:22px 18px 26px; text-align:center; }
.draw-hd h1 { font-size:20px; font-weight:800; letter-spacing:1px; }
.draw-hd .draw-time { font-size:12.5px; opacity:.9; margin-top:6px; }
.lucky { background:#fff; border-radius:16px; padding:18px 14px 14px; margin-top:-14px; box-shadow:0 6px 18px rgba(139,101,8,.18); position:relative; z-index:2; }
.wheel-wrap { position:relative; width:280px; height:280px; margin:0 auto; }
.wheel {
  width:100%; height:100%; border-radius:50%; position:relative;
  background: conic-gradient(
    #e0483e 0deg 60deg,
    #fdf6e3 60deg 120deg,
    #f5a623 120deg 180deg,
    #fdf6e3 180deg 240deg,
    #2fa96a 240deg 300deg,
    #fdf6e3 300deg 360deg
  );
  transition: transform 4s cubic-bezier(.17,.67,.16,1);
  box-shadow: 0 0 0 6px #fff, 0 0 0 9px #b8860b, 0 8px 22px rgba(0,0,0,.25);
}
.wheel .sec {
  position:absolute; left:50%; top:0; width:0; height:50%;
  transform-origin: bottom center;
  display:flex; flex-direction:column; align-items:center;
  padding-top:22px; font-size:12px; font-weight:700; color:#5a3a00;
  pointer-events:none; white-space:nowrap;
}
.wheel .sec .em { font-size:18px; margin-bottom:1px; }
.wheel .sec small { font-size:10px; font-weight:500; opacity:.8; }
.wheel .sec:nth-child(1) { transform: rotate(30deg); }
.wheel .sec:nth-child(2) { transform: rotate(90deg); color:#8a6508; }
.wheel .sec:nth-child(3) { transform: rotate(150deg); }
.wheel .sec:nth-child(4) { transform: rotate(210deg); color:#8a6508; }
.wheel .sec:nth-child(4) span { transform: rotate(180deg); }
.wheel .sec:nth-child(5) { transform: rotate(270deg); color:#fff; }
.wheel .sec:nth-child(6) { transform: rotate(330deg); color:#8a6508; }
.wheel .sec:nth-child(6) span { transform: rotate(180deg); }
.pointer {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:5;
  border-left:15px solid transparent;
  border-right:15px solid transparent;
  border-top:30px solid #b8860b;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.pointer::after {
  content:''; position:absolute; top:-30px; left:-7px;
  width:14px; height:14px; border-radius:50%; background:#b8860b;
}
.wheel-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%; border:none; z-index:4;
  background:linear-gradient(160deg,#ffd469,#b8860b);
  color:#5a3a00; font-size:17px; font-weight:800; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 -3px 0 rgba(0,0,0,.15);
}
.wheel-btn:active { transform:translate(-50%,-50%) scale(.96); }
.wheel-btn.going { filter:grayscale(.4); cursor:wait; }
.draw-meta { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:13px; color:#5a3a00; }
.draw-meta b { color:#b8860b; }
.prize-list { margin-top:14px; display:flex; flex-direction:column; gap:10px; }
.prize-item { background:#fff; border-radius:12px; padding:12px 14px; display:flex; align-items:center; gap:12px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.prize-item .badge { flex:0 0 56px; height:56px; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; text-align:center; line-height:1.2; }
.prize-item .badge.t1 { background:linear-gradient(135deg,#e0483e,#c03428); }
.prize-item .badge.t2 { background:linear-gradient(135deg,#f5a623,#d4880f); }
.prize-item .badge.t3 { background:linear-gradient(135deg,#2fa96a,#1a7f4b); }
.prize-item .info { flex:1; }
.prize-item .info .n { font-size:14.5px; font-weight:700; color:#22384c; }
.prize-item .info .d { font-size:12px; color:#8a99a6; margin-top:3px; }
.prize-item .remain { font-size:13px; font-weight:700; color:#b8860b; white-space:nowrap; }

/* ===== 中奖凭证 ===== */
.voucher { background:linear-gradient(160deg,#fff,#fdf6ec); border-radius:16px; margin-top:12px; padding:2px; box-shadow:0 10px 26px rgba(150,60,30,.22); overflow:hidden; }
.vc-top { background:linear-gradient(135deg,#e0483e,#b83a2e); color:#fff; padding:18px 16px 14px; position:relative; }
.vc-top .st { position:absolute; top:14px; right:14px; }
.vc-badge { background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.45); border-radius:999px; padding:3px 10px; font-size:11.5px; }
.vc-badge.green { background:#e7f7ef; border-color:#9bd9bc; color:#0b7a52; }
.vc-badge.gray { background:#eef1f4; border-color:#d4dde3; color:#7d8b96; }
.vc-top h2 { font-size:19px; }
.vc-top .pz { font-size:13px; margin-top:5px; opacity:.92; }
.vc-mid { padding:14px 16px 6px; }
.vc-no { text-align:center; background:#fff; border:1.5px dashed #e3b58f; border-radius:11px; padding:10px; margin-bottom:12px; }
.vc-no small { display:block; font-size:11px; color:#b08a68; letter-spacing:2px; }
.vc-no b { font-size:21px; letter-spacing:2.5px; color:#8a4b2a; font-family:Consolas,Menlo,monospace; }
.vc-foot { border-top:1px dashed #ecd9c6; padding:12px 16px 14px; }
.vc-foot p { font-size:12px; color:#9a7a5e; line-height:1.7; }
.mod-tip { background:#fdf1f0; border:1px solid #f2cdc9; color:#b34436; border-radius:10px; padding:9px 12px; font-size:12.5px; line-height:1.65; margin-top:12px; }

/* ===== 弹层 ===== */
.mask { position:fixed; inset:0; background:rgba(15,30,42,.55); display:none; align-items:center; justify-content:center; z-index:99; padding:22px; }
.mask.on { display:flex; }
.sheet { background:#fff; border-radius:16px; width:100%; max-width:340px; padding:20px 18px; animation:up .22s ease; max-height:84vh; overflow:auto; }
@keyframes up { from{transform:translateY(26px);opacity:0} to{transform:translateY(0);opacity:1} }
.sheet h3 { text-align:center; font-size:16.5px; margin-bottom:12px; }
.sheet .big { text-align:center; font-size:52px; margin:4px 0 8px; }
.sheet .msg { text-align:center; font-size:13.5px; color:#7d8b96; line-height:1.75; margin-bottom:14px; }
.sheet .win-title { text-align:center; font-size:21px; color:#d84338; font-weight:800; margin-bottom:2px; }
.sheet .win-pz { text-align:center; font-size:13.5px; color:#8a5b3c; margin-bottom:12px; }
.btn-row { display:flex; gap:10px; margin-top:14px; }
.btn-row .btn { flex:1; padding:12px; font-size:14.5px; }

/* ===== toast ===== */
.toast { position:fixed; top:16%; left:50%; transform:translateX(-50%) translateY(-8px); background:rgba(28,43,54,.92); color:#fff; padding:10px 18px; border-radius:10px; font-size:13.5px; z-index:120; opacity:0; pointer-events:none; transition:all .25s; max-width:80%; text-align:center; line-height:1.5; }
.toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== 其他 ===== */
.act-strip { display:flex; gap:8px; margin-top:12px; }
.act-strip .it { flex:1; background:#fff; border-radius:12px; padding:11px 6px; text-align:center; box-shadow:0 2px 8px rgba(24,48,66,.06); }
.act-strip .it .em { font-size:22px; }
.act-strip .it .t { font-size:11px; color:#7d8b96; margin-top:3px; }
.act-strip .it .n { font-size:12.5px; color:#22384c; font-weight:600; }
.link-look { text-align:center; margin-top:14px; }
.link-look a { color:#0b7a5c; font-size:13.5px; text-decoration:none; border-bottom:1px dashed #0b7a5c; padding-bottom:1px; }