/* ===== 共享样式基元：按职责归拢跨页面完全相同的声明 =====
   加载顺序：variables.css → components.css → style.css → gender.css。
   各组件特有的尺寸与覆盖仍留在 style.css（后加载者优先生效），
   因此层叠结果与改造前一致，variables.css 的 11 个原型令牌保持只读。 */

/* 卡片表面：白底 + 圆角 + 阴影 + 过渡 */
.surface,
.feature-card,
.album-card,
.post-card,
.message-input-area,
.message-bubble,
.profile-card,
.photo-item,
.timeline-item .content,
.empty-state,
.form-card,
.login-card,
.form-dialog,
.city-card,
.stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: all 0.3s;
}

/* 头像：圆形 + 居中 + 不被压缩 */
.avatar-base,
.post-avatar,
.msg-avatar,
.profile-avatars .ava,
.post-comment-avatar,
.account-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 表单控件：统一边框 / 圆角 / 字号 / 字体 */
.form-card input[type="text"],
.form-card input[type="date"],
.form-card input[type="password"],
.form-card input[type="file"],
.form-card select,
.form-card textarea,
.login-card input[type="text"],
.login-card input[type="password"],
.login-card select,
.message-input-area textarea,
.emoji-extra input,
.post-comment-label textarea {
    width: 100%;
    border: 2px solid #f0e4d8;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
}

/* 无边框按钮：统一去掉浏览器默认外观 */
.btn-reset,
.post-actions button,
.nav-logout button,
.post-comments-summary,
.post-comment-delete button,
.post-owner-actions button,
.msg-delete button,
.photo-delete button,
.city-delete button,
.form-dialog-close {
    font-family: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* 地图渐变：原型占位头部与足迹画布共用 */
.map-gradient,
.map-placeholder,
.footprint-map-canvas {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

/* 承接模板内联样式的共享工具类；仅保留动态值留在 style 属性 */
.field-control { font-family: inherit; outline: none; }
.cover-placeholder {
    display: flex; align-items: center; justify-content: center; font-size: 60px;
}
.detail-back { margin-bottom: 20px; }
.profile-card-spaced { margin-bottom: 24px; }
.form-card-narrow { max-width: 480px; }
.hint-spaced { margin-top: 10px; }
.error-state { max-width: 520px; margin: 40px auto; }
.error-state h2 { margin-bottom: 10px; }
.error-state p { margin-bottom: 18px; }

/* ===== 状态样式令牌：四族状态的界面表现集中在此 =====
   值与改造前的硬编码值逐字一致；style.css 中的状态规则改为引用这些令牌。
   加载顺序仍是 variables.css → components.css → style.css → gender.css，
   规则文本与层叠顺序不变，因此三档计算样式保持零变化。 */
:root {
    --state-error: #d63031;
    --state-error-bg: #fbe9e7;
    --state-error-text: #c0392b;
    --state-disabled-opacity: 0.7;
}