/* ============================================================
   芮动网络 · 平台账户体系组件
   会员中心 / 实名认证 / 作品发布 / 充值 / 法务长文
   依赖 style.css 的 CSS 变量，需在 style.css 之后引入。
   ============================================================ */

/* 导航认证徽标 */
.nav-verify-badge { margin-right: 4px; font-size: 0.85em; }
.nav-verify-badge.ok { color: #36c08f; }
.nav-verify-badge.pending { color: var(--color-accent-secondary); }

/* 平台内容页外层 */
.pf-page {
    min-height: calc(100vh - 72px);
    padding: calc(72px + var(--spacing-xl)) 0 var(--spacing-2xl);
    background:
        radial-gradient(circle at 12% 0%, rgba(230, 57, 70, 0.08), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(212, 162, 76, 0.07), transparent 46%);
}
.pf-wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.pf-wrap.narrow { max-width: 680px; }

.pf-head { margin-bottom: var(--spacing-xl); }
.pf-head .section-kicker { display: inline-block; margin-bottom: 0.6rem; }
.pf-title { font-size: var(--font-size-4xl); font-weight: 800; line-height: 1.15; }
.pf-subtitle { color: var(--color-text-secondary); margin-top: 0.6rem; max-width: 640px; line-height: 1.7; }

/* 卡片 */
.pf-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.pf-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: var(--spacing-md); flex-wrap: wrap;
}
.pf-card-title { font-size: var(--font-size-xl); font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.pf-card-title i { color: var(--color-accent-primary); }
.pf-card-sub { color: var(--color-text-muted); font-size: var(--font-size-sm); }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-md); }

/* 账户概览统计 */
.pf-stat {
    background: rgba(255, 245, 230, 0.03);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}
.pf-stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; }
.pf-stat-value { font-size: var(--font-size-2xl); font-weight: 800; margin-top: 0.4rem; }
.pf-stat-value.accent { color: var(--color-accent-secondary); }

/* 状态药丸 */
.status-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
    font-size: var(--font-size-xs); font-weight: 600; white-space: nowrap;
}
.status-pill.none    { background: rgba(137, 127, 112, 0.18); color: var(--color-text-secondary); }
.status-pill.pending { background: rgba(242, 169, 60, 0.16); color: var(--color-accent-warning); }
.status-pill.approved{ background: rgba(54, 192, 143, 0.16); color: #36c08f; }
.status-pill.rejected{ background: rgba(230, 57, 70, 0.16); color: var(--color-accent-primary); }

/* 表单 */
.pf-form { display: flex; flex-direction: column; gap: var(--spacing-md); }
.pf-field label { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 0.4rem; font-weight: 600; }
.pf-field label .req { color: var(--color-accent-primary); }
.pf-field input[type=text], .pf-field input[type=number], .pf-field input[type=email],
.pf-field input[type=password], .pf-field select, .pf-field textarea {
    width: 100%; padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); color: var(--color-text-primary);
    font-family: inherit; font-size: var(--font-size-base); transition: var(--transition-base);
}
.pf-field select { color: var(--color-accent-secondary); }
.pf-field select option { color: var(--color-text-primary); background: var(--color-bg-secondary); }
.pf-field textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.pf-field input:focus, .pf-field select:focus, .pf-field textarea:focus {
    outline: none; border-color: var(--color-accent-primary);
    background: rgba(230, 57, 70, 0.06); box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.14);
}
.pf-field .hint { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 0.35rem; }
.pf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }

/* 上传控件 */
.pf-upload { position: relative; }
.pf-upload input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pf-upload-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.5rem; min-height: 150px; padding: var(--spacing-md);
    border: 1.5px dashed var(--color-border-hover); border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02); text-align: center; transition: var(--transition-base);
    color: var(--color-text-muted); overflow: hidden;
}
.pf-upload:hover .pf-upload-box { border-color: var(--color-accent-primary); color: var(--color-text-secondary); }
.pf-upload-box i { font-size: 1.6rem; color: var(--color-accent-secondary); }
.pf-upload-box .up-name { font-size: var(--font-size-sm); color: var(--color-text-primary); word-break: break-all; }
.pf-upload-box img { max-width: 100%; max-height: 160px; border-radius: var(--radius-sm); }
.pf-upload.filled .pf-upload-box { border-style: solid; border-color: #36c08f; }

/* 单选卡 */
.pf-choice { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.pf-choice label {
    cursor: pointer; padding: var(--spacing-md); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02);
    transition: var(--transition-base); display: block;
}
.pf-choice input { position: absolute; opacity: 0; }
.pf-choice label:hover { border-color: var(--color-border-hover); }
.pf-choice label:has(input:checked) { border-color: var(--color-accent-primary); background: rgba(230, 57, 70, 0.07); }
.pf-choice-title { font-weight: 700; margin-bottom: 0.2rem; }
.pf-choice-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.amount-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-sm); }
.amount-grid label { text-align: center; cursor: pointer; padding: var(--spacing-md) var(--spacing-sm);
    border: 1.5px solid var(--color-border); border-radius: var(--radius-md); transition: var(--transition-base); }
.amount-grid input { position: absolute; opacity: 0; }
.amount-grid label:has(input:checked) { border-color: var(--color-accent-secondary); background: rgba(212, 162, 76, 0.1); }
.amount-grid .amt { font-size: var(--font-size-xl); font-weight: 800; }
.amount-grid .amt small { font-size: var(--font-size-sm); font-weight: 600; }

/* 对公账户信息 */
.bank-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.bank-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem var(--spacing-md);
    border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.bank-row:last-child { border-bottom: none; }
.bank-row .k { color: var(--color-text-muted); white-space: nowrap; }
.bank-row .v { color: var(--color-text-primary); font-weight: 600; text-align: right; word-break: break-all; }

/* 列表项 */
.pf-list { display: flex; flex-direction: column; gap: 0.75rem; }
.pf-item {
    display: flex; align-items: center; gap: var(--spacing-md);
    padding: var(--spacing-md); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.02);
}
.pf-item-thumb { width: 76px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.05); }
.pf-item-main { flex: 1; min-width: 0; }
.pf-item-title { font-weight: 700; }
.pf-item-meta { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 0.2rem; }

/* 提示条 */
.pf-alert { display: flex; gap: 0.75rem; padding: var(--spacing-md); border-radius: var(--radius-md);
    font-size: var(--font-size-sm); line-height: 1.6; margin-bottom: var(--spacing-lg); }
.pf-alert i { margin-top: 0.15rem; }
.pf-alert.info { background: rgba(212, 162, 76, 0.1); border: 1px solid rgba(212, 162, 76, 0.28); color: var(--color-text-secondary); }
.pf-alert.warn { background: rgba(230, 57, 70, 0.09); border: 1px solid rgba(230, 57, 70, 0.28); color: var(--color-text-secondary); }
.pf-alert.ok   { background: rgba(54, 192, 143, 0.1); border: 1px solid rgba(54, 192, 143, 0.28); color: var(--color-text-secondary); }

.pf-empty { text-align: center; padding: var(--spacing-xl); color: var(--color-text-muted); }
.pf-empty i { font-size: 2rem; display: block; margin-bottom: 0.6rem; opacity: 0.5; }

/* 注册协议勾选 */
.agree-field { display: flex; align-items: flex-start; gap: 0.55rem; font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; }
.agree-field input { margin-top: 0.2rem; width: 16px; height: 16px; accent-color: var(--color-accent-primary); flex-shrink: 0; }
.agree-field a { color: var(--color-accent-primary); font-weight: 600; }
.agree-field a:hover { text-decoration: underline; }

/* 法务长文页 */
.legal-page { padding: calc(72px + var(--spacing-xl)) 0 var(--spacing-2xl); }
.legal-wrap { max-width: 820px; margin: 0 auto; padding: 0 var(--spacing-lg); }
.legal-wrap h1 { font-size: var(--font-size-4xl); font-weight: 800; margin-bottom: 0.5rem; }
.legal-meta { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-bottom: var(--spacing-xl); }
.legal-wrap h2 { font-size: var(--font-size-xl); font-weight: 700; margin: var(--spacing-xl) 0 var(--spacing-sm); color: var(--color-text-primary); }
.legal-wrap h3 { font-size: var(--font-size-base); font-weight: 700; margin: var(--spacing-md) 0 var(--spacing-xs); color: var(--color-text-secondary); }
.legal-wrap p, .legal-wrap li { color: var(--color-text-secondary); line-height: 1.85; font-size: var(--font-size-base); }
.legal-wrap ul, .legal-wrap ol { padding-left: 1.4rem; margin: var(--spacing-sm) 0; }
.legal-wrap li { margin-bottom: 0.4rem; }

/* 按钮宽块 */
.btn-block { width: 100%; justify-content: center; }

/* 页脚链接 */
.footer-links { margin: 0.5rem 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.footer-links a { color: var(--color-text-secondary); transition: var(--transition-base); }
.footer-links a:hover { color: var(--color-accent-primary); }

@media (max-width: 768px) {
    .pf-row { grid-template-columns: 1fr; }
    .pf-choice { grid-template-columns: 1fr; }
    .pf-title { font-size: var(--font-size-3xl); }
}