/* ============ 用户领取页（移动端优先 · 科技蓝） ============ */
:root{
    --brand:#1677ff;
    --brand-dark:#0e5fd8;
    --brand-deep:#0a4fb8;
    --brand-soft:#e8f2ff;
    --cyan:#38bdf8;
    --text:#10233f;
    --muted:#7d8ba3;
    --line:#e4ecf7;
    --bg:#eef4fd;
    --danger:#f5455c;
    --danger-soft:#fdecee;
    --warn:#ff9500;
    --warn-soft:#fff6e6;
    --ok:#0ea5e9;
    --radius:18px;
    --shadow:0 8px 28px rgba(22,95,216,.09);
    --grad:linear-gradient(135deg,#3aa3ff 0%,#1668ff 100%);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg)}
body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
    color:var(--text);font-size:15px;line-height:1.6;
    background:linear-gradient(180deg,#dceaff 0%,#eaf2fd 240px,#f2f7fe 100%);
    background-attachment:fixed;
    min-height:100vh;
}
.page{max-width:560px;margin:0 auto;padding:0 14px 34px;min-height:100vh}

/* ---------- 封面 ---------- */
.cover{padding:14px 0 16px}
.cover img{
    display:block;width:100%;border-radius:20px;
    box-shadow:0 14px 34px rgba(22,104,255,.22);
}

/* ---------- 卡片通用 ---------- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 20px;margin-bottom:14px}

/* ---------- 领取表单 ---------- */
.claim-head{text-align:center;margin-bottom:18px}
.claim-head h2{font-size:21px;font-weight:800;letter-spacing:.5px}
.claim-head p{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.7}
.claim-head b{color:var(--brand)}

.form-error{
    background:var(--danger-soft);color:#d8324a;font-size:13px;font-weight:600;
    border-radius:12px;padding:11px 14px;margin-bottom:14px;line-height:1.5;
    animation:shake .3s ease;
}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}
}

.phone-field{
    display:flex;align-items:center;border:1.5px solid var(--line);
    border-radius:14px;padding:0 16px;transition:all .18s;background:#fbfdff;
}
.phone-field:focus-within{
    border-color:var(--brand);background:#fff;
    box-shadow:0 0 0 4px rgba(22,119,255,.12);
}
.phone-field .prefix{
    color:var(--text);font-weight:700;margin-right:12px;padding-right:12px;
    border-right:1px solid var(--line);font-size:16px;
}
.phone-field input{
    flex:1;border:none;outline:none;height:54px;font-size:19px;
    letter-spacing:1.5px;background:transparent;color:var(--text);
}
.agree{display:flex;align-items:flex-start;gap:9px;margin:15px 2px 18px;font-size:12.5px;color:var(--muted);line-height:1.55}
.agree input{margin-top:3px;width:16px;height:16px;accent-color:var(--brand);flex:none}

.btn-claim{
    width:100%;height:52px;border:none;border-radius:999px;cursor:pointer;
    background:var(--grad);color:#fff;
    font-size:17px;font-weight:700;letter-spacing:3px;
    box-shadow:0 10px 22px rgba(22,104,255,.36);
    transition:transform .08s,box-shadow .15s,opacity .15s;
}
.btn-claim:active{transform:scale(.985);box-shadow:0 6px 14px rgba(22,104,255,.3)}
.btn-claim[disabled]{background:#c4cedd;box-shadow:none;cursor:not-allowed}
.tips{text-align:center;color:var(--muted);font-size:11.5px;margin-top:13px;line-height:1.7}

/* ---------- 异常状态 ---------- */
.state-card{text-align:center;padding:48px 24px}
.state-icon{
    width:72px;height:72px;border-radius:50%;margin:0 auto 16px;
    background:var(--brand-soft);color:var(--brand);
    display:flex;align-items:center;justify-content:center;
}
.state-card h2{font-size:19px;margin-bottom:8px}
.state-card p{color:var(--muted);font-size:13.5px}

/* ---------- 领取进度 ---------- */
.progress-card{animation:cardIn .28s ease}
@keyframes cardIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

.prog-head{display:flex;align-items:center;gap:13px}
.prog-spinner{
    width:46px;height:46px;border-radius:50%;flex:none;
    background:var(--brand-soft);color:var(--brand);
    display:flex;align-items:center;justify-content:center;
}
.prog-spinner svg{animation:spin .9s linear infinite}
.prog-spinner.ok{background:var(--brand-soft);color:var(--brand)}
.prog-spinner.ok svg{animation:none}
.prog-spinner.fail{background:var(--danger-soft);color:var(--danger)}
.prog-spinner.fail svg{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}

.prog-head-text{flex:1;min-width:0}
.prog-head-text h3{font-size:16.5px;font-weight:800}
.prog-head-text p{font-size:12px;color:var(--muted);margin-top:2px}
.prog-count{flex:none;font-size:14px;color:var(--muted);font-weight:600}
.prog-count b{color:var(--brand);font-size:19px;font-weight:800}

.prog-track{
    height:8px;border-radius:999px;background:#edf2fa;margin:16px 0 14px;overflow:hidden;
}
.prog-bar{
    height:100%;width:0;border-radius:999px;
    background:linear-gradient(90deg,#54b1ff,#1677ff);
    transition:width .35s ease;position:relative;
}
.prog-bar.running::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    animation:shimmer 1.1s linear infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.prog-list{list-style:none;margin:0;padding:0}
.prog-list li{
    display:flex;align-items:center;gap:11px;
    padding:10px 4px;border-bottom:1px solid #f0f5fc;
    animation:rowIn .25s ease both;
}
.prog-list li:last-child{border-bottom:none}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.pl-face{
    flex:none;width:42px;height:42px;border-radius:11px;
    background:linear-gradient(135deg,#eaf4ff,#dcebff);
    color:var(--brand-deep);font-size:11px;font-weight:800;
    display:flex;align-items:center;justify-content:center;text-align:center;
    line-height:1.15;padding:3px;
}
.pl-info{flex:1;min-width:0}
.pl-name{
    font-size:13.5px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pl-msg{font-size:11.5px;color:var(--muted);margin-top:1px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-state{
    flex:none;display:inline-flex;align-items:center;gap:5px;
    font-size:12px;font-weight:600;color:var(--muted);
}
.pl-state .dot{width:7px;height:7px;border-radius:50%;background:#c4cfdf;flex:none}
.pl-state.ing{color:var(--brand)}
.pl-state.ing .spin{
    width:13px;height:13px;border-radius:50%;flex:none;
    border:2px solid #cfe3ff;border-top-color:var(--brand);
    animation:spin .7s linear infinite;
}
.pl-state.ok{color:var(--ok)}
.pl-state.ok .dot{background:var(--ok)}
.pl-state.skip{color:#93a1b5}
.pl-state.skip .dot{background:#aebbcb}
.pl-state.fail{color:var(--danger)}
.pl-state.fail .dot{background:var(--danger)}

/* 结果摘要（页内，非弹窗） */
.prog-summary{
    display:flex;align-items:center;gap:12px;margin-top:16px;
    border-radius:14px;padding:14px 16px;background:#f5f9ff;
}
.prog-summary.bad{background:var(--danger-soft)}
.psm-icon{
    width:42px;height:42px;border-radius:50%;flex:none;
    background:var(--brand);color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.prog-summary.bad .psm-icon{background:var(--danger)}
.psm-text{flex:1;min-width:0}
.psm-text b{font-size:14.5px}
.psm-text p{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.6}
.prog-summary.bad .psm-text p{color:#c0606e}

.btn-finish{
    width:100%;height:48px;margin-top:16px;border:none;border-radius:999px;cursor:pointer;
    background:var(--grad);color:#fff;font-size:16px;font-weight:700;letter-spacing:2px;
    box-shadow:0 8px 18px rgba(22,104,255,.3);
}
.btn-finish:active{transform:scale(.985)}

/* ---------- 页脚 ---------- */
.footer{text-align:center;color:#9aa8bd;font-size:11px;padding:16px 0 6px}