:root {
  --bg:#f7f8fa; --card:#fff; --line:#e5e7eb; --text:#1f2328;
  --muted:#6b7280; --accent:#2563eb; --accent-h:#1d4ed8;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
}
* { margin:0; padding:0; box-sizing:border-box; }

/* ★ 必须放在最前面且加 !important
   否则 `hidden` 属性会被组件自身的 display:flex/grid 压过 ——
   元素看不见但仍占位、仍拦截点击（实测：隐藏的弹窗挡住了整个页面）。 */
[hidden] { display: none !important; }
body {
  background:var(--bg); color:var(--text); min-height:100vh;
  display:flex; flex-direction:column;
  font-family:-apple-system,"Microsoft YaHei UI","PingFang SC","Segoe UI",sans-serif;
}

header {
  background:var(--card); border-bottom:1px solid var(--line);
  padding:14px 22px; display:flex; align-items:center; justify-content:space-between;
}
.brand { display:flex; align-items:center; gap:12px; }
.logo {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  display:grid; place-items:center; font-size:19px; color:#fff;
}
header h1 { font-size:16px; font-weight:600; }
.sub { font-size:12px; color:var(--muted); margin-top:2px; }
.brand > div { min-width:0; }
.pill {
  font-size:12px; color:var(--accent); text-decoration:none;
  border:1px solid var(--line); border-radius:20px; padding:5px 13px;
  white-space:nowrap; flex-shrink:0;
}
.pill:hover { border-color:var(--accent); }

.wrap { flex:1; width:100%; max-width:680px; margin:0 auto; padding:26px 18px; }
.wrap.narrow { max-width:560px; }

.card {
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:22px;
}
.card h2 {
  font-size:14.5px; font-weight:600;
  display:flex; align-items:center; gap:9px; margin-bottom:13px;
}
h2.mt { margin-top:24px; }
.n {
  width:21px; height:21px; border-radius:6px;
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:700;
  display:grid; place-items:center;
}

/* 拖拽 */
.drop {
  border:2px dashed #d1d5db; border-radius:11px; min-height:210px;
  display:grid; place-items:center; cursor:pointer; transition:.18s;
}
.drop:hover, .drop.drag { border-color:var(--accent); background:#eff6ff; }
.drop-in { text-align:center; padding:22px; }
.di { font-size:32px; margin-bottom:9px; }
.dm { font-size:13.5px; }
.ds { font-size:11.5px; color:var(--muted); margin-top:7px; }

.prev { position:relative; }
.prev img { width:100%; border-radius:10px; display:block; background:#000; }
.mini {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,.62); color:#fff; border:none;
  border-radius:7px; padding:6px 12px; font-size:12px; cursor:pointer;
}

/* 文本 */
textarea {
  width:100%; min-height:132px; resize:vertical;
  border:1px solid var(--line); border-radius:9px;
  padding:12px; font-size:13px; line-height:1.65; font-family:inherit;
  background:#fafbfc;
}
textarea:focus { outline:none; border-color:var(--accent); background:#fff; }
.tips { font-size:11.5px; color:var(--muted); margin-top:9px; }

/* 授权 */
.consent {
  display:flex; gap:10px; align-items:flex-start;
  background:#fffbeb; border:1px solid #fde68a;
  border-radius:9px; padding:12px; font-size:12px;
  line-height:1.6; color:#78350f; cursor:pointer;
}
.consent input { margin-top:2px; width:16px; height:16px; flex-shrink:0; cursor:pointer; }

/* 支付条 */
.bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; }
.price { display:flex; flex-direction:column; }
.pnum { font-size:25px; font-weight:700; color:var(--accent); }
.pnote { font-size:11px; color:var(--muted); }
.pay-btn {
  background:var(--accent); color:#fff; border:none; border-radius:9px;
  padding:12px 30px; font-size:14px; font-weight:600; cursor:pointer;
  text-decoration:none; display:inline-block; font-family:inherit;
}
.pay-btn:hover:not(:disabled) { background:var(--accent-h); }
.pay-btn:disabled { background:#cbd5e1; color:#fff; cursor:not-allowed; }
.center-btn { display:block; text-align:center; margin:18px auto 0; }
.warn { font-size:11px; color:var(--muted); text-align:center; margin-top:11px; }

/* 方案选择 */
.plans { display:flex; flex-direction:column; gap:10px; }
.plan-loading { font-size:12.5px; color:var(--muted); padding:16px 0; text-align:center; }
.plan {
  display:flex; align-items:center; gap:13px;
  border:2px solid var(--line); border-radius:11px;
  padding:13px 15px; cursor:pointer; transition:.15s;
  background:#fff;
}
.plan:hover { border-color:#93c5fd; }
.plan.on { border-color:var(--accent); background:#eff6ff; }
.plan-radio {
  width:16px; height:16px; border:2px solid #d1d5db; border-radius:50%;
  flex-shrink:0; transition:.15s;
}
.plan.on .plan-radio {
  border-color:var(--accent);
  background:radial-gradient(circle, var(--accent) 45%, #fff 48%);
}
.plan-main { flex:1; min-width:0; }
.plan-name {
  font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:7px;
}
.plan-badge {
  font-size:10.5px; background:var(--accent); color:#fff;
  border-radius:4px; padding:1px 6px; font-weight:500;
}
.plan-sub { font-size:11.5px; color:var(--muted); margin-top:3px; }
.plan-note { font-size:11px; color:#9ca3af; margin-top:2px; }
.plan-price {
  font-size:19px; font-weight:700; color:var(--accent);
  white-space:nowrap; flex-shrink:0;
}

/* 支付页 */
.pay-card { text-align:center; }
.pay-amount {
  display:flex; flex-direction:column; align-items:center;
  gap:5px; margin:22px 0 20px;
}
.pay-btn.big {
  display:block; width:100%; padding:15px;
  font-size:16px; text-align:center;
}
.pay-hint { margin-top:14px; line-height:1.8; }

/* 页面内二维码（PC 端支付：用户不用离开本站） */
.qr-frame {
  position:relative;
  width:248px; height:248px; margin:6px auto 12px;
  padding:12px; background:#fff;
  border:1px solid var(--line); border-radius:14px;
  display:grid; place-items:center;
}
.qr-canvas { width:100%; height:100%; display:grid; place-items:center; }
.qr-canvas svg { width:100%; height:100%; display:block; }
.qr-loading {
  position:absolute; inset:0; padding:16px;
  display:grid; place-items:center; text-align:center;
  font-size:12.5px; color:var(--muted);
  background:#fff; border-radius:14px;
}
.qr-tip { font-size:13.5px; color:var(--text); margin-top:4px; }
.qr-tip b { color:var(--accent); }
.pay-card .hint { margin-top:8px; }

.task-line { font-size:12px; color:var(--muted); margin-top:20px; letter-spacing:1px; }
.task-line b { color:var(--text); font-size:15px; }
.pay-status {
  margin-top:14px; font-size:13px; color:var(--warn);
  background:#fffbeb; border-radius:8px; padding:10px;
}
.btns { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.mini-btn {
  display:inline-block; background:#f3f4f6; color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:9px 18px; font-size:12.5px; text-decoration:none; cursor:pointer;
  font-family:inherit;
}
.mini-btn:hover { border-color:var(--accent); color:var(--accent); }

/* 结果页 */
.center { text-align:center; }
.task-badge { font-size:12px; color:var(--muted); letter-spacing:1px; margin-bottom:14px; }
.task-badge b { color:var(--text); font-size:17px; }
.notice {
  font-size:13px; padding:10px; border-radius:8px; margin-bottom:14px;
  background:#f0fdf4; color:#166534;
}
.warn-notice { background:#fffbeb; color:#78350f; }
.warn-notice a { color:var(--accent); }

.progress { padding:16px 0; }
.spin {
  width:34px; height:34px; margin:0 auto 14px;
  border:3px solid #e5e7eb; border-top-color:var(--accent);
  border-radius:50%; animation:sp .8s linear infinite;
}
@keyframes sp { to { transform:rotate(360deg); } }
.stage { font-size:14px; font-weight:500; }
.track { height:6px; background:#e5e7eb; border-radius:4px; margin:16px 0 12px; overflow:hidden; }
.fill { height:100%; width:12%; background:var(--accent); transition:width .5s; }
.pctline { font-size:12px; color:var(--muted); margin-bottom:10px; font-variant-numeric:tabular-nums; }
.hint { font-size:11.5px; color:var(--muted); line-height:1.7; }

.result-img { width:100%; border-radius:11px; margin-top:8px; display:block; }
.fail-title { color:var(--err); font-size:15px; font-weight:600; margin-bottom:8px; }
.fail-msg { font-size:13px; color:var(--muted); line-height:1.7; }
.fail-msg a { color:var(--accent); }
.err {
  background:#fef2f2; border:1px solid #fecaca; color:#991b1b;
  padding:11px; border-radius:8px; font-size:12.5px; margin-top:14px;
}

footer { border-top:1px solid var(--line); background:var(--card); padding:14px 22px; }
footer p { font-size:11px; color:var(--muted); text-align:center; }

@media (max-width:520px) {
  .bar { flex-direction:column; align-items:stretch; }
  .pay-btn { width:100%; }
  .price { align-items:center; }
  /* 窄屏下压缩标题区，避免「服务状态」被挤成两行 */
  header { padding:12px 14px; gap:10px; }
  .logo { width:32px; height:32px; font-size:16px; border-radius:9px; }
  header h1 { font-size:15px; }
  .sub { font-size:11px; }
  .pill { font-size:11px; padding:5px 10px; }
  .qr-frame { width:220px; height:220px; }
}