/**
 * pricing.css — 公开定价页（商业化阶段一 1.2）
 * 样式引用 design-tokens.css 变量，禁止硬编码色值（docs/rules/frontend-architecture.md §四）
 */

.pr-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--agu-space-lg) var(--agu-space-md) var(--agu-space-xl);
}

/* ===== Hero ===== */
.pr-hero {
    text-align: center;
    padding: var(--agu-space-xl) var(--agu-space-md);
    background: linear-gradient(180deg, var(--agu-primary-light), var(--agu-bg-card));
    border: 1px solid var(--agu-divider);
    border-radius: var(--agu-radius-lg);
}

.pr-hero-title {
    margin: 0 0 var(--agu-space-sm);
    font-size: var(--agu-font-xxl);
    color: var(--agu-text);
}

.pr-hero-sub {
    margin: 0 0 var(--agu-space-md);
    font-size: var(--agu-font-lg);
    color: var(--agu-text-secondary);
}

.pr-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--agu-space-sm);
    margin: 0 0 var(--agu-space-lg);
    padding: 0;
    list-style: none;
}

.pr-hero-badges li {
    padding: var(--agu-space-xs) var(--agu-space-md);
    font-size: var(--agu-font-sm);
    color: var(--agu-primary-hover);
    background: var(--agu-bg-card);
    border: 1px solid var(--agu-primary);
    border-radius: var(--agu-radius-pill);
}

.pr-hero-actions {
    display: flex;
    justify-content: center;
    gap: var(--agu-space-md);
}

.pr-btn-primary {
    background: var(--agu-primary);
    border-color: var(--agu-primary);
}

.pr-btn-primary:hover {
    background: var(--agu-primary-hover);
    border-color: var(--agu-primary-hover);
}

.pr-btn-ghost {
    background: var(--agu-bg-card);
    border-color: var(--agu-primary);
    color: var(--agu-primary-hover);
}

/* ===== 区块 ===== */
.pr-section {
    margin-top: var(--agu-space-xl);
}

.pr-section-title {
    margin: 0 0 var(--agu-space-xs);
    font-size: var(--agu-font-xl);
    color: var(--agu-text);
}

.pr-section-sub {
    margin: 0 0 var(--agu-space-lg);
    font-size: var(--agu-font-md);
    color: var(--agu-text-secondary);
}

/* ===== 会员套餐 ===== */
.pr-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--agu-space-md);
}

.pr-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--agu-space-lg);
    background: var(--agu-bg-card);
    border: 1px solid var(--agu-border);
    border-radius: var(--agu-radius-lg);
}

.pr-plan-hot {
    border-color: var(--agu-primary);
    box-shadow: 0 0 0 1px var(--agu-primary);
}

.pr-plan-tag {
    position: absolute;
    top: calc(var(--agu-space-md) * -1);
    right: var(--agu-space-md);
    padding: var(--agu-space-xs) var(--agu-space-md);
    font-size: var(--agu-font-xs);
    color: var(--agu-on-primary);
    background: var(--agu-primary);
    border-radius: var(--agu-radius-pill);
}

.pr-plan-name {
    font-size: var(--agu-font-lg);
    font-weight: 600;
    color: var(--agu-text);
}

.pr-plan-price {
    margin: var(--agu-space-sm) 0 var(--agu-space-md);
}

.pr-plan-price em {
    font-style: normal;
    font-size: var(--agu-font-xxl);
    font-weight: 700;
    color: var(--agu-primary-hover);
}

.pr-plan-price span {
    margin-left: var(--agu-space-xs);
    font-size: var(--agu-font-sm);
    color: var(--agu-text-muted);
}

.pr-plan-features {
    flex: 1;
    margin: 0 0 var(--agu-space-lg);
    padding: 0;
    list-style: none;
}

.pr-plan-features li {
    position: relative;
    padding: var(--agu-space-xs) 0 var(--agu-space-xs) var(--agu-space-lg);
    font-size: var(--agu-font-md);
    color: var(--agu-text-secondary);
}

.pr-plan-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--agu-success);
}

.pr-plan-btn {
    width: 100%;
}

/* ===== 按次价格表 ===== */
.pr-price-table {
    margin: 0;
}

.pr-badge-free {
    display: inline-block;
    padding: 0 var(--agu-space-sm);
    font-size: var(--agu-font-xs);
    line-height: 20px;
    color: var(--agu-success);
    background: var(--agu-bg-soft);
    border: 1px solid var(--agu-success);
    border-radius: var(--agu-radius-pill);
}

.pr-cell-names {
    font-size: var(--agu-font-sm);
    color: var(--agu-text-muted);
}

/* ===== 充值说明 ===== */
.pr-recharge {
    padding: var(--agu-space-lg);
    background: var(--agu-bg-card);
    border: 1px solid var(--agu-border);
    border-radius: var(--agu-radius-lg);
}

.pr-steps {
    margin: 0 0 var(--agu-space-md);
    padding-left: var(--agu-space-xl);
}

.pr-steps li {
    padding: var(--agu-space-xs) 0;
    font-size: var(--agu-font-md);
    color: var(--agu-text);
}

.pr-recharge-note {
    padding: var(--agu-space-md);
    font-size: var(--agu-font-sm);
    color: var(--agu-text-secondary);
    background: var(--agu-primary-light);
    border-radius: var(--agu-radius);
}

/* ===== FAQ ===== */
.pr-faq code {
    padding: 0 var(--agu-space-xs);
    font-size: var(--agu-font-sm);
    color: var(--agu-primary-hover);
    background: var(--agu-bg-soft);
    border-radius: var(--agu-radius);
}

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .pr-plans {
        grid-template-columns: 1fr;
    }

    .pr-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
}