/* ================================================================
   H5 移动端样式 · 营销活动版
   主题: 喜庆红金渐变 / 白卡片 / 转盘灯珠动效
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #333; font-size: 15px; min-height: 100vh;
    background:
        radial-gradient(120% 60% at 50% 0%, #ff7a45 0%, rgba(255,122,69,0) 60%),
        linear-gradient(180deg, #e0334b 0%, #c01f3f 45%, #a01338 100%);
    background-attachment: fixed;
}
.h5-page { max-width: 480px; margin: 0 auto; padding: 0 14px 46px; }

/* ---------- 顶部 ---------- */
.h5-hero { text-align: center; padding: 26px 0 10px; color: #fff; position: relative; }
.h5-hero .deco { position: absolute; font-size: 26px; opacity: .5; animation: floaty 3s ease-in-out infinite; }
.h5-hero .deco.d1 { left: 4px; top: 30px; }
.h5-hero .deco.d2 { right: 6px; top: 52px; animation-delay: 1.2s; }
.h5-hero .deco.d3 { left: 30px; top: 96px; animation-delay: 2s; font-size: 18px; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.h5-hero h1 {
    font-size: 26px; letter-spacing: 2px; font-weight: 800;
    background: linear-gradient(180deg, #fff8e0 20%, #ffd977 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 2px 12px rgba(120,10,30,.35);
    filter: drop-shadow(0 1px 0 rgba(150,30,20,.4));
}
.h5-hero .sub {
    display: inline-block; margin-top: 8px; font-size: 12.5px; color: #ffe9c9;
    background: rgba(120,10,30,.28); border: 1px solid rgba(255,220,160,.35);
    padding: 4px 14px; border-radius: 20px;
}

/* ---------- 中奖播报 ---------- */
.ticker {
    display: flex; align-items: center; gap: 8px;
    background: rgba(90,8,26,.45); border: 1px solid rgba(255,210,140,.25);
    border-radius: 24px; padding: 7px 14px; margin-top: 14px; color: #ffe9c9; font-size: 12.5px;
    overflow: hidden; height: 32px;
}
.ticker .horn { flex-shrink: 0; }
.ticker .msg { flex: 1; white-space: nowrap; overflow: hidden; }
.ticker .msg span { display: inline-block; animation: tickerIn .45s ease; }
@keyframes tickerIn { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ---------- 通用卡片 ---------- */
.card {
    background: #fff; border-radius: 18px; padding: 18px; margin-top: 14px;
    box-shadow: 0 6px 24px rgba(110,10,35,.25);
}
.card-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 15.5px; font-weight: 700; color: #8a1f2e; margin-bottom: 12px;
}
.card-title::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: linear-gradient(180deg,#ff7a45,#e0334b); }

/* ---------- 验真结果 ---------- */
.result-icon {
    width: 76px; height: 76px; margin: 6px auto 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 38px;
    animation: pop .45s cubic-bezier(.2,1.6,.4,1);
}
.result-icon.ok  { background: radial-gradient(circle at 30% 30%, #d1f4e2, #a8ecc8); box-shadow: 0 0 0 8px rgba(42,180,110,.12); }
.result-icon.warn{ background: radial-gradient(circle at 30% 30%, #ffefc7, #ffe1a0); box-shadow: 0 0 0 8px rgba(240,170,50,.14); }
.result-icon.bad { background: radial-gradient(circle at 30% 30%, #ffd9dc, #ffb9be); box-shadow: 0 0 0 8px rgba(220,60,70,.12); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.result-title { text-align: center; font-size: 20px; font-weight: 800; margin-top: 12px; }
.result-title.ok { color: #1d9e63; }
.result-title.warn { color: #d98a1f; }
.result-title.bad { color: #d23c47; }
.result-msg { text-align: center; color: #936; font-size: 13px; margin-top: 8px; line-height: 1.7; color: #9a5560; }

.product {
    display: flex; gap: 12px; align-items: center; margin-top: 16px;
    background: #fff8f2; border: 1px dashed #f5c9a8; border-radius: 14px; padding: 12px;
}
.product .thumb {
    width: 62px; height: 62px; border-radius: 12px; background: linear-gradient(135deg,#ffe9d2,#ffd7c2);
    display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; overflow: hidden;
}
.product .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product .info { flex: 1; min-width: 0; }
.product .info .name { font-weight: 700; font-size: 15px; color: #6b2432; }
.product .info .sku { color: #bd8f96; font-size: 12px; margin-top: 3px; }
.product .info .desc { color: #a87c84; font-size: 12px; margin-top: 3px; }

/* ---------- 活动横幅 ---------- */
.activity-banner {
    border-radius: 16px; padding: 15px 16px; margin-top: 14px; color: #fff;
    background: linear-gradient(120deg, #ff9a3d, #ff4d5e 70%, #e0334b);
    box-shadow: 0 6px 18px rgba(220,60,60,.35);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: relative; overflow: hidden;
}
.activity-banner::after {
    content: ""; position: absolute; right: -22px; top: -22px; width: 90px; height: 90px;
    background: rgba(255,255,255,.14); border-radius: 50%;
}
.activity-banner .t { font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(150,20,20,.3); }
.activity-banner .d { font-size: 12px; opacity: .92; margin-top: 4px; }
.activity-banner .go {
    flex-shrink: 0; background: linear-gradient(180deg,#fff8e0,#ffdf8e); color: #c2233b;
    font-weight: 800; border-radius: 20px; padding: 9px 16px; font-size: 13.5px; cursor: pointer;
    box-shadow: 0 3px 8px rgba(150,20,30,.3); position: relative; z-index: 1;
}
.activity-banner .go:active { transform: scale(.96); }
.activity-banner.gray { background: linear-gradient(120deg,#b7b2ad,#8f8a86); box-shadow: none; }

/* ---------- 转盘 ---------- */
.wheel-stage { text-align: center; padding: 6px 0 2px; }
.wheel-box { position: relative; width: 292px; height: 292px; margin: 12px auto 0; }
.wheel-ring {
    position: absolute; inset: -12px; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 42%, #ffd76e 0%, #ff9d3c 55%, #f4633a 100%);
    box-shadow: 0 10px 26px rgba(160,20,40,.4), inset 0 0 0 4px rgba(255,255,255,.55);
}
.wheel {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
    border: 6px solid #fff3d8;
    transition: transform 4.2s cubic-bezier(.12,.8,.16,1);
    box-shadow: inset 0 0 24px rgba(200,90,30,.18);
}
.wheel .sec {
    position: absolute; left: 50%; top: 0; width: 0; height: 50%;
    transform-origin: 50% 100%;
}
.wheel .sec .txt {
    position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
    width: 76px; text-align: center; font-size: 12.5px; font-weight: 700; color: #b34715;
    line-height: 1.25; word-break: break-all;
}
.wheel .sec .txt .em { display: block; font-size: 20px; margin-bottom: 2px; }
.wheel-lights i {
    position: absolute; width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffdf4, #ffe27a);
    box-shadow: 0 0 6px rgba(255,220,120,.9); z-index: 3;
}
.wheel-lights i.off { background: radial-gradient(circle at 35% 35%, #ffe9b0, #f7b95c); box-shadow: none; }
.wheel-btn {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 88px; height: 88px; border-radius: 50%; z-index: 5; cursor: pointer;
    background: radial-gradient(circle at 32% 28%, #ff7c5a, #f0233f 68%, #d01332);
    border: 5px solid #fff3d8; color: #fff; font-size: 21px; font-weight: 800; letter-spacing: 2px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(180,20,40,.45), inset 0 -4px 8px rgba(120,0,20,.3);
    text-shadow: 0 1px 2px rgba(120,0,20,.4);
    animation: breath 1.6s ease-in-out infinite;
}
.wheel-btn::after {
    content: ""; position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
    border: 9px solid transparent; border-top: 15px solid #fff3d8; filter: drop-shadow(0 2px 1px rgba(150,30,20,.3));
}
.wheel-btn:active { transform: translate(-50%, -50%) scale(.94); }
.wheel-btn[disabled] { background: radial-gradient(circle at 32% 28%, #d9b4a8, #b78d80); animation: none; cursor: default; }
@keyframes breath { 0%,100% { box-shadow: 0 6px 16px rgba(180,20,40,.45), 0 0 0 0 rgba(255,120,80,.5), inset 0 -4px 8px rgba(120,0,20,.3);} 50% { box-shadow: 0 6px 16px rgba(180,20,40,.45), 0 0 0 12px rgba(255,120,80,0), inset 0 -4px 8px rgba(120,0,20,.3);} }
.wheel-tip { color: #c98a94; font-size: 12px; margin-top: 14px; }
.wheel-count { display: inline-block; margin-top: 8px; font-size: 12px; color: #fff; background: rgba(224,51,75,.85); border-radius: 14px; padding: 3px 12px; }

/* ---------- 奖品墙 ---------- */
.prize-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.prize-cell {
    background: linear-gradient(160deg, #fff6ea, #ffedd8); border: 1px solid #ffdcb2;
    border-radius: 12px; padding: 10px 4px; text-align: center;
}
.prize-cell .em { font-size: 24px; }
.prize-cell .nm { font-size: 11.5px; color: #a05a2a; margin-top: 4px; line-height: 1.3; }

/* ---------- 活动规则 ---------- */
.rules { color: #9a5560; font-size: 12.5px; line-height: 2; }
.rules b { color: #c2233b; }

/* ---------- 奖品列表(我的奖品) ---------- */
.prize-item { display: flex; gap: 12px; padding: 13px 2px; border-bottom: 1px dashed #ffd9c2; align-items: flex-start; }
.prize-item:last-child { border-bottom: none; }
.prize-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 23px;
    background: linear-gradient(150deg,#fff1de,#ffdfc0);
}
.prize-icon.blue { background: linear-gradient(150deg,#e8efff,#d3e0ff); }
.prize-icon.green { background: linear-gradient(150deg,#e2f8ec,#c9f0da); }
.prize-icon.red { background: linear-gradient(150deg,#ffe3e0,#ffc9c5); }
.prize-main { flex: 1; min-width: 0; }
.prize-main .t { font-weight: 700; font-size: 14.5px; color: #6b2432; }
.prize-main .d { color: #a87c84; font-size: 12.5px; margin-top: 3px; word-break: break-all; }
.prize-main .d b { color: #e0334b; }
.prize-time { color: #d3a9ae; font-size: 11px; margin-top: 4px; }
.tag { display: inline-block; font-size: 11px; border-radius: 5px; padding: 1.5px 7px; margin-left: 6px; vertical-align: 1.5px; font-weight: 600; }
.tag.ok { background: #e2f8ec; color: #1d9e63; }
.tag.warn { background: #ffefc7; color: #d98a1f; }
.tag.err { background: #ffdfe1; color: #d23c47; }
.tag.gray { background: #f3edee; color: #b18f94; }

/* ---------- 底部导航 ---------- */
.h5-tabs {
    display: flex; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    border-radius: 14px; margin-top: 16px; overflow: hidden; backdrop-filter: blur(4px);
}
.h5-tabs a, .h5-tabs span { flex: 1; text-align: center; padding: 12px; color: #ffe9c9; font-size: 14px; font-weight: 600; cursor: pointer; }
.h5-tabs a.on, .h5-tabs span.on { color: #fff; background: rgba(255,255,255,.16); }

/* ---------- 用户头部(我的奖品) ---------- */
.me-head { display: flex; align-items: center; gap: 13px; padding: 24px 4px 4px; color: #fff; }
.me-head .avatar {
    width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(150deg,#ffd76e,#ff9d3c);
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    border: 3px solid rgba(255,255,255,.6); flex-shrink: 0;
}
.me-head .nick { font-size: 17px; font-weight: 700; }
.me-head .sub2 { font-size: 12px; color: #ffe9c9; margin-top: 3px; }

/* ---------- 地址弹窗 ---------- */
.mask {
    position: fixed; inset: 0; background: rgba(60,5,20,.62); z-index: 50;
    display: none; align-items: center; justify-content: center; padding: 24px;
}
.mask.show { display: flex; }
.mask .box {
    background: #fff; border-radius: 18px; width: 100%; max-width: 320px; padding: 22px 20px;
    animation: pop .3s cubic-bezier(.2,1.4,.4,1);
}
.mask .box .t { font-weight: 800; font-size: 16.5px; text-align: center; color: #8a1f2e; }
.mask .box .emoji { font-size: 48px; margin-top: 4px; }
.mask .box .d { color: #a87c84; font-size: 13px; margin-top: 8px; line-height: 1.7; word-break: break-all; }
.addr-form label { display: block; color: #b18f94; font-size: 12.5px; margin: 12px 0 5px; }
.addr-form input, .addr-form textarea {
    width: 100%; border: 1.5px solid #ffe0cd; border-radius: 10px; padding: 10px 12px; font-size: 14px;
    font-family: inherit; outline: none; background: #fffaf6;
}
.addr-form input:focus, .addr-form textarea:focus { border-color: #e0334b; background: #fff; }

/* ---------- 主按钮 ---------- */
.btn {
    display: block; width: 100%; padding: 13px; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #ff9a3d, #f0233f); color: #fff; font-size: 16px; font-weight: 700;
    cursor: pointer; font-family: inherit; margin-top: 16px; letter-spacing: 1px;
    box-shadow: 0 5px 14px rgba(220,50,70,.4);
}
.btn:active { transform: scale(.98); }
.btn[disabled] { background: #d9c3c6; box-shadow: none; }
.btn.plain { background: #fff; color: #c2233b; border: 1.5px solid #ffcdc5; box-shadow: none; }

/* ---------- 其他 ---------- */
.empty { text-align: center; color: #d3a9ae; padding: 34px 0; font-size: 13.5px; }
.empty .big { font-size: 40px; display: block; margin-bottom: 8px; }
.loading { text-align: center; color: #e8b9be; padding: 40px 0; font-size: 13px; }

.toast {
    position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
    background: rgba(50,8,18,.92); color: #ffe9c9; padding: 10px 22px; border-radius: 22px;
    font-size: 13.5px; z-index: 999; display: none; max-width: 86%; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ---------- 相机扫码页 ---------- */
.scan-video-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #1a0a12; aspect-ratio: 1 / 1; }
.scan-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame {
    position: absolute; left: 50%; top: 50%; width: 62%; height: 62%;
    transform: translate(-50%, -50%); border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 2000px rgba(20,4,10,.45);
    border: 2px solid rgba(255,220,150,.9);
}
.scan-frame::before, .scan-frame::after,
.scan-frame i::before, .scan-frame i::after {
    content: ""; position: absolute; width: 26px; height: 26px;
    border: 4px solid #ffd76e;
}
.scan-frame::before { left: -2px; top: -2px; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.scan-frame::after { right: -2px; top: -2px; border-left: none; border-bottom: none; border-radius: 0 10px 0 0; }
.scan-frame i::before { left: -2px; bottom: -2px; border-right: none; border-top: none; border-radius: 0 0 0 10px; }
.scan-frame i::after { right: -2px; bottom: -2px; border-left: none; border-top: none; border-radius: 0 0 10px 0; }
.scan-line {
    position: absolute; left: 12%; right: 12%; top: 20%; height: 2px;
    background: linear-gradient(90deg, transparent, #ffd76e, transparent);
    animation: scanmove 2.2s ease-in-out infinite; display: none;
}
.scan-video-wrap.on .scan-line { display: block; }
@keyframes scanmove { 0%,100% { top: 20%; } 50% { top: 78%; } }
.scan-status { text-align: center; color: #b18f94; font-size: 13px; margin-top: 12px; line-height: 1.7; }
.scan-status b { color: #e0334b; }