/* ============================================================================
 * 如浩传世 · 前台玩家中心样式（个人中心 / 我要投稿）
 * ============================================================================
 * 作用域：只在 body.user-page 与 body.submit-page 下生效。
 *
 * ★ 为什么不复用 job.css 而新开一份：
 *   job.css 是「职业介绍」的内容型皮肤（大标题 + 卡片网格 + 视频区），
 *   而这里是「表单型」界面（输入框、列表、分页、状态标签），
 *   两者除了页头几乎没有交集。硬塞在一起会让 job.css 越来越难改。
 *
 * ★ 兼容约束（与本项目其它 CSS 一致，线上是较老的浏览器内核）：
 *   · 不用 CSS 变量 var()、不用 :has()、不用 inset、不用 gap；
 *   · 不用 clamp()/min()/max() 做字号，也不用 aspect-ratio；
 *   · 颜色一律写字面量，不依赖主题变量；
 *   · 动画只作用在 transform / opacity 上（避免触发布局重排）；
 *   · flex 间距用 margin 而不是 gap（老 WebKit 不支持 gap）。
 *
 * ★ 配色沿用官网的暗金体系：底色 #0c0806 / 主金 #d4af67 / 亮金 #ffe8b0。
 *
 * ★★ 弱化文字里的**欠账**（低于 4.50 的那些）第 218 轮一次还清（工程细则 §62）：
 *    此前有四个近似的深褐 —— #6b5b45 / #6b5c44 / #6d6355 / #7b7264（2.62~3.99）
 *    —— 外加一个**贴线**的 #8a7a5e（4.11~4.45）；实测最低 **1.85**（日历的"未来"格）。
 *    现在这些**全部**归到 `#9c8f7a`：最亮的卡底 #221a10 上也有 **5.41**，一律 PASS。
 *    ★ 范围要说清：这次只动"**低于 4.50**"的那批。本来就在线以上的次级色**保留原值** ——
 *      例如 `.um-sub` 的 #8a806e（面板底 4.86）、`.um-meta b` 的 #b9a982（8.16）。
 *      它们不是欠账；顺手一起改＝顺手改版式层次，那是另一件事。
 *    ★ 两个**刻意不动**的例外：
 *      · `.um-item-btn:disabled` 的暗色 —— **失效控件**，WCAG 1.4.3 明确豁免；
 *        它的"暗"是语义（"按不动"必须看得出来），不是欠账。
 *      · 三个底盘**图标**用 `#8a7a5e`（.um-medal-box / .um-item-box / .um-task-box）：
 *        图形按 3.0 线判，实测 4.29 已过；它们不是文字，不参与上面那条归一化。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 一、页头（与 job 页同构，保证从职业页跳过来不跳戏）
 * ------------------------------------------------------------------------- */

.user-hero {
    position: relative;
    padding: 54px 20px 42px;
    text-align: center;
    background: #120d09;
    border-bottom: 1px solid rgba(212, 175, 103, 0.22);
}
.user-hero-kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 4px;
    color: #8a7648;
    text-transform: uppercase;
}
.user-hero h1 {
    margin: 0 0 12px;
    font-size: 38px;
    font-weight: normal;
    letter-spacing: 6px;
    color: #ffe8b0;
    text-shadow: 0 2px 16px rgba(212, 175, 103, 0.35);
}
.user-hero-sub {
    margin: 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: #9c8f7a;
}

/* ---------------------------------------------------------------------------
 * 二、页面容器
 * ------------------------------------------------------------------------- */

.user-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 20px 64px;
}

/* ---------------------------------------------------------------------------
 * 三、通用表单元素（登录 / 注册 / 资料 / 留言 / 投稿 共用）
 * ------------------------------------------------------------------------- */

.uf-item {
    margin-bottom: 16px;
    text-align: left;
}
.uf-item > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    color: #b9a982;
    letter-spacing: 1px;
}
.uf-item > label em {
    font-style: normal;
    color: #d4726a;
}
.uf-item input[type="text"],
.uf-item input[type="password"],
.uf-item select,
.uf-item textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    font-size: 14px;
    font-family: inherit;
    color: #efe6d5;
    background: #171110;
    border: 1px solid #33281d;
    border-radius: 3px;
    outline: none;
    -webkit-transition: border-color .18s, box-shadow .18s;
    transition: border-color .18s, box-shadow .18s;
}
.uf-item input[type="text"]:focus,
.uf-item input[type="password"]:focus,
.uf-item select:focus,
.uf-item textarea:focus {
    border-color: #a8873f;
    box-shadow: 0 0 0 2px rgba(212, 175, 103, 0.13);
}
.uf-item input::-webkit-input-placeholder,
.uf-item textarea::-webkit-input-placeholder { color: #9c8f7a; }
.uf-item textarea { resize: vertical; line-height: 1.7; }
.uf-item select {
    -webkit-appearance: none;
    appearance: none;
    /* 自绘下拉箭头：老内核没有 appearance 支持时也能看清是个下拉框 */
    background-image: none;
    padding-right: 30px;
}
.uf-item input.is-readonly {
    color: #8d8577;
    background: #121010;
    cursor: not-allowed;
}

.uf-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}
.uf-row > .uf-item {
    flex: 1 1 240px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 0;
}
.uf-row > .uf-item-sm { flex: 0 0 150px; }

.uf-submit {
    display: inline-block;
    min-width: 190px;
    padding: 12px 26px;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: 4px;
    color: #1a1208;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(to bottom, #ffe8b0, #d4af67);
    border: none;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: -webkit-transform .14s, box-shadow .18s, opacity .18s;
    transition: transform .14s, box-shadow .18s, opacity .18s;
}
.uf-submit:hover { box-shadow: 0 4px 18px rgba(212, 175, 103, 0.35); }
.uf-submit:active { -webkit-transform: translateY(1px); transform: translateY(1px); }
.uf-submit[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.uf-submit-sm { min-width: 148px; padding: 10px 20px; font-size: 14px; letter-spacing: 2px; }

.uf-hint { margin: 14px 0 0; font-size: 13px; color: #857c6c; }
.uf-hint a { color: #d4af67; text-decoration: none; border-bottom: 1px dashed rgba(212,175,103,.5); }
.uf-hint a:hover { color: #ffe8b0; }
.uf-tip { margin: 7px 0 0; font-size: 12px; line-height: 1.7; color: #9c8f7a; }

/* ---------------------------------------------------------------------------
 * 四、未登录：登录 / 注册卡片
 * ------------------------------------------------------------------------- */

.user-gate {
    display: flex;
    justify-content: center;
}
.gate-card {
    width: 100%;
    max-width: 560px;
    padding: 30px 34px 34px;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.gate-card-center { max-width: 520px; text-align: center; }

.gate-tabs {
    display: flex;
    margin-bottom: 26px;
    border-bottom: 1px solid #2b2218;
}
.gate-tab {
    position: relative;
    flex: 1;
    padding: 12px 0;
    font-size: 15px;
    font-family: inherit;
    letter-spacing: 3px;
    color: #8c8172;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-transition: color .18s;
    transition: color .18s;
}
.gate-tab:hover { color: #c5b48c; }
.gate-tab.is-on { color: #ffe8b0; }
/* 选中态：底部一条金色短线（不做整块背景，保持"非按钮"的大气感） */
.gate-tab.is-on::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 64px;
    height: 2px;
    margin-left: -32px;
    background: #d4af67;
    box-shadow: 0 0 10px rgba(212, 175, 103, 0.7);
}

/* 未登录提示（投稿页用） */
.gate-lock { font-size: 40px; line-height: 1; margin-bottom: 16px; }
.gate-lock-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 2px;
    color: #ffe8b0;
}
.gate-lock-desc {
    margin: 0 0 26px;
    font-size: 13.5px;
    line-height: 2;
    color: #918877;
}
.gate-lock-btns { text-align: center; }
.gate-lock-btns > a { margin: 0 6px; }

/* ---------------------------------------------------------------------------
 * 五、已登录：个人中心（左侧身份卡 + 右侧内容）
 * ------------------------------------------------------------------------- */

.user-member {
    display: flex;
    align-items: flex-start;
    margin-left: -11px;
    margin-right: -11px;
}
.um-side {
    flex: 0 0 262px;
    padding-left: 11px;
    padding-right: 11px;
}
.um-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 11px;
    padding-right: 11px;
}

.um-card {
    padding: 24px 20px;
    text-align: center;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
}
.um-avatar {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    font-size: 26px;
    line-height: 68px;
    color: #1a1208;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(to bottom, #ffe8b0, #d4af67);
    border-radius: 50%;
    letter-spacing: 0;
}
.um-name {
    font-size: 16px;
    color: #ffe8b0;
    letter-spacing: 1px;
    word-break: break-all;
}
.um-sub {
    margin-top: 5px;
    font-size: 12.5px;
    color: #8a806e;
    word-break: break-all;
}
.um-meta {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 12px;
    line-height: 1.9;
    color: #9c8f7a;
    border-top: 1px solid #241c14;
    text-align: left;
}
.um-meta b { color: #b9a982; font-weight: normal; }

.um-nav {
    margin-top: 12px;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
    overflow: hidden;
}
.um-tab {
    position: relative;
    display: block;
    width: 100%;
    padding: 13px 18px;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
    text-align: left;
    color: #9c927f;
    background: none;
    border: none;
    border-bottom: 1px solid #241c14;
    cursor: pointer;
    -webkit-transition: background-color .16s, color .16s;
    transition: background-color .16s, color .16s;
}
.um-tab:last-child { border-bottom: none; }
.um-tab:hover { color: #d4af67; background: rgba(212, 175, 103, 0.05); }
.um-tab.is-on {
    color: #ffe8b0;
    background: rgba(212, 175, 103, 0.09);
}
.um-tab.is-on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #d4af67;
}
.um-badge {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 6px;
    font-size: 11px;
    font-style: normal;
    line-height: 18px;
    text-align: center;
    color: #1a1208;
    background: #d4726a;
    border-radius: 9px;
    vertical-align: 1px;
}

.um-logout {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 11px 0;
    font-size: 13.5px;
    font-family: inherit;
    letter-spacing: 2px;
    color: #a0917a;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: color .16s, border-color .16s;
    transition: color .16s, border-color .16s;
}
.um-logout:hover { color: #e5907f; border-color: #5a3a32; }

/* ---------- 右侧面板 ---------- */

.um-panel {
    padding: 26px 28px 30px;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
    min-height: 320px;
}
.um-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #241c14;
}
.um-panel-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: normal;
    letter-spacing: 2px;
    color: #ffe8b0;
}
.um-note {
    margin: 0 0 18px;
    padding: 10px 13px;
    font-size: 12.5px;
    line-height: 1.8;
    color: #9c8f7a;
    background: rgba(212, 175, 103, 0.06);
    border-left: 3px solid rgba(212, 175, 103, 0.45);
    border-radius: 2px;
}
.um-divider {
    height: 1px;
    margin: 30px 0 26px;
    background: #241c14;
}
.um-sub-title {
    margin: 0 0 14px;
    font-size: 14px;
    letter-spacing: 1px;
    color: #b9a982;
}
.um-form-card {
    padding: 20px 20px 6px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid #2b2218;
    border-radius: 4px;
}

.um-btn-primary {
    display: inline-block;
    padding: 9px 20px;
    font-size: 13.5px;
    letter-spacing: 1px;
    color: #1a1208;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(to bottom, #ffe8b0, #d4af67);
    border: none;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: box-shadow .18s;
    transition: box-shadow .18s;
}
.um-btn-primary:hover { box-shadow: 0 4px 16px rgba(212, 175, 103, 0.32); }
.um-btn-plain {
    display: inline-block;
    padding: 8px 17px;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 1px;
    color: #b3a488;
    background: none;
    border: 1px solid #3a2e21;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color .16s, border-color .16s;
    transition: color .16s, border-color .16s;
}
.um-btn-plain:hover { color: #ffe8b0; border-color: #a8873f; }

/* ---------- 列表项（我的投稿 / 我的留言） ---------- */

.um-list { min-height: 60px; }
.um-empty {
    padding: 40px 0;
    text-align: center;
    font-size: 13.5px;
    color: #9c8f7a;
}

.ua-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #241c14;
}
.ua-item:last-child { border-bottom: none; }
.ua-thumb {
    flex: 0 0 108px;
    width: 108px;
    height: 68px;
    margin-right: 14px;
    background: #1d1713 no-repeat center / cover;
    background-size: cover;
    border: 1px solid #2b2218;
    border-radius: 3px;
    overflow: hidden;
}
.ua-thumb span {
    display: block;
    font-size: 11px;
    line-height: 68px;
    text-align: center;
    color: #5d554a;
}
.ua-main { flex: 1 1 auto; min-width: 0; }
.ua-title {
    font-size: 14.5px;
    line-height: 1.6;
    color: #e6dcc6;
    word-break: break-word;
}
.ua-title a { color: inherit; text-decoration: none; }
.ua-title a:hover { color: #ffe8b0; }
.ua-meta {
    margin-top: 7px;
    font-size: 12px;
    color: #9c8f7a;
}
.ua-meta > span { margin-right: 14px; }
.ua-reject {
    margin-top: 8px;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #e5a093;
    background: rgba(212, 114, 106, 0.08);
    border-left: 3px solid rgba(212, 114, 106, 0.5);
    border-radius: 2px;
}

/* 状态标签（语义类名，与后台 admin.css 的思路一致） */
.ua-tag {
    display: inline-block;
    padding: 2px 9px;
    font-size: 12px;
    border: 1px solid;
    border-radius: 2px;
}
.ua-tag-pending { color: #e0b45c; border-color: rgba(224, 180, 92, 0.6); background: rgba(224, 180, 92, 0.1); }
.ua-tag-ok      { color: #7bc08e; border-color: rgba(123, 192, 142, 0.6); background: rgba(123, 192, 142, 0.1); }
.ua-tag-reject  { color: #e08a7c; border-color: rgba(224, 138, 124, 0.6); background: rgba(224, 138, 124, 0.1); }

/* 留言条目 */
.ufb-item {
    padding: 15px 0;
    border-bottom: 1px solid #241c14;
}
.ufb-item:last-child { border-bottom: none; }
.ufb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ufb-type {
    font-size: 12.5px;
    color: #b9a982;
    letter-spacing: 1px;
}
.ufb-title {
    margin-bottom: 7px;
    font-size: 14.5px;
    color: #e6dcc6;
    word-break: break-word;
}
.ufb-content {
    font-size: 13.5px;
    line-height: 1.85;
    color: #a99e8a;
    white-space: pre-wrap;
    word-break: break-word;
}
.ufb-time { margin-top: 8px; font-size: 12px; color: #9c8f7a; }
.ufb-reply {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(123, 192, 142, 0.07);
    border-left: 3px solid rgba(123, 192, 142, 0.55);
    border-radius: 2px;
}
.ufb-reply-head {
    margin-bottom: 7px;
    font-size: 12.5px;
    color: #7bc08e;
    letter-spacing: 1px;
}
.ufb-reply-body {
    font-size: 13.5px;
    line-height: 1.85;
    color: #cfc6b4;
    white-space: pre-wrap;
    word-break: break-word;
}
.ufb-reply-time { margin-top: 8px; font-size: 12px; color: #9c8f7a; }

/* 分页 */
.um-pager {
    margin-top: 22px;
    text-align: center;
}
.um-pager .pg-btn {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    margin: 0 4px;
    font-size: 13px;
    font-family: inherit;
    color: #a0917a;
    background: none;
    border: 1px solid #3a2e21;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: color .16s, border-color .16s;
    transition: color .16s, border-color .16s;
}
.um-pager .pg-btn:hover { color: #ffe8b0; border-color: #a8873f; }
.um-pager .pg-btn.is-on {
    color: #1a1208;
    background: #d4af67;
    border-color: #d4af67;
}
.um-pager .pg-btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
 * 六、投稿页
 * ------------------------------------------------------------------------- */

.submit-shell {
    max-width: 940px;
    margin: 0 auto;
    padding: 26px 28px 30px;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 6px;
}

.cover-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cover-preview {
    flex: 0 0 200px;
    width: 200px;
    height: 126px;
    margin-right: 16px;
    background: #171110 no-repeat center;
    background-size: cover;
    border: 1px dashed #3a2e21;
    border-radius: 3px;
    overflow: hidden;
}
.cover-preview span {
    display: block;
    font-size: 12.5px;
    line-height: 126px;
    text-align: center;
    color: #5d554a;
}
.cover-ops { flex: 1 1 220px; min-width: 0; }
.cover-ops .um-btn-plain { margin-right: 8px; }

.editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 9px;
}
.editor-hint {
    margin-left: 12px;
    font-size: 12px;
    color: #9c8f7a;
}
.submit-editor {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.9;
    font-family: inherit;
    color: #efe6d5;
    background: #171110;
    border: 1px solid #33281d;
    border-radius: 3px;
    outline: none;
    resize: vertical;
    -webkit-transition: border-color .18s, box-shadow .18s;
    transition: border-color .18s, box-shadow .18s;
}
.submit-editor:focus {
    border-color: #a8873f;
    box-shadow: 0 0 0 2px rgba(212, 175, 103, 0.13);
}
.submit-actions {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #241c14;
}
.submit-actions .um-btn-plain { margin-left: 12px; }

/* ---------------------------------------------------------------------------
 * 七、响应式
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    /* 侧栏改到上方：窄屏下 262px 的固定侧栏会把内容挤成一条 */
    .user-member { display: block; }
    .um-side {
        flex: none;
        width: 100%;
        padding-left: 11px;
        padding-right: 11px;
        margin-bottom: 16px;
    }
    .um-nav { display: flex; }
    .um-tab {
        flex: 1;
        text-align: center;
        border-bottom: none;
        border-right: 1px solid #241c14;
    }
    .um-tab:last-child { border-right: none; }
    .um-tab.is-on::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; }
    .um-logout { margin-top: 10px; }
}

@media (max-width: 640px) {
    .user-hero { padding: 36px 16px 30px; }
    .user-hero h1 { font-size: 27px; letter-spacing: 4px; }
    .user-wrap { padding: 22px 14px 46px; }
    .gate-card { padding: 22px 18px 26px; }
    .um-panel, .submit-shell { padding: 20px 16px 24px; }
    .uf-submit { width: 100%; min-width: 0; }
    .uf-submit-sm { width: auto; }
    .cover-preview { flex: 0 0 100%; width: 100%; margin: 0 0 12px; }
    .uf-row { margin-left: 0; margin-right: 0; }
    .uf-row > .uf-item { padding-left: 0; padding-right: 0; flex: 1 1 100%; }
    .ua-item { display: block; }
    .ua-thumb { width: 100%; height: 150px; margin: 0 0 11px; }
    .ua-thumb span { line-height: 150px; }
}

/* ==========================================================================
   积分（第 170 轮加入）：个人中心「我的积分」页签 + 身份卡里的等级行
   ★ 位置说明：本页族的层序是 … → official.css → user.css → polish.css，
     所以 user.css **不是**最后一层。这里能安全写在末尾，是因为我用的全是
     **全新的类名**（ucr- / um-group）—— polish.css 里不可能有同名声明。
     若将来要在**已有类**上改样式，就必须照项目规矩写到 polish.css 之后。
   ★ 涨跌配色沿用本页已有的语义色（见 .ua-tag-*）：涨 = #e0b45c、跌 = #e08a7c；
     同时**始终显示 +/- 号与余额**，不靠颜色单独表意（色觉障碍下也读得出来）。
   ========================================================================== */

/* 身份卡统计行里的等级名（跟在「积分：120」后面） */
.um-meta em.um-group {
    margin-left: 6px;
    font-style: normal;
    font-size: 11.5px;
}

.um-credit-card {
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid #2b2218;
    border-radius: 4px;
}
.ucr-top {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.ucr-group {
    font-size: 14px;
    letter-spacing: 1px;
    color: #b9a982;
}
.ucr-group-none { font-size: 13px; color: #9c8f7a; }
.ucr-star {
    margin-left: 4px;
    font-size: 11px;
    font-style: normal;
    letter-spacing: -1px;
}
.ucr-credits {
    font-size: 26px;
    letter-spacing: 1px;
    color: #ffe8b0;
}
.ucr-credits i {
    margin-left: 5px;
    font-size: 12px;
    font-style: normal;
    color: #b9a982;
}
.ucr-next {
    margin-top: 10px;
    font-size: 12.5px;
    color: #9c8f7a;
}
.ucr-next b { font-weight: normal; color: #e0b45c; }
.ucr-nums {
    margin-top: 14px;
    padding-top: 12px;
    font-size: 12.5px;
    color: #9c8f7a;
    border-top: 1px solid #241c14;
}
.ucr-nums > span { margin-right: 20px; }
.ucr-nums b { font-weight: normal; color: #b9a982; }
.ucr-rule {
    margin-top: 10px;
    font-size: 12px;
    color: #9c8f7a;
}

/* 积分流水的一行 */
.ucr-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #241c14;
}
.ucr-row:last-child { border-bottom: none; }
.ucr-row-main {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-width: 0;
}
.ucr-row-act { font-size: 13.5px; color: #cbb98f; }
.ucr-row-note {
    margin-left: 10px;
    font-size: 12.5px;
    color: #9c8f7a;
}
.ucr-row-time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #9c8f7a;
}
.ucr-row-right {
    -webkit-box-flex: 0;
    flex: none;
    margin-left: 16px;
    text-align: right;
}
.ucr-delta {
    display: block;
    font-size: 15px;
    letter-spacing: 1px;
}
.ucr-delta.is-gain { color: #e0b45c; }
.ucr-delta.is-loss { color: #e08a7c; }
.ucr-bal {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #9c8f7a;
}

@media (max-width: 640px) {
    .um-credit-card { padding: 15px 14px; }
    .ucr-credits { font-size: 22px; }
    .ucr-nums > span { margin-right: 12px; }
    .ucr-row-note { display: block; margin: 3px 0 0; }
}

/* ==========================================================================
   玩家资料页（第 175 轮加入 · 阶段4A）
   —— space.php 的输出正文 / templates/space.tpl.html 的 body.space-page
   --------------------------------------------------------------------------
   ★ 为什么写在本文件、而不是新开 space.css：
     资料页与个人中心做的是同一件事（"展示一个人"），配色、卡片、圆头像
     全是一套。分两个文件只会让调一次色调要改两处。本文件本来就同时服务
     user-page 与 submit-page，再加一个 space-page 不改变它的职责。

   ★ 为什么全部规则都加 `.space-page` 前缀：
     本文件里其它规则（.user-hero / .um-* / .uf-*）靠"类名只在那一页用"
     来隔离作用域；而资料页的头像、卡片形态与个人中心**高度相似**，
     将来很可能有人把 .um-avatar 的改动顺手抄过来。带前缀能让
     "这条规则只属于资料页"变成一件**看得出来**的事，不必回头查模板。

   ★ 层序：user.css → polish.css 后面还有一层。这里能安全写在文件末尾，
     是因为用的全是**全新类名**（sp-）—— polish.css 里不可能有同名声明。
     （同 §4 的纪律：新增视觉优先用新类名，避免与末层 !important 抢特异性。）
   ========================================================================== */

/* ---- 页头（与 .user-hero / .job-hero 同构，跨页不跳戏） ---- */
.space-page .sp-hero {
    position: relative;
    padding: 54px 20px 42px;
    text-align: center;
    background: #120d09;
    border-bottom: 1px solid rgba(212, 175, 103, 0.22);
}
.space-page .sp-hero-kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 4px;
    /* ★ 不是照抄 .user-hero-kicker 的 #8a7648 —— 那个值落在 #120d09 上
       实测只有 4.38（check_contrast.py 判 FAIL）。这里用 #94805a（5.05）。
       （.user-hero-kicker 的同一问题属既有页面，本轮不动，见工程细则记录。） */
    color: #94805a;
    text-transform: uppercase;
}
.space-page .sp-hero h1 {
    margin: 0 0 12px;
    font-size: 38px;
    font-weight: normal;
    letter-spacing: 6px;
    color: #ffe8b0;
    text-shadow: 0 2px 16px rgba(212, 175, 103, 0.35);
}
.space-page .sp-hero-sub {
    margin: 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: #9c8f7a;
}

/* ---- 两栏骨架：左身份卡 + 右内容 ---- */
.space-page .sp-wrap {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 34px 9px 64px;
}
.space-page .sp-side {
    -webkit-box-flex: 0;
    flex: 0 0 300px;
    padding-left: 11px;
    padding-right: 11px;
}
.space-page .sp-main {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 11px;
    padding-right: 11px;
}

/* ---- 卡片 ----
   ★★ 底色**不是**随手选的 #14100e（本文件里 .um-card 用的那个）。
      那个值是 polish.css §4.9/§11 已经**判定为病根**的"层次倒挂"值：
      它比身后被压暗的页面背景还暗（实测 0.89×），卡片看上去是背景上
      "挖出来的洞"而不是"浮起来的板"。
      §11.1 的结论是"卡片抬成受光暖棕板"，比值修到 2.3×。
      这里**照抄 §11.1 的那块板**（同色、同金边、同内高光、同落影），
      而不是自创一套 —— 资料页与首页必须是同一种"板"。
   ★ 只改 background / border-color / box-shadow，尺寸与位置不动。 */
.space-page .sp-card {
    padding: 22px 18px;
    text-align: center;
    background-color: #2e1f10;
    background-image: -webkit-linear-gradient(top, #3b2814 0%, #2e1f10 46%, #221506 100%);
    background-image: linear-gradient(180deg, #3b2814 0%, #2e1f10 46%, #221506 100%);
    border: 1px solid rgba(240, 211, 133, .32);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 178, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .5),
        0 8px 20px rgba(0, 0, 0, .6);
}
.space-page .sp-card + .sp-card { margin-top: 16px; }

/* ---- 头像：无图 = 首字金底圆；有图 = 圆形裁切（userAvatarTag 决定加不加 has-img） ---- */
.space-page .sp-avatar-box { margin: 0 auto 14px; }
.space-page .sp-avatar {
    display: inline-block;
    width: 96px;
    height: 96px;
    line-height: 96px;
    font-size: 38px;
    color: #1a1208;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(to bottom, #ffe8b0, #d4af67);
    border-radius: 50%;
}
/* ★ 有图时必须把行高归零：否则 img 会坐在基线上，圆底下方露出一条金色月牙。 */
.space-page .sp-avatar.has-img { line-height: 0; background: #241c14; }
.space-page .sp-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}
.space-page .sp-name {
    display: block;
    font-size: 17px;
    font-weight: normal;
    color: #ffe8b0;
    letter-spacing: 1px;
    word-break: break-all;
}
.space-page .sp-uid {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    /* ★ 提亮：卡片抬成暖棕板后，原 #8a806e 的对比度从 4.86 掉到 4.09（<4.5）。
       这不是新配色不好看，是 §11.3 记过的同一个副作用。 */
    color: #a1937a;
    word-break: break-all;
}
.space-page .sp-group {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    /* ★ 组名本身的颜色由 space.php 按 forum_group.color 内联给定（已白名单校验），
       这里只定"没有配颜色时"的默认色 —— 与 css/forum.css 里
       `.forum-group-badge` 的默认色同一个思路（那边也是 color 兜底）。 */
    color: #cbb98f;
}
.space-page .sp-stars {
    margin-left: 6px;
    font-style: normal;
    letter-spacing: 1px;
    color: #e0b45c;
}
.space-page .sp-owner-link {
    display: inline-block;
    margin-top: 14px;
    padding: 7px 18px;
    font-size: 13px;
    letter-spacing: 1px;
    color: #d4af67;
    text-decoration: none;
    background: rgba(212, 175, 103, 0.08);
    border: 1px solid rgba(212, 175, 103, 0.45);
    border-radius: 4px;
}
.space-page .sp-owner-link:hover { color: #ffe8b0; border-color: #a8873f; }

/* ---- 档案卡：上排三个数字 + 下面若干"标签 : 值" ---- */
.space-page .sp-facts { text-align: left; }
.space-page .sp-nums {
    display: -webkit-box;
    display: flex;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
}
.space-page .sp-num {
    -webkit-box-flex: 1;
    flex: 1 1 0;
    text-align: center;
}
.space-page .sp-num b {
    display: block;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #e0b45c;
}
.space-page .sp-num i {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    color: #9c8f7a;
}
.space-page .sp-fact {
    font-size: 13px;
    line-height: 2;
}
.space-page .sp-fact i {
    display: inline-block;
    width: 64px;
    font-style: normal;
    color: #9c8f7a;
}
.space-page .sp-fact span { color: #cbb98f; word-break: break-all; }

/* ---- 内容块 ---- */
.space-page .sp-block {
    padding: 22px 22px 24px;
    background-color: #2e1f10;
    background-image: -webkit-linear-gradient(top, #3b2814 0%, #2e1f10 46%, #221506 100%);
    background-image: linear-gradient(180deg, #3b2814 0%, #2e1f10 46%, #221506 100%);
    border: 1px solid rgba(240, 211, 133, .32);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 178, .18),
        inset 0 -1px 0 rgba(0, 0, 0, .5),
        0 8px 20px rgba(0, 0, 0, .6);
}
.space-page .sp-block + .sp-block { margin-top: 16px; }
.space-page .sp-block-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 2px;
    color: #ffe8b0;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
}
.space-page .sp-count {
    margin-left: 10px;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0;
    color: #a1937a;
}
.space-page .sp-bio {
    margin: 0;
    font-size: 14px;
    line-height: 2;
    color: #c2b393;
    word-break: break-word;
}
.space-page .sp-empty {
    margin: 0;
    font-size: 13.5px;
    line-height: 2;
    color: #9c8f7a;
}
.space-page .sp-empty a { color: #d4af67; text-decoration: none; border-bottom: 1px dashed rgba(212, 175, 103, 0.5); }
.space-page .sp-empty a:hover { color: #ffe8b0; }
.space-page .sp-empty-card { text-align: center; }

/* ---- TA 的帖子列表 ---- */
.space-page .sp-threads {
    margin: 0;
    padding: 0;
    list-style: none;
}
.space-page .sp-thread {
    position: relative;
    padding: 12px 0 12px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
}
.space-page .sp-thread:last-child { border-bottom: none; }
/* 左侧一枚小方块做"列表项"标记（不用 list-style：老内核下定位不稳） */
.space-page .sp-thread::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 5px;
    height: 5px;
    background: #a8873f;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.space-page .sp-thread-board {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 7px;
    font-size: 11.5px;
    color: #9c8f7a;
    text-decoration: none;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(240, 211, 133, .28);
    border-radius: 3px;
    vertical-align: 1px;
}
.space-page .sp-thread-board:hover { color: #ffe8b0; border-color: #a8873f; }
.space-page .sp-thread-title {
    font-size: 14.5px;
    color: #d8c9a6;
    text-decoration: none;
    word-break: break-all;
}
.space-page .sp-thread-title:hover { color: #ffe8b0; }
.space-page .sp-thread-meta {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #9c8f7a;
}

/* 置顶 / 精华 小旗 */
.space-page .sp-flag {
    display: inline-block;
    margin-right: 6px;
    padding: 0 5px;
    font-size: 11px;
    font-style: normal;
    line-height: 17px;
    border-radius: 3px;
    vertical-align: 1px;
}
.space-page .sp-flag-top { color: #ffe8b0; background: rgba(224, 138, 124, 0.18); border: 1px solid rgba(224, 138, 124, 0.5); }
.space-page .sp-flag-ess { color: #ffe8b0; background: rgba(224, 180, 92, 0.16); border: 1px solid rgba(224, 180, 92, 0.5); }

/* ---- 分页 ---- */
.space-page .sp-pager {
    margin-top: 18px;
    padding-top: 16px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, .42);
}
.space-page .sp-pg {
    display: inline-block;
    margin: 0 5px;
    padding: 6px 16px;
    font-size: 13px;
    color: #d4af67;
    text-decoration: none;
    background: rgba(212, 175, 103, 0.08);
    border: 1px solid rgba(212, 175, 103, 0.45);
    border-radius: 4px;
}
.space-page .sp-pg:hover { color: #ffe8b0; border-color: #a8873f; }
.space-page .sp-pg.is-off {
    /* ★ 提亮到 4.56：它虽然"不可点"，但仍是一段会被读出来的文字
       （不是 <button disabled>），所以不适用 WCAG 的"禁用控件豁免"。
       #948872 相对激活态的金 #d4af67（7.67）仍明显更弱，弱化关系保住了。 */
    color: #948872;
    background: transparent;
    border-color: rgba(0, 0, 0, .45);
    cursor: not-allowed;
}
.space-page .sp-pg-num {
    display: inline-block;
    margin: 0 10px;
    font-size: 13px;
    color: #9c8f7a;
}

/* ---- 窄屏：侧栏改到上方（与 .user-member 的 900px 断点保持一致） ---- */
@media (max-width: 900px) {
    .space-page .sp-wrap { display: block; }
    .space-page .sp-side {
        -webkit-box-flex: 0;
        flex: none;
        width: 100%;
        margin-bottom: 16px;
    }
    .space-page .sp-side .sp-card { text-align: center; }
}

@media (max-width: 640px) {
    .space-page .sp-hero { padding: 36px 16px 30px; }
    .space-page .sp-hero h1 { font-size: 27px; letter-spacing: 4px; }
    .space-page .sp-wrap { padding: 22px 3px 46px; }
    .space-page .sp-block { padding: 18px 15px 20px; }
    .space-page .sp-fact i { width: 56px; }
    .space-page .sp-thread-board { display: block; width: -webkit-fit-content; width: fit-content; margin: 0 0 6px; }
}

/* ==========================================================================
   头像与公开资料（阶段4A · 第 195 轮）
   --------------------------------------------------------------------------
   ★ 新增样式一律用**新类名**（um-avatar-host / uf-avatar-*），不改既有规则：
     老规则在末层 CSS 里有 !important 收口，在这里改同一个选择器抢不赢，
     改完看不出变化 —— 那是最容易白干的一种活。
   ★ 唯一一处动到既有类的是 `.um-avatar` 的 display，且是**追加**在文件末尾
     （同特异性 + 写得更晚 = 盖掉，不是改掉）：服务端 userAvatarTag() 产的是
     <span>，span 默认 inline ⇒ width/height 会被忽略，头像会退化成一行的字。
   ========================================================================== */

/* ---------- 头像片段本身（服务端产的，左侧身份卡与资料页预览共用） ---------- */
.um-avatar-host {
    margin-bottom: 14px;
    text-align: center;
}
.um-avatar {
    display: inline-block;
    vertical-align: top;
}
.um-avatar.has-img {
    /* 有图时撤掉首字色块的渐变，否则图片边缘会透出一圈红边 */
    background: #241c14;
}
.um-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* ---------- 资料页头像行（预览 + 操作） ---------- */
.uf-avatar-row {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 16px 18px;
    background: #1b1512;
    border: 1px solid #33281d;
    border-radius: 6px;
}
.uf-avatar-prev {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 30px;
    color: #9c8f7a;
    border-radius: 50%;
    overflow: hidden;
}
/* ★ 宿主不设 border/padding ⇒ 内容盒正好 88×88，服务端那段 88×88 的头像
   刚好铺满；不用给 img 再写一套尺寸（否则改尺寸要改两处，必然漏一处）。 */
.uf-avatar-prev .um-avatar {
    width: 88px;
    height: 88px;
    margin: 0;
    font-size: 32px;
    line-height: 88px;
}
.uf-avatar-ops {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 18px;
}
.uf-avatar-btns .um-btn-plain { margin-left: 10px; }
.uf-avatar-ops .uf-tip { margin-top: 9px; }

/* 次级按钮的禁用态：.um-btn-plain 原本没有 disabled 样式，
   "没有头像"时的「清除头像」就会看起来和能点一模一样。 */
.um-btn-plain[disabled] {
    opacity: .45;
    cursor: not-allowed;
    color: #b3a488;
    border-color: #3a2e21;
}

/* ---------- .uf-tip 的字色（既有问题，本轮首次量到并修掉） ----------
   ★ 事实（check_contrast.py 实测，不是估计）：
       #7b7264 on #14100e（面板/投稿壳底色）= 3.99 —— 低于正文要求的 4.50。
     这是**改前就存在**的：给第 175 轮做夹具时第一次量到个人中心的真实对比度
     （此前这一页没有夹具，从来没量过，所以一直没人发现）。
     我新增的 .uf-avatar-row（#1b1512，比面板略亮）把它从 3.99 拉到 3.81 ——
     不修的话，"改完反而更差"。
   ★ 修法：整条 .uf-tip 提到 #9c8f7a ⇒ #14100e 上 5.97、#1b1512 上 5.70，两处都过。
     .uf-tip 只出现在 user.tpl.html / submit.tpl.html 两页，且两页的底色都是 #14100e，
     不存在"某个页面底色更亮、提亮反而更难读"的情况（已逐页确认）。
   ★ 第 175 轮当时是把这条**追加在文件末尾**（同特异性 + 写得更晚 = 盖掉），
     以保留原规则里的旧声明。
   ★★ **第 218 轮改了做法**：调色板级归一化改为**就地改值**
     （理由见 `.um-item-sub` 那段：一处定义胜过 N 条覆盖块），
     于是这里那条重复声明**已删除**，只留这段历史。
     现在 `.uf-tip` 的字色就在它自己那条规则里，**要改请改那里**。 */

@media (max-width: 640px) {
    .uf-avatar-row { display: block; text-align: center; }
    .uf-avatar-prev { margin: 0 auto 14px; }
    .uf-avatar-ops { padding-left: 0; }
}

/* ============================================================================
   消息中心（第 206 轮 · 阶段4B）
   ============================================================================
   ★ 全部类名都以 .um-msg- / .um-nt- 开头，**挂在 .user-page 里**：
     消息中心只出现在个人中心一处，不需要（也不该）进 .page-home 那套官方皮肤。
   ★ 层序：user.css 是这一页族的倒数第二层、polish.css 才是最后一层
     （.u-hidden 在那里且带 !important）。所以这里**不重复定义**显示/隐藏，
     只用 rhShow/rhHide 切 —— 自己写 display 会被 polish 的 !important 压掉。

   ---------- 配色（三处底色，全部按"比背景亮"取） ----------
     面板底       #14100e   （.um-body 一贯的底色）
     列表行       #1b1512   （比面板亮一档 = 层次正立，不是倒挂）
     我方气泡     #2a2113   （比面板亮两档，与对方气泡拉开）
   次级文字统一 #9c8f7a：这是本文件里已经实测通过的次级色
   （.uf-tip 就是它，见文件末尾那段注释的实测值），不新发明色号。
   ========================================================================== */

/* ---------- 子页签（私信 / 提醒） ---------- */
.um-msg-tabs {
    margin: 0 0 16px;
    border-bottom: 1px solid #241c14;
}
.um-msg-tab {
    display: inline-block;
    padding: 9px 18px;
    margin: 0 2px -1px 0;
    font-size: 14px;
    font-family: inherit;
    letter-spacing: 1px;
    color: #a0917a;
    background: none;
    border: 1px solid transparent;
    border-bottom: 1px solid #241c14;
    cursor: pointer;
    -webkit-transition: color .16s, border-color .16s;
    transition: color .16s, border-color .16s;
}
.um-msg-tab:hover { color: #ffe8b0; }
.um-msg-tab.is-on {
    color: #ffe8b0;
    border-color: #241c14;
    border-bottom-color: #14100e;
    background: #17120f;
}

/* ---------- 工具行 ---------- */
.um-msg-tools {
    min-height: 30px;
    margin: 0 0 10px;
}
.um-msg-note {
    display: inline-block;
    font-size: 12.5px;
    line-height: 30px;
    color: #9c8f7a;
}
.um-msg-ops { float: right; }
.um-msg-ops .um-btn-plain {
    padding: 5px 12px;
    font-size: 12.5px;
    margin-left: 8px;
}

/* ---------- 列表（会话 / 提醒共用一套行） ---------- */
.um-msg-list { min-height: 60px; }
.um-msg-row {
    position: relative;
    padding: 12px 14px 12px 12px;
    margin-bottom: 8px;
    background: #1b1512;
    border: 1px solid #241c14;
    border-radius: 4px;
}
.um-msg-row.is-link { cursor: pointer; }
.um-msg-row.is-link:hover { border-color: #3a2e21; background: #201914; }
.um-msg-row.is-unread { border-left: 3px solid rgba(212, 175, 103, 0.55); }

/* 会话行：左头像 + 右两行 */
#pmList .um-msg-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.um-msg-ava {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
    color: #1a1208;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(top, #ffe8b0, #d4af67);
    border-radius: 50%;
    overflow: hidden;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
}
.um-msg-ava.has-img { background: none; }
.um-msg-ava img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.um-msg-main {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    min-width: 0;
}
.um-msg-line1 { line-height: 1.6; }
.um-msg-line2 {
    font-size: 12.5px;
    line-height: 1.7;
    color: #a1937a;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.um-msg-name { font-size: 14.5px; color: #ffe8b0; }
.um-msg-time {
    float: right;
    font-size: 12px;
    color: #9c8f7a;
}
.um-msg-me { font-style: normal; color: #9c8f7a; }
.um-msg-badge { margin-left: 8px; }

/* ---------- 提醒行 ---------- */
.um-nt-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: flex-start;
    align-items: flex-start;
}
.um-nt-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-right: 11px;
    font-size: 12.5px;
    line-height: 26px;
    text-align: center;
    color: #1a1208;
    background: #b99a5c;
    border-radius: 3px;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
}
.um-nt-row.is-unread .um-nt-icon { background: #d4af67; }
.um-nt-text {
    font-size: 14px;
    line-height: 1.75;
    color: #d8cbaa;
}
.um-nt-row.is-unread .um-nt-text { color: #ffe8b0; }
.um-msg-kind {
    display: inline-block;
    padding: 0 7px;
    margin-right: 8px;
    font-size: 11.5px;
    line-height: 17px;
    color: #b9a982;
    border: 1px solid #3a2e21;
    border-radius: 2px;
}

/* ---------- 会话视图 ---------- */
.um-msg-thread-head {
    min-height: 34px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid #241c14;
}
.um-msg-back {
    padding: 5px 11px;
    font-size: 12.5px;
    font-family: inherit;
    color: #b3a488;
    background: none;
    border: 1px solid #3a2e21;
    border-radius: 3px;
    cursor: pointer;
    -webkit-transition: color .16s, border-color .16s;
    transition: color .16s, border-color .16s;
}
.um-msg-back:hover { color: #ffe8b0; border-color: #a8873f; }
.um-msg-thread-name {
    display: inline-block;
    margin-left: 12px;
    font-size: 14.5px;
    color: #ffe8b0;
}
.um-msg-thread-head .um-btn-plain {
    float: right;
    padding: 5px 12px;
    font-size: 12.5px;
}
.um-msg-stream {
    max-height: 380px;
    padding: 6px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #12100d;
    border: 1px solid #241c14;
    border-radius: 4px;
}
/* ---------- 会话流：气泡 ---------- */
/* ★★ 用 float 而不是 max-width 单干 —— 第 206 轮踩过，必须写清楚：
 *   `.um-msg-bubble` 一开始是 `display:block; max-width:78%`。看着定义了"最宽 78%"，
 *   实际效果是**每一条都撑到 78%**：block 的 width:auto 是"填满可用宽度"，
 *   max-width 只在内容更长时起作用 —— 短消息（"好"、"去吧，晚上聊"）于是变成
 *   500px 宽的深色长条，看着像坏掉的表格，而不像聊天。
 *   ★ float 走的是**shrink-to-fit**：宽度 = min(内容宽, max-width)。
 *     这正是气泡要的语义；clear:both 保证一条一行。
 *   ★ 这个缺陷**只有真渲染才看得见**：CSS 里那三条声明一条都没写错，
 *     静态读代码、乃至读 computed style（max-width 确实=78%）都发现不了。
 *     ⇒ 夹具 + 截图是唯一能抓住它的手段。 */
.um-msg-stream::after { content: ""; display: block; clear: both; }
.um-msg-bubble {
    float: left;
    clear: both;
    max-width: 78%;
    padding: 9px 13px;
    margin: 0 0 10px;
    background: #1e1814;
    border: 1px solid #2b2218;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.um-msg-bubble.is-me {
    float: right;
    margin-left: 0;
    margin-right: 0;
    background: #2a2113;
    border-color: #4a3a1e;
}
.um-msg-btext {
    font-size: 13.5px;
    line-height: 1.85;
    color: #e6dcc4;
    word-break: break-word;
    white-space: pre-wrap;
}
.um-msg-bubble.is-me .um-msg-btext { color: #ffe8b0; }
.um-msg-btime {
    margin-top: 5px;
    font-size: 11.5px;
    text-align: right;
    color: #9c8f7a;
}

/* ---------- 发送框 ---------- */
.um-msg-send {
    margin-top: 12px;
    text-align: right;
}
.um-msg-send textarea {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.8;
    color: #e6dcc4;
    background: #14100e;
    border: 1px solid #33281d;
    border-radius: 3px;
    resize: vertical;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.um-msg-send textarea:focus { border-color: #a8873f; outline: none; }

@media (max-width: 640px) {
    .um-msg-ops { float: none; display: block; margin-top: 6px; }
    .um-msg-bubble { max-width: 92%; }
    .um-msg-stream { max-height: 300px; }
    .um-msg-tab { padding: 8px 13px; }
}

/* ============================================================================
   好友与关注（第 207 轮 · 阶段4B 第二步）
   ============================================================================
   ★★ 三块，两种作用域，**刻意分开写** —— 分界线就是"这些类名会出现在哪些页"：

     A. .sp-soc-*   只属于资料页  ⇒ 加 `.space-page` 前缀
        （与上文"玩家资料页"整节同一约定：让"这条规则只属于这一页"
          成为一件看得出来的事。将来有人抄 .sp-card 的改动时不会顺手带错。）
     B. .rh-soc-*   **资料页与个人中心共用**  ⇒ 不加任何页面前缀
        同一组关系按钮既画在资料页的卡片里，也画在个人中心好友列表的
        每一行上（见 js/social.js 头注）。加前缀就等于按页复制两份，
        将来调一次颜色要改两处、漏一处就是"两个地方长得不一样"。
        ★ 代价是它必须**不能依赖任何一页的父选择器** —— 所以下面每条
          .rh-soc-* 都是自足的，不写 `.space-page .rh-soc-btn` 这种。
     C. .um-fr-*    只属于个人中心的行（.um-msg-row 那一套）  ⇒ 不带前缀
        理由与 .um-msg-* 相同：这些类名只在 user.tpl.html 出现，
        靠"类名唯一性"隔离作用域，不需要再挂前缀。

   ★ 配色**全部沿用本文件既有值，不新发明色号**：
       金主钮   渐变 #ffe8b0→#d4af67 + 深褐字 #1a1208
                （＝ .um-pager .pg-btn.is-on / .sp-avatar 同一套）
       "已关注" 半透明金底 rgba(212,175,103,.10) + 金字 #d4af67
                （＝ .sp-owner-link 的底色/字色）
       "拒绝/解除" 无底 + 描边 #4a3a29 + 次级字 #b9ab8f
       次级文字 #9c8f7a（本文件已实测通过的那个）
       成功/错误 #7fd07f / #e07a6a
                （★ 与 css/forum.css 的 .forum-act-tip.is-ok/.is-err
                  **取同一个值**：同一件"操作成功/失败"的事，全站一种色。）

   ★ 层序：user.css 之后还有 polish.css。这里能安全写在文件末尾，
     是因为 A/C 用全新类名、B 的类名此前全站不存在（已 grep 确认零引用）
     —— polish.css 里不可能有同名声明，不存在"末层 !important 半路压掉"。
   ========================================================================== */

/* ---------- A. 资料页：数字行（好友 / 关注 / 粉丝） ---------- */
/* ★ 与 .sp-nums 是同一套版式（三等分、中缝竖线），但**不复用那个类**：
     .sp-nums 是档案卡（积分/帖子/精华）专用的，两个数字行将来完全可能
     往不同方向改（例如社交行要放"点头像跳列表"的链接）。共用类名会让
     改动互相牵连。这是"同一个东西只留一个实现"的**例外**：
     两个东西，只是暂时长得一样。 */
.space-page .sp-soc-nums {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 0 0 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .42);
}
.space-page .sp-soc-num {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    text-align: center;
}
.space-page .sp-soc-num b {
    display: block;
    font-size: 19px;
    font-weight: normal;
    letter-spacing: 1px;
    color: #e0b45c;
}
.space-page .sp-soc-num i {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    color: #9c8f7a;
}
/* 社交卡比身份卡矮一档：它的内容只有"三个数字 + 一行按钮" */
.space-page .sp-soc-card { padding: 18px 16px; }

/* 只有关注、没有好友（或反之）时，数字行右下方直接接按钮组，
   由 .rh-soc 的 margin 负责留白 —— 这里不额外加。 */
.space-page .sp-soc-guest {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.9;
    color: #9c8f7a;
}
.space-page .sp-soc-guest a { color: #d4af67; text-decoration: none; }
.space-page .sp-soc-guest a:hover { color: #ffe8b0; }

/* ---------- B. 关系按钮组（资料页 + 个人中心共用） ---------- */
.rh-soc { margin-top: 12px; }
.rh-soc-btns { display: inline-block; }
.rh-soc-btn {
    display: inline-block;
    padding: 7px 16px;
    margin: 4px 6px 0 0;
    font-size: 13px;
    font-family: inherit;
    letter-spacing: 1px;
    color: #1a1208;
    background: -webkit-linear-gradient(top, #ffe8b0, #d4af67);
    background: linear-gradient(to bottom, #ffe8b0, #d4af67);
    border: 1px solid rgba(212, 175, 103, .6);
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    -webkit-transition: color .16s, border-color .16s, opacity .16s, background-color .16s;
    transition: color .16s, border-color .16s, opacity .16s, background-color .16s;
}
/* ★ 主钮的 hover 只提"面"不提"字"：它本来就是深褐字压金底，
   再提亮字色会掉对比度（深褐字是必须的，见 §13"金/黄底用深褐字"）。 */
.rh-soc-btn:hover { opacity: .92; }
.rh-soc-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 已关注 / 互相关注：已经完成的状态，用"描边款"降一格，
   与右边那个金色的「加好友」拉开 —— 否则两个金块并排，看不出哪个是主操作。 */
.rh-soc-btn.is-on {
    color: #d4af67;
    background: rgba(212, 175, 103, .10);
    border-color: rgba(212, 175, 103, .45);
}
.rh-soc-btn.is-on:hover { color: #ffe8b0; border-color: #a8873f; opacity: 1; }
/* 拒绝 / 解除：否定动作，最弱的一档（无底、暗描边）。
   ★ 刻意**不做成红色**：解除好友不是"危险操作"，它只是"收回一个关系"，
     染红会让人以为点了会丢东西。 */
.rh-soc-btn.is-plain {
    color: #b9ab8f;
    background: none;
    border-color: #4a3a29;
}
.rh-soc-btn.is-plain:hover { color: #e6dcc4; border-color: #6b563c; opacity: 1; }

/* 按钮组下方那一行结果提示（"申请已发出""登录已失效"…） */
.rh-soc-tip {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #9c8f7a;
}
.rh-soc-tip.is-ok  { color: #7fd07f; }
.rh-soc-tip.is-err { color: #e07a6a; }

/* ---------- C. 个人中心：好友与关注的行 ---------- */
/* ★ 与 #pmList .um-msg-row 一样是"左头像 + 中两行 + 右操作"。
   不写成 `#frList .um-msg-row`，因为 .um-fr-row 这个类**已经**只出现在
   好友列表里（js/user.js 渲染时同时挂 um-msg-row um-fr-row），
   用类名比用祖先 id 更结实：将来这行被挪到别处也还成立。 */
.um-fr-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}
.um-fr-ops {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 10px;
    text-align: right;
    white-space: nowrap;
}
/* 行内按钮比资料页的小一号：一行里要和头像、名字挤，且常常两个并排 */
.um-fr-ops .rh-soc-btn {
    padding: 4px 10px;
    margin: 2px 0 2px 6px;
    font-size: 12px;
    letter-spacing: 0;
}

@media (max-width: 640px) {
    /* 窄屏：操作按钮换到名字下面一行，别把名字挤成竖排 */
    .um-fr-row { display: block; }
    .um-fr-ops { margin: 8px 0 0; text-align: left; }
    .um-fr-ops .rh-soc-btn { margin: 0 6px 0 0; }
}

@media (max-width: 900px) {
    /* 资料页在 900px 断点下侧栏改到上方（见上文 §玩家资料页的窄屏规则）：
       此时社交卡会变成通栏，数字行的三等分会显得很空 ⇒ 收窄内边距即可。 */
    .space-page .sp-soc-card { padding: 16px 14px; }
}

/* ============================================================================
 * 每日签到（第 208 轮 · 阶段5 第一步）
 * ============================================================================
 * 【作用域：全部不带页面前缀，但只在 user.tpl.html 上出现】
 *   .um-sign-* 这一族用到的页只有个人中心一页（资料页/论坛页都没有签到面板），
 *   所以不需要 .page-home 前缀 —— 判据是"这些类名会出现在哪些页"，
 *   不是"看着像不像公共组件"。★ 与上一节 .um-fr-* 同一判断；
 *   万一将来论坛页也要显示"今日签到"按钮，规则要**搬家**，不要复制一份。
 *
 * 【为什么要画成"印章格子"而不是一行文字】
 *   签到的核心体验是**看得见连续**。一串日期数字读不出"我连了 7 天"，
 *   而一排金色格子一眼就读出来了。金点是本站在别处已经用过的视觉语言
 *   （`.ucr-group` 的星、`.uf-submit` 的渐变），延续它比发明第四种金色更划算。
 *
 * 【★ 唯一一个"跨页复用"的类：.um-msg-ava】
 *   榜行的头像直接用消息列表那一个 40px 圆头像：它是"个人中心列表行里的头像"
 *   这**同一件东西**，第 4 次出现。新开一个 .um-sign-ava 只会多出一条
 *   迟早会与它分叉的规则（改了一处、另一处还是老尺寸）。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 页签上的金点
 *
 * ★★ 与红色角标（.um-badge）**语义不同、外观必须一眼分得开**：
 *      红字 + 数字 = 有 N 条未读（点进去能看到具体几条）
 *      金点，无数字 = 今天还有件事没做（做完就没了）
 *   两者一旦长得像，"亮着点但进去没有未读"会让**所有**红点一起失去意义 ——
 *   那是这个站最贵的一种信任损耗，而且没人会为此报 bug，只会不再看红点。
 *   所以：红是 #d4726a 的**方角数字块**，金是 #d4af67 的**小圆点**。
 * ------------------------------------------------------------------------- */
.um-tab-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    font-style: normal;
    background: #d4af67;
    border-radius: 50%;
    vertical-align: 2px;
    -webkit-box-shadow: 0 0 6px #d4af67;
    box-shadow: 0 0 6px #d4af67;
}

/* ---------------------------------------------------------------------------
 * 今日状态块
 * ------------------------------------------------------------------------- */
.um-sign-box {
    padding: 18px 18px 16px;
    text-align: center;
    background: #171009;
    border: 1px solid #4a3a29;
    border-radius: 4px;
}

.um-sign-nums {
    margin-bottom: 14px;
    letter-spacing: 0;
}

.um-sign-big,
.um-sign-sm {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.um-sign-big { margin-right: 26px; }
.um-sign-big b {
    display: block;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    color: #d4af67;
}
.um-sign-big i {
    display: block;
    font-size: 11px;
    font-style: normal;
    letter-spacing: 1px;
    color: #9c8f7a;
}

.um-sign-sm { margin-right: 16px; }
.um-sign-sm b {
    display: block;
    font-size: 16px;
    line-height: 1.25;
    color: #e8dcc0;
}
.um-sign-sm i {
    display: block;
    font-size: 11px;
    font-style: normal;
    color: #9c8f7a;
}

/* 签到按钮：沿用 .uf-submit 的金底深字（同一套"主要动作"的视觉），
   只把分数那一截做成稍浅的褐金，让"+8 分"读起来像个副标题。 */
.um-sign-btn {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    letter-spacing: 3px;
}
.um-sign-btn i {
    font-style: normal;
    letter-spacing: 0;
    color: #5a4413;
}

.um-sign-tip {
    margin: 12px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: #9c8f7a;
}
.um-sign-tip b { color: #d4af67; }

/* ---------------------------------------------------------------------------
 * 本月日历
 *
 * ★ 7 列用 inline-block + calc 而不是 grid：本项目禁 grid（老内核）。
 *   宽度取 `calc(14.2857% - 6px)` + 左右各 3px margin
 *   ⇒ 一行 7 格正好 100%，且每格之间有 6px 缝（格子之间要能看出是"格"）。
 * ★ 容器 font-size:0 是为了吃掉 HTML 里的空白符 —— 即使将来有人在格子之间
 *   换行，也不会把 14.2857% 挤成两行（那正是 inline-block 排版最经典的坑）。
 * ------------------------------------------------------------------------- */
.um-sign-cal { margin-top: 4px; }

.um-sign-grid {
    font-size: 0;
    letter-spacing: 0;
    text-align: left;
}

.um-sign-wd {
    display: inline-block;
    width: calc(14.2857% - 6px);
    margin: 3px;
    padding: 4px 0;
    font-size: 11.5px;
    font-style: normal;
    text-align: center;
    vertical-align: top;
    color: #9c8f7a;
}

.um-sign-cell {
    display: inline-block;
    width: calc(14.2857% - 6px);
    margin: 3px;
    padding: 6px 0;
    font-size: 12.5px;
    font-style: normal;
    text-align: center;
    vertical-align: top;
    color: #9c8f7a;
    background: #1d150d;
    border: 1px solid #1d150d;
    border-radius: 3px;
}

/* 已签：金印。★ 数字用深褐字 —— 金/黄底上用深色字，是本项目的配色纪律
   （见工程细则 §13：金底用深褐、深底用纯白；反过来对比度不够）。 */
.um-sign-cell.is-on {
    color: #1a1208;
    font-weight: 700;
    background: #d4af67;
    border-color: #d4af67;
}

/* 今天：描边而不是填色 —— 已签的今天要能同时读出"今天"和"签了"两个信息 */
.um-sign-cell.is-today {
    border-color: #d4af67;
    color: #d4af67;
}
.um-sign-cell.is-today.is-on { color: #1a1208; }

/* 未来：压暗但仍占位，让人看得出"这个月还有几天" */
.um-sign-cell.is-future {
    color: #9c8f7a;
    background: #150f08;
    border-color: #150f08;
}

.um-sign-cell.is-blank {
    background: none;
    border-color: transparent;
}

.um-sign-legend {
    margin: 10px 0 0;
    font-size: 12px;
    color: #9c8f7a;
    text-align: left;
}

.um-sign-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 5px 0 14px;
    font-style: normal;
    border-radius: 2px;
    vertical-align: 0;
    background: #1d150d;
    border: 1px solid #1d150d;
}
.um-sign-legend .um-sign-dot:first-child { margin-left: 0; }
.um-sign-dot.is-on { background: #d4af67; border-color: #d4af67; }
.um-sign-dot.is-today { background: none; border-color: #d4af67; }

/* ---------------------------------------------------------------------------
 * 本月签到榜
 * ------------------------------------------------------------------------- */
.um-sign-top { margin-top: 4px; }

.um-sign-rank {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 10px;
    border-bottom: 1px solid #2a2016;
}

/* 我那一行：左侧一道金边 + 略亮的底。★ 不用整行反色 —— 反色会让名字与
   "我"字标签的对比度全部重算一遍，而这里只需要"扫一眼能找到自己"。 */
.um-sign-rank.is-me {
    background: #1d1509;
    border-left: 2px solid #d4af67;
}

.um-sign-no {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 22px;
    font-size: 13px;
    font-style: normal;
    text-align: center;
    color: #9c8f7a;
}
/* 前三名给金银铜。★ 用**字色**而不是奖牌图标：本项目禁 AI 生成图、
   也不给一个榜前三去配三张位图 —— 那三张图会随着主题改版永远配不齐。 */
.um-sign-no.is-no1 { color: #ffd76a; font-weight: 700; }
.um-sign-no.is-no2 { color: #cfcfcf; font-weight: 700; }
.um-sign-no.is-no3 { color: #d8a06a; font-weight: 700; }

.um-sign-nm {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    /* ★ min-width:0 必不可少：flex 子项默认 min-width:auto，
       长名字会**把整行撑破**而不是走省略号（症状是榜行横向溢出、被父容器裁掉）。 */
    min-width: 0;
    margin: 0 8px;
    font-size: 13.5px;
    color: #e8dcc0;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.um-sign-nm:hover { color: #d4af67; }

.um-sign-me {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-right: 8px;
    padding: 0 5px;
    font-size: 11px;
    font-style: normal;
    line-height: 16px;
    color: #1a1208;
    background: #d4af67;
    border-radius: 2px;
}

.um-sign-days {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    font-size: 12px;
    color: #9c8f7a;
}
.um-sign-days b { font-size: 14px; color: #d4af67; }

@media (max-width: 640px) {
    /* 窄屏：格子挤到 5 列也读得清，但 7 列在 320px 上每格只剩 ~36px ⇒
       收内边距、缩字号，而不是改成别的列数（日历的列数就是"一周七天"，
       改它就是改事实）。 */
    .um-sign-box { padding: 14px 12px 12px; }
    .um-sign-big b { font-size: 25px; }
    .um-sign-big { margin-right: 16px; }
    .um-sign-sm { margin-right: 10px; }
    .um-sign-cell { padding: 5px 0; font-size: 11.5px; }
    .um-sign-wd { font-size: 11px; }
    .um-sign-top .um-msg-ava { width: 32px; height: 32px; line-height: 32px; font-size: 14px; }
}

/* ============================================================================
 * 我的勋章（第 209 轮 · 阶段5 第二步）
 * ============================================================================
 * 【作用域】同上一节：.um-medal-* 只在 user.tpl.html 出现，不带页面前缀。
 *   ★ 论坛楼层里的勋章是**另一族类名**（.forum-floor-medal，在 css/forum.css），
 *     两者刻意不共用 —— 判据是 §4 那条"命中元素在哪些页"：
 *     楼层那个要在深色论坛页里跟一行小字并排，这里要在个人中心的墙里当主角，
 *     尺寸与对比要求完全不同。共用一套的结果是改这边坏那边。
 *
 * 【为什么"未获得"也要画出来（灰的）】
 *   勋章墙有一半的价值是"还差什么才能拿"。只列已获得的，这一页就退化成
 *   "我有几枚章"，看完就走。灰色态用**同一套图形、只降对比**来表达，
 *   而不是换成问号或锁 —— 形状本身就是奖励的一部分（先看见，才有想拿的欲望）。
 *
 * 【★ 亮/灰只改 color，SVG 一个字都不用动】
 *   medalIconSvg() 画的是 stroke="currentColor"，所以两态之间只需要在这里改
 *   color —— 图形没有第二份，也就不会分叉。
 *
 * 【层次不能倒挂】（§13）
 *   面板底色是 #14100e，卡片必须比它**亮**：#1a150f / 亮态 #221a10。
 *   把卡片做成比背景还暗是这套深色配色里最容易犯、也最显廉价的一个错。
 * ========================================================================== */

/* 一排一排地排（不用 grid —— 禁用；用 flex-wrap + 负外边距做"间距"，
   因为 gap 也在禁用表里）。 */
.um-medal-wall {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -8px 0 0 -8px;
}

.um-medal {
    width: 104px;
    margin: 8px 0 0 8px;
    padding: 14px 6px 12px;
    text-align: center;
    background: #1a150f;
    border: 1px solid #2e2619;
    border-radius: 4px;
}

.um-medal-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 10px;
    background: #1d160d;
    border: 1px solid #3a2f22;
    border-radius: 50%;
    color: #8a7a5e;
}
.um-medal-box svg { width: 28px; height: 28px; }

.um-medal-nm {
    font-size: 13px;
    line-height: 1.4;
    color: #9c8f7a;
}
.um-medal-sub {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #9c8f7a;
}

/* ---- 已获得：整张卡提亮一档，图标变金并带一圈弱光 ---- */
.um-medal.is-own {
    background: #221a10;
    border-color: #5c4626;
}
.um-medal.is-own .um-medal-box {
    background: #2a1e10;
    border-color: #8a6a34;
    color: #d4af67;
    -webkit-box-shadow: 0 0 10px #6b5426;
    box-shadow: 0 0 10px #6b5426;
}
.um-medal.is-own .um-medal-nm { color: #d4af67; }
.um-medal.is-own .um-medal-sub { color: #9c8f7a; }

@media (max-width: 640px) {
    /* 窄屏：一行放三张会挤 ⇒ 缩卡片宽度让四张排得下，
       而不是改行数（行数是自动的，改了反而会在 360px 上溢出）。 */
    .um-medal { width: 88px; padding: 12px 4px 10px; }
    .um-medal-box { width: 50px; height: 50px; }
    .um-medal-box svg { width: 24px; height: 24px; }
    .um-medal-nm { font-size: 12.5px; }
}

/* ============================================================================
 * 道具商城（第 210 轮 · 阶段5 第三步）
 * ============================================================================
 * 【作用域】同上一节：.um-item-* 只在 user.tpl.html 出现，不带页面前缀。
 *
 * 【★★ 为什么**不**复用 .um-medal-*，虽然两者都长成"卡片墙"】
 *   ① 结构不同：勋章卡是**纯展示**（整张卡点不了、里面没有按钮），
 *      道具卡里有按钮、有价格、有数量。共用的结果是给勋章卡加一个按钮时
 *      道具卡跟着变。
 *   ② ★★ 更要紧的是——**两者的"灰"含义不同**：
 *      勋章灰 = 还没拿到（那是**目标**，看久了会想拿）；
 *      道具灰 = 买不了 / 用不了（那是**限制**，看久了只会觉得东西坏了）。
 *      同一个视觉语言表达两种意思，人会按第一个学会的意思去理解第二个。
 *      ⇒ 连灰态也各写一份，不复用。
 *   ③ 形状上刻意区分：勋章图标用**圆形**底盘（荣誉、徽记），
 *      道具用**圆角方**底盘（物件、实体）—— 一眼能分出这两页在讲什么。
 *
 * 【层次不能倒挂】（§13）
 *   面板底色 #14100e：卡片 #1a150f（比背景亮一档），
 *   已拥有/可操作 #221a10（再亮一档），不可买 #17120c（压暗但仍**亮于**背景）。
 *   ★ 最后那一档最容易做错 —— "不能买"如果做成比背景还暗，
 *     那一格看起来就像一个洞，而不是"一件暂时买不了的东西"。
 *
 * 【三段的排版各不相同，这是有意的】
 *   商城 / 背包 = 卡片墙（横排、图标当主角、按钮在下方）
 *   道具记录     = 列表行（时间 → 名字 → 增减 → 原因 → 余额，要能上下对齐）
 *   如果记录也用卡片墙，一屏只能看四行，翻两页就翻不动了；
 *   而卡片墙如果做成列表行，"图标 + 价格 + 按钮"会挤成一条，
 *   按钮小到点不准。**两种信息密度对应两种排版**，不合并。
 * ========================================================================== */

.um-item-shop,
.um-item-bag {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    /* 用负外边距做"间距"（gap 在禁用表里），与 .um-medal-wall 同法 */
    margin: -8px 0 0 -8px;
}

.um-item {
    width: 136px;
    margin: 8px 0 0 8px;
    padding: 12px 8px 10px;
    text-align: center;
    background: #1a150f;
    border: 1px solid #2e2619;
    border-radius: 4px;
}

.um-item-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    background: #1d160d;
    border: 1px solid #3a2f22;
    border-radius: 6px;
    color: #8a7a5e;
}
.um-item-box svg { width: 24px; height: 24px; }

.um-item-nm {
    font-size: 13px;
    line-height: 1.4;
    color: #9c8f7a;
}
.um-item-nm .um-item-qty {
    font-style: normal;
    color: #d4af67;
}
.um-item-sub {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.5;
    /* ★★ 第 218 轮：本行的值由 `#6b5b45` 上调到 `#9c8f7a`。
       旧值是一笔**挂了两轮的账**：它落在卡片底 #1a150f 上只有 **2.77**（低于 4.5），
       且与 `.um-medal-sub` **逐字相同**、同一份底色、同一个数。
       第 210 轮**刻意留着没改**，理由写得很准：单改道具一侧会让两个面板的
       同一级文字不一样，真正该做的是"整个用户中心弱化色一起上调"。
       ⇒ 第 218 轮就是那一轮：user.css 里**所有** <4.5 的弱化文字色一次归到
         #9c8f7a（33 处，见工程细则 §62），本行随之落到 **5.72** PASS。
       ★ 为什么这次直接改这一行的值、而不是照第 175 轮那样在文件末尾加覆盖块：
         一次性**调色板级**归一化要的是"一个颜色只有一处定义"；
         33 条陈旧声明 + 33 条覆盖块 = 33 个"改了上面那条却不生效"的坑，
         正是手册里"修复写在目标元素根本不吃的那一层"那一类事故。 */
    color: #9c8f7a;
}
.um-item-foot { margin-top: 8px; }

/* ---- 按钮：价格写在按钮里（见 js/user.js 那段"为什么不弹二次确认"） ---- */
.um-item-btn {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.2;
    color: #ffd76a;
    background: #2a1e10;
    border: 1px solid #8a6a34;
    border-radius: 3px;
    cursor: pointer;
}
.um-item-btn:hover {
    background: #35260f;
    border-color: #d4af67;
}
/* ★ disabled 必须**看得见地**变样：点点不动又看不出为什么，
   比按钮直接消失更让人恼火（它已经发生了一次点击）。 */
.um-item-btn:disabled {
    color: #6b5b45;
    border-color: #3a2f22;
    background: #1d160d;
    cursor: default;
}
.um-item-no {
    display: inline-block;
    font-size: 11.5px;
    line-height: 1.3;
    /* ★ 第 210 轮对比度体检改：原 #6b5b45 落在"已拥有/可操作"底 #221a10 上只有
       **2.62**（比整份面板里任何一条都低）。"买不了"不是"看不见" —— 它是最需要
       被读到的一句话（玩家要据此决定"等补货"还是"根本不卖"）。
       改到色卡里的 #9c8f7a ⇒ 对 #221a10 = **5.41 PASS**。
       ★ 顺带：它已经靠"没有按钮外形"表达了"不可操作"，不需要再靠"更暗"表达一遍。 */
    color: #9c8f7a;
}

/* ---- 已拥有（背包卡） ---- */
.um-item.is-own {
    background: #221a10;
    border-color: #5c4626;
}
.um-item.is-own .um-item-box {
    background: #2a1e10;
    border-color: #8a6a34;
    color: #d4af67;
}
.um-item.is-own .um-item-nm { color: #d4af67; }
.um-item.is-own .um-item-sub { color: #9c8f7a; }

/* ---- 不可买（商城卡）：压暗一档，但**绝不隐藏** ----
   "已售罄"本身就是信息（玩家会记得下次早点来）。藏起来的话，
   商城会在别人买走最后一件的瞬间**少一格** —— 那看起来像"东西被下架了"。 */
.um-item.is-off {
    background: #17120c;
    border-color: #241d14;
}
.um-item.is-off .um-item-box {
    color: #4a3f30;
    border-color: #2a2218;
}
.um-item.is-off .um-item-nm { color: #9c8f7a; }

/* ---- 道具记录：列表行 ---- */
.um-item-log { margin-top: 4px; }
.um-item-logrow {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
    padding: 7px 2px;
    border-bottom: 1px solid #221b12;
    font-size: 12.5px;
    line-height: 1.5;
}
/* ★ 用固定宽度让五列上下对齐（不用 table、不用 grid —— 都禁用）。
   窄屏会自然折行，那时固定宽度失效、变成"每行一个字段"，
   在 360px 上反而比硬挤成一排可读（见下面的 @media）。 */
.um-item-logt { width: 116px; color: #9c8f7a; }
.um-item-logn { width: 142px; color: #9c8f7a; }
.um-item-logx { width: 96px; }
.um-item-logx.is-in  { color: #d4af67; }   /* 获得 */
.um-item-logx.is-out { color: #9c8f7a; }   /* 消耗 */
.um-item-logr { width: 88px; color: #9c8f7a; }
.um-item-logb { color: #9c8f7a; }

@media (max-width: 640px) {
    /* 窄屏：卡片缩一档，让四张排得下（不改行数 —— 行数是自动的，
       写死行数会在 360px 上溢出，与勋章那一节同一个理由）。 */
    .um-item { width: 108px; padding: 10px 5px 9px; }
    .um-item-box { width: 40px; height: 40px; }
    .um-item-box svg { width: 21px; height: 21px; }
    .um-item-nm { font-size: 12.5px; }
    /* 记录行：撤掉固定宽度，让五段各自成行 —— 窄屏上一行塞五列
       会挤成每列 2~3 个字，那比换行难读得多。 */
    .um-item-logt,
    .um-item-logn,
    .um-item-logx,
    .um-item-logr { width: auto; margin-right: 10px; }
}

/* ============================================================================
 * 任务中心（第 211 轮 · 阶段5 第四步）
 * ============================================================================
 * 【作用域】同前两节：.um-task-* 只在 user.tpl.html 出现，不带页面前缀。
 *
 * 【★★ 为什么是"列表行"而不是"卡片墙"】
 *   与商城/背包那两段刻意不同。任务的一行要装下四样东西：
 *     图标 · 名字+周期 · 一句话说明 · 进度（1/3） · 奖励分 · 按钮/状态
 *   做成 136px 的卡片时，这一行会被折成三行小字、进度与奖励挤在一起，
 *   而"我离目标还差几次"恰恰是这个页面唯一需要一眼看清的数字。
 *   ⇒ 任务走**横向一行**（图标在左、说明在中、操作在右），
 *     像"待办清单"而不是"货架"。信息密度对应排版，不为了统一而统一。
 *
 * 【★★ 三态的视觉分工（这是本段唯一需要想清楚的地方）】
 *   进行中 doing：**安静的**。左竖条 #3a2f22（几乎是背景色）——
 *                 它不该抢注意力，用户这时候没事可做。
 *   可领取 ready：**唯一被允许发光的**。左竖条 #d4af67 + 行底提亮一档 +
 *                 按钮是亮金实心 —— 整个面板里最亮的东西就是"可以领了"。
 *   已领取 done ：**不压暗文字**，只换左竖条与状态字。
 *                 ★ 反直觉但重要：把"已完成"做成灰扑扑的，
 *                   看起来像"这件事黄了"。它是**成绩**，不该按"禁用"来画。
 *                   （与道具那边"不买也不能做成黑洞"是同一条：状态要读得出来，
 *                    而"读得出来"不等于"更暗"。）
 *
 * 【层次不能倒挂】（§13）
 *   面板底 #14100e → 行 #1a150f（亮一档）→ 可领取 #221a10（再亮一档）
 *   → 已领取 #1d160d（介于两者之间，**不低于面板底**）。
 *
 * 【对比度】本段所有文字色只用两个值：#d4af67（金，标题/奖励）与
 *   #9c8f7a（弱化文字）。★ 第 210 轮写这段时的理由是"不用 #6b5b45 ——
 *   它在 .um-item-sub / .um-medal-sub 上还挂着一笔 2.77 的账"；
 *   第 218 轮把那笔账还清了（**低于 4.50 的**弱化文字色全部归到 #9c8f7a），
 *   于是"只用两个值"从**本段的自觉**变成了**整份文件在这两个面板上的现状**。
 * ========================================================================== */

.um-task-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    /* 负外边距做间距（gap 在禁用表里），与前两段同法 */
    margin: -8px 0 0 0;
}

.um-task {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 8px 0 0 0;
    padding: 10px 12px;
    background: #1a150f;
    border: 1px solid #2e2619;
    /* ★ 左竖条用 border-left 而不是伪元素：这一行的三态差异全部落在这条边上，
       写成一个可覆盖的值比再造一个绝对定位的条子好维护得多。 */
    border-left: 3px solid #3a2f22;
    border-radius: 4px;
}

/* 图标盘：与道具的"圆角方"同族但更小更扁，并在**形状**上与勋章（圆）分开 */
.um-task-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    -webkit-flex: none;
    flex: none;
    margin-right: 12px;
    background: #1d160d;
    border: 1px solid #3a2f22;
    border-radius: 4px;
    color: #8a7a5e;
}
.um-task-box svg { width: 22px; height: 22px; }

/* 中段：名字行 / 说明行 / 进度行。占满剩余宽度，让右侧操作永远贴右。 */
.um-task-mid {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.um-task-nm {
    font-size: 13.5px;
    line-height: 1.4;
    color: #d4af67;
}
/* 周期标签：做成小胶囊，紧跟在名字后面 */
.um-task-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    font-style: normal;
    line-height: 1.5;
    color: #9c8f7a;
    background: #1d160d;
    border: 1px solid #2e2619;
    border-radius: 8px;
}
.um-task-sub {
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.5;
    color: #9c8f7a;
}
/* 进度：目标只有一两次的任务（签到、首帖）看着就是"1/1"，
   不去画一根进度条 —— 一根 4px 的条子在"1/3"和"2/3"之间看不出区别，
   而数字一眼就能比大小。 */
.um-task-pg {
    margin-top: 4px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #9c8f7a;
}
.um-task-pg em {
    font-style: normal;
    color: #d4af67;
}

/* 右段：奖励 + 按钮/状态，固定宽度让整列对齐 */
.um-task-foot {
    -webkit-flex: none;
    flex: none;
    width: 108px;
    margin-left: 12px;
    text-align: right;
}
.um-task-rw {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #d4af67;
}
.um-task-rw em {
    font-style: normal;
    font-size: 11px;
    color: #9c8f7a;
}

/* ---- 按钮：与 .um-item-btn 同族但**各写一份**（新视觉一律新类名） ---- */
.um-task-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.2;
    color: #ffd76a;
    background: #2a1e10;
    border: 1px solid #8a6a34;
    border-radius: 3px;
    cursor: pointer;
}
.um-task-btn:hover {
    background: #35260f;
    border-color: #d4af67;
}
.um-task-btn:disabled {
    color: #9c8f7a;
    border-color: #3a2f22;
    background: #1d160d;
    cursor: default;
}
/* "不能领"的一句话：接在按钮该在的位置上 */
.um-task-no {
    display: inline-block;
    margin-top: 6px;
    font-size: 11.5px;
    line-height: 1.3;
    color: #9c8f7a;
}

/* ---- 可领取：整个面板里唯一发光的一态 ---- */
.um-task.is-ready {
    background: #221a10;
    border-color: #5c4626;
    border-left-color: #d4af67;
}
.um-task.is-ready .um-task-box {
    background: #2a1e10;
    border-color: #8a6a34;
    color: #d4af67;
}

/* ---- 已领取：不压暗文字，只换左竖条与底色 ---- */
.um-task.is-done {
    background: #1d160d;
    border-left-color: #8a6a34;
}
.um-task.is-done .um-task-box {
    border-color: #5c4626;
    color: #d4af67;
}

@media (max-width: 640px) {
    /* 窄屏：图标与右段各缩一档，把中间那段说明让出来。
       不去掉右段（"还差几次"和按钮都在那儿），只把它的固定宽度收窄。 */
    .um-task { padding: 9px 10px; }
    .um-task-box { width: 34px; height: 34px; margin-right: 9px; }
    .um-task-box svg { width: 19px; height: 19px; }
    .um-task-foot { width: 92px; margin-left: 8px; }
    .um-task-nm { font-size: 13px; }
}

/* ============================================================================
 * 我的礼包码（第 241 轮）
 * ============================================================================
 * 【作用域】.um-code-* 只在 user.tpl.html 出现（本文件只被个人中心与投稿页加载，
 *   而投稿页没有这一块），所以不写页面级前缀 —— 与 .um-item-* / .um-task-* 同口径。
 *
 * 【★★ 为什么不复用 .um-item-logrow（道具/积分流水那一套行）】
 *   那一行是「时间 · 名称 · 增减 · 备注」四段等宽文本，**码不是主角**。
 *   而这一页唯一的主角就是那串码：玩家来这儿是为了把它抄走或点一下复制。
 *   塞进流水行样式里，码会和其他灰字一样弱化，颜色还落成 #9c8f7a（弱化色）——
 *   等于把一个"要输入到别处的凭据"藏进说明文字里。
 *   ⇒ 单独一套：码用等宽字体 + 金色 + 字距，右侧一个复制按钮，其余信息全弱化。
 *
 * 【★ 弱化文字一律 #9c8f7a（工程细则 §62 的全站标准值）】不新造近似灰。
 *
 * 【兼容约束】本文件不许出现 var() / gap / clamp() / :has() / inset /
 *   aspect-ratio / mix-blend-mode（check_user_page_wiring.py 会报红）。
 *   列间距用 margin-right 表达 —— 这条在本文件里是既有约定（见道具那一节）。
 * ========================================================================== */

.um-code-list { min-height: 60px; }

.um-code-group { margin-bottom: 26px; }

/* 分组标题：左边一条金竖线，与 .um-sub-title 的语调一致，但带一个数量角标 */
.um-code-head {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    padding: 0 0 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid #2a2117;
}
.um-code-kind {
    padding-left: 10px;
    font-size: 14.5px;
    letter-spacing: 1px;
    color: #d4af67;
    border-left: 3px solid #8a6a34;
}
.um-code-cnt { margin-left: 9px; font-size: 12.5px; color: #9c8f7a; }

/* 一行码：码 · 领取时间 · 状态 · 复制按钮。窄屏自动折行（不写死列宽和） */
.um-code-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 11px 2px;
    border-bottom: 1px solid #221b12;
}
.um-code-val {
    /* 兑换码要能一眼认清每个字符：等宽 + 加宽字距。
       数字 0 与字母 O、1 与 l 在这类码里最容易看错，等宽字体能大幅降低抄错率。 */
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #ffe8b0;
    margin-right: 16px;
    word-break: break-all;
}
.um-code-time { margin-right: 14px; font-size: 12.5px; color: #9c8f7a; }
.um-code-st   { margin-right: 12px; font-size: 12.5px; color: #9c8f7a; }
.um-code-st.is-ok { color: #8fbf7a; }
.um-code-st.is-dead { color: #7a6a58; text-decoration: line-through; }

/* 复制按钮：小而明确，不要抢走码本身的注意力 */
.um-code-copy {
    padding: 5px 12px;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: 1px;
    color: #d4af67;
    background: #1a1410;
    border: 1px solid #4a3a24;
    border-radius: 3px;
    cursor: pointer;
}
.um-code-copy:hover { color: #ffe8b0; border-color: #8a6a34; }
.um-code-copy.is-done { color: #8fbf7a; border-color: #465c3a; }

@media (max-width: 640px) {
    /* 窄屏：把"时间/状态"折到第二行，码独占第一行 ——
       一行塞四个元素时码会被挤到换行、断成两截，那比折行难读得多。 */
    .um-code-val { width: 100%; margin-right: 0; margin-bottom: 6px; }
}

/* --- 微信一键登录按钮（第 241 轮）---
   ★ 只改配色（微信绿），几何形状全部继承 .uf-submit：
     宽度、内边距、字距、hover/active/disabled 四条状态都与「登 录」一致。
     自己再写一遍尺寸就会在两个按钮之间出现 1~2px 的高低差，
     而那正是"看着像贴上去的补丁"的来源。
   ★ 绿色取的是微信品牌绿的暗化版（深底浅字），不是亮绿 ——
     本页底色 #14100e，亮绿会刺眼且与金色主色调打架。 */
.uf-submit-wx {
    display: block;
    width: 100%;
    margin-top: 12px;
    color: #e8f5e0;
    background: -webkit-linear-gradient(top, #4f9e46, #2f7a2a);
    background: linear-gradient(to bottom, #4f9e46, #2f7a2a);
}
.uf-submit-wx:hover { box-shadow: 0 4px 18px rgba(79, 158, 70, 0.35); }