/* Extracted from app/templates/quota/orders.html */
.orders-page { padding: 30px 0 56px; }
    .orders-shell { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

    .orders-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
    .orders-header h2 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; margin: 0; color: var(--text-primary); }
    .orders-header p { margin: 6px 0 0; font-size: 14px; color: var(--text-secondary); }

    .order-tip { font-size: 13px; line-height: 1.6; }

    .order-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 18px 20px;
        margin-bottom: 14px;
        transition: border-color .18s, box-shadow .18s;
    }
    .order-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); }

    .order-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
    .order-api-name { font-weight: 600; font-size: 16px; color: var(--text-primary); }
    .order-api-name i { color: var(--accent-primary); }

    .order-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 18px; margin-bottom: 12px; }
    .order-field-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
    .order-field-value { font-size: 14px; font-weight: 600; color: var(--text-primary); word-break: break-all; }
    .order-field-value.key-value {
        font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 500;
        background: var(--bg-base); padding: 3px 8px; border-radius: var(--radius-sm);
        border: 1px solid var(--border-color); display: inline-block;
    }

    .order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
    .order-actions .btn-action {
        font-size: 13px; padding: 7px 14px; border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary);
        cursor: pointer; transition: all .18s; text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
    }
    .order-actions .btn-action:hover { background: var(--accent-light); color: var(--accent-dark); border-color: var(--border-hover); }

    @media (max-width: 576px) {
        .order-fields { grid-template-columns: 1fr 1fr; }
        .orders-header { align-items: flex-start; }
    }

/* Extracted from app/templates/quota/center.html */
:root {
        /* 统一到全局设计令牌（T-B08）：局部名仅作别名，值不再另立 */
        --primary: var(--accent-primary);
        --primary-dark: var(--accent-dark);
        --primary-light: rgba(var(--accent-rgb, 250, 140, 22), 0.1);
        --bg-page: var(--bg-base);
        --success: var(--success, #52c41a);
    }

    body {
        background: var(--bg-page);
    }

    /* ===== HERO ===== */
    .hero-section {
        background: var(--surface);
        color: #fff;
        padding: 5rem 0 4rem;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .hero-section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--surface);
        pointer-events: none;
    }

    .hero-badge {
        display: inline-block;
        background: var(--primary-light);
        color: var(--primary);
        border: 1px solid rgba(250, 140, 22,0.3);
        border-radius: 12px;
        padding: 0.3rem 1rem;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 1.5rem;
    }

    .hero-title {
        font-size: 20px;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 1.2rem;
        letter-spacing: -0.02em;
    }

    .hero-title span {
        color: var(--primary);
    }

    .hero-subtitle {
        font-size: 16px;
        color: rgba(255,255,255,0.72);
        max-width: 620px;
        margin: 0 auto 2.2rem;
        line-height: 1.8;
    }

    .hero-cta-group {
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-hero-primary {
        background: var(--primary);
        color: #fff;
        border: 1px solid var(--primary);
        border-radius: 6px;
        padding: 0.75rem 2rem;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: opacity 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-hero-primary:hover {
        opacity: 0.85;
        color: #fff;
    }

    .btn-hero-secondary {
        background: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.9);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 6px;
        padding: 0.75rem 2rem;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-hero-secondary:hover {
        background: rgba(255,255,255,0.18);
        color: #fff;
    }

    /* ===== FEATURES ===== */
    .features-section {
        padding: 3.5rem 0 2rem;
    }

    .feature-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem 1.75rem;
        height: 100%;
        transition: border-color 0.2s;
    }

    .feature-card:hover {
        border-color: #d9d9d9;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 1rem;
    }

    .feature-icon.orange { background: rgba(250, 140, 22,0.12); color: var(--primary); }
    .feature-icon.blue   { background: var(--info-bg); color: var(--info); }
    .feature-icon.green  { background: rgba(16,185,129,0.12); color: var(--success); }

    .feature-card h5 {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .feature-card p {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
    }

    /* ===== API LIST ===== */
    .apis-section {
        padding: 2rem 0 4rem;
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.4rem;
    }

    .section-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 2rem;
    }

    .api-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1.5rem;
        height: 100%;
        transition: border-color 0.2s;
        position: relative;
    }

    .api-card:hover {
        border-color: rgba(250, 140, 22,0.3);
    }

    .api-card .api-icon {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px; /* feature icon 图形尺寸 */;
        margin-bottom: 1rem;
    }

    .api-icon.orange  { background: rgba(250, 140, 22,0.12); color: var(--primary); }
    .api-icon.blue    { background: var(--info-bg); color: var(--info); }
    .api-icon.green   { background: rgba(16,185,129,0.12); color: var(--success); }
    .api-icon.purple  { background: var(--info-bg); color: var(--info); }
    .api-icon.rose    { background: var(--danger-bg); color: var(--danger); }

    .api-card h5 {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.45rem;
    }

    .api-card .api-desc {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
    }

    .api-card-cta {
        background: var(--bg-card);
        border: 2px dashed rgba(250, 140, 22,0.4);
        border-radius: 8px;
        padding: 1.5rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: border-color 0.2s;
        text-decoration: none;
        color: var(--text-primary);
    }

    .api-card-cta:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .api-card-cta .cta-icon {
        width: 52px;
        height: 52px;
        border-radius: 8px;
        background: var(--primary-light);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px; /* api icon 图形尺寸 */;
        margin-bottom: 0.75rem;
    }

    .api-card-cta h5 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    .api-card-cta p {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
    }

    /* ===== CTA BOTTOM ===== */
    .cta-section {
        background: var(--surface);
        color: #fff;
        padding: 4rem 0;
        text-align: center;
    }

    .cta-section h2 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 0.75rem;
    }

    .cta-section p {
        font-size: 16px;
        color: rgba(255,255,255,0.65);
        margin-bottom: 2rem;
    }

    @media (max-width: 768px) {
        .hero-title { font-size: 20px; }
    }

/* Extracted from app/templates/quota/index.html */
:root {
        /* 统一到全局设计令牌（T-B08）：局部名仅作别名，值不再另立 */
        --primary: var(--accent-primary);
        --primary-dark: var(--accent-dark);
        --primary-light: rgba(var(--accent-rgb, 250, 140, 22), 0.08);
        --bg-page: var(--bg-base);
        --success-bg: var(--success-bg, #f6ffed);
    }

    body {
        background: var(--bg-page);
        color: var(--text-primary);
    }

    .quota-page {
        padding: 3rem 0 4rem;
        background: var(--bg-page);
        min-height: 100vh;
    }

    /* 页面标题 */
    .page-header {
        text-align: center;
        margin-bottom: 2.5rem;
    }

    .page-header h1 {
        font-size: 20px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }

    .page-header p {
        font-size: 16px;
        color: var(--text-secondary);
        margin: 0;
    }

    /* 步骤区块 */
    .step-section {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1.75rem 2rem;
        margin-bottom: 1.5rem;
    }

    .step-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }

    .step-number {
        width: 32px;
        height: 32px;
        background: var(--primary);
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .step-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    /* 接口卡片 */
    .api-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }

    .api-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1.25rem;
        cursor: pointer;
        transition: border-color 0.2s;
        position: relative;
    }

    .api-card:hover:not(.disabled) {
        border-color: var(--primary);
    }

    .api-card.selected {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .api-card.disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--surface-soft);
    }

    .api-card-selector {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .api-card.selected .api-card-selector {
        background: var(--primary);
        border-color: var(--primary);
    }

    .api-card.selected .api-card-selector::after {
        content: '✓';
        color: #fff;
        font-size: 12px;
        font-weight: 600;
    }

    .api-card-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }

    .api-card-id {
        font-size: 13px;
        color: var(--text-muted);
        font-family: 'SFMono-Regular', Consolas, monospace;
        margin-bottom: 0.5rem;
    }

    .api-card-desc {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0;
    }

    .api-card-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 12px;
        font-weight: 600;
        padding: 0.15rem 0.5rem;
        border-radius: 4px;
        background: var(--surface-soft);
        color: var(--text-muted);
        margin-top: 0.5rem;
    }

    /* 次数选择 */
    .quantity-section {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .quantity-input-row {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .quantity-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .quantity-input-wrap {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .quantity-input {
        width: 120px;
        padding: 0.6rem 1rem;
        border: 1px solid #d9d9d9;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        color: var(--text-primary);
        outline: none;
        transition: border-color 0.2s;
    }

    .quantity-input:focus {
        border-color: var(--primary);
    }

    .quantity-unit {
        font-size: 16px;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .quick-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .quick-btn {
        padding: 0.45rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-card);
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .quick-btn:hover {
        border-color: var(--primary);
        background: var(--primary-light);
        color: var(--primary);
    }

    .quick-btn.active {
        border-color: var(--primary);
        background: var(--primary);
        color: #fff;
    }

    /* 费用汇总 */
    .price-summary {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 1.5rem;
        padding: 1.25rem 1.5rem;
        background: rgba(250, 140, 22, 0.04);
        border: 1px solid rgba(250, 140, 22, 0.15);
        border-radius: 8px;
    }

    .price-item {
        display: flex;
        align-items: baseline;
        gap: 0.35rem;
    }

    .price-item-label {
        font-size: 14px;
        color: var(--text-secondary);
    }

    .price-item-value {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .price-total {
        font-size: 20px;
        font-weight: 600;
        color: var(--primary);
    }

    .price-total .currency {
        font-size: 16px;
    }

    .validity-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 13px;
        font-weight: 600;
        color: var(--success);
        background: var(--success-bg);
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
    }

    /* 支付区域 */
    .payment-section {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1.75rem 2rem;
        margin-bottom: 1.5rem;
    }

    .payment-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    .payment-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0;
    }

    .payment-summary {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }

    .payment-summary-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 14px;
        color: var(--text-secondary);
    }

    .payment-summary-item strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    .payment-amount {
        font-size: 20px;
        font-weight: 600;
        color: var(--primary);
    }

    .payment-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .payment-methods-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .payment-methods {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }

    .payment-method-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        width: 160px;
        padding: 0.5rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-card);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .payment-method-btn:hover {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .payment-method-btn.active {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .payment-method-btn i {
        font-size: 16px;
    }

    .btn-pay {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 2rem;
        background: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s;
        min-width: 160px;
    }

    .btn-pay:hover:not(:disabled) {
        opacity: 0.85;
        color: #fff;
    }

    .btn-pay:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-pay.wechat {
        background: var(--brand);
        border-color: var(--brand);
    }

    .payment-hint {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0;
    }

    /* 购买须知 */
    .notice-section {
        margin-top: 0.5rem;
    }

    .notice-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }

    .notice-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }

    .notice-title i {
        font-size: 16px;
    }

    .notice-text {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.8;
        margin-bottom: 0.5rem;
    }

    .notice-text i {
        margin-right: 6px;
        color: var(--primary);
    }

    .wechat-id {
        color: #07c160;
        font-weight: 600;
    }

    .qrcode-wrap {
        display: inline-block;
        padding: 12px;
        background: #fafafa;
        border-radius: 8px;
        margin-top: 1rem;
        border: 1px solid var(--border-color);
    }

    .qrcode-wrap img {
        display: block;
        border-radius: 8px;
        max-width: 160px;
    }

    .qrcode-hint {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 0.75rem;
    }

    /* 响应式 */
    @media (max-width: 768px) {
        .quota-page {
            padding: 2rem 0;
        }

        .step-section, .payment-section {
            padding: 1.25rem 1rem;
        }

        .api-cards {
            grid-template-columns: 1fr;
        }

        .price-summary {
            flex-direction: column;
            gap: 0.75rem;
        }

        .payment-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .payment-row {
            flex-direction: column;
            align-items: flex-start;
        }

        .notice-card {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: center;
        }

        .notice-title {
            justify-content: center;
        }
    }

/* Extracted from app/templates/points/guide.html */
/* ===== 流量豆 / 数据豆说明 · 与充值/会员页同款中性页头，统一设计令牌 ===== */
  .pg { max-width: 1040px; margin: 0 auto; padding: 30px 20px 56px; }

  /* 中性页头 */
  .pg-head { margin-bottom: 22px; }
  .pg-head-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.5px; color: var(--text-primary); }
  .pg-head-desc { margin: 8px 0 0; max-width: 720px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
  .pg-head-desc b { color: var(--text-primary); }
  .pg-rates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .pg-rate { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 7px 14px; }
  .pg-rate i.platform { color: var(--accent-primary); }
  .pg-rate i.citydb { color: var(--info); }

  /* 旧版名称提示 */
  .pg-rename-note {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px;
    margin: 18px 0 20px; padding: 14px 16px;
    background: var(--surface);
    border: 1px solid rgba(250, 140, 22, .26); border-radius: var(--radius-sm);
  }
  .pg-rename-icon {
    width: 40px; height: 40px; border-radius: 8px; background: var(--accent-gradient); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    box-shadow: var(--shadow-sm);
  }
  .pg-rename-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--accent-dark); }
  .pg-rename-names { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
  .pg-rename-old { color: var(--text-secondary); }
  .pg-rename-arrow { color: var(--accent-primary); font-size: 13px; }
  .pg-rename-current { color: var(--accent-dark); }
  .pg-rename-copy { margin: 3px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

  /* 两栏卡片 */
  .pg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  @media (max-width: 820px) { .pg-grid { grid-template-columns: 1fr; } }

  .pg-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 22px 22px 24px; }
  .pg-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .pg-card-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
  .pg-card-icon.platform { background: var(--accent-light); color: var(--accent-primary); }
  .pg-card-icon.citydb { background: var(--info-bg); color: var(--info); }
  .pg-card-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }

  .pg-purpose { margin: 14px 0 4px; font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
  .pg-sub { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }

  .pg-cap { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--border-soft); }
  .pg-cap:first-of-type { border-top: none; }
  .pg-cap-dot { color: var(--accent-primary); margin-top: 4px; font-size: 12px; }
  .pg-cap-dot.citydb { color: var(--info); }
  .pg-cap-body { flex: 1; min-width: 0; }
  .pg-cap-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .pg-cap-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.5; }
  .pg-cap-cost { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent-dark); background: var(--accent-light); border-radius: var(--radius-sm); padding: 3px 9px; white-space: nowrap; }
  .pg-cap-cost.citydb { color: var(--info-dark); background: var(--info-bg); }

  .pg-value { margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-soft); border: 1px solid var(--border-soft); font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .pg-value b { color: var(--accent-dark); }
  .pg-value.citydb { background: var(--info-bg); }
  .pg-value.citydb b { color: var(--info-dark); }

  .pg-note { margin-top: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

  .pg-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
  .pg-cta .btn { padding: 10px 22px; font-weight: 600; }

/* 充值页样式已重写并移到本文件末尾「充值中心 · 收银台」一节
   （spec 20260730-usercenter-recharge-redesign）。必须在收敛层之后，否则被覆盖。 */


/* ============================================================
   会员与权益页样式（现役权威段）

   2026-08-09 T3.1 后半段（spec 20260804-usercenter-ui-optimize）：
   - 删除本文件原 962 行起的陈旧「Extracted from membership」抽取
     （含已退役的第三套升级收银台样式，且从未被会员页加载过）
   - 以 pages/membership.css 现役规则整段迁入，置于跨页「规范收敛层」之前
   - 会员页改为加载本文件；membership.css 退役
   - 同 selector 重复：页内先后定义仍靠层叠生效；其后收敛层继续按令牌覆盖
   ============================================================ */
    /* 统一到全局设计令牌：仅为本页历史类名保留少量别名，字体/底色继承全站 */
    :root {
        --primary: var(--accent-primary);
        --primary-dark: var(--accent-dark);
        --primary-light: var(--accent-light);
        --success: #52c41a;
        --bg-card-hover: var(--bg-hover);
        --bg-page: transparent;
    }

    .membership-page {
        padding: 30px 0 56px;
        background: transparent;
    }

    /* ── 中性页头（替代满橙 hero，与充值页同款减重）── */
    .ms-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
    .ms-head-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.5px; color: var(--text-primary); }
    .ms-head-desc { margin: 8px 0 0; max-width: 660px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
    .ms-head-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .ms-head-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-pill); padding: 5px 12px; text-decoration: none; }
    .ms-head-tag i { color: var(--accent-primary); }
    a.ms-head-tag:hover { border-color: var(--border); color: var(--ink); }
    @media (max-width: 767px) { .ms-head-title { font-size: 20px; } }

    .membership-tab-content {
        display: none;
    }

    .membership-tab-content.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* 下方支付区：设计图布局，全宽、摘要单行、支付方式垂直、按钮与提示同一行 */
    .payment-below {
        margin-top: 2.5rem;
        padding: 1.75rem 2rem;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        width: 100%;
    }

    /* 支付信息：单行 支付信息 | 已选择 xxx | 实付 ¥xxx */
    .payment-below-header {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem 2rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }

    .payment-below-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }

    .payment-below-summary-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 14px;
        color: var(--text-secondary);
    }

    .payment-below-summary-item strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* A 与 B 垂直布局 */
    .payment-below-ab {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .payment-below-col-a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .payment-below-col-b {
        flex-shrink: 0;
    }

    /* 支付方式 + 支付按钮：同一行 */
    .payment-below-row-one {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0;
    }

    .payment-below-methods-label {
        font-size: 12px;
        font-weight: 400;
        color: var(--text-primary);
        margin: 0;
    }

    .payment-below-methods {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        margin: 0;
    }

    .payment-method-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.5rem 1rem;
        white-space: nowrap;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        background: var(--bg-card);
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .payment-method-btn:hover { border-color: var(--border); background: var(--surface-soft); }

    .payment-method-btn.active {
        border-color: var(--primary);
        background: var(--primary-light);
    }

    .payment-method-btn i {
        font-size: 16px;
    }

    /* 支付按钮：主按钮样式，与支付方式同一行 */
    .payment-below-row-one .btn-wechat,
    .payment-below-row-one .btn-alipay {
        flex: none;
        width: 100%;
    }

    .payment-below-hint {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0;
        text-align: left;
    }

    /* 布局 B：二维码区域，默认隐藏，生成后再展示 */
    .payment-below .wechat-qr-section {
        display: none;
        padding: 1.25rem;
        background: var(--bg-page);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: center;
        width: fit-content;
        min-width: 220px;
    }

    .payment-below .wechat-qr-section.show {
        display: block;
    }

    .payment-below .wechat-qr-section img {
        max-width: 200px;
        border-radius: 8px;
    }

    .payment-below .wechat-qr-section .payment-qr-hint {
        margin-top: 0.5rem;
        margin-bottom: 0;
    }

    /* Plan Cards */
    .plan-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 1.25rem;
        height: 100%;
        transition: border-color 0.2s;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .plan-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: transparent;
        transition: background 0.3s ease;
    }

    .plan-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }

    

    .plan-card.featured {
        border-color: var(--primary);
        background: var(--bg-card);
    }

    .plan-card.featured::before {
        background: var(--primary);
    }

    .plan-card.selected {
        border-color: var(--primary);
        border-width: 2px;
    }

    .plan-card.selected::before {
        background: var(--primary);
    }

    .plan-card-selector {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 20px;
        height: 20px;
        border: 2px solid var(--border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .plan-card.selected .plan-card-selector {
        background: var(--primary);
        border-color: var(--primary);
    }

    .plan-card.selected .plan-card-selector::after {
        content: '✓';
        color: white;
        font-size: 12px;
        font-weight: 600;
    }

    .plan-name {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.75rem 0;
    }

    .badge-popular {
        background: var(--primary);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
    }

    .price-row {
        margin-bottom: 0;
    }

    .price {
        font-size: 16px;
        font-weight: 600;
        color: var(--primary);
        line-height: 1;
    }

    .price .currency {
        font-size: 12px;
        font-weight: 600;
    }

    .price .period {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-muted);
        margin-left: 0.25rem;
    }

    .price-original {
        font-size: 14px;
        color: var(--text-muted);
        text-decoration: line-through;
        margin-top: 0.25rem;
    }

    .price-save {
        font-size: 13px;
        color: var(--success);
        margin-top: 0.25rem;
        font-weight: 600;
    }

    /* Buttons */
    .btn-alipay {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        background: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .btn-alipay:hover:not(:disabled) {
        opacity: 0.85;
        color: #fff;
    }

    .btn-alipay:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .btn-alipay i {
        font-size: 16px;
        color: #fff;
    }

    .btn-wechat {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.875rem 1.5rem;
        background: var(--brand);
        border: 1px solid var(--brand);
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s;
    }

    .btn-wechat:hover:not(:disabled) {
        opacity: 0.85;
        color: #fff;
    }

    .btn-wechat:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-wechat i {
        font-size: 16px;
        color: #fff;
    }

    .wechat-qr-section {
        display: none;
        margin-top: 1rem;
        padding: 1rem;
        background: var(--surface-soft);
        border-radius: 8px;
        text-align: center;
    }

    .wechat-qr-section.show {
        display: block;
    }

    .wechat-qr-section img {
        max-width: 200px;
        border-radius: 8px;
    }


    .payment-qr-hint {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 0.75rem;
    }


    /* Pay Hint Section */
    .pay-hint {
        margin-top: 3rem;
    }

    .hint-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 2rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: start;
    }

    @media (max-width: 768px) {
        .hint-card {
            grid-template-columns: 1fr;
            gap: 2rem;
            text-align: center;
        }
    }

    .hint-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1rem;
    }

    @media (max-width: 768px) {
        .hint-section-title {
            justify-content: center;
        }
    }

    .hint-section-title i {
        font-size: 14px;
    }

    .hint-section-title .fa-weixin {
        color: #07c160;
    }

    .hint-section-title .fa-check-circle {
        color: var(--primary);
    }

    .hint-text {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.6;
        margin-bottom: 0.5rem;
    }

    .wechat-id {
        color: #07c160;
        font-weight: 600;
    }

    .qrcode-wrap {
        display: inline-block;
        padding: 12px;
        background: var(--surface-soft);
        border-radius: 8px;
        margin-top: 1rem;
        border: 1px solid var(--border-color);
    }

    .qrcode-wrap img {
        display: block;
        border-radius: 8px;
        max-width: 160px;
    }

    .qrcode-hint {
        font-size: 13px;
        color: var(--text-muted);
        margin-top: 0.75rem;
    }

    /* Responsive */
    @media (max-width: 991px) {
        .price {
            font-size: 16px;
        }
    }

    @media (max-width: 768px) {
        .payment-below-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .payment-below-row-one {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    @media (max-width: 576px) {
        .membership-page {
            padding: 2rem 0;
        }

        .plan-card {
            padding: 1.5rem;
        }

        .payment-below {
            padding: 1.25rem 1rem;
        }
    }

    /* ── 升级横幅 ── */
    .upgrade-banner {
        background: var(--brand-soft);
        border: 1px solid var(--warning);
        border-radius: 12px;
        padding: 1.25rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    .upgrade-banner-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .upgrade-banner-text {
        font-size: 13px;
        color: var(--warning-dark);
    }
    .upgrade-banner-text i {
        color: var(--brand);
        margin-right: 0.25rem;
    }
    .upgrade-banner-price {
        font-size: 16px;
        font-weight: 600;
        color: var(--brand-dark);
    }
    .upgrade-banner-btn {
        background: var(--brand);
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 0.5rem 1.25rem;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: transform 0.15s, box-shadow 0.15s;
    }
    .upgrade-banner-btn:hover {
        transform: translateY(-1px);
        box-shadow: none;
    }

    @media (max-width: 576px) {
        .upgrade-banner-inner { flex-direction: column; align-items: flex-start; }
    }

    .membership-shell {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .membership-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 24px;
        align-items: stretch;
        scroll-margin-top: 88px;
    }

    .membership-main-panel,
    .membership-side-panel {
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    /* ── 套餐卡断点按「容器」而非视口计算（诊断 P1-5）──
       本页处在 console 壳 224px 侧栏 + 自带 360px 支付栏的双侧栏结构里，
       1280px 视口下主面板只剩约 620px，Bootstrap col-lg-4（按视口）仍排三列，
       价格/立省被挤到换行堆叠。改为 container query 跟随真实可用宽度。 */
    .membership-main-panel { container-type: inline-size; }

    .plan-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 0;
    }

    /* 中和 Bootstrap 栅格：列宽与留白全部交给 grid 轨道 */
    .plan-card-grid > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: none;
        padding: 0;
        margin: 0;
        min-width: 0;
    }

    @container (max-width: 719px) {
        .plan-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @container (max-width: 429px) {
        .plan-card-grid { grid-template-columns: 1fr; }
    }

    /* 不支持 container query 的旧内核兜底：窄视口至少退到单列 */
    @media (max-width: 767px) {
        .plan-card-grid { grid-template-columns: 1fr; }
    }

    .membership-tab-content {
        display: none;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 28px;
        box-shadow: var(--shadow-sm);
    }

    .membership-tab-content.active {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .plan-tab-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
    }

    .plan-tab-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--ink);
    }

    .plan-tab-price {
        margin-left: 8px;
        font-size: 13px;
        font-weight: 400;
        color: var(--muted);
    }

    .price-tag {
        font-size: 12px;
        color: var(--muted);
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 1px 8px;
    }

    .plan-compare-jump {
        display: inline-block;
        margin-top: 10px;
        font-size: 13px;
        color: var(--accent-dark);
    }

    .plan-tab-desc {
        margin: 8px 0 0;
        max-width: 560px;
        font-size: 13px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .plan-tab-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.45rem 0.85rem;
        border-radius: 999px;
        background: var(--brand-soft);
        color: var(--primary);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .plan-card-grid {
        margin-bottom: 0 !important;
    }

    .membership-discount-notice {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 20px;
        padding: 12px 16px;
        border: 1px solid var(--brand-line);
        border-radius: var(--radius-sm);
        background: var(--brand-soft);
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.6;
    }

    .membership-discount-notice i {
        color: var(--accent-primary);
        font-size: 16px;
    }

    .membership-discount-notice strong {
        color: var(--accent-dark);
        font-weight: 600;
        white-space: nowrap;
    }

    .membership-discount-notice-tag {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: var(--radius-pill);
        background: var(--bg-card);
        color: var(--accent-dark);
        font-weight: 600;
        white-space: nowrap;
    }

    /* ── 紧凑会员卡：选中态对齐充值页（橙边 + 浅橙底，干净无冗余）── */
    .plan-card {
        padding: 16px;
        min-height: 0;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border);
        box-shadow: none;
        gap: 6px;
        background: var(--bg-card);
        transition: border-color 0.16s, background 0.16s;
    }

    /* 去掉顶部 3px 色条，避免与边框/选中态叠加显脏 */
    .plan-card::before { display: none; }

    .plan-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }

    /* featured = 官方推荐：常驻品牌描边 + 角标（与「选中态」分离，点别的卡推荐信息不丢失） */
    .plan-card.featured {
        background: var(--bg-card);
        border-color: var(--brand-line);
    }

    .plan-card.selected,
    .plan-card.featured.selected {
        border-color: var(--accent-primary);
        background: var(--accent-light);
        box-shadow: none;
    }

    .plan-card-selector {
        top: 13px;
        right: 13px;
        width: 18px;
        height: 18px;
        border-color: var(--border-strong);
        background: var(--bg-card);
    }

    .plan-card.selected .plan-card-selector::after {
        font-size: 12px;
    }

    /* 扫码区协议（R4）：标题 + × 关闭 + 过期刷新 */
    .wechat-qr-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    .wechat-qr-title { font-size: 14px; font-weight: 600; color: var(--ink); }
    .wechat-qr-close {
        width: 24px; height: 24px; border: 0; background: transparent;
        border-radius: 4px; color: var(--muted); font-size: 12px;
        cursor: pointer; line-height: 1;
    }
    .wechat-qr-close:hover { background: var(--surface-soft); color: var(--ink); }
    .wechat-qr-refresh {
        margin-top: 8px; height: 28px; padding: 0 12px;
        border: 1px solid var(--border); border-radius: 6px;
        background: var(--surface); color: var(--ink);
        font-size: 13px; cursor: pointer;
    }
    .wechat-qr-refresh:hover { background: var(--surface-soft); }

    /* 折扣标签：绝对定位角标 → 顶部内联小标签 */
    .badge-popular {
        position: static;
        align-self: flex-start;
        padding: 0.16rem 0.5rem;
        border-radius: 6px;
        font-size: 12px;
        margin: 0;
    }

    .plan-name {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }

    /* 卡片副文案：小字展示卖点（P1-1 可见化，替代原先的 display:none 隐藏） */
    .plan-card-copy {
        margin: 4px 0 0;
        font-size: 12px;
        line-height: 1.55;
        color: var(--text-muted);
    }

    /* 价格行：价格 + 原价 + 立省 横向基线对齐 */
    .price-row {
        margin-top: auto;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 8px;
    }

    .price {
        font-size: 16px;
        font-weight: 600;
    }

    .price .currency {
        font-size: 14px;
    }

    .price-original {
        margin: 0;
        font-size: 13px;
    }

    .price-save {
        display: inline-flex;
        align-items: center;
        margin: 0;
        padding: 0.14rem 0.45rem;
        border-radius: 6px;
        font-size: 12px;
        background: rgba(16, 185, 129, 0.12);
    }

    .upgrade-banner {
        padding: 24px 28px;
        border-radius: 12px;
        border: 1px solid var(--brand-line);
        background: var(--brand-soft);
        box-shadow: var(--shadow-sm);
    }

    .upgrade-banner-inner {
        gap: 20px;
    }

    .upgrade-banner-copy {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .upgrade-banner-label {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        width: fit-content;
        padding: 0.32rem 0.72rem;
        border-radius: 999px;
        background: var(--brand-soft);
        color: var(--primary);
        font-size: 12px;
        font-weight: 600;
    }

    .upgrade-banner-text {
        font-size: 13px;
        line-height: 1.8;
        color: var(--ink);
    }

    .upgrade-banner-text i {
        margin-right: 0;
    }

    .upgrade-banner-price {
        font-size: 16px;
        color: var(--primary-dark);
    }

    .upgrade-banner-btn {
        padding: 0.8rem 1.35rem;
        border-radius: 12px;
        background: var(--brand);
        box-shadow: 0 10px 20px var(--brand-line);
    }

    .payment-below {
        margin-top: 0;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        height: 100%;
        position: sticky;
        top: 24px;
    }

    .payment-below-header {
        display: block;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--line);
    }

    .payment-below-title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }

    /* ── 支付摘要：套餐名 + 大价格 合一行 ── */
    .payment-plan-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 16px 18px;
        margin-top: 16px;
        background: var(--bg-base);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
    }

    .payment-plan-bar-left { min-width: 0; }

    .payment-plan-bar-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payment-plan-bar-hint {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 3px;
    }

    .payment-plan-bar-discount {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 8px;
        margin-top: 7px;
        font-size: 12px;
        color: var(--text-muted);
    }

    .payment-plan-bar-discount-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 7px;
        border-radius: var(--radius-pill);
        background: var(--success-bg);
        color: var(--success-dark);
        font-weight: 600;
    }

    .payment-gift-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 12px;
        padding: 12px 14px;
        background: var(--brand-soft);
        border: 1px solid var(--brand-line);
        border-radius: 12px;
    }

    .payment-gift-card-icon {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--brand-soft);
        color: var(--brand-dark);
        font-size: 14px;
    }

    .payment-gift-card-body {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .payment-gift-card-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--brand-heavy);
        letter-spacing: 0.02em;
    }

    .payment-gift-card-rows {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .payment-gift-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        font-size: 13px;
        line-height: 1.4;
    }

    .payment-gift-row-label {
        color: var(--brand-heavy);
    }

    .payment-gift-row-value {
        font-weight: 600;
        color: var(--brand-dark);
        white-space: nowrap;
    }

    .plan-gift-badge {
        margin-top: 10px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--warning-dark);
        background: var(--brand-soft);
        border: 1px solid var(--brand-line);
        border-radius: 8px;
        padding: 3px 8px;
        line-height: 1.2;
    }

    /* 永久套餐「仅适用于桌面端」：warning 语义披露（最贵 SKU = 最强披露，防退款争议） */
    .plan-desktop-badge {
        margin-top: 8px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        font-weight: 600;
        color: var(--warning-dark);
        background: var(--warning-bg);
        border: 1px solid var(--warning-line);
        border-radius: 999px;
        padding: 2px 10px;
        line-height: 1.6;
    }

    .plan-desktop-badge i {
        font-size: 12px;
    }

    /* 支付摘要区「下载桌面端」入口：仅永久套餐选中时显示 */
    .payment-desktop-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--accent-dark);
        text-decoration: none;
    }

    .payment-desktop-link:hover {
        color: var(--accent-dark);
        text-decoration: underline;
    }

    /* 套餐期限说明条（对比表上方） */
    .plan-term-note {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0 0 16px;
        padding: 12px 14px;
        background: var(--surface-soft);
        border: 1px solid var(--line);
        border-radius: 12px;
        font-size: 13px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .plan-term-note strong {
        color: var(--text-primary);
        font-weight: 600;
    }

    /* 金额与货币符号基线对齐（与充值页 .rc-pay-amount 同阶：20 + 28），不用 <sup> */
    .payment-plan-bar-price {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
        font-size: 28px;
        font-weight: 600;
        color: var(--primary);
        line-height: 1;
        flex-shrink: 0;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .payment-plan-bar-price .currency {
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    }

    .payment-below-ab {
        gap: 20px;
    }

    .payment-below-col-a,
    .payment-below-col-b {
        width: 100%;
    }

    .payment-below-col-a {
        gap: 16px;
        align-items: stretch;
    }

    .payment-below-row-one {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 8px;
    }

    .payment-below-methods-label {
        margin: 0;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }

    .payment-below-methods {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }

    .payment-below .payment-method-btn {
        display: flex;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0;
        height: 32px;
        gap: 6px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--surface);
        font-weight: 600;
        font-size: 14px;
        padding: 0 12px;
        white-space: nowrap;
        justify-content: center;
        align-items: center;
        transition: all 0.18s ease;
        color: var(--text-secondary);
    }

    /* 支付按钮：主 CTA，与方法选择器拉开间距 */
    .payment-below-row-one #payBtn {
        margin-top: 6px;
    }

    .payment-below .payment-method-btn:hover { border-color: var(--border); background: var(--surface-soft); }

    .payment-below .payment-method-btn.active {
        border-color: var(--primary);
        background: var(--brand-soft);
        box-shadow: 0 0 0 3px var(--brand-soft);
        color: var(--ink);
    }

    .payment-below .payment-method-btn i.fa-weixin { color: #07c160 !important; }
    .payment-below .payment-method-btn i.fa-alipay { color: #1677ff !important; }
    .payment-below .btn-wechat i,
    .payment-below .btn-alipay i { color: #fff; }

    .btn-wechat,
    .btn-alipay {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 40px;   /* 转化 CTA 40 档（规范 §3） */
        border-radius: 8px;
        font-weight: 600;
    }

    .payment-below-row-one .btn-wechat,
    .payment-below-row-one .btn-alipay {
        flex: none;
        min-width: 0;
        width: 100%;
        padding: 0;
    }

    .payment-below-hint {
        display: block;
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid var(--line);
        background: var(--surface-soft);
        font-size: 13px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .payment-below .wechat-qr-section {
        width: 100%;
        min-width: 0;
        padding: 18px;
        background: var(--surface-soft);
        border: 1px dashed var(--border);
        border-radius: 12px;
    }

    .qrcode-wrap {
        padding: 14px;
        border-radius: 12px;
        background: var(--surface);
    }

    .membership-highlights {
        margin-top: 20px;
        padding: 22px 24px;
        border-radius: 12px;
        background: var(--surface);
        border: 1px solid var(--line);
    }

    .membership-highlights-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
    }

    .membership-highlights-title {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
    }

    .membership-highlights-desc {
        margin: 6px 0 0;
        font-size: 14px;
        line-height: 1.7;
        color: var(--text-secondary);
    }

    .membership-highlights-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* 会员亮点卡片已迁移到公共组件 .card-surface + .card-ico（见《UI样式规范》第4节） */
    .membership-highlight-body {
        min-width: 0;
        width: 100%;
    }

    /* ── 套餐快速对比表 ── */
    .plan-compare-wrap {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 28px;
        box-shadow: var(--shadow-sm);
    }

    .plan-compare-label {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.75rem;
        border-radius: 999px;
        background: var(--brand-soft);
        color: var(--primary);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 16px;
    }

    .plan-compare-table {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .plan-compare-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        min-width: 460px;
    }

    .plan-compare-table thead th {
        padding: 10px 16px;
        font-weight: 600;
        font-size: 14px;
        color: var(--ink);
        background: var(--surface-soft);
        border-bottom: 2px solid var(--line);
        text-align: center;
    }

    .plan-compare-table thead th:first-child {
        text-align: left;
        border-radius: 8px 0 0 0;
    }

    .plan-compare-table thead th:last-child {
        border-radius: 0 8px 0 0;
    }

    .plan-compare-table thead th.col-pro {
        background: var(--brand-soft);
        color: var(--primary);
    }

    .plan-compare-table tbody td {
        padding: 10px 16px;
        border-bottom: 1px solid var(--line);
        color: var(--text-secondary);
        text-align: center;
        vertical-align: middle;
    }

    .plan-compare-table tbody td:first-child {
        text-align: left;
        color: var(--text-primary);
        font-weight: 500;
    }

    .plan-compare-table tbody tr:last-child td {
        border-bottom: none;
    }

    .plan-compare-table tbody tr:hover td {
        background: var(--surface-soft);
    }

    .plan-compare-table .chk-yes {
        color: var(--success);
        font-weight: 600;
        font-size: 14px;
    }

    .plan-compare-table .chk-no {
        color: var(--ink-disabled);
    }

    .plan-compare-table .price-cell {
        font-size: 16px;
        font-weight: 600;
        color: var(--primary);
    }

    .plan-compare-more {
        margin-top: 14px;
        text-align: right;
    }

    .plan-compare-more a {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--primary);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    .plan-compare-more a:hover {
        color: var(--primary-dark);
        text-decoration: underline;
    }

    /* ── 企业 / 团队采购 ── */
    .enterprise-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 28px;
        align-items: center;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 28px;
    }
    .enterprise-title { margin: 12px 0 8px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
    .enterprise-desc { margin: 0 0 18px; font-size: 14px; line-height: 1.75; color: var(--text-secondary); }
    .enterprise-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .enterprise-point { display: flex; align-items: flex-start; gap: 11px; }
    .enterprise-point-ic {
        width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm);
        background: var(--accent-light); color: var(--accent-primary);
        display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .enterprise-point strong { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .enterprise-point span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
    .enterprise-contact { display: flex; justify-content: center; }
    .enterprise-contact-card {
        text-align: center; background: var(--bg-base); border: 1px solid var(--border-color);
        border-radius: var(--radius); padding: 18px;
    }
    .enterprise-contact-card .qrcode-wrap { margin: 0 auto; }
    .enterprise-contact-name { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
    .enterprise-contact-hint { margin-top: 4px; font-size: 12px; color: var(--text-muted); }

    @media (max-width: 880px) {
        .enterprise-wrap { grid-template-columns: 1fr; }
        .enterprise-points { grid-template-columns: 1fr; }
    }

    @media (max-width: 576px) {
        .plan-compare-wrap { padding: 20px 16px; }
        .plan-compare-more { text-align: left; }
        .enterprise-wrap { padding: 20px 16px; }
    }

    .pay-hint {
        margin-top: 0;
    }

    .hint-card {
        padding: 28px;
        border-radius: 12px;
        border: 1px solid var(--line);
        box-shadow: var(--shadow-sm);
        gap: 24px;
    }

    @media (max-width: 767px) {
        .membership-highlights {
            padding: 18px;
        }

        .membership-highlights-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 1199px) {
        .membership-grid {
            grid-template-columns: 1fr;
        }

        .payment-below {
            position: static;
        }
    }

    @media (max-width: 767px) {
        .membership-tab-content,
        .payment-below,
        .hint-card {
            padding: 20px;
        }

        .plan-tab-head {
            flex-direction: column;
        }
    }

    @media (max-width: 576px) {
        .membership-discount-notice {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .payment-below-methods {
            width: 100%;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .payment-below-row-one .btn-wechat,
        .payment-below-row-one .btn-alipay {
            min-width: 0;
            width: 100%;
            flex: none;
        }

        .plan-card {
            min-height: auto;
        }
    }

    /* 双档并列：两个 tier 区块按内容高度自然堆叠，不被列拉伸 */
    .membership-main-panel > .membership-tab-content.active { flex: 0 0 auto; }

.membership-page,
.quota-page {
    padding: 32px 0 56px;
    background: var(--layout-bg);
}

.hero-section,
.cta-section {
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
}
.hero-section::before { display: none; }
.hero-title span { color: var(--brand-heavy); }
.hero-subtitle,
.cta-section p { color: var(--ink-secondary); }

.membership-shell,
.membership-grid,
.membership-main-panel,
.membership-side-panel,
.membership-tab-content,
.payment-below,
.rc,
.rc-grid,
.rc-config,
.rc-side,
.pg,
.pg-grid {
    min-width: 0;
    max-width: 100%;
}

.ms-head-title,
.rc-head h1,
.pg-head-title,
.page-header h1 {
    color: var(--ink);
    font-size: var(--fs-h1);
    font-weight: 600;
    letter-spacing: 0;
}

.ms-head-desc,
.rc-head p,
.pg-head-desc,
.page-header p { color: var(--ink-secondary); }

.ms-head-tag,
.pg-rate {
    border-color: var(--line);
    border-radius: 4px;
    background: var(--surface);
    color: var(--ink-secondary);
    font-weight: 500;
}

.membership-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
}

.membership-tab-content,
.payment-below,
.rc-config,
.rc-balance-card,
.rc-pay,
.pg-card,
.step-section,
.payment-section,
.notice-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.membership-tab-content,
.payment-below {
    padding: 24px;
}

.plan-tab-title,
.payment-below-title,
.rc-balance-title,
.rc-pay-title,
.pg-card-title,
.step-title,
.payment-title,
.notice-title {
    color: var(--ink);
    font-weight: 600;
}

.plan-card,
.rc-type,
.rc-vpill,
.api-card,
.payment-method-btn,
.quick-btn {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: none;
    transform: none;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.plan-card:hover,
.rc-type:hover,
.rc-vpill:hover,
.api-card:hover:not(.disabled),
.payment-method-btn:hover,
.quick-btn:hover {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: none;
    transform: none;
}

.plan-card.selected,
.plan-card.featured.selected,
.rc-type.active,
.rc-vpill.active,
.api-card.selected,
.payment-method-btn.active,
.quick-btn.active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-heavy);
    box-shadow: none;
}

.plan-card {
    min-height: 0;
    padding: 16px;
    cursor: pointer;
}
.plan-card::before { display: none; }
.plan-card-selector {
    width: 18px;
    height: 18px;
    border-color: var(--border);
}
.plan-card.selected .plan-card-selector {
    border-color: var(--brand);
    background: var(--brand);
}
.plan-name,
.price,
.payment-plan-bar-name,
.payment-plan-bar-price,
.rc-pay-amount {
    color: var(--ink);
    font-weight: 600;
}
.price { font-size: 16px; }
.price-save { color: var(--success-dark); font-weight: 500; }
.badge-popular {
    background: var(--warning-bg);
    color: var(--warning-dark);
    border: 1px solid var(--warning-line);
    box-shadow: none;
    font-weight: 500;
}

.payment-below {
    position: sticky;
    top: 76px;
}
.payment-plan-bar,
.payment-gift-card,
.payment-below-hint,
.rc-pay-total {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    box-shadow: none;
}
.payment-below-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.payment-method-btn {
    min-height: 40px;
    font-weight: 500;
}
.btn-wechat,
.btn-alipay,
.rc-cta,
.btn-pay {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    box-shadow: none;
    transform: none;
    font-weight: 500;
}
.btn-wechat:hover,
.btn-alipay:hover,
.rc-cta:hover,
.btn-pay:hover {
    background: var(--brand-hover);
    color: #fff;
    box-shadow: none;
    transform: none;
}
/* 渠道色只给「支付方式」切换钮；主 CTA 是品牌橙，图标跟白字走，避免绿/蓝标打在橙底上 */
.payment-method-btn i.fa-weixin { color: #07c160; }
.payment-method-btn i.fa-alipay { color: #1677ff; }
.btn-wechat i,
.btn-alipay i,
.rc-cta > i,
.btn-pay > i { color: #fff; }

.wechat-qr-section,
.upgrade-qr-section,
.upgrade-qr {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-soft);
}

.upgrade-banner,
.upgrade-callout {
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-md);
    background: var(--brand-tint);
    box-shadow: none;
}
.upgrade-banner-btn,
.upgrade-pay-btn {
    min-height: 40px;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    box-shadow: none;
    transform: none;
    font-weight: 500;
}

.membership-highlights-grid .card-surface,
.enterprise-wrap,
.hint-card,
.plan-compare-wrap {
    border-radius: var(--radius-md);
    box-shadow: none;
}

.rc-type.active .ic {
    background: var(--brand-soft);
    color: var(--brand-heavy);
    box-shadow: none;
}
.rc-balance-row b,
.rc-pay-amount,
.payment-plan-bar-price,
.price-total { font-variant-numeric: tabular-nums; }
.rc-pay { box-shadow: var(--shadow-sm); }
.rc-pay-title { text-transform: none; letter-spacing: 0; }
.rc-pay-total { background: var(--brand-tint); border-color: var(--brand-line); }
.rc-pay-amount,
.rc-pay-amount .currency { color: var(--brand-heavy) !important; }
/* .rc-gate 的三条声明与文件末尾收银台段完全重复（边框 / 底色一致，color 已改走 ink 阶梯），
   收敛层在前、末尾段在后，同特异性下本来就吃不到。留着只会让人误以为门槛色有两个来源。 */
.rc-capability-card {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-md);
    background: var(--brand-tint);
}
.rc-capability-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 9px;
    color: var(--brand-heavy);
    font-size: 13px;
    font-weight: 600;
}
.rc-capability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.rc-capability-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink-secondary);
    font-size: 12px;
}
.rc-capability-cost {
    color: var(--brand-heavy);
    font-weight: 600;
    white-space: nowrap;
}
.rc-capability-note {
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
}
.rc-capability-note a { color: var(--brand-heavy); font-weight: 600; }
.rc-success {
    border-color: var(--success-line);
    background: var(--success-bg);
    box-shadow: none;
}
.rc-pending {
    border-color: var(--warning-line);
    background: var(--warning-bg);
    box-shadow: none;
}

.pg-rename-note {
    border-color: var(--info-line);
    background: var(--info-bg);
}
.pg-rename-icon {
    background: var(--surface);
    color: var(--info-dark);
    box-shadow: none;
}
.pg-card { box-shadow: var(--shadow-sm); }
.pg-card-icon,
.card-ico {
    background: var(--brand-soft);
    color: var(--brand-heavy);
    box-shadow: none;
}

.result-page {
    width: min(680px, calc(100% - 32px));
    margin: 48px auto;
}
.result-card {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--success-dark);
    font-size: 24px; /* result icon 图形尺寸 */;
}
.result-card.is-error .result-icon {
    background: var(--danger-bg);
    color: var(--danger-dark);
}
.result-title { margin: 0 0 8px; font-size: var(--fs-h1); font-weight: 600; }
.result-message { color: var(--ink-secondary); line-height: 1.7; }
.result-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 24px;
}

@media (max-width: 1199px) {
    .membership-grid { grid-template-columns: 1fr; }
    .payment-below { position: static; }
}

@media (max-width: 768px) {
    .membership-page,
    .quota-page { padding: 24px 0 40px; }
    .membership-tab-content,
    .payment-below,
    .rc-config,
    .rc-pay,
    .pg-card,
    .step-section,
    .payment-section,
    .notice-card { padding: 16px; }
    .payment-below-methods { grid-template-columns: 1fr; }
    .result-actions { flex-direction: column; }
    .result-actions .btn { min-height: 44px; }
    .membership-page > .container,
    .quota-page > .container { padding-inline: 12px; }
    .membership-page .row { --bs-gutter-x: 12px; }
    .membership-page .plan-card-grid > [class*="col-"] { min-width: 0; }
    .rc { padding-inline: 12px; }
    .rc-capability-grid { grid-template-columns: 1fr !important; }
    .rc-capability-item { min-width: 0; }
}

/* ===== R4 · 充值微信通道（支付方式选择 + 扫码区 + 入账失败横幅），全部走令牌 ===== */
.rc-failed {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 18px; border: 1px solid var(--danger-line);
    background: var(--danger-bg); border-radius: 8px; margin-bottom: 16px;
}
.rc-failed .ic { flex: none; color: var(--danger); font-size: 16px; margin-top: 1px; }
.rc-failed-title { font-size: 14px; font-weight: 600; color: var(--danger-dark); margin-bottom: 2px; }
.rc-failed-detail { font-size: 13px; color: var(--ink-secondary); line-height: 1.6; }
.rc-failed-detail a { color: var(--danger-dark); font-weight: 500; text-decoration: underline; }

.rc-pm-row { display: flex; gap: 8px; margin-top: 6px; }
.rc-pm {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-secondary);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.rc-pm:hover { background: var(--surface-soft); color: var(--ink); }
.rc-pm.active { border-color: var(--brand-line); background: var(--brand-soft); color: var(--ink); font-weight: 600; }
.rc-pm:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.rc-qr { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-align: center; }
.rc-qr-head { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.rc-qr-close {
    width: 24px; height: 24px; border: 0; background: transparent; border-radius: 4px;
    color: var(--muted); font-size: 12px; cursor: pointer; line-height: 1;
}
.rc-qr-close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.rc-qr img { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.rc-qr-status { margin-top: 8px; font-size: 13px; color: var(--ink-secondary); line-height: 1.6; }
.rc-qr-actions { margin-top: 8px; }
.rc-qr-btn {
    height: 28px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink); font-size: 13px; cursor: pointer;
}
.rc-qr-btn:hover { background: var(--surface-soft); }

/* ============================================================
   充值中心 · 收银台（spec 20260730-usercenter-recharge-redesign）

   本节必须留在文件末尾：上面 2900+ 行是跨页「规范收敛层」，它按选择器
   列表批量覆盖 .rc-*，写在它前面的充值样式会被吃掉。

   字阶只用 12/14/16/20/28。28 是全页唯一的大字，独给实付金额——原来
   页面标题、套餐价、到账豆数、支付金额全是 20px，收银台没有焦点。
   ============================================================ */
/* 1600 是内容宽上限；实际会被外壳的主区宽度（shell 1680 − 侧栏 224 − gap）先卡住，
   所以效果等同于「填满主区」。写 1600 是为了外壳将来放宽时不用再改这里。 */
.rc { max-width: 1600px; margin: 0 auto; padding: 0 0 48px; }
/* 作者样式里的 display 会盖过 UA 的 [hidden]。统一兜一层，才能安全地用 hidden 属性
   代替 style.display —— hidden 会同时移出 Tab 序列和无障碍树，style.display 不保证。 */
.rc [hidden] { display: none !important; }
.rc-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* —— 页头：标题 + 「两种豆是什么」入口 —— */
.rc-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.rc-head-txt { min-width: 0; }
.rc-head p { margin: 7px 0 0; font-size: 14px; }
/* 描边而非实心橙：实心橙是主 CTA 的专属，说明入口不该和「立即充值」抢同级权重 */
.rc-explain-btn {
    flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
    padding: 8px 16px; border: 1px solid var(--brand-line); border-radius: var(--radius-pill);
    background: var(--brand-soft); color: var(--brand-heavy);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rc-explain-btn:hover { background: var(--brand-soft-strong); border-color: var(--brand); }
.rc-explain-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* —— 说明弹窗：用原生 dialog，焦点陷阱 / Esc / backdrop 都归浏览器管 —— */
.rc-beans-dlg {
    width: min(700px, calc(100vw - 32px)); padding: 0; border: 0; color: var(--ink);
    border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md);
}
.rc-beans-dlg::backdrop { background: rgba(0, 0, 0, .45); }
/* 内边距统一走 --rc-dlg-pad：表格是 width:100% 的，只有首/末列各自缩进才能和
   头部、脚注对齐成一条边；写死在多处会漂。 */
.rc-beans-dlg { --rc-dlg-pad: 28px; }
.rc-beans-head {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 26px var(--rc-dlg-pad) 0;
}
.rc-beans-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.rc-beans-close {
    margin-left: auto; flex: none; width: 32px; height: 32px; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--ink-secondary); cursor: pointer; transition: background var(--dur-fast);
}
.rc-beans-close:hover { background: var(--surface-soft); color: var(--ink); }
.rc-beans-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.rc-beans-lede { margin: 10px var(--rc-dlg-pad) 0; font-size: 13px; color: var(--ink-secondary); line-height: 1.7; }
.rc-beans-cmp { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 13px; }
.rc-beans-cmp th,
.rc-beans-cmp td { padding: 13px 14px; text-align: left; vertical-align: top; line-height: 1.65; border-top: 1px solid var(--line); }
/* 首/末列贴齐弹窗内边距；当前档的高亮底色仍铺到边（padding 在单元格内） */
.rc-beans-cmp th:first-child,
.rc-beans-cmp td:first-child { padding-left: var(--rc-dlg-pad); }
.rc-beans-cmp th:last-child,
.rc-beans-cmp td:last-child { padding-right: var(--rc-dlg-pad); }
.rc-beans-cmp thead th { border-top: 0; padding-bottom: 14px; }
.rc-beans-cmp thead th:first-child { width: 84px; }
.rc-beans-cmp .name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.rc-beans-cmp .rowk { color: var(--ink-secondary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rc-beans-cmp td { color: var(--ink-secondary); }
.rc-beans-cmp b { color: var(--ink); font-weight: 600; }
/* 打开时高亮用户当前选的那一种，弹窗和页面状态对得上 */
.rc-beans-cmp.cur-platform [data-col="platform"],
.rc-beans-cmp.cur-citydb [data-col="citydb"] { background: var(--brand-tint); }
.rc-beans-cur {
    margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--brand-line); background: var(--brand-soft);
    color: var(--brand-heavy); font-size: 12px; font-weight: 500;
}
/* 两条脚注并排堆叠：只有第一条带上分隔线，之间靠 padding 收窄不重复描边 */
.rc-beans-foot {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    padding: 14px var(--rc-dlg-pad); border-top: 1px solid var(--line);
    font-size: 12px; color: var(--ink-secondary); line-height: 1.7;
}
.rc-beans-foot + .rc-beans-foot { border-top: 0; padding-top: 0; }
.rc-beans-foot:last-of-type { padding-bottom: 24px; }
.rc-beans-foot > i { margin-top: 3px; }
.rc-beans-foot a { color: var(--brand-heavy); font-weight: 500; text-decoration: underline; }
/* 弹窗在 top layer，宽度只跟视口走，所以这里用媒体查询而非容器查询 */
@media (max-width: 560px) {
    .rc-beans-dlg { --rc-dlg-pad: 16px; }
    .rc-beans-cmp thead th:first-child { width: auto; }
    .rc-beans-cmp th,
    .rc-beans-cmp td { padding: 10px; }
    .rc-beans-cmp th:first-child,
    .rc-beans-cmp td:first-child { padding-left: var(--rc-dlg-pad); }
    .rc-beans-cmp th:last-child,
    .rc-beans-cmp td:last-child { padding-right: var(--rc-dlg-pad); }
}

/* —— 回跳横幅（.rc-failed 在上面 R4 段已定义）—— */
.rc-success,
.rc-pending {
    display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px;
    padding: 14px 18px; border-radius: var(--radius); box-shadow: none;
}
.rc-success { border: 1px solid var(--success-line); background: var(--success-bg); }
.rc-pending { border: 1px solid var(--warning-line); background: var(--warning-bg); }
/* 语义色只承担「这是什么状态」，不承担「读得清」：--success-dark 压在 --success-bg 上
   只有 3.37:1、--warning-dark 压在 --warning-bg 上只有 2.76:1，都不到 WCAG AA 的 4.5:1。
   状态由图标 + 边框 + 底色三层表达（图标 aria-hidden，属装饰不受文字对比度约束），
   文字一律走 ink 阶梯。不动全局语义令牌——那是全站决策，见 spec 遗留项 8。 */
.rc-success .ic { flex: none; color: var(--success-dark); font-size: 16px; margin-top: 1px; }
.rc-pending .ic { flex: none; color: var(--warning-dark); font-size: 16px; margin-top: 1px; }
.rc-success-title,
.rc-pending-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.rc-success-detail,
.rc-pending-detail { font-size: 13px; color: var(--ink-secondary); line-height: 1.6; }
.rc-success-detail b { font-weight: 600; }
.rc-success-expiry { font-weight: 600; color: var(--ink); }
/* 链接用 --brand-heavy（在 --warning-bg 上 5.22:1），下划线保证不只靠颜色区分 */
.rc-pending-detail a { color: var(--brand-heavy); font-weight: 500; text-decoration: underline; }

/* —— 两栏 —— */
.rc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 1120px) { .rc-grid { grid-template-columns: 1fr; } }

/* 容器查询：芯片住在左栏这根窄列里，断点必须跟着容器走。
   视口 1121px 时左栏内容只有约 397px，而按视口写的断点要到 820px 才换行，
   五张芯片会各挤到 70px，「¥300」和「300,000 豆」都放不下。 */
.rc-config { container-type: inline-size; container-name: cfg; padding: 0 26px 26px; }

/* —— 配置区块：分隔线代替步骤编号 —— */
.rc-block { padding: 24px 0 0; }
.rc-block + .rc-block { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.rc-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
/* 区块标题是标签，比卡内锚点小一档，让内容当主角 */
.rc-block-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.rc-block-note { font-size: 12px; color: var(--ink-secondary); }

/* —— 通用单选组：一种实现，键盘 + 读屏都可用 —— */
.rc-opt-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@container cfg (max-width: 430px) { .rc-opt-row { grid-template-columns: 1fr; } }
.rc-type,
.rc-vpill {
    position: relative; display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.rc-type:hover,
.rc-vpill:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.rc-type[aria-checked="true"],
.rc-vpill[aria-checked="true"] {
    border-color: var(--brand); background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.rc-type:focus-visible,
.rc-vpill:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 充值类型：锚点 = 豆名称 */
.rc-type { display: flex; align-items: flex-start; gap: 12px; }
.rc-type .ic {
    width: 38px; height: 38px; flex: none; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--surface-soft); color: var(--ink-secondary); font-size: 16px;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.rc-type[aria-checked="true"] .ic { background: var(--brand-soft-strong); color: var(--brand-heavy); }
.rc-type .bd { min-width: 0; }
.rc-type .ttl { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.rc-type .desc { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-secondary); line-height: 1.55; }

/* 有效期：锚点 = 天数，计价关系收成右侧中性小标 */
.rc-vpill .row { display: flex; align-items: center; gap: 10px; }
.rc-vpill .d { font-size: 16px; font-weight: 600; color: var(--ink); }
/* 「推荐」是真实建议（同样豆数只要一半价格），不是促销。用与金额芯片同一枚中性标，
   选中时才上品牌色——不给橙色再加一层含义。 */
.rc-vpill .rec {
    margin-left: 6px; padding: 1px 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface-soft);
    color: var(--ink-secondary); font-size: 12px; font-weight: 500;
    line-height: 16px; vertical-align: 2px;
}
.rc-vpill[aria-checked="true"] .rec { border-color: var(--brand-line); background: var(--brand-soft-strong); color: var(--brand-heavy); }
.rc-vpill .sub { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-secondary); line-height: 1.55; }

/* 计价规则：素文字。用蓝色信息框会和橙色选中态抢注意力 */
.rc-pricing-note {
    display: flex; gap: 7px; align-items: flex-start; margin: 12px 0 0;
    font-size: 12px; line-height: 1.7; color: var(--ink-secondary);
}
.rc-pricing-note b { color: var(--ink); font-weight: 600; }

/* —— 金额：单一维度（原「套餐 × 份数」是同一个数的冗余分解）—— */
.rc-amt-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@container cfg (max-width: 470px) { .rc-amt-row { grid-template-columns: repeat(3, 1fr); } }
@container cfg (max-width: 290px) { .rc-amt-row { grid-template-columns: repeat(2, 1fr); } }
.rc-amt {
    position: relative; cursor: pointer; text-align: center; padding: 11px 8px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.rc-amt:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.rc-amt[aria-checked="true"] {
    border-color: var(--brand); background: var(--brand-soft);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.rc-amt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* 标签行每张卡都占位，价格基线才对得齐；原来的金标压在描边上像渲染 bug */
.rc-amt .tagline { display: block; height: 18px; margin-bottom: 6px; }
.rc-amt .tag {
    display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface-soft);
    color: var(--ink-secondary); font-size: 12px; font-weight: 500; line-height: 16px;
}
.rc-amt[aria-checked="true"] .tag { border-color: var(--brand-line); background: var(--brand-soft-strong); color: var(--brand-heavy); }
.rc-amt .yuan {
    display: flex; align-items: baseline; justify-content: center; gap: 1px;
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.rc-amt .cur { font-size: 14px; font-weight: 500; color: var(--ink-secondary); }
.rc-amt .p { font-size: 20px; font-weight: 600; color: var(--ink); }
.rc-amt[aria-checked="true"] .cur,
.rc-amt[aria-checked="true"] .p { color: var(--brand-heavy); }
.rc-amt .beans { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
/* 重新计价高亮：切有效期时让价格变化被看见。只是视觉辅助——
   读屏与 reduced-motion 用户靠 #rcLiveMsg 播报，不靠这个动画。 */
@keyframes rc-repriced {
    from { background: var(--warning-bg); border-radius: 4px; }
    to { background: transparent; }
}
.rc-amt.is-repriced .yuan { animation: rc-repriced 1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rc-amt.is-repriced .yuan { animation: none; } }

/* 自定义金额 */
.rc-amt-custom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.rc-amt-custom-label { font-size: 14px; color: var(--ink-secondary); }
.rc-amt-custom-label b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rc-stepper {
    display: inline-flex; align-items: center; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface); overflow: hidden;
}
.rc-stepper button {
    width: 40px; height: 40px; border: 0; background: var(--surface-soft); color: var(--ink-secondary);
    cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast);
}
.rc-stepper button:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-heavy); }
.rc-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.rc-stepper button:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
/* readonly 解除：可直接键入，校验放到 blur —— 原来充 ¥300 要点 19 次加号 */
.rc-stepper input {
    width: 92px; height: 40px; border: 0;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
    text-align: center; font-size: 16px; font-weight: 600; color: var(--ink);
    background: var(--surface); font-variant-numeric: tabular-nums;
}
.rc-stepper input:focus-visible { outline: none; box-shadow: var(--focus-ring) inset; }
.rc-amt-cap { margin-top: 10px; font-size: 12px; color: var(--ink-secondary); }
/* 升档提示：达档断崖的正向用法。用成功绿而非品牌橙——橙已被选中态和主 CTA 占满，
   这是一条「你还能多拿」的收益，和顺延行同源。 */
.rc-amt-next {
    margin-top: 10px; padding: 8px 11px;
    border: 1px solid var(--success-line); border-radius: var(--radius-sm);
    /* 绿由边框与底色承担；文字走 --ink，--success-dark 在 --success-bg 上只有 3.37:1 */
    background: var(--success-bg); color: var(--ink);
    font-size: 12px; font-weight: 500; line-height: 1.6;
}
.rc-amt-err { display: none; align-items: flex-start; gap: 6px; margin-top: 9px; font-size: 12px; color: var(--danger-dark); line-height: 1.6; }
.rc-amt-err.show { display: flex; }

/* —— 用途说明：启用 .rc-capability-*（组件早就写好，模板此前零引用）—— */
.rc-capability-card {
    margin-top: 24px; padding: 15px 16px;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft);
}
.rc-capability-title { margin-bottom: 11px; font-size: 14px; color: var(--ink); }
.rc-capability-cost { color: var(--ink); }
.rc-capability-note { color: var(--ink-secondary); line-height: 1.65; }
.rc-capability-note a { color: var(--brand-heavy); }

/* —— 右栏 —— */
.rc-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1120px) { .rc-side { position: static; } }

/* 余额卡 = 参考信息：无阴影、标题降权，与支付卡拉开层级 */
.rc-balance-card { padding: 16px 18px; box-shadow: none; }
.rc-balance-title { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rc-balance-row {
    display: flex; align-items: center; gap: 9px; padding: 10px 0;
    font-size: 14px; color: var(--ink-secondary); border-bottom: 1px solid var(--line);
}
.rc-balance-row:last-of-type { border-bottom: 0; }
.rc-balance-row b { margin-left: auto; font-size: 16px; font-weight: 600; color: var(--ink); }
.rc-balance-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rc-balance-row .dot.platform { background: var(--brand); }
.rc-balance-row .dot.citydb { background: var(--info); }
/* 到期提示分三档。原来只有一个恒定橙 pill，今天到期和一个月后到期长得一模一样。 */
.rc-balance-expiry {
    display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft);
    font-size: 12px; color: var(--ink-secondary); line-height: 1.55;
}
/* soon 档的文字改走 ink：--warning-dark 在 --warning-bg 上 2.76:1，连大字 3.0 都不到。
   critical 档保留 --danger-dark（在 --danger-bg 上 5.10:1，达标），红字本身是有效强调。 */
.rc-balance-expiry.tier-soon { border-color: var(--warning-line); background: var(--warning-bg); color: var(--ink-secondary); }
.rc-balance-expiry.tier-soon > i { color: var(--warning-dark); }
.rc-balance-expiry.tier-critical { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-dark); font-weight: 600; }
/* 数据豆没有到期这回事：压过三档紧迫度配色，回到中性叙述 */
.rc-balance-expiry.is-citydb {
    border-color: var(--line); background: var(--surface-soft);
    color: var(--ink-secondary); font-weight: 400;
}
.rc-balance-expiry.is-citydb > i { color: var(--ink-secondary); }
.rc-balance-renew {
    display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px; min-height: 36px; padding: 8px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--danger-line); background: var(--surface); color: var(--danger-dark);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: background var(--dur-fast);
}
.rc-balance-renew:hover { background: var(--danger-bg); }
.rc-balance-renew:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* 支付卡 = 行动焦点 */
.rc-pay { padding: 22px; box-shadow: var(--shadow-md); }
.rc-pay-title { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
.rc-pay-line {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    margin: 0; padding: 11px 0; border-top: 0; border-bottom: 1px solid var(--line);
}
.rc-pay-line .k { font-size: 14px; color: var(--ink-secondary); }
.rc-pay-line .v { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.rc-pay-line .v small { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--ink-secondary); }
/* 有效期顺延行：全页唯一一处「你还多拿到了什么」。用成功绿而非品牌橙——
   橙已经被选中态和主 CTA 占满，再塞进来这条收益会被读成又一个选项。 */
/* 绿留在图标上（3.46:1 的绿字在白底上不达 AA，而这行是要被读的收益，不是装饰） */
.rc-pay-ext .k { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.rc-pay-ext .k > i { color: var(--success-dark); }
.rc-pay-ext .v { color: var(--ink); }
.rc-pay-ext .v small { color: var(--ink-secondary); }

/* 唯一价格 + 唯一焦点 */
.rc-pay-total {
    display: block; margin-top: 16px; padding: 16px 18px;
    border: 1px solid var(--brand-line); border-radius: var(--radius); background: var(--brand-tint);
}
.rc-pay-total-k { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
/* 计价构成注记：中性事实，不用警示色——多付一倍是个正常选项，不是风险 */
.rc-pay-mult {
    flex: none; padding: 2px 9px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-secondary);
    font-size: 12px; font-weight: 500; white-space: nowrap;
}
.rc-pay-amount {
    display: flex; align-items: baseline; gap: 2px; margin-top: 8px;
    line-height: 1; font-variant-numeric: tabular-nums;
}
.rc-pay-amount .currency { font-size: 20px; font-weight: 600; }
.rc-pay-amount .num { font-size: 28px; font-weight: 600; }
.rc-pay-amount small { font-size: 14px; font-weight: 500; color: var(--ink-secondary); margin-left: 4px; }
.rc-pay-sub { margin-top: 8px; font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.rc-pay-pm-k { margin: 18px 0 8px; font-size: 12px; font-weight: 600; color: var(--ink-secondary); }
/* 渠道图标色（原来写在模板内联 style 里，收进样式层） */
.rc-pm i.fa-alipay { color: #1677ff; }
.rc-pm i.fa-weixin { color: #07c160; }

/* CTA：门槛态不再伪装成可支付的主按钮 */
.rc-cta { min-height: 44px; margin-top: 18px; font-size: 16px; font-weight: 600; }
.rc-cta.is-gated { background: var(--surface); border-color: var(--border); color: var(--ink-secondary); }
.rc-cta.is-gated:hover { background: var(--surface-soft); border-color: var(--brand-line); color: var(--brand-heavy); }
.rc-cta.is-gated > i { color: var(--brand-heavy); }
/* 提交中：按钮进入等待态并挡住连点。支付宝是整页跳转，这个态只存在到页面离开为止。 */
.rc-cta:disabled { opacity: .65; cursor: not-allowed; }
.rc-cta:disabled:hover { background: var(--brand); border-color: var(--brand); }
/* 门槛解释从左栏搬到按钮正上方——原来它在左栏，用户视线落在右栏时根本看不到 */
.rc-gate {
    display: none; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 11px 13px;
    border: 1px solid var(--warning-line); border-radius: var(--radius-sm); background: var(--warning-bg);
    /* 全页最不该看不清的一段：它是在告诉被拦住的用户「为什么不能付」。
       原来是 12px 的 --warning-dark 压在 --warning-bg 上，2.76:1。 */
    font-size: 12px; line-height: 1.65; color: var(--ink-secondary);
}
.rc-gate.show { display: flex; }
.rc-gate > i { color: var(--warning-dark); }
.rc-gate b { font-weight: 600; color: var(--ink); }
.rc-gate a { color: var(--brand-heavy); font-weight: 600; text-decoration: underline; }

.rc-trust { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 9px; }
.rc-trust span { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-secondary); line-height: 1.5; }

@media (max-width: 768px) {
    .rc-config { padding: 0 16px 16px; }
    .rc-amt-custom { gap: 10px; }
}