/* 瀚荒寰宇 · 全局样式 —— 一个文件管全站，改了这里所有页面都变 */

/* :root 里定义"变量"，后面用 var(--名字) 调用
   好处：想换配色只改这一处 */
:root {
    --bg: #f5f1e6;          /* 页面底色：宣纸米色 */
    --paper: #fffdf8;       /* 卡片/纸面 */
    --ink: #2b2b2b;         /* 主文字 */
    --ink-soft: #6f6a5f;    /* 次要文字 */
    --gold: #b8860b;        /* 暗金：主色 */
    --gold-light: #daa520;  /* 亮金：悬停 */
    --line: #e3dac1;        /* 描边 */
    --shadow: 0 2px 10px rgba(120, 100, 50, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--bg);
    /* 加一层很淡的径向光晕，营造"灵气"感 */
    background-image:
        radial-gradient(circle at 20% 0%, rgba(218, 165, 32, 0.10), transparent 55%),
        radial-gradient(circle at 85% 15%, rgba(184, 134, 11, 0.07), transparent 45%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: "KaiTi", "楷体", "STKaiti", serif;
    line-height: 1.8;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- 顶部栏 ---------- */
.topbar {
    position: sticky;   /* 滚动时吸在顶部 */
    top: 0;
    z-index: 10;
    background: rgba(255, 253, 248, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

/* 第一行：Logo | 登录/注册 */
.topbar-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;          /* 窄屏时登录区换到下一行，别撑出横向滚动条 */
    gap: 8px 16px;
    padding: 12px 24px 6px;
}

.topbar .brand {
    flex: none;
    font-size: 22px;
    font-weight: bold;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 2px;
    white-space: nowrap;
}

/* 最右：登录 / 注册 */
.topbar-auth {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* 名字 + 一堆按钮在窄屏也换行 */
    justify-content: flex-end;
    gap: 8px;
}

.topbar-auth .who {
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: color 0.2s, border-color 0.2s;
}

/* 点自己的名字 → 「我的」页面 */
.topbar-auth a.who:hover {
    color: var(--gold);
    border-bottom-color: rgba(184, 134, 11, 0.6);
}

.auth-btn {
    font-size: 14px;
    color: var(--ink-soft);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.auth-btn:hover {
    border-color: var(--gold);
    background: rgba(184, 134, 11, 0.08);
    color: var(--gold);
}

/* 「退出」是个 POST 表单（GET 会被人拿去强制登出），
   按钮得长得和旁边的链接一模一样 */
.logout-form { display: inline; }

button.auth-btn {
    font-family: inherit;
    line-height: inherit;
    background: none;
    cursor: pointer;
}

.auth-btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

.auth-btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    color: #fff;
}

/* 第二行：通往其他页面的小链接（靠右） */
.topbar-links {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 0 24px 8px;
}

/* 窄屏：搜索框单独占一行，导航链接换到下面 */
@media (max-width: 560px) {
    .topbar-links {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 6px;
        padding: 0 14px 8px;
    }

    .topbar-search {
        flex: none;
        width: 100%;
    }

    .topbar-main { padding: 10px 14px 6px; }

    .topbar .brand { font-size: 19px; letter-spacing: 1px; }
}

.topbar-links a {
    font-size: 13px;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 2px 9px;
    border-radius: 999px;
    transition: background-color 0.2s, color 0.2s;
}

.topbar-links a:hover {
    background: rgba(184, 134, 11, 0.12);
    color: var(--gold);
}

.topbar-search {
    display: flex;
    align-items: center;
    flex: 0 0 240px;
    width: 240px;
    height: 34px;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    margin: 0;
}

.topbar-nav-pages {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.mobile-menu { display: none; }

.topbar-search input[type="search"],
.global-search-page input[type="search"] {
    min-width: 0;
    padding: 7px 9px;
    border: 0;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    appearance: none;
}

.topbar-search input[type="search"] {
    flex: 1;
    width: 0;
    padding: 4px 9px;
    font-size: 14px;
    line-height: 1.2;
}

.topbar-search button {
    display: grid;
    flex: 0 0 26px;
    align-self: center;
    place-items: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gold);
    color: white;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.global-search-page {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.global-search-page input[type="search"] { width: min(100%, 420px); }

.search-results { margin-top: 28px; text-align: left; }
.search-results h3 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.search-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* 已经结束一生的 OC：搜索结果里给它一圈灰边，一眼看出它不在了 */
.search-result.is-ended {
    border: 1px solid #b6b6b6;
    border-radius: 8px;
    padding: 6px 10px;
    opacity: 0.75;
}

/* 所属势力已封存的帖子：和归墟一个调子 */
.search-result.is-sealed {
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    padding: 6px 10px;
    opacity: 0.72;
}

/* 「归墟」那一页的卡片：一律灰框，和名人录区分开 */
.oc-card.is-ended {
    border-color: #c4c4c4;
    background: #f3f1ec;
}

.oc-card.is-ended h3 { color: #5f5f5f; }

.world-time {
    margin-right: auto;
    color: var(--gold);
    font-size: 13px;
    white-space: nowrap;
}

.me-fold,
.admin-fold,
.admin-subfold,
.faction-create {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px 12px;
    text-align: left;
}

.me-fold > summary,
.admin-fold > summary,
.admin-subfold > summary,
.faction-create > summary {
    cursor: pointer;
    color: var(--gold);
    font-weight: bold;
}

.admin-subfold { margin: 8px 0; background: rgba(184, 134, 11, 0.035); }
.admin-fold[open] > summary,
.faction-create[open] > summary { margin-bottom: 12px; }
.admin-fold .admin-list { margin-top: 12px; }
.admin-subfold .admin-list { margin-top: 8px; }

.review-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

/* 势力：当前势力 / 待处理申请 —— 都用金黄色左边的纸面卡片 */
.faction-current,
.faction-application {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 16px;
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.07), var(--paper));
    text-align: left;
}

.faction-applications { margin: 0 0 22px; }

.faction-applications h3 {
    margin: 0 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
}

/* 势力排行：和风云榜同一套卡片语言 */
.faction-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faction-card {
    display: flex;
    align-items: flex-start;   /* 徽章跟标题顶部对齐，不要飘在卡片中间 */
    gap: 14px;
    padding: 14px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    text-align: left;
    transition: transform 0.2s ease, border-color 0.18s ease;
}

.faction-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
}

/* 已封存的势力：灰卡，和归墟一个调子 */
.faction-card.is-sealed {
    background: #f3f1ec;
    border-color: #c4c4c4;
    filter: grayscale(0.35);
}

.faction-card.is-sealed:hover {
    transform: none;
    border-color: #b6b6b6;
}

/* 名次徽章：和风云榜 .rank-no 同一套，前三名给金银铜 */
.faction-rank {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    margin-top: 1px;   /* 和势力名的基线对齐 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.08);
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1;
}

.faction-rank.is-top { color: #fff; font-weight: bold; }
.faction-rank.is-top-1 { background: linear-gradient(135deg, #d4af37, #b8860b); }
.faction-rank.is-top-2 { background: linear-gradient(135deg, #b8bcc4, #8d939c); }
.faction-rank.is-top-3 { background: linear-gradient(135deg, #c08a5a, #96603a); }

.faction-main { flex: 1 1 auto; min-width: 0; }

.faction-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

/* 势力名：金色链接，和名人录 / 风云榜里的名字一致（不是浏览器默认蓝） */
.faction-name {
    color: var(--gold);
    text-decoration: none;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 1px;
}

.faction-name:hover { text-decoration: underline; }

.faction-tag {
    font-size: 11px;
    color: #2f6b45;
    background: rgba(106, 155, 82, 0.12);
    border: 1px solid rgba(106, 155, 82, 0.32);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}

.faction-main p {
    margin: 7px 0 0;
    color: var(--ink-soft);
    font-size: 13px;
}

.faction-members { margin-top: 7px; }

.faction-members > summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 13px;
}

.faction-members > summary:hover { color: var(--gold); }
.faction-members p { font-size: 13px; margin: 6px 0 0; }

.faction-action {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;      /* 两个按钮并排，别让卡片右侧空一大块 */
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* 卡片右侧的这两个按钮是次要位置，用比全局 .btn 小一号的胶囊；
   另外 <a class="btn"> 和 <button class="btn"> 的高度算法不一样（inline-block 靠行高、
   button 有自己的行盒），不统一 height 会出现一个 46px、一个 36px */
.faction-action .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 13px;
    font-size: 13px;
    letter-spacing: 0;
    border-radius: 999px;
}

/* 抬 3px 在列表里太跳，收一点 */
.faction-action .btn:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

.faction-create { margin-top: 24px; }
.faction-list-section { margin-top: 24px; }

.review-list { list-style: none; padding: 0; text-align: left; }
.review-card { display: block; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px; }
.review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-verdict { display: flex; gap: 6px; flex-wrap: wrap; }
.review-verdict-note { color: var(--gold); }
.review-submit { margin: 18px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; text-align: left; }
.review-submit > summary { cursor: pointer; color: var(--gold); }

.history-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, clamp(340px, 38vw, 440px));
    gap: 14px;
    overflow-x: auto;
    padding: 4px 2px 14px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-color: var(--gold) var(--line);
    scrollbar-width: thin;
}

.history-browser {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-track { flex: 1; min-width: 0; }

.history-scroll-btn {
    display: grid;
    flex: 0 0 36px;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--gold);
    font: inherit;
    font-size: 20px;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.history-scroll-btn:hover:not(:disabled) {
    border-color: var(--gold);
    background: rgba(184, 134, 11, 0.08);
    transform: translateY(-1px);
}

.history-scroll-btn:disabled { opacity: 0.35; cursor: default; }

/* 史册第 4 期往后收在这个折叠块里 */
.history-more {
    margin: 12px 0 0;
    text-align: center;
}

.history-more > summary {
    cursor: pointer;
    padding: 8px 0;
    color: var(--gold);
    font-weight: bold;
    font-size: 14px;
}

.history-more[open] > summary { margin-bottom: 12px; }

/* 折叠块里的轨道没有外层 flex 容器，自己占满宽度并横向滚动 */
.history-track-static {
    flex: none;
    width: 100%;
    margin-top: 4px;
}

@keyframes page-item-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-item-entering {
    animation: page-item-in 190ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .history-scroll-btn { transition: none; }
    .page-item-entering { animation: none; }
}

.history-period {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    text-align: left;
    scroll-snap-align: start;
}
.history-heading h3 { color: var(--gold); }
.history-events { border-left: 3px solid #6a9b52; padding-left: 14px; }
.history-event { margin: 10px 0; }
.history-event h4, .history-ranking h4 { margin: 8px 0; }
.history-ranking ol { margin-top: 4px; }

.user-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    text-align: left;
}

.user-avatar {
    display: grid;
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.12);
    color: var(--gold);
    font-size: 21px;
}

.user-profile-info { flex: 1; min-width: 0; }
.user-profile-info h2 { margin: 0 0 4px; font-size: 22px; }
.user-profile-info p { margin: 0; font-size: 13px; }
.user-profile-ocs { max-width: 720px; margin: 0 auto; text-align: left; }
.user-profile-ocs h3 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }

.rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.rich-toolbar button {
    width: 34px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.rich-toolbar button:hover { border-color: var(--gold); color: var(--gold); }
.rich-toolbar input[type="color"] { width: 34px; height: 32px; padding: 2px; }

.rich-toolbar select.rich-size,
.rich-toolbar select.rich-font {
    height: 32px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.rich-toolbar select.rich-size { width: 64px; }
.rich-toolbar select.rich-font { width: 92px; }

.rich-editor textarea { display: block; width: 100%; }

/* ---------- 首页（进入洞府）---------- */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 52vh;
}

/* ---------- 内容容器 ---------- */
.container {
    flex: 1;
    width: 100%;
    max-width: 860px;   /* 手机上自动撑满，电脑上不会太宽 */
    margin: 0 auto;
    padding: 48px 20px 64px;
    text-align: center;
}

/* ---------- 标题与正文 ---------- */
h1 {
    font-size: 46px;
    letter-spacing: 6px;
    margin: 0 0 8px;
    color: var(--ink);
}

h2 {
    font-size: 30px;
    letter-spacing: 3px;
    margin: 0 0 24px;
    color: var(--ink);
}

.subtitle {
    color: var(--ink-soft);
    font-size: 17px;
}

/* ---------- 按钮 ---------- */
.btn {
    display: inline-block;
    background-color: var(--gold);
    color: #fff;
    padding: 12px 28px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    font-family: inherit;
    font-size: 17px;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
    background-color: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(184, 134, 11, 0.25);
}

/* 次要按钮：描边款 */
.btn-ghost {
    background: transparent;
    color: var(--gold);
}

.btn-ghost:hover {
    background: rgba(184, 134, 11, 0.10);
    color: var(--gold);
}

/* 只有图标的按钮（文字挪到 title / aria-label 里了）：收成方方正正一小块。
   不加这个的话，一个 emoji 会被 12px 28px 的内边距撑成一条扁扁的长条。 */
.btn.is-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    letter-spacing: 0;
}

.btn-sm.is-icon-only {
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ---------- 表单 ---------- */
.form-note {
    color: var(--ink-soft);
    font-size: 16px;
    margin-bottom: 18px;
}

input[type="text"],
input[type="password"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 320px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 17px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

/* 灰掉的按钮（额度用完时） */
.btn:disabled {
    background: #ddd7c8;
    border-color: #ddd7c8;
    color: #9c968a;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

textarea {
    max-width: 100%;
    line-height: 1.7;
    resize: vertical;
}

select { cursor: pointer; }

/* ---------- 表单字段（带标签的那种） ---------- */
.field {
    display: block;
    text-align: left;
    margin-bottom: 18px;
}

.field-label {
    display: block;
    font-size: 15px;
    color: var(--ink-soft);
    margin-bottom: 6px;
}

.field input,
.field textarea {
    width: 100%;
    max-width: 100%;
}

.field-hint {
    display: block;
    font-size: 12px;
    color: #a09880;
    margin-top: 5px;
}

/* ---------- 登录 / 注册卡片 ---------- */
.auth-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 34px 28px;
    box-shadow: var(--shadow);
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
}

.auth-card h2 { margin-bottom: 26px; }

.auth-card .btn { width: 100%; margin-top: 6px; }

.link {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(184, 134, 11, 0.5);
}

.link:hover { color: var(--gold-light); }

.dim { color: #a09880; font-size: 13px; }

/* ---------- 修士卡片列表 ---------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 24px;
    text-align: left;
}

.oc-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.oc-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 10px 22px rgba(120, 100, 50, 0.16);
}

.oc-card h3 {
    margin: 0 0 6px;
    font-size: 22px;
    letter-spacing: 2px;
}

/* "我的"小标签 */
.tag-mine {
    display: inline-block;
    vertical-align: middle;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0;
    color: #fff;
    background: var(--gold);
    border-radius: 999px;
    padding: 1px 8px;
}

.realm {
    color: var(--gold);
    font-weight: bold;
}

.meta {
    color: #a09880;
    font-size: 13px;
    margin: 6px 0 0;
}

/* 空状态提示 */
.empty {
    color: var(--ink-soft);
    padding: 40px 0;
}

/* ---------- Flash 提示条 ----------
   有 JS 时：这里只是"原文"，ui.js 读完会把它搬成右下角弹窗（.toast-*）
   没 JS 时：就照旧显示在页面顶部，提示不会丢 */
.flash {
    background: rgba(184, 134, 11, 0.10);
    border: 1px solid rgba(184, 134, 11, 0.35);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 24px;
    color: #7a5a08;
    font-size: 16px;
}

.flash p { margin: 0; }

.has-js .flash { display: none; }

/* ---------- 右下角弹窗 ----------
   不再把页面内容顶下去（position: fixed），所以操作后页面纹丝不动 */
.toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, calc(100vw - 32px));
    pointer-events: none;   /* 容器不挡点击，只有弹窗本身可点 */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 8px;
    background: var(--paper);
    box-shadow: 0 6px 20px rgba(120, 100, 50, 0.16);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    animation: toast-in 220ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.toast.is-leaving { animation: toast-out 180ms ease-in both; }

.toast-text { flex: 1 1 auto; margin: 0; }

.toast-close {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

.toast-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--ink);
}

/* 三档语气：成功 / 警告 / 普通 */
.toast-ok   { border-left-color: #2f6b45; }
.toast-warn { border-left-color: #a33c45; }
.toast-info { border-left-color: var(--gold); }

.toast-ok .toast-text   { color: #27573a; }
.toast-warn .toast-text { color: #8c333c; }
.toast-info .toast-text { color: #7a5a08; }

@keyframes toast-in {
    from { opacity: 0; transform: translate3d(14px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(0, 6px, 0); }
}

/* 手机上铺到底部整行，别挡住正文 */
@media (max-width: 520px) {
    .toast-stack {
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast, .toast.is-leaving { animation: none; }
    .toast.is-leaving { opacity: 0; }
}

/* ---------- 页脚 ---------- */
.footer {
    text-align: center;
    color: #a09880;
    font-size: 13px;
    padding: 24px 12px 32px;
    border-top: 1px solid var(--line);
}

/* ---------- 寰宇地图 ---------- */
.map-banner {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.14), rgba(218, 165, 32, 0.08));
    border: 1px dashed rgba(184, 134, 11, 0.55);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 22px;
    color: #7a5a08;
}

.map-banner strong { color: var(--gold); }

.map-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(110px, auto));
    gap: 12px;
    margin: 0 auto 8px;
    max-width: 820px;
}

/* 选择模式下每个格子外面包了一层 <form>。
   display:contents 让 form 本身"不存在于布局中"，
   这样内部的格子仍能直接参与上面的 3 列网格 */
.map-grid form { display: contents; }

/* 地图上的一个区域格子。用 button 是为了"选择模式"下能直接点。
   每个格子靠模板里内联的 --rc 拿到自己区域的主色，做出渐变背景 */
.map-tile {
    grid-row: var(--map-row);
    grid-column: var(--map-col);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 152px;
    padding: 16px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--rc, var(--gold));
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-family: inherit;
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    cursor: default;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* 一层从左上角化开的区域主色渐变 */
.map-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg,
                var(--rc, var(--gold)) 0%,
                rgba(255, 253, 248, 0) 62%);
    opacity: 0.15;
    pointer-events: none;
}

/* 右下角一个大色圆，做出"地貌"的感觉 */
.map-tile::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -42px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: var(--rc, var(--gold));
    opacity: 0.10;
    pointer-events: none;
}

/* 格子里的字要浮在上面两层装饰之上 */
.map-tile > * { position: relative; z-index: 1; }

/* 选择模式下才可点（app.py 传 choosing_oc 进来时加这个 class） */
.map-tile.clickable { cursor: pointer; }

.map-tile.clickable:hover {
    transform: translateY(-5px);
    border-color: var(--rc, var(--gold));
    box-shadow: 0 12px 26px rgba(43, 43, 43, 0.16);
}

/* 我自己的修士所在的区域，加一圈金边 */
.map-tile.is-mine {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(218, 165, 32, 0.42), var(--shadow);
}

.tile-glyph {
    font-size: 34px;
    line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.12));
}

.tile-name {
    font-size: 17px;
    letter-spacing: 2px;
    font-weight: bold;
    color: var(--rc, var(--ink));
}

.tile-desc { font-size: 12px; color: #9c947f; line-height: 1.5; }

.tile-count {
    font-size: 12px;
    color: #fff;
    background: var(--rc, var(--gold));
    border-radius: 999px;
    padding: 1px 10px;
    margin-top: 2px;
}

.map-tile .tile-count.zero {
    background: #d8d2c2;
    color: #857f6f;
}

/* 区域里的修士名字（小字） */
.tile-ocs {
    font-size: 12px;
    color: var(--rc, var(--gold));
    line-height: 1.6;
    word-break: break-all;
}

/* ---------- 我的修士 / 名额 ---------- */
.quota {
    color: var(--ink-soft);
    font-size: 15px;
    margin: 26px 0 4px;
}

.quota strong { color: var(--gold); }

.my-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
    text-align: left;
}

.my-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.my-card:hover { transform: translateY(-3px); border-color: var(--gold); }

.my-card .nm { font-size: 19px; letter-spacing: 2px; }
.my-card .loc { font-size: 13px; color: var(--ink-soft); }

.tag-pending {
    display: inline-block;
    font-size: 12px;
    color: #b06a00;
    background: rgba(255, 170, 0, 0.16);
    border-radius: 999px;
    padding: 1px 9px;
}

/* ---------- 修士详情页 ---------- */
.profile {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 30px 24px;
    box-shadow: var(--shadow);
    max-width: 520px;
    margin: 0 auto;
}

.profile .avatar { font-size: 46px; line-height: 1; }

.profile .pname {
    font-size: 34px;
    letter-spacing: 6px;
    margin: 8px 0 4px;
    color: var(--ink);
}

.profile dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 22px 0 0;
    text-align: left;
    font-size: 16px;
}

.profile dt { color: var(--ink-soft); }
.profile dd { margin: 0; color: var(--ink); }

.panel {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    max-width: 520px;
    margin: 18px auto 0;
    text-align: left;
}

.panel h3 {
    margin: 0 0 12px;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--ink);
}

.panel .row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.panel .row select { flex: 1; min-width: 160px; max-width: none; }

.btn-sm { padding: 9px 16px; font-size: 15px; }

/* 可展开的编辑面板 */
.panel > summary {
    cursor: pointer;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--ink);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel > summary::-webkit-details-marker { display: none; }

.panel > summary::after {
    content: "▾";
    color: var(--gold);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.panel[open] > summary::after { transform: rotate(180deg); }

.panel[open] > summary { margin-bottom: 16px; }

/* 长文本（设定 / 语录）：保留换行 */
.long-text {
    white-space: pre-wrap;
    word-break: break-word;
    color: #4a463d;
    font-size: 16px;
    line-height: 1.9;
    text-align: left;
}

/* 详情页顶部的一句话简介 */
.intro-line {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 10px 0 0;
}

/* 卡片上的一句话简介 */
.card-intro {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 2px 0 8px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-danger {
    background: #a33;
    border-color: #a33;
}

.btn-danger:hover {
    background: #c44;
    border-color: #c44;
    box-shadow: 0 8px 18px rgba(170, 51, 51, 0.28);
}

/* 「结束此生」比删除轻一档，所以是灰的：档案留着、名额还你，只是封存 */
.btn-muted {
    background: #8a8a8a;
    border-color: #8a8a8a;
}

.btn-muted:hover {
    background: #9d9d9d;
    border-color: #9d9d9d;
    box-shadow: 0 8px 18px rgba(90, 90, 90, 0.22);
}

/* 操作日志页的搜索行：输入框能伸能缩，按钮固定宽 */
.log-search { display: flex; gap: 10px; margin: 16px 0 20px; }
.log-search input { flex: 1 1 auto; width: auto; }
.log-search button { flex: 0 0 auto; }

/* ---------- OC 分享卡片（/oc/<id>/card）----------
   专门给人截图用，所以定宽、居中、不继承站内布局。
   ⚠ 那个页面不继承 base.html，整页的样式就靠这一段管 */
.card-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 16px;
    background: var(--bg);
}

.share-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    padding: 30px 28px 22px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--gold);   /* 截图时最扎眼的一条金边 */
    border-radius: 6px;
    box-shadow: var(--shadow);
    text-align: center;
}

/* 已结束一生：整张卡褪色，和归墟页一个调子 */
.share-card.is-ended {
    border-top-color: #b6b0a2;
    filter: grayscale(0.55);
}

.share-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 18px;
}

.share-card-brand {
    font-size: 12px;
    letter-spacing: 4px;
    color: var(--gold);
}

.share-card-tag {
    padding: 2px 8px;
    font-size: 11px;
    color: #7a7469;
    background: #efeade;
    border-radius: 10px;
}

.share-card-name {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: 1px;
    color: var(--ink);
    overflow-wrap: anywhere;             /* 超长名字不许把卡片撑破 */
}

.share-card-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.share-card-meta {
    font-size: 13px;
    color: var(--ink-soft);
}

.share-card-sep {
    margin: 0 6px;
    color: var(--line);
}

.share-card-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    font-size: 12px;
    color: var(--ink-soft);
}

.share-card-stat b {
    margin-left: 2px;
    font-size: 15px;
    color: var(--gold);
}

.share-card-quote {
    margin: 18px 0 0;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink);
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.share-card-back {
    margin: 0;
    font-size: 13px;
}

/* 卡片上的分节：经历 / 结义 / 印象
   ⚠ .share-card 是 text-align:center，这几块必须显式改回 left，
     否则正文会全部居中（在建议那一块跳过同样的坑） */
.share-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    text-align: left;
}

.share-section-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 3px;
    color: var(--gold);
}

.share-entry + .share-entry {
    margin-top: 12px;
}

.share-entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
    font-size: 11px;
    color: #a9a294;
}

.share-entry-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.share-friend-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.share-impression + .share-impression {
    margin-top: 10px;
}

.share-impression-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.share-impression-by {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    text-align: right;
    color: #a9a294;
}

/* 详情页里那个「生成分享卡片」按钮 */
.card-link-row {
    margin: 18px 0 0;
}

/* ---------- 借用授权（/me#trust）---------- */
.trust-form {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 12px 0 0;
}

.trust-sub {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: normal;
    color: var(--ink-soft);
}

/* ⚠ .container 是 text-align:center，这里用 flex 排版顺便避开居中 */
.trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 2px;
}

.trust-list li + li {
    border-top: 1px dashed var(--line);
}

.trust-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.trust-ok {
    font-size: 12px;
    color: #3f7d4f;
}

.trust-wait {
    font-size: 12px;
    color: #a9a294;
}

/* ---------- 写经历：出场角色 ---------- */
.actor-line {
    margin: 0 0 4px;
    font-size: 14px;
    color: var(--ink-soft);
}

.actor-line strong {
    color: var(--ink);
}

.tag-borrowed {
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 11px;
    color: #7a5c1e;
    background: #f4ead2;
    border-radius: 10px;
}

.actor-pick {
    margin: 10px 0 18px;
    font-size: 13px;
}

.actor-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    padding-top: 10px;
}

.actor-opt {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 「出场角色 ✕ 对方」那两个名字并排 */
.pair {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pair-x {
    font-size: 13px;
    color: var(--line);
}

.pair-actor {
    font-weight: 600;
    color: var(--gold);
}

.pair-target {
    font-weight: 600;
}

/* ---------- 势力：我名下的 OC 所在 / 加入时挑 OC / 职位 ---------- */
.my-faction-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

.my-faction-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 2px;
}

.my-faction-list li + li {
    border-top: 1px dashed var(--line);
}

/* 「拿哪个 OC 去加入」那个小表单 */
.oc-pick-form,
.faction-action form {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.fd-role {
    padding: 1px 8px;
    font-size: 12px;
    color: #7a5c1e;
    background: #f4ead2;
    border-radius: 10px;
}

.fd-members li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 2px;
}

.fd-members li + li {
    border-top: 1px dashed var(--line);
}

.fd-role-edit {
    margin-left: auto;
    font-size: 12px;
}

.fd-role-edit form {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
}

/* 已结束一生的 OC：详情页顶上给一行交代，整页只读 */
.ended-banner {
    text-align: center;
    color: #6b6b6b;
    background: rgba(110, 110, 110, 0.08);
    border: 1px solid rgba(110, 110, 110, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 18px;
}

/* ---------- 提建议（开发者看的列表） ----------
   ⚠ `.container` 是 text-align: center，不显式改回来的话，
     建议正文 / 回复 / 按钮全会跟着居中（这个坑踩过一次）。
     整块设一次 left，里面的东西自然就都正了。 */
.suggest-list { list-style: none; margin: 0; padding: 0; text-align: left; }

.suggest-form { text-align: left; }

.suggest-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    padding: 16px 18px;
    margin-bottom: 12px;
}

/* 建议是用户随手写的，可能带换行，得原样保留 */
.suggest-body {
    margin: 0 0 10px;
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 谁提的（只有开发者那一页用；匿名的会显示「匿名道友」） */
.suggest-author { color: var(--gold); }

/* 「我提过的」和开发者列表里的小标记：匿名 / 公开 */
.suggest-tag {
    padding: 2px 8px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-soft);
}

/* 提交表单里那两个勾选框并排 */
.suggest-opts { display: flex; gap: 22px; margin: 10px 0 14px; }

.suggest-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

/* ✕ 推到最右边，状态和时间留在左边 */
.suggest-foot form { margin-left: auto; }

.suggest-mine-title { margin: 32px 0 12px; }

/* 建议的处理状态：待处理 / 已处理 / 驳回 */
.suggest-status {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ink-soft);
}

.suggest-status.is-open { color: var(--gold); border-color: var(--gold); }
.suggest-status.is-resolved { color: #2e7d4f; border-color: #2e7d4f; }
.suggest-status.is-rejected { color: #a33; border-color: #a33; }

/* 站主的回复：提的人就是从这一块知道「改了什么」的 */
.suggest-reply {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    background: rgba(184, 134, 11, 0.06);
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

.suggest-reply-who { margin-right: 8px; color: var(--gold); }

/* 已经处理过的整条淡一点，和待处理的区分开 */
.suggest-item.is-done { opacity: 0.78; }

.suggest-act { margin-top: 12px; }

.suggest-act summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--gold);
    margin-bottom: 10px;
}

.suggest-choices { display: flex; gap: 18px; margin-bottom: 10px; }

/* 删 OC 的那一下：站主指定「一个大红框，里面只有『删除此oc』几个字」。
   红到这个程度是故意的 —— 这一下按错了东西就回不来了。 */
.danger-zone {
    margin: 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.danger-zone .btn {
    padding: 18px 44px;
    font-size: 18px;
    border-radius: 8px;
}

.readonly-note { color: var(--ink-soft); font-size: 14px; margin: 0; }

/* ---------- 论坛：次级导航（区域切换） ---------- */
.region-nav {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 14px 4px 2px;
}

.region-indicator {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 999px;
    background: var(--gold);
    pointer-events: none;
    will-change: transform, width, height;
    transition: transform 260ms cubic-bezier(0.2, 0.75, 0.25, 1),
                width 260ms cubic-bezier(0.2, 0.75, 0.25, 1),
                height 160ms ease;
}

.region-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink-soft);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.region-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.region-btn.active {
    background: transparent;
    border-color: transparent;
    color: #fff;
    font-weight: bold;
}

/* 区域前面的小圆点，颜色由 style 里的内联变量给 */
.region-btn .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.region-btn.active .dot { background: #fff !important; }

/* ---------- 论坛：帖子列表 ---------- */
.forum-head { margin: 20px 0 4px; }

.post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-top: 16px;
}

.post-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: var(--shadow);
    transition: opacity 0.26s ease, transform 0.26s ease, border-color 0.18s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
}

.post-card.is-entering {
    opacity: 0;
    transform: translateY(8px);
}

.post-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.post-card.is-visible:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
    .region-indicator,
    .post-card { transition: none !important; }
    .post-card.is-entering,
    .post-card.is-visible,
    .post-card.is-visible:hover { opacity: 1; transform: none; }
}

.post-card.is-entering {
    opacity: 0;
    transform: translateY(8px);
}

.post-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 260ms ease, transform 260ms ease, border-color 180ms ease;
}

.post-card.is-visible:hover { transform: translateY(-3px); }

.post-card.is-visible { transition-delay: var(--card-enter-delay, 0ms); }

/* ---------- 骨架屏（首次进论坛时的占位卡片） ---------- */
.post-card.is-skeleton {
    animation: none;
    transition: none;
}

.post-card.is-skeleton:hover {
    transform: none;
    border-color: var(--line);
}

.sk-line {
    height: 13px;
    border-radius: 6px;
    margin-bottom: 10px;
    background: linear-gradient(90deg,
        rgba(184, 134, 11, 0.10) 0%,
        rgba(184, 134, 11, 0.20) 50%,
        rgba(184, 134, 11, 0.10) 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s linear infinite;
}

.sk-title { width: 42%; height: 18px; }
.sk-meta  { width: 62%; height: 12px; }
.sk-text  { width: 100%; }
.sk-short { width: 58%; margin-bottom: 0; }

@keyframes sk-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* 列表正在换数据：只变淡，不清空（避免闪一下空白） */
.post-list.is-updating {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.post-title {
    margin: 0 0 8px;
    font-size: 19px;
    letter-spacing: 1px;
    color: var(--ink);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: #a09880;
    margin-bottom: 8px;
}

/* 区域小标签：颜色由 JS 通过 --tag-color 传进来 */
.region-tag {
    font-size: 12px;
    color: #fff;
    background: var(--tag-color, #8a8578);
    border-radius: 3px;
    padding: 2px 9px;
    white-space: nowrap;
}

.post-author { color: var(--gold); }

.post-excerpt {
    margin: 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.8;
}

.post-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed var(--line);
}

.like-form { display: inline-flex; margin: 0; }
.like-form .btn { padding: 4px 10px; font-size: 13px; }
.like-form .btn.is-liked { background: #a33c45; border-color: #a33c45; color: #fff; }
.like-count { color: #a33c45; font-size: 13px; }

/* 灰掉的小按钮（游客的「评论 · 请先登录」） */
.mini-locked {
    font-size: 13px;
    color: #b3ad9e;
    background: #f2eee4;
    border: 1px dashed #d9d3c3;
    border-radius: 999px;
    padding: 3px 12px;
    text-decoration: none;
    display: inline-block;
}

a.mini-locked:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ---------- 论坛：发帖区 ---------- */
.newpost {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px 18px;
    margin-top: 16px;
    text-align: left;
    box-shadow: var(--shadow);
}

.newpost > details > summary {
    cursor: pointer;
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 1px;
}

.newpost > details[open] > summary { margin-bottom: 14px; }

/* 游客看到的灰色「发帖」按钮 */
.guest-actions {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.btn-locked {
    display: inline-block;
    font-size: 15px;
    color: #b3ad9e;
    background: #f2eee4;
    border: 1px dashed #d9d3c3;
    border-radius: 6px;
    padding: 10px 22px;
    text-decoration: none;
}

.btn-locked:hover {
    color: var(--gold);
    border-color: var(--gold);
}

/* ---------- 顶部栏：OC 身份切换 ---------- */
.oc-switch { display: inline-flex; }

.oc-switch select {
    width: auto;
    max-width: 210px;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 999px;
    color: var(--gold);
    border-color: rgba(184, 134, 11, 0.45);
    background: rgba(184, 134, 11, 0.07);
}

/* 开发者标记 */
.dev-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0;
    color: #fff;
    background: linear-gradient(135deg, #b8860b, #daa520);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
    vertical-align: middle;
}

.topbar-links .link-admin {
    color: var(--gold);
    border: 1px dashed rgba(184, 134, 11, 0.5);
}

/* ---------- 帖子卡片：可点的标题 / 评论入口 ---------- */
.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover { color: var(--gold); }

.mini-link {
    font-size: 13px;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px dashed rgba(184, 134, 11, 0.5);
}

.mini-link:hover { color: var(--gold-light); }

/* ---------- 帖子详情页 ---------- */
.post-full {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 22px;
    box-shadow: var(--shadow);
    text-align: left;
}

.post-full-title {
    margin: 0 0 10px;
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--ink);
}

/* ---------- 评论区 ---------- */
.comments {
    max-width: 640px;
    margin: 24px auto 0;
    text-align: left;
}

.comments-title {
    font-size: 19px;
    letter-spacing: 2px;
    margin: 0 0 14px;
    color: var(--ink);
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 15px;
}

.comment-head {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 4px;
}

.comment-author {
    color: var(--gold);
    font-size: 14px;
    white-space: nowrap;
}

.comment-time { font-size: 12px; color: #b3ad9e; }

.comment-body {
    color: #4a463d;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- 论坛页：全局年度史时间线 ---------- */
.annals {
    max-width: 640px;
    margin: 32px auto 0;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

.annals-title {
    margin: 0 0 16px;
    font-size: 19px;
    letter-spacing: 2px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.annal-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 2px solid rgba(184, 134, 11, 0.35);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 时间线上的小圆点 */
.annal-item { position: relative; }

.annal-item::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

.annal-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.annal-era {
    color: var(--gold);
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
}

.annal-date { font-size: 12px; color: #b3ad9e; }

.annal-body {
    margin: 4px 0 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.8;
}

/* ---------- 开发者后台 ---------- */
.admin-block {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 18px;
    text-align: left;
    box-shadow: var(--shadow);
}

.admin-block h3 {
    margin: 0 0 14px;
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.table-wrap { overflow-x: auto; }

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table th,
.admin-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.admin-table th {
    color: var(--ink-soft);
    font-weight: normal;
    font-size: 13px;
}

.row-inline {
    display: flex;
    gap: 6px;
    align-items: center;
}

.row-inline select {
    width: auto;
    max-width: none;
    padding: 5px 9px;
    font-size: 13px;
}

.admin-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.admin-add input {
    flex: 1;
    min-width: 150px;
    max-width: none;
    font-size: 14px;
    padding: 9px 12px;
}

.admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-list li {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
}

.admin-list li .dim {
    flex: 1;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-list li.empty { color: var(--ink-soft); border-style: dashed; }

.inline-form { display: inline-flex; margin-left: auto; }

/* ---------- 加宽容器（论坛双栏用） ---------- */
.container-wide { max-width: 1180px; }

/* ---------- 顶部栏：提醒铃铛 ---------- */
.nav-bell {
    position: relative;
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 999px;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.2s, background-color 0.2s;
}

.nav-bell:hover { background: rgba(184, 134, 11, 0.1); }

.nav-bell.has-unread { filter: none; }

/* 未读红点 */
.bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    background: #d63c3c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    box-shadow: 0 0 0 2px var(--paper);
}

/* ---------- 论坛：双栏布局 ---------- */
.forum-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 22px;
    align-items: start;
    margin-top: 8px;
}

.forum-main { min-width: 0; }

/* 右栏：年度史。整栏吸在视口里，内部可以上下滑动 */
.forum-side {
    position: sticky;
    top: 92px;
    max-height: calc(100vh - 116px);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* 侧栏里的年度史去掉原来的居中限宽 */
.forum-side .annals {
    max-width: none;
    margin: 0;
}

/* 窗口变窄时先保正文：双栏要 1180 才舒展，一缩右栏就把帖子挤扁了。
   所以窄到 980 就改单栏，年度史顺到帖子下面（照样能滑动看） */
@media (max-width: 980px) {
    .forum-layout { grid-template-columns: 1fr; gap: 16px; }
    .forum-side {
        position: static;
        max-height: 45vh;
        order: 2;
    }
}

/* ---------- OC 详情页：号主的「对外设置」 ---------- */
/* 一行 = 开关名字 + 当前状态 + 切换按钮。两个开关（归属 / 收经历）
   都在这里，外观统一。 */
.oc-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(184, 134, 11, 0.22);
}

.oc-switch:last-child { border-bottom: 0; padding-bottom: 0; }

.oc-switch-name {
    flex: none;
    color: var(--gold);
    letter-spacing: 1px;
}

.oc-switch-state {
    flex: 1;
    min-width: 120px;
    color: var(--ink-soft);
    font-size: 14px;
}

.oc-switch form { flex: none; margin: 0; }

/* 窄屏下按钮换行到下一行，别把状态挤没 */
@media (max-width: 560px) {
    .oc-switch { gap: 8px; }
    .oc-switch-state { flex-basis: 100%; }
}

/* ---------- 提醒列表 ---------- */

/* 分栏 */
.notif-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 2px;
}

.notif-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.notif-tab:hover { border-color: var(--gold); color: #7a5a08; }

.notif-tab.is-current {
    background: rgba(184, 134, 11, 0.16);
    border-color: var(--gold);
    color: #7a5a08;
    font-weight: bold;
}

.notif-count { color: #a8a191; font-size: 13px; }
.notif-tab.is-current .notif-count { color: #9a7b1e; }

.notif-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;              /* 原来是 12px：一条条挨紧一点 */
    text-align: left;
}

.notif-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: hidden;      /* 整行链接的悬停底色别溢出圆角 */
}

/* 还没看过的那几条：金边 */
.notif-item.is-new {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.08), var(--paper));
}

/* 整行可点：内边距放在链接上，<li> 自己不留白 */
.notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
}

.notif-row:hover { background: rgba(184, 134, 11, 0.06); }

/* 未读的红点，比原来那个「新」标签省地方 */
.notif-item.is-new .notif-row::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d63c3c;
}

.notif-icon { flex: none; font-size: 16px; line-height: 1; }

.notif-main {
    flex: 1;
    min-width: 0;          /* 不加这个，里面那两行省略号在 flex 里不生效 */
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

.notif-author { flex: none; color: var(--gold); font-size: 14px; }

.notif-text {
    color: var(--ink-soft);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 正文只给一行预览 —— 「一条占太高」主要就高在这里 */
.notif-preview {
    color: #9a9484;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-time { flex: none; font-size: 12px; color: #a8a191; }

/* ---------- OC 详情页：角色档案 ---------- */
.oc-archive {
    max-width: 640px;
    margin: 24px auto 0;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

.archive-sub {
    margin: 16px 0 8px;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--ink-soft);
    font-weight: normal;
}

.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.archive-list li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 14px;
    color: #4a463d;
}

.archive-list li .dim { flex: none; }

/* ---------- 长列表懒渲染 ----------
   屏幕外的条目浏览器先不排版，滚到了才补上 —— 列表越长越省事。
   配 contain-intrinsic-size（auto 会记住上次的真实高度），滚动条长度不会乱跳。
   ⚠ 别加在 .post-card 上：forum.js 的 FLIP 动画要量卡片位置，
     没渲染的元素量出来是占位尺寸，动画会错位
   ⚠ 也别加在 .entry-table 的 <tr> 上：表格行上算 contain 各家浏览器行为不一致 */
.archive-list > li,
.card-grid > .oc-card,
.feed-list > .feed-item,
.sent-list > .sent-item,
.req-list > .req-item,
.friend-list > .friend-item,
.friend-chips > li,
.impression-list > li,
.pending-list > li {
    content-visibility: auto;
    contain-intrinsic-size: auto 96px;
}

/* ---------- 删除前先把那一条收起来 ----------
   不然内容是"啪"地一下整页消失，看着很突兀 */
.is-removing {
    animation: item-collapse 200ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
    pointer-events: none;
}

@keyframes item-collapse {
    from { opacity: 1; transform: translate3d(0, 0, 0); }
    to   { opacity: 0; transform: translate3d(-12px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .is-removing { animation: none; opacity: 0.4; }
}

/* ---------- 顶部栏：「编辑档案」入口 ---------- */
.edit-profile {
    font-size: 13px;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid rgba(184, 134, 11, 0.45);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s, transform 0.16s;
}

.edit-profile:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-2px);
}

/* ---------- 评论的回复 ---------- */
.reply-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(184, 134, 11, 0.3);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reply-thread { margin: 10px 0 0 14px; }
.reply-thread > summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 13px;
    list-style: none;
}
.reply-thread > summary::-webkit-details-marker { display: none; }
.reply-thread > summary::before { content: "+ "; color: var(--gold); }
.reply-thread[open] > summary::before { content: "- "; }

/* 评论 / 回复的操作区：与正文用虚线隔开，动作按钮统一成轻量胶囊 */
.comment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px dashed rgba(184, 134, 11, 0.22);
}

/* 操作区里每个动作都用一个容器包住（form / details）。
   容器统一成 block：里面的按钮是 inline-flex，行盒会多出 3px 基线间隙，
   三个容器都有这 3px 才能对齐（inline-flex 的容器没有，就会差一截）。 */
.comment-actions > form,
.comment-actions > details {
    display: block;
    margin: 0;
}

.comment-actions .btn,
.comment-actions .reply-box > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;              /* 三个动作写同一个高度，才能排成整齐的一行 */
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.comment-actions .btn:hover,
.comment-actions .reply-box > summary:hover {
    background: rgba(184, 134, 11, 0.1);
    color: var(--gold);
}

/* 操作区里不要那种「大按钮往上飘」的悬停效果，太跳 */
.comment-actions .btn:hover { transform: none; box-shadow: none; }

.comment-actions .btn-danger:hover {
    background: rgba(163, 60, 69, 0.1);
    color: #a33c45;
}

.comment-actions .btn.is-liked {
    background: rgba(163, 60, 69, 0.12);
    color: #a33c45;
}

/* ---------- 小图标按钮（删除这类次要动作用它，别占一大块） ---------- */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn-icon:hover {
    border-color: #a33c45;
    background: rgba(163, 60, 69, 0.1);
    color: #a33c45;
}

/* 在评论操作区里，要和旁边的胶囊按钮一样高 */
.comment-actions .btn-icon {
    width: 26px;
    height: 26px;
    border-color: transparent;
}

.comment-actions .btn-icon:hover {
    border-color: rgba(163, 60, 69, 0.4);
}

/* 帖子编辑面板底部的删除行：小字 + 小图标并排 */
.post-delete-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.post-delete-row .dim {
    font-size: 13px;
}

/* ---------- 算卦轮盘图标 ---------- */

.compass-glyph { display: block; }

.btn .compass-glyph {
    display: inline-block;
    margin-right: 5px;
    vertical-align: -2px;
}

/* 楼中楼里空间小，操作区再紧一点 */
.reply-item .comment-actions {
    margin-top: 8px;
    padding-top: 7px;
}

/* 「回复 某某」的提示标签 */
.reply-to {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(184, 134, 11, 0.1);
    color: var(--gold);
    font-size: 12px;
}

.comment-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 18px 0;
}

.reply-item {
    background: rgba(184, 134, 11, 0.045);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 9px 13px;
}

.reply-box { margin-top: 8px; }

.reply-box > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--gold);
    list-style: none;
    display: inline-block;
    padding: 2px 10px;
    border: 1px dashed rgba(184, 134, 11, 0.45);
    border-radius: 999px;
}

.reply-box > summary::-webkit-details-marker { display: none; }
.reply-box[open] > summary { margin-bottom: 10px; }

.reply-box textarea {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    margin-bottom: 8px;
}

/* ---------- OC 印象贴 ---------- */

.oc-impressions {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: left;
}

.impression-note {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ink-soft);
}

.impression-form { margin-bottom: 18px; }

.impression-form textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.8;
}

.impression-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

.impression-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.impression-item {
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-left: 3px solid rgba(184, 134, 11, 0.45);
    border-radius: 8px;
    background: var(--paper);
}

.impression-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
}

.impression-author {
    color: var(--gold);
    font-size: 14px;
    text-decoration: none;
}

.impression-author:hover { color: var(--gold-light); }

.impression-mine {
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(184, 134, 11, 0.12);
    color: var(--gold);
    font-size: 12px;
}

.impression-body {
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
    color: #4a463d;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- OC 档案：记录表 ---------- */
.entry-block {
    max-width: 760px;
    margin: 24px auto 0;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 22px;
    box-shadow: var(--shadow);
}

/* 号主的抽取面板 */
.draw-box {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.13), rgba(218, 165, 32, 0.06));
    border: 1px dashed rgba(184, 134, 11, 0.5);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    font-size: 15px;
    color: #7a5a08;
}

.draw-box strong { color: var(--gold); }

.entry-add {
    background: rgba(184, 134, 11, 0.05);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.entry-add > summary {
    cursor: pointer;
    font-size: 15px;
    color: var(--gold);
    list-style: none;
}

.entry-add > summary::-webkit-details-marker { display: none; }
.entry-add[open] > summary { margin-bottom: 14px; }

.entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.entry-table th,
.entry-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.entry-table th {
    color: var(--ink-soft);
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
}

.entry-date { white-space: nowrap; color: var(--gold); }
.entry-content { word-break: break-word; line-height: 1.7; }
.entry-src { white-space: nowrap; }

/* ---------- 窄屏：记录表改成竖排卡片 ----------
   手机（以及窄窗口）下表格的「年月日」和「来源」两列都是 nowrap，
   加起来能吃掉一百多像素，正文列被挤到只剩 40 来像素宽 ——
   一行放不下三个字，一段经历被拉成几十行，这就是排版崩掉的原因。
   下面把每行变成一张卡片：日期 → 正文（占满宽度）→ 来源/操作 一行。 */
@media (max-width: 760px) {
    .entry-table-wrap,
    .table-wrap { overflow-x: visible; }

    .entry-table thead { display: none; }

    .entry-table,
    .entry-table tbody { display: block; }

    .entry-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "date date"
            "text text"
            "src  ops";
        gap: 3px 8px;
        margin-bottom: 10px;
        padding: 11px 13px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--paper);
    }

    .entry-table td {
        display: block;
        padding: 0;
        border: 0;
        width: auto;
    }

    /* 日期和来源不再禁止换行，不然还是会把行撑宽 */
    .entry-date,
    .entry-src { white-space: normal; }

    .entry-date {
        grid-area: date;
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .entry-content {
        grid-area: text;
        font-size: 15px;
        line-height: 1.85;
    }

    /* 点赞按钮挪到正文下方单独一行，别挤在句尾 */
    .entry-content .like-form {
        display: block;
        margin-top: 8px;
    }

    .entry-src {
        grid-area: src;
        font-size: 12px;
        align-self: center;
    }

    .entry-ops {
        grid-area: ops;
        justify-self: end;
        align-self: center;
        align-items: center;
    }
}

.entry-ops {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.entry-edit > summary {
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-soft);
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 10px;
    display: inline-block;
}

.entry-edit > summary::-webkit-details-marker { display: none; }

.entry-edit[open] {
    flex-basis: 100%;
}

.entry-edit[open] > summary { margin-bottom: 8px; }

.entry-edit input,
.entry-edit textarea {
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    margin-bottom: 8px;
}

/* ---------- 瀚荒历：年 / 月 / 日 三个下拉 ---------- */
.era-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.era-cell {
    display: block;
    flex: 1;
    min-width: 88px;
}

.era-cell select {
    width: 100%;
    max-width: 100%;
    padding: 9px 8px;
    font-size: 15px;
}

/* ---------- 号主挑「别人给我写的经历」 ---------- */
.pending-box {
    background: rgba(184, 134, 11, 0.06);
    border: 1px dashed rgba(184, 134, 11, 0.45);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
}

.pending-title {
    font-size: 14px;
    color: var(--gold);
    margin-bottom: 10px;
}

.pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pending-list li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 13px;
}

.pending-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* 每条经历下面的「退回 / 收进档案」按钮，靠右放 */
.pending-act {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

/* ---------- 记录表表头 + 筛选/排序切换 ---------- */
.entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.entry-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* 来源筛选：全部 / 自己写 / 别人写 */
.src-toggle {
    display: flex;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.src-toggle a, .src-toggle .active {
    padding: 3px 11px;
    border-radius: 999px;
    text-decoration: none;
}

.src-toggle a {
    color: var(--ink-soft);
    border: 1px solid var(--line);
}

.src-toggle a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.src-toggle .active {
    background: var(--gold);
    color: #fff;
}

.entry-title {
    margin: 0;
    font-size: 19px;
    letter-spacing: 2px;
    color: var(--ink);
}

.order-toggle {
    display: flex;
    gap: 4px;
    font-size: 13px;
    white-space: nowrap;
}

.order-toggle a,
.order-toggle .active {
    padding: 3px 11px;
    border-radius: 999px;
    text-decoration: none;
}

.order-toggle a {
    color: var(--gold);
    border: 1px solid rgba(184, 134, 11, 0.4);
}

.order-toggle a:hover { background: rgba(184, 134, 11, 0.12); }

.order-toggle .active {
    background: var(--gold);
    color: #fff;
}

/* ---------- 后台的邀请码 ---------- */
.invite-code {
    font-family: Consolas, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--gold);
    background: rgba(184, 134, 11, 0.10);
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 6px;
    padding: 2px 10px;
    white-space: nowrap;
}

/* 邀请码「使用记录」：单独占一行 */
.invite-uses {
    flex-basis: 100%;
    font-size: 13px;
}

.invite-uses > summary {
    cursor: pointer;
    color: var(--gold);
    list-style: none;
}

.invite-uses > summary::-webkit-details-marker { display: none; }
.invite-uses[open] > summary { margin-bottom: 6px; }

.invite-uses ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 2px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    color: var(--ink-soft);
}

.invite-uses-none {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--ink-soft);
}

/* ---------- 「我的」页面 ---------- */
.me-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.me-avatar {
    width: 58px;
    height: 58px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--gold);
    background: linear-gradient(160deg, rgba(218, 165, 32, 0.22), rgba(184, 134, 11, 0.06));
    border: 1px solid rgba(184, 134, 11, 0.35);
}

.me-name {
    margin: 0 0 4px;
    font-size: 28px;
    letter-spacing: 2px;
}

.me-block {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 22px;
    margin-top: 20px;
    box-shadow: var(--shadow);
}

.me-title {
    margin: 0 0 6px;
    font-size: 19px;
    letter-spacing: 2px;
    color: var(--ink);
}

/* 我发出去的历程 */
.sent-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sent-item {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
}

.sent-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 5px;
    font-size: 13px;
}

.sent-to { color: var(--ink-soft); }
.sent-foot { margin-top: 6px; font-size: 12px; color: #a8a191; }

/* 经历的状态小标签 */
.st {
    font-size: 12px;
    border-radius: 999px;
    padding: 1px 10px;
    white-space: nowrap;
}

.st-wait {
    color: #8a6d1f;
    background: rgba(218, 165, 32, 0.16);
    border: 1px solid rgba(184, 134, 11, 0.3);
}

.st-ok {
    color: #2f7a3c;
    background: rgba(78, 158, 90, 0.14);
    border: 1px solid rgba(78, 158, 90, 0.35);
}

.st-no {
    color: #9a4b4b;
    background: rgba(180, 80, 80, 0.10);
    border: 1px solid rgba(180, 80, 80, 0.28);
}

/* 我的邀请码 */
.code-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 9px 12px;
    background: rgba(184, 134, 11, 0.04);
}

/* 已经用过的码淡下去 */
.code-item.code-used {
    opacity: 0.55;
    background: transparent;
}

.invite-code-input {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    font-family: Consolas, Menlo, monospace;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--gold);
    background: var(--paper);
    border: 1px solid rgba(184, 134, 11, 0.35);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
}

.code-state { font-size: 13px; color: var(--ink-soft); }
.code-free { color: #2f7a3c; }
.code-dead { color: #9a8f7f; }

/* 归属公开 / 隐藏 开关 */
.privacy-box {
    margin-left: auto;
    text-align: right;
}

.privacy-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
    max-width: 220px;
    line-height: 1.5;
}

/* 「我的」：道友列表 */
.friend-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friend-item {
    background: rgba(184, 134, 11, 0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 11px 14px;
}

.friend-head {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.friend-name {
    font-size: 16px;
    letter-spacing: 1px;
    color: var(--gold);
}

.friend-meta {
    margin-left: auto;
    font-size: 12px;
}

.friend-ocs {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.7;
    word-break: break-word;
}

/* 「我的」：道友申请 / 等对方同意 */
.req-box {
    background: rgba(218, 165, 32, 0.10);
    border: 1px dashed rgba(184, 134, 11, 0.55);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 14px 0;
}

.req-box.req-out {
    background: rgba(184, 134, 11, 0.04);
    border-style: solid;
    border-color: var(--line);
}

.req-title {
    font-size: 14px;
    color: var(--gold);
    margin-bottom: 8px;
}

.req-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.req-item {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
}

.req-src { font-size: 12px; }
.req-actions { margin-left: auto; display: flex; gap: 6px; }

/* 道友列表里的「解除」按钮 */
.friend-remove .btn {
    padding: 2px 10px;
    font-size: 12px;
}

/* 论坛里：道友发的帖子排在前面，加个标记和金色左边条 */
.post-card.is-friend {
    border-left: 3px solid var(--gold);
    background: linear-gradient(180deg, rgba(218, 165, 32, 0.07), var(--paper));
}

.friend-tag {
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, #b8860b, #daa520);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}

/* 帖子上标的瀚荒历日期：低调一点，别抢「道友」金标的风头 */
.post-era {
    font-size: 12px;
    color: #8a7a4f;
    background: rgba(184, 134, 11, 0.10);
    border: 1px solid rgba(184, 134, 11, 0.28);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}

/* 还没标瀚荒历的帖子：只有作者自己看得到，点进去就能补 */
a.post-era.is-missing {
    color: #a33c45;
    background: rgba(163, 60, 69, 0.08);
    border-color: rgba(163, 60, 69, 0.30);
    text-decoration: none;
}

a.post-era.is-missing:hover {
    background: rgba(163, 60, 69, 0.16);
}

/* ---------- 论坛翻页 ---------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 4px;
}

.pager-btn {
    box-sizing: border-box;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.pager-btn:hover:not(:disabled) {
    border-color: var(--gold);
    color: #7a5a08;
}

.pager-btn.is-current {
    background: rgba(184, 134, 11, 0.16);
    border-color: var(--gold);
    color: #7a5a08;
    font-weight: bold;
    cursor: default;
}

.pager-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pager-gap {
    color: #b3ad9e;
    padding: 0 2px;
}

/* 服务端渲染的翻页（名人录这种不用 fetch 的页面）：
   外观和上面完全一样，只是元素换成 <a> / <span>，
   所以得补上内联排版和去掉链接下划线。 */
a.pager-btn,
span.pager-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ---------- 风云榜 ---------- */
.rank-board {
    margin-top: 22px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.rank-title {
    margin: 0 0 12px;
    font-size: 19px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rank-icon { font-size: 17px; }

.rank-hint {
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0;
}

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px dashed var(--line);
    font-size: 15px;
}

.rank-item:last-child { border-bottom: 0; }

/* 名次徽章：前三名给金银铜 */
.rank-no {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.08);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1;
}

.rank-no.is-top { color: #fff; font-weight: bold; }
.rank-no.is-top-1 { background: linear-gradient(135deg, #d4af37, #b8860b); }
.rank-no.is-top-2 { background: linear-gradient(135deg, #b8bcc4, #8d939c); }
.rank-no.is-top-3 { background: linear-gradient(135deg, #c08a5a, #96603a); }

.rank-name {
    color: var(--gold);
    text-decoration: none;
    font-size: 16px;
}

.rank-name:hover { text-decoration: underline; }

.rank-where { flex: 1 1 auto; font-size: 13px; }

.rank-count {
    flex: 0 0 auto;
    min-width: 2.5em;
    text-align: right;
    font-size: 15px;
    color: #7a5a08;
}

/* 「展开看更多」 */
.rank-more { margin-top: 10px; }

.rank-more > summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--gold);
    padding: 4px 0;
}

.rank-more > summary:hover { color: var(--gold-light); }
.rank-more > summary .dim { font-size: 12px; }
.rank-more .rank-list { margin-top: 6px; }

/* ---------- 论坛搜索框 ---------- */
/* 跟区域按钮同一套语言：居中、宣纸底、暗金描边、楷体 */
.search-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 4px 2px;
}

.search-box {
    position: relative;
    /* 能伸能缩：右边还排着筛选控件，太死板就会被挤到下一行 */
    flex: 1 1 240px;
    min-width: 0;
    max-width: 420px;
}

/* 左边那个放大镜 */
.search-box::before {
    content: "🔍";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.55;
    pointer-events: none;
}

.search-row input[type="search"] {
    width: 100%;
    max-width: none;
    font-family: inherit;            /* 关键：不写这行就会用浏览器默认字体 */
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 16px 9px 42px;
    outline: none;
    -webkit-appearance: none;        /* 干掉浏览器自带的搜索框外观 */
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-row input[type="search"]:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.15);
}

.search-row input[type="search"]::placeholder {
    color: #b3ad9e;
    font-size: 14px;
}

/* 浏览器自带的搜索小叉叉 / 放大镜，跟国风不搭，全隐藏 */
.search-row input[type="search"]::-webkit-search-decoration,
.search-row input[type="search"]::-webkit-search-cancel-button,
.search-row input[type="search"]::-webkit-search-results-button,
.search-row input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.search-hint {
    flex-basis: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
}

/* ---------- 「只看道友」这类细筛选的小胶囊开关 ---------- */
.chip-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-sizing: border-box;
    height: 38px;                    /* 和旁边的搜索框一样高 */
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.chip-toggle .chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    transition: opacity 160ms ease;
}

.chip-toggle:hover:not(:disabled) {
    border-color: var(--gold);
    color: #7a5a08;
}

.chip-toggle[aria-pressed="true"] {
    background: rgba(184, 134, 11, 0.14);
    border-color: var(--gold);
    color: #7a5a08;
}

.chip-toggle[aria-pressed="true"] .chip-dot {
    background: var(--gold);
    opacity: 1;
}

.chip-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* 排序 / 时间范围这两个下拉，跟胶囊开关同一套语言 */
.chip-select {
    box-sizing: border-box;
    /* 全站那条 select 规则给的是 width:100%，不覆盖就会被撑成一大块，
       把搜索框挤到下一行去 */
    width: auto;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.chip-select:hover,
.chip-select:focus {
    border-color: var(--gold);
    color: #7a5a08;
    outline: none;
}

/* 顶部栏「私信」链接 */
.topbar-links .link-msg { position: relative; }
.topbar-links .bell-badge { margin-left: 4px; }

/* ---------- OC 结义 ---------- */
.oc-friend-box {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 18px 0;
    box-shadow: var(--shadow);
}

.friend-chips {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.friend-chips li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(184, 134, 11, 0.08);
    border: 1px solid rgba(184, 134, 11, 0.28);
    border-radius: 999px;
    padding: 4px 8px 4px 13px;
    font-size: 14px;
}

.friend-chips a { color: var(--gold); text-decoration: none; }
.friend-chips a:hover { text-decoration: underline; }

.chip-x {
    border: none;
    background: transparent;
    color: #b0a894;
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
    line-height: 1;
}

.chip-x:hover { color: #b45b5b; }

/* 结义名分：道友名字后面那个小金字 */
.friend-label {
    font-size: 12px;
    color: #7a5a08;
    background: rgba(184, 134, 11, 0.16);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}

/* 改名分的入口：一个铅笔，点开才出输入框。
   表单浮在上面 —— 直接塞进 chip 里会把它撑变形 */
.friend-chips li { position: relative; }

.label-edit { display: inline-block; }

.label-edit > summary {
    cursor: pointer;
    color: var(--gold);
    font-size: 12px;
    line-height: 1;
    padding: 0 3px;
    list-style: none;
}

.label-edit > summary::-webkit-details-marker { display: none; }
.label-edit > summary:hover { color: var(--gold-light); }

.label-edit[open] > summary { color: var(--gold-light); }

.label-edit .label-form {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
    white-space: nowrap;
}

.label-edit .label-form input[type="text"] {
    width: 150px;
    max-width: none;
    font-size: 13px;
    padding: 5px 10px;
}

/* ---------- 头衔（挂在账号上，别人授的） ---------- */
.user-titles {
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.user-titles > h3 {
    margin: 0 0 10px;
    font-size: 18px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.title-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.title-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    border: 1px solid rgba(184, 134, 11, 0.34);
    border-radius: 999px;
    background: linear-gradient(135deg,
        rgba(184, 134, 11, 0.14), rgba(218, 165, 32, 0.10));
    font-size: 14px;
}

.title-text {
    color: #7a5a08;
    font-weight: bold;
}

.title-from { font-size: 11px; }

/* 被自己藏起来的头衔：灰一点 + 虚框，一眼看出它没对外显示 */
.title-chip.is-hidden {
    background: rgba(120, 112, 96, 0.08);
    border-style: dashed;
    border-color: rgba(120, 112, 96, 0.38);
}

.title-chip.is-hidden .title-text {
    color: var(--ink-soft);
    font-weight: normal;
}

/* 每条的「眼睛」切换按钮 */
.title-eye {
    font-size: 12px;
    padding: 0 2px;
}

.title-eye:hover { color: var(--gold); }

/* 在别人主页上，藏起来的头衔只给自己看，就放个静态小锁 */
.title-eye-static {
    font-size: 11px;
    opacity: 0.7;
}

.title-grant { margin-top: 12px; }

.title-grant > summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--gold);
    padding: 4px 0;
}

.title-grant > summary:hover { color: var(--gold-light); }
.title-grant > summary .dim { font-size: 12px; }
.title-grant .field { margin-top: 10px; }

/* 道友名字做成链接后，保持原来的金色粗体 */
.friend-list .friend-name {
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
}

.friend-list .friend-name:hover { text-decoration: underline; }

/* ---------- 传音（私信）：会话列表 ---------- */
.conv-list { list-style: none; margin: 14px 0 0; padding: 0; }

/* 每一行 = 会话卡片 + 右边的置顶按钮。
   外边距放在行上（不在卡片上），不然按钮会被卡片的下边距顶歪。
   置顶按钮只能放在 <a> 外面：表单嵌在链接里是非法嵌套。 */
.conv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.conv-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    text-decoration: none;
    color: var(--ink);
    background: rgba(184, 134, 11, 0.03);
}

.conv-item:hover { border-color: var(--gold); }
.conv-item.has-unread { border-color: var(--gold); background: rgba(218, 165, 32, 0.10); }

/* 置顶的那一行：边线更实、底色更暖，一眼能和普通行分开 */
.conv-row.is-pinned .conv-item {
    border-color: rgba(184, 134, 11, 0.55);
    background: rgba(218, 165, 32, 0.07);
}

.conv-pin { flex: none; margin: 0; }

.conv-pin .btn-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
    border-color: transparent;
}

/* 覆盖 .btn-icon:hover 的红色（那是给「删除」用的，置顶不该是警告色） */
.conv-pin .btn-icon:hover {
    border-color: rgba(184, 134, 11, 0.45);
    background: rgba(184, 134, 11, 0.10);
    color: var(--gold);
}

.conv-pin .btn-icon.is-on {
    border-color: rgba(184, 134, 11, 0.5);
    background: rgba(218, 165, 32, 0.16);
}

.conv-name { font-size: 15px; color: var(--gold); letter-spacing: 1px; flex: none; }
.conv-last { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-soft); }
.conv-time { flex: none; font-size: 12px; }

.unread-flag { color: #c0392b; }

/* ---------- 私信：对话 ---------- */
.thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chat {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }

.chat-bubble {
    max-width: 78%;
    border-radius: 12px;
    padding: 9px 14px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.chat-row.mine .chat-bubble {
    background: linear-gradient(160deg, rgba(218, 165, 32, 0.20), rgba(184, 134, 11, 0.06));
    border-color: rgba(184, 134, 11, 0.35);
}

.chat-body { font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.chat-time { font-size: 11px; color: #a8a191; margin-top: 4px; text-align: right; }

.chat-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.chat-form textarea {
    flex: 1 1 320px;
    font-size: 15px;
}

/* ---------- 道友动态 ---------- */
.feed-list { list-style: none; margin: 14px 0 0; padding: 0; }

.feed-item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

.feed-item:last-child { border-bottom: none; }

.feed-kind {
    flex: none;
    font-size: 11px;
    color: #fff;
    background: var(--gold);
    border-radius: 4px;
    padding: 1px 6px;
}

.feed-kind.feed-exp { background: #6b8e6b; }
.feed-meta { margin-left: auto; font-size: 12px; }

/* ---------- 限流提示页 ---------- */
.rate-box {
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 40px 24px;
    box-shadow: var(--shadow);
}

.rate-glyph { font-size: 46px; line-height: 1; }

.rate-box h2 { margin: 12px 0 6px; letter-spacing: 4px; }
.rate-box .form-note { text-align: center; }

/* ---------- 安全自查页 ---------- */
.score-bar {
    height: 12px;
    background: #e8e2d4;
    border-radius: 999px;
    overflow: hidden;
    margin: 18px 0 6px;
}

.score-fill {
    height: 100%;
    background: linear-gradient(90deg, #b8860b, #daa520);
    border-radius: 999px;
    transition: width .4s ease;
}

.score-text {
    text-align: right;
    font-size: 13px;
    color: var(--gold);
    margin: 0 0 18px;
}

.sec-list { list-style: none; margin: 0; padding: 0; }

.sec-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 11px 14px;
    margin-bottom: 8px;
}

.sec-item.sec-ok   { border-left-color: #4e9e5a; }
.sec-item.sec-todo { border-left-color: #c9a227; }

.sec-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #fff;
    margin-top: 1px;
}

.sec-ok .sec-mark   { background: #4e9e5a; }
.sec-todo .sec-mark { background: #c9a227; }

.sec-body { flex: 1; min-width: 0; }
.sec-name { font-size: 15px; color: var(--ink); }

.sec-tag {
    font-size: 11px;
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
}

.sec-ok .sec-tag   { background: rgba(78, 158, 90, 0.14); color: #2f7a3c; }
.sec-todo .sec-tag { background: rgba(201, 162, 39, 0.16); color: #8a6d1f; }

.sec-note {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-top: 3px;
}

/* ---------- 手机适配 ---------- */
@media (max-width: 520px) {
    .me-head { gap: 12px; }
    .me-avatar { width: 46px; height: 46px; font-size: 20px; }
    .me-name { font-size: 22px; }
    .me-block { padding: 14px 16px; }
    .invite-code-input { font-size: 13px; padding: 5px 9px; }
    .pending-act form { flex: 1; }
    .pending-act .btn { width: 100%; }
    .me-head { flex-wrap: wrap; }
    .privacy-box { margin-left: 0; text-align: left; width: 100%; }
    .friend-meta { margin-left: 0; }
}
@media (max-width: 520px) {
    h1 { font-size: 34px; letter-spacing: 4px; }
    h2 { font-size: 24px; }
    .container { padding: 32px 16px 48px; }

    /* 手机顶栏保留品牌与快捷操作，其余入口收进菜单 */
    .topbar-main { flex-wrap: nowrap; gap: 8px; padding: 8px 12px 4px; }
    .topbar .brand { font-size: 18px; letter-spacing: 1px; }
    .world-time { flex: 1; margin: 0; text-align: center; font-size: 11px; }
    .topbar-auth {
        flex: none;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 4px;
    }
    .topbar-auth .oc-switch,
    .topbar-auth .edit-profile,
    .topbar-auth .who { display: none; }
    .topbar-auth .auth-btn { padding: 3px 9px; font-size: 12px; }
    .topbar-links { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 7px; gap: 8px; }
    .topbar-links > a { display: none; }
    .topbar-nav-pages { display: none; }
    .topbar-search { flex: 1 1 auto; order: 0; margin: 0; }
    .topbar-search input[type="search"] { flex: 1; width: 0; }
    .mobile-menu { display: block; position: relative; flex: none; }
    .mobile-menu > summary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 11px;
        border: 1px solid var(--line);
        border-radius: 5px;
        color: var(--ink-soft);
        background: var(--paper);
        cursor: pointer;
        list-style: none;
        font-size: 13px;
    }
    .mobile-menu > summary::-webkit-details-marker { display: none; }
    .mobile-menu[open] > summary { border-color: var(--gold); color: var(--gold); }
    .mobile-menu-panel {
        position: absolute;
        z-index: 30;
        top: calc(100% + 7px);
        right: 0;
        width: min(340px, calc(100vw - 24px));
        max-height: 70vh;
        overflow-y: auto;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--paper);
        box-shadow: var(--shadow);
    }
    .mobile-nav-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .topbar-links .mobile-nav-pages a {
        display: block;
        padding: 9px 8px;
        border-radius: 4px;
        background: rgba(184, 134, 11, 0.055);
        color: var(--ink);
        font-size: 13px;
    }
    .mobile-account {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--line);
        font-size: 13px;
    }
    .topbar-links .mobile-account a { padding: 4px 0; color: var(--gold); }
    .mobile-oc-switch { flex: 1 1 100%; }
    .mobile-oc-switch select { width: 100%; max-width: none; font-size: 13px; }
    .faction-card { align-items: flex-start; padding: 10px 4px; }
    .faction-action .btn { white-space: normal; }
    .user-profile-head { flex-wrap: wrap; gap: 10px; padding: 14px; }
    .user-profile-head > form { margin-left: auto; }

    /* 区域按钮放不下就横向滑动 */
    .region-nav {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px 2px 0;
        gap: 6px;
        scrollbar-width: none;
    }
    .region-nav::-webkit-scrollbar { display: none; }
    .region-btn { flex: none; font-size: 13px; padding: 5px 10px; }

    /* 手机上搜索框占满一整行 */
    .search-row { padding: 6px 2px 0; }
    .search-box { flex: 1 1 100%; }
    .search-row input[type="search"] { font-size: 14px; padding: 7px 14px 7px 38px; }
    .search-box::before { left: 13px; font-size: 12px; }

    .forum-page.container-wide { padding: 14px 12px 36px; }
    .forum-page .forum-head { margin: 8px 0 2px; }
    .forum-page .forum-head h2 { margin: 0 0 4px; font-size: 22px; }
    .forum-page .forum-head .subtitle { margin: 0; line-height: 1.4; }
    .forum-page .post-list { gap: 10px; margin-top: 12px; }

    .card-grid { grid-template-columns: 1fr; }
    .post-title { font-size: 17px; }

    /* 手机上论坛改回单栏，年度史挪到帖子下面，照样能滑动 */
    .forum-layout { grid-template-columns: 1fr; gap: 16px; }
    .forum-side {
        position: static;
        max-height: 45vh;
        order: 2;
    }

    /* 记录表在手机上紧凑一点 */
    .entry-block { padding: 16px 14px; }
    .entry-table { font-size: 13px; }
    .entry-table th,
    .entry-table td { padding: 7px 6px; }
    .edit-profile { padding: 3px 9px; font-size: 12px; }

    /* 手机上地图仍保持 3 列（才有"地图"的感觉），但把说明文字藏掉 */
    .map-grid { gap: 8px; }
    .map-tile { min-height: 98px; padding: 10px 6px; }
    .tile-glyph { font-size: 22px; }
    .tile-name { font-size: 14px; letter-spacing: 0; }
    .tile-desc { display: none; }
    .tile-count { font-size: 11px; padding: 1px 7px; }
    .tile-ocs { font-size: 11px; }
    .profile .pname { font-size: 26px; letter-spacing: 4px; }

    .lore-box { padding: 20px 16px 18px; }
    .lore-h2 { font-size: 19px; letter-spacing: 2px; }
    .page-title { font-size: 26px; letter-spacing: 2px; }
}

/* ---------- 世界观设定文档页 ---------- */
.page-title {
    font-size: 32px;
    letter-spacing: 4px;
    margin: 0 0 10px;
    color: var(--ink);
}

.page-desc {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.9;
    max-width: 640px;
    margin: 0 auto 26px;
}

.empty-box {
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 28px 20px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.5);
}

.muted { color: var(--ink-soft); font-size: 14px; }

/* 设定正文：白底卡片，长文读着不累 */
.lore-box {
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 30px 34px 26px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

.lore-h2 {
    font-size: 22px;
    letter-spacing: 3px;
    color: var(--gold);
    margin: 30px 0 14px;
    padding-left: 12px;
    border-left: 4px solid var(--gold);
    text-align: left;
}

/* 卡片里第一个大标题不要顶着上边框 */
.lore-box > .lore-h2:first-child { margin-top: 0; }

.lore-h3 {
    font-size: 17px;
    letter-spacing: 1px;
    color: var(--ink);
    margin: 20px 0 8px;
    text-align: left;
}

.lore-p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.95;
    margin: 8px 0;
    text-align: left;
}

.lore-li {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.9;
    margin: 6px 0 6px 18px;
    padding-left: 14px;
    border-left: 2px solid var(--line);
    text-align: left;
}

.lore-foot {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 26px;
}

/* ---------- 身份徽章（后台 / 将来顶部栏也能用）---------- */
.role-tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.7;
    white-space: nowrap;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    background: #faf8f3;
}

.role-reviewer {
    color: #1f6f8b;
    border-color: #b7dbe6;
    background: #eef8fb;
}

.role-admin {
    color: #8a5a00;
    border-color: #e8d3a0;
    background: #fdf6e6;
}

.role-developer {
    color: #fff;
    border-color: var(--gold);
    background: var(--gold);
    font-weight: 600;
}

/* 后台表格上方的规则说明 */
.admin-note {
    text-align: left;
    font-size: 13px;
    line-height: 1.9;
    color: var(--ink-soft);
    background: #faf8f3;
    border-left: 3px solid var(--gold);
    border-radius: 4px;
    padding: 10px 14px;
    margin: 0 0 14px;
}

/* ---------- 换页滑动过渡 ----------
   用浏览器原生的跨文档视图过渡：点站内链接时，旧页面左移淡出、
   新页面右移淡入。顶栏单独命名并禁用动画，跳转时保持静止不闪动。
   不支持的浏览器会忽略这些规则，照常瞬间跳转。 */
@view-transition {
    navigation: auto;
}

.topbar { view-transition-name: topbar; }

::view-transition-old(topbar),
::view-transition-new(topbar) {
    animation: none;
}

::view-transition-old(root) {
    animation: page-slide-out 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
    animation: page-slide-in 240ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes page-slide-out {
    to { opacity: 0; transform: translateX(-18px); }
}

@keyframes page-slide-in {
    from { opacity: 0; transform: translateX(18px); }
}

/* 不支持视图过渡时，至少让新页面内容轻轻淡入一次 */
@supports not (view-transition-name: none) {
    .container { animation: page-slide-in 240ms ease both; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    .container { animation: none !important; }
}

/* ---------- A. 折叠块平滑展开 ----------
   全站 30+ 个 <details> 原本点开是瞬间跳变，这里统一加平滑展开。
   用浏览器原生的 ::details-content（Chrome 131+ / Firefox 140+），
   不支持的浏览器自动退回瞬间展开，不会出错。 */
:root { interpolate-size: allow-keywords; }

details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition:
        block-size 200ms cubic-bezier(0.2, 0.75, 0.25, 1),
        opacity 160ms ease,
        content-visibility 200ms allow-discrete;
}

details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

/* 移动端菜单面板是绝对定位（脱离文档流），裁剪高度会被压成 0，
   所以单独放行，改用面板自身的位移动画 */
.mobile-menu::details-content {
    block-size: auto;
    overflow: visible;
    opacity: 1;
    transition: none;
}

.mobile-menu[open] .mobile-menu-panel {
    animation: menu-drop 180ms cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

@keyframes menu-drop {
    from { opacity: 0; transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    details::details-content { transition: none; }
    .mobile-menu[open] .mobile-menu-panel { animation: none; }
}

/* ---------- B. 点击 / 悬停微反馈 ----------
   克制路线：位移都在 3px 以内，时长 140–180ms，
   只为让"鼠标移上去了""真的点到了"有个交代。 */

/* 顶栏页面导航：hover 时金色下划线从左滑出 */
.topbar-nav-pages a { position: relative; }

.topbar-nav-pages a::after {
    content: "";
    position: absolute;
    left: 9px;
    right: 9px;
    bottom: 1px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.topbar-nav-pages a:hover::after { transform: scaleX(1); }

/* 全局搜索框：聚焦时描金边 + 一圈淡淡的光 */
.topbar-search {
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.topbar-search:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
}

/* 圆按钮按下时往里收一点（不然点完毫无感觉） */
.btn:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 9px rgba(184, 134, 11, 0.2);
}

.auth-btn {
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 140ms ease;
}

.auth-btn:active { transform: translateY(1px); }

/* 点赞：按下去时 ♥ 弹一下 */
.like-form .btn.is-popping {
    animation: like-pop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.nav-bell.is-arriving { animation: bell-wake 620ms ease-in-out both; }

@keyframes bell-wake {
    0%, 100% { transform: rotate(0); }
    18%, 54%, 82% { transform: rotate(-10deg); }
    36%, 68%, 94% { transform: rotate(10deg); }
}

.back-to-top {
    position: fixed;
    z-index: 25;
    right: max(18px, calc((100vw - 1180px) / 2));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--gold);
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.back-to-top:hover { border-color: var(--gold); background: rgba(184, 134, 11, 0.08); }

.btn.is-submitting { position: relative; overflow: hidden; }

.btn.is-submitting::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    height: 2px;
    background: rgba(255, 255, 255, 0.9);
    animation: submit-sweep 850ms ease-in-out infinite;
}

@keyframes submit-sweep {
    from { transform: translateX(-105%); }
    to { transform: translateX(250%); }
}

@keyframes like-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-nav-pages a::after,
    .topbar-search,
    .auth-btn { transition: none; }

    .btn:active:not(:disabled),
    .auth-btn:active { transform: none; }

    .like-form .btn.is-popping { animation: none; }
    .nav-bell.is-arriving { animation: none; }
    .back-to-top { transition: none; }
    .btn.is-submitting::after { animation: none; }
}

/* ---------- 天机罗盘（每日算卦） ---------- */

.omen-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 460px;
    margin: 26px auto 0;
}

.omen-compass {
    position: relative;
    display: grid;
    place-items: center;
    width: 132px;
    height: 132px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.10), transparent 70%);
}

/* 外圈：慢慢转的虚线环 */
.omen-compass::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px dashed rgba(184, 134, 11, 0.5);
    border-radius: 50%;
    animation: omen-spin 22s linear infinite;
}

/* 内圈：定住不动的细环 */
.omen-compass::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(184, 134, 11, 0.22);
    border-radius: 50%;
}

.omen-core {
    font-size: 40px;
    line-height: 1;
    animation: omen-breathe 5s ease-in-out infinite;
}

@keyframes omen-spin { to { transform: rotate(360deg); } }

@keyframes omen-breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.06); opacity: 1; }
}

/* 卜卦中：环转快起来，罗盘轻轻摇 */
.omen-stage.is-casting .omen-compass::before { animation-duration: 1.1s; }

.omen-stage.is-casting .omen-core {
    animation: omen-shake 620ms ease-in-out infinite;
}

@keyframes omen-shake {
    0%, 100% { transform: rotate(-6deg) scale(1.04); }
    50% { transform: rotate(6deg) scale(1.08); }
}

/* 今天已经算过了：静下来 */
.omen-stage.is-spent .omen-compass::before { animation-duration: 40s; opacity: 0.5; }
.omen-stage.is-spent .omen-core { animation: none; }

.omen-card {
    box-sizing: border-box;
    width: 100%;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow);
    text-align: center;
}

.omen-card.is-revealed { animation: omen-reveal 380ms cubic-bezier(0.2, 0.75, 0.25, 1) both; }

@keyframes omen-reveal {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.omen-result {
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 6px;
    color: var(--ink);
}

.omen-element {
    margin-top: 4px;
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--ink-soft);
}

.omen-poem {
    margin: 14px 0 8px;
    font-size: 17px;
    letter-spacing: 1px;
    color: var(--ink);
}

.omen-advice {
    margin: 0;
    font-size: 14px;
    line-height: 1.8;
    color: var(--ink-soft);
}

.omen-meta {
    margin-top: 12px;
    font-size: 12px;
    color: #b3ad9e;
}

/* 八种卦象配色：金紫蓝灰黑红 + 两个彩蛋 */
.omen-great {
    border-color: #d4a017;
    background: linear-gradient(180deg, rgba(212, 160, 23, 0.16), rgba(212, 160, 23, 0.03));
}
.omen-great .omen-result { color: #b8860b; text-shadow: 0 0 14px rgba(212, 160, 23, 0.5); }

.omen-good {
    border-color: #7a5cc4;
    background: linear-gradient(180deg, rgba(122, 92, 196, 0.13), transparent);
}
.omen-good .omen-result { color: #6a4bb8; }

.omen-mild {
    border-color: #3f7fb5;
    background: linear-gradient(180deg, rgba(63, 127, 181, 0.13), transparent);
}
.omen-mild .omen-result { color: #35709f; }

.omen-plain .omen-result { color: var(--ink-soft); }

.omen-bad {
    border-color: #6b6559;
    background: linear-gradient(180deg, rgba(107, 101, 89, 0.12), transparent);
}
.omen-bad .omen-result { color: #4a463d; }

.omen-dread {
    border-color: #a33c45;
    background: linear-gradient(180deg, rgba(163, 60, 69, 0.16), transparent);
}
.omen-dread .omen-result { color: #a33c45; }

.omen-hidden {
    border-color: #8a8578;
    border-style: dashed;
    background: repeating-linear-gradient(135deg,
                rgba(138, 133, 120, 0.08) 0 10px, transparent 10px 20px);
}
.omen-hidden .omen-result { font-size: 22px; letter-spacing: 3px; color: #6f6a5e; }

.omen-purple {
    border-color: #7a5cc4;
    background: linear-gradient(135deg, rgba(122, 92, 196, 0.2), rgba(212, 160, 23, 0.16));
}
.omen-purple .omen-result { color: #5f3fb0; text-shadow: 0 0 14px rgba(122, 92, 196, 0.45); }

.omen-form { margin: 0; }

.omen-streak {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}

.omen-streak strong { font-size: 16px; color: var(--gold); }

.omen-note {
    max-width: 460px;
    margin: 14px auto 0;
    font-size: 12px;
    line-height: 1.8;
    color: #b3ad9e;
    text-align: center;
}

.btn.omen-spent-btn {
    background: #ddd7c8;
    border-color: #ddd7c8;
    color: #9c968a;
    cursor: default;
}

/* 大凶彩蛋：当天抽到大凶的人，帖子带上血色边框 */
.post-card.is-dread {
    border-color: rgba(163, 60, 69, 0.55);
    box-shadow: 0 0 0 1px rgba(163, 60, 69, 0.16), var(--shadow);
}

/* 所属势力已封存 → 帖子也变灰（站主要的效果） */
.post-card.is-sealed {
    background: #f3f1ec;
    border-color: #cfcfcf;
    opacity: 0.82;
}

.post-card.is-sealed:hover {
    transform: none;
    border-color: #cfcfcf;
}

.post-card.is-sealed .post-title {
    color: #6b6b6b;
}

.post-full.is-dread {
    border-color: rgba(163, 60, 69, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .omen-compass::before,
    .omen-core,
    .omen-stage.is-casting .omen-core,
    .omen-card.is-revealed { animation: none; }
}

/* ---------- 世界观设定：网页编辑（管理员 / 开发者） ---------- */

.lore-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--ink-soft);
}

.lore-src { line-height: 1.7; }

.lore-editor textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 340px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.9;
    resize: vertical;
    white-space: pre-wrap;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.lore-editor textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.16);
    outline: none;
}

.lore-editor-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    text-align: left;
}

.lore-editor-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lore-editor-foot .form-note { margin: 0; }

.lore-reset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    text-align: left;
}

.lore-history-list {
    max-width: 900px;
    margin: 22px auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

.lore-history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.lore-history-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
    min-width: 0;
}

.lore-history-name { color: var(--ink); }

.lore-rollback-form { margin: 0; }

/* 版本差异：绿=新增，红=删除，灰=未变，淡金=分块位置 */
.lore-diff {
    max-width: 900px;
    margin: 30px auto 0;
    text-align: left;
}

.lore-diff-title {
    margin: 0 0 10px;
    font-size: 16px;
    color: var(--ink-soft);
}

.lore-diff-empty {
    max-width: 900px;
    margin: 26px auto 0;
    color: #b3ad9e;
    font-size: 13px;
    text-align: left;
}

.lore-diff-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
}

.lore-diff-line {
    padding: 4px 12px;
    border-left: 3px solid transparent;
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

.lore-diff-line.is-added {
    border-left-color: #2f6b45;
    background: rgba(47, 107, 69, 0.10);
    color: #24513a;
}

.lore-diff-line.is-removed {
    border-left-color: #a33c45;
    background: rgba(163, 60, 69, 0.09);
    color: #7d2c33;
    text-decoration: line-through;
}

.lore-diff-line.is-context { color: #a09880; }

.lore-diff-line.is-meta {
    background: rgba(184, 134, 11, 0.05);
    color: #b3ad9e;
    font-size: 12px;
}

@media (max-width: 520px) {
    .lore-history-item { align-items: flex-start; }
    .lore-history-main { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lore-editor textarea { transition: none; }
}

/* ---------- 势力详情页（/faction/<id>） ---------- */
.crumb {
    margin: 0 0 10px;
    font-size: 13px;
    text-align: left;
}

.crumb a { color: var(--ink-soft); }
.crumb a:hover { color: var(--gold); }

/* 详情页是「资料页」：头部和区块都左对齐，跟下面的按钮连成一条线 */
.fd-head {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
    text-align: left;
}

.fd-head h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 0 6px;
}

.fd-leader { margin: 6px 0 0; font-size: 14px; }

/* 未加入时的操作条 */
.fd-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}

.fd-note {
    margin: 0 0 18px;
    padding: 9px 14px;
    border-left: 3px solid var(--gold);
    background: rgba(184, 134, 11, 0.07);
    font-size: 13px;
    color: var(--ink-soft);
}

.fd-block {
    margin: 0 0 30px;
    scroll-margin-top: 80px;   /* 带 #锚点跳过来时别被顶栏盖住 */
    text-align: left;
}

.fd-block h3 {
    margin: 0 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

/* 盟主申请 */
.fd-lead-req { list-style: none; margin: 0; padding: 0; }

.fd-lead-req li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

.fd-lead-req li:last-child { border-bottom: none; }
.fd-lead-req form { display: inline; }
.fd-lead-req > li > span:first-child { flex: 1 1 auto; min-width: 0; }

/* 发帖 / 发公告的输入区 */
.fd-compose {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

.fd-compose textarea,
.fd-compose input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
}

.fd-compose button { align-self: flex-end; }

.fd-compose-details { margin: 0 0 14px; }

.fd-compose-details > summary {
    cursor: pointer;
    padding: 7px 0;
    color: var(--gold);
    font-size: 14px;
}

.fd-compose-details[open] > summary { margin-bottom: 8px; }

/* 公告列表 */
.fd-notices { list-style: none; margin: 0; padding: 0; }

.fd-notices > li {
    padding: 11px 13px;
    margin-bottom: 9px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 6px;
    background: rgba(184, 134, 11, 0.04);
}

.fd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 13px;
}

.fd-notices p {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    line-height: 1.8;
}

/* 群聊 */
.fd-chat-log {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 380px;
    overflow-y: auto;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(120, 112, 96, 0.035);
}

.fd-chat-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    line-height: 1.7;
}

.fd-chat-who {
    flex: 0 0 auto;
    font-weight: bold;
    color: var(--gold);
}

.fd-chat-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.fd-chat-time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--ink-soft);
    opacity: 0.75;
}

/* 自己说的话往右挪一点，一眼分得清 */
.fd-chat-line.is-mine .fd-chat-body { color: var(--ink); }
.fd-chat-line.is-mine .fd-chat-who::after { content: '（你）'; font-weight: normal; opacity: 0.7; }

.fd-chat-send { flex-direction: row; align-items: center; }

.fd-chat-send input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}

.fd-chat-send button { align-self: auto; flex: 0 0 auto; }

/* 势力内的帖子 */
.fd-posts { list-style: none; margin: 0; padding: 0; }

.fd-posts > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

.fd-posts > li:last-child { border-bottom: none; }
.fd-posts a { flex: 1 1 auto; min-width: 0; }

/* 势力已封存 → 那些帖子变灰（站主要的效果） */
.fd-posts > li.is-sealed { opacity: 0.62; }
.fd-posts > li.is-sealed a { color: #6b6b6b; }

/* 成员 */
.fd-members {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.fd-members > li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    background: rgba(245, 241, 230, 0.6);
}

/* 发帖表单里的勾选框一行 */
.field-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--ink-soft);
    cursor: pointer;
}

.field-check input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
}

/* ---------- 风云榜：地区筛选 + 六域活跃榜 ---------- */
.rank-regions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 4px;
}

.rank-region {
    box-sizing: border-box;
    padding: 4px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.7;
    text-decoration: none;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.rank-region:hover {
    border-color: var(--gold);
    color: #7a5a08;
}

.rank-region.is-current {
    background: rgba(184, 134, 11, 0.16);
    border-color: var(--gold);
    color: #7a5a08;
    font-weight: bold;
}

/* 六域那一行比普通名次行高一点：底下可能挂着「区内最活跃」 */
.rank-region-row {
    display: block;
    padding: 9px 4px;
}

.rank-region-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
}

.rank-region-name {
    color: var(--gold);
    font-size: 16px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.rank-region-more {
    margin: 6px 0 2px 36px;   /* 缩进到和名字对齐，别顶到名次徽章下面 */
    font-size: 13px;
}

.rank-region-more > summary {
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 13px;
}

.rank-region-more > summary:hover { color: var(--gold); }

.rank-region-more .rank-list { margin-top: 6px; }

.rank-item.is-sub {
    padding: 4px 0;
    font-size: 14px;
    border-bottom-style: dotted;
}

.rank-item.is-sub:last-child { border-bottom: 0; }

/* ============================================================
   举报 / 改密码 / 封禁
   ============================================================ */

/* ---------- 内容页上的举报：平时折成一个小胶囊 ---------- */

/* 在 .comment-actions 里的时候，要和旁边的点赞 / 回复一样高、一样淡 */
.comment-actions .report-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    list-style: none;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.comment-actions .report-toggle::-webkit-details-marker { display: none; }

.comment-actions .report-toggle:hover {
    background: rgba(163, 60, 69, 0.1);
    color: #a33c45;
}

.report-box[open] .report-toggle { color: #a33c45; }

/* 展开之后表单会占满一行，就跟旁边的胶囊排不到一起了 —— 让它自己独占一行 */
.report-box[open] {
    display: block;
    width: 100%;
}

.report-form {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(184, 134, 11, 0.035);
    text-align: left;
}

.report-form .field { margin-top: 10px; }
.report-form .field:first-of-type { margin-top: 0; }

/* 私信气泡里：气泡本身很窄，做成更小的一行 */
.chat-report {
    margin-top: 6px;
    text-align: right;
}

.chat-report .report-toggle {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 12px;
    cursor: pointer;
    list-style: none;
}

.chat-report .report-toggle::-webkit-details-marker { display: none; }

.chat-report .report-toggle:hover {
    background: rgba(163, 60, 69, 0.12);
    color: #a33c45;
}

/* 气泡在右侧时表单往左长，别撑破屏幕 */
.chat-report .report-form { width: min(330px, 74vw); }

/* ---------- 「我的」页：修改密码 ---------- */

.pw-form {
    max-width: 400px;
    margin-top: 12px;
    text-align: left;
}

/* ---------- 「我的」页：我提交的举报 ---------- */

.report-list { list-style: none; margin: 12px 0 0; padding: 0; }

.report-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(184, 134, 11, 0.22);
    font-size: 14px;
}

.report-item:last-child { border-bottom: 0; }

.report-kind { color: var(--gold); white-space: nowrap; }
.report-reason { color: var(--ink-soft); }

/* ---------- 后台：举报队列 ---------- */

.report-queue { list-style: none; margin: 12px 0 0; padding: 0; }

.report-row {
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.5);
}

/* 待处理的加一道左侧色条：一扫就知道哪些还要动手 */
.report-row.is-open {
    border-left: 3px solid #a33c45;
    background: rgba(163, 60, 69, 0.035);
}

.report-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.report-meta {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}

.report-detail {
    margin: 8px 0 0;
    font-size: 14px;
    white-space: pre-wrap;
}

.report-snapshot {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-left: 2px solid rgba(184, 134, 11, 0.5);
    background: rgba(184, 134, 11, 0.05);
    color: var(--ink-soft);
    font-size: 14px;
    white-space: pre-wrap;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.report-actions > form { display: block; margin: 0; }

.report-handle { display: flex; gap: 6px; }
.report-handle input { width: min(260px, 46vw); font-size: 13px; }

/* ---------- 后台：用户表里的行内操作（封禁 / 重置密码） ---------- */
/* 类名是中性的：同一个折叠控件两个地方都在用，别再叫 ban-* */

.op-fold { display: inline-block; }

.op-fold > summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}

.op-fold > summary::-webkit-details-marker { display: none; }

.op-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(184, 134, 11, 0.035);
}

/* 带输入框的那个（封禁：理由 + 时长）才需要固定宽度。
   不写宽度的话它就跟着内容走，表格列不会被莫名撑宽。 */
.op-form.is-wide { width: min(240px, 62vw); }

.op-form input { width: 100%; font-size: 13px; }
.op-form select { font-size: 13px; }

/* 重置出来的新密码：压在两个提示段上面，比较显眼 */
.reset-result {
    padding: 14px 16px;
    border: 1px solid var(--gold);
    border-left: 4px solid var(--gold);
    border-radius: 6px;
    background: rgba(184, 134, 11, 0.07);
}

.reset-result .invite-code-input { max-width: 320px; }
.reset-result .admin-note { margin: 10px 0 0; }

/* 封禁理由可能两行，用小字跟着状态标签下面 */
.ban-cell-note {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 760px) {
    /* 窄屏下举报表单和操作按钮都竖着排，按钮别挤成一条 */
    .report-actions { flex-direction: column; align-items: stretch; }
    .report-handle { flex-direction: column; }
    .report-handle input { width: 100%; }
    .op-form.is-wide { width: 100%; }
}