/* 认证页样式 - 从 user/certification.html.j2 提取 */
body { background: var(--color-gray-50); }
.page-shell { max-width: 68.75rem; margin: 0 auto 4.5rem; padding: 1.5rem 1rem; display:flex; flex-direction:column; gap:1rem; }
.hero {
background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 55%, var(--color-indigo-500) 100%);
color: var(--color-gray-200);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
display:flex;
justify-content: space-between;
gap: var(--spacing-md);
}
.hero h1 { margin:0 0 var(--spacing-sm); font-size:1.75rem; }
.hero p { margin:0; color: var(--color-gray-300); }
.hero-actions { display:flex; gap:0.625rem; flex-wrap:wrap; align-items:center; }
.badge {
display:inline-flex; align-items:center; gap:0.375rem;
padding:0.375rem 0.75rem; border-radius: var(--radius-full);
background: var(--color-indigo-50); color: var(--color-gray-900); border:1px solid var(--color-gray-300); font-weight:600;
}
.card { background: var(--bg-card); border-radius: var(--radius-lg); padding:1rem; box-shadow: var(--shadow-sm); border:1px solid var(--color-gray-200); }
.card-header { display:flex; justify-content:space-between; align-items:center; gap:0.625rem; flex-wrap:wrap; margin-bottom:0.625rem; }
.card-title { margin:0; font-size:1.125rem; font-weight:700; color: var(--color-gray-900); }
.pill { display:inline-flex; align-items:center; padding:0.375rem 0.625rem; border-radius: var(--radius-full); background: var(--color-indigo-50); color: var(--color-gray-900); border:1px solid var(--color-gray-300); font-size:0.75rem; }
.types-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem,1fr)); gap:0.875rem; }
.type-item { border: 2px solid var(--color-gray-200); border-radius: var(--radius-md); padding: 1rem; cursor: pointer; transition: var(--transition-fast); background: var(--bg-card); }
.type-item:hover { border-color: var(--color-indigo-500); background: var(--color-indigo-50); }
.type-item.active { border-color: var(--color-indigo-500); background: var(--color-indigo-50); box-shadow: var(--shadow-md); }
/* ========== 状态卡片样式 ========== */
/* 状态卡片容器 - 彩色背景 + 白色文字 */
.status-block {
padding: 1.75rem;
border-radius: var(--radius-lg);
text-align: center;
}
/* 状态背景色 */
.status-pending { background: var(--color-warning, var(--primitive-amber-500)); }
.status-approved { background: var(--color-success, var(--primitive-green-600)); }
.status-rejected { background: var(--color-error, var(--primitive-red-600)); }
/* 状态卡片内所有文字使用反色（白色）
* 使用硬编码 #fff 作为 fallback，确保在任何主题下都能正确显示
* 问题根因：全局 .muted 类使用 var(--text-muted)，深色模式下变为浅灰色
* 加 !important 兜底覆盖意外的主题/级联顺序
*/
.status-block {
/* 局部兜底反色变量，避免依赖全局 main.css */
--text-inverse: #fff;
--text-muted: rgba(255, 255, 255, 0.85);
color: var(--text-inverse);
}
.status-block * {
color: currentColor;
}
/* 状态卡片内的 .muted 类使用局部反色变量 */
.status-block .muted,
.status-block .status-time {
color: var(--text-muted);
}
/* 状态标题 */
.status-title {
margin: 0 0 0.375rem;
font-size: 1.25rem;
font-weight: 700;
}
/* 状态描述 */
.status-desc {
margin: 0;
opacity: 0.9;
}
/* 状态附加信息 */
.status-extra {
margin-top: 0.875rem;
}
.status-extra--lg {
margin-top: 1rem;
}
/* 拒绝原因 */
.status-reason {
margin-top: var(--spacing-md);
background: var(--overlay-light);
padding: var(--spacing-sm);
border-radius: var(--radius-md);
}
/* 提交时间 */
.status-time {
margin-top: 0.625rem;
font-size: 0.875rem;
}
/* 重新申请按钮 */
.reapply-btn {
background: var(--bg-surface);
color: var(--color-error);
border: 1px solid var(--border-subtle);
padding: 0.625rem 0.875rem;
border-radius: 0.625rem;
cursor: pointer;
font-weight: 600;
}
.reapply-btn:hover {
background: var(--primitive-white);
}
/* ========== 工具类 - 替代内联样式 ========== */
.hero-subtitle { margin: 0; letter-spacing: 0.2px; color: var(--color-gray-300); }
.form-hint { font-size: 0.8125rem; margin: 0.25rem 0 0.875rem; }
.form-section { margin-top: 1.125rem; }
.form-section--sm { margin-top: 0.875rem; }
.form-section--md { margin-top: 1rem; }
.form-label { font-weight: 600; display: block; margin-bottom: 0.5rem; }
.form-label--sm { margin-bottom: 0.375rem; }
.file-input { width: 100%; padding: 0.625rem; border: 2px dashed var(--color-gray-200); border-radius: 0.5rem; cursor: pointer; }
.file-upload { width: 100%; padding: 0.625rem; border: 2px dashed var(--color-gray-200); border-radius: 0.5rem; cursor: pointer; }
.file-preview { margin-top: 0.75rem; }
.preview-img { max-width: 17.5rem; max-height: 17.5rem; border-radius: 0.5rem; }
.textarea-input { width: 100%; border: 1px solid var(--color-gray-200); border-radius: 0.5rem; padding: 0.625rem; }
.textarea-mono { width: 100%; border: 1px dashed var(--color-gray-300); border-radius: 0.5rem; padding: 0.625rem; font-family: monospace; }
.hint-small { margin: 0.375rem 0 0; font-size: 0.75rem; }
.form-hint-small { margin: 0.375rem 0 0; font-size: 0.75rem; }
.input--mono { font-family: monospace; border-style: dashed; border-color: var(--color-gray-300); }
.notice-box { margin-top: 1rem; background: var(--color-warning-50); border: 1px solid var(--color-warning); border-radius: 0.625rem; padding: 0.75rem; }
.notice-text { color: var(--color-warning-dark); font-size: 0.8125rem; line-height: 1.6; }
.submit-btn-full { margin-top: 1.125rem; width: 100%; }
.type-title { font-weight: 700; font-size: 1rem; }
.type-desc { font-size: 0.8125rem; margin-top: 0.375rem; }
@media (max-width: 56.25rem) {
.page-shell { padding:1.125rem 0.75rem 4rem; }
.hero { flex-direction:column; }
.card-header { flex-direction:column; align-items:flex-start; }
}