/* Purchase, payment and download flow pages share these restrained containers. */
.user-flow-page { padding: 42px 0 58px; background: var(--bg-primary); }
.user-flow-page .flow-shell { max-width: 860px; margin: 0 auto; }
.user-flow-page .flow-card { padding: clamp(22px, 4vw, 34px); border: 1px solid #e2e8f0; border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07); }
.user-flow-page .flow-kicker { margin: 0 0 8px; color: #64748b; font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.user-flow-page .flow-title { margin: 0; color: #0f172a; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.user-flow-page .flow-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 20px 0; padding: 15px 16px; border-radius: 14px; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; }
.user-flow-page .flow-summary strong { color: #0f172a; }
.user-flow-page .flow-price { color: #dc2626; font-size: 1.18rem; font-weight: 800; }
.user-flow-page .flow-label { color: #1e293b; font-weight: 800; }
.user-flow-page .flow-input { min-height: 48px; border-radius: 11px; border-color: #cbd5e1; }
.user-flow-page .flow-primary { min-height: 46px; padding: 10px 20px; border: 1px solid #2563eb; border-radius: 11px; color: #0f172a; background: #f8fbff; font-weight: 800; }
.user-flow-page .flow-note { margin-top: 20px; padding: 15px 16px; border: 1px solid #dbeafe; border-radius: 14px; color: #475569; background: #f8fbff; line-height: 1.75; }
.user-flow-page .flow-note strong { color: #1e3a8a; }
.user-flow-page #pay-cta { margin: 22px 0 !important; }
.user-flow-page #wechat-panel, .user-flow-page #alipay-panel { padding: 18px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
@media (max-width: 767px) { .user-flow-page { padding: 28px 0 42px; } .user-flow-page .flow-summary { align-items: flex-start; flex-direction: column; } }

.user-legal-page { padding: 42px 0 58px; background: var(--bg-primary); }
.user-legal-page .legal-hero { margin-bottom: 18px; padding: 25px 28px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #164e63, #2563eb); }
.user-legal-page .legal-hero h1 { margin: 0 0 7px; font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 800; }
.user-legal-page .legal-hero p { margin: 0; opacity: .88; }
.user-legal-page .legal-card { padding: clamp(22px, 4vw, 38px); border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; box-shadow: 0 14px 38px rgba(15,23,42,.06); }
.user-legal-page .legal-card h2 { margin: 25px 0 10px; color: #0f172a; font-size: 1.2rem; font-weight: 800; }
.user-legal-page .legal-card h2:first-child { margin-top: 0; }
.user-legal-page .legal-card h3 { margin: 18px 0 8px; color: #334155; font-size: 1rem; font-weight: 800; }
.user-legal-page .legal-card p, .user-legal-page .legal-card li { color: #475569; line-height: 1.8; }
.user-legal-page .legal-card li { margin-bottom: 6px; }
.user-legal-page .legal-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 30px; }
.user-legal-page .legal-actions a { min-width: 112px; }

/* Support page: calm service-desk layout, shared with the existing user flow. */
.user-support-page { padding: 42px 0 58px; background: var(--bg-primary); }
.user-support-page .support-shell { max-width: 920px; margin: 0 auto; }
.support-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:18px; padding:30px 34px; border:1px solid #cfe2f3; border-radius:22px; color:#12304a; background:linear-gradient(135deg, #f8fcff 0%, #edf7fb 100%); box-shadow:0 14px 38px rgba(15, 73, 98, .08); }
.support-hero-copy { min-width:0; }
.support-kicker { margin:0 0 8px; color:#17617d; font-size:.8rem; font-weight:800; letter-spacing:.12em; }
.support-hero h1 { margin:0 0 10px; color:#12304a; font-size:clamp(1.55rem, 3vw, 2.1rem); font-weight:800; line-height:1.35; }
.support-lead { max-width:680px; margin:0; color:#486274; line-height:1.8; }
.support-hero-mark { display:flex; flex:0 0 72px; align-items:center; justify-content:center; width:72px; height:72px; border-radius:20px; color:#17617d; background:#d9eff4; }
.support-hero-mark svg { width:34px; height:34px; }
.support-card { padding:24px 26px; border:1px solid #e2e8f0; border-radius:18px; background:#fff; box-shadow:0 12px 32px rgba(15, 23, 42, .055); }
.support-description-card { margin-bottom:18px; }
.support-section-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.support-section-heading h2 { margin:0 0 4px; color:#172b3a; font-size:1.12rem; font-weight:800; }
.support-section-heading p { margin:0; color:#718493; font-size:.9rem; line-height:1.5; }
.support-icon { display:inline-flex; flex:0 0 38px; align-items:center; justify-content:center; width:38px; height:38px; border-radius:12px; color:#17617d; background:#e4f3f7; }
.support-icon svg { width:19px; height:19px; }
.support-icon-green { color:#19705a; background:#e3f5ed; }
.support-icon-amber { color:#94621a; background:#fff3d9; }
.support-icon-blue { color:#245ea7; background:#e7f0ff; }
.support-description { margin:0; color:#425466; line-height:1.85; white-space:pre-line; overflow-wrap:anywhere; }
.support-time { display:flex; align-items:flex-start; gap:8px; margin-top:16px; padding:12px 14px; border-radius:11px; color:#496675; background:#f7fafc; line-height:1.7; }
.support-time svg { flex:0 0 17px; width:17px; height:17px; margin-top:3px; color:#17617d; }
.support-contact-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-bottom:18px; }
.support-contact-card { min-width:0; }
.support-wechat { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 18px; padding:12px 14px; border:1px solid #e4edf2; border-radius:11px; color:#637684; background:#fbfdfe; }
.support-wechat strong { color:#17617d; font-size:1.05rem; overflow-wrap:anywhere; }
.support-qr-box { text-align:center; }
.support-qr-box img { display:block; width:190px; height:190px; margin:0 auto 10px; padding:8px; object-fit:contain; border:1px solid #e5edf1; border-radius:14px; background:#fff; }
.support-qr-box p, .support-empty { margin:0; color:#7a8a95; font-size:.88rem; line-height:1.6; }
.support-empty { padding:16px 0 4px; }
.support-checklist-card { margin-bottom:18px; }
.support-checklist { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 18px; }
.support-checklist > div { display:flex; align-items:flex-start; gap:10px; padding:12px 0; border-top:1px solid #edf1f3; }
.support-checklist span { flex:0 0 auto; color:#17617d; font-size:.75rem; font-weight:800; letter-spacing:.06em; }
.support-checklist p { margin:0; color:#506270; line-height:1.7; }
.support-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.support-action { display:inline-flex; align-items:center; gap:7px; min-height:42px; padding:9px 15px; border:1px solid #cbdde7; border-radius:10px; color:#285568; background:#fff; font-weight:700; text-decoration:none; transition:background-color .2s ease, border-color .2s ease, transform .2s ease; }
.support-action:hover { border-color:#86b7c9; color:#17475b; background:#f3fafc; text-decoration:none; transform:translateY(-1px); }
.support-action-primary { border-color:#17617d; color:#fff; background:#17617d; }
.support-action-primary:hover { border-color:#104d65; color:#fff; background:#104d65; }
.support-action svg { width:16px; height:16px; }
@media (max-width: 767px) {
  .user-support-page { padding:28px 0 42px; }
  .support-hero { align-items:flex-start; padding:24px 20px; }
  .support-hero-mark { flex-basis:54px; width:54px; height:54px; border-radius:16px; }
  .support-hero-mark svg { width:26px; height:26px; }
  .support-card { padding:20px 18px; }
  .support-contact-grid, .support-checklist { grid-template-columns:1fr; }
}