/* 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-current { color: var(--accent-dark); }
  .pg-rename-copy { margin: 3px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
  .pg-rename-copy a { color: var(--accent-dark); font-weight: 600; text-underline-offset: 2px; }

  /* 两栏卡片 */
  .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: center; justify-content: space-between; gap: 12px; 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: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
    .ms-head-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .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: 4px 10px; 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: stretch;
        gap: 0.75rem;
        width: 100%;
    }

    .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-col-a > .btn-wechat,
    .payment-below-col-a > .btn-alipay {
        flex: none;
        width: 100%;
        align-self: stretch;
    }

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

    /* 扫码区：默认隐藏，生成后插在支付方式与支付按钮之间 */
    .payment-below .wechat-qr-section {
        display: none;
        margin: 0;
        padding: 8px;
        background: var(--bg-page);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        text-align: center;
        width: 100%;
        min-width: 0;
        align-self: stretch;
    }

    .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: 10px;
    }

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

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

    /* ── 套餐卡断点按「容器」而非视口计算（诊断 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(4, minmax(0, 1fr));
        gap: 10px;
        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: 859px) {
        .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: 16px 18px;
        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: 12px;
        margin-bottom: 12px;
    }

    .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: 4px 0 0;
        font-size: 13px;
        line-height: 1.5;
        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: 8px;
        margin: 0;
        padding: 8px 12px;
        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;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .membership-discount-notice > span {
        min-width: 0;
        flex: 1;
    }

    .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;
    }

    .membership-discount-notice a {
        color: var(--accent-dark);
        font-weight: 600;
        text-underline-offset: 2px;
    }

    /* ── 紧凑会员卡：选中态对齐充值页（橙边 + 浅橙底，干净无冗余）── */
    .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);
    }

    .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-col-a > .btn-wechat,
    .payment-below-col-a > .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;
        margin: 0;
        padding: 8px;
        background: var(--surface-soft);
        border: 1px dashed var(--border);
        border-radius: 8px;
    }

    .payment-below .wechat-qr-section .qrcode-wrap {
        padding: 6px;
        border-radius: 8px;
    }

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

    .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;
    }

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

    .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-col-a > .btn-wechat,
        .payment-below-col-a > .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) 320px;
    gap: 16px;
}

.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: 16px 18px;
}

.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,
.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 1920 − 侧栏 224 − gap，
   充值页仍按 1600 封顶。会员页填满主区，不再另设 max-width。 */
.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-card); 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 .num { font-size: 28px; font-weight: 600; color: var(--brand-heavy); line-height: 1; }
.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: 36px; margin-top: 18px; font-size: 14px; font-weight: 400; border-radius: var(--radius-pill); }
.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; }
}

/* ============================================================
   spec 20260827-usercenter-ui-refresh · 会员套餐卡视觉强化（P0-2）
   与开放平台档位卡对齐：大数字实付价 / 推荐角标 + 阴影抬升 /
   省额徽章 success 四件套。追加于文件尾（同名选择器按源序覆盖上方历史层）。
   注：悬空 var(--primary) 已由 main.css 别名 --primary: var(--brand) 止血。
   ============================================================ */

/* 实付价是决策数字：28px（阶梯 display 档）/600（字重封顶）从正文里跳出来；金额 tabular-nums 对齐 */
.price {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.price .currency { font-size: 14px; font-weight: 600; }
.price .period { font-size: 12px; font-weight: 500; color: var(--muted); }
.plan-card.selected .price { color: var(--brand-heavy); }

/* 省额徽章：出体系的 emerald 硬编码 → success 语义四件套 + 药丸形 */
.price-save {
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--success-dark);
    background: var(--success-bg);
    border: 1px solid var(--success-line);
}

/* 推荐位：角标悬浮卡外 + 双层影抬升（featured 与 selected 分离，推荐信息不随选择丢失） */
.plan-card { overflow: visible; }
.plan-card::before { border-radius: 8px 8px 0 0; } /* 顶部 3px 提示条跟随圆角，配合 overflow: visible */
.plan-card.featured { box-shadow: var(--shadow-pop); }
.badge-popular {
    position: absolute;
    top: -10px;
    right: 12px;
    left: auto;
    align-self: auto;
    margin: 0;
    padding: 4px 11px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(250, 140, 22, .35);
}

/* 充值页主 CTA 不再呼吸（2026-09-30 界面参考：胶囊主按钮无投影、无动画） */
.rc-cta:not(.is-gated):not(:disabled) { animation: none; }

/* ============================================================
   spec 20260903-membership-purchase-notes · 会员购买须知
   三层披露（套餐卡 chip → 收银台「开通须知」→ 完整须知手风琴 / 独立页）
   + 购买确认勾选 + 跨档禁用态。追加于文件尾（同名选择器按源序覆盖上方历史层）。
   语义色只用四件套令牌：warning（披露 / 禁用原因）、success（事实勾）、
   info（说明）、brand（赠送）；不新造第五种披露样式（评审负面清单 4）。
   ============================================================ */

/* 页头关键标签：「一次付费 · 不自动续费」是全页最该被看见的事实 */
.ms-head-tag.is-key { border-color: var(--success-line); background: var(--success-bg); color: var(--success-dark); font-weight: 600; }
.ms-head-tag.is-key i { color: var(--success-dark); }

/* 升级横幅公式（R5.1）：中性小字，紧跟主句 */
.upgrade-banner-formula { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-secondary); }

/* ── 套餐卡微披露 chip（R2.1）── */
.plan-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; min-width: 0; }
.plan-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 1px 7px; border-radius: var(--radius-pill);
    border: 1px solid var(--line); background: var(--surface-soft);
    color: var(--ink-secondary); font-size: 12px; line-height: 1.6; white-space: normal;
}
.plan-chip i { font-size: 12px; }
.plan-chip.is-gift { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-heavy); font-weight: 600; }
.plan-chip.is-gift i { color: var(--brand-dark); }
/* 永久口径（D2-a）沿用 .plan-desktop-badge 的 warning 语义 */
.plan-chip.is-warn { border-color: var(--warning-line); background: var(--warning-bg); color: var(--warning-dark); font-weight: 600; }
.plan-chip.is-warn i { color: var(--warning-dark); }

/* ── 跨档禁用态（R4.2）：可读、不可选；原因常驻卡内 ── */
.plan-card[aria-disabled="true"] { cursor: not-allowed; background: var(--surface-soft); box-shadow: none; }
.plan-card[aria-disabled="true"]:hover { border-color: var(--line); box-shadow: none; transform: none; }
.plan-card[aria-disabled="true"] .plan-name,
.plan-card[aria-disabled="true"] .price { color: var(--muted); }
.plan-card[aria-disabled="true"] .plan-card-copy,
.plan-card[aria-disabled="true"] .plan-chip,
.plan-card[aria-disabled="true"] .price-save,
.plan-card[aria-disabled="true"] .price-original,
.plan-card[aria-disabled="true"] .price-tag { opacity: .55; }
.plan-card[aria-disabled="true"] .plan-card-selector { border-color: var(--line); background: var(--surface-soft); }
.plan-block-reason {
    display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 6px 8px;
    border-radius: var(--radius-sm); border: 1px solid var(--warning-line); background: var(--warning-bg);
    /* 全卡最不该看不清的一句：告诉被拦住的用户为什么不能买（与充值页 .rc-gate 同理由，用正文色不用 warning 色） */
    color: var(--ink-secondary); font-size: 12px; line-height: 1.5;
}
.plan-block-reason i { flex-shrink: 0; margin-top: 2px; color: var(--warning-dark); }
.plan-block-reason a { color: var(--brand-heavy); font-weight: 600; text-decoration: underline; }

/* ── 购买确认勾选（R3.1 → 2026-09-06 决策记录 D5-b：默认勾选、一行、提示态不是报错态）── */
.notes-ack {
    display: flex; gap: 10px; align-items: center; width: 100%;
    padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-soft);
    font-size: 13px; line-height: 1.5; color: var(--ink-secondary);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.notes-ack input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--brand); cursor: pointer; }
.notes-ack label { margin: 0; cursor: pointer; }
.notes-ack a { color: var(--brand-heavy); font-weight: 600; }
/* 须知升版后老用户看到的小标签：只提示、不打断 */
.notes-ack-pill {
    margin-left: auto; flex-shrink: 0; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--brand-line); background: var(--brand-soft);
    font-size: 12px; font-weight: 600; color: var(--brand-heavy); white-space: nowrap; text-decoration: none;
}
.notes-ack-pill i { margin-right: 2px; }
/* 提示态（用户主动取消勾选后点支付）：品牌橙轻高亮，无红色、无抖动——说下一步，不说做错了 */
.notes-ack.is-error { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-heavy); box-shadow: 0 0 0 3px var(--brand-soft); }
.notes-ack-alert {
    width: 100%; padding: 8px 12px; border-radius: var(--radius);
    border: 1px solid var(--brand-line); background: var(--brand-soft);
    color: var(--brand-heavy); font-size: 13px; font-weight: 500;
}
.notes-ack-alert i { color: var(--brand); margin-right: 4px; }

/* ── 开通须知（R2.2）：支付按钮正下方 ── */
.order-notes { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.order-notes-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--ink);
}
.order-notes-head a { font-size: 12px; font-weight: 600; color: var(--brand-heavy); text-decoration: none; }
.order-notes-head a:hover { text-decoration: underline; }
.order-notes ul { margin: 0; padding: 8px 12px 10px; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.order-notes li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.6; color: var(--ink-secondary); }
.order-notes li b { color: var(--ink); font-weight: 600; }
.order-notes li.is-warn, .order-notes li.is-warn b { color: var(--warning-dark); }
.on-ico { flex-shrink: 0; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; font-size: 12px; }
.on-ico.ok { background: var(--success-bg); color: var(--success-dark); }
.on-ico.info { background: var(--info-bg); color: var(--info-dark); }
.on-ico.warn { background: var(--warning-bg); color: var(--warning-dark); }
.on-ico.gift { background: var(--brand-soft); color: var(--brand-dark); }
.on-ref { margin-left: 4px; color: var(--muted); white-space: nowrap; }
.on-ref a { color: var(--brand-heavy); text-decoration: none; }
.on-ref a:hover { text-decoration: underline; }

/* 赠送卡末行（R7.1）：到账 SLA + 条款链接 */
.payment-gift-row-note { color: var(--muted); font-size: 12px; }
.payment-gift-row-note a { color: var(--brand-heavy); }

/* ── 完整须知（R2.3）：替换 plan-term-note + pay-hint，沿用中性容器 ── */
.notes-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px; }
.notes-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.notes-title { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.notes-title i { color: var(--accent-primary); }
.notes-desc { margin: 4px 0 0; font-size: 13px; color: var(--ink-secondary); }
.notes-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.notes-meta-pill { padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-soft); color: var(--ink-secondary); font-size: 12px; }
.notes-meta-pill.is-ver { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-heavy); font-weight: 600; }
.notes-acc { display: grid; gap: 8px; }
.notes-sec { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.notes-sec[open] { border-color: var(--brand-line); }
.notes-sec summary { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 14px; font-weight: 600; color: var(--ink); list-style: none; cursor: pointer; }
.notes-sec summary::-webkit-details-marker { display: none; }
.notes-sec summary:hover { background: var(--surface-soft); }
.notes-sec summary:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.notes-sec-cnt { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); }
.notes-sec summary::after { content: "+"; margin-left: 8px; font-size: 20px; line-height: 1; font-weight: 400; color: var(--muted); }
.notes-sec[open] summary::after { content: "−"; color: var(--brand-dark); }
.notes-clauses { margin: 0; padding: 0 16px 12px; list-style: none; }
.notes-clauses li { position: relative; padding: 6px 0 6px 40px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.75; color: var(--ink-secondary); }
.notes-clauses li:first-child { border-top: 0; }
.notes-clauses li b { color: var(--ink); font-weight: 600; }
.notes-clauses li:target { background: var(--brand-soft); border-radius: var(--radius); }
.notes-clause-no {
    position: absolute; left: 6px; top: 7px; width: 26px; text-align: center;
    border-radius: var(--radius-pill); border: 1px solid var(--brand-line); background: var(--brand-soft);
    color: var(--brand-heavy); font-size: 12px; font-weight: 600; line-height: 1.5;
}
.notes-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.notes-foot a { color: var(--brand-heavy); font-weight: 600; }

/* ── 独立页 /membership/notes（R2.4）：可打印 ── */
.notes-doc { max-width: 860px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 32px 36px; }
.notes-doc-crumb { margin-bottom: 14px; font-size: 12px; color: var(--muted); }
.notes-doc-crumb a { color: var(--brand-heavy); }
.notes-doc-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
.notes-doc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 18px; }
.notes-doc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.notes-doc-intro { padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-soft); font-size: 13px; color: var(--ink-secondary); }
.notes-doc-toc { columns: 2; column-gap: 24px; margin: 18px 0 8px; padding: 0; list-style: none; font-size: 13px; }
.notes-doc-toc li { margin: 2px 0; break-inside: avoid; }
.notes-doc-toc a { color: var(--brand-heavy); }
.notes-doc-sec { margin-top: 26px; }
.notes-doc-sec h2 { margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; color: var(--ink); }
.notes-doc-sec .notes-clauses { padding: 0; }
.notes-doc-sec .notes-clauses li { font-size: 14px; line-height: 1.8; }
.notes-doc-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.notes-doc-foot a { color: var(--brand-heavy); font-weight: 600; }
@media (max-width: 860px) {
    .notes-doc { padding: 22px 18px; }
    .notes-doc-toc { columns: 1; }
}
@media print {
    .notes-doc-crumb, .notes-doc-actions, .console-sidebar, .console-nav-toggle, .dtb-nav, .footer-copyright { display: none !important; }
    .notes-doc { border: 0; padding: 0; max-width: none; }
    .notes-clauses li { break-inside: avoid; }
}
/* ============================================================
   会员购买工作面 · 2026-09-06
   阅读顺序：期限 → 实付价 → 权益事实；选中态与推荐态分别表达。
   仅作用于 membership-page，支付状态、报价与购买规则继续使用原协议。
   ============================================================ */
body:has(.membership-page),
body:has(.rc) { background: var(--layout-bg); }
.membership-page .membership-shell { gap: 28px; }
.membership-page .ms-head { align-items: center; gap: 16px 24px; }
.membership-page .ms-head-lead {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px 16px;
    min-width: 0;
    flex: 1;
}
.membership-page .ms-head-title { font-size: 20px; line-height: 28px; letter-spacing: 0; font-weight: 500; flex: none; }
.membership-page .ms-head-desc { margin-top: 12px; max-width: 900px; line-height: 1.7; }
.membership-page .ms-head-tags { margin-top: 0; gap: 10px; flex-wrap: nowrap; }
.membership-page .ms-head-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}
.membership-page .ms-head-tag-ico {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex: none;
}
.membership-page .ms-head-tag.tone-success {
    background: var(--success-bg);
    border-color: var(--success-line);
    color: var(--success-dark);
}
.membership-page .ms-head-tag.tone-success .ms-head-tag-ico {
    background: transparent;
    color: var(--success-dark);
}
.membership-page .ms-head-tag.tone-brand .ms-head-tag-ico {
    background: var(--brand-soft);
    color: var(--brand-heavy);
}
.membership-page .ms-head-tag.is-key,
.membership-page .ms-head-tag.is-key i { color: inherit; }
.membership-page a.ms-head-tag { color: var(--ink); text-decoration: none; }
.membership-page .ms-head > .btn { min-height: 40px; display: inline-flex; align-items: center; padding: 0 16px; }
.membership-page .membership-discount-notice { padding: 12px 16px; gap: 10px; flex-wrap: nowrap; align-items: flex-start; }
.membership-page .membership-grid { grid-template-columns: minmax(0, 1fr) 352px; gap: 28px; align-items: start; }
.membership-page .membership-main-panel { gap: 32px; }
.membership-page .membership-tab-content { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.membership-page .plan-tab-head { align-items: center; gap: 16px; margin-bottom: 20px; }
.membership-page .plan-tab-title { font-size: 20px; line-height: 1.4; }
.membership-page .plan-tab-price { margin-left: 12px; font-size: 13px; }
.membership-page .plan-tab-desc { margin-top: 6px; font-size: 14px; line-height: 1.7; }
.membership-page .plan-tab-badge { padding: 6px 12px; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-secondary); font-size: 12px; font-weight: 500; }
.membership-page [data-membership-tier="pro"] .plan-tab-badge { background: #262626; color: #ffd591; }
.membership-page .plan-card-grid { gap: 16px; align-items: stretch; }
.membership-page .plan-card {
    display: flex; flex-direction: column; height: 100%; min-width: 0; gap: 0;
    padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: none;
    transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.membership-page .plan-card:hover { border-color: var(--border); box-shadow: var(--shadow-sm); transform: none; }
.membership-page .plan-card.featured { border-color: var(--brand-line); box-shadow: none; }
.membership-page .plan-card.selected { border-color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand); }
.membership-page .plan-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.membership-page .plan-card-heading { min-height: 58px; padding-right: 16px; }
.membership-page .plan-name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.5; }
.membership-page .plan-card-copy { margin: 6px 0 0; color: var(--ink-secondary); font-size: 13px; line-height: 1.6; }
.membership-page .plan-card-selector { top: 24px; right: 20px; width: 18px; height: 18px; }
.membership-page .badge-popular {
    top: -12px; right: 16px; padding: 4px 10px;
    border: 1px solid var(--brand-line); border-radius: var(--radius-sm);
    background: var(--brand-soft); color: var(--brand-heavy);
    letter-spacing: 0; line-height: 1.3; box-shadow: none;
}
.membership-page .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; min-height: 76px; margin: 20px 0 0; padding: 0 0 20px; }
.membership-page .price { font-size: 20px; line-height: 1.2; }
.membership-page .price-original { font-size: 13px; }
.membership-page .price-save,
.membership-page .price-tag { flex-basis: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; line-height: 1.6; font-weight: 400; }
.membership-page .price-save { color: var(--success-dark); }
.membership-page .plan-chips { display: flex; flex-direction: column; flex: 1; gap: 14px; margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.membership-page .plan-card-meta { display: grid; gap: 6px; }
.membership-page .plan-chip { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-secondary); font-size: 13px; line-height: 1.6; font-weight: 400; }
.membership-page .plan-card-gifts { display: grid; gap: 10px; margin-top: auto; }
.membership-page .plan-chip.is-gift { display: flex; flex-direction: column; gap: 0; color: var(--ink); font-weight: 500; }
.membership-page .plan-chip.is-gift small { color: var(--muted); font-size: 12px; font-weight: 400; }
.membership-page .plan-card-terms { display: grid; gap: 4px; margin-top: auto; padding: 10px 12px; border-left: 2px solid var(--warning-line); border-radius: var(--radius-xs); background: var(--warning-bg); }
.membership-page .plan-chip.is-warn { color: var(--ink-secondary); font-weight: 500; }
.membership-page .plan-card[aria-disabled="true"] { background: var(--surface-soft); border-color: var(--line); box-shadow: none; }
.membership-page .plan-card[aria-disabled="true"] :is(.plan-name, .price) { color: var(--ink-secondary); }
.membership-page .plan-card[aria-disabled="true"] :is(.plan-card-copy, .plan-chip, .price-save, .price-original, .price-tag) { opacity: 1; color: var(--muted); }
.membership-page .plan-block-reason { margin-top: 16px; padding: 10px; color: var(--ink-secondary); }
.membership-page #membershipDiscountNotice { margin-top: 16px; }
.membership-page .plan-compare-jump { margin-top: 16px; align-self: flex-start; font-size: 14px; }

/* ── 顶层页签：个人套餐（普通 / 高级） vs 企业会员 · 2026-09-17 ──
   下划线式页签：左对齐、按内容宽、一条底线贯穿主面板；选中态 = 主色文字 + 2px 品牌下划线。
   刻意不做卡片 / 分段底板，避免与下方套餐卡（真正的选择对象）抢视觉。 */
.membership-page .ms-tabs {
    display: flex; align-items: flex-end; gap: 32px;
    margin-bottom: -8px; border-bottom: 1px solid var(--line);
}
.membership-page .ms-tab {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 2px 12px; margin-bottom: -1px;
    border: 0; border-bottom: 2px solid transparent; background: transparent;
    color: var(--ink-secondary); font-size: 16px; font-weight: 500; line-height: 1.4; white-space: nowrap; cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}
.membership-page .ms-tab:hover { color: var(--ink); }
.membership-page .ms-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-xs); }
.membership-page .ms-tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }
.membership-page .ms-tab-ico {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 20px; height: 20px; color: var(--muted); font-size: 14px;
}
.membership-page .ms-tab.is-active .ms-tab-ico { color: var(--brand-heavy); }
.membership-page .ms-tab-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.membership-page .ms-tab-label { font-size: 16px; }
.membership-page .ms-tab-sub {
    display: inline-flex; align-items: center; padding: 1px 8px;
    border-radius: var(--radius-pill); background: var(--surface-soft);
    color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.6;
}
.membership-page .ms-tab.is-active .ms-tab-sub { background: var(--brand-soft); color: var(--brand-heavy); }
.membership-page .ms-tabpanel { display: none; }
.membership-page .ms-tabpanel.is-active { display: flex; flex-direction: column; gap: 32px; animation: fadeIn .25s ease; }
.membership-page .ms-tabpanel[hidden] { display: none; }

/* 套餐卡列数跟随卡片数量：永久档停售后普通 / 高级各 3 卡，四列网格会空出一列；
   默认三列，出现第 4 张卡（历史永久档）再回四列。 */
.membership-page .plan-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.membership-page .plan-card-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 容器断点（与上方 .membership-main-panel container query 同阈值，特异性对齐以免被覆盖）：
   ≤859px 两列，3 卡时末卡通栏不留孤位；≤429px 单列 */
@container (max-width: 859px) {
    .membership-page .plan-card-grid,
    .membership-page .plan-card-grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .membership-page .plan-card-grid:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: 1 / -1; }
    .membership-page .enterprise-plan-layout { grid-template-columns: 1fr; }
}
@container (max-width: 429px) {
    .membership-page .plan-card-grid,
    .membership-page .plan-card-grid:has(> :nth-child(4)),
    .membership-page .enterprise-plan-layout .plan-card-grid { grid-template-columns: 1fr; }
    .membership-page .plan-card-grid:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: auto; }
}
@media (max-width: 767px) {
    .membership-page .plan-card-grid,
    .membership-page .plan-card-grid:has(> :nth-child(4)),
    .membership-page .enterprise-plan-layout .plan-card-grid { grid-template-columns: 1fr; }
    .membership-page .plan-card-grid:has(> :nth-child(3):last-child) > :nth-child(3) { grid-column: auto; }
    .membership-page .enterprise-plan-layout { grid-template-columns: 1fr; }
}

/* 企业档只有月 / 年两卡：两卡 + 一张权益说明卡组成整行 */
.membership-page .enterprise-plan-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.membership-page .enterprise-plan-layout .plan-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.membership-page .enterprise-brief {
    display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft);
}
.membership-page .enterprise-brief-head { display: flex; align-items: center; gap: 10px; }
.membership-page .enterprise-brief-ico {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 32px; height: 32px; border-radius: var(--radius-sm); background: #262626; color: #ffd591; font-size: 14px;
}
.membership-page .enterprise-brief-title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.membership-page .enterprise-brief-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.membership-page .enterprise-brief-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--ink-secondary); }
.membership-page .enterprise-brief-list li i { flex-shrink: 0; margin-top: 6px; font-size: 12px; color: var(--brand-heavy); }
.membership-page .enterprise-brief-list b { color: var(--ink); font-weight: 600; }
.membership-page .enterprise-brief-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.membership-page .enterprise-brief-foot a { color: var(--accent-dark); }

/* 收银台成为一个完整面板，金额、赠送、支付操作各占一个清晰区块。 */
.membership-page .membership-side-panel { position: sticky; top: 96px; }
.console-main .membership-page .payment-below { position: static; height: auto; margin: 0; padding: 24px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.membership-page .payment-below-title { margin-bottom: 20px; font-size: 20px; }
.membership-page .payment-below-header { padding-bottom: 24px; margin-bottom: 24px; }
.membership-page .payment-plan-bar {
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    margin: 0; padding: 24px; border: 1px solid #424242; border-radius: var(--radius-md); background: #262626;
}
.membership-page .payment-plan-bar-name { font-size: 16px; color: #fff; white-space: normal; line-height: 1.5; }
.membership-page .payment-plan-bar-hint { margin-top: 8px; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 1.7; }
/* 桌面 1.2.2 统一用户中心（R6）：支付区顶部「当前购买账号」提示，复用页面变量，不引新资源 */
.membership-page .payment-account-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; font-size: 13px; line-height: 1.7; color: var(--text-muted); }
.membership-page .payment-account-hint > i { color: var(--brand); }
.membership-page .payment-account-hint strong { color: var(--ink); font-weight: 600; }
.membership-page .payment-account-hint-note { color: var(--text-muted); }
.membership-page .payment-plan-bar-price { color: #fff; line-height: 1.2; }
.membership-page .payment-plan-bar-discount { gap: 8px; margin-top: 12px; color: rgba(255, 255, 255, .72); }
.membership-page .payment-plan-bar-discount-badge { padding: 0; border-radius: 0; background: transparent; color: #b7eb8f; }
.membership-page .payment-desktop-link { margin-top: 12px; color: #ffd591; }
.membership-page .payment-gift-card { gap: 12px; margin-top: 20px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.membership-page .payment-gift-card-icon { width: 32px; height: 32px; color: var(--brand-heavy); }
.membership-page .payment-gift-card-body { width: 100%; gap: 8px; }
.membership-page .payment-gift-card-title { font-size: 13px; color: var(--ink); }
.membership-page .payment-gift-card-rows { gap: 8px; }
.membership-page .payment-gift-row { flex-wrap: wrap; gap: 2px 8px; line-height: 1.6; }
.membership-page .payment-gift-row-label { color: var(--ink-secondary); }
.membership-page .payment-gift-row-value { color: var(--ink); font-size: 13px; font-weight: 500; white-space: normal; }
.membership-page .payment-below-col-a { gap: 20px; }
.membership-page .payment-below-methods-label { color: var(--ink-secondary); font-size: 13px; font-weight: 400; }
.membership-page .payment-below .payment-method-btn { min-height: 44px; box-shadow: none; }
.membership-page .payment-below .payment-method-btn.active { box-shadow: none; }
.membership-page .notes-ack { align-items: flex-start; flex-wrap: wrap; padding: 0; border-color: transparent; background: transparent; gap: 8px; font-size: 13px; line-height: 1.7; }
.membership-page .notes-ack input { margin-top: 3px; }
.membership-page .notes-ack label { flex: 1; }
.membership-page .notes-ack.is-error { padding: 10px; border-color: var(--brand); background: var(--brand-soft); }
.membership-page #payBtn { min-height: 48px; font-size: 16px; animation: none; box-shadow: none; }
.membership-page .payment-support-hint {
    margin: -8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-secondary);
}
.membership-page .payment-support-hint a {
    color: var(--brand-heavy);
    font-weight: 600;
    text-underline-offset: 2px;
}
.membership-page .order-notes { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.membership-page .order-notes-head { padding: 20px 0 12px; border: 0; }
.membership-page .order-notes ul { padding: 0; gap: 12px; }
.membership-page .order-notes li { font-size: 13px; line-height: 1.7; }
.membership-page .order-notes li.is-warn,
.membership-page .order-notes li.is-warn b { color: var(--ink-secondary); }

/* 比较与说明保持完整，减少说明区的重复卡片边框。 */
.membership-page .membership-highlights { margin-top: 28px; padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); }
.membership-page .membership-highlights-title { font-size: 16px; }
.membership-page .membership-highlights-grid .card-surface { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border: 0; box-shadow: none; background: transparent; transform: none; }
.membership-page .membership-highlights-grid .card-ico { margin: 0; flex-shrink: 0; }
.membership-page .plan-compare-wrap,
.membership-page .notes-wrap { padding: 28px; box-shadow: none; }
.membership-page .plan-compare-label { margin: 0 0 20px; padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 20px; }
.membership-page .plan-compare-table :is(th, td) { padding: 14px 16px; }
.membership-page .notes-head { margin-bottom: 20px; }
.membership-page .notes-title { font-size: 20px; }
.membership-page .notes-acc { gap: 0; }
.membership-page .notes-sec { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.membership-page .notes-sec summary { min-height: 52px; padding: 14px 0; }
.membership-page .notes-clauses { padding-right: 0; padding-left: 0; }
.membership-page .notes-clauses li { padding-top: 10px; padding-bottom: 10px; }
.membership-page :is(#plan-compare, #notes-full, #pro-plans, #enterprise, #enterprise-plans, #msTabs) { scroll-margin-top: 96px; }
@media (max-width: 1399.98px) {
    .membership-page .membership-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
    .membership-page .plan-card { padding: 20px; }
    .console-main .membership-page .payment-below { padding: 20px; }
}
@media (max-width: 1199.98px) {
    .membership-page .membership-grid { grid-template-columns: 1fr; }
    .membership-page .membership-side-panel { position: static; }
}
@media (max-width: 767.98px) {
    .membership-page .membership-shell { gap: 24px; }
    .membership-page .ms-head { position: relative; gap: 16px; }
    .membership-page .ms-head-title { padding-right: 0; font-size: 20px; }
    .membership-page .ms-head-lead { flex-wrap: wrap; }
    .membership-page .ms-head-tags { flex-wrap: wrap; gap: 8px; }
    .membership-page .ms-head > .btn { position: absolute; top: 0; right: 0; min-height: 44px; }
    .membership-page .plan-tab-head { flex-direction: row; align-items: flex-start; }
    .membership-page .plan-tab-price { display: inline; margin: 0 0 0 8px; }
    .membership-page .plan-tab-badge { flex-shrink: 0; }
    .membership-page .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 12px; padding: 20px; }
    .membership-page .plan-card-heading { min-height: 0; padding: 0 0 0 28px; }
    .membership-page .plan-card-selector { top: 24px; left: 20px; right: auto; }
    .membership-page .price-row { display: block; min-height: 0; max-width: 132px; margin: 0; padding: 0; text-align: right; }
    .membership-page .price { display: inline-flex; white-space: nowrap; }
    .membership-page .price-row > :not(.price) { margin-top: 6px; }
    .membership-page .plan-chips, .membership-page .plan-block-reason { grid-column: 1 / -1; }
    .membership-page .plan-card-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .membership-page .plan-card-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .membership-page .membership-highlights-grid { grid-template-columns: 1fr; }
    .membership-page .membership-highlights,
    .membership-page .plan-compare-wrap,
    .membership-page .notes-wrap { padding: 20px; }
    .membership-page .plan-compare-table :is(th, td) { padding: 12px; }
    .membership-page .plan-compare-label,
    .membership-page .notes-title { font-size: 16px; }
    .membership-page .ms-tabs { gap: 0; margin-bottom: -4px; }
    .membership-page .ms-tab { flex: 1; justify-content: center; min-height: 44px; gap: 6px; padding: 0 4px 10px; }
    .membership-page .ms-tab-ico { width: 16px; height: 16px; font-size: 13px; }
    .membership-page .ms-tab-label { font-size: 14px; }
    .membership-page .ms-tab-sub { display: none; }
    .membership-page .ms-tabpanel.is-active { gap: 24px; }
    .membership-page .enterprise-brief { padding: 20px; }
}
@media (max-width: 359.98px) {
    .membership-page .plan-card-heading { display: contents; }
    .membership-page .plan-name { grid-column: 1; grid-row: 1; padding-left: 28px; }
    .membership-page .plan-card-copy { grid-column: 1 / -1; grid-row: 2; margin: 0; }
    .membership-page .price-row { grid-column: 2; grid-row: 1; max-width: 108px; }
    .membership-page .price { font-size: 16px; }
    .membership-page .plan-chips { grid-row: 3; }
}

/* ============================================================
   2026-09-28 视觉收敛（充值 / 会员收银）
   本段在文件末尾，同名选择器覆盖上方历史层：
   选项常态无描边，选中只用填充；实付金额靠字号，不再套橙框；
   主按钮走 --action-primary-*；取消呼吸、绿色加购条和悬浮推荐标。
   ============================================================ */
.rc-type,
.rc-vpill,
.rc-amt,
.rc-pm,
.plan-card,
.payment-method-btn {
    border: 0;
    border-radius: 10px;
    background: var(--fill-soft);
    box-shadow: none;
}
.rc-type:hover,
.rc-vpill:hover,
.rc-amt:hover,
.rc-pm:hover,
.plan-card:hover,
.payment-method-btn:hover {
    border: 0;
    background: var(--fill-hover);
    box-shadow: none;
}
.rc-type[aria-checked="true"],
.rc-vpill[aria-checked="true"],
.rc-amt[aria-checked="true"],
.rc-pm.active,
.plan-card.selected,
.plan-card.featured.selected,
.payment-method-btn.active {
    border: 0;
    background: var(--selection-bg);
    box-shadow: none;
    color: var(--ink);
}
.rc-type[aria-checked="true"]:hover,
.rc-vpill[aria-checked="true"]:hover,
.rc-amt[aria-checked="true"]:hover,
.plan-card.selected:hover {
    background: var(--selection-hover-bg);
}
.rc-type .ic,
.rc-type[aria-checked="true"] .ic {
    background: transparent;
    color: var(--ink-secondary);
}
.rc-type[aria-checked="true"] .ic { color: var(--selection-ink); }
.rc-amt[aria-checked="true"] .cur,
.rc-amt[aria-checked="true"] .p,
.plan-card.selected .price,
.rc-pay-amount,
.rc-pay-amount .currency,
.rc-pay-line .v .num {
    color: var(--ink);
}
.rc-amt .tag,
.rc-vpill .rec,
.rc-amt[aria-checked="true"] .tag,
.rc-vpill[aria-checked="true"] .rec {
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
}
.payment-below,
.membership-tab-content {
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
/* 余额两行收进同一张收银卡，不再单独成卡 */
.rc-side {
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.rc-pay,
.rc-balance-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.rc-pay-total,
.payment-plan-bar {
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.rc-pay-amount .num { font-size: 28px; line-height: 36px; color: var(--ink); }
.rc-config {
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.rc-amt-next {
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
    padding: 0;
}
.rc-capability-card {
    border: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}
.rc-cta,
.btn-wechat,
.btn-alipay,
.upgrade-banner-btn {
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--action-primary-bg);
    color: var(--action-primary-ink);
    min-height: 36px;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    box-shadow: none;
    animation: none;
}
.rc-cta:hover,
.btn-wechat:hover:not(:disabled),
.btn-alipay:hover,
.upgrade-banner-btn:hover {
    background: var(--action-primary-hover);
    color: var(--action-primary-ink);
    border: 0;
}
.rc-cta > i,
.btn-wechat i,
.btn-alipay i { color: var(--action-primary-ink); }
.rc-cta.is-gated,
.rc-cta.is-gated:hover {
    background: var(--fill-soft);
    color: var(--ink-secondary);
    border: 0;
}
.rc-cta:not(.is-gated):not(:disabled),
.btn-breathe { animation: none; }
.plan-card.featured { box-shadow: none; }
.badge-popular {
    position: static;
    display: inline-flex;
    margin: 0 0 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--fill-soft);
    color: var(--ink-secondary);
    box-shadow: none;
    letter-spacing: 0;
}
.upgrade-banner,
.upgrade-callout {
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.price-save {
    border: 0;
    background: transparent;
    color: var(--ink-secondary);
    font-weight: 400;
    padding: 0;
}
.ms-head-title,
.rc-head h1,
.pg-head-title,
.notes-doc-title { font-size: 20px; line-height: 28px; font-weight: 500; }
.rc-stepper,
.rc-stepper input { border: 0; background: var(--fill-soft); }
.rc-stepper { border-radius: var(--radius-control); height: 38px; }
.rc-stepper button,
.rc-stepper input { height: 38px; background: transparent; }
.dark .rc-cta,
.dark .btn-wechat,
.dark .btn-alipay,
.dark .upgrade-banner-btn { color: var(--action-primary-ink); }
.dark .rc-cta > i,
.dark .btn-wechat i,
.dark .btn-alipay i { color: var(--action-primary-ink); }
@media (max-width: 1199.98px) {
    .rc-side,
    .payment-below { position: static; }
}
@media (prefers-reduced-motion: reduce) {
    .rc *,
    .membership-page *,
    .rc-cta,
    .btn-breathe { animation: none !important; transition: none !important; }
}
/* 套餐卡选中：只加一条描边，底色与未选中相同 */
.membership-page .plan-card.selected,
.membership-page .plan-card.featured.selected {
    border: 1px solid var(--ink);
    background: var(--surface);
    box-shadow: none;
    color: var(--ink);
}
.membership-page .plan-card.selected:hover,
.membership-page .plan-card.featured.selected:hover {
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: none;
}
.membership-page .plan-card.selected .price { color: var(--ink); }

/* 右侧确认并支付：浅色面板，摘要用浅暖底，不再使用深色块 */
.membership-page .payment-below {
    padding: 20px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.membership-page .payment-below-header { margin: 0; padding: 0 0 16px; }
.membership-page .payment-below-title {
    margin: 0 0 12px;
    color: var(--ink);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.membership-page .payment-plan-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 16px;
    border: 0;
    border-radius: 12px;
    background: var(--brand-tint);
    color: var(--ink);
    box-shadow: none;
}
.membership-page .payment-plan-bar-left { display: contents; }
.membership-page .payment-plan-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    order: 1;
}
.membership-page .payment-plan-bar-name {
    color: var(--ink);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.membership-page .payment-plan-tag {
    flex: none;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
}
.membership-page .payment-plan-bar-hint {
    order: 2;
    margin: 0;
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 18px;
}
.membership-page .payment-plan-bar-price {
    order: 3;
    color: var(--ink);
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.membership-page .payment-plan-bar-price .currency {
    margin-right: 2px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}
.membership-page .payment-plan-bar-discount {
    order: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 18px;
}
.membership-page .payment-plan-bar-discount-badge,
.membership-page .payment-plan-bar-discount > span {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 18px;
}
.membership-page .payment-desktop-link { order: 5; margin-top: 4px; color: var(--link-text); }
.membership-page .payment-gift-card { margin-top: 12px; }
.membership-page .payment-below-col-a { gap: 12px; }
.membership-page .payment-below-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.membership-page .payment-below .payment-method-btn {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: var(--fill-soft);
    color: var(--ink);
    box-shadow: none;
}
.membership-page .payment-below .payment-method-btn:hover {
    background: var(--fill-hover);
    border-color: transparent;
}
.membership-page .payment-below .payment-method-btn.active {
    background: var(--selection-bg);
    border-color: var(--brand);
    color: var(--ink);
    box-shadow: none;
}
.membership-page #payBtn {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-control);
    background: var(--action-primary-bg);
    color: var(--action-primary-ink);
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    animation: none;
}
.membership-page #payBtn:hover { background: var(--action-primary-hover); color: var(--action-primary-ink); }
.membership-page #payBtn i { color: var(--action-primary-ink); }
.membership-page .payment-support-hint { margin: 0; color: var(--muted); font-size: 12px; }
.membership-page .payment-support-hint a { color: var(--link-text); font-weight: 500; }
.membership-page .order-notes { border: 0; border-top: 1px solid var(--line); background: transparent; }
.membership-page .order-notes-head { padding: 12px 0 8px; }
.membership-page .badge-popular {
    align-self: flex-start;
    position: static;
    display: inline-flex;
    width: auto;
    margin: 0 0 12px;
    padding: 1px 8px;
    border: 0;
    border-radius: 6px;
    background: var(--fill-soft);
    color: var(--ink-secondary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 18px;
    box-shadow: none;
}

/* 2026-09-28 紧凑版：压低套餐区与支付栏留白，不改结构与数据 */
.membership-page .membership-shell { gap: 16px; }
.membership-page .ms-head { gap: 12px; margin-bottom: 4px; }
.membership-page .ms-head-tags { gap: 8px; }
.membership-page .ms-head-tag { height: 32px; padding: 0 10px; font-size: 12px; }
.membership-page .ms-tabs { margin-bottom: 8px; }
@media (min-width: 1200px) {
    .membership-page .membership-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
}
.membership-page .ms-tabpanel.is-active { gap: 20px; }
.membership-page .plan-tab-head { margin-bottom: 10px; gap: 12px; }
.membership-page .plan-tab-desc { margin-top: 2px; line-height: 1.5; }
.membership-page .plan-card-grid { gap: 12px; }
.membership-page .plan-card {
    min-height: 0;
    padding: 16px 16px 14px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.membership-page .plan-card:hover { border: 0; box-shadow: var(--shadow-card); }
.membership-page .plan-card.selected,
.membership-page .plan-card.featured.selected,
.membership-page .plan-card.selected:hover,
.membership-page .plan-card.featured.selected:hover {
    border: 0;
    background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--muted), var(--shadow-card);
    outline: none;
}
.membership-page .plan-card:focus-visible {
    outline: 2px solid var(--muted);
    outline-offset: 0;
}
.membership-page .plan-card.featured:not(.selected),
.membership-page .plan-card.featured:not(.selected):hover {
    border: 0;
    box-shadow: var(--shadow-card);
}
.membership-page .plan-card-heading { min-height: 0; padding-right: 24px; }
.membership-page .plan-name { line-height: 1.4; }
.membership-page .plan-card-copy { margin-top: 2px; line-height: 1.5; }
.membership-page .price-row { min-height: 0; margin: 12px 0 0; padding: 0; gap: 6px; }
.membership-page .plan-chips { gap: 4px; margin-top: 10px; padding-top: 10px; }
.membership-page .badge-popular { margin-bottom: 6px; }
.membership-page .plan-block-reason {
    margin-top: 8px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-secondary);
}
.membership-page .plan-block-reason i { color: var(--warning-ink); }
.membership-page .plan-card[aria-disabled="true"],
.membership-page .plan-card[aria-disabled="true"]:hover {
    background: var(--surface-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.membership-page .payment-below { padding: 16px; }
.membership-page .payment-below-header { padding-bottom: 12px; }
.membership-page .payment-below-title { margin-bottom: 10px; }
.membership-page .payment-plan-bar {
    gap: 4px;
    padding: 12px 14px;
    background: var(--brand-tint);
}
.membership-page .payment-plan-bar-hint { line-height: 18px; }
.membership-page .payment-below-col-a { gap: 10px; }
.membership-page .upgrade-banner-btn,
.membership-page #referralCard .upgrade-banner-btn {
    border: 0;
    background: var(--fill-soft);
    color: var(--ink);
    box-shadow: none;
}
.membership-page .upgrade-banner-btn:hover,
.membership-page #referralCard .upgrade-banner-btn:hover {
    background: var(--fill-hover);
    color: var(--ink);
}
.membership-page .membership-discount-notice { margin-top: 12px; }
@media (min-width: 1200px) {
    .membership-page .membership-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: stretch;
    }
    .membership-page .membership-main-panel,
    .membership-page .membership-side-panel {
        align-self: stretch;
        height: auto;
    }
    .membership-page .membership-side-panel {
        position: static;
        top: auto;
        display: flex;
        flex-direction: column;
    }
    .membership-page .membership-side-panel .payment-below {
        flex: 1 0 auto;
        height: auto;
        align-self: stretch;
    }
}

/* 充值选项与会员套餐卡同一套：白底卡片，选中只加描边 */
.rc .rc-config {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.rc .rc-type,
.rc .rc-vpill,
.rc .rc-amt,
.rc .rc-pm {
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
}
.rc .rc-amt { border-radius: var(--radius-lg); }
.rc .rc-pm { border-radius: var(--radius-control); }
.rc .rc-type:hover,
.rc .rc-vpill:hover,
.rc .rc-amt:hover,
.rc .rc-pm:hover {
    border: 0;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.rc .rc-type[aria-checked="true"],
.rc .rc-vpill[aria-checked="true"],
.rc .rc-amt[aria-checked="true"],
.rc .rc-type[aria-checked="true"]:hover,
.rc .rc-vpill[aria-checked="true"]:hover,
.rc .rc-amt[aria-checked="true"]:hover {
    border: 0;
    background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--muted), var(--shadow-card);
    color: var(--ink);
}
.rc .rc-pm.active,
.rc .rc-pm.active:hover {
    border: 1px solid var(--brand);
    background: var(--selection-bg);
    box-shadow: none;
    color: var(--ink);
}
.rc .rc-type .ic,
.rc .rc-type[aria-checked="true"] .ic {
    background: var(--fill-soft);
    color: var(--ink-secondary);
}
.rc .rc-amt[aria-checked="true"] .cur,
.rc .rc-amt[aria-checked="true"] .p,
.rc .rc-pay-amount,
.rc .rc-pay-amount .currency,
.rc .rc-pay-amount .num,
.rc .rc-pay-line .v .num { color: var(--ink); }
.rc .rc-side {
    padding: 16px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}
.rc .rc-pay-total {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* 充值中心紧凑流程：类型收窄、有效期改为分段选择、金额五档保持横排 */
.rc .rc-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.rc .rc-block { padding-top: 0; }
.rc .rc-block + .rc-block { margin-top: 20px; padding-top: 20px; }
.rc .rc-block-head { margin-bottom: 10px; }
.rc #rcTypeGroup {
    width: min(760px, 100%);
    max-width: 760px;
}
.rc #rcTypeGroup .rc-type {
    position: relative;
    min-height: 62px;
    padding: 12px 40px 12px 14px;
    border-radius: var(--radius-card);
}
.rc #rcTypeGroup .rc-type .desc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rc #rcTypeGroup .rc-type::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--fill-hover);
}
.rc #rcTypeGroup .rc-type[aria-checked="true"]::after {
    content: "✓";
    display: grid;
    place-items: center;
    background: var(--action-primary-bg);
    color: var(--action-primary-ink);
    font-size: 12px;
    line-height: 16px;
}
.rc #rcValidityGroup {
    width: min(520px, 100%);
    max-width: 520px;
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius-pill);
    background: var(--fill-pressed);
}
.rc #rcValidityGroup .rc-vpill,
.rc #rcValidityGroup .rc-vpill:hover,
.rc #rcValidityGroup .rc-vpill[aria-checked="true"],
.rc #rcValidityGroup .rc-vpill[aria-checked="true"]:hover {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    box-shadow: none;
    text-align: center;
}
.rc #rcValidityGroup .rc-vpill .d,
.rc #rcValidityGroup .rc-vpill .sub {
    color: var(--ink-secondary);
    font-weight: 500;
}
.rc #rcValidityGroup .rc-vpill[aria-checked="true"],
.rc #rcValidityGroup .rc-vpill[aria-checked="true"]:hover {
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
}
.rc #rcValidityGroup .rc-vpill[aria-checked="true"] .d,
.rc #rcValidityGroup .rc-vpill[aria-checked="true"] .sub {
    color: var(--ink);
}
.rc #rcValidityGroup .rc-vpill[aria-checked="true"] .d { font-weight: 600; }
.rc #rcValidityGroup .rc-vpill .row { display: inline-flex; }
.rc #rcValidityGroup .rc-vpill .sub {
    display: inline;
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}
.rc .rc-amt-row { gap: 10px; }
.rc .rc-amt,
.rc .rc-amt:hover {
    min-height: 82px;
    padding: 14px 8px;
}
.rc .rc-pricing-note,
.rc .rc-amt-cap,
.rc .rc-bonus-note {
    max-width: 860px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--fill-soft);
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 20px;
}
.rc .rc-pricing-note b { color: var(--ink); font-weight: 500; }
.rc .rc-pay-line .v .num { font-size: 20px; line-height: 28px; color: var(--ink); }
.rc .rc-pay-amount .num { font-size: 28px; line-height: 36px; }

/* 未选中：白底 + 轻阴影，不描边。选中贴边浅灰线 */
.rc #rcTypeGroup .rc-type:not([aria-checked="true"]),
.rc #rcTypeGroup .rc-type:not([aria-checked="true"]):hover,
.rc .rc-amt:not([aria-checked="true"]),
.rc .rc-amt:not([aria-checked="true"]):hover {
    border: 0;
    background: var(--surface);
    box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .16);
}
.rc #rcTypeGroup .rc-type {
    align-items: center;
    gap: 12px;
    border-radius: 14px;
}
.rc #rcTypeGroup .rc-type .ic {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--fill-hover);
    color: var(--ink-secondary);
}
.rc #rcTypeGroup .rc-type:not([aria-checked="true"])::after {
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: var(--fill-hover);
}
.rc .rc-amt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    padding: 18px 8px 14px;
}
.rc .rc-amt .tagline {
    position: absolute;
    top: 8px;
    right: 10px;
    height: auto;
    margin: 0;
}
.rc .rc-amt .tag,
.rc .rc-amt[aria-checked="true"] .tag {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}
.rc .rc-amt .yuan { margin-top: 4px; }
.rc .rc-amt .cur,
.rc .rc-amt:not([aria-checked="true"]) .p { color: var(--ink); }
.rc .rc-amt .beans { margin-top: 4px; color: var(--muted); }

/* 对齐设计稿：未选中是白卡片，加赠标在卡内右上角；说明是浅灰条；实付金额用品牌色 */
.rc #rcTypeGroup .rc-type,
.rc #rcTypeGroup .rc-type:hover,
.rc .rc-amt,
.rc .rc-amt:hover {
    align-items: center;
    border: 0;
    background: var(--surface);
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .18);
}
.rc #rcTypeGroup .rc-type[aria-checked="true"],
.rc #rcTypeGroup .rc-type[aria-checked="true"]:hover,
.rc .rc-amt[aria-checked="true"],
.rc .rc-amt[aria-checked="true"]:hover {
    background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--muted), 0 8px 18px -12px rgba(0, 0, 0, .18);
}
.rc .rc-amt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    min-height: 88px;
    padding: 22px 8px 14px;
}
.rc .rc-amt > .tagline {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}
.rc .rc-amt .yuan {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0;
}
.rc .rc-pricing-note {
    display: block;
    max-width: 860px;
}
.rc .rc-pricing-note > i { display: none; }
.rc .rc-amt-next,
.rc .rc-amt-cap {
    max-width: 860px;
    margin-top: 8px;
    padding: 0 12px;
    background: transparent;
    color: var(--muted);
}
.rc .rc-balance-card {
    margin: 0 0 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--fill-soft);
}
.rc .rc-pay-line .v { text-align: right; }
.rc .rc-pay-line .v .num { font-size: 20px; font-weight: 600; color: var(--ink); }
.rc .rc-pay-amount,
.rc .rc-pay-amount .currency,
.rc .rc-pay-amount .num { color: var(--brand-heavy); }
.rc .rc-pay-amount .num { font-size: 28px; line-height: 36px; }
.rc .rc-pm:not(.active),
.rc .rc-pm:not(.active):hover {
    border: 0;
    background: var(--fill-soft);
    box-shadow: none;
}
.rc .rc-pm.active,
.rc .rc-pm.active:hover {
    border: 0;
    background: var(--selection-bg);
    box-shadow: 0 0 0 1.5px var(--muted);
}
.rc .rc-gate.show {
    border: 0;
    border-radius: 10px;
    background: var(--warning-bg);
}

/* 金额卡：五列等宽白卡片，加赠写在卡片右上角内部 */
.rc .rc-amt-row > .rc-amt {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    padding: 20px 8px 12px;
    border: 0;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .2);
    overflow: hidden;
}
.rc .rc-amt-row > .rc-amt[aria-checked="true"] {
    background: var(--surface);
    box-shadow: 0 0 0 1.5px var(--muted), 0 8px 18px -12px rgba(0, 0, 0, .2);
}
.rc .rc-amt-row > .rc-amt > .rc-amt-bonus,
.rc .rc-amt-row > .rc-amt > .tagline {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    text-align: right !important;
    transform: none !important;
}
.rc .rc-amt-row > .rc-amt {
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid var(--line) !important;
    border-radius: 14px !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.rc .rc-amt-row > .rc-amt[aria-checked="true"] {
    border: 1.5px solid var(--muted) !important;
    background: var(--surface) !important;
}
.console-page:has(.rc),
.console-shell:has(.rc),
.console-layout:has(.rc),
.console-main:has(.rc),
.rc,
.rc-grid,
.rc-config,
.rc .rc-config {
    background: var(--layout-bg) !important;
    box-shadow: none !important;
}
.rc .rc-pricing-note,
.rc #rcBonusNote {
    display: block !important;
    max-width: none !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--muted) !important;
    font-size: 12px !important;
    line-height: 18px !important;
    white-space: nowrap !important;
}
.rc .rc-pricing-note > i { display: none !important; }
.rc .rc-pricing-note b { color: var(--ink-secondary) !important; font-weight: 500 !important; }

/* 右侧确认并支付：独立白卡片，和页面底色分开 */
.rc .rc-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 10px 24px -12px rgba(15, 23, 42, .28) !important;
}
.rc .rc-side .rc-balance-card {
    margin: 0 0 14px !important;
    padding: 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--fill-soft) !important;
    box-shadow: none !important;
}
.rc .rc-side .rc-pay {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.rc .rc-side .rc-pay-title {
    margin: 0 0 14px !important;
    color: var(--ink) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* 会员页：标题、等级、有效期同一行；等级/有效期用胶囊标签 */
.membership-page .ms-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 16px;
}
.membership-page .ms-head-lead {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    min-width: 0;
}
.membership-page .ms-head-tags {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
    overflow: hidden;
}
.membership-page .ms-pill,
.membership-page .plan-chip.is-validity,
.membership-page #paymentPlanValidity {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}
.membership-page .ms-pill.is-accent,
.membership-page #paymentPlanValidity {
    border-color: transparent;
    background: var(--info-bg);
    color: var(--info-ink);
}
.membership-page .plan-tab-head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
}
.membership-page .plan-tab-title { flex: none; }
.membership-page .plan-tab-desc {
    margin: 0;
    min-width: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.membership-page .plan-tab-badge,
.membership-page [data-membership-tier="pro"] .plan-tab-badge {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 12px;
    font-weight: 500;
}
.membership-page a.plan-tab-badge {
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}
.membership-page a.plan-tab-badge:hover {
    color: var(--link-text);
    border-color: var(--brand-line);
}
.membership-page .payment-plan-name-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 8px;
}
.membership-page .payment-plan-bar-name {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}
.membership-page .plan-card-meta .plan-chip.is-validity { width: fit-content; }

/* 个人套餐 / 企业套餐：与充值有效期同一套胶囊分段 */
.membership-page .ms-tabs {
    display: inline-flex;
    align-self: flex-start;
    align-items: stretch;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--fill-pressed);
}
.membership-page .ms-tab,
.membership-page .ms-tab:hover,
.membership-page .ms-tab.is-active {
    flex: none;
    min-height: 40px;
    margin: 0;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--ink-secondary);
    font-size: 14px;
    font-weight: 500;
}
.membership-page .ms-tab.is-active,
.membership-page .ms-tab.is-active:hover {
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
}
.membership-page .ms-tab-ico,
.membership-page .ms-tab.is-active .ms-tab-ico {
    width: 16px;
    height: 16px;
    color: inherit;
    font-size: 13px;
}
.membership-page .ms-tab-label { font-size: 14px; }
.membership-page .ms-tab-sub,
.membership-page .ms-tab.is-active .ms-tab-sub {
    display: inline-flex;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
}
.membership-page .ms-tab.is-active .ms-tab-sub { color: var(--ink-secondary); }
@media (max-width: 767.98px) {
    .membership-page .ms-tabs { width: 100%; }
    .membership-page .ms-tab,
    .membership-page .ms-tab:hover,
    .membership-page .ms-tab.is-active { flex: 1; justify-content: center; }
    .membership-page .ms-tab-sub,
    .membership-page .ms-tab.is-active .ms-tab-sub { display: none; }
}
.membership-page .enterprise-brief-foot { display: none; }
.membership-page .enterprise-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}
.membership-page .enterprise-next-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--ink);
    text-decoration: none;
}
.membership-page .enterprise-next-item:hover {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-card);
}
.membership-page .enterprise-next-item.is-static {
    cursor: default;
}
.membership-page .enterprise-next-copy {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}
.membership-page .enterprise-next-go {
    flex: none;
    color: var(--link-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .membership-page .enterprise-next { grid-template-columns: 1fr; }
}
.membership-page .beans-core-emph,
.pg .beans-core-emph {
    color: var(--brand-heavy);
    font-weight: 600;
}

/* 流量豆能做什么：单列，标题+单价同行，说明在下，不要小卡片 */
.rc .rc-capability-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.rc .rc-capability-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 16px;
    row-gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
}
.rc .rc-capability-item:last-child {
    border-bottom: 0;
}
.rc .rc-capability-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ink);
}
.rc .rc-capability-cost {
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: var(--ink-secondary);
    white-space: nowrap;
}
.rc .rc-capability-desc {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--ink-secondary);
}
.rc #rcCapNotePlatform {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 18px;
}
.rc #rcCapNotePlatform a {
    flex: none;
    white-space: nowrap;
    font-weight: 500;
}

/* 确认并支付：标题独占一行，套餐 / 有效期标签在下方左对齐 */
.membership-page .payment-below-title-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 10px;
    min-width: 0;
}
.membership-page .payment-below-title-row .payment-below-title {
    margin: 0;
}
.membership-page .payment-below-title-row .payment-plan-name-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.membership-page .payment-below-title-row .payment-plan-tag {
    display: none;
}