/* ===== 黑胶礼品卡站 · 样式 ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:#f5f6f7;font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;color:#1a1a1a}
img{display:block;max-width:100%}
button{font-family:inherit;border:0;cursor:pointer}

/* boot */
.boot{height:100%;display:flex;align-items:center;justify-content:center}
.boot-spinner{width:56px;height:56px;background:#e60026;border-radius:10px;animation:sp 1.8s cubic-bezier(.75,0,.5,1) infinite}
@keyframes sp{50%{border-radius:50%;transform:scale(.5) rotate(360deg)}100%{transform:scale(1) rotate(720deg)}}

/* 布局 */
.wrap{max-width:520px;margin:0 auto;min-height:100%;background:#fff;position:relative;overflow-x:hidden}
.pad{padding:10px 12px}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.center{justify-content:center}
.grow{flex:1}
.gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* 顶部条 */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(90deg,#e60026,#ff4d6d);color:#fff}
.topbar .t{font-size:16px;font-weight:700}
.topbar .s{font-size:11px;opacity:.85}

/* 卡片：礼包 */
.card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:1px solid #f0f0f0;overflow:hidden}
.card-head{padding:14px 10px;display:flex;align-items:center;justify-content:center}
.card-head.b7{background:#252527}.card-head.b1{background:#6b7280}.card-head.b15{background:#1e3a8a}
.card-head.b30{background:#7c3aed}.card-head.b258{background:#e60026}.card-head.b7d{background:#e60026}
.logo-box{width:56px;height:56px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#e60026;font-size:18px}
.card-body{padding:8px 10px 10px}
.card-title{font-size:13px;font-weight:700;line-height:1.35;height:2.7em;overflow:hidden;color:#111}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:6px 0 8px}
.days{color:#e60026;font-weight:800;font-size:15px}
.used{color:#e60026;font-size:11px}
.btn-claim{display:block;width:100%;padding:8px 0;border-radius:999px;background:linear-gradient(90deg,#ef4444,#ec4899);color:#fff;font-weight:700;font-size:13px;transition:.15s}
.btn-claim:active{transform:scale(.96)}

/* 刷新按钮 */
.btn-refresh{display:inline-flex;align-items:center;gap:6px;padding:11px 26px;border-radius:999px;background:linear-gradient(90deg,#7c3aed,#6d28d9);color:#fff;font-weight:700;font-size:15px;box-shadow:0 6px 14px rgba(124,58,237,.28)}
.btn-refresh:active{transform:translateY(1px)}
.btn-refresh[disabled]{background:#c7c7cc;box-shadow:none}
.spin{display:inline-block;animation:rt 1s linear infinite}
@keyframes rt{to{transform:rotate(360deg)}}

/* 等待页 */
.wait{min-height:100vh;background:#22343C;color:#fff;display:flex;flex-direction:column;align-items:flex-start;padding:16px 14px}
.wait .brand{font-size:34px;font-weight:800;letter-spacing:2px}
.wait .line{font-size:17px;font-weight:700;line-height:1.6}
.wait .sec{color:#ffd166;font-weight:800}
.wait-btn{margin-top:14px;width:100%;padding:11px 14px;background:#40DF9F;color:#0b2b22;font-weight:800;border-radius:24px;text-align:center;font-size:16px;box-shadow:0 4px 8px rgba(15,218,137,.3)}
.wait-qr{margin:14px auto;background:#fff;padding:8px;border-radius:12px}
.tip-box{margin-top:10px;background:rgba(255,255,255,.08);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.6;color:#cfd8dc}
.badge-live{display:inline-flex;align-items:center;gap:4px;background:#FF575F;color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:8px}
.progress{height:6px;background:rgba(255,255,255,.15);border-radius:6px;overflow:hidden;width:100%;margin-top:10px}
.progress i{display:block;height:100%;background:#40DF9F;transition:width .3s}

/* 提示条 / 须知 */
.notice{background:#fff8f8;border:1px solid #ffe0e0;border-radius:10px;padding:10px;font-size:12px;line-height:1.7;color:#7a3b3b;margin:10px 12px}
.notice b{color:#e60026}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#eee;margin:0 12px;border-radius:10px;overflow:hidden}
.stat-strip div{background:#fff;padding:8px 4px;text-align:center}
.stat-strip .n{font-size:16px;font-weight:800;color:#e60026}
.stat-strip .l{font-size:10px;color:#888;margin-top:2px}

/* 弹窗 */
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:99}
.dialog{width:270px;background:#fff;border-radius:20px;padding:16px 14px 12px;text-align:center}
.dialog .msg{font-size:14px;line-height:1.6;font-weight:600}
.dialog .ok{margin-top:14px;display:inline-block;padding:9px 20px;background:#FCEBEE;color:#E94057;font-weight:700;border-radius:14px;font-size:14px}
/* toast */
#toast{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:200;pointer-events:none}
.toast-item{background:rgba(0,0,0,.78);color:#fff;padding:9px 16px;border-radius:10px;font-size:13px;margin-bottom:8px;text-align:center;animation:fadein .2s}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}}

/* 结果页 */
.result{margin:16px 12px;background:#fff;border:1px dashed #e60026;border-radius:14px;padding:16px;text-align:center}
.result .code{font-size:20px;font-weight:800;letter-spacing:1px;color:#e60026;word-break:break-all;margin:10px 0}
.btn-main{display:block;width:100%;margin-top:10px;padding:11px 0;border-radius:999px;background:#e60026;color:#fff;font-weight:700;font-size:15px}
.btn-ghost{display:block;width:100%;margin-top:8px;padding:10px 0;border-radius:999px;background:#fff;color:#e60026;font-weight:700;border:1px solid #ffd0d6;font-size:14px}

/* 任务页 */
.task-item{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border-bottom:1px solid #f2f2f2}
.task-item .ic{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#ff7a90,#e60026);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.task-item h4{margin:0 0 3px;font-size:14px}
.task-item p{margin:0;font-size:11px;color:#888}
.btn-mini{padding:6px 12px;border-radius:999px;background:#e60026;color:#fff;font-size:12px;font-weight:700}
.btn-mini.done{background:#e8e8ec;color:#9a9aa2}
.upload-box{margin:10px 12px;border:2px dashed #ffd0d6;border-radius:12px;padding:14px;text-align:center;color:#e60026;font-size:13px;background:#fffafb}
.upload-box img{margin:8px auto 0;max-height:150px;border-radius:8px}

/* 拦截页 */
.gate{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#fff;text-align:center}
.gate h2{margin:14px 0 6px;font-size:19px}
.gate p{color:#888;font-size:13px;line-height:1.7;margin:0}
.gate .qr{width:180px;height:180px;margin:16px auto;background:#f6f6f8;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#999;font-size:12px}

/* 底部 */
.foot{padding:14px 12px 24px;text-align:center;color:#aaa;font-size:11px;line-height:1.7}